:root{
  --ink:#0d1117; --ink2:#131a24; --panel:#161e2b; --panel2:#1b2536;
  --line:#243043; --text:#e6edf3; --muted:#8aa0b6;
  --emerald:#2dd4a7; --emerald-d:#12b389; --emerald-dd:#0d8f6e;
  --amber:#f4b740; --red:#f2555a; --blue:#5aa9ff;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:var(--font);color:var(--text);
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(45,212,167,.10), transparent 60%),
    radial-gradient(900px 500px at 5% 110%, rgba(90,169,255,.08), transparent 55%),
    var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
b{font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.8rem}
a{color:var(--emerald);text-decoration:none}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:.55rem;font-size:1.05rem;letter-spacing:.2px}
.brand b{color:var(--emerald)}
.brand-dot{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#57f2c6,var(--emerald-dd));
  box-shadow:0 0 14px rgba(45,212,167,.7)}
.env{margin-left:.4rem;font-size:.72rem;color:var(--muted);border:1px solid var(--line);
  padding:.15rem .5rem;border-radius:999px}

/* ---------- login ---------- */
.login-body{display:grid;place-items:center;padding:1.5rem}
.login-card{width:min(380px,100%);background:linear-gradient(180deg,var(--panel),var(--ink2));
  border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.55rem}
.login-card h1{margin:.6rem 0 0;font-size:1.5rem}
.login-card p{margin:0 0 .4rem}
.login-card label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;color:var(--muted);margin-top:.5rem}
.login-card input{background:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .8rem;color:var(--text);font-family:var(--font);font-size:.95rem}
.login-card input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(45,212,167,.15)}
.login-card button{margin-top:1rem;background:linear-gradient(180deg,var(--emerald),var(--emerald-dd));
  color:#04140f;font-weight:700;border:0;border-radius:10px;padding:.75rem;cursor:pointer;font-family:var(--font);font-size:.95rem}
.login-card button:hover{filter:brightness(1.06)}
.foot{text-align:center;margin-top:1rem;font-size:.72rem}
.alert{background:rgba(242,85,90,.12);border:1px solid rgba(242,85,90,.4);color:#ffb3b6;
  padding:.6rem .7rem;border-radius:10px;font-size:.85rem}

/* ---------- topbar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--line);
  background:rgba(13,17,23,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:20}
.top-right{display:flex;align-items:center;gap:1rem}
.live{color:var(--emerald);font-size:.8rem}
.live.stale{color:var(--amber)}
main{max-width:1200px;margin:0 auto;padding:1.4rem}

/* ---------- host strip ---------- */
.hoststrip{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1.3rem}
.hstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.25rem}
.hlabel{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hval{font-size:1.15rem;font-weight:600}
.mini{height:5px;background:var(--ink);border-radius:3px;overflow:hidden;margin-top:.3rem}
.mini i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--emerald),var(--blue));transition:width .5s}

/* ---------- container cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.loading{color:var(--muted);padding:2rem}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:var(--radius);padding:1.1rem;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--emerald),transparent)}
.card.role-db::before{background:linear-gradient(90deg,var(--blue),transparent)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.cname{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.role-tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:.1rem .4rem}
.cip{color:var(--muted);font-size:.8rem;margin-top:.15rem;font-variant-numeric:tabular-nums}
.state{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600}
.state .dot{width:9px;height:9px;border-radius:50%}
.state.running .dot{background:var(--emerald);box-shadow:0 0 8px var(--emerald)}
.state.stopped .dot{background:var(--red)}
.state.other .dot{background:var(--amber)}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0 .6rem}
.metric{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.55rem .65rem}
.metric .mlabel{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.metric .mval{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.bar{height:6px;background:#0a0f16;border-radius:4px;overflow:hidden;margin-top:.4rem}
.bar i{display:block;height:100%;width:0;border-radius:4px;transition:width .6s ease}
.bar.cpu i{background:linear-gradient(90deg,var(--emerald),var(--amber))}
.bar.mem i{background:linear-gradient(90deg,var(--blue),var(--emerald))}
.subline{display:flex;justify-content:space-between;color:var(--muted);font-size:.74rem;margin-top:.5rem}

.actions{display:flex;gap:.45rem;margin-top:.9rem;flex-wrap:wrap}
.btn{font-family:var(--font);border-radius:9px;border:1px solid var(--line);
  background:var(--ink2);color:var(--text);padding:.5rem .8rem;cursor:pointer;font-size:.82rem;font-weight:600}
.btn:hover{border-color:var(--emerald);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--emerald),var(--emerald-dd));color:#04140f;border:0}
.btn.warn{border-color:rgba(244,183,64,.5);color:var(--amber)}
.btn.danger{border-color:rgba(242,85,90,.5);color:#ff9a9d}
.btn.ghost{background:transparent}
.btn.small{padding:.32rem .55rem;font-size:.75rem}

/* ---------- pills ---------- */
.pill{font-size:.72rem;font-weight:700;border-radius:999px;padding:.2rem .6rem}
.pill-ok{background:rgba(45,212,167,.15);color:var(--emerald);border:1px solid rgba(45,212,167,.4)}
.pill-bad{background:rgba(242,85,90,.14);color:#ff9a9d;border:1px solid rgba(242,85,90,.4)}
.pill-wait{background:rgba(244,183,64,.14);color:var(--amber);border:1px solid rgba(244,183,64,.4)}

/* ---------- replication panel ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-top:1.4rem}
.panel h2{margin:0 0 .8rem;font-size:1.05rem;display:flex;gap:.5rem;align-items:baseline}
.repl-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}
.rcell{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem}
.rcell .rk{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rcell .rv{font-weight:600;font-variant-numeric:tabular-nums;word-break:break-all;font-size:.9rem}
.rcell.err .rv{color:#ff9a9d;font-size:.78rem}

/* ---------- drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,92vw);z-index:50;
  background:linear-gradient(180deg,var(--ink2),var(--ink));border-left:1px solid var(--line);
  box-shadow:-20px 0 40px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column;padding:1.2rem}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head h3{margin:0;font-size:1.15rem}
.tabs{display:flex;gap:.4rem;margin:1rem 0}
.tab{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:.4rem .8rem;cursor:pointer;font-family:var(--font);font-weight:600;font-size:.82rem}
.tab.active{color:#04140f;background:var(--emerald);border-color:var(--emerald)}
.tabpane.hidden{display:none}
.snap-new{display:flex;gap:.5rem;margin-bottom:.9rem}
.snap-new input{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:.55rem;color:var(--text);font-family:var(--font)}
.snap-list{display:flex;flex-direction:column;gap:.5rem}
.snap-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:.55rem .7rem}
.snap-row .sn{font-weight:600;font-size:.88rem}
.snap-row .sd{color:var(--muted);font-size:.72rem}
.snap-row .sbtns{display:flex;gap:.35rem}
.logs{background:#080b10;border:1px solid var(--line);border-radius:10px;padding:.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.5;
  white-space:pre-wrap;overflow:auto;max-height:70vh;color:#b9c6d3;margin-top:.6rem}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%) translateY(200%);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.7rem 1.1rem;
  box-shadow:var(--shadow);transition:transform .25s;z-index:80;font-size:.88rem;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:rgba(45,212,167,.5)}
.toast.bad{border-color:rgba(242,85,90,.5);color:#ffb3b6}

/* ---------- cards header + create modal + danger ---------- */
.cards-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.sec-title{font-size:1.1rem;margin:0}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.modal-scrim.open{opacity:1;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:70;
  width:min(440px,94vw);background:linear-gradient(180deg,var(--panel),var(--ink2));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.3rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal .stack{max-width:none}
.drawer-danger{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem}

/* ---------- settings page ---------- */
.settings{display:flex;flex-direction:column;gap:1.2rem}
.settings .panel h3.sub{margin:1.2rem 0 .6rem;font-size:.92rem;color:var(--text)}
.stack{display:flex;flex-direction:column;gap:.7rem;max-width:420px}
.stack label,.grid2 label{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--muted)}
.settings input,.settings select{background:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:.6rem .7rem;color:var(--text);font-family:var(--font);font-size:.9rem}
.settings input:focus,.settings select:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(45,212,167,.15)}
.row-form{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin:.4rem 0 .8rem}
.row-form input,.row-form select{flex:0 1 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;max-width:640px}
.grid2 .span2{grid-column:1/3}
.grid2 .btnrow{display:flex;gap:.5rem;flex-wrap:wrap}
.chk{flex-direction:row!important;align-items:center;gap:.5rem;color:var(--text);font-size:.85rem}
.chk input{width:auto}
.urow,.bk-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  background:var(--ink);border:1px solid var(--line);border-radius:9px;padding:.55rem .75rem;margin-bottom:.5rem}
.urow .un,.bk-row .bn{font-weight:600}
.bk-row .bd{color:var(--muted);font-size:.74rem;margin-left:.6rem}
.ubtns,.bbtns{display:flex;gap:.4rem;align-items:center}
.bk-list{margin-top:.6rem}
code{background:var(--ink);border:1px solid var(--line);border-radius:5px;padding:.05rem .3rem;font-size:.82rem}
.hidden{display:none}

@media(max-width:760px){
  .hoststrip{grid-template-columns:repeat(2,1fr)}
  main{padding:1rem}
  .grid2{grid-template-columns:1fr}
  .grid2 .span2{grid-column:1}
}