:root{
  --bg:#0d0b08; --panel:#16130e; --panel-2:#1e1a13; --line:#2e2820;
  --ink:#f4efe6; --ink-dim:#bcb1a0; --ink-faint:#8d8271;
  --amber:#e8a33d; --amber-soft:#f5c877; --violet:#a98cf0;
  --ok:#5fbf8a; --bad:#e0574f;
  --r:12px; --mono:ui-monospace,"Cascadia Code","Consolas","SF Mono",monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 700px at 12% -10%, #2a2013 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #1a1524 0%, transparent 55%), var(--bg);
  background-attachment:fixed;
  color:var(--ink); font:15.5px/1.62 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:120px;
  overflow-x:hidden;
}
body.has-job{padding-bottom:calc(230px + var(--safe-b))}
a{color:var(--amber-soft);text-decoration:none}
a:hover{text-decoration:underline}
.spacer{flex:1}

header{
  padding:14px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
  background:rgba(13,11,8,.88);backdrop-filter:blur(8px);position:sticky;top:0;z-index:30;
}
header .brand{
  font-size:18px;font-weight:700;letter-spacing:.2px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(92deg,var(--amber-soft),var(--amber) 45%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
header .sub{color:var(--ink-faint);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .keys{font:11.5px var(--mono);color:var(--ink-faint);border:1px solid var(--line);
  padding:4px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:38vw;flex:none;text-decoration:none;cursor:pointer;transition:.14s}
header .keys:hover{text-decoration:none;border-color:var(--amber);color:var(--amber-soft)}
header .keys.on{color:var(--ok);border-color:#2c4a3a}
header .keys.off{color:var(--bad);border-color:#4a2c2a}
header .keys.out{max-width:none}

/* ------------------------------- halaman masuk ------------------------------- */
/* Sengaja berdiri sendiri: halaman ini muncul sebelum app.js sempat jalan,
   jadi tidak boleh bergantung pada apa pun selain berkas ini. */
body.login-page{display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;padding:24px;padding-bottom:calc(24px + var(--safe-b))}
.login{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:12px}
.login h1{margin:0;font-size:21px;letter-spacing:.2px;
  background:linear-gradient(92deg,var(--amber-soft),var(--amber) 45%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login p{margin:0;color:var(--ink-dim);font-size:14px}
.login input{width:100%}
.login .btn{justify-content:center;min-height:46px}
.login-err{background:#2a1512;border:1px solid #4a2c2a;color:#f0a8a2;
  border-radius:9px;padding:9px 11px;font-size:13.5px}

/* ---------------- baris API key di halaman Pengaturan ---------------- */
.keyrow{display:grid;grid-template-columns:150px 1fr auto auto;gap:9px;align-items:end;
  padding:11px 0;border-bottom:1px solid var(--line)}
.keyrow:last-of-type{border-bottom:0}
.keyrow .field{margin:0}
.keyrow .res{grid-column:1/-1;font:11.5px var(--mono);color:var(--ink-faint);min-height:0}
.keyrow .res.ok{color:var(--ok)}
.keyrow .res.bad{color:var(--bad)}
@media(max-width:820px){
  .keyrow{grid-template-columns:1fr auto auto;gap:8px}
  .keyrow .f-label{grid-column:1/-1}
  .keyrow .f-key{grid-column:1/-1}
}

main{padding:22px 24px 40px;max-width:1240px;margin:0 auto}
.loading{color:var(--ink-faint);padding:40px 0}

h2{margin:0 0 4px;font-size:20px;font-weight:650;line-height:1.3}

.ttl{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.ttl h2{margin:0}
h3{margin:0;font-size:14px;font-weight:650}
.muted{color:var(--ink-faint);font-size:13.5px}
.hidden{display:none !important}
code{font:12.3px var(--mono);background:#241d12;color:var(--amber-soft);padding:1.5px 5px;border-radius:4px;
  word-break:break-word}

/* ---------------- controls ---------------- */
.btn{background:#221c12;border:1px solid #3d3325;color:var(--ink-dim);border-radius:8px;
  padding:8px 13px;font:600 13px/1 inherit;cursor:pointer;transition:.14s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:hover{border-color:var(--amber);color:var(--amber-soft)}
.btn.pri{background:linear-gradient(180deg,#e8a33d,#c8811f);border-color:#e8a33d;color:#1a1307}
.btn.pri:hover{filter:brightness(1.09);color:#1a1307}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ok{border-color:var(--ok);color:var(--ok)}
.btn.go-bad{background:linear-gradient(180deg,#e0574f,#b23a33);border-color:#e0574f;color:#fff}
.btn.go-bad:hover{filter:brightness(1.09);color:#fff;border-color:#e0574f}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
/* angka kecil di dalam tombol (jumlah konten) */
.btn input[type=number]{width:52px;display:inline-block;padding:3px 5px;margin:0 3px;
  background:#0000001f;border-color:#0004;color:inherit;font:inherit;text-align:center}
.btn.pri input[type=number]{background:#0000002e;border-color:#0003}
/* checkbox berlabel yang berdiri sendiri di toolbar */
label.inline{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ink-faint);
  cursor:pointer;white-space:nowrap}
label.inline.lock{border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--ink-dim)}
label.inline.lock.on{border-color:#2c5a3f;background:#12241a;color:#7fd6a4}

label{display:block;font-size:12px;color:var(--ink-dim);margin:0 0 5px;font-weight:600}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;background:#0c0a07;border:1px solid #332c21;color:var(--ink);
  border-radius:8px;padding:8px 10px;font:14px/1.4 inherit}
textarea{resize:vertical;min-height:52px;font-family:var(--mono);font-size:12.5px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,163,61,.14)}
.field{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

/* ---------------- cards ---------------- */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:16px;overflow:hidden}
.card-head{display:flex;align-items:center;gap:10px;padding:12px 15px;flex-wrap:wrap;
  background:linear-gradient(90deg,#1d1810,#161209);border-bottom:1px solid var(--line)}
.card-head .spacer{flex:1}
.card-body{padding:15px}
.badge{font:700 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;
  border-radius:5px;background:#3a2a10;color:var(--amber-soft);border:1px solid #56400f;white-space:nowrap}
.badge.v{background:#2a2140;color:#c9b6ff;border-color:#43356b}
.badge.g{background:#16301f;color:#7fd6a4;border-color:#2c5a3f}
.badge.r{background:#301616;color:#e88b84;border-color:#5a2c2c}
pre{margin:0;padding:14px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  font:13px/1.7 var(--mono);color:#ece3d3;background:#0b0906}

.note{border-left:3px solid var(--amber);background:#171208;padding:11px 14px;border-radius:0 8px 8px 0;
  font-size:13.5px;line-height:1.62;color:var(--ink-dim);margin-bottom:16px}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--bad);background:#1c110f}

/* ---------------- blok prompt (bisa dilipat) ---------------- */
.pblock{border-bottom:1px solid var(--line)}
.pblock>summary{display:flex;align-items:center;gap:10px;padding:11px 15px;background:#161209;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.pblock>summary::-webkit-details-marker{display:none}
.pblock>summary b{font-size:13px}
.pblock>summary .mark{flex:none;width:0;height:0;transition:.15s;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink-faint)}
.pblock[open]>summary .mark{transform:rotate(180deg)}

/* ---------------- project grid ---------------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:16px;cursor:pointer;transition:.15s;display:block}
.pcard:hover{border-color:var(--amber);transform:translateY(-2px);text-decoration:none}
.pcard .nm{font-size:16.5px;font-weight:650;color:var(--ink);margin-bottom:3px}
.pcard .dm{font-size:12px;color:var(--amber-soft);margin-bottom:11px}
.pcard .st{display:flex;gap:16px;font:11.5px var(--mono);color:var(--ink-faint)}
.pcard .st b{display:block;font-size:17px;color:var(--ink);font-weight:700;margin-bottom:1px}
.pcard .st b.good{color:var(--ok)}
.pcard.new{border-style:dashed;display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:14px;min-height:132px}
.pcard.new:hover{color:var(--amber-soft)}

/* Kotak centang tidak ditaruh di dalam <a> kartunya — mengeklik kontrol di
   dalam tautan berarti ikut membuka tautannya. Jadi kartunya dibungkus,
   dan centangnya melayang di atas bungkus itu, di luar jangkauan tautan. */
.pwrap{position:relative;display:block}
.pwrap>.pcard{height:100%}
.psel{position:absolute;top:11px;right:11px;z-index:2;display:flex;padding:5px;
  border-radius:7px;background:rgba(0,0,0,.35);opacity:.42;transition:.15s}
.psel:hover{opacity:1;background:rgba(0,0,0,.6)}
.pwrap.on .psel{opacity:1}
.pwrap.on>.pcard{border-color:var(--amber);background:rgba(232,163,61,.07)}
/* Nama project bisa panjang; jangan sampai menyelip di bawah centangnya. */
.pwrap>.pcard .nm{padding-right:30px}

.selbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 14px;
  padding:10px 13px;border:1px solid var(--amber);border-radius:var(--r);
  background:rgba(232,163,61,.08)}
.selbar .cnt{font:600 12.5px var(--mono);color:var(--amber-soft)}

/* ---------------- menu vertikal di kiri ---------------- */
.proj{display:grid;grid-template-columns:206px minmax(0,1fr);gap:22px;align-items:start;
  transition:grid-template-columns .16s ease}
.proj.mini{grid-template-columns:62px minmax(0,1fr);gap:14px}

.tabs{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);
  padding-right:9px;position:sticky;top:72px}
.tab{background:none;border:0;border-left:2px solid transparent;color:var(--ink-faint);
  padding:9px 11px;font:600 13.5px/1.35 inherit;cursor:pointer;border-radius:0 8px 8px 0;
  text-align:left;width:100%;display:flex;align-items:center;gap:9px;position:relative;
  -webkit-tap-highlight-color:transparent;overflow:hidden}
.tab:hover{color:var(--ink);background:#15110b}
.tab.on{color:var(--amber);border-left-color:var(--amber);background:#17130c}
.tab.alert{color:#c98e88}
.tab.alert:hover{color:var(--bad)}
.tab .ti{display:none}   /* kode dua huruf cuma dipakai saat menu dikecilkan */
.tab .tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab .tn{flex:none;padding:2px 6px;border-radius:999px;
  background:#16301f;color:#7fd6a4;border:1px solid #2c5a3f;font:700 10.5px/1 var(--mono)}
.tab .tdot{flex:none;width:7px;height:7px;border-radius:999px}
.tab .tdot.on{background:var(--ok)}
.tab .tdot.off{background:var(--bad)}
.tsep{height:1px;background:var(--line);margin:7px 0 7px 2px}

/* angka ringkas di menu kiri — menggantikan kartu statistik yang dulu
   memakan satu baris penuh di atas halaman */
.nstats{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px}
.ns{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:5px 11px}
.ns span{font-size:11px;color:var(--ink-faint);letter-spacing:.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ns b{font:700 15px/1 var(--mono);color:var(--amber-soft);flex:none}
.ns b.good{color:var(--ok)}
.ns b i{font-style:normal;font-size:10.5px;color:var(--ink-faint);font-weight:400}

/* tombol aksi di menu kiri */
.nacts{display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.btn.nb{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;
  font-size:12.5px;line-height:1.3}
.btn.nb .ti{display:none}   /* kode cuma dipakai saat menu dikecilkan */
.btn.nb .tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.nb.danger{border-color:#4a2c2a;color:#b98a84}
.btn.nb.danger:hover{border-color:var(--bad);color:var(--bad)}
.nadd{display:flex;gap:6px;align-items:stretch}
.nadd input[type=number]{width:56px;flex:none;text-align:center;padding:6px 4px;font-size:13px}
.nadd .btn.nb{flex:1;min-width:0}

/* tombol kecilkan/lebarkan */
.tab.tcol{color:var(--ink-faint);font-size:12.5px;opacity:.75;margin-bottom:2px}
.tab.tcol:hover{opacity:1;background:none;color:var(--amber-soft)}
.tab.tcol .ti{font-size:15px}

/* mode kecil: hanya ikon */
.proj.mini .tabs{padding-right:0;border-right:0;gap:3px}
.proj.mini .tab{padding:10px 0;justify-content:center;border-radius:8px;border-left:0;gap:0}
.proj.mini .tab.on{background:#241d12;box-shadow:inset 0 0 0 1px #56400f}
.proj.mini .tl{display:none}
.proj.mini .nb .ti,
.proj.mini .tab .ti{display:block;width:auto;font:700 11.5px/1 var(--mono);letter-spacing:.06em}
.proj.mini .tn{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:9px;line-height:1.2}
.proj.mini .tdot{position:absolute;top:6px;right:6px;width:6px;height:6px}
.proj.mini .tsep{margin:5px 6px}
/* mode kecil: angka jadi tumpukan rapat tanpa label, tombol jadi ikon saja */
.proj.mini .ns{flex-direction:column;align-items:center;gap:1px;padding:5px 0}
.proj.mini .ns span{display:none}
.proj.mini .ns b{font-size:13px}
.proj.mini .ns b i{display:none}
.proj.mini .nstats{gap:0}
.proj.mini .btn.nb{justify-content:center;padding:10px 0;gap:0}
.proj.mini .btn.nb .tl{display:none}
.proj.mini .btn.nb .ti{display:block;width:auto;font:700 11px/1 var(--mono);letter-spacing:.04em}
.proj.mini .nadd{flex-direction:column;gap:4px}
.proj.mini .nadd input[type=number]{width:100%;font-size:12px;padding:5px 2px}

/* tombol pintas ke arsip siap distribusi */
.btn.go-ok{border-color:#2c5a3f;color:#7fd6a4;background:#12241a}
.btn.go-ok:hover{border-color:var(--ok);color:#a8e6c4}

/* ---------------- table ---------------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--amber);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:#161209;
  position:sticky;top:0;z-index:2}
tbody tr:hover{background:#141009}
td.n{font:700 12px var(--mono);color:var(--violet);width:38px}
td.n a{color:var(--violet)}
.scroll{max-height:560px;overflow:auto}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--amber);cursor:pointer}

/* baris produksi */
.ptable td.c-mas{font-weight:600;color:var(--ink)}
.ptable td.c-mas .sub{font-weight:400;font-size:11.8px;color:var(--ink-faint);margin-top:2px}
.ptable td.c-sol{color:var(--ink-dim);font-size:12.5px}
.ptable td.c-mono a{color:var(--amber-soft)}

/* ---------------- brankas Informasi Akun ---------------- */
.ptable.akun td{white-space:nowrap}
.ptable.akun td .mono{font:12.5px var(--mono);color:var(--ink);margin-right:8px;
  display:inline-block;min-width:9ch}
/* Sandi ditampilkan sebagai titik-titik sampai ditekan Lihat; lebar minimumnya
   dipatok supaya barisnya tidak melompat saat disembunyikan lagi. */
.ptable.akun td .mono[data-pw]{letter-spacing:.13em;min-width:12ch}
.ptable.akun td.bad{color:var(--bad);white-space:normal;font-size:12.3px}

/* konten yang sudah ditandai siap distribusi — terkunci dari buat-ulang & acak-ulang */
.ptable tr.rdy>td{background:#101a13}
.ptable tr.rdy:hover>td{background:#132018}
.ptable tr.rdy>td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.ptable tr.rdy input[type=checkbox]{accent-color:var(--ok)}
.ptable tr.rdy td.c-mono a{color:#9ad9b6}

/* ---------------- dialog konfirmasi ---------------- */
.modal{position:fixed;inset:0;z-index:95;background:#060504cc;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.mbox{width:min(480px,100%);border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  box-shadow:0 18px 60px #000a;overflow:hidden;animation:pop .16s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mhead{padding:14px 18px;font-size:15px;font-weight:650;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#1d1810,#161209)}
.mbody{padding:15px 18px;font-size:13.5px;color:var(--ink-dim);line-height:1.6}
.mbody p{margin:0 0 10px}
.mbody p:last-child{margin-bottom:0}
.mbody b{color:var(--ink)}
.mbody .good{color:#7fd6a4}
.mbody .good b{color:#a8e6c4}
.mbody .bad{color:#e88b84}
.mbody .bad b{color:#f0aaa4}
.mbody .fine{font-size:12px;color:var(--ink-faint)}
.mbody p+p{margin-top:12px}
.mbody{max-height:min(62vh,540px);overflow:auto}
.mfoot{display:flex;gap:9px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);
  background:#12100a}

/* ---------------- images ---------------- */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.shot .ph{aspect-ratio:9/16;background:#0b0906;display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:12px;position:relative;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent}
.shot .ph img{width:100%;height:100%;object-fit:cover;display:block}
.shot .cap{padding:9px 11px;font-size:12px;color:var(--ink-dim);border-top:1px solid var(--line)}
.shot .cap b{color:var(--ink);display:block;margin-bottom:3px;font-size:12.5px}
.shot .say{color:var(--amber-soft);font-style:italic;margin-top:5px;font-size:12px}
.shot .num{position:absolute;top:8px;left:8px;background:#0009;border:1px solid var(--line);
  border-radius:5px;padding:3px 7px;font:700 11px var(--mono);color:var(--amber-soft);
  max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- storyboard layar penuh ---------------- */
/* ---------------- kotak salin manual (kalau browser menolak clipboard) ------- */
.cpsheet{position:fixed;inset:0;z-index:120;background:#000000c4;display:flex;
  align-items:center;justify-content:center;padding:16px}
.cpsheet .cps-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px;width:100%;max-width:560px;display:flex;flex-direction:column;gap:11px}
.cpsheet b{font-size:15px}
.cpsheet p{margin:0;font-size:12.8px;color:var(--ink-dim);line-height:1.55}
.cpsheet .cps-text{width:100%;height:34vh;min-height:150px;resize:none;
  font:12.4px/1.6 var(--mono);background:#0b0906;color:#e6ddcd;
  border:1px solid var(--line);border-radius:10px;padding:11px}
.cpsheet .cps-close{align-self:flex-end}

.lb{position:fixed;inset:0;z-index:90;background:#070604;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b)}
.lb-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top,0px))}
.lb-ttl{font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-btn{background:#221c12;border:1px solid #3d3325;color:var(--ink-dim);border-radius:8px;
  min-width:38px;height:38px;padding:0 13px;font:600 13px/1 inherit;cursor:pointer;flex:none}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;position:relative;touch-action:pan-y}
.lb-frame{height:100%;max-width:100%;display:flex;align-items:center;justify-content:center}
.lb-frame img{max-height:100%;max-width:100%;object-fit:contain;border-radius:8px;display:block}
.lb-frame .empty{color:var(--ink-faint);font-size:13px;text-align:center;padding:30px 18px;
  border:1px dashed var(--line);border-radius:10px;max-width:280px;line-height:1.6}
.lb-arrow{background:#1a150ecc;border:1px solid var(--line);color:var(--ink-dim);border-radius:999px;
  width:42px;height:42px;font-size:22px;line-height:1;cursor:pointer;flex:none}
.lb-arrow:disabled{opacity:.25}
.lb-cap{border-top:1px solid var(--line);padding:11px 16px 14px;background:#0d0b08;max-height:33vh;overflow:auto}
.lb-dots{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.lb-dots span{width:8px;height:8px;border-radius:999px;background:#3d3325;display:block;transition:.15s;
  cursor:pointer;flex:none;position:relative}
.lb-dots span::after{content:"";position:absolute;inset:-11px}  /* area ketuk lebih lega di HP */
.lb-dots span.on{background:var(--amber);width:22px}
.lb-say{color:var(--amber-soft);font-style:italic;font-size:14.5px;line-height:1.5}
.lb-act{color:var(--ink-dim);font-size:12.5px;margin-top:7px;line-height:1.5}
.lb-acts{display:flex;gap:8px;margin-top:11px}
.lb-acts .btn{white-space:nowrap}

/* ---------------- papan kerja Flow ---------------- */
.wb{position:fixed;inset:0;z-index:92;background:#0a0806;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b)}
.wb-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top,0px));background:#100d09}
.wb-ttl{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-prog{font:11.5px var(--mono);color:var(--ink-faint);white-space:nowrap}

/* pilih mode: acuan / gambar (gratis) / video (pakai kredit) */
.wb-modes{display:flex;gap:6px;justify-content:center;padding:9px 12px 0;flex-wrap:wrap}
.wm{background:#181309;border:1px solid #3d3325;color:var(--ink-faint);border-radius:999px;
  padding:7px 14px;font:600 12.5px/1 inherit;cursor:pointer;transition:.14s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.wm b{font-weight:700;opacity:.8;margin-left:5px;font-size:10.5px;letter-spacing:.04em}
.wm:hover{color:var(--ink);border-color:#5a4a2c}
.wm.on{background:#241d12;border-color:var(--amber);color:var(--amber)}
.wm[data-mode="img"].on{border-color:var(--ok);color:#7fd6a4;background:#12241a}

.wb-dots{display:flex;gap:7px;justify-content:center;padding:10px;border-bottom:1px solid var(--line);
  background:#0d0b08;flex-wrap:wrap}
.wb-dots span{width:30px;height:30px;border-radius:8px;border:1px solid #3d3325;background:#181309;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  font:700 12px var(--mono);color:var(--ink-faint);transition:.14s}
.wb-dots span.cp{border-color:#56400f;color:var(--amber-soft)}
.wb-dots span.im{border-color:#43356b;background:#1c1730;color:#c9b6ff}
.wb-dots span.ok{border-color:#2c5a3f;background:#12241a;color:#7fd6a4}
.wb-dots span.on{box-shadow:0 0 0 2px var(--amber);color:var(--amber)}

.wb-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;padding:14px}
.wb-main{min-height:0;display:flex;flex-direction:column;gap:10px}
.wb-say{background:#12100a;border:1px solid var(--line);border-radius:10px;padding:11px 13px;flex:none}
.wb-say b{font-size:13.5px}
.wb-say .say{color:var(--amber-soft);font-style:italic;margin-top:5px;font-size:13px;line-height:1.5}
.wb-pre{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:10px;
  background:#0b0906;padding:13px;font:12.2px/1.6 var(--mono);color:#e6ddcd;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;margin:0;user-select:text}
.wb-side{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:11px}
/* Salinan browser tidak punya disk: kotak seret dibuang, promptnya yang
   melebar — di layar HP ruang itu jauh lebih berguna. */
.wb.nofiles .wb-side{display:none}
.wb.nofiles .wb-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}

.wb-drop{border:2px dashed #3d3325;border-radius:12px;padding:22px 14px;text-align:center;
  cursor:pointer;transition:.14s;background:#100d09;flex:none;
  -webkit-tap-highlight-color:transparent}
.wb-drop b{display:block;font-size:13.5px;color:var(--ink-dim)}
.wb-drop span{display:block;font-size:12px;color:var(--ink-faint);margin-top:5px}
.wb-drop:hover,.wb-drop.over{border-color:var(--amber);background:#191308}
.wb-drop.over b{color:var(--amber-soft)}
.wb-drop.filled{border-style:solid;border-color:#2c5a3f;background:#101a13}
.wb-drop.busy{border-color:var(--amber);opacity:.7;pointer-events:none}
.wb-clip video,.wb-clip img{width:100%;border-radius:10px;background:#000;display:block;max-height:44vh;
  object-fit:contain}
.wb-hint{font-size:12.2px;color:var(--ink-faint);line-height:1.55;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;background:#0f0d09}

.wb-foot{display:flex;gap:9px;align-items:center;justify-content:center;padding:11px 14px;
  border-top:1px solid var(--line);background:#100d09}
.wb-foot .btn.pri{min-width:230px;padding:12px 18px;font-size:14px}
/* pindah adegan cukup lewat tombol geser kiri/kanan — tanpa tulisan */
.wb-nav{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0;font-size:22px;line-height:1;font-weight:400}

/* ---------------- lima adegan di halaman konten ---------------- */
.cslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:11px}
.cslot{border:1px solid var(--line);border-radius:10px;padding:10px;background:#0f0d09;
  display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.14s;
  -webkit-tap-highlight-color:transparent}
.cslot:hover{border-color:var(--amber);background:#15110b}
.cslot.im{border-color:#43356b;background:#141026}
.cslot.ok{border-color:#2c5a3f;background:#101a13}
.cslot .cn{font:700 10px var(--mono);color:var(--violet);letter-spacing:.11em}
.cslot .cb{display:flex;flex-direction:column;gap:2px}
.cslot .cb b{font-size:13px;color:var(--ink)}
.cslot .cb span{font-size:11.5px;color:var(--ink-faint)}
.cslot.im .cb span{color:#c9b6ff}
.cslot.ok .cb span{color:#7fd6a4}
.cslot .cmedia{aspect-ratio:9/16;border-radius:7px;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center}
.cslot .cmedia video,.cslot .cmedia img{width:100%;height:100%;object-fit:cover;display:block}
.cslot .cempty{color:var(--ink-faint);font-size:11.5px;background:#0b0906;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center}
.cslot .csay{font-size:11.5px;line-height:1.5;color:var(--amber-soft);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cfinal{display:flex;gap:14px;align-items:flex-start;margin-bottom:15px;padding-bottom:15px;
  border-bottom:1px solid var(--line)}
.cfinal video{width:190px;border-radius:9px;background:#000;flex:none}
.cfinal b{color:#7fd6a4;font-size:13.5px}

/* ---------------- job bar ---------------- */
.jobbar{position:fixed;left:0;right:0;bottom:0;background:#100d09;border-top:1px solid var(--amber);
  padding:11px 22px calc(13px + var(--safe-b));z-index:60;box-shadow:0 -8px 28px #0009}
.jb-top{display:flex;align-items:center;gap:11px;margin-bottom:8px;flex-wrap:wrap}
.jb-top .spacer{flex:1}
.jb-label{font-weight:650;font-size:13.5px}
.jb-count{font:12px var(--mono);color:var(--amber-soft)}
.bar{height:6px;background:#241d12;border-radius:999px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amber-soft));transition:width .3s}
.jb-cur{font:11.5px var(--mono);color:var(--ink-faint);margin-top:7px;min-height:15px;word-break:break-word}
.jb-log{max-height:104px;overflow:auto;background:#0b0906;border:1px solid var(--line);border-radius:7px;
  margin-top:8px;padding:9px 11px;font:11.3px/1.55 var(--mono);color:var(--ink-dim)}

/* ---------------- toast ---------------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);
  background:#e8a33d;color:#1a1307;padding:10px 20px;border-radius:999px;font-weight:700;font-size:13px;
  opacity:0;transition:.24s;pointer-events:none;z-index:99;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad);color:#fff}

.chiprow{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.chip{border:1px solid #3a3226;background:#0f0d09;color:var(--ink-dim);border-radius:999px;
  padding:5px 11px;font-size:12px;display:flex;align-items:center;gap:7px}
.chip.cus{border-color:#56400f;color:var(--amber-soft)}
.chip .x{cursor:pointer;color:var(--ink-faint);font-weight:700;padding:0 2px}
.chip .x:hover{color:var(--bad)}

/* =====================================================================
   HP & tablet
   ===================================================================== */
@media(max-width:820px){
  body{font-size:15.5px;padding-bottom:96px}
  body.has-job{padding-bottom:calc(210px + var(--safe-b))}
  header{padding:10px 14px;gap:9px}
  header .brand{font-size:16px}
  header .sub{font-size:12px;flex:1;min-width:0}
  header .keys{font-size:10.5px;padding:3px 8px;max-width:34vw}
  main{padding:16px 14px 30px}
  h2{font-size:18.5px}
  .mbox{width:100%}
  .mbody{padding:14px 15px;max-height:64vh}

  /* iOS berhenti nge-zoom kalau font input ≥16px */
  input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{font-size:16px;padding:10px 11px}
  input[type=checkbox]{width:20px;height:20px}
  .btn{padding:10px 14px;font-size:13.5px;min-height:40px}
  .btn.sm{padding:7px 11px;font-size:12.5px;min-height:34px}
  .toolbar>.spacer{display:none}
  .card-body{padding:13px}
  .card-head{padding:11px 13px}
  pre{padding:12px;font-size:12.6px}

  /* menu kiri tetap dipakai di HP — bawaannya mode kecil (ikon saja) */
  .proj{grid-template-columns:170px minmax(0,1fr);gap:12px}
  .proj.mini{grid-template-columns:46px minmax(0,1fr);gap:10px}
  .tabs{top:60px;padding-right:7px}
  .tab{padding:11px 9px;font-size:13px;min-height:42px}
  .tab .ti{font-size:15px}
  .proj.mini .tab{padding:11px 0}
  /* angka & tombol menu tetap terpakai di HP, tinggal disesuaikan ukurannya */
  .ns{padding:5px 9px}
  .ns b{font-size:14px}
  .btn.nb{padding:11px 9px;font-size:12.5px;min-height:42px}
  .proj.mini .btn.nb{padding:11px 0}
  .proj.mini .ns b{font-size:12.5px}
  .nadd input[type=number]{width:50px;font-size:14px}

  .pgrid{grid-template-columns:1fr;gap:11px}
  .shots{grid-template-columns:1fr 1fr;gap:10px}
  .shot .cap{padding:8px 9px;font-size:11.5px}

  /* tabel produksi → kartu */
  .scroll{max-height:none;overflow:visible}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block}
  .ptable tr{
    border:1px solid var(--line);border-radius:11px;background:var(--panel-2);
    margin:0 0 10px;padding:11px 12px;
    display:grid;grid-template-columns:auto 1fr auto auto;gap:5px 10px;align-items:center;
    grid-template-areas:
      "pick no   img re"
      "mas  mas  mas mas"
      "mono mono mono mono"
      "sol  sol  sol sol";
  }
  .ptable tr:hover{background:var(--panel-2)}
  .ptable tr.rdy{border-color:#2c5a3f;background:#101a13}
  .ptable tr.rdy:hover{background:#101a13}
  .ptable tr.rdy>td{background:none}
  .ptable tr.rdy>td:first-child{box-shadow:none}
  .ptable td{border:0;padding:0;width:auto !important;background:none !important}
  .ptable td.c-pick{grid-area:pick;display:flex;align-items:center}
  .ptable td.c-no{grid-area:no;font:700 13px var(--mono)}
  .ptable td.c-img{grid-area:img;justify-self:end}
  .ptable td.c-re{grid-area:re;justify-self:end}
  .ptable td.c-mas{grid-area:mas;font-weight:650;font-size:14.5px;color:var(--ink)}
  .ptable td.c-mas .sub{font-size:12.5px}
  .ptable td.c-mono{grid-area:mono;font-size:13.5px;line-height:1.45}
  .ptable td.c-sol{grid-area:sol;font-size:12.5px;color:var(--ink-faint)}
  .ptable td.c-sol::before{content:"Solusi: ";color:var(--ok)}

  .jobbar{padding:10px 14px calc(11px + var(--safe-b))}
  .jb-log{max-height:76px;font-size:10.8px}
  .toast{bottom:auto;top:14px;transform:translateX(-50%) translateY(-70px)}
  .toast.show{transform:translateX(-50%) translateY(0)}

  /* papan kerja di HP: prompt di atas, kotak seret di bawah, tombol besar */
  .wb-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10px}
  .wb-side{max-height:42vh}
  .wb-pre{font-size:12px;padding:11px}
  .wb-drop{padding:16px 12px}
  .wb-clip video,.wb-clip img{max-height:30vh}
  .wm{padding:8px 11px;font-size:12px}
  .wm b{display:none}
  .wb-foot{padding:9px 10px calc(9px + var(--safe-b));gap:7px}
  .wb-foot .btn.pri{flex:1;min-width:0;padding:13px 10px}
  .wb-foot .btn{padding:13px 11px}
  .wb-foot .wb-nav{width:46px;height:46px;padding:0;font-size:23px}
  .wb-dots span{width:34px;height:34px}
  .cfinal{flex-direction:column}
  .cfinal video{width:100%;max-width:220px}

  .lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;opacity:.72}
  .lb-arrow.prev{left:10px}
  .lb-arrow.next{right:10px}
  .lb-stage{padding:8px}
  .lb-cap{max-height:38vh}
  .lb-say{font-size:15px}
  .lb-acts .btn{flex:1;min-height:44px;padding:11px 8px;font-size:13px}
}

/* =====================================================================
   HP saja — layar konten dibikin sederhana
   ===================================================================== */
@media(max-width:640px){
  /* keterangan pendukung (meta konten, catatan kecil di kepala kartu, tips)
     cuma bikin sesak di layar sempit — semuanya disembunyikan di HP */
  .hp-off{display:none !important}

  /* toolbar konten: satu aksi utama selebar layar, sisanya berpasangan rapi */
  .toolbar.tb-item{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  .toolbar.tb-item>.spacer{display:none}
  .toolbar.tb-item>.btn{
    display:flex;align-items:center;justify-content:center;text-align:center;
    width:100%;min-height:44px;padding:11px 8px;font-size:13px;white-space:nowrap}
  .toolbar.tb-item>.btn.pri{grid-column:1/-1;min-height:48px;font-size:14.5px}
  .toolbar.tb-item>label.inline.lock{grid-column:1/-1;justify-content:center;min-height:44px;font-size:13px}
  /* tombol balik diturunkan jadi tautan biasa — sudah ada remah jejak di atas */
  .toolbar.tb-item>.tb-back{
    grid-column:1/-1;background:none;border:0;min-height:0;padding:4px 0 0;
    font-size:12.5px;font-weight:500;color:var(--ink-faint)}

  /* kepala kartu tanpa keterangan tambahan: judul kiri, tombol kanan */
  .card-head{gap:8px}
}

/* tetap 2 kolom di layar sempit — gambar 9:16 satu kolom terlalu tinggi untuk di-scroll */
@media(max-width:400px){
  header .brand{font-size:15px}
  main{padding:14px 11px 28px}
  .shots{gap:8px}
}

/* layar sentuh: hover palsu bikin tombol nyangkut warna */
@media(hover:none){
  .pcard:hover{transform:none}
  .btn:hover{border-color:#3d3325;color:var(--ink-dim)}
  .btn.pri:hover{color:#1a1307}
  .btn.ok,.btn.ok:hover{border-color:var(--ok);color:var(--ok)}
}