@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg:#0a0a0f;--surface:#12121a;--surface-2:#1a1a24;--surface-3:#22222e;--border:#2a2a38;--border-light:#363648;--accent:#6c63ff;--accent-glow:#6c63ff40;--accent-hover:#7d75ff;--cyan:#00d4ff;--cyan-glow:#00d4ff33;--success:#00e87a;--success-bg:#00e87a1a;--danger:#ff4757;--danger-bg:#ff47571a;--warning:#ffa502;--warning-bg:#ffa5021a;--text:#f0f0ff;--text-2:#b0b0cc;--text-muted:#686888;--text-dim:#505068;--font:"Inter", system-ui, sans-serif;--mono:"JetBrains Mono", "Fira Code", monospace;--radius-sm:6px;--radius:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 2px 8px #0006;--shadow:0 4px 24px #00000080;--shadow-lg:0 8px 48px #0009;--transition:.15s cubic-bezier(.4, 0, .2, 1);--transition-slow:.3s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg:#f4f4f8;--surface:#fff;--surface-2:#f0f0f6;--surface-3:#e8e8f0;--border:#d4d4e4;--border-light:#c4c4d8;--text:#0d0d1a;--text-2:#3a3a58;--text-muted:#7070a0;--text-dim:#a0a0c0;--shadow-sm:0 2px 8px #0000000f;--shadow:0 4px 24px #0000001a;--shadow-lg:0 8px 48px #00000024;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-size:16px}[data-theme=light] html,html[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}img,svg{display:block}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,textarea,select{font-family:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}h1{letter-spacing:-.03em;font-size:2.5rem;font-weight:800;line-height:1.1}h2{letter-spacing:-.02em;font-size:1.75rem;font-weight:700}h3{letter-spacing:-.01em;font-size:1.25rem;font-weight:600}h4{font-size:1rem;font-weight:600}.mono{font-family:var(--mono)}.up{color:var(--success)}.down{color:var(--danger)}.neutral-color{color:var(--text-2)}.badge{letter-spacing:.04em;text-transform:uppercase;border-radius:20px;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge.success{background:var(--success-bg);color:var(--success)}.badge.danger{background:var(--danger-bg);color:var(--danger)}.badge.warning{background:var(--warning-bg);color:var(--warning)}.badge.accent{background:var(--accent-glow);color:var(--accent)}.badge.neutral{background:var(--surface-3);color:var(--text-2)}.card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}.card-sm{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.btn{border-radius:var(--radius);transition:all var(--transition);white-space:nowrap;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;display:inline-flex}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 20px var(--accent-glow)}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 32px var(--accent-glow);transform:translateY(-1px)}.btn-secondary{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-ghost{color:var(--text-2);padding:8px 12px}.btn-ghost:hover{color:var(--text);background:var(--surface-3);border-radius:var(--radius-sm)}.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #ff47574d}.btn-danger:hover{background:var(--danger);color:#fff}.input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);transition:all var(--transition);outline:none;padding:12px 16px;font-size:.95rem}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.input::placeholder{color:var(--text-dim)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px var(--accent-glow)}50%{box-shadow:0 0 40px var(--accent-glow)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-in{animation:.4s forwards fadeIn}.animate-scale-in{animation:.3s forwards fadeInScale}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-spin{animation:.8s linear infinite spin}.divider{background:var(--border);height:1px;margin:16px 0}.grid-2{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}@media (max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}h1{font-size:1.75rem}h2{font-size:1.4rem}}
