:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-accent: #22d3ee;--color-bg: #0f0f1a;--color-surface: #1a1a2e;--color-surface-2: #22223a;--color-border: #2d2d4e;--color-text: #e2e8f0;--color-text-muted: #94a3b8;--color-success: #10b981;--color-warning: #f59e0b;--color-danger: #ef4444;--sidebar-width: 240px;--radius: 10px}[data-theme=light]{--color-bg: #f8fafc;--color-surface: #ffffff;--color-surface-2: #f1f5f9;--color-border: #e2e8f0;--color-text: #0f172a;--color-text-muted: #64748b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Be Vietnam Pro,system-ui,sans-serif;background-color:var(--color-bg);color:var(--color-text);font-size:14px;line-height:1.6;min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}.app-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.main-content{flex:1;overflow-y:auto;background:var(--color-bg);display:flex;flex-direction:column}.page-header{padding:20px 28px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;justify-content:space-between;gap:16px}.page-body{padding:24px 28px;flex:1}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;transition:border-color .2s,box-shadow .2s}.card:hover{border-color:var(--color-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-primary) 20%,transparent)}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none;white-space:nowrap;flex-shrink:0}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-outline{background:transparent;border-color:var(--color-border);color:var(--color-text)}.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-ghost{background:transparent;color:var(--color-text-muted)}.btn-ghost:hover{background:var(--color-surface-2);color:var(--color-text)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.badge-success{background:color-mix(in srgb,var(--color-success) 15%,transparent);color:var(--color-success)}.badge-warning{background:color-mix(in srgb,var(--color-warning) 15%,transparent);color:var(--color-warning)}.badge-danger{background:color-mix(in srgb,var(--color-danger) 15%,transparent);color:var(--color-danger)}.badge-primary{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary)}.badge-muted{background:var(--color-surface-2);color:var(--color-text-muted)}input,select,textarea{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);padding:8px 12px;font-size:13px;outline:none;transition:border-color .15s;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent)}table{width:100%;border-collapse:collapse}th{text-align:left;padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}td{padding:12px 16px;border-bottom:1px solid var(--color-border);color:var(--color-text)}tr:hover td{background:var(--color-surface-2)}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px}.stat-value{font-size:28px;font-weight:700;color:var(--color-text)}.stat-label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-change{font-size:12px;font-weight:500}.stat-change.up{color:var(--color-success)}.stat-change.down{color:var(--color-danger)}.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:8px;margin:1px 8px;color:var(--color-text-muted);cursor:pointer;text-decoration:none;font-size:13px;font-weight:500;transition:all .15s}.nav-item:hover{background:var(--color-surface-2);color:var(--color-text)}.nav-item.active{background:color-mix(in srgb,var(--color-primary) 15%,transparent);color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeIn .2s ease-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s infinite}.page-loading{min-height:50vh;display:grid;place-items:center;color:var(--color-text-muted)}.error-state{padding:16px;border:1px solid color-mix(in srgb,var(--color-danger) 35%,transparent);border-radius:var(--radius);color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 8%,var(--color-surface))}.api-error-toast{position:fixed;z-index:1000;right:20px;top:20px;max-width:420px;padding:12px 16px;border-radius:8px;color:#fff;background:var(--color-danger);box-shadow:0 10px 30px #00000040}@media(max-width:900px){.app-layout{height:auto;min-height:100vh;overflow:visible}.sidebar{width:76px;min-height:100vh;position:sticky;top:0}.sidebar .nav-item{justify-content:center;padding-inline:8px}.sidebar .nav-item span{display:none}.sidebar>div:first-child>div:last-child,.sidebar>div:last-child>div:first-child{display:none}.main-content{min-width:0;overflow-x:hidden}.page-header{padding:16px;align-items:flex-start;flex-wrap:wrap}.page-body{padding:16px;overflow-x:auto}.page-body [style*=grid-template-columns]{grid-template-columns:1fr!important}.card{padding:14px}table{min-width:720px}}@media(max-width:560px){:root{--sidebar-width: 0px}.app-layout{display:block}.sidebar{width:100%;min-height:auto;position:static;border-right:0;border-bottom:1px solid var(--color-border)}.sidebar nav{display:flex;overflow-x:auto;padding-block:6px}.sidebar .nav-item{min-width:42px;margin:0 2px}.page-header input,.page-header select{min-width:180px}}