*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.5 var(--font);background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--navy);color:#cfd9e8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px;color:#fff;font-weight:800;font-size:17px}
.brand i{width:30px;height:30px;border-radius:8px;background:var(--green);display:grid;place-items:center;font-style:normal}
.nav{overflow:auto;padding:4px 10px 16px;flex:1}
.nav h4{margin:14px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7f93b0}
.nav a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--r-s);color:#cfd9e8;font-weight:500}
.nav a:hover{background:var(--navy-2);color:#fff}
.nav a.active{background:var(--green);color:#fff}
.nav .ic{width:20px;text-align:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:5}
.topbar .sp{flex:1}
.who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.who small{color:var(--muted)}
#view{padding:24px;padding-block:24px}
.page-h{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-h h1{font-size:22px}
.page-h p{margin:2px 0 0;color:var(--muted)}
.page-h .sp{flex:1}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow)}
.card-b{padding:18px}
.card-h{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:16px}
.g-stats{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.stat{padding:16px}
.stat small{color:var(--muted);font-weight:600}
.stat b{display:block;font-size:26px;margin-top:4px}
.stat span{font-size:12px;color:var(--muted)}
.btn{border:1px solid var(--border);background:var(--surface);padding:7px 14px;border-radius:var(--r-s);cursor:pointer;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.btn:hover{background:#f1f5f9}
.btn.pri{background:var(--green);border-color:var(--green);color:#fff}
.btn.pri:hover{background:var(--green-d)}
.btn.dng{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.sm{padding:4px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border);align-items:center}
.toolbar .sp{flex:1}
input[type=text],input[type=search],input[type=number],input[type=date],input[type=password],input[type=email],select,textarea{border:1px solid var(--border);border-radius:var(--r-s);padding:7px 10px;background:#fff;min-width:0}
textarea{width:100%;min-height:80px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfd;cursor:default}
th.sortable{cursor:pointer}
tbody tr:hover{background:#f8fafc}
tr.click{cursor:pointer}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 18px;color:var(--muted)}
.badge{display:inline-flex;gap:5px;align-items:center;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700}
.b-green{background:var(--green-bg);color:#1d6a31}
.b-blue{background:var(--blue-bg);color:#0b559f}
.b-yellow{background:var(--yellow-bg);color:#8a5a00}
.b-red{background:var(--danger-bg);color:#b4282d}
.b-gray{background:#eef1f5;color:#4a5668}
.skel{background:linear-gradient(90deg,#eef1f5 25%,#f8fafc 50%,#eef1f5 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;height:16px;margin:12px 16px}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.state{padding:48px 20px;text-align:center;color:var(--muted)}
.state b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.overlay{position:fixed;inset:0;background:rgba(23,49,86,.45);display:flex;justify-content:center;align-items:center;z-index:50;padding:16px}
.overlay.right{justify-content:flex-end;align-items:stretch;padding:0}
.modal{background:#fff;border-radius:var(--r-l);width:min(520px,100%);max-height:90vh;overflow:auto;padding:22px}
.drawer{background:#fff;width:min(480px,100%);overflow:auto;padding:22px}
.modal h2,.drawer h2{margin-bottom:12px;font-size:18px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.field{margin-bottom:12px}
.field label{display:block;font-weight:600;margin-bottom:4px;font-size:13px}
.field input,.field select{width:100%}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 12px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100}
.toast{background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-s);box-shadow:var(--shadow)}
.toast.err{background:var(--danger)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:8px 14px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tabs button.on{color:var(--green);border-color:var(--green)}
.range{display:flex;gap:4px;flex-wrap:wrap}
.range button{border:1px solid var(--border);background:#fff;padding:5px 10px;border-radius:99px;cursor:pointer;font-size:12px;font-weight:600}
.range button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:10px 18px;border-bottom:1px solid var(--border);display:flex;gap:10px;justify-content:space-between}
.feed small{color:var(--muted)}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(400px,100%);padding:28px}
.err-t{color:var(--danger);margin:8px 0 0;min-height:20px}
.menu-btn{display:none}
@media (max-width:1024px){
  :root{--sidebar:68px}
  .brand span,.nav h4,.nav a span.t{display:none}
  .nav a{justify-content:center}
  #view{padding:16px}
}
.svg-chart{width:100%;height:auto}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:0 18px 12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}
[hidden]{display:none!important}