:root {
  color-scheme: dark;
  --bg:#0a0a10; --panel:#10121a; --panel2:#141722; --tile:#171a28; --line:#1e2233;
  --text:#e9ecf3; --muted:#7c8496; --dim:#64748b;
  --cyan:#35dcf0; --magenta:#ff3d9a; --green:#3ddc84; --amber:#fbbf24;
  --purple:#a78bfa; --blue:#60a5fa; --red:#ff4d5e;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:"Chakra Petch",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:28px 18px 60px;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 10% 92%, rgba(120,60,200,.18), transparent 70%),
    radial-gradient(55% 40% at 92% 86%, rgba(160,40,140,.14), transparent 70%);
}
.wrap { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.wrap.narrow { max-width:420px; display:flex; align-items:center; min-height:80vh; }
.wrap.narrow .card { width:100%; }

/* login */
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:30px;
        box-shadow:0 0 34px rgba(53,220,240,.07); }
h1 { margin:0 0 3px; font-size:1.3rem; letter-spacing:.4px; }
.sub { color:var(--muted); margin:0 0 24px; font-size:.85rem; }
label { display:block; font-size:.66rem; font-weight:700; letter-spacing:1.4px;
        text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
input { width:100%; padding:11px 13px; margin-bottom:15px; font:inherit;
        background:#0c0e14; border:1px solid var(--line); border-radius:8px; color:var(--text); }
input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(53,220,240,.12); }
button { font:inherit; cursor:pointer; }
#go { width:100%; padding:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
      background:var(--cyan); color:#06222a; border:none; border-radius:8px; }
#go:hover { background:#5ce6f6; }
#go[disabled] { background:#2a3038; color:var(--dim); cursor:not-allowed; }
.check { display:flex; align-items:center; gap:9px; margin:-4px 0 16px;
         font-size:.8rem; color:var(--muted); text-transform:none;
         letter-spacing:0; font-weight:400; cursor:pointer; }
.check input { width:auto; margin:0; accent-color:var(--cyan); cursor:pointer; }
.check span { user-select:none; }

.quiet { color:var(--muted); font-size:.78rem; text-decoration:none; }
.quiet:hover { color:var(--cyan); }

.alert { margin-top:15px; padding:11px 13px; border-radius:8px; font-size:.84rem; line-height:1.55; }
.alert.err  { background:#2a0f16; border-left:3px solid var(--red);   color:#ffb3ba; }
.alert.ok   { background:#0e1a17; border-left:3px solid var(--green); color:#b3f0cd; }
.alert.warn { background:#241d0d; border-left:3px solid var(--amber); color:#f5d99b; }
code { background:#0c0e14; padding:1px 6px; border-radius:4px; font-size:.9em; }

/* header */
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:14px; }
.brand { font-size:1.15rem; font-weight:700; letter-spacing:.3px; }
.sub2 { color:var(--muted); font-size:.78rem; }
.me { display:flex; align-items:center; gap:12px; }
.me-txt { text-align:right; font-size:.82rem; }
.me-txt b { display:block; }
.role { font-size:.6rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); }
.role.owner { color:var(--amber); } .role.admin { color:var(--cyan); }
.role.mod { color:var(--green); } .role.support { color:var(--purple); }
.ghost { padding:8px 14px; font-size:.72rem; background:#1c2030; color:var(--muted);
         border:1px solid var(--line); border-radius:7px; }
.ghost:hover { background:#232839; color:var(--text); }

/* collapsible sections */
.sec { background:var(--panel); border:1px solid var(--line); border-radius:14px;
       margin-bottom:12px; overflow:hidden; transition:box-shadow .16s ease; }
.sec.open { box-shadow:0 0 30px rgba(53,220,240,.10); border-color:#2a3145; }
.sec-head { width:100%; display:flex; align-items:center; gap:13px; padding:16px 18px;
            background:none; border:none; color:var(--text); text-align:left; }
.sec-head:hover { background:#141826; }
.sec-ico { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; }
.sec-ico svg { width:16px; height:16px; }
.sec-ico.green  { background:rgba(61,220,132,.14); color:var(--green); }
.sec-ico.purple { background:rgba(167,139,250,.16); color:var(--purple); }
.sec-ico.blue   { background:rgba(96,165,250,.16); color:var(--blue); }
.sec-ico.amber  { background:rgba(251,191,36,.14); color:var(--amber); }
.sec-t { font-weight:700; font-size:.95rem; letter-spacing:.3px; flex:1; }
.count { color:var(--dim); font-size:.72rem; margin-right:6px; }
.chev { width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
        transform:rotate(45deg); transition:transform .18s ease; flex-shrink:0; margin-right:4px; }
.sec.open .chev { transform:rotate(-135deg); }
.sec-body { display:none; padding:2px 18px 20px; }
.sec.open .sec-body { display:block; animation:pop .16s ease-out; }
@keyframes pop { from { opacity:0; transform:translateY(-5px);} to { opacity:1; transform:none;} }

/* server tiles */
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.tile { background:var(--tile); border:1px solid var(--line); border-left:2px solid var(--cyan);
        border-radius:10px; padding:14px 12px; text-align:center; }
.tile-v { font-size:1.05rem; font-weight:700; }
.tile-k { color:var(--muted); font-size:.6rem; font-weight:700; letter-spacing:1.4px;
          text-transform:uppercase; margin-top:4px; }
.tile-s { color:var(--dim); font-size:.62rem; margin-top:3px; }

/* metric bars */
.meters { margin:16px 0 6px; }
.meter { margin-bottom:13px; }
.meter-top { display:flex; justify-content:space-between; align-items:baseline;
             font-size:.76rem; color:var(--muted); margin-bottom:6px; }
.meter-n { color:var(--text); font-size:.8rem; }
.meter-n .of { color:var(--dim); }
.meter-n b { color:var(--cyan); margin-left:5px; }
.track { height:7px; background:#0c0e14; border-radius:99px; overflow:hidden; border:1px solid var(--line); }
.fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#22b8cf,var(--cyan));
        transition:width .5s ease; }
.fill.warn   { background:linear-gradient(90deg,#d97706,var(--amber)); }
.fill.danger { background:linear-gradient(90deg,#dc2626,var(--red)); }

.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.kv:last-child { border-bottom:none; }
.kv span { color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:7px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--dim); }
.dot.on { background:var(--green); box-shadow:0 0 8px var(--green); }
.dot.off { background:var(--red); box-shadow:0 0 8px var(--red); }

/* activity log */
.log-row { display:flex; gap:13px; align-items:flex-start; background:var(--tile);
           border-radius:10px; padding:13px 14px; margin-bottom:8px; }
.log-dot { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
           background:rgba(96,165,250,.16); color:var(--blue); }
.log-dot svg { width:15px; height:15px; }
.log-dot.power  { background:rgba(61,220,132,.16); color:var(--green); }
.log-dot.danger { background:rgba(255,77,94,.16);  color:#f87171; }
.log-dot.backup { background:rgba(251,191,36,.16); color:var(--amber); }
.log-dot.read   { background:rgba(148,163,184,.16); color:#94a3b8; }
.log-body { min-width:0; flex:1; }
.log-1 { font-size:.86rem; font-weight:600; margin-bottom:3px; }
.log-1 .dash { color:var(--dim); margin:0 6px; }
.log-1 .ev { color:#cbd5e1; }
.log-2 { font-size:.8rem; color:#94a3b8; word-break:break-all; margin-bottom:5px; }
.log-2 b { color:#e2e8f0; }
.log-3 { font-size:.72rem; color:var(--dim); display:flex; gap:7px; flex-wrap:wrap; }
.log-3 .sep { opacity:.5; }
.ip-odd { color:var(--amber); font-weight:600; }
.more { width:100%; margin-top:6px; padding:10px; font-size:.74rem; background:#1c2030;
        color:var(--muted); border:1px solid var(--line); border-radius:8px; }
.more:hover { background:#232839; }

/* accounts */
.users { display:flex; flex-direction:column; gap:9px; }
.user { display:flex; align-items:center; gap:12px; background:var(--tile);
        border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.av { width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
      font-weight:700; color:#0b0b10; flex-shrink:0; background:var(--dim); }
.av.owner { background:var(--amber); } .av.admin { background:var(--cyan); }
.av.mod { background:var(--green); } .av.support { background:var(--purple); }
.user-n { font-weight:600; font-size:.9rem; }
.user-m { font-size:.74rem; color:var(--muted); margin-top:2px; }
.tag { font-size:.62rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
       padding:2px 6px; border-radius:4px; }
.tag.warn { background:rgba(251,191,36,.14); color:var(--amber); }
.tag.off  { background:rgba(255,77,94,.14); color:var(--red); }

/* live console */
.sec-ico.cyan { background:rgba(53,220,240,.14); color:var(--cyan); }
.ws { font-size:.62rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
      padding:3px 8px; border-radius:5px; margin-right:8px; }
.ws.on  { background:rgba(61,220,132,.15); color:var(--green); }
.ws.off { background:rgba(148,163,184,.13); color:var(--dim); }

.live-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px; }
.ls { background:var(--tile); border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
.ls.wide { grid-column:span 4; }
.ls-k { display:block; color:var(--muted); font-size:.58rem; font-weight:700;
        letter-spacing:1.3px; text-transform:uppercase; margin-bottom:3px; }
.ls-v { font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }
.track.sm { height:4px; margin-top:7px; }

.pwr { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pw { padding:8px 16px; font-size:.74rem; font-weight:700; letter-spacing:.9px;
      text-transform:uppercase; border-radius:7px; border:1px solid var(--line); background:#1c2030; color:var(--muted); }
.pw:hover { background:#232839; color:var(--text); }
.pw.start   { border-color:rgba(61,220,132,.4); color:#8ceab5; }
.pw.restart { border-color:rgba(251,191,36,.4); color:#f5d99b; }
.pw.stop    { border-color:rgba(255,77,94,.4);  color:#ffb3ba; }
.pw.send    { border-color:rgba(53,220,240,.4); color:#a9edf8; }

.con { background:#07080d; border:1px solid var(--line); border-radius:10px;
       padding:12px 14px; height:340px; overflow-y:auto; font-family:Consolas,Monaco,monospace;
       font-size:.74rem; line-height:1.55; }
.con-line { color:#9fb0c4; white-space:pre-wrap; word-break:break-word; }
.con-line.own { color:var(--cyan); }
.con-line.err { color:#f87171; }
.con-in { display:flex; align-items:center; gap:9px; margin-top:9px; }
.con-in span { color:var(--cyan); font-family:Consolas,monospace; }
.con-in input { flex:1; margin:0; font-family:Consolas,Monaco,monospace; font-size:.78rem; }

/* log cleanup */
.clean { background:var(--tile); border:1px solid var(--line); border-radius:10px;
         padding:14px; margin:14px 0; }
.clean-t { font-size:.66rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
           color:var(--muted); margin-bottom:10px; }
.clean-b { display:flex; gap:8px; flex-wrap:wrap; }
.clean-b .pw { flex:1; min-width:130px; line-height:1.4; padding:10px 12px;
               border-color:rgba(251,191,36,.35); color:#f5d99b; }
.clean-b .pw[disabled] { opacity:.4; cursor:not-allowed; }
.pw-sub { display:block; font-size:.62rem; font-weight:400; letter-spacing:.2px;
          text-transform:none; color:var(--dim); margin-top:3px; }
.lf-head, .lf { display:grid; grid-template-columns:48px 1fr 70px 46px; gap:9px;
                align-items:center; padding:7px 4px; font-size:.76rem; }
.lf-head { color:var(--muted); font-size:.6rem; font-weight:700; letter-spacing:1.2px;
           text-transform:uppercase; border-bottom:1px solid var(--line); }
.lf { border-bottom:1px solid #171a26; }
.lf-x { font-size:.55rem; font-weight:700; letter-spacing:.6px; text-align:center;
        padding:3px 0; border-radius:4px; background:rgba(148,163,184,.13); color:#94a3b8; }
.lf-x.adm { background:rgba(53,220,240,.14); color:var(--cyan); }
.lf-x.rpt { background:rgba(251,191,36,.14); color:var(--amber); }
.lf-x.mdmp, .lf-x.dmp { background:rgba(255,77,94,.14); color:#f87171; }
.lf-n { color:#b9c0cf; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lf-s, .lf-a { color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }

/* schedules */
.sec-ico.red { background:rgba(255,77,94,.14); color:#f87171; }
.sch { background:var(--tile); border:1px solid var(--line); border-radius:10px;
       padding:13px 14px; margin-bottom:9px; }
.sch-h { display:flex; align-items:center; gap:9px; font-size:.9rem; }
.sch-m { font-size:.76rem; color:var(--muted); margin:5px 0 8px; }
.sch-t { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.tk { font-size:.62rem; font-weight:600; padding:3px 8px; border-radius:5px;
      background:rgba(53,220,240,.1); color:var(--cyan); }
.tag.ok { background:rgba(61,220,132,.14); color:var(--green); }

/* bans */
.ban-add { display:flex; gap:8px; flex-wrap:wrap; }
.ban-add input { flex:1; min-width:150px; margin:0; }
.mini { background:#232839; border:1px solid var(--line); color:var(--muted);
        border-radius:5px; padding:3px 9px; font-size:.8rem; line-height:1.2; margin-left:4px; }
.mini:hover { background:#2d3444; color:var(--text); }
.mini.save { padding:7px 14px; font-size:.72rem; font-weight:700; letter-spacing:.8px;
             text-transform:uppercase; border-color:rgba(53,220,240,.35); color:#a9edf8; }
.dimtxt { color:var(--dim); font-size:.7rem; }
.lf.mod { grid-template-columns:48px 1fr 64px 40px; }
.lf.mod.bad { background:rgba(255,77,94,.06); border-radius:6px; }
.wsl { color:var(--muted); font-size:.72rem; text-decoration:none; }
.wsl:hover { color:var(--cyan); text-decoration:underline; }
.lf-x.rpt { background:rgba(167,139,250,.16); color:var(--purple); }

/* startup variables */
.sv { padding:11px 0; border-bottom:1px solid var(--line); }
.sv:last-child { border-bottom:none; }
.sv-k { font-size:.82rem; font-weight:600; display:flex; align-items:center;
        gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.sv-k code { font-weight:400; font-size:.72rem; }
.sv-v { font-size:.8rem; color:#b9c0cf; word-break:break-all; }
.sv-v.secret { color:var(--dim); font-style:italic; }
.sv-e { display:flex; gap:8px; align-items:flex-start; }
.sv-e input, .sv-e textarea { flex:1; margin:0; font-size:.78rem;
        font-family:Consolas,Monaco,monospace; }
.sv-e textarea { resize:vertical; padding:9px 11px; background:#0c0e14;
        border:1px solid var(--line); border-radius:8px; color:var(--text); }

.note { color:var(--dim); font-size:.78rem; line-height:1.6; margin:14px 0 0; }
.loading { color:var(--muted); font-size:.85rem; padding:10px 0; }

@media (max-width:560px) {
  .tiles { grid-template-columns:1fr 1fr; }
  .top { flex-direction:column; align-items:flex-start; }
  .me { width:100%; justify-content:space-between; }
  .me-txt { text-align:left; }
}