/* ==================================================================
   NEXUS LOAD — console theme
   dark · aurora · glassmorphism · neon accents
   ================================================================== */

:root{
  --bg:#06070c;
  --bg2:#0a0c14;
  --glass:rgba(255,255,255,.045);
  --glass-hi:rgba(255,255,255,.075);
  --stroke:rgba(255,255,255,.09);
  --stroke-hi:rgba(255,255,255,.16);
  --txt:#e9edf7;
  --txt-dim:#98a2bb;
  --txt-mute:#5f6a85;

  --cyan:#22d3ee;
  --violet:#a855f7;
  --magenta:#f472b6;
  --green:#34d399;
  --amber:#fbbf24;
  --red:#fb7185;
  --blue:#60a5fa;

  --grad:linear-gradient(135deg,#22d3ee 0%,#818cf8 50%,#a855f7 100%);
  --grad-hot:linear-gradient(135deg,#22d3ee,#a855f7 55%,#f472b6);

  --r:18px;
  --r-sm:12px;
  --shadow:0 20px 50px -22px rgba(0,0,0,.9);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Space Grotesk","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(168,85,247,.4);color:#fff}
[hidden]{display:none!important}
.screen{position:relative;z-index:2;min-height:100vh}

/* ------------------------- aurora backdrop ------------------------ */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
  radial-gradient(1200px 700px at 12% -8%,#101a3a 0%,transparent 60%),
  radial-gradient(1000px 600px at 100% 0%,#241046 0%,transparent 55%),
  linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,#05060a 100%);}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.b1{width:44vw;height:44vw;left:-8vw;top:-10vw;background:radial-gradient(circle at 30% 30%,#0ea5e9,#1e3a8a 70%,transparent);animation:drift1 24s ease-in-out infinite}
.b2{width:40vw;height:40vw;right:-6vw;top:6vh;background:radial-gradient(circle at 60% 40%,#a855f7,#4c1d95 70%,transparent);animation:drift2 30s ease-in-out infinite}
.b3{width:36vw;height:36vw;left:35vw;bottom:-14vw;background:radial-gradient(circle at 50% 50%,#f472b6,#831843 70%,transparent);opacity:.35;animation:drift3 34s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,9vh) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-7vh) scale(1.15)}}

.grid-overlay{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 10%,transparent 85%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 10%,transparent 85%);}
.scanline{position:absolute;left:0;right:0;height:180px;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.06),transparent);
  animation:scan 9s linear infinite}
@keyframes scan{0%{top:-200px}100%{top:110%}}

/* ---------------------------- glass ------------------------------- */
.glass{
  background:linear-gradient(160deg,var(--glass-hi),var(--glass) 45%,rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius:var(--r);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,238,.14),transparent 38%,transparent 62%,rgba(168,85,247,.14));
  opacity:.55;
}

/* ============================ LOGIN ============================== */
#login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.login-card{
  width:min(420px,100%);padding:34px 32px 26px;overflow:hidden;
  animation:pop .55s cubic-bezier(.2,.9,.25,1.1);
}
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.login-card.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(6px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}

.brand{display:flex;align-items:center;gap:14px;margin-bottom:26px;position:relative;z-index:1}
.logo{
  width:56px;height:56px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(145deg,rgba(34,211,238,.18),rgba(168,85,247,.18));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 26px rgba(34,211,238,.24),inset 0 0 22px rgba(168,85,247,.18);
}
.brand h1{margin:0;font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:2.5px;line-height:1}
.brand h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand p{margin:6px 0 0;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--txt-mute)}

#login-form{display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
#login-form label{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--txt-dim);font-weight:600}
.pw-wrap{position:relative}
.pw-wrap input{
  width:100%;padding:14px 46px 14px 16px;border-radius:var(--r-sm);
  background:rgba(0,0,0,.35);border:1px solid var(--stroke);color:var(--txt);
  font-family:var(--mono);font-size:15px;letter-spacing:3px;outline:none;transition:.2s;
}
.pw-wrap input:focus{border-color:rgba(34,211,238,.6);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--txt-mute);cursor:pointer;padding:9px;border-radius:9px;transition:.2s}
.eye:hover{color:var(--cyan);background:rgba(255,255,255,.06)}
.field-err{min-height:18px;font-size:12.5px;color:var(--red);font-weight:500}
.login-meta{display:flex;align-items:center;gap:9px;margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--txt-mute);position:relative;z-index:1}
.login-meta .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:blink 1.9s infinite}
@keyframes blink{50%{opacity:.35}}
.login-foot{font-size:12px;color:var(--txt-mute);text-align:center;max-width:460px;line-height:1.6;margin:0}

/* ---------------------------- buttons ----------------------------- */
.btn{
  font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.6px;
  border:1px solid transparent;border-radius:var(--r-sm);padding:13px 20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.18s;
  text-decoration:none;position:relative;overflow:hidden;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.block{width:100%}
.btn.grow{flex:1}
.btn.sm{padding:7px 12px;font-size:12px;border-radius:9px}
.btn.primary{
  background:var(--grad);color:#04060d;border-color:transparent;
  box-shadow:0 10px 30px -12px rgba(34,211,238,.85);
}
.btn.primary:not(:disabled):hover{filter:brightness(1.12);box-shadow:0 14px 36px -12px rgba(168,85,247,.9)}
.btn.primary:not(:disabled)::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:sheen 3.4s infinite;
}
@keyframes sheen{0%{left:-120%}55%,100%{left:130%}}
.btn.danger{background:rgba(251,113,133,.13);color:var(--red);border-color:rgba(251,113,133,.4)}
.btn.danger:not(:disabled):hover{background:rgba(251,113,133,.24);box-shadow:0 10px 26px -14px var(--red)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--txt-dim);border-color:var(--stroke)}
.btn.ghost:hover{color:var(--txt);border-color:var(--stroke-hi);background:rgba(255,255,255,.09)}
.btn.link{background:none;color:var(--cyan);border-color:transparent;padding:5px 8px}
.btn.link:hover{background:rgba(34,211,238,.1)}
.btn.link:disabled{opacity:.4}
.spinner{width:15px;height:15px;border:2px solid rgba(0,0,0,.28);border-top-color:#04060d;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost .spinner,.btn.link .spinner{border-color:rgba(255,255,255,.2);border-top-color:var(--cyan)}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================== TOPBAR ============================== */
.topbar{
  position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:40;
  margin:12px auto 0;width:min(1560px,calc(100% - 24px));
  padding:10px 14px;display:flex;align-items:center;gap:13px;border-radius:16px;
}
/* desktop: 2 grup di-flatten jadi 1 baris, urutan diatur pakai `order`
   mobile : .tb-a / .tb-b jadi kotak nyata = 2 baris */
.tb-a,.tb-b{display:contents}

.brand.small{order:1;margin-bottom:0;flex:0 0 auto}
.brand.small .logo{width:38px;height:38px;border-radius:11px;flex:0 0 38px}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-txt strong{
  font-family:var(--disp);font-size:15px;letter-spacing:1.7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand-txt em{
  font-style:normal;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* dua margin-auto = sisa ruang dibagi rata → [status·target] ke-center */
#pill-status{order:2;margin-left:auto;flex:0 0 auto}
/* flex:0 1 auto di desktop — JANGAN grow, biar dua margin:auto di atas/bawah
   bagi ruang rata → [status·target] ke-center. Grow-nya cuma di mobile */
#pill-target{order:3;flex:0 1 auto;min-width:0}
#pill-server{order:4;margin-left:auto;flex:0 0 auto}
#btn-logout{order:5;flex:0 0 auto}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.7px;color:var(--txt-dim);
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pill.ghost{background:none}
/* pill yang isinya teks doang harus `block` — kalau tetap flex, teksnya jadi
   anonymous flex item dan text-overflow:ellipsis nggak ngefek (cuma kepotong
   keras, bikin IP ilang digit awalnya). */
.pill.target,.pill.ghost{display:block;line-height:1.45}
.pill.target{color:var(--cyan);border-color:rgba(34,211,238,.3);background:rgba(34,211,238,.08);min-width:0}
.pill.status i{width:8px;height:8px;border-radius:50%;background:var(--txt-mute);box-shadow:0 0 8px currentColor;flex:0 0 8px}
.pill.status b{font-weight:700;letter-spacing:1.2px}
.pill.status.on i,.pill.status.on b{color:var(--green)}
.pill.status.on i{background:var(--green);animation:blink 1.1s infinite}
.pill.status.on{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.1)}
.pill.status.done i,.pill.status.done b{color:var(--cyan)}
.pill.status.done i{background:var(--cyan)}
.pill.status.done{border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.09)}
.pill.status.warn i,.pill.status.warn b{color:var(--amber)}
.pill.status.warn i{background:var(--amber);animation:blink 1.6s infinite}
.pill.status.warn{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.1)}

/* ============================ LAYOUT ============================= */
.layout{
  width:min(1560px,calc(100% - 24px));margin:16px auto 0;
  display:grid;grid-template-columns:390px minmax(0,1fr);gap:16px;align-items:start;
}
.layout.bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin-top:16px}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}

.card{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;position:relative;z-index:1}
.card-head h2{
  margin:0;font-family:var(--disp);font-size:13.5px;font-weight:600;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--txt);display:flex;align-items:center;gap:9px;
}
.card-head .ic{
  width:24px;height:24px;display:grid;place-items:center;border-radius:7px;font-size:12px;font-style:normal;
  background:rgba(34,211,238,.13);border:1px solid rgba(34,211,238,.28);color:var(--cyan);
}
.head-actions{display:flex;align-items:center;gap:6px}
.badge{
  font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:999px;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.32);color:#d8b4fe;letter-spacing:.5px;
}
.badge.mono{background:rgba(255,255,255,.06);border-color:var(--stroke);color:var(--txt-mute)}

/* ---------------------------- fields ------------------------------ */
.fl,.field label{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt-mute);font-weight:600;margin-bottom:7px}
.field label em{font-style:normal;text-transform:none;letter-spacing:.3px;color:#4b5570;font-weight:500}
.url-wrap{display:flex;align-items:center;background:rgba(0,0,0,.36);border:1px solid var(--stroke);border-radius:var(--r-sm);transition:.2s;overflow:hidden}
.url-wrap:focus-within{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 4px rgba(34,211,238,.13)}
.url-wrap .proto{
  padding:0 10px 0 14px;font-family:var(--mono);font-size:13px;color:var(--txt-mute);
  background:none;border:0;cursor:pointer;align-self:stretch;transition:.15s;letter-spacing:-.2px;
}
.url-wrap .proto:hover{color:var(--cyan);background:rgba(34,211,238,.09)}
.url-wrap .proto.http{color:var(--amber)}
.url-wrap .proto.http:hover{background:rgba(251,191,36,.12)}
.url-wrap input{flex:1;min-width:0;padding:13px 14px 13px 2px;background:none;border:0;outline:none;color:var(--txt);font-family:var(--mono);font-size:13.5px}
.url-wrap .proto:disabled{opacity:.4;cursor:not-allowed;background:none}
.hint{margin:12px 0 0;font-size:11.5px;line-height:1.65;color:var(--txt-mute)}
.hint code{font-family:var(--mono);background:rgba(255,255,255,.07);padding:1px 6px;border-radius:5px;color:#c4b5fd}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}
.field input[type=number]{
  width:100%;padding:11px 12px;border-radius:10px;background:rgba(0,0,0,.36);
  border:1px solid var(--stroke);color:var(--txt);font-family:var(--mono);font-size:15px;
  font-weight:500;outline:none;transition:.2s;-moz-appearance:textfield;
}
.field input[type=number]::-webkit-outer-spin-button,.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 0 4px rgba(168,85,247,.14)}
.field input:disabled{opacity:.45}
.quick{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.quick button{
  font-family:var(--mono);font-size:10.5px;padding:4px 8px;border-radius:7px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:var(--txt-mute);transition:.15s;
}
.quick button:hover{color:var(--cyan);border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.1)}
.quick button:disabled{opacity:.4;cursor:not-allowed}

.check{display:flex;align-items:flex-start;gap:10px;margin-top:17px;cursor:pointer;font-size:12.5px;color:var(--txt-dim);line-height:1.5;position:relative;z-index:1}
.check input{
  appearance:none;width:18px;height:18px;flex:0 0 18px;margin-top:1px;border-radius:5px;
  border:1.5px solid var(--stroke-hi);background:rgba(0,0,0,.4);cursor:pointer;transition:.18s;position:relative;
}
.check input:checked{background:var(--grad);border-color:transparent;box-shadow:0 0 14px rgba(34,211,238,.5)}
.check input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#04060d;font-weight:800}
.check input:disabled{opacity:.4;cursor:not-allowed}

.btn-row{display:flex;gap:10px;margin-top:17px;position:relative;z-index:1}
.limits{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;position:relative;z-index:1}
.limits span{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);color:var(--txt-mute)}

/* segmented control: STD / HOLD */
.seg{
  display:inline-flex;padding:3px;gap:3px;border-radius:9px;
  background:rgba(0,0,0,.4);border:1px solid var(--stroke);position:relative;z-index:1;
}
.seg-btn{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  padding:5px 11px;border:0;border-radius:6px;background:none;color:var(--txt-mute);
  cursor:pointer;transition:.18s;
}
.seg-btn:hover{color:var(--txt-dim)}
.seg-btn.on{background:var(--grad);color:#04060d;box-shadow:0 5px 16px -7px rgba(34,211,238,.9)}
.seg-btn.on[data-mode="hold"]{background:var(--grad-hot);box-shadow:0 5px 16px -7px rgba(244,114,182,.9)}
.seg-btn:disabled{opacity:.45;cursor:not-allowed}

/* cookie textarea */
#field-cookies{margin-top:15px;grid-column:1/-1}
#in-cookies{
  width:100%;padding:11px 12px;border-radius:10px;background:rgba(0,0,0,.36);
  border:1px solid var(--stroke);color:#c4b5fd;font-family:var(--mono);font-size:12px;
  line-height:1.6;outline:none;transition:.2s;resize:vertical;min-height:70px;
}
#in-cookies:focus{border-color:rgba(168,85,247,.6);box-shadow:0 0 0 4px rgba(168,85,247,.14)}
#in-cookies:disabled{opacity:.45}
#in-cookies::placeholder{color:#4b5570}
.cookie-meta{
  margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--txt-mute);
  display:flex;align-items:center;gap:7px;
}
.cookie-meta::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--txt-mute);flex:0 0 7px;
}
.cookie-meta.has{color:#c084fc}
.cookie-meta.has::before{background:var(--violet);box-shadow:0 0 8px var(--violet);animation:blink 1.6s infinite}
.cookie-meta.over{color:var(--amber)}
.cookie-meta.over::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* --------------------------- progress ----------------------------- */
/* harus sama persis .card (18px) — dulu 17px 19px, bikin 1 kartu beda 1px
   dari kartu lain, kelihatan nggak presisi pas disejajarkan */
.progress-card{padding:18px}
.prog-top{display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;z-index:1}
.prog-state{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:14px;font-weight:600;letter-spacing:.6px}
.dotlive{width:9px;height:9px;border-radius:50%;background:var(--txt-mute);box-shadow:0 0 0 rgba(34,211,238,0)}
.dotlive.on{background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.3s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%{box-shadow:0 0 0 11px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.prog-nums{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:14px;color:var(--txt-dim)}
.prog-nums .sep{color:var(--txt-mute)}
.prog-nums .tag{font-size:11px;padding:3px 8px;border-radius:6px;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.3);color:var(--cyan);font-weight:700}
.bar{height:11px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid var(--stroke);margin-top:13px;overflow:hidden;position:relative;z-index:1}
.bar-fill{
  height:100%;width:0%;border-radius:999px;background:var(--grad);
  box-shadow:0 0 18px rgba(34,211,238,.65);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative;
}
.bar-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 8px,transparent 8px 18px);
  animation:stripe 1s linear infinite;
}
@keyframes stripe{to{background-position:36px 0}}
.prog-sub{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--txt-mute);position:relative;z-index:1}

/* ----------------------------- tiles ------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.tile{padding:15px 16px;display:flex;align-items:center;gap:13px;overflow:hidden;min-height:88px}
.tile>*{position:relative;z-index:1}
.t-ic{
  width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:12px;
  font-size:16px;font-weight:700;font-family:var(--mono);
}
.t-ic.cyan{background:rgba(34,211,238,.14);color:var(--cyan);border:1px solid rgba(34,211,238,.3);box-shadow:0 0 20px -6px rgba(34,211,238,.7)}
.t-ic.violet{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.35);box-shadow:0 0 20px -6px rgba(168,85,247,.8)}
.t-ic.green{background:rgba(52,211,153,.14);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.t-ic.blue{background:rgba(96,165,250,.14);color:var(--blue);border:1px solid rgba(96,165,250,.3)}
.t-ic.amber{background:rgba(251,191,36,.14);color:var(--amber);border:1px solid rgba(251,191,36,.3)}
.t-ic.red{background:rgba(251,113,133,.14);color:var(--red);border:1px solid rgba(251,113,133,.32)}
.t-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.t-val{
  font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;line-height:1;color:#f2f5ff;
}
.t-val.big{font-size:31px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-lab{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--txt-mute);white-space:nowrap}
.t-lab em{font-style:normal;color:var(--cyan);opacity:.85;text-transform:none;letter-spacing:.3px}
.t-spark{margin-left:auto;opacity:.85}
.tile.hero{background:linear-gradient(150deg,rgba(34,211,238,.13),rgba(168,85,247,.1) 60%,var(--glass));border-color:rgba(34,211,238,.25)}
.tile.flash{animation:flash .5s ease}
@keyframes flash{0%{border-color:rgba(34,211,238,.7);box-shadow:0 0 30px -8px rgba(34,211,238,.8)}100%{}}

/* ---------------------------- warnings ---------------------------- */
.warn-box{
  border-radius:var(--r);padding:14px 16px;background:rgba(251,191,36,.07);
  border:1px solid rgba(251,191,36,.3);animation:fade .3s ease;
}
.warn-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--amber);margin-bottom:9px}
.warn-head button{background:none;border:0;color:var(--txt-mute);cursor:pointer;font-size:14px;padding:2px 5px;border-radius:6px}
.warn-head button:hover{color:var(--txt);background:rgba(255,255,255,.08)}
.warn-box ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.warn-box li{font-size:12.5px;color:#fde2a8;line-height:1.55;padding-left:16px;position:relative}
.warn-box li::before{content:"▸";position:absolute;left:0;color:var(--amber)}

/* ----------------------------- chart ------------------------------ */
.chart-card{position:relative}
.chart-card canvas{width:100%;height:230px;display:block;position:relative;z-index:1}
.chart-empty{
  position:absolute;inset:44px 18px 18px;display:grid;place-items:center;z-index:2;
  font-family:var(--mono);font-size:12.5px;color:var(--txt-mute);pointer-events:none;
  border:1px dashed var(--stroke);border-radius:12px;background:rgba(0,0,0,.2);
}
.legend{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--txt-dim)}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.sw.cyan{background:var(--cyan);box-shadow:0 0 9px rgba(34,211,238,.8)}
.sw.violet{background:var(--violet);box-shadow:0 0 9px rgba(168,85,247,.8)}

/* ------------------------------ log ------------------------------- */
/* min-width:0 wajib — tanpa ini min-content tabel/log melebar track grid */
.log-card,.hist-card{min-height:300px;min-width:0;display:flex;flex-direction:column}
.log-body{
  flex:1;min-width:0;min-height:230px;max-height:340px;overflow:auto;background:rgba(0,0,0,.42);
  border:1px solid var(--stroke);border-radius:12px;padding:12px 13px;
  font-family:var(--mono);font-size:12px;line-height:1.75;scroll-behavior:smooth;
}
.log-body::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{width:8px;height:8px}
.log-body::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:9px}
.log-body::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track{background:transparent}
.log-line{display:flex;gap:10px;animation:logIn .25s ease;word-break:break-word}
@keyframes logIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
.log-time{color:#4b5570;flex:0 0 auto}
.log-msg{color:var(--txt-dim)}
.log-line.info .log-msg{color:#a9b6d4}
.log-line.warn .log-msg{color:var(--amber)}
.log-line.error .log-msg{color:var(--red)}
.log-line.ok .log-msg{color:var(--green)}
.log-empty{color:var(--txt-mute);font-style:italic}

/* ---------------------------- history ----------------------------- */
.table-wrap{flex:1;min-width:0;overflow:auto;max-height:340px;border:1px solid var(--stroke);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{
  position:sticky;top:0;background:rgba(10,12,20,.96);backdrop-filter:blur(8px);
  font-family:var(--disp);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--txt-mute);font-weight:600;text-align:left;padding:11px 13px;
  border-bottom:1px solid var(--stroke);z-index:1;
}
thead th.num{text-align:right}
tbody td{padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--txt-dim);white-space:nowrap}
tbody td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tbody tr{transition:.15s}
tbody tr:hover{background:rgba(34,211,238,.06)}
tbody tr:last-child td{border-bottom:0}
td.empty{text-align:center;color:var(--txt-mute);font-style:italic;padding:28px}
td .host{color:var(--cyan);font-family:var(--mono);font-size:12px;max-width:230px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.tag2{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:999px;letter-spacing:.6px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block}
/* versi ringkas cuma tampil di layar sempit (di-override di @media HP) */
.v-short{display:none}
.tag2.completed{background:rgba(52,211,153,.14);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.tag2.stopped{background:rgba(251,191,36,.14);color:var(--amber);border:1px solid rgba(251,191,36,.3)}
.tag2.aborted{background:rgba(251,113,133,.14);color:var(--red);border:1px solid rgba(251,113,133,.3)}

/* ----------------------------- footer ----------------------------- */
.foot{
  width:min(1560px,calc(100% - 24px));margin:20px auto 0;padding:16px 0 30px;
  display:flex;gap:10px;justify-content:center;font-family:var(--mono);font-size:11px;color:#4b5570;
}
.foot .sepz{color:#2c3346}

/* ----------------------------- toasts ----------------------------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(400px,calc(100vw - 40px))}
.toast{
  padding:13px 16px;border-radius:12px;font-size:13px;line-height:1.5;
  background:rgba(12,14,22,.95);border:1px solid var(--stroke-hi);backdrop-filter:blur(14px);
  box-shadow:0 20px 45px -18px #000;animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2);
  display:flex;gap:11px;align-items:flex-start;
}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}
.toast.err{border-color:rgba(251,113,133,.45)}
.toast.err b{color:var(--red)}
.toast.ok{border-color:rgba(52,211,153,.45)}
.toast.ok b{color:var(--green)}
.toast.info b{color:var(--cyan)}
.toast b{font-family:var(--disp);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:3px}
.toast span{color:var(--txt-dim)}

/* ---------------------------- responsive -------------------------- */
@media (max-width:1180px){
  /* minmax(0,1fr) BUKAN 1fr — 1fr = minmax(auto,1fr), auto-min-nya bikin
     track melebar sampe min-content tabel log/riwayat (~600px) */
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout.bottom{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* laptop / tablet — baris tetap 1, cuma lebih rapat */
@media (max-width:1000px){
  .topbar{gap:10px;padding:9px 13px}
  .brand-txt em{letter-spacing:1.1px}
}

/* HP — topbar jadi 2 baris */
@media (max-width:760px){
  .topbar{
    flex-direction:column;align-items:stretch;gap:8px;
    padding:9px 12px;width:min(1560px,calc(100% - 16px));
    top:calc(8px + env(safe-area-inset-top,0px));
  }
  .tb-a,.tb-b{display:flex;align-items:center;gap:9px;min-width:0}

  .brand.small{flex:0 1 auto;gap:11px;min-width:0}
  .brand.small .logo{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
  .brand-txt strong{font-size:13.5px;letter-spacing:1.3px}
  .brand-txt em{display:none}

  #pill-status,#pill-server{margin-left:0;flex:0 0 auto}
  #btn-logout{margin-left:auto;padding:6px 12px}
  .tb-b #pill-target{flex:1 1 auto;min-width:0}
  .tb-b #pill-server{justify-content:flex-start}

  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .field-grid{grid-template-columns:1fr}
  .t-val{font-size:19px}
  .t-val.big{font-size:26px}
  .card{padding:15px}
  .card-head{flex-wrap:wrap;gap:9px 12px;margin-bottom:13px}
  .head-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0}

  /* --- target sentuh di HP: semua kontrol naik ke >=34px ---
     dulu chips preset & STD/HOLD cuma 24px, checkbox 18px — susah diketuk */
  .quick{gap:7px}
  .quick button{min-height:34px;min-width:36px;padding:7px 12px;font-size:12px;letter-spacing:.4px}
  .seg-btn{padding:8px 13px;font-size:11.5px;letter-spacing:.7px;min-height:34px}
  .btn.sm{padding:9px 14px;font-size:12.5px;min-height:36px}
  #btn-logout{padding:9px 14px;min-height:36px}
  .check{min-height:34px;align-items:center;gap:11px;padding:6px 0}
  .check input{width:21px;height:21px;flex:0 0 21px;margin-top:0}
  .check input:checked::after{font-size:13px}
  .eye{padding:12px}
  .btn.link{padding:8px 11px;min-height:34px}

  .log-body,.table-wrap{max-height:240px}

  /* kartu Log & Riwayat nggak dipaksa 300px — ikut konten biar segaris
     sama kartu lain (sebelumnya kepanjangan di HP) */
  .log-card,.hist-card{min-height:170px}
  .log-body{min-height:130px}
  .table-wrap{max-height:240px}

  /* --- tabel riwayat: muat PERSIS, tanpa geser horizontal ---
     kolom 4 (Avg RPS) & 5 (P95) disembunyikan — dua-duanya udah ada
     di tile monitoring atas, jadi duplikat. table-layout:fixed bikin
     tabel = 100% lebar kontainer, bukan 582px di kotak 317px. */
  .hist-card table{table-layout:fixed}
  .hist-card thead th:nth-child(4),.hist-card tbody td:nth-child(4),
  .hist-card thead th:nth-child(5),.hist-card tbody td:nth-child(5){display:none}
  /* lebar diset ulang: 29+22+18+14+17 = 100% — pas 100% lebar kontainer.
     di-set dari kebutuhan teks SEKARANG (yang udah pakai versi ringkas):
     Waktu 76px, Target ellipsis, Req 41px, 2xx 28px, Status 38px + padding 6 */
  .hist-card thead th:nth-child(1){width:29%}
  .hist-card thead th:nth-child(2){width:22%}
  .hist-card thead th:nth-child(3){width:18%}
  .hist-card thead th:nth-child(6){width:14%}
  .hist-card thead th:nth-child(7){width:17%}
  .hist-card thead th,.hist-card tbody td{padding:9px 6px;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 9.5px itu kekecilan buat dibaca di HP — naik ke 10.5 */
  .hist-card thead th{font-size:10.5px;letter-spacing:.5px}
  .hist-card tbody td.host-cell,.hist-card td .host{max-width:100%}
  /* HP: tampilin versi ringkas; nilai penuh tetap di title */
  .hist-card .v-full{display:none}
  .hist-card .v-short{display:inline}
  .hist-card .tag2{font-size:10px;padding:3px 5px;letter-spacing:.2px}
  .hist-card td.empty{padding:24px 8px;font-size:12px}

  /* tombol tutup warning */
  #warn-close{padding:9px 11px;font-size:16px;min-width:34px;min-height:34px}

  /* label tile & chip limits juga kekecilan */
  .t-lab{font-size:11px;letter-spacing:.9px}
  .limits span{font-size:10.5px;padding:4px 9px}
}

@media (max-width:430px){
  .tiles{grid-template-columns:1fr}
  .login-card{padding:26px 22px 22px}
  .t-val{font-size:18px}
  .t-val.big{font-size:23px}
  .topbar{gap:7px;padding:8px 11px}
  /* jangan balikin ke 6px — target sentuh harus tetap >=34px */
  #btn-logout{padding:9px 12px;font-size:11.5px}
}

/* HP sangat kecil (320px) — sisain logo doang */
@media (max-width:349px){
  .brand-txt{display:none}
  .brand.small{flex:0 0 auto}
  .tb-a,.tb-b{gap:7px}
  .tb-b #pill-target,.tb-b #pill-server{font-size:10.5px;letter-spacing:.2px;padding:7px 10px}
  .card{padding:13px}
  .quick button{padding:7px 10px;min-height:34px}
  .seg-btn{padding:7px 11px;letter-spacing:.5px}
  .btn.sm{padding:9px 11px}

  /* tabel riwayat di layar 320px: font turun dikit biar isinya muat semua
     (29+20+18+14+19 = 100%) */
  .hist-card thead th,.hist-card tbody td{padding:9px 5px;font-size:10.5px}
  .hist-card thead th{font-size:10px;letter-spacing:.4px}
  .hist-card .v-short{font-size:10px}
  .hist-card .tag2{font-size:9.5px;padding:3px 4px;letter-spacing:0}
  .hist-card thead th:nth-child(1){width:29%}
  .hist-card thead th:nth-child(2){width:20%}
  .hist-card thead th:nth-child(3){width:18%}
  .hist-card thead th:nth-child(6){width:14%}
  .hist-card thead th:nth-child(7){width:19%}
}
/* fokus keyboard konsisten buat semua kontrol (input udah punya :focus sendiri) */
button:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:7px;
}
.seg-btn:focus-visible,.quick button:focus-visible{outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}