/* ALR EcoVision AI Server — Admin Console
   Visual language: object-detection bounding-box motif (corner brackets,
   label chips) borrowed straight from the detector this console operates —
   severity colors match app/services/inference_engine.py::_severity exactly
   (baik / rendah / sedang / tinggi) so the vocabulary stays one-to-one
   between the model output and the UI that manages it. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0a1310;
  --bg-grid: radial-gradient(circle at 1px 1px, rgba(148,179,164,.08) 1px, transparent 0);
  --panel:#11201b;
  --panel-raised:#16281f;
  --panel-hover:#1b3126;
  --border:#213a2f;
  --border-soft:#1a2e25;
  --text:#eaf3ec;
  --text-muted:#8ba99b;
  --text-dim:#5d7669;

  --signal:#6ee7a8;     /* baik / clean / success */
  --signal-dim:#284436;
  --water:#4fb6e6;      /* info / genangan air */
  --water-dim:#1e3947;
  --amber:#f2b84b;      /* sedang / warning */
  --amber-dim:#453820;
  --coral:#f2705c;      /* tinggi / danger */
  --coral-dim:#452721;
  --neutral:#94a3a3;    /* sampah / netral */

  --radius:10px;
  --radius-sm:6px;
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow-lift: 0 8px 28px -8px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg) var(--bg-grid);
  background-size: 100% 100%, 22px 22px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background: var(--signal-dim); color:var(--signal); }
a{ color:var(--water); }
button{ font-family:inherit; }
input,select,textarea{ font-family:var(--font-mono); }

.hidden{ display:none !important; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--text-muted); }
.small{ font-size:12px; }

/* ---------- corner-bracket "detection frame" signature ----------
   Two opposite corner-brackets, echoing the bounding-box marks the
   detector itself draws around a match. Deliberately restrained to two
   corners (not all four) so it reads as an accent, not a border. */
.frame{ position:relative; }
.frame::before, .frame::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  border:2px solid var(--signal);
  opacity:.55;
  pointer-events:none;
}
.frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------- app shell ---------- */
#app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:236px; flex-shrink:0;
  background:var(--panel);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column;
  padding:20px 14px;
  position:sticky; top:0; height:100vh;
}
.brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
.brand-mark{
  width:30px; height:30px; border-radius:7px;
  background: linear-gradient(135deg, var(--signal), var(--water));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#08150f; font-size:14px;
}
.brand-text{ font-family:var(--font-display); font-weight:600; font-size:14.5px; letter-spacing:.2px; }
.brand-text small{ display:block; font-family:var(--font-body); font-weight:400; color:var(--text-muted); font-size:10.5px; margin-top:1px; letter-spacing:.4px; text-transform:uppercase; }

.nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--text-muted); text-decoration:none; cursor:pointer;
  font-size:13px; font-weight:500; border:1px solid transparent;
  background:transparent;
}
.nav-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:var(--panel-raised); color:var(--text); }
.nav-item.active{ background:var(--signal-dim); color:var(--signal); border-color:rgba(110,231,168,.25); }

.sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }
.conn-pill{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--panel-raised); border-radius:var(--radius-sm); border:1px solid var(--border-soft);
  font-size:11.5px; color:var(--text-muted);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--neutral); flex-shrink:0; }
.dot.ok{ background:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); }
.dot.bad{ background:var(--coral); box-shadow:0 0 0 3px var(--coral-dim); }
.conn-pill .url{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-family:var(--font-mono); }
.link-btn{
  background:none; border:none; color:var(--water); cursor:pointer; font-size:11.5px;
  padding:6px 2px 0; text-align:left; text-decoration:underline; text-underline-offset:2px;
}

.main{ flex:1; min-width:0; padding:26px 32px 60px; max-width:1180px; }
.topbar{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.topbar h1{ font-family:var(--font-display); font-size:22px; margin:0; font-weight:600; letter-spacing:.2px; }
.topbar p{ margin:4px 0 0; color:var(--text-muted); font-size:13px; max-width:620px; }
.topbar-actions{ display:flex; gap:8px; }

/* ---------- mobile: sidebar jadi drawer off-canvas ----------
   PERBAIKAN (section: tampilan mobile AI Server - sebelumnya sidebar
   236px fixed SELALU tampil berdampingan dengan konten, di layar HP
   (~360-400px lebar) ini menyisakan ruang konten yang sangat sempit
   dan terlihat "tidak muat". Di bawah 900px, sidebar disembunyikan di
   luar layar (translateX) dan hanya muncul sebagai drawer saat tombol
   hamburger ditekan, dengan overlay gelap di belakangnya. */
.mobile-menu-btn{
  display:none; position:fixed; top:14px; left:14px; z-index:60;
  width:38px; height:38px; border-radius:var(--radius-sm);
  background:var(--panel-raised); border:1px solid var(--border-soft); color:var(--text);
  align-items:center; justify-content:center; cursor:pointer;
}
.mobile-menu-btn svg{ width:19px; height:19px; }
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:45;
}
@media (max-width:900px){
  #app-shell{ position:relative; }
  .mobile-menu-btn{ display:flex; }
  .sidebar{
    position:fixed; top:0; left:0; z-index:50; width:264px; max-width:82vw;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow: var(--shadow-lift);
  }
  #app-shell.sidebar-open .sidebar{ transform:translateX(0); }
  #app-shell.sidebar-open .sidebar-overlay{ display:block; }
  .main{ padding:70px 16px 48px; max-width:100%; }
  .topbar{ margin-bottom:16px; }
  .topbar h1{ font-size:19px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns:1fr; }
  .wizard-labeler-grid{ grid-template-columns:1fr !important; }
  table{ font-size:12.5px; }
  /* Tabel lebar (mis. daftar model, log audit) dibuat bisa digeser
     horizontal alih-alih memaksa layout menyempit sampai rusak. */
  .table-scroll, .card > div > table, .card table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:480px){
  .main{ padding-left:12px; padding-right:12px; }
  .stat-value{ font-size:1.4rem; }
}

.view{ display:none; }
.view.active{ display:block; animation:fadein .18s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(3px);} to{opacity:1; transform:none;} }

/* ---------- grid & cards ---------- */
.grid{ display:grid; gap:14px; }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-3{grid-template-columns:repeat(2,1fr);} }

.card{
  background:var(--panel); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:16px;
}
.card.raised{ background:var(--panel-raised); }

/* ===== Riwayat & Kolase Foto Sampel =====
   PERBAIKAN (section: preview/riwayat detail bisa edit foto sample &
   label, gaya kolase eco-amanah-ai) - grid kartu foto dengan status
   label & tombol edit, dipakai di view Sampel Foto & Label. */
.point-collage{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.point-collage-item{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.point-collage-photo{ position:relative; aspect-ratio:1/1; background:var(--panel-raised); overflow:hidden; }
.point-collage-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.point-collage-badge{
  position:absolute; top:6px; left:6px; font-size:10.5px; font-weight:600;
  padding:2px 8px; border-radius:999px; z-index:1;
}
.point-collage-final{ position:absolute; bottom:6px; right:6px; font-size:14px; z-index:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.point-collage-meta{ padding:8px 10px; font-size:11.5px; color:var(--text-muted); display:flex; flex-direction:column; gap:4px; }
.point-collage-meta button{ width:100%; }
.stat-card{ padding:15px 16px; }
.stat-card .stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); margin-bottom:8px; }
.stat-card .stat-value{ font-family:var(--font-display); font-size:24px; font-weight:600; }
.stat-card .stat-sub{ font-size:11.5px; color:var(--text-dim); margin-top:4px; }

.section{ margin-bottom:26px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.section-head h2{ font-family:var(--font-display); font-size:15.5px; margin:0; font-weight:600; }
.section-head p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--panel-raised); color:var(--text);
  font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .05s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{ background:var(--panel-hover); border-color:#2c4c3d; }
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.primary{ background:var(--signal); border-color:var(--signal); color:#07160f; }
.btn.primary:hover{ background:#7ff2b6; }
.btn.danger{ background:transparent; border-color:var(--coral-dim); color:var(--coral); }
.btn.danger:hover{ background:var(--coral-dim); }
.btn.ghost{ background:transparent; border-color:transparent; color:var(--text-muted); }
.btn.ghost:hover{ background:var(--panel-raised); color:var(--text); }
.btn.sm{ padding:5px 10px; font-size:11.5px; }
.btn.block{ width:100%; justify-content:center; }

/* ---------- forms ---------- */
label{ display:block; font-size:11.5px; color:var(--text-muted); margin-bottom:5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.field{ margin-bottom:13px; }
.field .hint{ font-size:11px; color:var(--text-dim); margin-top:4px; font-family:var(--font-body); }
input[type=text],input[type=email],input[type=number],input[type=password],input[type=url],textarea,select{
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:9px 11px; border-radius:var(--radius-sm); font-size:13px; outline:none;
}
input:focus,textarea:focus,select:focus{ border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-dim); }
textarea{ resize:vertical; min-height:70px; }
.row{ display:flex; gap:10px; }
.row > *{ flex:1; }
input[type=range]{ width:100%; accent-color:var(--signal); }
.range-row{ display:flex; align-items:center; gap:12px; }
.range-row output{ font-family:var(--font-mono); font-size:12.5px; width:44px; text-align:right; color:var(--signal); flex-shrink:0; }
input[type=checkbox]{ accent-color:var(--signal); width:15px; height:15px; }
.check-row{ display:flex; align-items:center; gap:8px; }
.check-row label{ margin:0; text-transform:none; font-size:13px; color:var(--text); font-weight:500; }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius); }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  text-align:left; padding:9px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); background:var(--panel-raised); border-bottom:1px solid var(--border-soft); white-space:nowrap;
}
tbody td{ padding:10px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:rgba(255,255,255,.015); }
.empty-row td{ color:var(--text-dim); text-align:center; padding:26px 12px; font-style:normal; }

/* ---------- chips / badges (mirror detector severity vocabulary) ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.2px; white-space:nowrap;
}
.chip.baik, .chip.active, .chip.done, .chip.production{ background:var(--signal-dim); color:var(--signal); }
.chip.sedang, .chip.pending, .chip.staging{ background:var(--amber-dim); color:var(--amber); }
.chip.tinggi, .chip.failed, .chip.inactive, .chip.archived{ background:var(--coral-dim); color:var(--coral); }
.chip.rendah, .chip.claimed, .chip.running{ background:var(--water-dim); color:var(--water); }
.chip.neutral{ background:var(--panel-raised); color:var(--text-muted); border:1px solid var(--border); }
.chip .dot{ width:5px; height:5px; }

/* ---------- institution / api-key cards ---------- */
.inst-card{ padding:14px 16px; }
.inst-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.inst-name{ font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.inst-slug{ color:var(--text-muted); font-family:var(--font-mono); font-size:11.5px; margin-top:2px; }
.inst-meta{ display:flex; gap:14px; margin-top:10px; font-size:11.5px; color:var(--text-muted); }
.inst-actions{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }

.keyline{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border-soft); }
.keyline:last-child{ border-bottom:none; }
.keyline .kmeta{ flex:1; min-width:0; }
.keyline .kprefix{ font-family:var(--font-mono); font-size:12.5px; }
.keyline .ksub{ font-size:11px; color:var(--text-dim); margin-top:2px; }

/* key reveal box */
.key-reveal{
  font-family:var(--font-mono); font-size:12.5px; background:var(--bg);
  border:1px dashed var(--signal); border-radius:var(--radius-sm); padding:12px 14px;
  word-break:break-all; color:var(--signal); margin:12px 0; position:relative;
}
.copy-box{ display:flex; align-items:center; gap:8px; }
.copy-box .val{ flex:1; }

/* connection guide */
.guide-steps{ counter-reset:step; list-style:none; margin:0; padding:0; }
.guide-steps li{
  counter-increment:step; position:relative; padding:0 0 0 34px; margin-bottom:16px; font-size:13px;
}
.guide-steps li:last-child{ margin-bottom:0; }
.guide-steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:22px; height:22px; border-radius:6px; background:var(--signal-dim); color:var(--signal);
  font-family:var(--font-mono); font-weight:600; font-size:11.5px; display:flex; align-items:center; justify-content:center;
}
.guide-steps b{ color:var(--text); }
.snippet{
  font-family:var(--font-mono); font-size:12px; background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:10px 12px; margin-top:8px; color:var(--water); overflow-x:auto;
}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,12,10,.7); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:20px;
}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lift);
}
.modal.wide{ max-width:760px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border-soft); }
.modal-head h3{ margin:0; font-family:var(--font-display); font-size:15px; font-weight:600; }
.modal-body{ padding:18px; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--border-soft); }
.close-x{ background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; line-height:1; padding:2px; }
.close-x:hover{ color:var(--text); }

/* ---------- toasts ---------- */
#toasts{ position:fixed; bottom:18px; right:18px; display:flex; flex-direction:column; gap:8px; z-index:100; }
.toast{
  background:var(--panel-raised); border:1px solid var(--border); border-left:3px solid var(--signal);
  padding:11px 14px; border-radius:var(--radius-sm); font-size:12.5px; min-width:240px; max-width:360px;
  box-shadow:var(--shadow-lift); animation:slidein .16s ease;
}
.toast.error{ border-left-color:var(--coral); }
@keyframes slidein{ from{ transform:translateX(12px); opacity:0;} to{ transform:none; opacity:1;} }

/* ---------- login screen ---------- */
#login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:100%; max-width:420px; padding:30px 28px; }
.login-card h1{ font-family:var(--font-display); font-size:19px; margin:0 0 4px; }
.login-card .sub{ color:var(--text-muted); font-size:12.5px; margin-bottom:22px; }
.login-status{ margin-top:12px; font-size:12px; }
.login-status.ok{ color:var(--signal); }
.login-status.bad{ color:var(--coral); }

/* progress bar */
.bar{ height:6px; border-radius:3px; background:var(--bg); border:1px solid var(--border-soft); overflow:hidden; }
.bar > i{ display:block; height:100%; background:var(--signal); }
.bar.warn > i{ background:var(--amber); }
.bar.danger > i{ background:var(--coral); }

.spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid var(--border);
  border-top-color:var(--signal); animation:spin .6s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

.icon-btn{ background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius-sm); padding:6px 8px; cursor:pointer; }
.icon-btn:hover{ color:var(--text); border-color:#2c4c3d; }

.divider{ height:1px; background:var(--border-soft); margin:18px 0; border:none; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--panel-hover); border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ================================================================ */
/* Panduan Pemula ("Mulai di Sini") - wizard.js                     */
/* ================================================================ */
.wizard-step-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.wizard-step-num{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  background:var(--signal-dim); color:var(--signal); font-family:var(--font-display);
  font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px;
}
.wizard-step-head h3{ margin:0 0 4px; font-family:var(--font-display); font-size:15px; }
.wizard-step-head p{ margin:0; color:var(--text-muted); font-size:13px; line-height:1.55; }

.wizard-tips{
  background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:12.5px; color:var(--text-muted); margin-bottom:16px;
}
.wizard-tips ul{ margin:6px 0 0; padding-left:18px; line-height:1.6; }
.wizard-tips b{ color:var(--text); }

.wizard-dropzone{
  border:1.5px dashed var(--border); border-radius:var(--radius); padding:28px 16px;
  text-align:center; cursor:pointer; color:var(--text-muted); transition:.15s;
}
.wizard-dropzone:hover, .wizard-dropzone.drag{ border-color:var(--signal); background:var(--panel-hover); color:var(--text); }
.wizard-dropzone svg{ margin-bottom:8px; opacity:.7; }
.muted-sm{ font-size:12px; color:var(--text-dim); margin-top:4px; }

.wizard-labeler{ margin-top:18px; }
.wizard-labeler.hidden{ display:none; }
.wizard-labeler-grid{ display:grid; grid-template-columns:130px 1fr; gap:16px; }
@media (max-width:820px){ .wizard-labeler-grid{ grid-template-columns:1fr; } }

.wizard-thumbs{ display:flex; flex-direction:row; gap:8px; overflow-x:auto; max-height:none; }
@media (min-width:821px){ .wizard-thumbs{ flex-direction:column; overflow-y:auto; max-height:420px; } }
.wz-thumb{
  position:relative; flex:0 0 auto; width:88px; height:66px; border-radius:6px; overflow:hidden;
  border:2px solid var(--border); cursor:pointer; opacity:.7;
}
.wz-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wz-thumb.active{ border-color:var(--signal); opacity:1; }
.wz-thumb.labeled{ opacity:1; }
.wz-thumb-check{
  position:absolute; top:2px; right:2px; background:var(--signal); color:#07160f;
  width:16px; height:16px; border-radius:50%; font-size:10px; display:flex;
  align-items:center; justify-content:center; font-weight:700;
}

.wizard-canvas-wrap{ min-width:0; }
.wizard-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.wizard-class-buttons{ display:flex; gap:6px; flex-wrap:wrap; }
.wz-class-btn{
  border:1.5px solid var(--cls-color, var(--border)); background:transparent; color:var(--cls-color, var(--text-muted));
  border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.wz-class-btn.active{ background:var(--cls-color, var(--signal)); color:#07160f; }

#wz-canvas{ width:100%; max-width:100%; border-radius:var(--radius-sm); border:1px solid var(--border); cursor:crosshair; display:block; background:#000; }

.wizard-progress{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:10px; flex-wrap:wrap; }

.wizard-ol{ margin:0 0 14px; padding-left:20px; color:var(--text-muted); font-size:13px; line-height:1.7; }
.wizard-ol a{ color:var(--signal); }
.wizard-ol code{ background:var(--panel); padding:1px 5px; border-radius:4px; font-size:11.5px; }

.wizard-code-block{ position:relative; margin-bottom:10px; }
.wizard-code-block pre{
  background:#050b08; border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:14px 16px; font-family:var(--font-mono); font-size:12px; line-height:1.6;
  color:#a9e8c4; overflow-x:auto; white-space:pre; margin:0;
}
.wizard-copy-btn{ position:absolute; top:8px; right:8px; }

.wz-input{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); padding:8px 10px; font-size:13px;
}

.wz-success{ margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--signal-dim); color:var(--signal); font-size:13px; }
.wz-error{ margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--coral-dim); color:var(--coral); font-size:13px; }

.wizard-activate-flow, .wz-activate-flow{ display:flex; flex-direction:column; gap:16px; }
.wz-activate-step{ display:flex; gap:12px; align-items:flex-start; transition:opacity .2s; }
.wz-dot{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--panel);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--text-muted);
}

/* ================================================================ */
/* Login mode toggle (Master Key vs Akun Pengguna) + Sampel Foto     */
/* ================================================================ */
.login-mode-tabs{ display:flex; gap:6px; margin-bottom:18px; background:var(--panel); border-radius:999px; padding:4px; }
.login-mode-tab{
  flex:1; border:none; background:transparent; color:var(--text-muted); font-size:12.5px; font-weight:600;
  padding:8px 10px; border-radius:999px; cursor:pointer; transition:.15s;
}
.login-mode-tab.active{ background:var(--signal-dim); color:var(--signal); }
#login-mode-user.hidden, #login-mode-master.hidden{ display:none; }

.wz-thumb-final{
  position:absolute; bottom:2px; left:2px; font-size:10px; background:rgba(0,0,0,.55);
  border-radius:4px; padding:0 3px; line-height:14px;
}
.master-only.hidden{ display:none !important; }