:root{
  --bg:#0d1117; --bg2:#010409; --card:#161b22; --card2:#1c2230; --elev:#1f2430;
  --border:#2a3038; --border2:#3a424e; --text:#e6edf3; --muted:#8b949e;
  --green:#3fb950; --red:#f85149; --amber:#d29922; --blue:#58a6ff; --violet:#a371f7;
  --radius:14px; --radius-sm:9px; --shadow:0 8px 24px rgba(1,4,9,.5);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 620px at 15% -12%, #16263f 0%, transparent 55%), var(--bg);
  color:var(--text); min-height:100vh;
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.logo{color:var(--blue)}
button{font-family:inherit}
.btn{background:var(--card2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;font-size:13px;transition:.15s var(--ease)}
.btn:hover{border-color:var(--border2);background:var(--elev);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent}
.btn.icon{padding:6px 9px;line-height:1}
.btn.danger:hover{background:#2a1516;border-color:var(--red);color:#ffb4ae}
.btn.primary{background:var(--blue);color:#04121f;border-color:transparent;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
a.btn{text-decoration:none;display:inline-block}
.input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;color:var(--text);font-size:13px}
.input:focus{outline:none;border-color:var(--blue)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;width:330px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;animation:pop .3s var(--ease)}
.brand{font-size:21px;font-weight:700;display:flex;align-items:center;gap:9px}
.login-card input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 12px;color:var(--text);font-size:14px}
.login-card input:focus{outline:none;border-color:var(--blue)}
.login-card button{background:var(--blue);color:#04121f;border:none;border-radius:var(--radius-sm);padding:11px;font-weight:600;cursor:pointer;transition:.15s}
.login-card button:hover{filter:brightness(1.08)}
.login-error{color:var(--red);font-size:13px}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border);background:rgba(13,17,23,.72);backdrop-filter:blur(10px);position:sticky;top:0;z-index:8}
.title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host{font-size:12px;margin-left:6px}
.topright{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.upd{font-size:12px}

/* summary */
.summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 22px 2px}
.sum-hero{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card)}
.sum-hero .big{width:11px;height:11px;border-radius:50%}
.sum-hero.ok .big{background:var(--green);box-shadow:0 0 0 4px rgba(63,185,80,.16)}
.sum-hero.bad .big{background:var(--red);box-shadow:0 0 0 4px rgba(248,81,73,.16)}
.sum-hero.warn .big{background:var(--amber);box-shadow:0 0 0 4px rgba(210,153,34,.16)}
.chip{font-size:12.5px;padding:7px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--muted)}
.chip b{color:var(--text);font-weight:600}
.chip.warn{border-color:#5b451a;color:var(--amber)} .chip.bad{border-color:#5f2b2b;color:var(--red)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:14px 22px 4px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:13px 16px}
.stat .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:21px;font-weight:700;margin:3px 0 9px;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:6px;background:#0b0f16;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--green);transition:width .5s var(--ease)}
.bar.warn > i{background:var(--amber)} .bar.crit > i{background:var(--red)}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;padding:16px 22px}
.card{background:linear-gradient(180deg,var(--card) 0%, #12161d 100%);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:11px;cursor:pointer;transition:.18s var(--ease);animation:rise .3s var(--ease) both}
.card:hover{border-color:var(--border2);transform:translateY(-2px)}
.card.down{border-color:#5f2b2b}
.card-head{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot.up{background:var(--green);box-shadow:0 0 0 3px rgba(63,185,80,.15)}
.dot.warn{background:var(--amber);box-shadow:0 0 0 3px rgba(210,153,34,.15)}
.dot.down{background:var(--red);box-shadow:0 0 0 3px rgba(248,81,73,.15)}
.card-head .name{font-weight:700;font-size:15px}
.card-head .dom{font-size:12px;color:var(--muted)}
.card-head .chev{margin-left:auto;color:var(--muted);opacity:0;transition:.18s}
.card:hover .chev{opacity:1;transform:translateX(2px)}
.rows{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px}
.rows .k{color:var(--muted)}
.rows .v{text-align:right;font-variant-numeric:tabular-nums}
.pill{font-size:11px;padding:1.5px 8px;border-radius:20px;border:1px solid var(--border);white-space:nowrap}
.pill.ok{color:var(--green);border-color:#1f4a29;background:rgba(63,185,80,.06)}
.pill.bad{color:var(--red);border-color:#5f2b2b;background:rgba(248,81,73,.06)}
.pill.warn{color:var(--amber);border-color:#5b451a;background:rgba(210,153,34,.06)}
.actions{display:flex;gap:8px;margin-top:2px}

/* skeleton */
.skel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;height:196px;position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:shimmer 1.3s infinite}

.foot{padding:10px 22px 30px;font-size:12px}

/* view nav */
.viewnav{display:flex;gap:4px;padding:12px 22px 0}
.vtab{background:transparent;border:1px solid transparent;color:var(--muted);padding:8px 15px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;transition:.15s var(--ease)}
.vtab:hover{color:var(--text);background:var(--card)}
.vtab.active{color:var(--text);background:var(--card);border-color:var(--border)}
.view{animation:fade .2s}

/* panels + tables */
.panel{padding:16px 22px}
.panel h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tbl th{text-align:left;padding:10px 14px;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:rgba(255,255,255,.02)}
.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.dbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:4px 22px 16px}
.dbcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px}
.dbcard h4{margin:0 0 11px;font-size:14px;font-weight:700}
.dbcard .drow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.dbcard .drow .dk{color:var(--muted)}
.dbcard .drow .dv{font-variant-numeric:tabular-nums;font-weight:600}
.sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:16px 22px 4px}

/* drawer */
.overlay{position:fixed;inset:0;background:rgba(1,4,9,.55);backdrop-filter:blur(2px);z-index:15;animation:fade .2s}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,100%);background:var(--bg);border-left:1px solid var(--border);z-index:16;display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(1,4,9,.5);transform:translateX(100%);transition:transform .28s var(--ease)}
.drawer:not(.hidden){transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.dh-left{display:flex;align-items:center;gap:11px}
.dh-title{font-weight:700;font-size:17px}
.dh-dom{font-size:12.5px;text-decoration:none}
.dh-dom:hover{color:var(--blue)}
.tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--border)}
.tab{background:transparent;border:none;color:var(--muted);padding:8px 14px;cursor:pointer;font-size:13.5px;border-radius:8px 8px 0 0;border-bottom:2px solid transparent}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--blue)}
.drawer-body{flex:1;overflow:auto;padding:16px 18px}
.tabpane{animation:fade .2s}
.o-rows{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:13.5px;margin-bottom:16px}
.o-rows .k{color:var(--muted)}
.o-rows .v{text-align:right}
.o-actions{display:flex;flex-wrap:wrap;gap:9px}
.env-list{display:grid;grid-template-columns:1fr auto;gap:2px 14px;font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
.env-list .ek{color:var(--blue)}
.env-list .ev{color:var(--muted);text-align:right}
.logs-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.logs-toolbar .input{flex:1;min-width:120px}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.logstat{font-size:11.5px}
.logs{margin:0;padding:12px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:auto;max-height:calc(100vh - 250px);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#c9d1d9;white-space:pre-wrap;word-break:break-word}

/* toasts */
.toasts{position:fixed;bottom:20px;right:20px;z-index:30;display:flex;flex-direction:column;gap:10px;max-width:340px}
.toast{background:var(--elev);border:1px solid var(--border2);border-left:3px solid var(--blue);border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;box-shadow:var(--shadow);animation:slidein .25s var(--ease)}
.toast.ok{border-left-color:var(--green)} .toast.err{border-left-color:var(--red)} .toast.warn{border-left-color:var(--amber)}
.toast.hide{animation:slideout .25s var(--ease) forwards}

/* run modal */
.modal{position:fixed;inset:0;background:rgba(1,4,9,.7);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:24;padding:24px;animation:fade .2s}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);width:min(860px,100%);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);animation:pop .25s var(--ease)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);font-weight:600}
.modal-head > div{display:flex;align-items:center;gap:10px}
.runlogs{max-height:70vh;margin:0}

@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{100%{transform:translateX(100%)}}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateX(20px)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* mobile */
@media (max-width:600px){
  .topbar{padding:11px 14px}
  .title b{font-size:15px}
  .upd{display:none}
  .summary,.stats,.grid,.panel,.dbgrid,.sysgrid,.viewnav{padding-left:14px;padding-right:14px}
  .grid{grid-template-columns:1fr;gap:13px}
  .stats{grid-template-columns:1fr 1fr;gap:11px}
  .drawer{width:100%}
  .logs{max-height:calc(100vh - 300px)}
  .toasts{left:14px;right:14px;bottom:14px;max-width:none}
}