*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#07101f;color:#cdd6f4;line-height:1.65;font-size:14px}
a{color:#89b4fa;text-decoration:none}a:hover{color:#b4d0fe}
input,select,textarea,button{font-family:inherit;font-size:14px}
textarea{resize:vertical}
code{background:#0d1a30;border:1px solid #1e3155;border-radius:6px;padding:3px 7px;font-size:12px;color:#a6e3a1;word-break:break-all;display:inline-block;margin-top:3px}
.muted{color:#5a6a90}

/* TOPBAR */
.topbar{display:flex;align-items:center;gap:12px;padding:0 24px;height:50px;background:#060d1c;border-bottom:1px solid #152040;position:sticky;top:0;z-index:100}
.tb-brand{font-weight:700;font-size:15px;flex:1}.tb-brand sup{font-size:10px;color:#4a5a80}
.tb-tag{background:#0d2540;color:#7aa2e0;border:1px solid #1a3a60;border-radius:999px;padding:3px 11px;font-size:11px}
.tb-user{color:#6c7a9e;font-size:13px}
.tb-logout{color:#6c7a9e;font-size:13px}.tb-logout:hover{color:#f38ba8}

/* LAYOUT */
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 50px)}
.sidebar{background:#08111e;border-right:1px solid #0f1e35;padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:50px;height:calc(100vh - 50px);overflow-y:auto}
.main{padding:28px 32px;max-width:1100px}
section{margin-bottom:52px}

/* SIDEBAR */
.sidenav{display:flex;flex-direction:column;gap:2px}
.sn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#8a9ac0;font-size:13px;transition:.15s}
.sn:hover{background:#13203a;color:#cdd6f4}
.badge{background:#e44;color:#fff;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:auto}
.badge-s{background:#3a2a00;color:#fab387;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:auto}
.side-note{margin-top:auto;padding:14px 10px;border-top:1px solid #0f1e35;font-size:11px;color:#3a4a6a;line-height:1.7}
.sn-h{font-weight:700;color:#4a7acc;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}

/* AUTH */
.auth-bg{display:grid;place-items:center;min-height:100vh}
.auth-wrap{display:grid;place-items:center;padding:24px;width:100%}
.auth-card{width:min(410px,100%);background:#0a1427;border:1px solid #172040;border-radius:20px;padding:32px 28px}
.auth-logo{text-align:center;font-size:38px;margin-bottom:8px}
.auth-card h1{text-align:center;font-size:21px;font-weight:700;margin-bottom:4px}
.ver{font-size:12px;font-weight:400;color:#3a4a6a}
.auth-sub{text-align:center;color:#5a6a8e;font-size:13px;margin-bottom:20px}
.auth-foot{text-align:center;margin-top:14px;color:#4a5a7a;font-size:13px}

/* FORMS */
.form label{display:block;font-size:12px;color:#7a8aaa;margin:12px 0 5px}
.form input{width:100%;background:#070f1c;border:1px solid #1a2d50;color:#cdd6f4;border-radius:10px;padding:10px 12px;transition:.15s}
.form input:focus{outline:none;border-color:#3d6fd4}
.hint{color:#3a4a6a;font-size:11px;font-weight:400}
.hint-box{background:#060e1c;border:1px solid #0f2040;border-radius:10px;padding:10px 12px;font-size:11px;color:#4a5e8a;margin-top:10px;line-height:1.8}

/* BUTTONS */
.btn,.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:9px 16px;border:none;border-radius:10px;cursor:pointer;font-weight:500;transition:.15s}
.btn-primary,.btn.primary{background:#1e4fc0;color:#fff;width:100%;margin-top:12px;padding:12px;font-size:15px;border-radius:12px}
.btn-primary:hover,.btn.primary:hover{background:#2a5fd8}
.btn.green{background:#123a22;color:#a6e3a1}.btn.green:hover{background:#1a4d2e}
.btn.red{background:#3a1010;color:#f38ba8}.btn.red:hover{background:#4d1515}
.btn.grey{background:#141f35;color:#89b4fa}.btn.grey:hover{background:#1a2845}
.btn.sm{padding:6px 13px;font-size:12px;margin-top:0;border-radius:8px;width:auto}

/* ALERTS */
.alert{padding:12px 16px;border-radius:12px;margin-bottom:18px;font-size:13px}
.alert.ok{background:#0c2418;color:#a6e3a1;border:1px solid #1a4530}
.alert.err{background:#2a0e0e;color:#f38ba8;border:1px solid #4a1a1a}

/* CARDS */
.card{background:#0a1427;border:1px solid #111e38;border-radius:16px;padding:18px}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:16px 0 24px}
.kpi{background:#0a1427;border:1px solid #111e38;border-radius:14px;padding:16px 12px;text-align:center}
.kpi-warn{border-color:#7a4500;background:#100e00}.kpi-green{border-color:#1a4a2a;background:#070f08}
.kv{font-size:26px;font-weight:700;color:#89b4fa}
.kpi-warn .kv{color:#fab387}.kpi-green .kv{color:#a6e3a1}
.kl{font-size:11px;color:#4a5a7a;margin-top:4px}

/* SETUP CHECKLIST */
.setup-checklist{margin-bottom:24px}
.sc-title{font-weight:700;font-size:13px;margin-bottom:12px;color:#7aa2e0}
.sc-item{padding:8px 0;border-bottom:1px solid #0d1a30;font-size:13px;color:#8090b8}
.sc-item:last-child{border:none}.sc-item.done{color:#a6e3a1}
.sc-item a{font-size:12px;margin-left:8px}

/* HEADINGS */
.page-h1{font-size:22px;font-weight:700}
.page-sub{color:#5a6a8e;font-size:13px;margin-top:4px}
h2{font-size:17px;font-weight:700;margin:6px 0 14px;color:#cdd6f4}
h3{font-size:14px;font-weight:600;margin:6px 0 10px;color:#8a9ac0}
.sub{color:#5a6a8e;font-size:13px;margin-bottom:14px}

/* AGENT GRID */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ag-card{background:#0a1427;border:1px solid #111e38;border-radius:14px;padding:14px;border-left:3px solid #111e38}
.ag-live{border-left-color:#1a5530}.ag-token{border-left-color:#5a4000}.ag-off{border-left-color:#3a1010}
.ag-top{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.ag-ico{font-size:20px;margin-top:2px}
.ag-info{flex:1}
.ag-name{font-weight:600;font-size:13px;margin-bottom:2px}
.ag-email{font-size:11px;color:#5a6a8e}
.ag-mode{font-size:12px;color:#7a8ab0;margin-bottom:5px}
.ag-scope{font-size:11px;line-height:1.5;margin-bottom:5px}
.ag-ran{font-size:11px}
.ag-warn{font-size:11px;color:#fab387;margin-bottom:6px}
.ag-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.st-dot{font-size:11px;white-space:nowrap;padding:3px 8px;border-radius:999px}
.st-dot.green{background:#0a2015;color:#a6e3a1}
.st-dot.amber{background:#1a1000;color:#fab387}
.st-dot.red{background:#1a0808;color:#f38ba8}

/* APPROVALS */
.ap-card{background:#0a1427;border:1px solid #111e38;border-radius:14px;padding:16px;margin-bottom:12px}
.ap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.ap-title{font-weight:600;font-size:14px;margin-bottom:4px}
.ap-meta{font-size:12px;color:#5a6a8e}
.ap-body{background:#06101e;border:1px solid #0f1e35;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.7;margin-bottom:12px;max-height:200px;overflow-y:auto;white-space:pre-wrap}
.ap-btns{display:flex;gap:10px}
.empty{background:#060e1c;border:1px dashed #0f1e35;border-radius:12px;padding:24px;text-align:center;color:#3a4a6a}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sg{display:flex;flex-direction:column;gap:2px}
.sg-title{font-size:11px;font-weight:700;color:#4a7acc;text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.sg-form label{display:block;font-size:12px;color:#7a8ab0;margin:8px 0 4px}
.sg-row{display:flex;gap:8px}
.sg-row input{flex:1;background:#060e1c;border:1px solid #111e38;color:#cdd6f4;border-radius:10px;padding:9px 12px}
.sg-row input:focus{outline:none;border-color:#3d6fd4}
.info-box{background:#0a1830;border:1px solid #142e5a;border-radius:12px;padding:14px 16px;font-size:13px;color:#7080a8;margin-bottom:20px}

/* TABLES */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:10px 12px;border-bottom:1px solid #0f1e35;color:#5a6a8e;font-size:12px;font-weight:600}
.tbl td{padding:9px 12px;border-bottom:1px solid #0a1425}
.tbl tr:last-child td{border:none}
.log-tag{font-size:11px;background:#0d1830;border-radius:5px;padding:2px 7px;color:#6a7aa0}

/* PILLS */
.pill{display:inline-block;border-radius:999px;font-size:12px;padding:3px 10px}
.pill.green{background:#0a2015;color:#a6e3a1;border:1px solid #1a4530}
.pill.red{background:#2a0e0e;color:#f38ba8;border:1px solid #4a1a1a}
.pill.amber{background:#1a1000;color:#fab387;border:1px solid #4a2a00}

/* RESPONSIVE */
@media(max-width:1040px){.kpi-row{grid-template-columns:repeat(3,1fr)}.agent-grid,.settings-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.layout{grid-template-columns:1fr}.sidebar{height:auto;position:static}.sidenav{flex-direction:row;flex-wrap:wrap;gap:4px}.main{padding:16px}.agent-grid,.settings-grid,.kpi-row{grid-template-columns:1fr}.side-note{display:none}}