*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f172a;--card:#1e293b;--border:#334155;--text:#e2e8f0;--t2:#94a3b8;--t3:#64748b;--pri:#a78bfa;--green:#4ade80;--yellow:#facc15;--red:#f87171;--blue:#38bdf8;--cyan:#22d3ee;--orange:#fb923c}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}

/* === Login === */
.login{max-width:360px;width:min(100% - 1.5rem,360px);margin:10vh auto 0;padding:1.5rem 1.25rem;text-align:center}
.login h1{font-size:1.4rem;margin-bottom:.3rem;color:var(--pri)}
.login .brand{font-size:.78rem;color:var(--t3);margin-bottom:1.5rem}
.login input{width:100%;padding:.6rem .9rem;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:.92rem;margin-bottom:.8rem;outline:none;transition:border-color .2s}
.login input:focus{border-color:var(--pri)}
.login button{width:100%;padding:.6rem;background:var(--pri);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.92rem;font-weight:500;transition:opacity .15s}
.login button:hover{opacity:.85}
.login-err{color:var(--red);font-size:.8rem;margin-top:.4rem;min-height:1.2em}

/* === App Shell === */
.shell{max-width:1200px;margin:0 auto;padding:1.2rem 1rem 3rem}
.hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem;flex-wrap:wrap;gap:.5rem}
.hdr h1{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--pri),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hdr .acts{display:flex;gap:.4rem}
.hdr .acts button{background:var(--card);border:1px solid var(--border);color:var(--t2);border-radius:6px;padding:4px 12px;cursor:pointer;font-size:.78rem;transition:all .15s}
.hdr .acts button:hover{border-color:var(--pri);color:var(--pri)}
.hdr .acts button:disabled{opacity:.55;cursor:not-allowed}
.ts{color:var(--t3);font-size:.76rem;margin-bottom:1.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.ts .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:middle}
.ts .fresh{background:var(--green)}.ts .stale{background:var(--yellow)}.ts .old{background:var(--red)}

/* === Auth Panel === */
.auth-panel{margin:0 0 1rem;padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.auth-panel-head{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;margin-bottom:.9rem;flex-wrap:wrap}
.auth-panel-title{font-size:.92rem;font-weight:700;color:var(--text)}
.auth-panel-note{font-size:.76rem;color:var(--t3);line-height:1.45;margin-top:.15rem}
.auth-panel-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.auth-panel-form input{width:100%;padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:.88rem;outline:none;min-width:0}
.auth-panel-form input:focus{border-color:var(--pri)}
.auth-panel-actions{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap}
.act-btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.act-btn.primary:hover{color:#fff;border-color:var(--pri);opacity:.9}
.auth-panel-error{grid-column:1/-1;color:var(--red);font-size:.78rem;min-height:1.1em}

/* === Nav === */
.nav{display:flex;gap:2px;margin-bottom:1.2rem;border-bottom:2px solid var(--border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav a{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--t3);padding:8px 16px;cursor:pointer;font-size:.82rem;white-space:nowrap;transition:all .15s;margin-bottom:-2px;text-decoration:none;display:block}
.nav a:hover{color:var(--text)}
.nav a.router-link-active{color:var(--pri);border-bottom-color:var(--pri);font-weight:600}

/* === KPI === */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.55rem;margin-bottom:1.2rem}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.7rem .6rem;text-align:center;transition:border-color .15s}
.kpi:hover{border-color:var(--pri)}
.kpi .n{font-size:1.5rem;font-weight:700;color:var(--pri);line-height:1.2}
.kpi .l{font-size:.7rem;color:var(--t3);margin-top:.1rem;text-transform:uppercase;letter-spacing:.3px}
.kpi.warn .n{color:var(--yellow)}.kpi.crit .n{color:var(--red)}.kpi.good .n{color:var(--green)}

/* === Sections === */
.sec{margin-bottom:1.2rem}
.sec h2{font-size:.95rem;margin-bottom:.5rem;color:var(--pri);display:flex;align-items:center;gap:.35rem;font-weight:600}
.cd{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;overflow-x:auto}

table{width:100%;border-collapse:collapse;font-size:.78rem}
th,td{text-align:left;padding:.35rem .5rem;border-bottom:1px solid var(--border)}
th{font-weight:600;color:var(--t3);font-size:.7rem;text-transform:uppercase;letter-spacing:.3px}
tbody tr:hover{background:rgba(167,139,250,.05)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}

.badge{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.7rem;font-weight:600}
.bg{background:#14532d;color:#86efac}.by{background:#713f12;color:#fde047}.br{background:#7f1d1d;color:#fca5a5}.bb{background:#1e3a5f;color:#93c5fd}

/* === Charts === */
.bars{display:flex;align-items:end;gap:2px;height:80px;padding-top:.4rem}
.bar{border-radius:3px 3px 0 0;min-width:10px;flex:1;position:relative;cursor:default;opacity:.8;transition:opacity .1s}
.bar:hover{opacity:1}
.bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--bg);color:var(--text);padding:3px 8px;border-radius:5px;font-size:.65rem;white-space:nowrap;z-index:5;border:1px solid var(--border);pointer-events:none}

.cat-row{display:flex;align-items:center;gap:.5rem;padding:.28rem 0}
.cat-bg{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden}
.cat-fg{height:100%;border-radius:4px;transition:width .4s}
.cat-lbl{width:90px;font-size:.78rem;display:flex;align-items:center;gap:.3rem}
.cat-num{width:55px;text-align:right;font-size:.78rem;color:var(--t3)}

.q-bars{display:flex;align-items:end;gap:4px;height:55px;margin-bottom:18px}
.q-bar{flex:1;border-radius:3px 3px 0 0;min-width:22px;text-align:center;position:relative;cursor:default;transition:opacity .1s}
.q-bar:hover{opacity:.7}
.q-bar span{position:absolute;bottom:-17px;left:0;right:0;font-size:.65rem;color:var(--t3)}

.row{display:flex;justify-content:space-between;padding:.22rem 0;border-bottom:1px solid var(--border);font-size:.78rem}
.row .k{color:var(--t3)}.row .v{color:var(--text)}

.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:.8rem}
.mbox{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:.7rem;text-align:center}
.mbox .big{font-size:1.3rem;font-weight:700;line-height:1.2}
.mbox .tiny{font-size:.62rem;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}

/* === Alerts === */
.alert{background:rgba(251,146,60,.1);border:1px solid rgba(251,146,60,.3);border-radius:8px;padding:.6rem .8rem;font-size:.8rem;margin-bottom:.8rem;color:var(--orange)}
.alert.good{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.25);color:var(--green)}

/* === Actions === */
.act-btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:.5rem 1rem;cursor:pointer;font-size:.82rem;transition:all .15s;display:inline-flex;align-items:center;gap:.4rem}
.act-btn:hover{border-color:var(--pri);color:var(--pri)}
.act-btn:disabled{opacity:.5;cursor:not-allowed}
.act-btn.danger{border-color:var(--red);color:var(--red)}
.act-btn.danger:hover{background:rgba(248,113,113,.1)}
.act-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}

.form-row{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}
.form-row input,.form-row select{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.4rem .6rem;color:var(--text);font-size:.82rem;outline:none;flex:1;min-width:140px}
.form-row input:focus,.form-row select:focus{border-color:var(--pri)}
.form-row textarea{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.4rem .6rem;color:var(--text);font-size:.82rem;outline:none;width:100%;min-height:60px;resize:vertical;font-family:inherit}
.form-row textarea:focus{border-color:var(--pri)}

/* === Config Editor === */
.config-group{margin-bottom:1.2rem}
.config-group h3{font-size:.85rem;color:var(--t2);margin-bottom:.5rem;font-weight:600}
.config-item{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--border)}
.config-item label{min-width:160px;font-size:.78rem;color:var(--t3)}
.config-item input{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.35rem .6rem;color:var(--text);font-size:.82rem;outline:none;width:120px}
.config-item input:focus{border-color:var(--pri)}
.config-readonly{font-size:.78rem;color:var(--t2);font-family:'Cascadia Code','Fira Code',monospace}

/* === Toast === */
.toast{position:fixed;top:1rem;right:1rem;padding:.6rem 1rem;border-radius:8px;font-size:.82rem;z-index:100;animation:slideIn .3s;max-width:400px}
.toast.ok{background:#14532d;color:#86efac;border:1px solid #22c55e}
.toast.err{background:#7f1d1d;color:#fca5a5;border:1px solid #ef4444}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* === Misc === */
.empty{color:var(--t3);text-align:center;padding:1.5rem;font-size:.85rem}
.loading{color:var(--t3);text-align:center;padding:2rem;font-size:.85rem}
.ft{text-align:center;color:var(--t3);font-size:.72rem;margin-top:2rem;padding:1rem 0}
.ft a{color:var(--pri)}
.mono{font-family:'Cascadia Code','Fira Code',monospace;font-size:.72rem}
.log-line{font-family:'Cascadia Code','Fira Code',monospace;font-size:.7rem;padding:.15rem 0;border-bottom:1px solid var(--border);color:var(--t2);word-break:break-all;line-height:1.4}

.vis-row{display:grid;grid-template-columns:95px 1fr 36px;gap:.4rem;padding:.28rem 0;border-bottom:1px solid var(--border);font-size:.73rem}

@media(max-width:640px){
  .login{margin:8vh auto 0;padding:1.2rem 1rem}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi .n{font-size:1.2rem}
  .metric-grid{grid-template-columns:1fr 1fr}
  .nav{gap:0}
  .nav a{padding:6px 10px;font-size:.78rem}
  .config-item{flex-direction:column;align-items:flex-start;gap:.3rem}
  .config-item input{width:100%}
  .auth-panel{padding:.85rem}
  .auth-panel-form{grid-template-columns:1fr}
  .auth-panel-actions{flex-direction:column}
  .auth-panel-actions .act-btn{width:100%;justify-content:center}
}