:root{--bg: #0a0e17;--bg-surface: #111827;--bg-card: #1a2235;--bg-card-hover: #1e2842;--bg-elevated: #243049;--cyan: #22d3ee;--cyan-dim: #0e7490;--cyan-glow: rgba(34, 211, 238, .15);--purple: #a78bfa;--purple-dim: #6d28d9;--purple-glow: rgba(167, 139, 250, .15);--green: #34d399;--green-dim: #059669;--amber: #fbbf24;--amber-dim: #b45309;--red: #f87171;--red-dim: #b91c1c;--text: #e2e8f0;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-dim: #64748b;--border: #1e293b;--border-focus: #334155;--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--font-ui: "Inter", system-ui, -apple-system, sans-serif;--header-height: 56px;--radius: 6px;--radius-lg: 10px;--transition-fast: .12s ease;--transition: .2s ease;--transition-slow: .35s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(34,211,238,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.02) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0}#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-focus);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}::selection{background:#22d3ee4d;color:var(--text)}a{color:var(--cyan);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--text)}.mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-dim{color:var(--text-dim)}.app-header{height:var(--header-height);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:32px;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-header__logo{font-family:var(--font-mono);font-weight:700;font-size:1.15rem;color:var(--cyan);letter-spacing:-.5px;display:flex;align-items:center;gap:8px;-webkit-user-select:none;user-select:none}.app-header__logo-icon{width:24px;height:24px;border-radius:4px;background:linear-gradient(135deg,var(--cyan),var(--purple));display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--bg);font-weight:700}.app-header__nav{display:flex;gap:4px}.app-header__nav a{padding:6px 14px;border-radius:var(--radius);font-size:.85rem;font-weight:500;color:var(--text-muted);transition:all var(--transition-fast)}.app-header__nav a:hover{color:var(--text);background:var(--bg-card)}.app-header__nav a.active{color:var(--cyan);background:var(--cyan-glow)}.page{flex:1;padding:24px;max-width:1600px;margin:0 auto;width:100%}.page-wide{max-width:100%;padding:16px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.card-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}.card-header h3{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.card-body{padding:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:var(--radius);font-family:var(--font-ui);font-size:.85rem;font-weight:500;border:none;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--cyan);color:var(--bg)}.btn-primary:hover:not(:disabled){background:#06b6d4;box-shadow:0 0 16px #22d3ee4d}.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--border-focus)}.btn-danger{background:var(--red-dim);color:var(--text)}.btn-danger:hover:not(:disabled){background:var(--red);color:var(--bg)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.badge-cyan{background:var(--cyan-glow);color:var(--cyan)}.badge-purple{background:var(--purple-glow);color:var(--purple)}.badge-green{background:#34d39926;color:var(--green)}.badge-amber{background:#fbbf2426;color:var(--amber)}.badge-red{background:#f8717126;color:var(--red)}.badge-gray{background:#94a3b826;color:var(--text-muted)}.tier-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-family:var(--font-mono);font-size:.75rem;font-weight:700}.tier-1{background:#34d39933;color:var(--green);border:2px solid var(--green)}.tier-2{background:#fbbf2433;color:var(--amber);border:2px solid var(--amber)}.tier-3{background:#94a3b833;color:var(--text-muted);border:2px solid var(--text-dim)}.tier-4{background:#f8717133;color:var(--red);border:2px solid var(--red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-glow{0%,to{box-shadow:0 0 #22d3ee66}50%{box-shadow:0 0 12px 2px #22d3ee33}}@keyframes slide-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes scan-line{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.animate-slide-in{animation:slide-in .2s ease forwards}table{width:100%;border-collapse:collapse}th{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.85rem}tr:hover td{background:#22d3ee08}.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;color:var(--text-muted)}.empty-state__icon{font-size:2.5rem;margin-bottom:16px;opacity:.4}.empty-state__title{font-size:1.1rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.empty-state__desc{font-size:.85rem;max-width:360px}
