@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-deep:#050508;--bg-panel:#0d0d12;--bg-hover:#15151c;--brand-violet:#8b35ff;--brand-violet-dim:#8b35ff26;--brand-blue:#21a7ff;--brand-pink:#ff4fd8;--text-main:#f0f0f5;--text-dim:#7a7a8c;--text-muted:#525266;--border-subtle:#ffffff0f;--border-active:#ffffff1f;--success:#00e676;--warning:#ffb300;--danger:#ff1744;--sidebar-width:220px;--topbar-height:60px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-main);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,sans-serif;font-size:12px;line-height:1.5;overflow:hidden}::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}.app-layout{width:100vw;height:100vh;display:flex}.main-content{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.view-container{flex:1;padding:20px 24px;overflow-y:auto}.panel{background-color:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;padding:16px;display:flex;position:relative;overflow:hidden}.panel-header{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:Outfit,sans-serif;font-size:12px;font-weight:600;display:flex}.text-h1{color:#fff;letter-spacing:-.5px;font-family:Outfit,sans-serif;font-size:20px;font-weight:700}.text-h2{color:#fff;font-family:Outfit,sans-serif;font-size:16px;font-weight:600}.text-value-large{letter-spacing:-.5px;font-family:Outfit,sans-serif;font-size:24px;font-weight:700}.text-value-medium{font-family:Outfit,sans-serif;font-size:18px;font-weight:600}.text-label{color:var(--text-dim);font-size:11px;font-weight:500}.text-micro{color:var(--text-muted);font-size:10px}.color-violet{color:var(--brand-violet)}.color-blue{color:var(--brand-blue)}.color-pink{color:var(--brand-pink)}.color-success{color:var(--success)}.color-warning{color:var(--warning)}.color-danger{color:var(--danger)}.btn{cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;gap:6px;padding:8px 12px;font-family:Inter,sans-serif;font-size:12px;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background:var(--brand-violet);color:#fff}.btn-primary:hover{background:#7826e5}.btn-secondary{color:var(--text-main);border:1px solid var(--border-subtle);background:#ffffff0a}.btn-secondary:hover{border-color:var(--border-active);background:#ffffff14}.btn-ghost{color:var(--text-dim);background:0 0}.btn-ghost:hover{color:#fff;background:#ffffff0d}.input-dark{border:1px solid var(--border-subtle);color:#fff;background:#0000004d;border-radius:6px;outline:none;width:100%;padding:8px 12px;font-family:Inter,sans-serif;font-size:12px}.input-dark:focus{border-color:var(--brand-violet);background:#00000080}.data-table{border-collapse:collapse;width:100%;font-size:12px}.data-table th{text-align:left;color:var(--text-dim);border-bottom:1px solid var(--border-subtle);padding:8px 12px;font-weight:500}.data-table td{border-bottom:1px solid #ffffff05;padding:10px 12px}.badge{text-transform:uppercase;border-radius:4px;padding:4px 6px;font-size:10px;font-weight:600}.badge-green{color:var(--success);background:#00e6761a}.badge-violet{color:var(--brand-violet);background:#8b35ff1a}.badge-blue{color:var(--brand-blue);background:#21a7ff1a}.badge-yellow{color:var(--warning);background:#ffb3001a}.progress-container{background:#ffffff0f;border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar{border-radius:2px;height:100%}.grid-cols-2{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.grid-cols-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-cols-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-col{flex-direction:column;display:flex}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}