:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-xl: 22px;--r-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 12px 32px rgba(0,0,0,.12)}[data-theme=dark]{--bg-app: #0b1020;--bg-elev: #131a2e;--bg-elev-2: #1c2540;--bg-input: #0f1626;--border: #2a3556;--border-soft: #1f2942;--text: #e8edf7;--text-muted: #8b97b8;--text-faint: #5b6688;--primary: #3b82f6;--primary-hover: #2563eb;--primary-soft: rgba(59,130,246,.14);--primary-text: #ffffff;--secondary: #06b6d4;--accent: #f59e0b;--success: #10b981;--success-soft: rgba(16,185,129,.14);--warning: #f59e0b;--warning-soft: rgba(245,158,11,.14);--error: #ef4444;--error-soft: rgba(239,68,68,.14);--info: #6366f1;--info-soft: rgba(99,102,241,.14);--gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.18), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(6,182,212,.1), transparent 55%)}[data-theme=light]{--bg-app: #f5f7fb;--bg-elev: #ffffff;--bg-elev-2: #f0f3fa;--bg-input: #ffffff;--border: #d7deea;--border-soft: #e6ebf4;--text: #0f172a;--text-muted: #516087;--text-faint: #8794ad;--primary: #2563eb;--primary-hover: #1d4ed8;--primary-soft: rgba(37,99,235,.1);--primary-text: #ffffff;--secondary: #0891b2;--accent: #d97706;--success: #059669;--success-soft: rgba(5,150,105,.12);--warning: #d97706;--warning-soft: rgba(217,119,6,.12);--error: #dc2626;--error-soft: rgba(220,38,38,.1);--info: #4f46e5;--info-soft: rgba(79,70,229,.1);--gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,.1), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(8,145,178,.08), transparent 55%)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-faint)}.app-shell{display:grid;grid-template-columns:256px 1fr;min-height:100vh}.app-shell.is-collapsed{grid-template-columns:72px 1fr}.sidebar{background:var(--bg-elev);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;padding:var(--space-5) var(--space-3);position:sticky;top:0;height:100vh;transition:padding .2s ease;z-index:20}.brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2);margin-bottom:var(--space-6)}.brand-logo{width:40px;height:40px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--primary),var(--secondary));display:grid;place-items:center;font-weight:800;color:#fff;font-size:18px;flex-shrink:0;box-shadow:0 6px 18px #3b82f659}.brand-name{font-weight:700;font-size:16px;letter-spacing:-.02em;white-space:nowrap}.brand-sub{font-size:11px;color:var(--text-muted);font-weight:500;white-space:nowrap}.nav{display:flex;flex-direction:column;gap:4px;flex:1}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--r-md);color:var(--text-muted);font-weight:500;font-size:14px;transition:all .18s ease;white-space:nowrap}.nav-item:hover{background:var(--bg-elev-2);color:var(--text)}.nav-item.active{background:var(--primary-soft);color:var(--primary);font-weight:600}.nav-item svg{width:20px;height:20px;flex-shrink:0}.nav-label{transition:opacity .2s ease}.is-collapsed .nav-label,.is-collapsed .brand-name,.is-collapsed .brand-sub{opacity:0;pointer-events:none}.is-collapsed .nav-item{justify-content:center}.sidebar-footer{padding-top:var(--space-4);border-top:1px solid var(--border-soft);margin-top:var(--space-4)}.theme-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-3);border-radius:var(--r-md);color:var(--text-muted);font-size:14px;font-weight:500;transition:all .18s ease}.theme-toggle:hover{background:var(--bg-elev-2);color:var(--text)}.theme-toggle svg{width:18px;height:18px}.collapse-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--space-2);margin-top:var(--space-2);border-radius:var(--r-md);color:var(--text-faint);transition:all .18s ease}.collapse-btn:hover{background:var(--bg-elev-2);color:var(--text)}.collapse-btn svg{width:18px;height:18px;transition:transform .2s ease}.is-collapsed .collapse-btn svg{transform:rotate(180deg)}.main{padding:var(--space-6) var(--space-7);max-width:1400px;width:100%;overflow-x:hidden}@media (max-width: 768px){.main{padding:var(--space-5) var(--space-4)}}.page-header{margin-bottom:var(--space-6)}.page-title{font-size:28px;font-weight:700;letter-spacing:-.03em}.page-subtitle{color:var(--text-muted);margin-top:var(--space-1);font-size:15px}.card{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-5);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.card:hover{border-color:var(--border)}.card-title{font-weight:600;font-size:16px;margin-bottom:var(--space-2)}.card-desc{color:var(--text-muted);font-size:14px}.hero{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:var(--space-7);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-hero);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:640px}.hero h1{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.15}.hero p{color:var(--text-muted);margin-top:var(--space-3);font-size:16px}.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-5)}.stat-card{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);transition:transform .2s ease,box-shadow .2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-icon{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0}.stat-value{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1}.stat-label{color:var(--text-muted);font-size:13px;font-weight:500}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-4)}.feature-card{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);cursor:pointer;transition:all .22s ease;text-align:left}.feature-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg)}.feature-icon{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center}.feature-card h3{font-size:17px;font-weight:600}.feature-card p{color:var(--text-muted);font-size:14px}.feature-arrow{color:var(--primary);font-weight:600;font-size:14px;margin-top:auto;display:flex;align-items:center;gap:var(--space-1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--r-md);font-weight:600;font-size:14px;transition:all .18s ease;white-space:nowrap}.btn-primary{background:var(--primary);color:var(--primary-text)}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 18px #3b82f659}.btn-ghost{background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--text-faint);background:var(--bg-elev)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:13px}.search-wrap{position:relative;margin-bottom:var(--space-5)}.search-input{width:100%;padding:var(--space-4) var(--space-4) var(--space-4) 48px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:15px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.search-input::placeholder{color:var(--text-faint)}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--text-faint);pointer-events:none}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.badge-critical{background:var(--error-soft);color:var(--error)}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-info{background:var(--info-soft);color:var(--info)}.badge-success{background:var(--success-soft);color:var(--success)}.badge-neutral{background:var(--bg-elev-2);color:var(--text-muted)}.error-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}.error-item{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-4) var(--space-5);transition:border-color .2s ease}.error-item:hover{border-color:var(--border)}.error-item-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-2)}.error-code{font-family:var(--font-mono);font-size:14px;font-weight:600;background:var(--bg-elev-2);padding:4px 10px;border-radius:var(--r-sm);color:var(--primary)}.error-issue{font-weight:600;font-size:15px}.error-desc{color:var(--text-muted);font-size:14px;margin:var(--space-2) 0 var(--space-3)}.error-fix{display:flex;flex-direction:column;gap:var(--space-2)}.error-fix-item{display:flex;gap:var(--space-2);font-size:14px;color:var(--text);padding:var(--space-2) var(--space-3);background:var(--success-soft);border-radius:var(--r-sm);border-left:3px solid var(--success)}.error-fix-num{font-weight:700;color:var(--success);flex-shrink:0}.bloat-item{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-4) var(--space-5);transition:border-color .2s ease}.bloat-item:hover{border-color:var(--border)}.bloat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.bloat-proc{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--text)}.bloat-meta{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.bloat-reco{margin-top:var(--space-3);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}@media (max-width: 700px){.bloat-reco{grid-template-columns:1fr}}.bloat-reco-block{background:var(--bg-elev-2);border-radius:var(--r-md);padding:var(--space-3)}.bloat-reco-label{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}.bloat-reco-text{font-size:13px;color:var(--text-muted)}.bloat-issues{margin-top:var(--space-3);font-size:13px;color:var(--text-muted);font-style:italic}.bloat-methods{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}.compat-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}.compat-item{background:var(--bg-elev);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--space-4) var(--space-5);transition:border-color .2s ease}.compat-item:hover{border-color:var(--border)}.compat-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}.compat-comp-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--r-full);background:var(--primary-soft);color:var(--primary)}.compat-q{font-weight:600;font-size:15px}.compat-a{color:var(--text-muted);font-size:14px;margin:var(--space-2) 0 var(--space-3)}.compat-steps{display:flex;flex-direction:column;gap:var(--space-2)}.compat-step{display:flex;gap:var(--space-3);font-size:14px;padding:var(--space-2) var(--space-3);background:var(--bg-elev-2);border-radius:var(--r-sm)}.compat-step-num{width:22px;height:22px;border-radius:var(--r-full);background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}.filter-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}.filter-chip{padding:var(--space-2) var(--space-4);border-radius:var(--r-full);background:var(--bg-elev-2);color:var(--text-muted);font-size:13px;font-weight:500;border:1px solid transparent;transition:all .18s ease}.filter-chip:hover{color:var(--text);border-color:var(--border)}.filter-chip.active{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}.empty-state{text-align:center;padding:var(--space-7);color:var(--text-muted)}.empty-state svg{width:48px;height:48px;color:var(--text-faint);margin-bottom:var(--space-3)}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-up{animation:fadeUp .35s ease both}.fade-up-1{animation-delay:.05s}.fade-up-2{animation-delay:.1s}.fade-up-3{animation-delay:.15s}.fade-up-4{animation-delay:.2s}.mobile-topbar{display:none;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--bg-elev);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:30}.mobile-menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);color:var(--text)}.mobile-menu-btn:hover{background:var(--bg-elev-2)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:15}@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;width:256px;transform:translate(-100%);transition:transform .25s ease}.app-shell.is-mobile-open .sidebar{transform:translate(0)}.app-shell.is-mobile-open .sidebar-overlay{display:block}.mobile-topbar{display:flex}.is-collapsed .nav-label,.is-collapsed .brand-name,.is-collapsed .brand-sub{opacity:1}.is-collapsed .nav-item{justify-content:flex-start}.is-collapsed .collapse-btn{display:none}}