*{box-sizing:border-box} :root{--bg:#f5f7fb;--surface:#fff;--text:#172033;--muted:#6b7280;--line:#e5e9f0;--primary:#2563eb;--primary2:#1d4ed8;--nav:#0f172a;--green:#059669;--amber:#d97706;--shadow:0 10px 30px rgba(15,23,42,.06)}
body.dark{--bg:#0b1120;--surface:#111827;--text:#edf2f7;--muted:#94a3b8;--line:#253047;--nav:#070b14;--shadow:none}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:var(--nav);color:#e5e7eb;padding:26px 18px;display:flex;flex-direction:column;z-index:2}
.brand{display:flex;align-items:center;gap:12px;padding:0 8px 26px}.brand strong{font-size:19px;display:block}.brand small{display:block;color:#94a3b8;margin-top:2px}.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#2563eb;color:white;font-weight:800}
nav{display:grid;gap:7px}.nav{border:0;background:transparent;color:#aeb8c8;padding:13px 14px;border-radius:10px;text-align:left;font-size:14px;cursor:pointer}.nav span{margin-left:10px}.nav:hover,.nav.active{background:#1e293b;color:#fff}.sidebar-bottom{margin-top:auto;border-top:1px solid #263247;padding:20px 8px 0;font-size:13px}.sidebar-bottom small{display:block;color:#7f8ba0;margin-top:8px}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34d399;margin-right:7px}
main{margin-left:240px;padding:34px 42px 20px;max-width:1600px}header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:var(--primary);margin:0 0 7px}h1{margin:0;font-size:30px}.subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}.header-actions{display:flex;gap:10px}
button{font:inherit}.primary,.ghost{padding:11px 16px;border-radius:10px;cursor:pointer;font-weight:700}.primary{background:var(--primary);border:1px solid var(--primary);color:#fff}.primary:hover{background:var(--primary2)}.ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.notice{display:flex;justify-content:space-between;align-items:center;background:#ecfdf5;border:1px solid #bbf7d0;padding:14px 18px;border-radius:12px;margin-bottom:20px;color:#065f46}.notice strong,.notice span{display:block}.notice span{font-size:12px;margin-top:3px}.notice .badge{font-size:11px;font-weight:800;background:#d1fae5;padding:6px 9px;border-radius:20px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.card,.panel,.empty-panel{background:var(--surface);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.card{padding:20px}.card>span{font-size:13px;color:var(--muted)}.card strong{display:block;font-size:25px;margin:10px 0 7px}.card small{color:var(--muted)}.card small.up{color:var(--green)}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}.panel{padding:20px}.panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-title strong{display:block;font-size:15px}.panel-title span{font-size:12px;color:var(--muted);margin-top:3px}.pill{padding:5px 9px;background:var(--bg);border-radius:8px}
.chart{height:230px;display:flex;gap:15px}.ylabels{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);padding-bottom:24px}.bars{flex:1;display:flex;justify-content:space-around;align-items:end;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,var(--surface) 0,var(--surface) 45px,var(--line) 46px);padding:0 15px}.month{height:100%;width:12%;display:flex;flex-direction:column;justify-content:end;align-items:center}.month>div{height:88%;width:100%;display:flex;align-items:end;justify-content:center;gap:5px}.month i,.month b{display:block;width:28%;border-radius:5px 5px 0 0}.month i{background:#2563eb}.month b{background:#93c5fd}.month span{font-size:11px;color:var(--muted);height:24px;padding-top:7px}.legend{display:flex;gap:18px;font-size:11px;color:var(--muted);justify-content:center;margin-top:8px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.l1{background:#2563eb}.l2{background:#93c5fd}
.goal{display:flex;align-items:center;gap:22px;padding:15px 0}.ring{width:112px;height:112px;border-radius:50%;background:conic-gradient(#2563eb 0 86%,var(--line) 86%);display:grid;place-items:center;position:relative}.ring:after{content:"";position:absolute;width:82px;height:82px;background:var(--surface);border-radius:50%}.ring span{z-index:1;font-weight:800;font-size:20px}.goal p{color:var(--muted);line-height:1.6}.goal p strong{color:var(--text);font-size:18px}.progress{height:8px;background:var(--line);border-radius:20px;overflow:hidden;margin:15px 0 9px}.progress i{display:block;width:86%;height:100%;background:var(--primary)}.panel>small{color:var(--muted)}
.table-panel{padding-bottom:8px}.text-btn{border:0;background:none;color:var(--primary);font-weight:700;cursor:pointer}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:600;padding:11px;border-bottom:1px solid var(--line)}td{padding:13px 11px;border-bottom:1px solid var(--line)}td small{display:block;color:var(--muted);margin-top:3px}.status{display:inline-block;padding:5px 9px;border-radius:20px;font-size:11px;font-weight:700}.good{background:#ecfdf5;color:#047857}.warn{background:#fff7ed;color:#c2410c}
.page{display:none}.active-page{display:block}.empty-panel{text-align:center;padding:80px 20px}.empty-panel>span{font-size:42px;color:var(--primary)}.empty-panel h2{font-size:28px;margin:12px 0 8px}.empty-panel p{color:var(--muted);max-width:560px;margin:0 auto 22px;line-height:1.6}
footer{text-align:center;color:var(--muted);font-size:11px;padding:24px}.toast{position:fixed;right:25px;bottom:25px;background:#111827;color:#fff;padding:14px 18px;border-radius:10px;box-shadow:0 15px 40px #0003;transform:translateY(120px);opacity:0;transition:.25s;z-index:5}.toast.show{transform:none;opacity:1}
@media(max-width:1000px){.sidebar{width:76px}.brand div,.nav span,.sidebar-bottom{display:none}.brand{padding-left:0}.nav{text-align:center}.logo{width:40px}main{margin-left:76px;padding:25px}.cards{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}
@media(max-width:650px){main{padding:18px}.cards{grid-template-columns:1fr}.header-actions{display:none}.notice{align-items:flex-start}.notice .badge{margin-left:10px}.sidebar{display:none}main{margin-left:0}h1{font-size:25px}}