:root{
 --bg:#f4f6f9; --card:#fff; --bd:#e7e9ee; --bd2:#d8dbe2;
 --t1:#1b1f27; --t2:#6b7280; --t3:#9aa0aa;
 --acc:#2f63d4; --acc-bg:#eaf1fc; --acc-t:#1c4f9c;
 --ok-bg:#e7f6ee; --ok-t:#187f48;
 --pend-bg:#fdf3e0; --pend-t:#8a5d10;
 --late-bg:#fdeceb; --late-t:#b0322c;
 --neu-bg:#eef0f3; --neu-t:#5f6570;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--t1);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;}
.wrap{max-width:960px;margin:0 auto;padding:16px 13px 60px;}
.app{background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd);background:#fbfcfe;}
.brand{display:flex;align-items:center;gap:11px;}
.brand i{font-size:24px;color:var(--acc);}
.brand .n{font-size:16px;font-weight:600;}
.brand .u{font-size:12px;color:var(--t3);}
.nav{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--bd);flex-wrap:wrap;}
.navbtn{font:inherit;font-size:13.5px;padding:8px 14px;border:none;background:transparent;color:var(--t2);border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.navbtn:hover{background:#f3f5f8;}
.navbtn.active{background:var(--acc-bg);color:var(--acc-t);font-weight:600;}
.content{padding:18px;}
.badge{font-size:12px;padding:4px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px;font-weight:500;white-space:nowrap;}
.b-ok{background:var(--ok-bg);color:var(--ok-t);}
.b-pend{background:var(--pend-bg);color:var(--pend-t);}
.b-late{background:var(--late-bg);color:var(--late-t);}
.b-neu{background:var(--neu-bg);color:var(--neu-t);}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.metric{background:#f7f9fc;border:1px solid var(--bd);border-radius:11px;padding:14px 15px;}
.metric .l{font-size:13px;color:var(--t2);margin:0 0 7px;}
.metric .v{font-size:25px;font-weight:600;margin:0;}
.card{background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:15px 16px;margin-bottom:18px;}
.seclbl{font-size:14.5px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:8px;}
.seclbl i{color:var(--acc);}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--bd);}
.item:first-child{border-top:none;}
.item .t{font-size:14.5px;font-weight:500;}
.item .s{font-size:12.5px;color:var(--t2);margin-top:2px;}
.right{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.btn{font:inherit;font-size:13px;padding:8px 13px;border:1px solid var(--bd2);background:#fff;border-radius:9px;cursor:pointer;color:var(--t1);white-space:nowrap;}
.btn:hover{background:#f3f5f8;}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#fff;}
.btn-acc:hover{background:#2456bd;}
.btn-sm{font-size:12.5px;padding:6px 11px;}
.act{display:flex;gap:10px;padding:8px 0;font-size:13px;color:var(--t2);}
.act i{margin-top:2px;color:var(--acc);}
.grid-cli{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;}
.cli{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 15px;cursor:pointer;}
.cli:hover{border-color:var(--bd2);}
.cli .nm{font-size:14.5px;font-weight:600;}
.cli .sec{font-size:12.5px;color:var(--t2);margin:3px 0 11px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--t2);font-weight:500;padding:9px 6px;border-bottom:1px solid var(--bd);}
td{padding:11px 6px;border-bottom:1px solid var(--bd);vertical-align:middle;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;font-size:13px;}
.cal .h{text-align:center;color:var(--t3);padding:5px 0;font-weight:500;}
.day{position:relative;text-align:center;padding:11px 0 16px;border:1px solid var(--bd);border-radius:8px;}
.dot{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;}
.legend{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:var(--t2);flex-wrap:wrap;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.note{font-size:12px;color:var(--t3);text-align:center;margin-top:22px;}
.hide{display:none!important;}
.login-box{max-width:340px;margin:9vh auto 0;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:26px 24px;text-align:center;}
.login-box i{font-size:34px;color:var(--acc);}
.login-box h1{font-size:19px;font-weight:600;margin:12px 0 4px;}
.login-box p{font-size:13px;color:var(--t2);margin:0 0 18px;}
input[type=password],input[type=text],input[type=number],select{font:inherit;font-size:14px;width:100%;padding:10px 12px;border:1px solid var(--bd2);border-radius:9px;background:#fff;color:var(--t1);}
.login-box .btn-acc{width:100%;margin-top:12px;padding:11px;}
.err{color:var(--late-t);font-size:13px;margin-top:10px;min-height:18px;}
.kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--bd);font-size:13.5px;}
.kv:first-child{border-top:none;}
.kv .k{color:var(--t2);}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all;background:#f7f9fc;border:1px solid var(--bd);border-radius:7px;padding:8px 10px;}
.muted{color:var(--t2);font-size:13px;}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#1b1f27;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;}
.toast.show{opacity:1;}