@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");:root{--bg-base:#0d0f14;--bg-surface:#141720;--bg-card:#1a1e2a;--bg-card-hover:#1f2433;--bg-input:#12151e;--border:#252b3b;--border-subtle:#1d2130;--accent-orange:#ee7f00;--accent-orange-dim:#c56a00;--accent-green:#2ecc71;--accent-red:#e74c3c;--accent-blue:#4a9eff;--status-ok:#2ecc71;--status-warn:#ee7f00;--status-error:#e74c3c;--status-info:#4a9eff;--status-neutral:#6b7a99;--text-primary:#e8ecf4;--text-secondary:#8892aa;--text-muted:#4a5568;--text-accent:#ee7f00;--text-link:#4a9eff;--font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code","Cascadia Code",monospace;--text-xs:11px;--text-sm:12px;--text-base:14px;--text-md:16px;--text-lg:20px;--text-xl:28px;--text-2xl:38px;--text-3xl:52px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-card:0 2px 8px rgba(0,0,0,.4);--shadow-modal:0 8px 32px rgba(0,0,0,.6);--transition-fast:120ms ease;--transition-base:200ms ease;--sidebar-width:240px;--topbar-height:48px}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--text-link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{margin:0}.mono{font-family:var(--font-mono)}.muted{color:var(--text-muted)}.secondary{color:var(--text-secondary)}.accent{color:var(--text-accent)}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh}.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow-y:auto;padding:var(--space-6) 0;display:flex;flex-direction:column}.nav-logo{padding:0 var(--space-5) var(--space-6);border-bottom:1px solid var(--border);margin-bottom:var(--space-5)}.nav-brand{display:flex;align-items:center;gap:var(--space-3)}.nav-brand-logo{width:34px;height:auto;flex-shrink:0}.nav-brand-text{display:flex;flex-direction:column}.nav-title{font-size:var(--text-lg);font-weight:700;color:var(--text-primary);line-height:1.1}.mag-logo{height:26px;width:auto;max-width:100%;object-fit:contain;display:block}.mag-logo--sm{height:18px}.nav-sub{font-size:var(--text-sm);letter-spacing:.02em;color:var(--text-muted);margin-top:2px}.nav-item{display:block;padding:var(--space-3) var(--space-5);font-size:var(--text-base);color:var(--text-secondary);border-left:3px solid transparent;transition:all var(--transition-fast);cursor:pointer}.nav-item:hover{color:var(--text-primary);background:var(--bg-card);text-decoration:none}.nav-item.active{color:var(--accent-orange);border-left-color:var(--accent-orange);background:rgba(238,127,0,.07);font-weight:500}.sidebar-footer{margin-top:auto;padding:var(--space-4) var(--space-5) 0;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}.sidebar-foot-row{display:flex;align-items:baseline;justify-content:center;gap:var(--space-2);flex-wrap:wrap}.sidebar-user{font-size:var(--text-sm);color:var(--text-secondary)}.app-version{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-mono)}.main{padding:var(--space-10) var(--space-12) var(--space-12);max-width:1400px;overflow-x:hidden}.page-title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-6)}.section-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:600;margin-bottom:var(--space-3)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5)}.card+.card{margin-top:var(--space-5)}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 14px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;font-family:var(--font-ui);cursor:pointer;border:1px solid transparent;transition:all var(--transition-fast);line-height:1}.btn:disabled{opacity:.5;cursor:default}.btn-primary{background:var(--accent-orange);color:#000;border-color:var(--accent-orange)}.btn-primary:not(:disabled):hover{background:var(--accent-orange-dim)}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border-color:var(--border)}.btn-secondary:not(:disabled):hover{border-color:var(--accent-orange);color:var(--accent-orange)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:not(:disabled):hover{color:var(--text-primary);background:var(--bg-card-hover)}.btn-danger{background:transparent;color:var(--status-error);border-color:rgba(231,76,60,.3)}.btn-danger:not(:disabled):hover{background:rgba(231,76,60,.1)}.btn-logout{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border)}.btn-logout:not(:disabled):hover{background:var(--bg-input);border-color:var(--accent-orange);color:var(--accent-orange)}.btn-sm{padding:4px 10px}.btn-sm,.tag{font-size:var(--text-xs)}.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-sm);font-weight:600;letter-spacing:.04em;white-space:nowrap}.tag-orange{background:rgba(238,127,0,.15);color:#ee7f00}.tag-green{background:rgba(46,204,113,.12);color:#2ecc71}.tag-red{background:rgba(231,76,60,.12);color:#e74c3c}.tag-blue{background:rgba(74,158,255,.12);color:#4a9eff}.tag-muted{background:rgba(107,122,153,.15);color:#8892aa}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.dot-green{background:#2ecc71;box-shadow:0 0 6px #2ecc71}.dot-orange{background:#ee7f00;box-shadow:0 0 6px #ee7f00}.dot-red{background:#e74c3c;box-shadow:0 0 6px #e74c3c}.dot-neutral{background:#6b7a99}.count-badge{font-size:var(--text-xs);color:var(--text-muted);background:var(--bg-input);padding:2px 7px;border-radius:var(--radius-full)}.count-badge--alert{background:rgba(231,76,60,.2);color:var(--status-error)}.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.table th{text-align:left;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:600;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border)}.table td{padding:var(--space-3);border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:middle}.table td.primary{color:var(--text-primary);font-weight:500}.table tr:hover td{background:hsla(0,0%,100%,.02)}.table code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent-orange);background:rgba(238,127,0,.08);padding:1px 5px;border-radius:3px}.input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;color:var(--text-primary);font-size:var(--text-base);font-family:var(--font-ui);width:100%;transition:border-color var(--transition-fast);outline:none}.input:focus{border-color:var(--accent-orange)}.input::placeholder{color:var(--text-muted)}.input-label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:6px;display:block}.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border);margin-bottom:var(--space-5)}.tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-base);color:var(--text-secondary);cursor:pointer;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--transition-fast);font-family:var(--font-ui)}.tab:hover{color:var(--text-primary)}.icon{width:1em;height:1em;flex-shrink:0}.tab .icon{width:16px;height:16px}.tab.active{color:var(--accent-orange);border-bottom-color:var(--accent-orange);font-weight:500}.metric-grid{display:flex;flex-wrap:wrap;gap:var(--space-5)}.metric-card{flex:1 1 260px;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-4) var(--space-5);flex-direction:column;text-align:center}.metric-card,.metric-title{display:flex;align-items:center}.metric-title{width:100%;justify-content:center;min-height:28px;margin-bottom:var(--space-4)}.metric-caption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}.metric-caption b{color:var(--text-secondary);font-weight:700}.donut{position:relative;width:132px;height:132px}.donut svg{width:100%;height:100%;transform:rotate(-90deg)}.donut-track{fill:none;stroke:var(--border)}.donut-arc{fill:none;stroke:var(--accent-orange);stroke-linecap:round;transition:stroke-dashoffset var(--transition-base)}.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.donut-value{font-size:var(--text-2xl);font-weight:800;color:var(--text-primary);line-height:1}.donut-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:var(--space-1)}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.row,.row-between{display:flex;align-items:center}.row-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.thumb{object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);display:block}.thumb,.thumb-empty{width:56px;height:36px}.thumb-empty{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-input)}.empty{color:var(--text-muted);font-size:var(--text-sm);padding:var(--space-6);text-align:center}.errmsg{color:var(--status-error);font-family:var(--font-mono);font-size:var(--text-xs)}