:root{
  --bg:#03110a;
  --surface:#061a10;
  --surface-2:#0a2216;
  --border:#164a2d;
  --border-dim:#0f331f;
  --text:#c9f9d8;
  --text-bright:#e9fff0;
  --muted:#4f8f68;
  --accent:#39ff8c;
  --accent-dim:#1f9c56;
  --accent-soft:rgba(57,255,140,0.12);
  --amber:#ffc266;
  --amber-dim:#c98a2e;
  --amber-soft:rgba(255,194,102,0.12);
  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,0.12);
  --shadow: 0 0 0 1px rgba(57,255,140,0.05), 0 18px 40px -20px rgba(0,0,0,0.9);
  --switch-off-bg: var(--surface-2);
  --switch-off-border: var(--border);
  --switch-off-knob: var(--muted);
}
*{box-sizing:border-box;}

/* Tombol switch on/off (dipakai a.l. untuk sakelar "Batasi IP Login" di
   master.php) — style-nya disamakan persis dengan .switch milik tool_a/tool_b
   supaya konsisten 1 frekuensi di seluruh panel. */
.switch{ position:relative; width:38px; height:20px; flex-shrink:0; display:inline-block; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  position:absolute; inset:0; background:var(--switch-off-bg); border:1px solid var(--switch-off-border);
  border-radius:3px; transition:background .15s ease, border-color .15s ease;
}
.switch .knob{
  position:absolute; top:3px; left:3px; width:12px; height:12px; background:var(--switch-off-knob);
  border-radius:2px; transition:transform .15s ease, background .15s ease;
}
.switch input:checked+.track{ background:var(--accent-soft); border-color:var(--accent); }
.switch input:checked+.track+.knob{ transform:translateX(17px); background:var(--accent); box-shadow:0 0 8px var(--accent); }
.switch input:focus-visible+.track{ outline:2px solid var(--accent); outline-offset:2px; }

/* Watermark jejak akun (username+IP+waktu) — lihat render_watermark_script()
   di config.php untuk penjelasan lengkap kenapa ini dipakai. mix-blend-mode
   bikin warnanya otomatis kontras di background gelap maupun terang tanpa
   perlu tahu tema mana yang aktif. */
.wm-overlay{
  position:fixed; inset:0; z-index:500; pointer-events:none;
  background-repeat:repeat; mix-blend-mode:difference;
}
html{ background:var(--bg); }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(57,255,140,0.07), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:none; margin:0 auto; padding:24px 32px 64px; }
.wrap.narrow{ max-width:420px; padding-top:64px; }

header.top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding-block:8px 22px; flex-wrap:wrap;
  border-bottom:1px dashed var(--border); margin-bottom:18px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{
  width:38px; height:38px; border-radius:4px; background:var(--surface-2);
  border:1px solid var(--accent-dim); display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--accent); font-size:15px; flex-shrink:0;
  box-shadow: inset 0 0 12px rgba(57,255,140,0.15);
}
.brand h1{ font-size:19px; margin:0; letter-spacing:-0.01em; color:var(--text-bright); font-weight:700; }
.brand .prompt{ font-size:12.5px; color:var(--muted); margin:2px 0 0; }
.brand .prompt .path{ color:var(--accent); }

.status-pill{
  font-size:11px; color:var(--accent); border:1px solid var(--border); background:var(--surface);
  padding:6px 11px; border-radius:3px; display:inline-flex; align-items:center; gap:7px; letter-spacing:0.03em;
}
.status-pill .dot{ width:6px;height:6px;border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); }
.status-pill.role-master{ color:var(--amber); border-color:var(--amber-dim); }
.status-pill.role-master .dot{ background:var(--amber); box-shadow:0 0 6px var(--amber); }

.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px;
}
.panel-header{
  display:flex; align-items:center; gap:8px; padding:12px 18px;
  font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:1px solid var(--border); color:var(--text-bright); background:var(--surface-2);
}
.panel-header.amber{ color:var(--amber); background:var(--amber-soft); }
.panel-body{ padding:16px 18px; }

label.field{ display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted); margin-bottom:12px; }
input[type="text"], input[type="password"], input[type="url"], select{
  font-family:inherit; font-size:13px; padding:9px 11px; border-radius:3px;
  border:1px solid var(--border); background:var(--bg); color:var(--text-bright); width:100%;
}
input::placeholder{ color:var(--muted); opacity:0.6; }
input:focus, select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.hint{ font-size:10.5px; color:var(--muted); line-height:1.55; margin:4px 0 12px; }
.error-box{
  background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger);
  padding:10px 14px; border-radius:4px; font-size:12.5px; margin-bottom:16px;
}
.success-box{
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);
  padding:10px 14px; border-radius:4px; font-size:12.5px; margin-bottom:16px;
}

button.action, a.action{
  font-family:inherit; font-size:11.5px; font-weight:600; padding:9px 14px; border-radius:3px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; letter-spacing:0.02em; text-decoration:none;
}
button.action:hover, a.action:hover{ border-color:var(--accent); color:var(--accent); }
button.action.primary{ background:var(--accent); border-color:var(--accent); color:#03110a; }
button.action.primary:hover{ filter:brightness(1.1); color:#03110a; }
button.action.amber{ background:var(--amber); border-color:var(--amber); color:#241a03; }
button.action.amber:hover{ filter:brightness(1.1); color:#241a03; }
button.action.danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
button.action.danger:hover{ background:var(--danger); color:#1a0505; }
button.action.block{ width:100%; justify-content:center; }
button.action.blue, a.action.blue{ background:#3b82f6; border-color:#3b82f6; color:#eaf1ff; }
button.action.blue:hover, a.action.blue:hover{ filter:brightness(1.1); color:#eaf1ff; }

table.acct-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.acct-table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border);
}
table.acct-table td{ padding:10px; border-bottom:1px solid var(--border-dim); vertical-align:top; }
table.acct-table tr:last-child td{ border-bottom:none; }
.perm-row{ display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; }
.perm-row label{ display:flex; align-items:center; gap:5px; color:var(--text); cursor:pointer; }
input[type="checkbox"]{ accent-color:var(--accent); width:14px; height:14px; }

.feature-card{
  border:1px solid var(--border); border-radius:5px; padding:14px 16px; background:var(--surface-2);
  margin-bottom:10px;
}
.feature-card.on{ border-color:var(--accent-dim); }
.feature-card.off{ opacity:0.55; }
.feature-card .fc-title{ font-weight:700; color:var(--text-bright); font-size:13px; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.feature-card .fc-badge{ font-size:9.5px; padding:2px 7px; border-radius:20px; letter-spacing:0.04em; text-transform:uppercase; }
.feature-card.on .fc-badge{ background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-dim); }
.feature-card.off .fc-badge{ background:var(--surface); color:var(--muted); border:1px solid var(--border); }
.feature-card .fc-body{ font-size:11.5px; color:var(--muted); }

.inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input{ width:auto; flex:1; min-width:120px; }

footer.note{ margin-top:18px; font-size:11px; color:var(--muted); text-align:center; }
footer.note::before{ content:"# "; color:var(--border); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

/* ===== Login screen — glass card over an animated "matrix code rain" =====
   Scoped entirely under .auth-page so the rest of the app is untouched. */
body.auth-page{
  min-height:100vh;
  margin:0;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  background:#03110a;
  color:var(--text-bright);
  overflow:hidden;
}
#matrix-bg{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;
}
.auth-shell{ position:relative; z-index:1; width:100%; max-width:400px; }
.auth-card{
  background:rgba(6,26,16,0.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(57,255,140,0.28); border-radius:14px; padding:36px 32px;
  box-shadow:0 0 0 1px rgba(57,255,140,0.05), 0 0 60px -10px rgba(57,255,140,0.15), 0 24px 60px -24px rgba(0,0,0,0.8);
}
.auth-head{ text-align:center; margin-bottom:22px; }
.auth-head .auth-icon{ font-size:26px; line-height:1; margin-bottom:8px; filter:drop-shadow(0 0 8px rgba(57,255,140,0.5)); }
.auth-head h1{ margin:0; font-size:20px; font-weight:700; color:var(--text-bright); letter-spacing:-0.01em; text-shadow:0 0 14px rgba(57,255,140,0.35); }
.auth-head .auth-sub{ margin:6px 0 0; font-size:13px; color:var(--muted); }

.auth-form{ margin-top:4px; }
.auth-field{ display:block; margin-bottom:16px; }
.auth-field .auth-label{ display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
.auth-field input{
  width:100%; font-family:inherit; font-size:14px; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:8px; background:rgba(3,17,10,0.6); color:var(--text-bright);
}
.auth-field input::placeholder{ color:var(--muted); opacity:0.7; }
.auth-field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3.5px rgba(57,255,140,0.15); }

.auth-submit{
  width:100%; margin-top:6px; border:none; border-radius:8px; padding:13px 16px;
  font-family:inherit; font-size:15px; font-weight:700; color:#03110a; cursor:pointer;
  background:linear-gradient(90deg,#39ff8c,#00d4ff);
  box-shadow:0 0 24px -6px rgba(57,255,140,0.6);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.auth-submit:hover{ filter:brightness(1.08); }
.auth-submit:active{ filter:brightness(0.95); }

.auth-card .error-box, .auth-card .success-box{
  border-radius:8px; font-size:12.5px; padding:10px 14px; margin-bottom:16px;
}
.auth-card .error-box{ background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger); }
.auth-card .success-box{ background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent); }

.auth-footnote{
  text-align:center; margin-top:18px; font-size:11.5px; color:var(--muted);
}