:root{--bg: #0f172a;--panel: #111827;--panel-2: #0b1220;--muted: #94a3b8;--text: #e5e7eb;--primary: #2563eb;--primary-700: #1d4ed8;--ring: rgba(37, 99, 235, .4);--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--border: rgba(148, 163, 184, .15)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 800px at 80% -10%,#0b1220 40%,#0f172a 60%);color:var(--text)}.app-shell{display:grid;grid-template-columns:260px 1fr;grid-template-rows:64px 1fr;grid-template-areas:"sidebar topbar" "sidebar content";height:100vh;overflow:hidden}.sidebar{grid-area:sidebar;background:linear-gradient(180deg,var(--panel),var(--panel-2));border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:12px}.brand{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#2563eb26,#2563eb0d);border:1px solid rgba(37,99,235,.25);box-shadow:inset 0 1px #ffffff0a}.brand .logo{width:28px;height:28px;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#60a5fa,#2563eb);border-radius:8px}.brand .title{font-weight:700;letter-spacing:.3px}.nav{display:flex;flex-direction:column;gap:6px;margin-top:6px}.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--muted);text-decoration:none;transition:all .16s ease;border:1px solid transparent}.nav a:hover{background:#94a3b812;color:#e2e8f0;border-color:var(--border)}.nav a.active{background:linear-gradient(180deg,#2563eb2e,#2563eb14);color:#eaf2ff;border-color:#2563eb59;box-shadow:0 0 0 3px var(--ring)}.nav .section{margin:12px 8px 6px;font-size:12px;letter-spacing:.08em;color:#64748b;text-transform:uppercase}.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0f172ab3,#11182799);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}.search{display:flex;align-items:center;gap:10px;background:#94a3b814;border:1px solid var(--border);padding:8px 12px;border-radius:10px;width:420px}.search input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-size:14px}.user{display:flex;align-items:center;gap:12px}.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#2563eb26;border:1px solid rgba(37,99,235,.25)}.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1e293b,#0b1220);border:1px solid var(--border)}.content{grid-area:content;padding:18px;overflow:auto;display:flex;flex-direction:column}.page{background:linear-gradient(180deg,#ffffff05,#ffffff03);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 10px 30px #02061766;flex:1;display:flex;flex-direction:column;min-height:0}.page h1{margin:0 0 14px;font-size:22px}.page .muted{color:var(--muted)}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.kpi{background:radial-gradient(200px 120px at 80% -20%,rgba(37,99,235,.22),transparent),linear-gradient(180deg,#94a3b814,#94a3b80a);border:1px solid var(--border);border-radius:12px;padding:14px}.kpi .label{color:var(--muted);font-size:12px}.kpi .value{font-size:20px;font-weight:700;margin-top:6px}.kpi .delta.up{color:var(--success);font-size:12px}.kpi .delta.down{color:var(--danger);font-size:12px}.card{background:linear-gradient(180deg,#94a3b814,#94a3b80d);border:1px solid var(--border);border-radius:12px;padding:14px}.footer{margin-top:16px;color:var(--muted);font-size:12px;text-align:center}@media(max-width:1024px){.app-shell{grid-template-columns:80px 1fr}.brand .title,.nav a span{display:none}.search{width:260px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.app-shell{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;grid-template-areas:"topbar" "sidebar" "content"}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}.page h1{font-size:22px;line-height:1.2}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}