/* Mockup TCK-0029 — tambahan di atas app.css (token clay sama).
   Prinsip: borderless & lega — kartu ringan, tanpa kotak bersarang. */

.mock-badge { font-size:10px; font-weight:900; letter-spacing:.08em; color:#fff;
  background:linear-gradient(180deg,#9b7bff,#7355e8); padding:3px 9px; border-radius:999px; }
.mock-strip { font-size:11px; font-weight:800; color:var(--warn); background:var(--surface2);
  border-radius:12px; padding:7px 11px; box-shadow:var(--clay-in); }
.scenario-pick { display:flex; align-items:center; gap:6px; }
.scenario-pick select { border:0; background:transparent; font:inherit; font-weight:900; color:var(--ink);
  outline:none; max-width:210px; }

.content { gap:18px; }
.page-sub { color:var(--muted); font-weight:700; font-size:14.5px; margin:-6px 0 2px; }

/* ===== chip status (bahasa manusia) ===== */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:900;
  padding:4px 12px; border-radius:999px; background:var(--surface2); box-shadow:inset 0 2px 0 var(--hi); }
.chip.ok    { color:var(--ok); }
.chip.warn  { color:var(--warn); }
.chip.bad   { color:var(--bad); }
.chip.muted { color:var(--muted); }
.chip .dot { width:8px; height:8px; border-radius:50%; background:currentColor; }
/* Kontrak paket clay: pill "lagi jalan" dot-nya denyut 1.2s; loading 1.4s. */
.chip.pulse .dot { animation:pulse 1.2s infinite; }
.loading-pulse { animation:pulse 1.4s infinite; }

/* ===== banner skenario/error ===== */
.banner { display:flex; gap:14px; align-items:flex-start; border-radius:var(--r); padding:18px 22px;
  box-shadow:var(--clay); border:1px solid var(--line); background:var(--surface); }
.banner.warn { background:linear-gradient(150deg,#fdf0db,var(--surface)); }
.banner.bad  { background:linear-gradient(150deg,#fde5ea,var(--surface)); } /* nilai kontrak PORTING.md §6 */
:root[data-theme="dark"] .banner.warn { background:linear-gradient(150deg,#37301c,var(--surface)); }
:root[data-theme="dark"] .banner.bad  { background:linear-gradient(150deg,#3c2030,var(--surface)); }
.banner .b-ico { font-size:26px; line-height:1; }
.banner b { display:block; font-size:15.5px; }
.banner p { margin:2px 0 0; color:var(--muted); font-size:13.5px; font-weight:700; }
.banner .btn { margin-left:auto; flex:none; padding:10px 16px; font-size:13.5px; }

/* Banner "versi baru" (TCK-0108) — nempel di pojok, JANGAN nutupin kerjaan.
   Bukan modal: modal maksa user berhenti; ini cuma ngasih tahu + tombol. */
.ver-banner { position:fixed; right:20px; bottom:20px; z-index:60; max-width:380px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--clay-sh-pop); }
.ver-banner b { font-size:14.5px; }
.ver-banner p { margin:2px 0 0; font-size:12.5px; font-weight:700; color:var(--muted); }
.ver-banner .btn { padding:9px 14px; font-size:13px; }
@media (max-width:520px) { .ver-banner { left:16px; right:16px; max-width:none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   KOSAKATA KOMPONEN CLAY (TCK-0149) — diangkat dari mockup paket owner
   `docs/design/clay_revamp/*.dc.html` + aturan `handoff/PORTING.md §2`.

   Empat bentuk yang dipakai berulang di SEMUA mockup, dan sebelum ini tiap
   halaman bikin versinya sendiri pakai <h3> polos:
     .sec    = section card (kicker kecil + judul 19px, radius 28, mengambang)
     .wrow   = baris daftar = WELL (tenggelam). Kartu mengambang, isi tenggelam —
               PORTING §2 bilang jangan dibalik, dan itu yang bikin "clay".
     .badge  = pill status huruf kecil kapital (beda dari .chip yang berdot)
     .empty  = keadaan kosong: ikon besar + judul + SATU kalimat instruksi
   ═════════════════════════════════════════════════════════════════════════ */
.sec { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; box-shadow:var(--clay); display:flex; flex-direction:column; gap:16px; }
.sec-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sec-head > .sh-t { flex:1; min-width:180px; }
.kicker { font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.sec h2 { font-size:19px; font-weight:900; margin:2px 0 0; letter-spacing:-.01em; }
.sec > p, .sec-head p { margin:0; color:var(--muted); font-size:13.5px; font-weight:700; }
/* Nomor langkah bulat (pola News to Video / Chrome Extension mockup) */
.sec-no { width:34px; height:34px; border-radius:12px; flex:none; display:grid; place-items:center;
  font-weight:900; color:#fff; background:var(--clay-grad-primary);
  box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }

.wrow { display:flex; align-items:center; gap:12px; background:var(--surface2);
  border-radius:var(--clay-r-well); box-shadow:var(--clay-in); padding:13px 17px; }
.wrow > .w-main { flex:1; min-width:0; }
.wrow b { display:block; font-size:14px; font-weight:900; }
.wrow small, .wrow .w-sub { display:block; font-size:12.5px; font-weight:700; color:var(--muted); }
.wlist { display:flex; flex-direction:column; gap:10px; }

.badge { font-size:10.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; background:var(--surface2); box-shadow:var(--clay-sh-chip);
  white-space:nowrap; color:var(--muted); }
.badge.ok { color:var(--ok); } .badge.warn { color:var(--warn); } .badge.bad { color:var(--bad); }
.badge.pri { color:#fff; background:var(--clay-grad-primary); box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }

/* Angka ringkas berjejer (pola Extension Hub mockup) */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.stat { background:var(--surface2); border-radius:var(--clay-r-well); box-shadow:var(--clay-in);
  padding:14px 16px; text-align:center; }
.stat b { display:block; font-size:22px; font-weight:900; letter-spacing:-.02em; }
.stat span { font-size:11.5px; font-weight:800; color:var(--muted); }

.empty { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:34px 24px; }
.empty .e-ic { width:64px; height:64px; border-radius:22px; display:grid; place-items:center;
  background:var(--surface2); box-shadow:var(--clay-sh-icon); transform:rotate(-6deg); font-size:30px; }
.empty .e-ic .clayico { width:38px; height:38px; }
.empty b { font-size:17px; font-weight:900; }
.empty p { margin:0; color:var(--muted); font-size:13.5px; font-weight:700; max-width:460px; }

/* Dua kolom: isi utama + sisi (pola Production/Settings mockup) */
.split { display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; }
.split > * { min-width:0; }
@media (max-width:940px) { .split { grid-template-columns:1fr; } }

/* Tab pil (pola Settings mockup) */
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab { font:900 12.5px inherit; font-family:inherit; color:var(--primary-d); background:var(--surface2);
  border:0; border-radius:999px; box-shadow:var(--clay-sh-chip); padding:8px 16px; cursor:pointer; }
.tab.on { color:#fff; background:var(--clay-grad-primary);
  box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }

/* ===== Beranda: strip KPI (pola Dashboard mockup paket clay) ===== */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.kpi { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--clay-r-tile); padding:18px 20px; box-shadow:var(--clay); color:inherit;
  transition:transform .32s var(--clay-ease-pop), box-shadow .3s ease; }
a.kpi:hover { transform:translateY(-4px); box-shadow:var(--clay-lift); }
.kpi .k-ic { width:52px; height:52px; border-radius:18px; display:grid; place-items:center; flex:none;
  background:var(--surface2); box-shadow:0 8px 15px rgba(var(--sh),.24), inset 0 2px 0 var(--hi);
  transform:rotate(-5deg); }
.kpi .k-ic .clayico { width:32px; height:32px; }
.kpi b { font-size:26px; font-weight:900; letter-spacing:-.02em; display:block; line-height:1.1; }
.kpi span { font-size:12.5px; font-weight:800; color:var(--muted); }

/* ===== Beranda: lampu kesiapan ===== */
.ready-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.ready-tile { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:16px 18px; box-shadow:var(--clay); }
.ready-tile .r-dot { width:14px; height:14px; border-radius:50%; flex:none;
  box-shadow:0 0 0 5px color-mix(in srgb, currentColor 18%, transparent); }
.ready-tile.ok   .r-dot { color:var(--ok);   background:var(--ok); }
.ready-tile.warn .r-dot { color:var(--warn); background:var(--warn); }
.ready-tile.bad  .r-dot { color:var(--bad);  background:var(--bad); }
.ready-tile b { font-size:14px; display:block; }
.ready-tile span { font-size:12.5px; color:var(--muted); font-weight:700; }

/* ===== progress bar clay ===== */
.pbar { height:14px; border-radius:999px; background:var(--surface2); box-shadow:var(--clay-in); overflow:hidden; }
.pbar > i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#9b7bff,#7355e8); box-shadow:inset 0 2px 0 rgba(255,255,255,.4);
  transition:width .4s ease; }
.pbar.mint > i { background:linear-gradient(90deg,#8adcc8,#2f9d85); }
.p-meta { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-weight:800; margin-top:6px; }

/* ===== Wizard Buat Video ===== */
.wiz-steps { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.wiz-step { display:flex; align-items:center; gap:8px; font-weight:900; font-size:13px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 16px; box-shadow:var(--clay-in); }
.wiz-step.on { color:#fff; background:linear-gradient(180deg,#9b7bff,#7355e8); box-shadow:var(--clay); }
.wiz-step.done { color:var(--mint-d); }
.wiz-arrow { color:var(--muted); font-weight:900; }
.src-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.src-card { cursor:pointer; position:relative; }
.src-card input { position:absolute; opacity:0; }
.src-card .card { height:100%; }
.src-card input:checked + .card { outline:3px solid var(--primary); outline-offset:2px; }
.src-card .pick { position:absolute; top:14px; right:16px; font-size:20px; opacity:0; }
.src-card input:checked ~ .pick { opacity:1; }

.fld { display:flex; flex-direction:column; gap:6px; font-weight:800; font-size:13.5px; color:var(--muted); }
/* `input[type=number]` sempat kelewat — jadi kotak "jeda antar job" di wizard
   tampil polos bawaan browser di tengah kotak clay lainnya. Ditambahin di sini
   sekalian, bukan bikin aturan kedua. `textarea` dikasih resize vertikal doang:
   yang horizontal bikin dia nembus keluar kartu. */
.fld input[type=number], .fld input[type=text], .fld input[type=url], .fld select, .fld textarea {
  font-family:inherit; font-weight:700; font-size:15px; color:var(--ink);
  padding:12px 14px; border-radius:var(--r-btn); border:1px solid var(--line);
  background:var(--surface2); box-shadow:var(--clay-in); outline:none; }
.fld textarea { resize:vertical; min-height:90px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color:var(--primary); }
.fld-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }

.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:800; font-size:14px; }
.switch input { appearance:none; width:46px; height:26px; border-radius:999px; background:var(--surface2);
  box-shadow:var(--clay-in); position:relative; cursor:pointer; transition:.2s; flex:none; }
.switch input:before { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); box-shadow:0 2px 5px rgba(var(--sh),.3); transition:.2s; }
.switch input:checked { background:linear-gradient(180deg,#8adcc8,#2f9d85); }
.switch input:checked:before { left:23px; }
.switch small { color:var(--muted); font-weight:700; display:block; }

/* Opsi Lanjutan — accordion; TUTUP by default (simple-first) */
.adv { border-radius:22px; border:1px dashed var(--line); background:transparent; }
.adv summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  padding:13px 18px; font-weight:900; font-size:13.5px; color:var(--muted); user-select:none; }
.adv summary::-webkit-details-marker { display:none; }
.adv summary:before { content:"⚙️"; }
.adv summary:after { content:"▾"; margin-left:auto; transition:.2s; }
.adv[open] summary:after { transform:rotate(180deg); }
.adv[open] { background:var(--surface2); box-shadow:var(--clay-in); border-style:solid; }
.adv .adv-body { padding:4px 18px 18px; display:flex; flex-direction:column; gap:14px; }

/* Kartu ide (5 rekomendasi) */
.idea-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.idea-card { cursor:pointer; position:relative; }
.idea-card .rank { position:absolute; top:-10px; left:18px; font-size:11px; font-weight:900; color:#fff;
  background:linear-gradient(180deg,#9b7bff,#7355e8); padding:4px 12px; border-radius:999px; box-shadow:var(--clay); }
.idea-card .card { height:100%; gap:10px; }
.idea-card.sel .card { outline:3px solid var(--primary); outline-offset:2px; }
.idea-meta { display:flex; gap:8px; flex-wrap:wrap; }
.score-big { font-size:26px; font-weight:900; color:var(--primary-d); }

/* Scene list (langkah 3).
   Selalu duduk di dalam section card → jadi WELL, bukan kartu di atas kartu
   (aturan mengambang-vs-tenggelam, PORTING §2 / TCK-0149). */
.scene-item { display:flex; flex-direction:column; gap:8px; background:var(--surface2);
  border-radius:var(--clay-r-well); padding:14px 17px; box-shadow:var(--clay-in); }
.scene-head { display:flex; align-items:center; gap:10px; }
.scene-no { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; flex:none;
  font-weight:900; color:#fff; background:linear-gradient(180deg,#8adcc8,#2f9d85); box-shadow:var(--clay); }
.scene-item p { margin:0; font-size:14px; font-weight:700; color:var(--ink); }
.scene-item .visual { color:var(--muted); font-size:13px; }
.scene-tools { display:flex; gap:8px; flex-wrap:wrap; }
.btn.mini { padding:8px 14px; font-size:12.5px; border-radius:12px; }

/* Ringkasan biaya (langkah 4) */
.cost-table { width:100%; border-collapse:collapse; font-size:14px; font-weight:700; }
.cost-table td { padding:9px 6px; border-bottom:1px solid var(--line); }
.cost-table td:last-child { text-align:right; font-weight:900; }
.cost-note { font-size:12.5px; color:var(--muted); font-weight:700; }

/* ===== Produksi =====
   Kartu job sekarang duduk DI DALAM section card (TCK-0149), jadi dia jadi
   WELL (tenggelam) — bukan kartu di atas kartu. Aturan PORTING §2: yang
   mengambang cuma section-nya. */
.job-card { display:flex; flex-direction:column; gap:12px; background:var(--surface2);
  border-radius:var(--clay-r-well); padding:18px 20px; box-shadow:var(--clay-in); }
.job-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.job-head h3 { margin:0; font-size:17px; flex:1; min-width:180px; }
.job-actions { display:flex; gap:8px; flex-wrap:wrap; }
.step-table { width:100%; border-collapse:collapse; font-size:13px; font-weight:700; }
.step-table th, .step-table td { text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); }
.step-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.debug-log { font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:400; line-height:1.6;
  background:var(--surface2); border-radius:14px; padding:14px 16px; box-shadow:var(--clay-in);
  max-height:220px; overflow:auto; white-space:pre-wrap; color:var(--muted); }

/* ===== Aset ===== */
.asset-group h3 { margin:0 0 4px; font-size:16px; }
.asset-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.asset-thumb { border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--clay); display:flex; flex-direction:column; }
.asset-thumb .ph { aspect-ratio:16/9; display:grid; place-items:center; font-size:34px;
  background:linear-gradient(150deg,var(--surface2),var(--surface)); }
.asset-thumb .ph.v { aspect-ratio:9/16; max-height:190px; }
.asset-thumb .cap { padding:10px 13px; font-size:12.5px; font-weight:800; display:flex; flex-direction:column; gap:5px; }

/* ===== util ===== */
.stack { display:flex; flex-direction:column; gap:14px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }
.wide { grid-column:1/-1; }
.muted { color:var(--muted); font-weight:700; }
.kv { display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:700; padding:7px 0; border-bottom:1px solid var(--line); }
.kv b { font-weight:900; }
.kv:last-child { border-bottom:0; }
.footer-nav { display:flex; gap:10px; align-items:center; }
.pair-code { font-size:30px; font-weight:900; letter-spacing:.14em; color:var(--primary-d);
  background:var(--surface2); border-radius:16px; padding:12px 20px; box-shadow:var(--clay-in); align-self:flex-start; }
@media (max-width:640px){ .banner .btn { margin-left:0; } }

/* Repair Lab: kotak sunting prompt per scene bolong (TCK-0024). */
.prompt-edit { margin-top:10px; padding:12px 14px; border-radius:14px; background:var(--surface2); box-shadow:var(--clay-in); }
.prompt-edit textarea { width:100%; font-family:inherit; }
.prompt-edit .row { margin-top:8px; align-items:center; gap:10px; }

/* Onboarding first-run (TCK-0042) — muncul cuma selama ada langkah wajib yang
   belum beres, lalu minggir sendiri. Sengaja se-"berat" hero: ini memang layar
   utama buat user baru. */
.onboard { background:var(--surface); border-radius:var(--r); box-shadow:var(--clay); padding:22px 24px; margin-bottom:20px; }
.onboard-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.onboard-head h2 { font-size:22px; font-weight:900; margin:0; }
.onboard-count { color:var(--muted); font-weight:800; font-size:13.5px; margin-left:auto; }
.onboard .pbar { margin:12px 0 16px; }
.onboard-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.onboard-list li { display:flex; gap:14px; align-items:flex-start; opacity:.55; }
.onboard-list li.now, .onboard-list li.done { opacity:1; }
.onboard-list li p { margin:2px 0 0; color:var(--muted); font-size:14px; }
.ob-no { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:14px; background:var(--surface2); color:var(--muted); box-shadow:var(--clay-in); }
.onboard-list li.now .ob-no { background:linear-gradient(180deg,#9b7bff,#7355e8); color:#fff; box-shadow:0 6px 12px rgba(115,85,232,.4); }
.onboard-list li.done .ob-no { background:#d6efe8; color:var(--ok); }
:root[data-theme="dark"] .onboard-list li.done .ob-no { background:#1d3a34; }

/* Job mandek permanen (TCK-0043): dibikin menonjol karena isinya JALAN KELUAR,
   bukan sekadar vonis — user yang ga baca ini bakal mencet "Lanjutkan" berkali. */
.stuck-note { margin:10px 0 0; padding:10px 14px; border-radius:12px; font-size:13.5px; line-height:1.6;
  background:linear-gradient(150deg,rgba(216,79,107,.12),var(--surface)); border-left:5px solid var(--bad); }

/* ===== Cek Mesin / Flow Doctor (TCK-0038) ===== */
.r-badge { width:16px; height:16px; border-radius:50%; flex:none;
  box-shadow:0 0 0 5px color-mix(in srgb, currentColor 18%, transparent); }
.r-badge.ok   { color:var(--ok);   background:var(--ok); }
.r-badge.warn { color:var(--warn); background:var(--warn); }
.r-badge.bad  { color:var(--bad);  background:var(--bad); }
/* Langkah perbaikan: dibikin daftar bernomor, bukan paragraf. Orang yang lagi
   panik karena job-nya gagal ga baca paragraf — dia nyari "gw harus ngapain". */
.doc-steps { margin:12px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--muted); }
.doc-steps li { line-height:1.55; }
.doc-steps code { font-size:12px; background:var(--surface2); padding:2px 7px; border-radius:8px;
  box-shadow:var(--clay-in); font-family:ui-monospace,monospace; color:var(--ink); }

/* ---- Halaman Pasang Extension (TCK-0021) ----
   Langkah bernomor gede sengaja: yang bikin orang nonteknis nyerah biasanya bukan
   langkahnya susah, tapi ilang jejak "tadi gw di nomor berapa". */
.steps { display:flex; flex-direction:column; gap:4px; }
.step-row { display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.step-row:first-child { border-top:0; padding-top:4px; }
.step-no {
  flex:0 0 34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--primary); color:#fff; font-weight:900; font-size:15px;
  box-shadow:var(--clay);
}
.step-body { flex:1; min-width:0; }
.step-body h3 { margin:4px 0 8px; font-size:16px; }
.step-body p { margin:0 0 8px; line-height:1.6; }
.step-body code {
  background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  padding:2px 6px; font-size:13px; font-weight:700;
}
.copy-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0; }
.copy-row code { padding:8px 12px; font-size:14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYAR BARU DARI PAKET MOCKUP CLAY (perintah owner 19 Agt: menu + struktur
   HTML disamain sama "Gensflow Platform Clay Revamp").

   Semua di bawah ini nurutin kosakata yang sama seperti komponen lain:
   kartu MENGAMBANG (--clay-sh-card), isi/baris TENGGELAM (--clay-sh-inset).
   Ga ada nilai warna baru — kalau butuh warna, ambil tokennya.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Potongan kecil yang dipakai lintas layar ---- */
.sub { display:block; font-size:12.5px; font-weight:700; color:var(--muted); }
.grow { flex:1; }
/* Angka & waktu pakai tabular-nums: di tabel, digit dengan lebar beda bikin
   kolomnya goyang tiap kali isinya berubah. */
.num { font-variant-numeric:tabular-nums; color:var(--muted); font-size:12.5px; font-weight:800; }
.dot-ok, .dot-warn, .dot-bad, .dot-muted {
  width:10px; height:10px; border-radius:50%; flex:none; background:var(--muted);
}
.dot-ok { background:var(--ok); } .dot-warn { background:var(--warn); } .dot-bad { background:var(--bad); }
.badge.muted { color:var(--muted); }
.empty.small { padding:22px 16px; }
.empty.small b { font-size:15px; }

/* Bar progres: track = well tenggelam, isi = gradient (kontrak PORTING §2). */
.bar { height:9px; border-radius:999px; background:var(--surface2); box-shadow:var(--clay-in); overflow:hidden; }
.bar > i { display:block; height:100%; border-radius:999px; background:var(--clay-grad-primary); }

/* ---- Kartu angka besar (Usage History) ---- */
.stat .s-head { display:flex; align-items:center; gap:10px; }
.stat .s-ic {
  width:30px; height:30px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--clay-sh-icon); transform:rotate(-6deg);
}
.stat .s-ic .clayico { width:20px; height:20px; }
.stat .s-head b { font-size:13px; font-weight:900; letter-spacing:0; }
.stat .s-num { font-size:26px; font-weight:900; letter-spacing:-.02em; line-height:1.15; }
.stat .s-num span { font-size:12.5px; font-weight:800; color:var(--muted); letter-spacing:0; }

/* ---- Tabel riwayat ----
   Dibungkus wrapper yang bisa digulir sendiri: tabel lebar yang bikin SELURUH
   halaman geser ke samping itu rusaknya diam-diam di layar kecil. */
.tbl-wrap { overflow-x:auto; border-radius:var(--clay-r-well); box-shadow:var(--clay-in); background:var(--surface2); }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th {
  text-align:left; padding:11px 14px; font-size:10.5px; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.tbl td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr:hover { background:var(--surface); }

/* ---- Kalender 7 hari ---- */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.cal-day { background:var(--surface2); border-radius:var(--clay-r-well); box-shadow:var(--clay-in); padding:10px 8px; min-height:120px; }
/* Hari ini ditandai cincin, BUKAN latar penuh: latar penuh bikin acara di
   dalamnya susah kebaca, dan hari ini justru hari yang paling sering dilihat. */
.cal-day.today { box-shadow:var(--clay-in), 0 0 0 2px var(--primary); }
.cal-head { text-align:center; margin-bottom:8px; }
.cal-dow { font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cal-num { font-size:19px; font-weight:900; letter-spacing:-.02em; }
.cal-slot { display:flex; flex-direction:column; gap:5px; }
.cal-ev {
  display:block; font-size:11.5px; font-weight:800; padding:5px 7px; border-radius:9px;
  background:var(--surface); box-shadow:var(--clay-sh-chip); color:var(--primary-d);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-ev:hover { box-shadow:var(--clay-sh-icon); }

/* ---- Baris kartu pilihan (Niche Bending) ---- */
.pick-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.pick {
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--clay-r-tile);
  padding:20px 22px; box-shadow:var(--clay);
  transition:transform .32s var(--clay-ease-pop), box-shadow .3s ease;
}
.pick:hover { transform:translateY(-4px); box-shadow:var(--clay-lift); }
/* Kartu yang mesinnya belum ada: dibikin KELIHATAN mati (redup, kursor default,
   ga ngangkat pas disorot). Kartu mati yang tampangnya sama kayak yang hidup =
   orang ngeklik, ga kejadian apa-apa, dan nyimpulin app-nya rusak. */
.pick.off { opacity:.58; box-shadow:var(--clay-in); background:var(--surface2); cursor:default; }
.pick.off:hover { transform:none; box-shadow:var(--clay-in); }
.pick-ic {
  width:48px; height:48px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--surface2); box-shadow:var(--clay-sh-icon); transform:rotate(-6deg);
}
.pick.off .pick-ic { box-shadow:var(--clay-sh-chip); }
.pick-ic .clayico { width:30px; height:30px; }
.pick-txt { flex:1; min-width:0; }
.pick-txt b { display:block; font-size:15.5px; font-weight:900; }
.pick-txt small { display:block; font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.5; }
.pick-go { font-size:20px; font-weight:900; color:var(--primary); flex:none; }
.pick-tag {
  position:absolute; top:-9px; left:20px; font-size:10px; font-weight:900;
  letter-spacing:.05em; text-transform:uppercase; color:#fff; padding:3px 9px;
  border-radius:999px; background:var(--clay-grad-primary);
  box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4);
}

@media (max-width:900px) { .cal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- Dashboard: susunan Dashboard.dc.html ---- */
.split > .col { display:flex; flex-direction:column; gap:20px; min-width:0; }

/* Rantai tahap "Journey status". Bungkusnya bisa gulir sendiri di layar sempit —
   rantai 6 tahap ga muat di ponsel, dan kalau dipaksa wrap urutannya jadi
   ambigu (tahap mana yang duluan). */
.journey { display:flex; align-items:center; gap:8px; overflow-x:auto; padding-bottom:4px; }
.j-step {
  flex:none; font-size:12px; font-weight:900; padding:6px 12px; border-radius:999px;
  background:var(--surface2); box-shadow:var(--clay-sh-chip); color:var(--muted);
}
.j-step.done { color:var(--ok); }
.j-step.now { color:#fff; background:var(--clay-grad-primary); box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }
/* Tahap yang mesinnya belum ada diredupin — beda dari "belum giliran". */
.j-step.off { opacity:.45; }
.j-sep { flex:none; color:var(--muted); font-weight:900; }
.j-meta { display:flex; justify-content:space-between; gap:10px; margin-top:7px; font-size:12px; font-weight:800; color:var(--muted); }

/* Baris antrean di Dashboard: WELL (tenggelam) — dia isi kartu, bukan kartu. */
.qrow { display:block; background:var(--surface2); border-radius:var(--clay-r-well);
  box-shadow:var(--clay-in); padding:13px 16px; }
.qrow + .qrow { margin-top:10px; }
.qrow:hover { box-shadow:var(--clay-in), 0 0 0 2px rgba(115,85,232,.22); }
.q-head { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.q-head b { font-size:14px; font-weight:900; min-width:0; }
.q-sub { margin-top:7px; font-size:12.5px; font-weight:700; color:var(--muted); }
.qrow .bar { margin-top:9px; }

/* Aksi cepat: 2x2 ubin kecil, ikon di atas label (mockup). */
.qa-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qa { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  padding:14px 10px; border-radius:var(--clay-r-well);
  background:var(--surface2); box-shadow:var(--clay-in);
  transition:transform .32s var(--clay-ease-pop), box-shadow .3s ease; }
.qa:hover { transform:translateY(-4px); box-shadow:var(--clay-sh-card); background:var(--surface); }
.qa .clayico { width:28px; height:28px; }
.qa b { font-size:12.5px; font-weight:900; }

.mini-link { font-size:12.5px; font-weight:900; color:var(--primary-d); white-space:nowrap; }
.mini-link:hover { color:var(--primary); }

/* Lampu kesiapan di kolom sempit: satu per baris, bukan kisi lebar. */
.ready-grid.tight { grid-template-columns:1fr; }

.page-foot { display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  font-size:12px; font-weight:800; color:var(--muted); padding:8px 0 0; }

@media (max-width:1000px) { .split { grid-template-columns:1fr; } }

/* ---- Kartu antrean: kelengkapan dari Automation Queue.dc.html ---- */
.job-meta { display:flex; flex-wrap:wrap; gap:7px; }
.mchip { font-size:11.5px; font-weight:800; color:var(--muted);
  background:var(--surface); border-radius:999px; box-shadow:var(--clay-sh-chip); padding:4px 11px; }

/* Cuplikan prompt: WELL di dalam kartu yang juga well -> dibedain lewat garis
   kiri berwarna, bukan lewat bayangan lagi (dua inset bertumpuk jadi lumpur). */
.prompt-prev { border-left:3px solid var(--primary); padding:9px 13px; background:var(--surface);
  border-radius:0 var(--clay-r-well) var(--clay-r-well) 0; box-shadow:var(--clay-sh-chip); }
.prompt-prev b { display:block; font-size:11px; font-weight:900; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.prompt-prev p { margin:0; font-size:13px; font-weight:700; line-height:1.55; }

/* Blok gagal: latar rose lembut sesuai kontrak PORTING §6 (#fde5ea -> surface). */
.fail-note { display:flex; gap:12px; padding:13px 15px; border-radius:var(--clay-r-well);
  background:linear-gradient(180deg, #fde5ea, var(--surface)); box-shadow:var(--clay-sh-chip); }
:root[data-theme="dark"] .fail-note { background:linear-gradient(180deg, #3a2030, var(--surface)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fail-note { background:linear-gradient(180deg, #3a2030, var(--surface)); }
}
.fail-note .clayico { width:26px; height:26px; flex:none; }
.fail-note b { display:block; font-size:13.5px; font-weight:900; }
.fail-note p { margin:3px 0 0; font-size:13px; font-weight:700; line-height:1.55; }
/* Pesan asli dari Flow: dikecilin tapi TIDAK disembunyiin — dia yang dipakai
   pas nanya ke gw/ke Google, dan nelen error yang ga dikenal bikin buntu. */
.fail-note p.raw { font-size:11.5px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* Inisial project di kepala kartu Asset Library (mockup: bulatan "AI"/"DS"). */
.ava { width:38px; height:38px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-size:13px; font-weight:900; color:#fff; background:var(--clay-grad-primary);
  box-shadow:0 6px 12px rgba(115,85,232,.4), inset 0 2px 0 rgba(255,255,255,.4); }

/* ---- Kepala wizard (Production Studio.dc.html) ---- */
.wiz-head h2 { font-size:21px; }
/* Kotak "langkah berikutnya": ditandai garis kiri ungu, BUKAN latar penuh.
   Latar penuh bikin dia kebaca sebagai peringatan, padahal ini panduan. */
.next-step {
  border-left:4px solid var(--primary); padding:13px 16px;
  background:var(--surface2); box-shadow:var(--clay-in);
  border-radius:0 var(--clay-r-well) var(--clay-r-well) 0;
}
.next-step b { display:block; font-size:15px; font-weight:900; margin:3px 0 5px; }
.next-step p { margin:0; font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.55; }
.next-step p.why { margin-top:7px; font-size:12.5px; }