/*
  AI Mentor v2 · gaya aplikasi (milik pembantu WEB-A). Dibangun di atas tokens.css Marco (brand kit FastTrack v2).
  Aturan: latar hitam, emas sebagai penunjuk, teks di atas emas SELALU hitam (putih di emas 2,8 : 1 dilarang).
  Tanpa font dari internet: Montserrat dipakai kalau terpasang di perangkat, selain itu cadangan sistem.
  CSP menolak atribut style= : pakai kelas di berkas ini.
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
}
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); margin: 0 0 var(--sp-5); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); margin: var(--sp-6) 0 var(--sp-4); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); margin: var(--sp-5) 0 var(--sp-3); }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-1); }
code, pre, .kunci-totp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kecil { font-size: var(--fs-small); line-height: var(--lh-small); }
.redup { color: var(--text-muted); }
.pecah { word-break: break-all; }
.angka, .tnum, td { font-variant-numeric: tabular-nums; }

/* ---------- pita lingkungan uji: teks hitam di atas emas (7,5 : 1) ---------- */
.pita-uji {
  background: var(--accent); color: var(--on-accent); text-align: center;
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; padding: var(--sp-2) var(--sp-3); position: sticky; top: 0; z-index: 20;
}

.lompat { position: absolute; left: -9999px; top: 0; background: var(--surface-raised); color: var(--text); padding: var(--sp-2) var(--sp-3); z-index: 30; }
.lompat:focus { left: var(--sp-3); top: var(--sp-3); }

/* ---------- tema terang rancangan v5 (keputusan desain 45, 11 Nov 2026): latar krem, kartu putih, menu samping hitam.
   Brand kit tetap: emas #C39241 untuk isi dan garis; teks emas di latar terang memakai emas tua (--accent-ink),
   teks di atas emas selalu hitam. ---------- */
:root {
  --bg: #F4F2ED;
  --surface: #FFFFFF;
  --surface-raised: #FAF8F4;
  --text: #121212;
  --text-muted: #5F5A51;
  --text-disabled: #8F897E;
  --border: #E7E2D8;
  --border-strong: #CFC8BA;
  --accent-ink: #805D1E;      /* emas tua untuk teks di latar terang (6,0 : 1 di putih; 4,8 : 1 di kotak info) */
  --stop-ink: #A3262B;        /* merah untuk TEKS di latar terang (6,5 : 1 di putih); --stop hanya garis dan ikon */
  --track: #ECE7DD;           /* jalur bar progres */
  --gold-soft: #F6EDDC;
  --gold-2: #E2B867;          /* emas terang: teks emas di latar hitam */
  --hitam: #121212;
  --hitam-2: #1E1D1B;
  --garis-gelap: #33302B;
  --teks-gelap: #EDEAE3;
  --teks-gelap-redup: #BDB6AA;
  --status-asumsi-fg: var(--accent-ink);
  --status-simulasi-fg: #3F3B35;
  --status-simulasi-border: #8F897E;
  --ok: #2F7A4E; --ok-bg: #E4F2E9;
  --warn: #8A5600; --warn-bg: #FCEFD6;
  --info: #2D5F86; --info-bg: #E3EEF7;
  --sidebar-w: 280px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-gold);
  /* T9: token tambahan pengganti warna keras di area isi (dua mode, keputusan 49e) */
  color-scheme: light;
  --surface-muted: #FBFAF7;      /* kartu terkunci, baris terkunci */
  --pill-kunci-bg: #EFECE6; --pill-kunci-fg: #5F5A51;
  --peta-bg: #FAF6EF;            /* kartu peta perjalanan, pemutar tiruan */
  --penanda-bg: rgba(255, 255, 255, 0.97);
  --emas-garis: #E9D6AF;         /* garis kartu toolkit terisi */
  --tk-ok-akhir: #FBF6EC;
  --prompter-garis: #CFE0EE;
  --gelembung-ai: #FFFFFF;
  --gelembung-saya: #000000; --gelembung-saya-fg: #FFFFFF; --gelembung-saya-redup: #D9D2C3;
  --pill-sumber-bg: #F2F0EB;
  --pilih-aktif-bg: #121212; --pilih-aktif-fg: #E2B867;   /* opsi skala/tombol pilihan yang dipilih */
  --bayang: rgba(0, 0, 0, 0.12);
  --tanda-air-tiruan: rgba(0, 0, 0, 0.55);
  --tampil-terang: block; --tampil-gelap: none;          /* logo versi latar terang/gelap */
  /* menu samping: selalu gelap di dua mode (rancangan v5) */
  --sb-bg: #121212; --sb-naik: #1C1B19; --sb-garis: #33302B; --sb-hover: #24221F; --sb-aktif: #2E2A24;
  --sb-teks: #EDEAE3; --sb-redup: #BDB6AA; --sb-label: #9A9488; --sb-emas: #E2B867; --sb-ikon-bg: rgba(255, 255, 255, 0.08);
  --garis-gelap-isi: transparent;  /* tepi kartu hitam (hero, ikon) di mode gelap supaya tidak menyatu dengan latar */
}
/* Mode gelap (T9, keputusan 49e): dipasang tema.js lewat data-tema="gelap", atau mengikuti sistem kalau peserta
   memilih "ikuti sistem" (data-tema dilepas). Hanya untuk layar: cetak selalu terang. Dua blok di bawah HARUS sama
   isinya (dicek tes test_web_t9_tampilan). Kontras teks dihitung di keluaran T9 (tabel di serah terima bagian 5). */
@media screen {
  :root[data-tema="gelap"] {
    color-scheme: dark;
    --bg: #0B0B0A; --surface: #161513; --surface-raised: #1E1D1A; --surface-muted: #12110F;
    --text: #F2EFE9; --text-muted: #B4AEA2; --text-disabled: #8A847A;
    --border: #2B2925; --border-strong: #4A453D;
    --accent-ink: #E2B867; --stop-ink: #FF8A8F; --track: #2B2925; --gold-soft: #2A2316;
    --status-asumsi-fg: #E2B867; --status-simulasi-fg: #D9D4CA; --status-simulasi-border: #8F897E;
    --ok: #7FD3A1; --ok-bg: #12291C; --warn: #F0B860; --warn-bg: #2E2210; --info: #8FC3EC; --info-bg: #10212F;
    --pill-kunci-bg: #2A2824; --pill-kunci-fg: #C9C3B8;
    --peta-bg: #1A1814; --penanda-bg: rgba(22, 21, 19, 0.96); --emas-garis: #5A4724; --tk-ok-akhir: #201B12;
    --prompter-garis: #2E4256; --gelembung-ai: #1E1D1A;
    --gelembung-saya: #2B2620; --gelembung-saya-fg: #F2EFE9; --gelembung-saya-redup: #CFC8BA;
    --pill-sumber-bg: #26241F; --pilih-aktif-bg: #C39241; --pilih-aktif-fg: #000000;
    --bayang: rgba(0, 0, 0, 0.5); --tanda-air-tiruan: rgba(255, 255, 255, 0.6);
    --tampil-terang: none; --tampil-gelap: block;
    --sb-bg: #121212; --sb-garis: #2B2925; --garis-gelap-isi: #2E2B26;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    color-scheme: dark;
    --bg: #0B0B0A; --surface: #161513; --surface-raised: #1E1D1A; --surface-muted: #12110F;
    --text: #F2EFE9; --text-muted: #B4AEA2; --text-disabled: #8A847A;
    --border: #2B2925; --border-strong: #4A453D;
    --accent-ink: #E2B867; --stop-ink: #FF8A8F; --track: #2B2925; --gold-soft: #2A2316;
    --status-asumsi-fg: #E2B867; --status-simulasi-fg: #D9D4CA; --status-simulasi-border: #8F897E;
    --ok: #7FD3A1; --ok-bg: #12291C; --warn: #F0B860; --warn-bg: #2E2210; --info: #8FC3EC; --info-bg: #10212F;
    --pill-kunci-bg: #2A2824; --pill-kunci-fg: #C9C3B8;
    --peta-bg: #1A1814; --penanda-bg: rgba(22, 21, 19, 0.96); --emas-garis: #5A4724; --tk-ok-akhir: #201B12;
    --prompter-garis: #2E4256; --gelembung-ai: #1E1D1A;
    --gelembung-saya: #2B2620; --gelembung-saya-fg: #F2EFE9; --gelembung-saya-redup: #CFC8BA;
    --pill-sumber-bg: #26241F; --pilih-aktif-bg: #C39241; --pilih-aktif-fg: #000000;
    --bayang: rgba(0, 0, 0, 0.5); --tanda-air-tiruan: rgba(255, 255, 255, 0.6);
    --tampil-terang: none; --tampil-gelap: block;
    --sb-bg: #121212; --sb-garis: #2B2925; --garis-gelap-isi: #2E2B26;
  }
}
/* Kertas dokumen dan lembar A4 toolkit selalu terang (keputusan 49e): token terang dipasang ulang di dalamnya. */
.kertas, .lembar-a4 {
  color-scheme: light;
  --bg: #F4F2ED; --surface: #FFFFFF; --surface-raised: #FAF8F4; --surface-muted: #FBFAF7;
  --text: #121212; --text-muted: #5F5A51; --text-disabled: #8F897E; --border: #E7E2D8; --border-strong: #CFC8BA;
  --accent-ink: #805D1E; --stop-ink: #A3262B; --track: #ECE7DD; --gold-soft: #F6EDDC;
  --status-asumsi-fg: #805D1E; --status-simulasi-fg: #3F3B35; --status-simulasi-border: #8F897E;
}
body { font-size: 15px; line-height: 1.55; }

/* ---------- kerangka aplikasi: menu samping + area kerja ---------- */
.aplikasi { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
.samping { display: none; }
.utama { display: flex; flex-direction: column; min-width: 0; }
.isi { padding: var(--sp-4) var(--sp-4) var(--sp-7); width: 100%; max-width: var(--content-max); }
.isi > h1 { margin-bottom: var(--sp-4); }
.kaki { padding: var(--sp-4); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-small); margin-top: auto; }
@media (min-width: 1024px) {
  .aplikasi { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .samping { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: 0; height: 100vh;
             overflow-y: auto; background: var(--sb-bg); color: var(--sb-teks); padding: var(--sp-5) var(--sp-4) 0;
             border-right: 1px solid var(--sb-garis); }
  .pita-uji + .lompat + .aplikasi .samping { top: 32px; height: calc(100vh - 32px); }
  .isi { padding: var(--sp-5) var(--sp-6) var(--sp-8); }
  .aplikasi.tanpa-menu { grid-template-columns: minmax(0, 1fr); }
  .aplikasi.tanpa-menu .isi { margin: 0 auto; }
}

/* logo */
.logo-samping { display: grid; gap: var(--sp-2); text-decoration: none; }
.logo-samping img { display: block; height: auto; }
.logo-ft { width: 168px; }
.logo-am { width: 128px; }
.logo-tlm-kaki { width: 92px; height: auto; opacity: 0.9; margin: var(--sp-2) var(--sp-2) 0; }

/* kartu Kang Trisna - AI di menu samping (avatar monogram KT, T9 keputusan 49b) */
.kts { background: var(--sb-naik); border: 1px solid var(--sb-garis); border-radius: 14px; padding: var(--sp-3); display: grid; gap: var(--sp-2); }
.kts-baris { display: flex; gap: var(--sp-3); align-items: center; }
.kts-nama { display: block; color: var(--sb-emas); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.02em; }
.kts-tagline { display: block; color: var(--sb-redup); font-size: 12px; }
.ava-kt { display: block; border-radius: 50%; flex: none; }
.tombol-emas-kecil { display: flex; justify-content: center; align-items: center; min-height: 40px; border-radius: 10px; padding: var(--sp-2) var(--sp-3);
                     background: var(--brand-gold); color: #000000; font-weight: var(--fw-bold); font-size: 13px; text-decoration: none; }
.tombol-emas-kecil:hover { background: var(--gold-300); text-decoration: none; }

/* kartu AI Usage di menu samping (T9 keputusan 49d): batang tipis emas, persen rata kanan, merah mulai 90% */
.ps { background: var(--sb-naik); border: 1px solid var(--sb-garis); border-radius: 14px; padding: var(--sp-3); display: grid; gap: 2px; }
.ps-atas { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: 2px; }
.ps-judul { font-size: 13px; font-weight: var(--fw-bold); color: #FFFFFF; }
.ps-waktu { font-size: 11px; color: var(--sb-redup); }
.ps-baris { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-top: 6px; font-size: 12px; color: var(--sb-redup); }
.ps-angka { font-weight: var(--fw-bold); color: #FFFFFF; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-angka.merah { color: #FF8A8F; }
.ps-bar { height: 4px; border-radius: 999px; background: #3A362F; overflow: hidden; }
.ps-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-gold); }
.ps-bar.merah i { background: var(--stop); }
.ps-ket { margin: var(--sp-2) 0 0; font-size: 11.5px; line-height: 1.4; color: var(--sb-redup); }
.ps-tautan { justify-self: start; margin-top: 2px; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--sb-emas); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.ps-tautan:hover { text-decoration: underline; }

/* navigasi (T9): ikon garis di lingkaran (49f), kelompok buka-tutup (49a). Butir aktif = pil gelap terang dengan
   lingkaran emas dan ikon hitam (referensi menu Ops, disesuaikan untuk menu samping hitam). */
.nav-label { font-size: 10.5px; letter-spacing: 0.14em; color: var(--sb-label); font-weight: var(--fw-bold); padding: 0 var(--sp-2); margin: var(--sp-2) 0 0; text-transform: uppercase; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav li { margin: 0; }
.nav a, .nav .nav-mati, .nav-grup-tombol {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: none; color: var(--sb-teks); text-decoration: none; text-align: left; cursor: pointer;
  font-family: inherit; font-weight: var(--fw-semibold); font-size: 13.5px; line-height: 1.3;
}
.nav-ikon { width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; background: var(--sb-ikon-bg); color: var(--sb-teks); display: grid; place-items: center; flex: none; }
.nav-ikon .ikon { width: 17px; height: 17px; }
.nav-teks { min-width: 0; }
.nav a:hover, .nav-grup-tombol:hover { background: var(--sb-hover); text-decoration: none; }
.nav a.aktif, .nav-grup-tombol.aktif { background: var(--sb-aktif); color: #FFFFFF; }
.nav a.aktif .nav-ikon, .nav-grup-tombol.aktif .nav-ikon, .nav-grup-tombol.induk-aktif .nav-ikon { background: var(--brand-gold); color: #000000; }
.nav-grup-tombol.induk-aktif { color: #FFFFFF; }
.nav-panah { margin-left: auto; display: grid; place-items: center; color: var(--sb-redup); transition: transform 0.15s ease; }
.nav-grup-tombol[aria-expanded="true"] .nav-panah { transform: rotate(180deg); }
.nav-grup-tombol:focus-visible, .nav a:focus-visible { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--brand-gold); border-radius: 999px; }
/* tanpa skrip: tombol diganti tautan ke halaman kelompok dan semua sub-menu tampil */
html:not(.js) .nav-grup-tombol { display: none; }
.js .nav-grup-tautan { display: none; }
.js .nav-grup:not(.buka) > .anak { display: none; }
.nav .anak { list-style: none; display: grid; gap: 2px; margin: 2px 0 var(--sp-1) 21px; padding: 0 0 0 11px; border-left: 1px solid var(--sb-garis); }
.nav .anak a, .nav .anak .nav-mati { min-height: 40px; padding: 7px 10px; border-radius: 10px; font-size: 12.75px; font-weight: var(--fw-medium); color: var(--sb-redup); }
.nav .anak a:hover { color: var(--sb-teks); }
.nav .anak a.aktif { background: var(--sb-aktif); color: var(--sb-emas); font-weight: var(--fw-semibold); box-shadow: inset 2px 0 0 var(--brand-gold); }
.nav .anak a.aktif:focus-visible { box-shadow: inset 2px 0 0 var(--brand-gold), 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--brand-gold); }
.nav .terkunci { color: #A59F94; }
.nav .terkunci::after { content: "🔒"; margin-left: auto; font-size: 11px; }
.nav .habis::after { content: "⏳"; margin-left: auto; font-size: 11px; }
.nav .nav-mati { color: #8F897E; cursor: default; }
.nav .nav-mati:hover { background: none; }
.nav .segera { margin-left: auto; font-size: 10px; border: 1px solid #4A453C; border-radius: 999px; padding: 0 6px; color: #A59F94; white-space: nowrap; }
.nav .angka-nav { margin-left: auto; font-size: 10.5px; background: #3A362F; color: #F2EFE9; border-radius: 999px; padding: 1px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav a.aktif .angka-nav { background: var(--brand-gold); color: #000000; }

/* kaki menu samping: Keluar di sebelah tombol tema, melekat di bawah (T9, referensi Trisna 31) */
.samping-kaki { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
                padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--sb-bg); border-top: 1px solid var(--sb-garis); z-index: 1; }
.keluar-samping { margin: 0; flex-shrink: 0; }
.keluar-samping button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2); border: 0; border-radius: 10px; white-space: nowrap;
                         background: none; color: var(--sb-teks); font-family: inherit; font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.keluar-samping button:hover { background: var(--sb-hover); }
.keluar-samping button:focus-visible, .pilih-tema button:focus-visible { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--brand-gold); }
.pilih-tema { flex-shrink: 0; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--sb-garis); background: #0A0A09; }
.pilih-tema button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: none; color: var(--sb-redup); cursor: pointer; }
.pilih-tema button:hover { color: var(--sb-teks); background: var(--sb-hover); }
:root:not([data-tema]) .pilih-tema [data-pilih-tema="sistem"], :root[data-tema="terang"] .pilih-tema [data-pilih-tema="terang"],
:root[data-tema="gelap"] .pilih-tema [data-pilih-tema="gelap"] { background: var(--brand-gold); color: #000000; }
html:not(.js) .pilih-tema { display: none; }

/* kartu Kelas Anda */
.kelas-anda { background: linear-gradient(160deg, #2A2620, #151412); border: 1px solid #3A352C; border-radius: 14px; padding: var(--sp-3); display: grid; gap: 4px; font-size: 12px; color: var(--teks-gelap-redup); }
.kelas-anda .label-kelas { color: var(--gold-2); font-weight: 800; letter-spacing: 0.1em; font-size: 10.5px; }
.kelas-anda strong { color: #FFFFFF; font-size: 13px; }
.kelas-anda .tombol-emas-kecil { margin-top: var(--sp-1); }
.pill-expired { display: inline-block; justify-self: start; background: #3A1D1E; color: #FFB4B6; border: 1px solid var(--stop); border-radius: 999px; padding: 1px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; }

/* kepala halaman */
.kepala-hal { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
.pita-uji + .lompat + .aplikasi .kepala-hal { top: 32px; }
.kepala-hal:has(.menu-hp[open]) { z-index: 50; }
.logo-hp img { display: block; width: 116px; height: auto; }
.logo-hp .logo-untuk-terang { display: var(--tampil-terang); }
.logo-hp .logo-untuk-gelap { display: var(--tampil-gelap); }
.form-cari-atas { flex: 1 1 240px; display: flex; margin: 0; }
.form-cari-atas input { width: 100%; min-height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 var(--sp-3); background: var(--bg); color: var(--text); font: inherit; font-size: 14px; }
.form-cari-atas input:focus { outline: none; border: 2px solid var(--brand-gold); }
.chip-kuota { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 12.5px; font-weight: var(--fw-bold); border-radius: 999px; padding: 0 var(--sp-3); background: var(--gold-soft); color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.chip-kuota.habis { background: var(--stop-tint); color: var(--stop-ink); }
/* laptop: kartu AI Usage di menu samping sudah terlihat, jadi chip tidak dobel (T9 keputusan 49d) */
@media (min-width: 1024px) { .kepala-hal .chip-kuota { display: none; } }
.lonceng { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; position: relative; text-decoration: none; color: var(--text); font-size: 16px; }
.lonceng .titik { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); }
.pengguna-atas { position: relative; }
.pengguna-atas > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; min-height: 44px; color: var(--text); }
.pengguna-atas > summary::-webkit-details-marker { display: none; }
.ava { width: 36px; height: 36px; border-radius: 50%; background: var(--hitam); color: var(--gold-2); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
.pengguna-teks { display: grid; line-height: 1.25; font-size: 13px; }
.pengguna-teks small { color: var(--text-muted); font-size: 11.5px; }
.menu-akun { position: absolute; right: 0; top: 100%; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2); box-shadow: 0 12px 30px var(--bayang); display: grid; gap: 2px; z-index: 30; }
.menu-akun a, .menu-akun button { display: flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3); border-radius: 8px; color: var(--text); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.menu-akun a:hover, .menu-akun button:hover { background: var(--bg); text-decoration: none; }
.banner-aktif { display: flex; gap: var(--sp-2); align-items: center; background: var(--gold-soft); color: var(--accent-ink); font-weight: var(--fw-semibold); font-size: 13px; padding: var(--sp-2) var(--sp-4); }
.banner-aktif.habis { background: var(--stop-tint); color: var(--stop-ink); }
.banner-aktif a { color: inherit; font-weight: var(--fw-bold); }

/* menu HP (tanpa skrip: <details>) dan menu bawah */
.menu-hp > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; font-size: 18px; }
.menu-hp > summary::-webkit-details-marker { display: none; }
.menu-hp[open] > .menu-hp-isi { display: flex; }
.menu-hp-isi { display: none; flex-direction: column; gap: var(--sp-3); position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); background: var(--sb-bg); color: var(--sb-teks); padding: var(--sp-5) var(--sp-4) 0; overflow-y: auto; z-index: 40; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55); }
.menu-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--hitam); border-top: 1px solid var(--garis-gelap); padding-bottom: env(safe-area-inset-bottom, 0); }
.menu-bawah a { display: grid; justify-items: center; gap: 2px; padding: var(--sp-2) 2px; min-height: 56px; color: #CFC9BD; text-decoration: none; font-size: 10.5px; font-weight: var(--fw-semibold); text-align: center; line-height: 1.2; }
.menu-bawah a .ikon { width: 20px; height: 20px; }
.menu-bawah a.aktif { color: var(--gold-2); }
.ada-menu-bawah .isi { padding-bottom: calc(var(--sp-8) + 40px); }
@media (min-width: 1024px) {
  .menu-hp, .menu-bawah, .aplikasi:not(.tanpa-menu) .logo-hp { display: none; }
  .ada-menu-bawah .isi { padding-bottom: var(--sp-8); }
}
@media (max-width: 639px) {
  .pengguna-teks { display: none; }
  .form-cari-atas { order: 9; flex-basis: 100%; }
}

/* ---------- komponen v5: kartu, hero, pill, grid ---------- */
.kartu { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); }
.eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); font-weight: var(--fw-bold); margin: 0; }
.lead { color: var(--text-muted); max-width: 72ch; margin: 0 0 var(--sp-4); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--fw-bold); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-info { background: var(--info-bg); color: var(--info); }
.pill-emas { background: var(--gold-soft); color: var(--accent-ink); }
.pill-kunci { background: var(--pill-kunci-bg); color: var(--pill-kunci-fg); }
.pill-habis { background: var(--stop-tint); color: var(--stop-ink); }
.pill-gelap { background: var(--pilih-aktif-bg); color: var(--pilih-aktif-fg); }
.kisi-2, .kisi-3, .kisi-4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.kisi-2 > .kartu, .kisi-3 > .kartu, .kisi-4 > .kartu { margin-bottom: 0; }
@media (min-width: 720px) { .kisi-2, .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kisi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hero { background: var(--hitam); color: #F2EFE9; border-radius: 18px; padding: var(--sp-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; position: relative; overflow: hidden; margin-bottom: var(--sp-4); }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(195, 146, 65, 0.35), transparent 70%); pointer-events: none; }
.hero .eyebrow { color: var(--gold-2); }
.hero h1, .hero h2 { margin: var(--sp-2) 0; font-size: 24px; line-height: 1.25; color: #FFFFFF; }
.hero p { color: #D3CDC1; margin: 0 0 var(--sp-2); }
.hero a:not(.tombol) { color: var(--gold-2); }
.hero .tombol-kedua { color: #F2EFE9; border-color: #6A6459; }
.hero .tombol-kedua:hover { background: #24221F; }
.hero-aksi { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.hero-foto { position: relative; z-index: 1; display: none; }
.hero-foto img { width: 100%; max-width: 220px; height: 260px; object-fit: cover; object-position: top; border-radius: 14px; display: block; }
.donat { width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; background: conic-gradient(var(--brand-gold) var(--p, 0%), #34312C 0); }
.donat > div { width: 100px; height: 100px; border-radius: 50%; background: var(--hitam); display: grid; place-items: center; text-align: center; }
.donat b { font-size: 26px; color: var(--gold-2); line-height: 1; }
.donat small { display: block; font-size: 10px; color: #A9A398; }
.hero-angka { display: grid; gap: var(--sp-3); z-index: 1; }
.hero-angka b { display: block; font-size: 20px; color: var(--gold-2); line-height: 1.2; }
.hero-angka span { font-size: 12.5px; color: #D3CDC1; }
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1.5fr) 140px minmax(0, 1fr); }
  .hero-angka { border-left: 1px solid #34312C; padding-left: var(--sp-5); }
}
/* persen donat lewat kelas (CSP menolak style=): p-0 ... p-100 kelipatan 5 */
.p-0{--p:0%}.p-5{--p:5%}.p-10{--p:10%}.p-15{--p:15%}.p-20{--p:20%}.p-25{--p:25%}.p-30{--p:30%}.p-35{--p:35%}.p-40{--p:40%}.p-45{--p:45%}.p-50{--p:50%}.p-55{--p:55%}.p-60{--p:60%}.p-65{--p:65%}.p-70{--p:70%}.p-75{--p:75%}.p-80{--p:80%}.p-85{--p:85%}.p-90{--p:90%}.p-95{--p:95%}.p-100{--p:100%}

/* perjalanan kelas: ilustrasi + 5 penanda */
.perjalanan { background: var(--peta-bg); }
.perjalanan h2 { margin: var(--sp-1) 0 var(--sp-3); font-size: 20px; }
.ilus-bungkus { position: relative; overflow-x: auto; }
.ilus-dalam { position: relative; min-width: 760px; }
.ilus { display: block; width: 100%; height: auto; border-radius: 12px; }
.penanda { position: absolute; display: flex; align-items: center; gap: var(--sp-2); background: var(--penanda-bg); border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px 6px 6px; box-shadow: 0 8px 18px var(--bayang); max-width: 210px; color: var(--text); text-decoration: none; }
.penanda:hover { text-decoration: none; border-color: var(--brand-gold); }
.penanda b { display: block; font-size: 12.5px; line-height: 1.25; }
.penanda small { font-size: 11px; color: var(--text-muted); }
.penanda.aktif { border-color: var(--brand-gold); box-shadow: 0 0 0 3px var(--gold-soft), 0 8px 18px rgba(0, 0, 0, 0.12); }
.pn { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--track); color: var(--text); flex: none; }
.pn.v { background: var(--brand-gold); color: #000000; }
.pn.now { background: var(--pilih-aktif-bg); color: var(--pilih-aktif-fg); }
/* T9 (keputusan 52): judul langkah lebih panjang, jadi label boleh dua baris (lebar tetap) dan penanda 5 diikat ke
   tepi kanan supaya tidak keluar dari gambar di laptop. */
.penanda { width: 196px; }
.penanda b { overflow-wrap: anywhere; }
.pj-1 { left: 20%; top: 70%; } .pj-2 { left: 33%; top: 43%; } .pj-3 { left: 56%; top: 59%; } .pj-4 { left: 64%; top: 25%; } .pj-5 { right: 1%; top: 3%; }

/* kartu program dan kartu fitur */
.kartu-program { display: grid; gap: var(--sp-3); padding: 0; overflow: hidden; text-decoration: none; color: var(--text); }
.kartu-program:hover { text-decoration: none; border-color: var(--brand-gold); }
.kartu-program img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; background: var(--hitam); }
.kartu-program .badan { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-2); }
.kartu-program h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.kartu-fitur { display: grid; gap: var(--sp-2); align-content: start; text-decoration: none; color: var(--text); }
.kartu-fitur:hover { text-decoration: none; border-color: var(--brand-gold); }
.kartu-fitur h3 { margin: 0; font-size: 15.5px; }
.kartu-fitur p { margin: 0; color: var(--text-muted); font-size: 14px; }
.kartu-fitur.terkunci { background: var(--surface-muted); }
.kartu-fitur.terkunci h3 { color: var(--text-muted); }
.ikon-fitur { width: 40px; height: 40px; border-radius: 12px; background: var(--hitam); color: var(--gold-2); display: grid; place-items: center; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
.baris-atas { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.catatan-lsp { font-size: 13px; color: var(--text-muted); border-left: 3px solid var(--brand-gold); padding: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-4); }
.akses-cepat { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.akses-cepat a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.akses-cepat a:hover { border-color: var(--brand-gold); text-decoration: none; }
.akses-cepat small { display: block; color: var(--text-muted); font-size: 12px; }
.ikon-kecil { width: 36px; height: 36px; border-radius: 10px; background: var(--gold-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; }
.tk-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 900px) { .tk-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tm { display: grid; gap: 3px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; }
.tm:hover { text-decoration: none; border-color: var(--brand-gold); }
.tm b { font-size: 12.5px; line-height: 1.3; }
.tm small { font-size: 11px; color: var(--text-muted); }
.tm.ok { background: var(--surface); border-color: var(--emas-garis); }
.kosong-hal { text-align: center; display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); }
.kosong-hal img { max-width: 260px; width: 100%; height: auto; }

/* masuk (login) */
.masuk-bungkus { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--hitam); color: #F2EFE9; }
.masuk-kiri { display: grid; align-content: center; justify-items: start; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); max-width: 520px; margin: 0 auto; width: 100%; }
.masuk-kiri .logo-ft { width: 220px; }
.masuk-kiri .logo-am { width: 170px; }
.masuk-kiri h1 { color: #FFFFFF; font-size: 26px; line-height: 1.3; margin: var(--sp-2) 0 0; }
.masuk-kiri .lead { color: #D3CDC1; }
.masuk-kartu { background: var(--surface); color: var(--text); border-radius: 18px; padding: var(--sp-5); width: 100%; }
.masuk-kartu .kecil { color: var(--text-muted); }
.masuk-foto { display: none; position: relative; overflow: hidden; }
.masuk-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.masuk-foto figcaption { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5); background: rgba(18, 18, 18, 0.82); border: 1px solid var(--garis-gelap); border-radius: 14px; padding: var(--sp-3) var(--sp-4); font-size: 13px; color: #EDEAE3; }
.masuk-foto figcaption b { color: var(--gold-2); }
.masuk-kaki { display: flex; align-items: center; gap: var(--sp-3); color: #A9A398; font-size: 12px; }
.masuk-kaki img { width: 86px; height: auto; }
.masuk-foto-hp { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--brand-gold); }
@media (min-width: 1024px) {
  .masuk-bungkus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .masuk-foto { display: block; }
  .masuk-foto-hp { display: none; }
}
@media (min-width: 1100px) { .hero-foto { display: block; } }
.h-kartu { margin: 0; font-size: 16px; line-height: 1.35; }
.pemisah-gelap { border: 0; border-top: 1px solid #3A352C; margin: var(--sp-2) 0; width: 100%; }
.kartu-program-bnsp { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.kartu-program-bnsp img { width: 96px; height: 120px; object-fit: cover; object-position: top; border-radius: 12px; background: var(--hitam); }
.kartu-program-bnsp h2 { margin: var(--sp-1) 0; font-size: 18px; }
.kartu-program-bnsp p { margin: 0 0 var(--sp-1); }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-bold);
  border: 0; cursor: pointer; text-decoration: none;
}
.tombol:hover { text-decoration: none; }
.tombol-utama { background: var(--accent); color: var(--on-accent); }
.tombol-utama::after { content: "→"; }
.tombol-utama:hover { background: var(--gold-300); }
.tombol-kedua { background: transparent; color: var(--accent-ink); border: 1.5px solid var(--accent); }
.tombol-kedua:hover { background: var(--gold-tint); }
.tombol-teks { background: none; color: var(--accent-ink); padding: 0 var(--sp-1); min-height: var(--tap-min); text-decoration: underline; }
.tombol[disabled], .tombol-nonaktif, .tombol-mati { background: var(--track); color: var(--text-muted); border: 0; cursor: not-allowed; }
.tombol[disabled]::after, .tombol-nonaktif::after, .tombol-mati::after { content: none; }
.aksi-form { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 639px) {
  .aksi-form .tombol-utama { width: 100%; }
}

/* ---------- isian ---------- */
form { margin: 0; }
.bidang { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.bidang label { font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.bidang input[type="text"], .bidang input[type="email"], .bidang input[type="password"], .bidang input[type="search"],
.bidang input[type="number"], .bidang input[type="date"], .bidang input[type="file"], .bidang select, .bidang textarea {
  width: 100%; min-height: 48px; padding: var(--sp-3) 14px; background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-input); font-family: inherit; font-size: 16px; line-height: 24px;
}
.bidang textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
.bidang input::placeholder, .bidang textarea::placeholder { color: var(--text-muted); }
.bidang input:focus, .bidang select:focus, .bidang textarea:focus { outline: none; border: 2px solid var(--accent); box-shadow: none; }
.bidang .bantuan { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.bidang-centang { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.bidang-centang input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent-ink); flex: none; }
.bidang-centang label { font-weight: var(--fw-regular); font-size: var(--fs-body); }
.form-cari { margin-bottom: var(--sp-4); }

/* ---------- kartu dan kisi ---------- */
.kartu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.kartu.berikut { border: 1.5px solid var(--accent); }
.kartu-sempit { max-width: 560px; }
.kartu.baca { max-width: var(--measure); }
.kisi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.kisi > .kartu { margin-bottom: 0; }
@media (min-width: 640px) { .kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kartu { padding: var(--sp-5); } .kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kartu-angka { display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: var(--text); }
.kartu-angka:hover { text-decoration: none; border-color: var(--gold-hair); }
.kartu-angka .angka { font-size: 28px; line-height: 36px; font-weight: var(--fw-bold); }
.label-kecil { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--accent-ink); text-transform: uppercase; margin: 0; }
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--text-muted); }
.kv span:last-child { text-align: right; }
.langkah li { margin-bottom: var(--sp-2); }

.kunci-totp { font-size: 22px; line-height: 32px; letter-spacing: 0.08em; color: var(--accent-ink); word-break: break-all; margin: var(--sp-2) 0 var(--sp-3); }
details summary { cursor: pointer; color: var(--accent-ink); min-height: var(--tap-min); display: flex; align-items: center; }
.tautan-sekali code { display: block; padding: var(--sp-3); background: var(--bg); border: 1px dashed var(--gold-hair); border-radius: 8px; word-break: break-all; font-size: 14px; }
.kode-blok { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-4); overflow-x: auto; font-size: 13px; line-height: 20px; white-space: pre-wrap; word-break: break-word; }

/* ---------- kotak pesan ---------- */
.kotak { color: var(--text); display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 12px; margin-bottom: var(--sp-4); background: var(--surface-raised); border: 1px solid var(--border); }
.kotak-ikon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 14px; }
.kotak-judul { display: block; margin-bottom: var(--sp-1); }
.kotak-isi p:last-child { margin-bottom: 0; }
.kotak-info { background: var(--gold-tint); border: 1px solid var(--gold-hair); }
.kotak-info .kotak-ikon { border: 1.5px solid var(--accent); color: var(--accent-ink); }
.kotak-berhasil { border-left: 3px solid var(--accent); }
.kotak-berhasil .kotak-ikon { background: var(--accent); color: var(--on-accent); }
.kotak-peringatan { border-left: 3px solid var(--accent); }
.kotak-peringatan .kotak-ikon { color: var(--accent-ink); border: 1.5px solid var(--accent); }
.kotak-galat { background: var(--surface); border: 2px solid var(--stop); }
.kotak-galat .kotak-ikon { color: var(--stop-ink); border: 1.5px solid var(--stop); }

/* ---------- lencana status data ---------- */
.lencana { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--sp-2); border-radius: var(--radius-badge); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; white-space: nowrap; vertical-align: middle; }
.lencana-aktual { background: var(--status-aktual-bg); color: var(--status-aktual-fg); }
.lencana-asumsi { border: 1.5px solid var(--accent); color: var(--status-asumsi-fg); }
.lencana-simulasi { border: 1.5px dashed var(--status-simulasi-border); color: var(--status-simulasi-fg); }
.lencana-bank { border: 1px solid var(--border-strong); color: var(--text); background: var(--surface-raised); }
.lencana-fiktif { border: 1.5px dashed var(--accent); color: var(--accent-ink); }
.lencana-kosong { border: 1px solid var(--border-strong); color: var(--text-muted); }

/* ---------- bar progres ---------- */
.bar { height: 8px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.lebar-0{width:0%} .lebar-5{width:5%} .lebar-10{width:10%} .lebar-15{width:15%} .lebar-20{width:20%} .lebar-25{width:25%} .lebar-30{width:30%} .lebar-35{width:35%} .lebar-40{width:40%} .lebar-45{width:45%} .lebar-50{width:50%} .lebar-55{width:55%} .lebar-60{width:60%} .lebar-65{width:65%} .lebar-70{width:70%} .lebar-75{width:75%} .lebar-80{width:80%} .lebar-85{width:85%} .lebar-90{width:90%} .lebar-95{width:95%} .lebar-100{width:100%}

/* ---------- tabel (HP: tumpukan kartu, tanpa geser ke samping) ---------- */
.tabel-bungkus { margin-bottom: var(--sp-5); }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel caption { text-align: left; font-weight: var(--fw-bold); padding-bottom: var(--sp-2); color: var(--text); }
.tabel th { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); text-align: left; padding: 10px var(--sp-2); background: var(--surface); font-weight: var(--fw-bold); }
.tabel td { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.tabel td.kosong { color: var(--text-muted); text-align: center; }
@media (max-width: 639px) {
  .tabel thead { position: absolute; left: -9999px; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
  .tabel td { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px solid var(--border); padding: var(--sp-2) 0; text-align: right; }
  .tabel td:last-child { border-bottom: 0; }
  .tabel td::before { content: attr(data-label); color: var(--text-muted); text-align: left; flex: none; max-width: 45%; }
  .tabel td.kosong::before { content: none; }
}

/* ---------- komponen halaman peserta (dipakai WEB-B) ---------- */
.tab-bukti ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--border); }
.tab-bukti li { margin: 0; }
.tab-bukti a { display: flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--sp-4); color: var(--text-muted); text-decoration: none; font-weight: var(--fw-semibold); font-size: 14px; }
.tab-bukti a:hover { color: var(--text); text-decoration: none; }
.tab-bukti a.aktif { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }

.status-bukti { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: var(--fw-bold); font-size: 14px; white-space: nowrap; }
.status-siap { color: var(--accent-ink); }
.status-kembalikan, .status-gagal { color: var(--stop-ink); }
.status-basi { color: var(--text-muted); font-weight: var(--fw-medium); white-space: normal; }

fieldset.pilihan-radio, fieldset.pilihan-centang, fieldset.rentang { border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); min-width: 0; }
fieldset legend { font-weight: var(--fw-semibold); font-size: 14px; padding: 0 var(--sp-1); }
.opsi { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap-min); padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--border); }
.opsi:last-child { border-bottom: 0; }
.opsi input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-ink); flex: none; }
.opsi-mati { color: var(--text-disabled); cursor: not-allowed; }
.kartu-tanya { border: 1.5px solid var(--accent); }
.tanya { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.tanda-kabur { color: var(--stop-ink); font-weight: var(--fw-bold); }
.contoh-kabur { color: var(--text-muted); }
.contoh-tajam { color: var(--text); }
.contoh-isian, .bantu-pilihan { color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.progres { font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.riwayat { margin: var(--sp-4) 0; }
.riwayat ul { margin-top: var(--sp-2); }
.keterangan-label { list-style: none; padding: 0; }
.keterangan-label li { margin-bottom: var(--sp-2); }
.lencana-usulan { border: 1.5px solid var(--accent); color: var(--accent-ink); }
mark.wajib-isi { background: var(--gold-100); color: var(--on-paper); padding: 0 4px; border-radius: 4px; }

/* ---------- pratinjau dokumen di "kertas" putih (teks #141210; emas hanya emas tua #8F6A2F) ---------- */
.kertas { background: var(--paper); color: var(--on-paper); border: 1px solid var(--border); border-radius: 8px; padding: var(--sp-5); margin-bottom: var(--sp-5); max-width: 860px; overflow-x: auto; }
.kertas a { color: var(--on-paper-accent); }
.kertas-file { font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-700); border-bottom: 1px solid var(--gold-200); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.kertas .lencana-aktual { background: var(--brand-gold); color: var(--brand-black); }
.kertas .lencana-asumsi, .kertas .lencana-usulan { border-color: var(--gold-700); color: var(--gold-700); }
.kertas .lencana-simulasi { border-color: #6B6B6B; color: var(--on-paper); }
.kertas .lencana-bank, .kertas .lencana-kosong { background: #F3F3F3; border-color: #BDBDBD; color: var(--on-paper); }
.dok-judul { font-size: 22px; line-height: 30px; font-weight: var(--fw-bold); text-align: center; margin: var(--sp-3) 0; }
.dok-subjudul { font-size: 16px; font-weight: var(--fw-semibold); text-align: center; }
.kertas h1, .kertas h2, .kertas h3 { color: var(--on-paper); }
.dok-heading1 { font-size: 20px; line-height: 28px; }
.dok-heading2 { font-size: 17px; line-height: 24px; }
.dok-heading3 { font-size: 15px; line-height: 22px; }
.dok-daftar { padding-left: var(--sp-5); }
.dok-tabel { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; margin: var(--sp-2) 0 var(--sp-3); }
.dok-tabel caption { text-align: left; font-weight: var(--fw-bold); padding-bottom: var(--sp-1); }
.dok-tabel th, .dok-tabel td { border: 1px solid #9A9A9A; padding: 6px 8px; text-align: left; vertical-align: top; color: var(--on-paper); }
.dok-tabel th { background: #F3F3F3; font-weight: var(--fw-bold); }
.dok-keterangan { font-size: 12px; color: #444444; }
.dok-ttd { margin: var(--sp-5) 0; }
.dok-garis-ttd { display: inline-block; min-width: 220px; margin-top: var(--sp-7); padding-top: var(--sp-1); border-top: 1px solid var(--on-paper); color: #444444; font-size: 12px; }
.dok-pemisah { border: 0; border-top: 2px dashed #BDBDBD; margin: var(--sp-5) 0; }
.dok-daftar-isi, .dok-gambar p { color: #555555; font-style: italic; }
.dok-gambar { margin: var(--sp-3) 0; }
.dok-gambar figcaption { font-size: 12px; color: #444444; }
.dok-gambar-isi { display: block; max-width: 100%; height: auto; border: 1px solid #E0E0E0; } /* T19d R2 */

/* ---------- percakapan wawancara (W1, 11 Nov: bentuk chat + panel progres; satu panah dari ::after) ---------- */
.layar-baca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.alur-bukti { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); border-left: 3px solid var(--accent); padding: var(--sp-2) var(--sp-3); background: var(--surface); border-radius: 0 12px 12px 0; margin-bottom: var(--sp-4); }
.ruang-wawancara { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.panel-progres { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--sp-4); }
.panel-judul { font-weight: var(--fw-bold); margin-bottom: var(--sp-1); }
.panel-baris { font-size: var(--fs-small); line-height: var(--lh-small); margin-bottom: var(--sp-2); }
.panel-progres .bar { margin-bottom: var(--sp-3); }
.panel-berikut { border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.panel-berikut p { margin: 0; }
.panel-tips { background: var(--gold-tint); border: 1px solid var(--gold-hair); border-radius: 12px; padding: var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.panel-tips p:last-child { margin-bottom: 0; }
.obrolan { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.gelembung { max-width: 88%; margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: 16px; overflow-wrap: anywhere; }
.gelembung p { margin: 0 0 var(--sp-1); }
.gelembung p:last-child { margin-bottom: 0; }
.gelembung-nama { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gelembung-ai { align-self: flex-start; background: var(--surface-raised); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.gelembung-peserta { align-self: flex-end; background: var(--gold-tint); border: 1px solid var(--gold-hair); border-bottom-right-radius: 4px; }
.gelembung-aktif { border: 1.5px solid var(--accent); }
.gelembung-aktif .tanya { font-size: var(--fs-body); line-height: var(--lh-body); }
.form-chat { position: sticky; bottom: 0; background: var(--bg); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.form-chat .aksi-form { margin-top: var(--sp-2); }
.bidang-chat { margin-bottom: 0; }
.bidang-chat textarea { font-family: inherit; font-size: 16px; min-height: 88px; }
/* T19s R3 (keputusan 92 butir 2): pertanyaan beberapa data = daftar bernomor, satu kotak per poin */
.daftar-poin { margin: 8px 0 0; padding-left: 1.6em; }
.form-chat:has(.daftar-poin) { position: static; }
.daftar-poin .poin-isian { margin-bottom: 10px; }
.daftar-poin .poin-isian label { display: block; font-weight: 600; margin-bottom: 4px; }
.daftar-poin .poin-isian input, .daftar-poin .poin-isian select { width: 100%; font-family: inherit; font-size: 16px; box-sizing: border-box; }
.pilihan-tombol { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pilihan-tombol .tombol { white-space: normal; text-align: left; min-height: var(--tap-min); }
.perlu-pilih { color: var(--accent-ink); margin-bottom: var(--sp-1); }
.catatan-ai { margin-top: var(--sp-3); }
/* T17h (keputusan 75): jangkar pesan AI terakhir; jarak untuk pita uji dan kepala halaman yang menempel di atas */
.jangkar-terbaru { display: block; height: 0; scroll-margin-top: 140px; }
@media (max-width: 1023px) {
  /* HP: panel ringkas di atas percakapan */
  .panel-progres { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); }
  .panel-progres p { margin: 0; }
  .panel-progres .bar { flex: 1 1 100%; margin: var(--sp-1) 0 0; }
  .panel-progres .panel-berikut { border: 0; padding: 0; margin: 0; flex: 1 1 100%; }
  .panel-progres .panel-tips, .panel-progres .redup { display: none; }
  .gelembung { max-width: 100%; }
}
@media (min-width: 1024px) {
  .ruang-wawancara { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "obrol panel"; }
  .ruang-wawancara > .percakapan { grid-area: obrol; }
  .ruang-wawancara > .panel-progres { grid-area: panel; position: sticky; top: var(--sp-6); }
}

/* ---------- alur satu sesi (KONTRAK-SESI 2.3): panel progres sesi, kartu simulasi, ringkasan gabungan, hasil ---------- */
.panel-persen { float: right; font-size: var(--fs-small); color: var(--accent-ink); }
.daftar-bagian { list-style: none; padding: 0; margin: 0 0 var(--sp-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.daftar-bagian li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.daftar-bagian li:last-child { border-bottom: 0; }
.daftar-bagian li.aktif { font-weight: var(--fw-bold); color: var(--accent-ink); }
.kartu-simulasi { border: 1.5px dashed var(--status-simulasi-border); margin: var(--sp-3) 0; }
.kartu-simulasi .label-kecil { display: flex; align-items: center; gap: var(--sp-2); }
.kv-simulasi { margin: 0 0 var(--sp-3); }
.kv-simulasi .kv dt { color: var(--text-muted); }
.kv-simulasi .kv dd { margin: 0; text-align: right; }
.aksi-simulasi { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.aksi-simulasi form .aksi-form { margin-top: 0; }
.asal-isian { font-size: var(--fs-label); color: var(--text-muted); white-space: nowrap; }
.pilihan-unit .opsi { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.kartu-hasil { margin-bottom: var(--sp-3); }
.perbaiki summary { cursor: pointer; color: var(--accent-ink); margin: var(--sp-2) 0; }
.catatan-trainer { margin-top: var(--sp-3); }
.kartu-pembuka p { margin-bottom: var(--sp-3); }
@media (max-width: 1023px) {
  .panel-progres .daftar-bagian { display: none; }
  .panel-persen { float: none; margin-left: var(--sp-2); }
}

/* ---------- T2: jendela promosi fitur terkunci (v5 layar 4), Pemakaian & Upgrade (v5 layar 11) ---------- */
.kunci-latar { display: grid; place-items: center; min-height: 70vh; padding: var(--sp-4) 0; background: radial-gradient(circle at 50% 40%, rgba(195, 146, 65, 0.10), transparent 60%); }
.jendela { width: min(720px, 100%); background: var(--surface); border-radius: 20px; padding: var(--sp-5); display: grid; gap: var(--sp-3); box-shadow: 0 30px 60px var(--bayang); border: 1px solid var(--border); }
.jendela-atas { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.jendela .tutup { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: 18px; }
.jendela .tutup:hover { background: var(--bg); text-decoration: none; }
.jendela h1 { font-size: 22px; line-height: 1.3; margin: 0 0 var(--sp-2); }
.jendela-isi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.jendela-foto { display: none; width: 100%; height: 260px; object-fit: cover; object-position: top; border-radius: 14px; background: var(--hitam); }
@media (min-width: 720px) { .jendela-isi { grid-template-columns: minmax(0, 1fr) 190px; } .jendela-foto { display: block; } }
.promo { font-size: 15px; line-height: 1.6; margin: 0 0 var(--sp-3); }
.manfaat { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.manfaat li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 14px; margin: 0; }
.manfaat .v { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.kartu-angka-v5 { display: grid; gap: 2px; }
.kartu-angka-v5 small { font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-muted); font-weight: var(--fw-bold); }
.kartu-angka-v5 b { font-size: 22px; line-height: 1.3; }
.kartu-angka-v5 span { font-size: 13px; color: var(--text-muted); }
.kartu-angka-v5 .pill { justify-self: start; margin-top: var(--sp-1); }
.pakai-baris { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px; gap: var(--sp-3); align-items: center; font-size: 13.5px; margin-bottom: var(--sp-2); }
.pakai-baris small { color: var(--text-muted); text-align: right; }
@media (max-width: 639px) { .pakai-baris { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } .pakai-baris small { text-align: left; } }

/* ---------- T3: Dokumen dan Survei & Evaluasi ---------- */
.kartu-syarat .form-unggah { margin-top: var(--sp-2); }
.form-unggah .bidang { margin-bottom: var(--sp-2); }
.form-unggah .aksi-form { margin-top: var(--sp-1); }
.form-unggah input[type="file"] { min-height: 44px; padding: var(--sp-2); }
.teks-peringatan { color: var(--warn); font-weight: var(--fw-semibold); }
.skala { border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
.skala legend { font-weight: var(--fw-semibold); font-size: 14.5px; padding: 0; margin-bottom: var(--sp-2); }
.skala-isi { display: flex; flex-wrap: wrap; gap: 6px; }
.skala-opsi { position: relative; display: inline-flex; }
.skala-opsi input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skala-opsi span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--sp-2); border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: var(--fw-bold); font-size: 14px; cursor: pointer; }
.skala-opsi.lebar span { padding: var(--sp-2) var(--sp-4); text-align: left; line-height: 1.35; }
.skala-opsi span:hover { border-color: var(--brand-gold); }
.isian-tombol { margin-bottom: var(--sp-4); }
.skala-opsi input:checked + span { background: var(--pilih-aktif-bg); color: var(--pilih-aktif-fg); border-color: var(--pilih-aktif-bg); }
.skala-opsi input:focus-visible + span { box-shadow: var(--focus-ring); }
.daftar-kunci { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); }
.baris-kunci { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-muted); text-decoration: none; background: var(--surface-muted); }
.baris-kunci:hover { border-color: var(--brand-gold); text-decoration: none; }

/* ---------- T4: E-Learning ---------- */
.hero-pendek { grid-template-columns: minmax(0, 1fr) !important; }
.daftar-modul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.modul-baris { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; }
.modul-baris:hover { border-color: var(--brand-gold); text-decoration: none; }
.modul-baris small { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: var(--sp-1); }
.tk-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--hitam); color: var(--gold-2); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.pemutar { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--hitam); border-radius: 14px; overflow: hidden; margin-bottom: var(--sp-3); }
.pemutar iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tanda-air { position: absolute; right: var(--sp-3); bottom: 48px; color: rgba(255, 255, 255, 0.55); font-size: 12px; font-weight: var(--fw-semibold); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.pemutar-tiruan { display: grid; place-items: center; text-align: center; aspect-ratio: auto; padding: var(--sp-5); background: var(--peta-bg); color: var(--text); }
.pemutar-tiruan img { max-width: 280px; width: 100%; height: auto; }
.pemutar-tiruan .tanda-air { color: var(--tanda-air-tiruan); text-shadow: none; bottom: var(--sp-2); }

/* ---------- T5: Toolkit (T19k: banyak toolkit per peserta) ---------- */
.tk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 1100px) { .tk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tk-grid.lima { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tk-grid { grid-template-columns: minmax(0, 1fr); } }
.tk { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4); border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.tk:focus-visible, .kartu-fitur:focus-visible, .kartu-program:focus-visible, .tm:focus-visible, .penanda:focus-visible, .modul-baris:focus-visible, .akses-cepat a:focus-visible { border-radius: 14px; }
.tk:hover { border-color: var(--brand-gold); text-decoration: none; }
.tk.ok { border-color: var(--emas-garis); background: linear-gradient(180deg, var(--surface), var(--tk-ok-akhir)); }
.tk.terkunci { background: var(--surface-muted); }
.tk.terkunci b { color: var(--text-muted); }
.tk b { font-size: 14px; }
.tk small { color: var(--text-muted); font-size: 12.5px; }
.tk-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
/* T19k (keputusan Trisna 102, prototype toolkit-riwayat_2026-11-14): halaman awal toolkit (Mulai, Lanjutkan, Riwayat) dan
   isi satu toolkit. Kartu Mulai hitam dengan label emas terang dan tombol emas bertulisan hitam (brand kit: teks putih
   tidak di atas emas); di latar terang, teks emas memakai emas tua (--accent-ink). HP: kartu bertumpuk, tombol >= 44 px. */
.tks-atas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0; }
.tks-mulai, .tks-lanjut { display: flex; flex-direction: column; gap: var(--sp-3); border-radius: 22px; padding: var(--sp-5); min-width: 0; }
.tks-mulai { background: var(--hitam); color: #FFFFFF; box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.tks-mulai h2, .tks-lanjut h2 { margin: 0; font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.tks-label { margin: 0; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.14em; color: var(--gold-2); }
.tks-label-terang { color: var(--accent-ink); }
.tks-mulai .tks-ket { color: #CFCAC0; }
.tks-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.tks-form label { font-size: 13px; color: #DCD7CD; }
.tks-form input { min-height: 48px; border-radius: 12px; border: 1px solid #4A453D; background: #1E1D1A; color: #FFFFFF; padding: 0 14px; font: inherit; font-size: 15px; width: 100%; box-sizing: border-box; }
.tks-form input::placeholder { color: #A39D92; }
.tks-tombol-emas { background: var(--brand-gold); color: #000000; font-weight: 800; }
.tks-tombol-emas:hover { background: var(--gold-2); color: #000000; }
.tks-lanjut { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.tks-lanjut p { margin: 0; }
.tks-tombol-penuh { width: 100%; box-sizing: border-box; }
.tks-ket { font-size: 13.5px; color: var(--text-muted); margin: 0; overflow-wrap: anywhere; }
.tks-bar { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
.tks-bar-isi { display: block; height: 100%; border-radius: 99px; background: var(--brand-gold); width: 0; }
.tks-bar-isi.p-5 { width: 5%; } .tks-bar-isi.p-10 { width: 10%; } .tks-bar-isi.p-15 { width: 15%; } .tks-bar-isi.p-20 { width: 20%; }
.tks-bar-isi.p-25 { width: 25%; } .tks-bar-isi.p-30 { width: 30%; } .tks-bar-isi.p-35 { width: 35%; } .tks-bar-isi.p-40 { width: 40%; }
.tks-bar-isi.p-45 { width: 45%; } .tks-bar-isi.p-50 { width: 50%; } .tks-bar-isi.p-55 { width: 55%; } .tks-bar-isi.p-60 { width: 60%; }
.tks-bar-isi.p-65 { width: 65%; } .tks-bar-isi.p-70 { width: 70%; } .tks-bar-isi.p-75 { width: 75%; } .tks-bar-isi.p-80 { width: 80%; }
.tks-bar-isi.p-85 { width: 85%; } .tks-bar-isi.p-90 { width: 90%; } .tks-bar-isi.p-95 { width: 95%; } .tks-bar-isi.p-100 { width: 100%; }
.tks-riwayat-atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tks-riwayat-atas h2 { margin: 0; }
.tks-tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.tks-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; color: var(--text); text-decoration: none; font-weight: var(--fw-bold); font-size: 13px; }
.tks-tab:hover { background: var(--gold-soft); text-decoration: none; }
.tks-tab[aria-current="page"] { background: var(--hitam); color: var(--gold-2); }
.tks-daftar { display: flex; flex-direction: column; gap: var(--sp-3); }
.tks-baris { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); border: 1px solid var(--border); border-radius: 16px; padding: var(--sp-4); min-width: 0; }
.tks-info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tks-judul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tks-judul b { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.tks-dipakai { display: inline-flex; align-items: center; font-size: 12px; font-weight: var(--fw-bold); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--brand-gold); color: var(--accent-ink); }
.tks-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tks-chip { font-size: 12px; font-weight: var(--fw-semibold); padding: 5px 10px; border-radius: 99px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); }
.tks-chip.ok { background: var(--hitam); border-color: var(--hitam); color: #FFFFFF; }
.tks-maju { flex: 0 1 200px; min-width: 160px; display: flex; flex-direction: column; gap: var(--sp-2); font-size: 13px; font-weight: var(--fw-bold); }
.tks-aksi { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.tks-aksi .tombol-kecil { min-height: 44px; }
.tks-pilih { margin: 0; }
.tks-pilih .tombol { width: 100%; }
.tks-kosong { margin: 0; padding: var(--sp-4); text-align: center; color: var(--text-muted); }
.tks-beda { border-color: var(--brand-gold); }
.tks-isi-atas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tks-isi-nama { min-width: 0; flex: 1 1 320px; }
.tks-isi-nama h1 { overflow-wrap: anywhere; }
.tks-isi-maju { flex: 0 1 320px; min-width: min(100%, 260px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.tks-ganti { margin-top: var(--sp-2); }
.tks-form-nama { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.tks-form-nama label { flex: 1 0 100%; font-size: 13px; color: var(--text-muted); }
.tks-form-nama input { flex: 1 1 220px; min-height: 48px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0 12px; font: inherit; min-width: 0; }
.tks-alat-daftar { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); }
.tks-alat { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.tks-alat.berikut { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold); }
.tks-alat b { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.tks-alat .tombol { margin-top: auto; width: 100%; box-sizing: border-box; }
.tks-alat-atas { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.tks-status { font-size: 12px; font-weight: var(--fw-bold); padding: 4px 10px; border-radius: 99px; background: var(--pill-kunci-bg); color: var(--pill-kunci-fg); }
.tks-status.ok { background: var(--hitam); color: var(--gold-2); }
.tks-status.berikut { background: var(--gold-soft); color: var(--accent-ink); }
.tks-status.info { background: var(--info-bg); color: var(--info); }
.tks-ajakan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); background: var(--hitam); color: #FFFFFF; border-radius: 18px; padding: var(--sp-4) var(--sp-5); box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.tks-ajakan > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.tks-ajakan span { font-size: 13px; color: #CFCAC0; }
@media (max-width: 520px) {
  .tks-mulai, .tks-lanjut { padding: var(--sp-4); border-radius: 18px; }
  .tks-baris { flex-direction: column; align-items: stretch; }
  .tks-maju { flex-basis: auto; min-width: 0; }
  .tks-aksi .tombol, .tks-ajakan .tombol { width: 100%; }
  .tks-tabs { width: 100%; }
  .tks-tab { flex: 1 1 auto; justify-content: center; }
}
.kartu-prompter { border-color: var(--prompter-garis); }
.langkah-prompter { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); font-size: 14px; }
.teks-prompter { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-3); background: var(--surface-raised); color: var(--text); margin-top: var(--sp-2); }
.contoh-terisi summary { font-weight: var(--fw-semibold); }
.isian-tabel { border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-3); margin: 0 0 var(--sp-4); min-width: 0; }
.isian-tabel legend { font-weight: var(--fw-semibold); font-size: 14px; padding: 0 var(--sp-1); }
.tabel-isian { border-collapse: collapse; width: 100%; min-width: 520px; }
.tabel-isian th { font-size: 11.5px; text-align: left; color: var(--text-muted); padding: var(--sp-1); }
.tabel-isian td { padding: 3px; }
.tabel-isian input, .tabel-isian select { width: 100%; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 var(--sp-2); font: inherit; font-size: 14px; background: var(--surface); color: var(--text); }
.gul { overflow-x: auto; }
.peta-langkah { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.langkah-peta { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--border); border-radius: 12px; }
.langkah-peta p { margin: var(--sp-1) 0 0; color: var(--text-muted); }
.lembar-a4 { max-width: 794px; margin: 0 auto; padding: var(--sp-6) var(--sp-5); background: #FFFFFF; color: #141210; }
.lb-atas { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-bottom: 2px solid var(--brand-gold); padding-bottom: var(--sp-3); }
.lb-atas div { text-align: right; display: grid; font-size: 12px; }
.lembar-a4 h1 { font-size: 22px; margin: var(--sp-4) 0 var(--sp-1); }
.lb-nama { color: #444444; margin-bottom: var(--sp-4); }
.lb-kotak { border: 1px solid #9A9A9A; border-radius: 6px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); break-inside: avoid; }
.lb-kotak h3 { margin: 0 0 var(--sp-1); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #8F6A2F; }
.lb-kotak div { font-size: 13.5px; min-height: 18px; }
.lb-tabel { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.lb-tabel th, .lb-tabel td { border: 1px solid #BDBDBD; padding: 3px 6px; text-align: left; }
.lb-kaki { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); font-size: 11px; color: #555555; }
@media print {
  @page { size: A4; margin: 12mm; }
  .pita-uji, .lompat, .tanpa-cetak { display: none !important; }
  body { background: #FFFFFF; }
  .lembar-a4 { padding: 0; max-width: none; }
}


/* ---------- Bank SKKNI ---------- */
.daftar-unit-cocok { list-style: none; padding: 0; margin: var(--sp-1) 0 var(--sp-2); display: grid; gap: var(--sp-1); font-size: var(--fs-small); line-height: var(--lh-small); }
.daftar-unit-cocok b { margin-right: var(--sp-1); }
.nav-halaman { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0; }
.tautan-pdf { overflow-wrap: anywhere; }

/* ---------- Kang Trisna - AI (Layar 7) ---------- */
.kt-kepala { display: flex; align-items: center; gap: var(--sp-2); }
.kt-kepala h1 { margin: 0; }
.kt-tagline { margin: 0; color: var(--accent-ink); font-weight: 600; font-size: var(--fs-small); }
.kt-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; }
.kt-avatar-besar { width: 56px; height: 56px; }
.kt-tata { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); }
.kt-obrolan { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.kt-pesan { display: flex; gap: var(--sp-2); align-items: flex-start; }
.kt-pesan .kt-isi { background: var(--gelembung-ai); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); max-width: 100%; overflow-wrap: anywhere; }
.kt-pesan .kt-isi p { margin: 0 0 var(--sp-1); }
.kt-pesan .kt-isi p:last-child { margin-bottom: 0; }
.kt-peserta { justify-content: flex-end; }
.kt-peserta .kt-isi { background: var(--gelembung-saya); color: var(--gelembung-saya-fg); border-color: var(--gelembung-saya); }
.kt-peserta .kt-isi .redup { color: var(--gelembung-saya-redup); }
.kt-gagal .kt-isi { border-color: var(--stop); }
.kt-nama { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.pill-jenis { background: var(--gold-100, #f6eedd); color: #000; }
.kt-sumber { margin-top: var(--sp-1); }
.kt-sumber ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pill-sumber { background: var(--pill-sumber-bg); color: var(--text); font-size: var(--fs-small); white-space: normal; }
.kt-kartu { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px dashed #C39241; border-radius: 10px; }
.kt-kartu p { margin: var(--sp-1) 0; }
.kt-samping { display: grid; gap: var(--sp-2); }
.kt-daftar { list-style: none; padding: 0; margin: 0 0 var(--sp-1); display: grid; gap: 6px; font-size: var(--fs-small); }
.kt-daftar li.aktif a { font-weight: 700; }
.kt-form textarea { width: 100%; }
.kt-konteks { margin: 0 0 var(--sp-1); }
@media (max-width: 900px) { .kt-tata { grid-template-columns: 1fr; } }

/* T7: logo dan gambar pengganti dari admin bisa beda rasio; tinggi mengikuti lebar (tidak gepeng). */
.masuk-kiri .logo-ft, .masuk-kiri .logo-am, .lb-atas img, .lb-kaki img { height: auto; }
/* T7: halaman admin Gambar aplikasi */
.kartu-gambar { display: grid; gap: var(--sp-2); align-content: start; }
.kartu-gambar .pratinjau { display: flex; align-items: center; justify-content: center; min-height: 140px; max-height: 260px; padding: var(--sp-2); border: 1px solid var(--gray-700); border-radius: 12px; background: #FFFFFF; overflow: hidden; }
.kartu-gambar .pratinjau-gelap { background: var(--hitam); }
.kartu-gambar .pratinjau img { max-width: 100%; max-height: 240px; width: auto; height: auto; display: block; }
/* T7: unggah video bunny.net */
.uv-status progress { width: 100%; height: 14px; accent-color: var(--brand-gold); }
/* Atribut hidden selalu menang atas display milik kelas (misalnya .tombol inline-flex). */
[hidden] { display: none !important; }

/* T8 F9: butir survei yang belum lengkap ditandai (jawaban lain tetap terisi). */
.butir-survei { scroll-margin-top: 80px; }
.butir-survei.belum-dijawab { border-left: 3px solid var(--accent); padding-left: var(--sp-3); }
.butir-survei .tanda-kurang { margin: 0 0 var(--sp-1); font-size: 13px; font-weight: var(--fw-bold); color: var(--accent-ink); }

/* T8 F1: peta perjalanan kelas di HP (lebar 360–414 px) jadi daftar 1–5 di bawah ilustrasi; tidak ada label yang
   keluar layar atau perlu digeser. */
@media (max-width: 639px) {
  .ilus-bungkus { overflow: visible; }
  .ilus-dalam { min-width: 0; display: grid; gap: var(--sp-2); }
  .ilus { max-height: 170px; object-fit: cover; object-position: center 65%; }
  .penanda { position: static; max-width: none; width: 100%; box-shadow: none; }
  .penanda > span:last-child { min-width: 0; }
  .penanda b, .penanda small { overflow-wrap: anywhere; }
}

/* T8 F2: kepala halaman HP satu baris (menu, logo, kuota, lonceng, avatar). Kata "Kuota AI" disembunyikan di layar
   sempit; arti lengkapnya tetap di aria-label. */
@media (max-width: 639px) {
  .kepala-hal { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .kepala-hal .logo-hp { margin-right: auto; }
  .kepala-hal .chip-kuota { padding: 0 var(--sp-2); }
  .logo-hp img { width: 96px; }
  .menu-hp > summary, .lonceng { width: 38px; height: 38px; }
}
@media (max-width: 439px) {
  .chip-kuota .chip-label { display: none; }
}

/* T8 F6: pilihan perjalanan kelas untuk akun multi paket */
.pilih-paket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pilih-paket a.pill { font-size: 12.5px; padding: 6px 12px; min-height: 32px; text-decoration: none; }

/* T8 layar: tawaran toolkit per pertanyaan sesi, tautan Ubah di ringkasan, pesan unit belum terverifikasi */
.kartu-toolkit { border: 1.5px solid var(--border); margin: var(--sp-3) 0; }
.kv-toolkit { margin: 0 0 var(--sp-2); }
.kv-toolkit .kv { display: block; }
.kv-toolkit .kv dt { color: var(--text-muted); margin-bottom: var(--sp-1); }
.kv-toolkit .kv dd { margin: 0; }
.teks-toolkit { white-space: pre-line; margin: 0 0 var(--sp-2); }
.tombol-kecil { font-size: 12.5px; padding: 6px 12px; min-height: 32px; }
.tautan-ubah { white-space: nowrap; }
.unit-belum { margin: var(--sp-3) 0; }

/* ---------- T9 butir 6: rapikan menyeluruh (dua mode, laptop dan HP 360 px) ---------- */
/* Fokus mengikuti bentuk komponen (cincin fokus global memakai sudut 6px, jadi tombol pil dan kartu tidak berubah bentuk). */
.tombol:focus-visible, .chip-kuota:focus-visible, .pill:focus-visible { border-radius: var(--radius-pill); }
a.kartu:focus-visible, .kartu-fitur:focus-visible, .kartu-program:focus-visible, .kartu-angka:focus-visible { border-radius: var(--radius-card); }
.nav .anak a:focus-visible { border-radius: 10px; }
.tombol-emas-kecil:focus-visible, .ps-tautan:focus-visible, .logo-samping:focus-visible, .kts a:focus-visible { box-shadow: 0 0 0 2px var(--sb-bg), 0 0 0 4px var(--brand-gold); border-radius: 10px; }
/* tombol: keadaan tekan sama di semua jenis */
.tombol:active, .tombol-emas-kecil:active, .keluar-samping button:active, .pilih-tema button:active, .nav-grup-tombol:active, .nav a:active { transform: translateY(1px); }
.tombol-kedua:hover { background: var(--gold-tint); border-color: var(--brand-gold); }
/* kartu hitam di area isi tetap punya tepi di mode gelap */
.hero, .ikon-fitur, .tk-ic, .ava, .pemutar { box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.masuk-kartu { border: 1px solid var(--border); }
/* kepala halaman: tinggi dan perataan tetap */
.kepala-hal { min-height: 60px; }
@media (min-width: 1024px) { .kepala-hal { padding: var(--sp-2) var(--sp-6); justify-content: flex-end; } }
/* judul halaman dan eyebrow: jarak seragam */
.isi > .eyebrow + h1, .isi > .eyebrow + .kt-kepala { margin-top: var(--sp-1); }
/* menu samping di HP 360 px: laci sedikit lebih lebar, kaki tidak terpotong */
@media (max-width: 400px) {
  .menu-hp-isi { width: min(320px, 92vw); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .samping-kaki { flex-wrap: wrap; }
}
/* gerak dikurangi: panah menu tidak berputar beranimasi */
@media (prefers-reduced-motion: reduce) {
  .nav-panah { transition: none; }
  .tombol:active, .tombol-emas-kecil:active, .keluar-samping button:active, .pilih-tema button:active,
  .nav-grup-tombol:active, .nav a:active { transform: none; }
}

/* ---------- T9 perbaikan temuan pemeriksa (keluaran/t9/periksa-a, periksa-b) ---------- */
/* B3: cincin fokus papan ketik di komponen yang punya bayangan sendiri (aturan ini harus paling bawah) */
a.kartu:focus-visible, .kartu-angka:focus-visible, .tk:focus-visible, .penanda:focus-visible, .tab-bukti a:focus-visible,
.modul-baris:focus-visible, .akses-cepat a:focus-visible, .tm:focus-visible { box-shadow: var(--focus-ring); }
/* B9: menu samping dan laci HP selalu gelap, termasuk bilah gulirnya */
.samping, .menu-hp-isi { color-scheme: dark; }
/* B14: chip kuota dan lonceng tidak bergaris bawah saat disorot (sama dengan komponen lain) */
.chip-kuota:hover, .lonceng:hover { text-decoration: none; filter: brightness(0.97); }
/* B16: laci menu HP (di dalam kepala halaman) selalu di atas menu bawah, juga di browser tanpa :has() */
.kepala-hal { z-index: 30; }
/* A10: avatar pengganti dari admin yang tidak persegi tidak gepeng */
.ava-kt, .kt-avatar { object-fit: cover; }
/* remah roti: eyebrow halaman anak menaut ke halaman kelompoknya (FastTrack 5.0, BNSP Certification, Documents) */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
/* A2: peta perjalanan memakai daftar 1-5 di bawah ilustrasi kalau kartunya kurang dari 860 px (jendela laptop
   yang diperkecil, zoom 125%, tablet), supaya label 4 dan 5 tidak terpotong atau saling menimpa. */
.perjalanan .ilus-bungkus { container-type: inline-size; }
@container (max-width: 859px) {
  .ilus-dalam { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); }
  .ilus { grid-column: 1 / -1; max-height: 240px; object-fit: cover; object-position: center 65%; }
  .penanda { position: static; width: auto; max-width: none; box-shadow: none; }
  .penanda b, .penanda small { overflow-wrap: anywhere; }
}
/* L1: panel progres sesi bukti tugas tidak tertutup kepala halaman yang melekat */
@media (min-width: 1024px) {
  .ruang-wawancara > .panel-progres { top: calc(60px + var(--sp-4)); }
  .pita-uji + .lompat + .aplikasi .ruang-wawancara > .panel-progres { top: calc(92px + var(--sp-4)); }
}
/* L2, L4: di HP formulir chat dan kaki halaman tidak tertutup menu bawah */
@media (max-width: 1023px) {
  .ada-menu-bawah .form-chat { bottom: calc(57px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
  .ada-menu-bawah .isi { padding-bottom: var(--sp-7); }
  .ada-menu-bawah .kaki { padding-bottom: calc(var(--sp-4) + 64px + env(safe-area-inset-bottom, 0px)); }
}
/* T17s (keputusan Trisna 81a): "Mulai dari nol" di ATAS halaman sesi, ringkasan, dan hasil, kecil tetapi disorot.
   Latar emas lembut + garis emas; teks hitam/terang biasa (bukan putih di atas emas). Tombolnya tombol garis kecil di atas
   latar kartu (teks emas tua 6,0 : 1 di mode terang). Kontras dicek tests/kontras_t9.py. */
.pita-mulai-nol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
                  background: var(--gold-soft); color: var(--text); border: 1.5px solid var(--accent); border-radius: 12px;
                  padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); }
.pita-mulai-nol p { margin: 0; flex: 1 1 260px; }
.pita-mulai-nol .tombol-kedua { background: var(--surface); flex: none; }
.pita-mulai-nol .tombol-kedua:hover { background: var(--gold-tint); }
/* T17s B2 (keputusan Trisna 81c): dua jalan menjawab, "Tulis sendiri" atau "Minta rekomendasi AI". Kartu usulan memakai
   latar kartu dan garis emas; teks biasa (bukan putih di atas emas). */
.dua-jalan { margin: var(--sp-2) 0; }
.dua-jalan p { margin: 0 0 var(--sp-2); }
.kartu-rekomendasi { background: var(--surface); color: var(--text); border: 1.5px solid var(--accent); border-radius: 12px;
                     padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.kartu-rekomendasi p { margin: 0 0 var(--sp-2); white-space: pre-wrap; }
.jalan-jawab { margin: var(--sp-2) 0 var(--sp-1); }
/* T17q (keputusan Trisna 87 a): kartu konteks di setiap pertanyaan: Untuk apa, Contoh jawaban, Nanti tampil seperti ini.
   Teks gelap di atas latar terang dengan garis kiri emas (brand kit: tidak ada teks putih di atas emas). */
.kartu-konteks { margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--accent);
                 background: var(--surface); border-radius: 0 10px 10px 0; }
.kartu-konteks .kv { display: block; margin: 0 0 var(--sp-1); }
.kartu-konteks .kv:last-child { margin-bottom: 0; }
.kartu-konteks dt { font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
.kartu-konteks dd { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
/* T17q (keputusan 84 S4/S5): jawaban yang tinggal diklik; tombol boleh dua baris di HP */
.pilihan-alternatif { margin: var(--sp-2) 0; }
.pilihan-alternatif .tombol-alternatif { white-space: normal; text-align: left; height: auto; line-height: 1.35;
                                         padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.form-belum-paham { margin: var(--sp-1) 0 var(--sp-2); }

/* ---------- T17e: periksa dan edit dokumen (keputusan 85) ---------- */
.kertas-edit .unit-edit, .petunjuk-edit .unit-edit { color: inherit; text-decoration: underline; text-decoration-color: var(--brand-gold, #C39241);
  text-decoration-thickness: 2px; text-underline-offset: 3px; border-radius: 3px; }
.kertas-edit a.unit-edit:hover, .kertas-edit a.unit-edit:focus { background: #FBF1DC; outline: 2px solid #C39241; outline-offset: 1px; }
.kertas-edit .unit-pilih { background: #F6E3B8; }
.kertas-edit .unit-tetap { background: #ECECEC; }
.gulir-tabel { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gulir-tabel .dok-tabel { min-width: 480px; }
.panel-edit { border: 2px solid #C39241; scroll-margin-top: 72px; }
.kutip-unit { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 4px solid #C39241; background: var(--surface-muted);
  white-space: normal; overflow-wrap: anywhere; }
.kartu-sumber textarea { width: 100%; }
.sebelum { text-decoration: line-through; color: var(--text-muted); }
.sesudah { font-weight: var(--fw-semibold); }
.dok-slide { border: 1px solid #9A9A9A; padding: var(--sp-3); margin: var(--sp-3) 0; }
/* T19d R1 (keputusan 91): slide prompter Bukti 8, isian peserta merah, penjelasan abu-abu (sama dengan di file) */
.dok-prompter .prompter-merah { color: #D32F2F; font-weight: var(--fw-semibold); }
.dok-prompter .prompter-abu { color: #6B6B6B; }
.dok-prompter .prompter-penjelasan { font-size: 0.9em; margin-top: 0; }
@media (max-width: 480px) {
  .kertas-edit { padding: var(--sp-3); }
  .gulir-tabel .dok-tabel { font-size: 12px; }
}

/* T20b (keputusan Trisna 115, 116): lengkapi dengan AI, dua jalan edit, tanda Diisi AI, cek mutu, riwayat.
   Tampilan sementara sampai prototype v2 CoS disetujui Trisna (pemeriksa_2026-11-14/115_tampilan-periksa-edit.md). */
.kotak-lengkapi { display: block; }
.kotak-lengkapi h2 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.pilihan-edit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pilihan-edit .kartu { margin: 0; }
.pilihan-edit h2 { margin-top: 0; font-size: 1rem; }
@media (max-width: 640px) { .pilihan-edit { grid-template-columns: 1fr; } }
.form-sebaris { display: inline-block; margin: 0 0 0 var(--sp-2); }
.form-sebaris .aksi-form { margin: 0; }
.kertas-edit a.unit-ai { text-decoration-style: dotted; background: #FBF1DC; }
.kertas-edit a.unit-ai::after, .petunjuk-edit .unit-ai::after { content: "AI"; font-size: 0.65em; font-weight: 700;
  margin-left: 3px; padding: 0 3px; border: 1px solid var(--brand-gold, #C39241); border-radius: 3px; color: #000;
  vertical-align: super; }
.mutu-bukti h2 { margin-top: 0; font-size: 1rem; }
.daftar-mutu { list-style: none; padding: 0; margin: 0; }
.daftar-mutu li { padding: 4px 0; }
.daftar-mutu .mutu-kurang strong { color: var(--accent-ink, #7a5a1e); }
.bilah-lengkapi { width: 100%; height: 14px; accent-color: var(--brand-gold, #C39241); }

/* ---------- T20b tampilan v3 (prototype CoS versi 3 layar 1-4, disetujui Trisna 15 Nov 01.2x; keputusan 115, 116, 118).
   Tanpa atribut style= (CSP). Kartu memakai token (ikut mode gelap); kertas dokumen selalu terang (.kertas). ---------- */
.v3-alis { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent-ink); text-transform: uppercase; margin: 0 0 var(--sp-1); }
.v3-kepala h1 { margin: 0 0 var(--sp-2); font-weight: 800; letter-spacing: -0.3px; }
.v3-lead { font-size: 15px; color: var(--text-muted); max-width: 760px; line-height: 1.6; margin: 0 0 var(--sp-4); }
.v3-balik { margin: 0 0 var(--sp-2); font-size: 14px; font-weight: 600; }
.v3-kartu { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; }
.v3-kartu > :last-child { margin-bottom: 0; }
.v3-kartu-gelap { background: #111111; color: #FFFFFF; border: 1px solid var(--garis-gelap-isi); border-radius: 18px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px; }
.v3-kartu-gelap h2, .v3-kartu-gelap h3 { color: #FFFFFF; margin: 0; font-size: 18px; font-weight: 800; }
.v3-kartu-gelap p { color: #DADADA; margin: 0; font-size: 14px; line-height: 1.6; }
.v3-kartu-gelap .v3-alis { color: #E2B867; }
.v3-kartu-gelap .kecil { color: #BDBDBD; }
.v3-kartu-gelap a { color: #E2B867; }
.v3-kartu-gelap .aksi-form { margin: 0; }
.v3-kartu-gelap .bar { background: #333333; }
.v3-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin: 0 0 var(--sp-4); }
.v3-ringkas .v3-kartu { display: flex; flex-direction: column; gap: 14px; }
.v3-angka { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.v3-angka b { font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.v3-angka span { font-size: 16px; font-weight: 700; color: var(--text-muted); }
.v3-segmen { display: flex; gap: 5px; }
.v3-segmen i { flex: 1 1 0; height: 10px; border-radius: 99px; background: #D6D1C6; }
.v3-segmen i.seg-siap { background: #2E7D4F; } .v3-segmen i.seg-ai { background: #C39241; } .v3-segmen i.seg-jalan { background: #E6D3AE; }
.v3-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0; padding: 0; list-style: none; }
.v3-legenda li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.v3-legenda i { width: 10px; height: 10px; border-radius: 99px; display: inline-block; background: #D6D1C6; }
.v3-legenda i.seg-siap { background: #2E7D4F; } .v3-legenda i.seg-ai { background: #C39241; }
.v3-kunci-unduh { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-raised); border-radius: 12px; padding: 10px 14px;
  font-size: 13px; color: var(--text-muted); font-weight: 600; line-height: 1.5; }
.v3-kunci-unduh svg { flex: 0 0 16px; margin-top: 2px; }
.v3-kunci-unduh p, .v3-kunci-unduh div { margin: 0; }
.v3-kurang summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.v3-kurang ul { font-size: 13px; margin: var(--sp-2) 0 0; }
.v3-saring { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-4); }
.v3-saring a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.v3-saring a[aria-current="true"] { background: var(--hitam); color: #FFFFFF; border-color: var(--hitam); }
.v3-grid-dok { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 0 0 var(--sp-5); }
.v3-dok { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.v3-dok-atas { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.v3-dok-no { font-size: 12px; font-weight: 800; color: var(--accent-ink); letter-spacing: 1px; }
.v3-dok h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
.v3-lengkap-atas { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.v3-dok-ket { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.v3-dok-periksa { margin: 0; color: var(--text-muted); }
.v3-dok-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; align-items: center; }
.v3-dok-aksi form, .v3-dok-aksi .aksi-form { margin: 0; }
.v3-dok-aksi .tombol, .v3-bagian .tombol { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.bar-hijau i { background: #2E7D4F; } .bar-emas i { background: #C39241; }
.v3-pil { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: #F1EFEA; color: #333333; white-space: nowrap; }
.v3-pil.pil-siap { background: #E6F2EA; color: #1B6B3A; } .v3-pil.pil-ai { background: #F6EEDF; color: #6B4E14; }
.v3-pil.pil-perlu { background: #FBE9E7; color: #A1261B; } .v3-pil.pil-jalan { background: #F6EEDF; color: #7A5A1C; }
.v3-pil.pil-bersama { background: #F1EEF7; color: #3F3466; }
.tombol-hitam { background: var(--hitam); color: #FFFFFF; border: 1px solid var(--garis-gelap-isi); }
.tombol-hitam:hover { background: #2A2A2A; color: #FFFFFF; }
.tombol-garis-emas { background: var(--surface); color: var(--text); border: 1.5px solid #C39241; }
.tombol-garis-emas::before, .v3-dok-aksi .tombol-kedua::before { content: "✦"; color: #C39241; }
.tombol-garis-terang { background: transparent; color: #FFFFFF; border: 1px solid #555555; }
.v3-catatan-kaki { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
/* Layar 2: periksa satu dokumen */
.v3-dok-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 var(--sp-4); }
.v3-dok-kepala h1 { margin: 0 0 var(--sp-2); font-weight: 800; }
.v3-kunci-kecil { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; margin: 0; }
.v3-pilihan { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin: 0 0 var(--sp-4); }
.v3-pilihan .v3-kartu { display: flex; flex-direction: column; gap: 12px; }
.v3-pilihan h2 { margin: 0; font-size: 18px; font-weight: 800; }
.v3-pilihan p { margin: 0; font-size: 14px; line-height: 1.6; }
.v3-pilihan .aksi-form { margin: 0; }
.v3-ikon-kotak { width: 40px; height: 40px; border-radius: 12px; background: #2A2418; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; color: #C39241; }
.v3-ikon-kotak.terang { background: var(--surface-raised); color: var(--text); }
.v3-judul-ikon { display: flex; align-items: center; gap: 12px; }
.v3-judul-ikon .v3-alis { margin: 0; font-size: 11px; }
.v3-dua-kolom { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.v3-dua-kolom > .v3-utama { flex: 999 1 600px; min-width: 0; }
.v3-dua-kolom > .v3-samping { flex: 1 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.v3-baris-judul { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.v3-tanda-warna { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-muted); font-weight: 600; margin: 0; padding: 0; list-style: none; }
.v3-tanda-warna li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.v3-tanda-warna i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid #CFC9BC; background: #FFFFFF; }
.v3-tanda-warna i.w-kunci { background: #F7F6F2; } .v3-tanda-warna i.w-ai { background: #FBF3E2; border-color: #E0C78F; }
.v3-tanda-warna i.w-kosong { background: #FDF1EF; border-color: #EBC3BD; } .v3-tanda-warna i.w-edit { background: #FFFFFF; border-color: #C39241; }
.v3-kertas .kertas { border: 0; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.07); padding: clamp(20px, 4vw, 56px); max-width: none; }
.v3-kertas .kertas-edit a.unit-ai { background: #F6EEDF; text-decoration: none; border-radius: 4px; padding: 0 2px; }
.v3-kertas mark.wajib-isi { background: #FDF6F5; color: #A1261B; border: 1.5px dashed #E3A39B; border-radius: 6px; padding: 1px 4px; font-weight: 600; }
.v3-cincin-baris { display: flex; align-items: center; gap: 16px; }
.v3-cincin-baris p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.v3-cincin { flex: 0 0 84px; }
.v3-cincin .jalur { stroke: #EEEBE4; } .v3-cincin .isi { stroke: #C39241; } .v3-cincin.siap .isi { stroke: #1B6B3A; }
.v3-cincin text { fill: var(--text); font-family: inherit; font-size: 17px; font-weight: 800; }
.v3-garis { height: 1px; background: var(--border); border: 0; margin: 0; }
.v3-mutu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.v3-mutu li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.v3-mutu .mutu-ikon { flex: 0 0 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 13px; font-weight: 800; background: #1B6B3A; }
.v3-mutu li.mutu-kurang .mutu-ikon { background: #C2412D; }
.v3-mutu b { display: block; font-size: 14px; } .v3-mutu .ket { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.v3-linimasa { list-style: none; padding: 0; margin: 0; }
.v3-linimasa > li { display: flex; gap: 12px; margin: 0; }
.v3-linimasa .titik { flex: 0 0 14px; display: flex; flex-direction: column; align-items: center; }
.v3-linimasa .titik::before { content: ""; width: 12px; height: 12px; border-radius: 999px; background: #BDB7AA; margin-top: 4px; }
.v3-linimasa .titik::after { content: ""; flex: 1 1 auto; width: 2px; background: var(--border); margin: 4px 0; }
.v3-linimasa li.oleh-ai .titik::before { background: #C39241; } .v3-linimasa li.oleh-anda .titik::before { background: #1B6B3A; }
.v3-linimasa .isi-riwayat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; font-size: 12px;
  line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.v3-linimasa .isi-riwayat b { font-size: 13px; color: var(--text); } .v3-linimasa .judul-riwayat { font-size: 13px; font-weight: 600; color: var(--text); }
.v3-linimasa .ikut { color: #3F3466; font-weight: 600; }
.v3-linimasa form, .v3-linimasa .aksi-form { margin: 0; }
.v3-linimasa .tombol-teks { min-height: 32px; font-size: 12px; padding: 0; }
.v3-samping h2 { margin: 0; font-size: 16px; }
.v3-catatan { margin: 0 0 var(--sp-4); } .v3-catatan > summary { cursor: pointer; font-weight: 700; margin-bottom: var(--sp-2); }
/* Layar 3 dan 4: mode Edit */
.v3-bilah-edit { background: #000000; color: #FFFFFF; border-radius: 14px; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin: 0 0 var(--sp-3); }
.v3-bilah-edit a { color: #FFFFFF; }
.v3-bilah-kiri, .v3-bilah-kanan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-bilah-kiri b { font-size: 15px; }
.v3-bilah-kembali { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 14px; text-decoration: none; }
.v3-bilah-kembali::before { content: "‹"; color: #C39241; font-size: 22px; margin-right: 6px; }
.v3-status-simpan { font-size: 12px; color: #BDBDBD; }
.v3-status-simpan::before { content: "✓ "; color: #C39241; }
.v3-status-simpan.gagal-simpan { color: #FFB4AA; } .v3-status-simpan.gagal-simpan::before { content: "! "; }
.v3-bilah-edit .tombol { min-height: 44px; border-radius: 10px; font-size: 13px; padding: 0 16px; }
.v3-bilah-edit form, .v3-bilah-edit .aksi-form { margin: 0; }
.v3-pindah-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 var(--sp-3); }
.v3-pindah-baris > span { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.v3-pindah { display: inline-flex; background: var(--surface); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.v3-pindah a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 9px; font-weight: 700;
  font-size: 13px; color: var(--text); text-decoration: none; }
.v3-pindah a[aria-current="page"], .v3-pindah a[aria-current="true"] { background: var(--hitam); color: #FFFFFF; }
.v3-pindah.penuh { display: flex; } .v3-pindah.penuh a { flex: 1 1 0; }
.v3-edit-tata { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.v3-edit-tata > .v3-utama { flex: 999 1 640px; min-width: 0; max-width: 1000px; }
.v3-edit-tata > .v3-samping { flex: 1 1 300px; min-width: 0; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.v3-ket-layar { background: var(--surface); border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.5; color: var(--text-muted);
  font-weight: 600; margin: 0 0 var(--sp-3); }
.v3-ket-layar p { margin: 0; }
.kertas .isian-sel { position: relative; display: inline; }
.kertas .kertas-isian { font: inherit; color: var(--on-paper); background: transparent; border: 0; outline: 0; resize: none; border-radius: 6px;
  padding: 2px 6px; line-height: inherit; box-shadow: inset 0 -2px 0 #E0C78F; }
.kertas textarea.kertas-isian { display: block; width: 100%; overflow: hidden; min-height: 2.2em; }
.kertas input.kertas-isian { display: inline-block; max-width: 100%; }
.kertas .kertas-isian:hover { background-color: #FAF9F6; }
.kertas .kertas-isian:focus { box-shadow: 0 0 0 2px #C39241; background-color: #FFFFFF; }
.kertas .isian-ai .kertas-isian { background: #FBF3E2; }
.kertas .isian-sel.sedang-simpan .kertas-isian { box-shadow: inset 0 -2px 0 #C39241; }
.kertas .isian-sel.gagal-simpan .kertas-isian { box-shadow: 0 0 0 2px #C2412D; }
.tanda-ai { display: inline-block; font-size: 9px; font-weight: 800; color: #6B4E14; background: #EAD9B5; padding: 1px 5px; border-radius: 4px;
  vertical-align: top; margin-left: 2px; line-height: 1.4; }
.dok-tabel td.sel-ai .tanda-ai { position: absolute; top: 2px; right: 2px; }
.dok-tabel td.sel-kunci { background: #F7F6F2; color: #222222; }
.dok-tabel td.sel-kosong { background: #FDF1EF; }
.dok-tabel td.sel-ai { background: #FBF3E2; position: relative; }
.dok-tabel td.sel-edit { background: #FFFFFF; }
.dok-tabel td.sel-ai .kertas-isian, .dok-tabel td.sel-edit .kertas-isian { box-shadow: none; padding: 0; }
.kertas .teks-kosong { background: #FDF1EF; border-radius: 4px; }
/* T21 (prototype v3 layar 3 dan 4): bagian kosong diketik langsung di kertas (merah muda bergaris putus, petunjuk miring
   abu seperti prototype); data bersama ungu (prototype: "Angka berwarna ungu adalah data bersama"). Hanya di aplikasi,
   tidak tercetak (keputusan 84 S7). Warna kertas tetap terang di kedua mode (kertas = halaman dokumen). */
.kertas .kertas-isian.isian-kosong { background: #FDF6F5; box-shadow: inset 0 0 0 1.5px #E3A39B; border-radius: 6px; }
.kertas .kertas-isian.isian-kosong:focus { box-shadow: 0 0 0 2px #C39241; background-color: #FFFFFF; }
.kertas .kertas-isian::placeholder, .v3-bagian textarea::placeholder { color: #8A8478; font-style: italic; opacity: 1; }
.kertas select.kertas-isian { min-height: 32px; max-width: 100%; cursor: pointer; }
.kertas textarea.kertas-isian.isian-kosong { min-height: 4.2em; }
.kertas .isian-bersama .kertas-isian { color: #3F3466; background: #F1EEF7; box-shadow: inset 0 -2px 0 #8C7FB5; font-weight: 700; }
.kertas .isian-bersama .kertas-isian:focus { box-shadow: 0 0 0 2px #8C7FB5; background-color: #FFFFFF; }
.dok-tabel td.sel-kosong .kertas-isian.isian-kosong { width: 100%; }
.v3-tanda-warna i.w-bersama { background: #F1EEF7; border-color: #8C7FB5; }
.v3-bagian textarea.isian-kosong, .v3-bagian select.isian-kosong { background: #FDF6F5; border: 1.5px dashed #E3A39B; color: #121212; }
.v3-bagian select { width: 100%; min-height: 44px; border: 1px solid var(--border-strong); border-radius: 12px; padding: 0 12px; font: inherit;
  font-size: 15px; background: var(--surface); color: var(--text); }
.v3-kolom.sel-kosong { color: #A1261B; }
.tombol-simpan-sel { display: none; margin: 4px 0 2px; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: #C39241; color: #000000;
  font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.isian-sel:focus-within .tombol-simpan-sel, .isian-sel.gagal-simpan .tombol-simpan-sel { display: inline-flex; align-items: center; }
.simpan-otomatis-aktif .isian-sel:focus-within .tombol-simpan-sel { display: none; }
.simpan-otomatis-aktif .isian-sel.gagal-simpan .tombol-simpan-sel { display: inline-flex; }
.v3-bagian { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column;
  gap: 10px; margin: 0 0 14px; }
.v3-bagian.garis-perlu { border-color: #EBC3BD; } .v3-bagian.garis-ai { border-color: #E0C78F; }
.v3-bagian-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.v3-bagian-kepala h3 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.v3-no { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-raised); font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.v3-bagian p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.v3-bagian .ungu { color: #4B3F78; font-weight: 600; }
.v3-bagian textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px;
  line-height: 1.65; resize: vertical; background: var(--surface); color: var(--text); }
.v3-bagian textarea.isian-ai { background: #FBF7EE; color: #121212; }
.v3-bagian form, .v3-bagian .aksi-form { margin: 0; }
.v3-bagian .aksi-form { margin-top: 8px; }
.v3-kolom-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.v3-kolom { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.v3-kolom .nilai-kunci { padding: 10px 12px; border-radius: 10px; background: #F7F6F2; color: #222222; font-size: 14px; font-weight: 500; line-height: 1.5;
  white-space: pre-line; }
.v3-kolom .nilai-kosong { padding: 10px 12px; border-radius: 10px; background: #FDF1EF; color: #A1261B; font-size: 13px; font-weight: 600; }
.v3-saran { background: var(--surface); border-radius: 14px; border-top: 4px solid #C39241; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.v3-saran h3 { margin: 0; font-size: 13px; font-weight: 800; }
.v3-saran p { margin: 0; font-size: 13px; line-height: 1.5; }
.v3-saran ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.v3-saran li { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.v3-saran .usul-isi { display: block; background: #FBF7EE; color: #1E1E1E; border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; }
.v3-saran .aksi-saran { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-saran .aksi-saran form, .v3-saran .aksi-form { margin: 0; }
.v3-saran .tombol { min-height: 42px; border-radius: 10px; font-size: 13px; padding: 0 14px; }
.v3-saran textarea { width: 100%; }
.v3-samping .panel-edit { margin: 0; }
.v3-bilah-judul { font-size: 15px; line-height: 1.3; margin: 0; color: #FFFFFF; font-weight: 800; }
.tombol-abaikan { background: var(--surface); color: var(--text); border: 1px solid #CFC9BC; }
.v3-saran-daftar { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 72px; }
.v3-kertas-edit .unit-banyak { background: #FFFFFF; }
@media (max-width: 640px) {
  .v3-ringkas, .v3-pilihan { grid-template-columns: 1fr; }
  .v3-kartu, .v3-kartu-gelap { padding: 18px; }
  .v3-angka b { font-size: 36px; }
  .v3-edit-tata > .v3-samping, .v3-dua-kolom > .v3-samping { max-width: none; flex-basis: 100%; }
  .v3-bilah-edit { border-radius: 10px; }
}

/* ===================== T22b: layar menjawab (keputusan Trisna 131-135, 140; prototype CoS versi 18) =====================
   Satu tempat menjawab: kartu pertanyaan (label, pertanyaan, CONTOH JAWABAN Kabur/Tajam), SATU kotak Jawaban Anda,
   pilihan cepat di bawahnya (mengisi kotak), satu tombol Kirim, tautan kecil. Riwayat jawaban dilipat; bilah atas
   menempel saat menggulir (kemajuan, Periksa ringkasan, Mulai dari nol dengan konfirmasi di bilah itu). */
.bilah-sesi { position: sticky; top: 60px; z-index: 20; background: var(--penanda-bg); border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px var(--bayang); margin: 0 0 var(--sp-4); border-radius: 0 0 12px 12px; }
.pita-uji + .lompat + .aplikasi .bilah-sesi { top: 92px; }
.bilah-isi { max-width: 1240px; margin: 0 auto; box-sizing: border-box; padding: 10px var(--sp-4); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 10px; }
.bilah-kemajuan { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bilah-kemajuan b { font-size: 14px; white-space: nowrap; }
.bilah-kemajuan .bar { width: 140px; height: 6px; margin: 0; }
.bilah-angka { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.bilah-tombol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bilah-tombol .tombol-kecil { min-height: 40px; border-radius: 10px; }
.mulai-nol-bilah > summary { list-style: none; }
.mulai-nol-bilah > summary::-webkit-details-marker { display: none; }
.tombol-nol { border: 1px solid #E3B4AC; background: #FDF3F1; color: #A1261B; }
.tombol-nol:hover { background: #FBE6E2; }
.konfirmasi-nol { position: absolute; left: 0; right: 0; top: 100%; max-width: 1240px; margin: 0 auto; box-sizing: border-box;
  padding: 0 var(--sp-4) 12px; }
.konfirmasi-nol > p, .konfirmasi-nol > .aksi-nol { background: var(--surface); }
.konfirmasi-nol > p { margin: 0; border: 2px solid #E3B4AC; border-bottom: 0; border-radius: 14px 14px 0 0; padding: 14px 16px 6px;
  font-size: 14px; line-height: 1.55; color: var(--text); }
.konfirmasi-nol > .aksi-nol { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; border: 2px solid #E3B4AC;
  border-top: 0; border-radius: 0 0 14px 14px; padding: 6px 16px 14px; box-shadow: 0 8px 24px var(--bayang); }
.aksi-nol .aksi-form { margin: 0; }
.aksi-nol .tombol { min-height: 44px; border-radius: 10px; }
.tombol-bahaya { background: #A1261B; color: #FFFFFF; border: 0; }
.tombol-bahaya:hover { background: #8A1F16; color: #FFFFFF; }

.kartu-tanya { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: 0 6px 24px var(--bayang); margin-bottom: var(--sp-4); }
.kartu-tanya > * { margin-top: 0; margin-bottom: 0; }
.tanya-label { margin: 0 0 -10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent-ink); }
.kartu-tanya h2.tanya { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 800; }
.contoh-jawaban { background: var(--peta-bg); border: 1px solid var(--emas-garis); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; }
.contoh-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.contoh-kepala .label-kecil { margin: 0; letter-spacing: 1.5px; }
.contoh-baris { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; }
.contoh-kabur { border-color: #F1D3CD; }
.contoh-tajam { border-color: #CFE3D5; }
.contoh-baris > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.contoh-baris p { margin: 0; }
.ikon-contoh { flex: 0 0 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.contoh-kabur .ikon-contoh { background: #C2412D; }
.contoh-tajam .ikon-contoh { background: #1B6B3A; }
.contoh-tanda { font-size: 12px; font-weight: 800; }
.contoh-kabur .contoh-tanda { color: #A1261B; }
.contoh-tajam .contoh-tanda { color: #1B6B3A; }
:root[data-tema="gelap"] .contoh-kabur .contoh-tanda { color: var(--stop-ink); }
:root[data-tema="gelap"] .contoh-tajam .contoh-tanda { color: var(--ok); }
.contoh-isi { font-size: 14px; line-height: 1.75; color: var(--text); overflow-wrap: anywhere; }
.contoh-alasan { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
mark.stabilo { color: #111111; border-radius: 4px; padding: 1px 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.stabilo-1, .unsur-1 { background: #F6E7C6; }
.stabilo-2, .unsur-2 { background: #DDE8F5; }
.stabilo-3, .unsur-3 { background: #E2F0E6; }
.stabilo-4, .unsur-4 { background: #F3E1EE; }
.legenda-unsur { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; margin: 2px 0 0; }
.legenda-unsur .unsur { padding: 3px 9px; border-radius: 999px; color: #111111; }
.contoh-penutup { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

.form-jawab { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.kirim-bawaan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.kotak-jawab { display: flex; flex-direction: column; gap: 10px; }
.kotak-jawab-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kotak-jawab-kepala label { font-size: 15px; font-weight: 800; margin: 0; }
.asal-jawab:empty { display: none; }
.asal-jawab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold-soft);
  color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.asal-jawab .lencana { font-size: 10px; padding: 1px 6px; }
.kotak-jawab textarea { width: 100%; box-sizing: border-box; min-height: 120px; padding: 14px 16px; border: 2px solid var(--border-strong);
  border-radius: 14px; resize: vertical; font-family: inherit; font-size: 16px; line-height: 1.7; color: var(--text); background: var(--surface); }
.kotak-jawab textarea:not(:placeholder-shown) { border-color: var(--accent); }
.kotak-jawab textarea[data-asal="ai"], .kotak-jawab textarea[data-asal="program"] { background: var(--surface-muted); }
.kotak-jawab textarea:focus { outline: 3px solid var(--brand-gold); outline-offset: 2px; }
.catatan-asal { margin: 0; }
.isi-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.isi-ai[hidden] { display: none; }
.tombol-ai { background: var(--surface); color: var(--text); border: 1.5px solid var(--accent); min-height: 44px; border-radius: 12px; padding: 0 16px; }
.tombol-ai:hover { background: var(--gold-tint); }
.pesan-rekomendasi { margin: 0; background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.pilihan-cepat { display: flex; flex-direction: column; gap: 10px; }
.pilihan-cepat-judul { margin: 0; font-size: 13px; color: var(--text); }
.pilihan-cepat-judul .redup { font-weight: 500; }
.chip-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 8px 16px;
  border-radius: 22px; border: 1.5px solid var(--border-strong); background: var(--surface); font-family: inherit; font-size: 14px;
  font-weight: 700; line-height: 1.35; color: var(--text); cursor: pointer; text-align: left; white-space: normal; overflow-wrap: anywhere;
  text-decoration: none; }
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--gold-soft); }
.pilihan-toolkit { border-top: 1px dashed var(--border); padding-top: 10px; }
.pilihan-toolkit .kv-toolkit { margin: 6px 0; }
.pilihan-toolkit dd { margin: 0 0 8px; }
.aksi-jawab { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px; }
.tautan-jawab { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tautan-aksi { min-height: 40px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; }
.tombol-kirim { min-height: 52px; padding: 0 30px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.pesan-terbaru .obrolan { margin-bottom: var(--sp-3); }
.penjelasan-singkat { background: #111111; color: #FFFFFF; border-radius: 14px; padding: 16px 18px; display: flex;
  flex-direction: column; gap: 8px; margin-bottom: var(--sp-4); }
.penjelasan-singkat[hidden] { display: none; }
.penjelasan-singkat p { margin: 0; }
.penjelasan-judul { font-size: 14px; font-weight: 700; color: #C39241; }
.penjelasan-anda { font-size: 12px; color: #BDBDBD; }
.penjelasan-isi { font-size: 14px; line-height: 1.65; color: #E6E6E6; overflow-wrap: anywhere; }
.tombol-paham { align-self: flex-start; min-height: 40px; border-radius: 10px; border: 1px solid #555555; background: transparent;
  color: #FFFFFF; }
.tombol-paham:hover { background: #222222; color: #FFFFFF; }
.kartu-tanya h2.tanya-panjang { font-size: 17px; line-height: 1.5; font-weight: 700; }
.jawab-baris, .kartu-tanya, #form-jawab { scroll-margin-top: 150px; }
.pita-uji + .lompat + .aplikasi .jawab-baris, .pita-uji + .lompat + .aplikasi .kartu-tanya { scroll-margin-top: 182px; }

.jawab-lalu { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 6px 16px 10px;
  margin-bottom: var(--sp-4); }
.jawab-lalu-kepala { min-height: 46px; display: flex; align-items: center; padding-right: 150px; }
.jawab-lalu-kepala b { font-size: 14px; }
.jawab-lalu-semua > summary { position: absolute; top: 3px; right: 16px; min-height: 40px; display: flex; align-items: center; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--accent-ink); cursor: pointer; }
.jawab-lalu-semua > summary::-webkit-details-marker { display: none; }
.jawab-lalu-semua > summary .buka, .jawab-lalu-semua[open] > summary .tutup { display: none; }
.jawab-lalu-semua[open] > summary .buka { display: inline; }
.jawab-baris { position: relative; border-top: 1px solid var(--border); padding: 10px 8px; margin: 0 -8px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px; }
.jawab-baris:has(.ubah-jawab[open]) { background: var(--surface-muted); }
.jawab-baris:has(.ubah-jawab[open]) .jawab-teks { display: none; }
.jawab-baris-kepala { padding-right: 92px; }
.jawab-label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.jawab-label .diubah { color: var(--ok); }
.jawab-teks { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.jawab-baris .tanggapan-ai, .jawab-baris .redup { margin: 0; }
.ubah-jawab > summary { position: absolute; top: 6px; right: 8px; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
.ubah-jawab > summary::-webkit-details-marker { display: none; }
.ubah-jawab[open] > summary { display: none; }
.form-ubah-jawab { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.form-ubah-jawab label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.form-ubah-jawab textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--accent); border-radius: 12px;
  resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.65; background: var(--surface); color: var(--text); }
.dipakai-juga { margin: 0; font-size: 12px; line-height: 1.5; color: #5B4A86; font-weight: 600; }
:root[data-tema="gelap"] .dipakai-juga { color: #C9B8F0; }
.usul-ai { margin: 0; font-size: 12px; font-weight: 600; }
.aksi-ubah { display: flex; flex-wrap: wrap; gap: 8px; }
.aksi-ubah .tombol { min-height: 44px; border-radius: 12px; }

.panel-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--sp-2) 0; }
.panel-dua .panel-berikut { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0; }
.panel-dua .panel-berikut p { margin: 0; }
.panel-rinci > summary { list-style: none; width: 100%; box-sizing: border-box; }
.panel-rinci > summary::-webkit-details-marker { display: none; }
.panel-rinci-laptop { display: none; }
.daftar-bagian .bagian-buka > summary, .daftar-bagian .bagian-tutup { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-height: 40px; cursor: pointer; list-style: none; }
.daftar-bagian .bagian-tutup { cursor: default; }
.daftar-bagian .bagian-buka > summary::-webkit-details-marker { display: none; }
.daftar-bagian .bagian-buka > summary::after { content: "▼"; font-size: 10px; color: var(--accent-ink); margin-left: 6px; }
.daftar-bagian .bagian-buka[open] > summary::after { content: "▲"; }
.daftar-bagian .bagian-buka > summary > span:first-child { flex: 1 1 auto; }
.tanya-bagian { list-style: none; margin: 0; padding: 0 0 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tanya-bagian li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; }
.tautan-ubah-panel { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; }
.tautan-ubah-panel:hover { text-decoration: none; background: var(--gold-tint); }
.panel-tips > summary { cursor: pointer; }
.panel-tips p { margin: 6px 0 0; }
.panel-petunjuk { margin: var(--sp-2) 0 4px; }
@media (min-width: 1024px) {
  .panel-rinci { display: none; }
  .panel-rinci-laptop { display: block; }
  .ruang-wawancara > .panel-progres { top: calc(60px + 66px + var(--sp-3)); max-height: calc(100vh - 150px); overflow-y: auto; }
  .pita-uji + .lompat + .aplikasi .ruang-wawancara > .panel-progres { top: calc(92px + 66px + var(--sp-3)); }
}
@media (max-width: 1023px) {
  .panel-progres .panel-rinci .daftar-bagian, .panel-progres .panel-rinci .panel-tips { display: block; }
  .panel-progres .panel-rinci { flex: 1 1 100%; }
  .panel-progres .panel-dua { flex: 1 1 100%; }
  .panel-progres .panel-dua .panel-berikut { border: 1px solid var(--border); padding: 8px 10px; }
}
@media (max-width: 820px) {
  .bilah-angka { display: none; }
  .bilah-kemajuan .bar { width: 90px; }
  .kartu-tanya { padding: 18px 14px 16px; border-radius: 16px; }
  .kartu-tanya h2.tanya { font-size: 19px; }
}
@media (max-width: 480px) {
  /* pemeriksa Fable T22b SEDANG 12: di HP bilah atas SATU baris (persen + dua tombol kecil), supaya ruang ketik tetap lega */
  .bilah-isi { padding: 6px var(--sp-3); flex-wrap: nowrap; gap: 8px; }
  .bilah-kemajuan { gap: 0; flex: 0 0 auto; }
  .bilah-kemajuan .bar, .bilah-kemajuan .kata-selesai { display: none; }
  .bilah-tombol { flex-wrap: nowrap; gap: 6px; margin-left: auto; }
  .bilah-tombol .tombol-kecil { min-height: 40px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .jawab-baris, .kartu-tanya, #form-jawab { scroll-margin-top: 120px; }
  .aksi-jawab { flex-direction: column-reverse; align-items: stretch; }
  .tombol-kirim { width: 100%; }
  .jawab-lalu-kepala { padding-right: 0; flex-direction: column; align-items: flex-start; }
  .jawab-lalu-semua > summary { position: static; }
  .contoh-jawaban { padding: 12px; }
}
@media print { .bilah-sesi { display: none; } }

/* ===================== T22e: layar menjawab dan Ringkasan data persis prototype (keputusan Trisna 145) =====================
   Ukuran dari prototype CoS versi 18 (Jawab.dc.html / JawabHP.dc.html): kolom utama + panel 320 px (300 px di layar
   1024-1279 px yang ada menu samping), jarak 24 px; kartu pertanyaan padding 22 px, jarak 18 px, judul 22/1.35;
   CONTOH JAWABAN padding 14-16 px, teks 14 px; panel 20 px, bulatan status 22 px. Diberi awalan .layar-jawab atau
   .layar-ringkas supaya aturan lama (W1 11 Nov, KONTRAK-SESI) tidak ikut menimpa. */
.ruang-wawancara.layar-jawab { gap: 24px; }
@media (min-width: 1024px) {
  .ruang-wawancara.layar-jawab { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (min-width: 1280px) {
  .ruang-wawancara.layar-jawab { grid-template-columns: minmax(0, 1fr) 320px; }
}
.layar-jawab > .percakapan { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.layar-jawab > .percakapan > * { margin-top: 0; margin-bottom: 0; }
.layar-jawab .jawab-lalu, .layar-jawab .kartu-tanya { margin: 0; }
.layar-jawab > .percakapan > .jangkar-terbaru { margin-bottom: -16px; }   /* jangkar 0 px tidak menambah jarak */
.layar-jawab .jawab-baris-kepala { min-height: 38px; display: flex; align-items: center; }
.layar-jawab .ubah-jawab > summary { top: 8px; min-height: 36px; }
.layar-jawab .pesan-terbaru .obrolan { margin: 0; }
.layar-jawab .catatan-ai { margin: 0; font-size: 12px; }
.baris-toolkit { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.baris-toolkit strong { color: var(--text); font-weight: 700; }
.baris-toolkit a { color: var(--accent-ink); font-weight: 700; }

/* kartu pertanyaan */
.layar-jawab .kartu-tanya { border: 1px solid var(--border); border-radius: 20px; padding: 22px 22px 20px; gap: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); }
.layar-jawab .tanya-atas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin: 0 0 -10px; }
.layar-jawab .tanya-atas .tanya-label { margin: 0; line-height: 1.5; }
.layar-jawab .kartu-tanya h2.tanya { font-size: 22px; line-height: 1.35; font-weight: 800; letter-spacing: 0; margin: 0; }
.layar-jawab .kartu-tanya h2.tanya-panjang { font-size: 17px; line-height: 1.5; font-weight: 700; }
.layar-jawab .tanya-bantu { margin: -10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.layar-jawab .contoh-jawaban { margin-top: -10px; padding: 14px 16px; gap: 12px; }
.layar-jawab .contoh-baris { padding: 12px 14px; }
.layar-jawab .contoh-kabur .contoh-isi { line-height: 1.6; color: var(--text-muted); }
.layar-jawab .contoh-tajam .contoh-isi { line-height: 1.9; color: var(--text); }
.layar-jawab .contoh-alasan { color: #8A3B30; }
:root[data-tema="gelap"] .layar-jawab .contoh-alasan { color: var(--stop-ink); }
.layar-jawab .contoh-penutup { font-size: 12px; line-height: 1.5; }
.layar-jawab .kotak-jawab textarea { font-size: 15px; padding: 14px 16px; min-height: 0; }
.layar-jawab .tombol-ai { font-size: 14px; min-height: 44px; padding: 0 16px; border-radius: 12px; }
.layar-jawab .isi-ai .kecil { font-size: 13px; color: var(--text-muted); }
.layar-jawab .pilihan-cepat-judul { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.layar-jawab .pilihan-cepat-judul strong { color: var(--text); }
.layar-jawab .chip { min-height: 44px; padding: 8px 16px; border-radius: 22px; font-size: 14px; }   /* 22 px: pil kalau satu baris, sudut membulat kalau teksnya panjang */
.layar-jawab .tombol-kirim { min-height: 52px; padding: 0 30px; border-radius: 14px; font-size: 16px; }
/* prototype: Kirim abu-abu selama kotak jawaban masih kosong, emas begitu terisi (tombol tetap bisa ditekan; server
   yang menjawab kalau kosong) */
.layar-jawab .form-jawab:has(textarea#f-jawaban:placeholder-shown) .tombol-kirim,
.layar-jawab .form-jawab:has(.pilihan-unit):not(:has(input[name="unit"]:checked)) .tombol-kirim { background: var(--track); color: var(--text-muted); }
/* pemeriksa T22e: tanggapan AI jawaban terakhir satu baris kecil; Tampilkan semua sejajar judulnya; label kotak contoh
   12 px; tombol kedua di bilah dan panel netral seperti prototype (garis #D9D4C8, teks hitam) */
.layar-jawab .jawab-baris .tanggapan-ai { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layar-jawab .jawab-lalu-semua > summary { top: 6px; }
.layar-jawab .contoh-kepala .kecil { font-size: 12px; }
.bilah-sesi .tombol-kedua, .layar-jawab .panel-rinci > summary.tombol-kedua, .layar-jawab .tombol-cari {
  border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); }
.layar-jawab .hasil-cari-kecil { margin: -2px 0 2px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
@media screen {
  :root[data-tema="gelap"] .tombol-nol { background: transparent; border-color: #7A2E26; color: var(--stop-ink); }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .tombol-nol { background: transparent; border-color: #7A2E26; color: var(--stop-ink); }
}
@media screen {
  :root[data-tema="gelap"] .layar-jawab .contoh-kabur { border-color: #5A2A24; }
  :root[data-tema="gelap"] .layar-jawab .contoh-tajam { border-color: #24432F; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .layar-jawab .contoh-kabur { border-color: #5A2A24; }
  :root:not([data-tema="terang"]) .layar-jawab .contoh-tajam { border-color: #24432F; }
  :root:not([data-tema="terang"]) .layar-jawab .contoh-alasan { color: var(--stop-ink); }
}

/* pertanyaan beberapa data (per poin, I-341 belum diputus): kotak kecil berdua sebaris di laptop, gaya kotak prototype */
.layar-jawab .jalan-jawab { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.layar-jawab .daftar-poin { list-style: none; counter-reset: poin; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.layar-jawab .daftar-poin .poin-isian { counter-increment: poin; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.layar-jawab .daftar-poin .poin-isian > label { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.4; }
.layar-jawab .daftar-poin .poin-isian > label::before { content: counter(poin) ". "; color: var(--accent-ink); }
.layar-jawab .daftar-poin .poin-isian:has(textarea), .layar-jawab .daftar-poin .poin-isian:has(.opsi) { grid-column: 1 / -1; }
.layar-jawab .daftar-poin input[type="text"], .layar-jawab .daftar-poin select, .layar-jawab .daftar-poin textarea,
.layar-jawab .kotak-baris input[type="text"], .layar-jawab .cari-baris input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px; border: 2px solid var(--border-strong);
  border-radius: 12px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--text); background: var(--surface); }
.layar-jawab .kotak-baris input:not(:placeholder-shown) { border-color: var(--accent); }
.layar-jawab .daftar-poin input:focus, .layar-jawab .daftar-poin select:focus, .layar-jawab .daftar-poin textarea:focus,
.layar-jawab .kotak-baris input:focus, .layar-jawab .cari-baris input:focus { outline: 3px solid var(--brand-gold); outline-offset: 2px; }

/* pertanyaan pilih unit: satu kotak cari dengan tombol sebaris, hasil = kartu pilihan, judul pelatihan satu baris */
.no-langkah { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: var(--brand-gold); color: #000000;
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.layar-jawab .cari-unit { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.layar-jawab .cari-label, .layar-jawab .pilihan-unit > legend, .layar-jawab .kotak-baris label, .layar-jawab .unit-belum {
  display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin: 0; }
.layar-jawab .cari-baris { display: flex; gap: 8px; align-items: stretch; }
.layar-jawab .cari-baris input { flex: 1 1 auto; min-width: 0; }
.layar-jawab .tombol-cari { flex: 0 0 auto; min-height: 46px; border-radius: 12px; padding: 0 18px; font-size: 14px; white-space: nowrap; margin: 0; }
.layar-jawab .cari-bantu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12px; line-height: 1.5;
  color: var(--text-muted); }
.layar-jawab .cari-bantu a { color: var(--accent-ink); font-weight: 700; }
.layar-jawab .info-kecil > summary { cursor: pointer; list-style: none; color: var(--accent-ink); font-weight: 700; }
.layar-jawab .info-kecil > summary > span { margin-right: 4px; }
.layar-jawab .info-kecil > summary::-webkit-details-marker { display: none; }
.layar-jawab .info-kecil[open] { flex-basis: 100%; }
.layar-jawab .info-kecil > :not(summary) { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gold-tint);
  color: var(--text); font-size: 13px; line-height: 1.55; }
.layar-jawab .hasil-cari { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.55; }
.layar-jawab .hasil-info { background: var(--ok-bg); color: var(--text); }
.layar-jawab .hasil-peringatan { background: var(--warn-bg); color: var(--text); }
.layar-jawab .unit-belum { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.layar-jawab fieldset.pilihan-unit { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.layar-jawab fieldset.pilihan-unit > legend { padding: 0; margin: 0 0 8px; }
.layar-jawab .pilihan-unit .kartu-unit { border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 12px 14px;
  background: var(--surface); margin: 0; }
.layar-jawab .pilihan-unit .kartu-unit:has(input:checked) { border-color: var(--brand-gold); background: var(--gold-tint); }
.layar-jawab .pilihan-unit .kartu-unit .opsi { display: flex; align-items: flex-start; gap: 12px; border: 0; padding: 0; min-height: 0;
  font-size: 14px; line-height: 1.45; }
.layar-jawab .pilihan-unit .kartu-unit .opsi input { width: 22px; height: 22px; margin: 0; }
.layar-jawab .pilihan-unit .kartu-unit > p, .layar-jawab .pilihan-unit .kartu-unit > details { margin: 4px 0 0 34px; font-size: 12px; }
.layar-jawab .pilihan-unit .unit-lain { font-size: 13px; }
.layar-jawab .pilihan-unit .unit-lain .opsi { display: flex; padding: 6px 0; min-height: 0; border: 0; font-size: 13px; }
.layar-jawab .kotak-baris { gap: 8px; }

/* panel Progres dokumen */
.layar-jawab > .panel-progres { border: 1px solid var(--border); border-radius: 20px; padding: 20px; display: flex; flex-direction: column;
  gap: 14px; }
.layar-jawab > .panel-progres p { margin: 0; }
.layar-jawab .panel-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 800;
  line-height: 1.3; margin: 0; }
.layar-jawab .panel-persen { float: none; margin: 0; font-size: 17px; font-weight: 800; color: var(--accent-ink); }
.layar-jawab .panel-progres .bar { height: 10px; margin: 0; flex: none; }
.layar-jawab > .panel-progres p.panel-baris { font-size: 14px; line-height: 1.45; margin: 0 0 -10px; }
.layar-jawab .panel-isian { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.layar-jawab .panel-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; flex: none; }
.layar-jawab .panel-dua .panel-berikut { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.layar-jawab .panel-dua .label-kecil { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; color: var(--accent-ink);
  margin: 0; line-height: 1.4; }
.layar-jawab .panel-dua .panel-berikut p:last-child { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.layar-jawab .panel-petunjuk { font-size: 12px; line-height: 1.45; color: var(--text-muted); margin: 0 0 6px; }
.layar-jawab .daftar-bagian { margin: 0; font-size: 14px; }
.layar-jawab .daftar-bagian > li { display: block; padding: 0; border: 0; border-top: 1px solid var(--border); font-weight: inherit; color: inherit; }
.layar-jawab .daftar-bagian > li:last-child { border-bottom: 0; }
.layar-jawab .daftar-bagian .bagian-buka > summary, .layar-jawab .daftar-bagian .bagian-tutup { display: flex; align-items: center;
  justify-content: flex-start; gap: 10px; min-height: 46px; padding: 6px 4px; border-radius: 8px; }
.layar-jawab .daftar-bagian .bagian-buka > summary::after { content: "▼"; font-size: 10px; color: var(--accent-ink); margin-left: 2px; }
.layar-jawab .daftar-bagian .bagian-buka[open] > summary::after { content: "▲"; }
.layar-jawab .daftar-bagian .kini .bagian-buka > summary, .layar-jawab .daftar-bagian .kini .bagian-tutup { background: var(--gold-tint); }
.layar-jawab .daftar-bagian .bagian-buka > summary > span.bulat, .layar-jawab .bulat { flex: 0 0 22px; width: 22px; height: 22px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; }
.layar-jawab .daftar-bagian .belum .bulat { background: var(--track); color: var(--text); }
.layar-jawab .daftar-bagian .selesai .bulat { background: #1B6B3A; color: #FFFFFF; }
.layar-jawab .daftar-bagian .aktif .bulat { background: var(--brand-gold); color: #000000; }
.layar-jawab .nama-bagian { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.layar-jawab .selesai .nama-bagian, .layar-jawab .aktif .nama-bagian { color: var(--text); }
.layar-jawab .aktif .nama-bagian { font-weight: 800; }
.layar-jawab .daftar-bagian .angka { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.layar-jawab .selesai .angka { color: var(--ok); }
.layar-jawab .aktif .angka { color: var(--accent-ink); }
.layar-jawab .tanya-bagian { padding: 0 0 10px 32px; gap: 2px; }
.layar-jawab .tanya-bagian li { border: 0; padding: 4px 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.layar-jawab .tautan-ubah-panel { min-height: 34px; padding: 0 10px; }
.layar-jawab .panel-tips { background: var(--gold-tint); border: 1px solid var(--emas-garis); border-radius: 12px; padding: 10px 12px; }
.layar-jawab .panel-tips > summary { font-size: 11px; letter-spacing: 1.5px; color: var(--accent-ink); min-height: 24px; display: flex;
  align-items: center; list-style: none; }
.layar-jawab .panel-tips > summary::-webkit-details-marker { display: none; }
.layar-jawab .panel-tips p { font-size: 13px; line-height: 1.6; }
.layar-jawab .panel-rinci > summary .buka, .layar-jawab .panel-rinci[open] > summary .tutup { display: none; }
.layar-jawab .panel-rinci[open] > summary .buka { display: inline; }
.layar-jawab .panel-rinci-laptop { flex-direction: column; gap: 14px; }
@media (min-width: 1024px) {
  .layar-jawab .panel-rinci-laptop { display: flex; }
}
@media (max-width: 1023px) {
  /* HP dan tablet (prototype JawabHP): panel di atas, tersusun ke bawah; rincian terlipat di balik satu tombol */
  .layar-jawab > .panel-progres { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px;
    padding: 16px; border-radius: 16px; }
  .layar-jawab > .panel-progres .redup { display: block; }
  .layar-jawab .panel-dua { flex: none; }
  .layar-jawab .panel-dua .panel-berikut { border: 1px solid var(--border); padding: 10px 12px; }
  .layar-jawab .panel-rinci { flex: none; }
  .layar-jawab .panel-rinci > summary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
    border-radius: 12px; font-size: 13px; }
  .layar-jawab .panel-rinci[open] > summary { margin-bottom: 12px; }
  .layar-jawab .panel-rinci .panel-tips { display: block; margin-top: 12px; }
}
@media (max-width: 820px) {
  .layar-jawab .daftar-poin { grid-template-columns: minmax(0, 1fr); }
  .layar-jawab .kotak-jawab textarea, .layar-jawab .daftar-poin input[type="text"], .layar-jawab .kotak-baris input[type="text"],
  .layar-jawab .cari-baris input { font-size: 16px; }   /* 16 px: HP tidak memperbesar layar saat mengetik */
  .layar-jawab .kartu-tanya { padding: 18px 14px 16px; border-radius: 16px; gap: 16px; }
  .layar-jawab .kartu-tanya h2.tanya { font-size: 19px; }
  .layar-jawab .tanya-atas { margin: 0 0 -8px; }
  .layar-jawab .tanya-bantu { margin-top: -8px; }
  .layar-jawab .contoh-jawaban { margin-top: -8px; padding: 12px; }
}
@media (max-width: 480px) {
  .layar-jawab .tombol-cari { padding: 0 12px; }
  .layar-jawab .contoh-baris { padding: 10px 12px; gap: 10px; }
  .layar-jawab .jawab-lalu-kepala { min-height: 0; padding-top: 10px; }
  .layar-jawab .jawab-lalu-semua > summary { min-height: 36px; }
}

/* Ringkasan data (T22e): kepala ringkas + kartu per bagian yang bisa dilipat + kotak ubah di tempat */
.layar-ringkas { display: flex; flex-direction: column; gap: 16px; }
.layar-ringkas p { margin: 0; }
.ringkas-kepala { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px 22px;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05); }
.ringkas-kepala-isi { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ringkas-kepala .tanya-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent-ink); }
.ringkas-judul { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 800; }
.ringkas-angka { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.chip-kosong, .chip-lengkap { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.chip-kosong { background: var(--warn-bg); color: var(--warn); }
.chip-lengkap { background: var(--ok-bg); color: var(--ok); }
.ringkas-petunjuk { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.ringkas-aksi { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.ringkas-aksi .tombol { margin: 0; }
.ringkas-aksi .tombol-utama { min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.ringkas-aksi .tombol-kecil { min-height: 40px; border-radius: 10px; font-size: 13px; white-space: normal; text-align: center; }
.ringkas-aksi .aksi-form, .ringkas-aksi form { margin: 0; }
.ringkas-janji { flex-basis: 100%; text-align: right; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.tombol-tautan { min-height: 40px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.ringkas-daftar { display: flex; flex-direction: column; gap: 10px; }
.ringkas-bagian { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ringkas-bagian > summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 16px; cursor: pointer;
  list-style: none; border-radius: 16px; }
.ringkas-bagian > summary::-webkit-details-marker { display: none; }
.ringkas-bagian > summary::after { content: "▼"; font-size: 10px; color: var(--accent-ink); }
.ringkas-bagian[open] > summary::after { content: "▲"; }
.ringkas-bagian.aktif > summary { background: var(--gold-tint); }
.ringkas-bagian[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.layar-ringkas .bulat { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; line-height: 1; background: var(--track); color: var(--text); }
.layar-ringkas .selesai .bulat { background: #1B6B3A; color: #FFFFFF; }
.layar-ringkas .aktif .bulat { background: var(--brand-gold); color: #000000; }
.layar-ringkas .sebagian .bulat { background: transparent; box-shadow: inset 0 0 0 2px var(--brand-gold); }
.layar-ringkas .nama-bagian { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.layar-ringkas .belum .nama-bagian { color: var(--text-muted); font-weight: 600; }
.ringkas-hitung { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
.ringkas-bagian.aktif .ringkas-hitung, .ringkas-bagian.belum .ringkas-hitung, .ringkas-bagian.sebagian .ringkas-hitung { color: var(--warn); font-weight: 700; }
.layar-ringkas .angka { flex: 0 0 auto; min-width: 40px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.layar-ringkas .selesai .angka { color: var(--ok); }
.layar-ringkas .aktif .angka { color: var(--accent-ink); }
.ringkas-isi { padding: 0 16px 6px; }
.ringkas-baris { position: relative; border-top: 1px solid var(--border); padding: 8px 8px; margin: 0 -8px; border-radius: 10px;
  display: grid; grid-template-columns: minmax(140px, 26%) minmax(0, 1fr) auto auto; grid-template-areas: "kepala nilai label tombol" "ubah ubah ubah ubah";
  column-gap: 14px; row-gap: 6px; align-items: center; scroll-margin-top: 150px; }
.ringkas-baris > .ringkas-baris-kepala { grid-area: kepala; }
.ringkas-baris > .ringkas-nilai { grid-area: nilai; }
.ringkas-baris > .ringkas-label { grid-area: label; justify-content: flex-end; }
.ringkas-baris > .ringkas-tombol { grid-area: tombol; display: flex; justify-content: flex-end; }
.ringkas-baris > .ubah-isian { grid-area: ubah; }
.ringkas-label:empty, .ringkas-tombol:empty { display: none; }
@media (max-width: 820px) {
  .ringkas-baris { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kepala tombol" "nilai nilai" "label label" "ubah ubah"; }
  .ringkas-baris > .ringkas-label { justify-content: flex-start; }
}
.ringkas-baris.kosong { background: var(--surface-muted); }
.ringkas-baris.sedang-ubah { background: var(--surface-muted); }
.ringkas-baris-kepala { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ringkas-nama { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ringkas-baris .asal-isian { font-size: 11px; }
.tombol-ubah-isian { display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12px; font-weight: 700;
  color: var(--text); text-decoration: none; }
.tombol-ubah-isian:hover { text-decoration: none; background: var(--gold-tint); }
.ringkas-nilai { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ringkas-baris.sedang-ubah .ringkas-nilai { display: none; }
.ringkas-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; }
/* label = tombol pilihan berbentuk lencana (radio disembunyikan rapi, tetap bisa dipilih papan ketik): yang terpilih
   bergaris emas, yang tidak dipilih redup; tidak ada lagi bulatan radio dobel di samping lencana */
.ringkas-label .opsi-label { position: relative; display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; }
.ringkas-label .opsi-label input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ringkas-label .opsi-label:not(:has(input:checked)) .lencana { opacity: 0.45; }
.ringkas-label .opsi-label:has(input:checked) .lencana { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.ringkas-label .opsi-label:has(input:focus-visible) .lencana { outline: 3px solid var(--brand-gold); outline-offset: 2px; opacity: 1; }
.ringkas-label .perlu-pilih { margin: 0; }
.ubah-isian[hidden] { display: none; }
.form-ubah-isian { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.form-ubah-isian textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--accent); border-radius: 12px;
  resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.65; background: var(--surface); color: var(--text); }
.form-ubah-isian fieldset.pilihan-radio { margin: 0; }
.form-ubah-isian .aksi-ubah { display: flex; flex-wrap: wrap; gap: 8px; }
.form-ubah-isian .aksi-ubah .tombol { min-height: 44px; border-radius: 12px; margin: 0; }
.contoh-singkat { font-size: 13px; line-height: 1.55; background: var(--peta-bg); border: 1px solid var(--emas-garis); border-radius: 10px;
  padding: 8px 12px; color: var(--text); }
.contoh-singkat .label-kecil { margin: 0 6px 0 0; font-size: 10px; letter-spacing: 1.5px; color: var(--accent-ink); }
.ringkas-bawah { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex;
  flex-direction: column; gap: 12px; }
.ringkas-bawah .form-ringkasan:empty { display: none; }
.ringkas-bawah .form-ringkasan h3 { margin: 0 0 6px; font-size: 15px; }
.ringkas-bawah .ringkas-aksi { justify-content: flex-start; }
@media (max-width: 820px) {
  .ringkas-kepala { padding: 16px 14px; border-radius: 16px; }
  .ringkas-judul { font-size: 19px; }
  .ringkas-aksi { justify-content: stretch; flex: 1 1 100%; }
  .ringkas-aksi .tombol, .ringkas-aksi form, .ringkas-aksi form .tombol { flex: 1 1 100%; width: 100%; }
  .ringkas-janji { text-align: left; }
  .ringkas-bagian > summary { padding: 8px 12px; gap: 8px; }
  .ringkas-isi { padding: 0 12px 6px; }
  .ringkas-hitung { display: none; }
  .form-ubah-isian textarea { font-size: 16px; }
}
@media print { .ringkas-aksi, .tombol-ubah-isian, .ubah-isian { display: none; } }


/* ---------- T19e: tampilan dan alur e-learning baru (keputusan Trisna 101, prototype CoS Main + Tonton) ----------
   Brand kit: emas #C39241 untuk isi dan garis; teks di atas emas selalu hitam; teks emas di latar terang = emas tua
   (--accent-ink); teks emas di latar hitam = --gold-2. Kotak hitam (lanjutkan menonton, Kang Trisna) tetap hitam di
   kedua mode, dengan tepi --garis-gelap-isi di mode gelap. HP: satu kolom, tanpa geser ke samping, target ketuk >= 44px. */
.el-tata, .el-tonton { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.el-tata > *, .el-tonton > *, .el-tonton-utama > * { min-width: 0; }
@media (min-width: 1180px) {
  .el-tata { grid-template-columns: minmax(0, 1fr) 300px; }
  .el-tonton { grid-template-columns: minmax(0, 1fr) 320px; }
}
.el-samping > .kartu, .el-samping > .el-kt { margin-bottom: var(--sp-4); }

/* kotak hitam "Lanjutkan menonton" */
.el-lanjut { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-5);
  align-items: center; background: var(--hitam); color: #F2EFE9; border-radius: 22px; padding: var(--sp-5);
  margin: 0 0 var(--sp-4); box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.el-lanjut .eyebrow { color: var(--gold-2); }
.el-lanjut h2 { margin: var(--sp-2) 0; font-size: 24px; line-height: 1.25; color: #FFFFFF; overflow-wrap: anywhere; }
.el-lanjut p { color: #D3CDC1; margin: 0 0 var(--sp-2); }
.el-lanjut .tombol-kedua { color: #F2EFE9; border-color: #6A6459; }
.el-lanjut .tombol-kedua:hover { background: #24221F; }
.el-gambar { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #2A2A2A, #0A0A0A); text-decoration: none; }
.el-gambar:hover { text-decoration: none; }
.el-putar { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--brand-gold); color: #000000; display: grid; place-items: center; }
.el-putar .vd-svg { width: 28px; height: 28px; }
.el-sisa { position: absolute; left: 14px; bottom: 16px; font-size: 12px; font-weight: var(--fw-bold); color: #FFFFFF;
  background: rgba(0, 0, 0, 0.65); padding: 4px 8px; border-radius: 6px; }
.el-jalur { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #3A3A3A; }
.el-jalur i { display: block; height: 100%; background: var(--brand-gold); }

/* tiga kartu ringkas */
.el-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4);
  margin-bottom: var(--sp-4); }
.el-ringkas > .kartu { margin-bottom: 0; }
.el-angka { display: flex; flex-direction: column; gap: var(--sp-2); }
.el-angka-label { font-size: 13px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.el-angka > b { font-size: 28px; line-height: 1.2; font-weight: 800; }
.el-angka > b small { font-size: 16px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.el-angka > b.el-langkah { font-size: 17px; line-height: 1.35; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.el-angka a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: 14px; font-weight: var(--fw-bold); }

/* daftar video berkelompok (halaman daftar dan daftar samping halaman menonton) */
.el-daftar { padding: var(--sp-2) 0; }
.vd-bagian-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.vd-bagian-kepala h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.vd-bagian-kepala span { font-size: 13px; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vd-daftar { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-2); }
.vd-daftar li { margin: 0; }
.vd-baris { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  min-height: 48px; padding: var(--sp-3); border-radius: 12px; color: var(--text); text-decoration: none; }
.vd-baris:hover { background: var(--surface-raised); text-decoration: none; }
.vd-baris.vd-sorot, .vd-baris.vd-aktif { background: var(--gold-soft); }
.vd-teks { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vd-teks b { font-size: 15px; line-height: 1.35; font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.vd-teks small { font-size: 13px; color: var(--text-muted); }
.vd-durasi { font-size: 13px; font-weight: var(--fw-bold); color: var(--text-muted); white-space: nowrap; }
.vd-tanda { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.vd-tanda-selesai { background: var(--hitam); color: var(--brand-gold); box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.vd-tanda-putar { background: var(--brand-gold); color: #000000; }
.vd-tanda-nomor { border: 1.5px solid var(--border-strong); color: var(--text-muted); font-size: 13px; font-weight: var(--fw-bold); }
.el-tonton-daftar { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: var(--sp-2) 0; }
.el-tonton-daftar .vd-bagian-kepala { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.el-tonton-daftar .vd-bagian-kepala h2 { font-size: 14px; }
.el-tonton-daftar .vd-bagian-kepala span { font-size: 12px; }
.el-tonton-daftar .vd-daftar { padding: 0 var(--sp-2) var(--sp-1); }
.el-tonton-daftar .vd-baris { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px var(--sp-3); min-height: 44px; }
.el-tonton-daftar .vd-tanda { width: 28px; height: 28px; }
.el-tonton-daftar .vd-tanda-nomor { font-size: 12px; }
.el-tonton-daftar .vd-teks b { font-size: 14px; font-weight: var(--fw-semibold); }
.el-tonton-daftar .vd-aktif .vd-teks b { font-weight: 800; }
.el-tonton-daftar .vd-durasi { font-size: 12px; }

/* kartu samping halaman daftar */
.el-cara ol { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); font-size: 14px; line-height: 1.5; }
.el-cara li { margin-bottom: var(--sp-2); }
.el-kt { background: var(--hitam); color: #F2EFE9; border-radius: 20px; padding: var(--sp-5); box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.el-kt-kepala { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.el-kt-kepala b { display: block; font-size: 15px; color: #FFFFFF; }
.el-kt-kepala span { font-size: 12px; color: #BDB6AA; }
.el-kt .bidang label { color: #D3CDC1; }
.el-kt .bidang textarea { background: #1C1B19; color: #F2EFE9; border-color: #4A453D; }
.el-kt .bidang textarea::placeholder { color: #A9A398; }
.el-kt .el-kt-ket { color: #BDB6AA; }
.el-kt-form .bidang { margin-bottom: var(--sp-2); }
.el-kt-form .bidang textarea { min-height: 88px; font-family: inherit; font-size: 16px; }
.el-kt-form .el-kt-ket { margin: 0; }
.el-kt-form .aksi-form { margin-top: var(--sp-3); }

/* halaman menonton */
.el-atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4); }
.el-kembali { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--fw-semibold); font-size: 14px; }
.el-atas-progres { display: flex; align-items: center; gap: var(--sp-3); flex: 0 1 300px; min-width: 200px; font-size: 13px;
  color: var(--text-muted); }
.el-atas-progres span { white-space: nowrap; }
.el-atas-progres .bar { flex: 1 1 auto; }
.el-penuh { margin: 0 0 var(--sp-3); }
.el-berhenti { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--gold-soft); border: 1px solid var(--emas-garis);
  border-radius: 12px; font-size: 14px; color: var(--text); }
.el-judul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-3); }
.el-judul > div:first-child { min-width: 0; flex: 1 1 320px; }
.el-judul h1 { margin: var(--sp-1) 0; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.el-status { margin: 0; font-size: 14px; color: var(--text-muted); }
.el-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.el-bukti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--gold-soft); color: var(--text); border: 1px solid var(--emas-garis); border-radius: 16px;
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-4) 0; }
.el-bukti > div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1 1 240px; }
.el-bukti b { font-size: 15px; overflow-wrap: anywhere; }
.el-bukti span { font-size: 13px; }
.el-tab { padding: 0; overflow: hidden; margin-top: var(--sp-4); }
.el-tab-panel > .h-kartu { margin-bottom: var(--sp-3); }
/* tab: hanya aktif kalau app.js bagian 7 memasang kelas el-tab-hidup di wadahnya sendiri (pemeriksa T19e RINGAN 7:
   kalau tema.js gagal tetapi app.js jalan, daftar tab tetap muncul; kalau app.js gagal, kedua panel tampil). */
.el-tab-daftar { display: none; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.el-tab-hidup .el-tab-daftar { display: flex; }
.el-tab-daftar [role="tab"] { min-height: 46px; padding: 0 var(--sp-4); border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: var(--fw-bold); cursor: pointer; }
.el-tab-daftar [role="tab"][aria-selected="true"] { border-bottom-color: var(--brand-gold); }
.el-tab-daftar [role="tab"]:focus-visible { border-radius: 8px; }
.el-tab-panel { padding: var(--sp-4) var(--sp-5); overflow-wrap: anywhere; }
.el-tab-panel + .el-tab-panel { border-top: 1px solid var(--border); }
.el-tab-hidup .el-tab-panel + .el-tab-panel { border-top: 0; }
.el-tab-judul { margin: 0 0 var(--sp-3); font-size: 16px; }
.el-tab-hidup .el-tab-judul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.el-ringkasan { font-size: 15px; line-height: 1.6; }
.el-poin-judul { margin: var(--sp-3) 0 var(--sp-2); font-size: 14px; }
.el-poin { margin: 0; padding-left: var(--sp-5); font-size: 15px; line-height: 1.6; }
.vd-baris:focus-visible, .el-gambar:focus-visible { box-shadow: var(--focus-ring); border-radius: 12px; }
@media (max-width: 639px) {
  .el-lanjut { padding: var(--sp-4); border-radius: 18px; }
  .el-lanjut h2 { font-size: 20px; }
  .el-lanjut .hero-aksi .tombol { flex: 1 1 100%; }
  .el-judul h1 { font-size: 22px; }
  .el-nav { width: 100%; }
  .el-nav .tombol { flex: 1 1 140px; padding: 0 var(--sp-3); }
  .el-bukti { padding: var(--sp-3) var(--sp-4); }
  .el-bukti .tombol { width: 100%; }
  .vd-bagian-kepala { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
  .vd-daftar { padding: 0 var(--sp-1) var(--sp-2); }
  .vd-baris { padding: 10px var(--sp-2); gap: var(--sp-2); }
  .el-atas-progres { flex: 1 1 100%; min-width: 0; }
}

/* ---------------------------------------------------------------- T26 (keputusan Trisna 149): draft hidup per dokumen */
.v3-pil.pil-draft { background: #EEF1F5; color: #2F3B4C; border: 1px dashed #8A95A5; }
:root[data-tema="gelap"] .v3-pil.pil-draft { background: #232A33; color: #D5DCE6; border-color: #6B7685; }
.v3-ket-draft { margin: 0 0 var(--sp-2); padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border-strong);
  background: var(--surface); font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.panel-dokumen { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.panel-dokumen .panel-judul { margin: 0 0 4px; }
.panel-dokumen-laptop { display: none; }
.panel-dokumen-hp > summary { list-style: none; width: 100%; box-sizing: border-box; }
.panel-dokumen-hp > summary::-webkit-details-marker { display: none; }
.panel-dokumen-hp[open] > summary { margin-bottom: 10px; }
@media (min-width: 1024px) {
  .panel-dokumen-hp { display: none; }
  .panel-dokumen-laptop { display: block; }
}
@media (max-width: 1023px) {
  .panel-progres .panel-dokumen { flex: 1 1 100%; }
}
.daftar-dokumen-panel { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.daftar-dokumen-panel li { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--surface); }
.dok-panel-atas, .dok-panel-bawah { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dok-panel-bawah { margin-top: 6px; }
.dok-panel-nama { font-size: 13px; font-weight: 600; line-height: 1.35; }
.dok-panel-no { display: inline-block; min-width: 22px; font-size: 11px; font-weight: 700; color: var(--accent-ink); }
.dok-panel-angka { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.daftar-dokumen-panel .v3-pil { font-size: 11px; padding: 3px 8px; }
.isian-narasi { display: block; margin: 6px 0; padding: 10px; border: 1px dashed #D9A39A; border-radius: 10px;
  background: #FDF1EF; }
.kertas .isian-sel.isian-narasi { display: block; }
.isian-narasi .kertas-isian { width: 100%; box-sizing: border-box; background: var(--surface); }
.narasi-aksi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.narasi-label { font-size: 12px; font-weight: 700; color: #A1261B; margin-right: 4px; }
.tombol-narasi { font-family: inherit; font-size: 12.5px; font-weight: 700; min-height: 32px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; }
.tombol-narasi:hover { background: var(--gold-tint); }
.tombol-narasi-ai { border: 1.5px solid var(--accent); color: var(--text); }
.tombol-narasi-ai svg { color: var(--accent-ink); }
.ringkas-dokumen { margin: var(--sp-3) 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 0 14px; }
.ringkas-dokumen > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px;
  cursor: pointer; list-style: none; font-weight: 700; }
.ringkas-dokumen > summary::-webkit-details-marker { display: none; }
.ringkas-dokumen > summary::after { content: "▼"; font-size: 10px; color: var(--accent-ink); }
.ringkas-dokumen[open] > summary::after { content: "▲"; }
.dok-ringkas-daftar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.dok-ringkas { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 10px; border-radius: 10px;
  border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-size: 13px; }
.dok-ringkas:hover { background: var(--gold-tint); text-decoration: none; }
.dok-ringkas .v3-pil { font-size: 11px; padding: 2px 8px; }

/* T27 (keputusan Trisna 150): penyimpanan beberapa bukti tugas dan toolkit. Daftar penyusunan memakai kartu toolkit
   (prototype toolkit-riwayat/Main, keputusan 102/103) supaya satu gaya; tambahan di sini: penanda "Tersimpan otomatis",
   menu kecil kartu (Ganti nama · Duplikat · Hapus dengan konfirmasi di tempat), tombol Buat baru di bilah atas
   (bukan merah: membuat baru tidak lagi menghapus apa pun), dan bilah simpan di alat toolkit. Brand kit: emas #C39241,
   teks putih tidak di atas emas; teks emas di latar terang = --accent-ink. */
.smp-tersimpan { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: var(--fw-semibold);
  color: var(--text-muted); white-space: nowrap; }
.smp-tersimpan::before { content: "✓"; color: var(--accent-ink); font-weight: 800; }
.smp-tersimpan.kotor { color: var(--warn); }
.smp-tersimpan.kotor::before { content: "●"; color: var(--warn); }
.smp-tersimpan.gagal-simpan { color: var(--stop-ink); }
.smp-tersimpan.gagal-simpan::before { content: "!"; color: var(--stop-ink); }
.bilah-simpan { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.bilah-nama { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); font-size: 13px; font-weight: 800;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smp-konfirmasi-emas { border-color: var(--brand-gold); }
.smp-buka-ubah { width: 100%; }
@media (max-width: 1100px) { .bilah-nama { display: none; } }
.bilah-baru > summary { list-style: none; cursor: pointer; }
.bilah-baru > summary::-webkit-details-marker { display: none; }
.tombol-baru { border: 1px solid var(--brand-gold); background: var(--gold-soft); color: var(--accent-ink); font-weight: 800; }
.tombol-baru:hover { background: var(--gold-tint); color: var(--text); }
.bilah-baru[open] > .tombol-baru { background: var(--hitam); color: var(--gold-2); border-color: var(--hitam); }
.tombol-keluar { font-weight: 800; }
.tombol-keluar, .tombol-baru { gap: 0; }
.konfirmasi-baru > p, .konfirmasi-baru > .aksi-nol { border-color: var(--brand-gold); }
.konfirmasi-baru .aksi-nol { align-items: center; }
.konfirmasi-baru .form-sebaris { margin: 0; }
.pita-simpan { gap: var(--sp-2) var(--sp-3); }
.pita-simpan .bilah-tombol { margin-left: auto; position: relative; }
.pita-simpan .konfirmasi-nol { position: static; padding: var(--sp-2) 0 0; max-width: none; }
.smp-kartu-aktif { border-color: var(--brand-gold); box-shadow: 0 0 0 1px var(--brand-gold); }
.smp-buka { display: inline-flex; align-items: center; font-size: 12px; font-weight: var(--fw-bold); padding: 4px 10px;
  border-radius: 99px; background: var(--hitam); color: var(--gold-2); box-shadow: 0 0 0 1px var(--garis-gelap-isi); }
.smp-buka::before { content: "●"; margin-right: 6px; font-size: 9px; color: var(--brand-gold); }
.smp-form-satu { margin: 0; }
.smp-form-satu .tombol { width: 100%; }
.smp-tautan { text-align: center; color: var(--accent-ink); }
.smp-cara { border: 1px solid #4A453D; border-radius: 12px; padding: 10px 12px; margin: 4px 0 0; display: flex;
  flex-direction: column; gap: 8px; }
.smp-cara legend { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.08em; color: var(--gold-2); padding: 0 6px; }
.smp-cara label { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: #E7E2D8; line-height: 1.45; }
.smp-cara input { margin-top: 3px; accent-color: var(--brand-gold); flex: none; width: 18px; height: 18px; }
.smp-menu { position: relative; }
.smp-menu > summary { list-style: none; cursor: pointer; justify-content: center; min-height: 44px; width: 100%;
  box-sizing: border-box; }
.smp-menu > summary::-webkit-details-marker { display: none; }
.smp-menu[open] > summary { background: var(--hitam); color: var(--gold-2); border-color: var(--hitam); }
.smp-menu-isi { position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, 86vw); z-index: 30;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 14px 30px var(--bayang);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.smp-form-nama { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.smp-form-nama label { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.06em; color: var(--text-muted); }
.smp-baris { display: flex; gap: 8px; }
.smp-baris input { flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; font-size: 14px; }
.smp-baris .tombol { flex: none; min-height: 44px; }
.smp-butir { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px;
  box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-raised);
  color: var(--text); font: inherit; font-weight: 800; font-size: 14px; text-align: left; cursor: pointer; }
.smp-butir span { font-weight: 500; font-size: 12.5px; color: var(--text-muted); }
.smp-butir:hover { border-color: var(--brand-gold); background: var(--gold-soft); }
.smp-hapus > summary { list-style: none; }
.smp-hapus > summary::-webkit-details-marker { display: none; }
.smp-butir-bahaya { color: var(--stop-ink); }
.smp-butir-bahaya:hover { border-color: var(--stop-ink); background: var(--surface-raised); }
.smp-hapus[open] > summary { display: none; }
.smp-konfirmasi { border: 2px solid #E3B4AC; border-radius: 12px; padding: 10px 12px; background: var(--surface);
  display: flex; flex-direction: column; gap: 8px; }
.smp-konfirmasi p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.smp-aksi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.smp-aksi .tombol { min-height: 44px; }
.smp-tidak { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); padding: 8px 10px; border-radius: 10px;
  background: var(--surface-raised); border: 1px dashed var(--border-strong); }
.smp-tidak b { display: block; color: var(--text); font-size: 13.5px; }
.smp-daftar .tks-aksi { min-width: 168px; }
.tk-bilah-simpan { position: sticky; top: 60px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; background: var(--penanda-bg); border: 1px solid var(--border);
  border-radius: 0 0 12px 12px; box-shadow: 0 2px 10px var(--bayang); padding: 8px var(--sp-4); margin: 0 0 var(--sp-4); }
.pita-uji + .lompat + .aplikasi .tk-bilah-simpan { top: 92px; }
.tk-bilah-simpan .tk-bilah-nama { font-size: 13.5px; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.tk-bilah-simpan .tk-bilah-kanan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.tk-bilah-simpan .tombol { min-height: 40px; border-radius: 10px; }
:root[data-tema="gelap"] .smp-konfirmasi { border-color: #7A2E26; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .smp-konfirmasi { border-color: #7A2E26; } }
@media (max-width: 520px) {
  .smp-menu-isi { position: static; width: auto; box-shadow: none; margin-top: 8px; }
  .smp-daftar .tks-aksi { min-width: 0; }
  .tks-baris .tks-info { flex-basis: auto; }
  .smp-baris { flex-direction: column; }
  .smp-baris input { width: 100%; box-sizing: border-box; }
  .tks-aksi .smp-baris .tombol { width: 100%; }
}
@media (max-width: 480px) {
  .kata-panjang { display: none; }
  .bilah-simpan { padding-left: 8px; margin-left: 6px; font-size: 11.5px; }
  .tk-bilah-simpan { padding: 6px var(--sp-3); }
  .tk-bilah-simpan .tk-bilah-nama { display: none; }
}

/* T26b (keputusan Trisna 156): layar tunggu proses AI. Lingkaran emas berputar + "AI sedang bekerja…" + timer berjalan
   + perkiraan + baris tahap, tanpa ikon (i), tanpa kotak info krem, tanpa tautan atau tombol selama proses normal.
   Brand kit: emas #C39241 hanya untuk garis lingkaran; angka timer memakai --accent-ink (emas tua di latar terang, emas
   muda di latar gelap); tidak ada teks putih di atas emas. Warna lain dari peran warna, jadi ikut mode gelap. */
.tunggu-ai { display: flex; align-items: flex-start; gap: var(--sp-4); max-width: 640px; margin: var(--sp-4) 0;
  padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.tunggu-putar { flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%;
  border: 4px solid var(--track); border-top-color: var(--brand-gold); border-right-color: var(--brand-gold);
  animation: tunggu-putar 0.9s linear infinite; }
@keyframes tunggu-putar { to { transform: rotate(360deg); } }
@keyframes tunggu-denyut { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.tunggu-badan { flex: 1 1 auto; min-width: 0; }
.tunggu-judul { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--text); }
.tunggu-kata { margin: var(--sp-1) 0 0; color: var(--text); overflow-wrap: anywhere; }
.tunggu-waktu { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0 0;
  color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.tunggu-jam { font-size: 30px; line-height: 34px; font-weight: var(--fw-bold); color: var(--accent-ink);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em; min-width: 3.2ch; }
.tunggu-tahap { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-3) 0 0; padding: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.tunggu-tahap li { display: inline-flex; align-items: center; gap: 6px; }
.tunggu-tahap li + li::before { content: "→"; color: var(--text-muted); }
.tunggu-tahap .sudah::after { content: "✓"; color: var(--accent-ink); font-weight: 800; }
.tunggu-tahap .kini { color: var(--text); font-weight: var(--fw-semibold); }
.tunggu-tahap .kini::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-gold);
  animation: tunggu-denyut 1.2s ease-in-out infinite; }
.tunggu-ai .kemajuan-tunggu { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--text-muted); }
.tunggu-lambat[hidden] { display: none; }
.tunggu-lambat > p { margin: var(--sp-3) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-muted); }
.tunggu-lambat .tombol { margin-top: var(--sp-2); }
.tunggu-ringkas { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); margin: var(--sp-3) 0; }
.tunggu-ringkas .tunggu-putar { width: 30px; height: 30px; border-width: 3px; }
.tunggu-ringkas .tunggu-judul { font-size: var(--fs-body); line-height: var(--lh-body); }
.tunggu-ringkas .tunggu-waktu { margin-top: var(--sp-1); }
.tunggu-ringkas .tunggu-jam { font-size: 20px; line-height: 26px; }
.obrolan .tunggu-ai { margin: 0; }
@media (max-width: 639px) {
  .tunggu-ai { padding: var(--sp-4); gap: var(--sp-3); }
  .tunggu-putar { width: 36px; height: 36px; }
  .tunggu-jam { font-size: 26px; line-height: 30px; }
}
/* tokens.css memendekkan semua animasi untuk "gerak dikurangi"; lingkaran tetap berputar pelan supaya peserta tetap
   tahu AI sedang bekerja (timer juga tetap berjalan) */
@media (prefers-reduced-motion: reduce) {
  .tunggu-putar { animation-duration: 2.4s !important; }
  .tunggu-tahap .kini::after { animation: none !important; }
}

/* T26b (Trisna 18.26 dan 18.3x lewat CoS): fitur tampilan Word mudah ditemukan.
   1. Tombol "Lihat & edit dokumen (Word)" di bilah atas yang menempel (garis emas, latar emas muda, teks gelap).
   2. Panel samping layar menjawab = DUA kotak terpisah: Progres dokumen dan Dokumen Anda, masing-masing dengan area
      gulir sendiri (.panel-gulir). Di laptop keduanya terlihat bersamaan tanpa menggulir halaman; panel tetap menempel.
      Di HP bertumpuk, masing-masing dengan tombol buka-tutup.
   3. "Lihat di dokumen" di bagian yang sedang aktif.
   4. Label tombol bilah satu elemen (.label-tombol) supaya spasi tidak hilang di Safari. */
.label-tombol { white-space: nowrap; }
.label-pendek { display: none; }
.ikon-dok { display: inline-block; margin-right: 6px; line-height: 1; }
.bilah-tombol .tombol-dokumen { border: 1.5px solid var(--brand-gold); background: var(--gold-soft); color: var(--text);
  font-weight: 800; }
.bilah-tombol .tombol-dokumen:hover { background: var(--gold-tint); color: var(--text); text-decoration: none; }
.tautan-lihat-dok { display: inline-flex; align-items: center; min-height: 34px; margin: 0 0 6px 32px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--brand-gold); background: var(--gold-soft); color: var(--text);
  font-size: 12.5px; font-weight: 700; text-decoration: none; }
.tautan-lihat-dok:hover { background: var(--gold-tint); text-decoration: none; }
.layar-jawab > .panel-progres { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 12px; }
.layar-jawab .panel-kotak { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0; box-sizing: border-box; }
.layar-jawab .panel-dokumen { margin-top: 0; padding: 20px; border-top: 1px solid var(--border); gap: 8px; }
.layar-jawab .panel-dokumen .panel-judul { margin: 0; }
.layar-jawab .panel-gulir { scrollbar-width: thin; }
.layar-jawab .panel-gulir:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
@media (min-width: 1024px) {
  .layar-jawab > .panel-progres { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; }
  /* bilah atas dengan tombol dokumen = dua baris (±96 px) di laptop; tinggi panel dibuat muat di layar baik saat
     halaman belum digulir (panel di bawah bilah) maupun saat menempel */
  .layar-jawab > .panel-progres.ada-dokumen { top: calc(60px + 96px + var(--sp-3)); height: calc(100vh - 240px);
    min-height: 460px; max-height: none; overflow-x: hidden; overflow-y: auto; }
  .pita-uji + .lompat + .aplikasi .layar-jawab > .panel-progres.ada-dokumen { top: calc(92px + 96px + var(--sp-3)); }
  .layar-jawab .panel-dokumen-laptop .kecil.redup { font-size: 12px; line-height: 1.45; }
  .layar-jawab .ada-dokumen > .panel-kotak { min-height: 0; overflow: hidden; padding: 16px; gap: 10px; }
  /* T26c (catatan CoS atas gambar T26b): daftar bagian minimal ±5 baris terlihat (dulu hanya 1 baris sebelum Tips),
     sisa tinggi panel dibagi seimbang dengan kotak Dokumen Anda; layar yang terlalu pendek: panel bergulir utuh */
  .layar-jawab .ada-dokumen > .panel-kotak-progres { flex: 1 1 0; min-height: 440px; }
  .layar-jawab .ada-dokumen > .panel-dokumen { flex: 1 1 0; min-height: 180px; }
  .layar-jawab .ada-dokumen .panel-dua .panel-berikut { padding: 6px 10px; }
  .layar-jawab .ada-dokumen .panel-dua .panel-berikut p:last-child { font-size: 13px; }
  .layar-jawab .ada-dokumen .daftar-bagian .bagian-buka > summary,
  .layar-jawab .ada-dokumen .daftar-bagian .bagian-tutup { min-height: 40px; padding: 4px; }
  /* Tips dilipat kecil di bawah daftar bagian (Trisna 18.3x: "TIPS dilipat kecil di bawah atau dibuang") */
  .layar-jawab .ada-dokumen .panel-rinci-laptop > .panel-tips { background: none; border: 0; padding: 0; }
  .layar-jawab .ada-dokumen .panel-rinci-laptop > .panel-tips > summary { min-height: 20px; font-size: 10.5px; }
  .layar-jawab .panel-kotak-progres > * { flex: none; }
  .layar-jawab .ada-dokumen .panel-rinci-laptop { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  .layar-jawab .ada-dokumen .panel-rinci-laptop > .panel-gulir { flex: 1 1 auto; min-height: 200px; overflow-y: auto;
    overscroll-behavior: contain; padding-right: 4px; }
  .layar-jawab .ada-dokumen .panel-rinci-laptop > .panel-tips { flex: none; }
  .layar-jawab .panel-dokumen-laptop { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
  .layar-jawab .panel-dokumen-laptop > .panel-gulir { flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior: contain; padding-right: 4px; }
  .layar-jawab .panel-dokumen-laptop .daftar-dokumen-panel { margin-top: 6px; }
}
/* T30 (Trisna 20.4x lewat CoS, laptop 1366x768: "Kepotong, tampilannya cuman segini"): kotak Dokumen Anda hanya
   menampilkan judul, keterangan, dan satu baris dokumen yang terpotong. Sebab: panel menempel setinggi 100vh-240px
   dengan minimal 460px, Progres minimal 440px + Dokumen minimal 180px, jadi di layar pendek bawah panel keluar layar
   dan tidak bisa digulir. Perbaikan: keterangan satu baris kecil; kotak Dokumen minimal ±4 baris dokumen; di layar
   laptop yang tingginya kurang dari 1200px (jendela browser di layar 1366x768, 1440x900, 1920x1080, 1920x1200) panel TIDAK menempel dan ikut tergulir
   bersama halaman, jadi tidak ada yang terpotong; di jendela yang lebih tinggi panel tetap menempel dengan daftar
   bagian minimal ±5 baris (T26c) dan Dokumen Anda minimal ±4 baris. */
@media (min-width: 1024px) {
  .layar-jawab .panel-dokumen-laptop .kecil.redup { margin: 0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .layar-jawab .ada-dokumen .daftar-dokumen-panel li { padding: 6px 10px; }
  .layar-jawab .ada-dokumen > .panel-dokumen { min-height: 330px; }
}
@media (min-width: 1024px) and (max-height: 1199px) {
  .layar-jawab > .panel-progres.ada-dokumen,
  .pita-uji + .lompat + .aplikasi .layar-jawab > .panel-progres.ada-dokumen { position: static; top: auto; height: auto;
    min-height: 0; max-height: none; overflow: visible; }
  .layar-jawab .ada-dokumen > .panel-kotak { flex: none; overflow: visible; }
  .layar-jawab .ada-dokumen > .panel-kotak-progres { min-height: 0; }
  .layar-jawab .ada-dokumen .panel-rinci-laptop > .panel-gulir { flex: none; min-height: 0; max-height: 300px; }
  .layar-jawab .ada-dokumen > .panel-dokumen { min-height: 0; }
  .layar-jawab .panel-dokumen-laptop > .panel-gulir { flex: none; max-height: none; overflow: visible; }
}
@media (max-width: 1023px) {
  .layar-jawab > .panel-progres { padding: 0; border: 0; border-radius: 0; gap: 12px; }
  .layar-jawab .panel-kotak { padding: 16px; border-radius: 16px; gap: 12px; }
  .layar-jawab .panel-dokumen { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .bilah-tombol .label-panjang { display: none; }
  .bilah-tombol .label-pendek { display: inline; }
  .bilah-tombol .tombol-dokumen .ikon-dok { margin-right: 4px; }
  /* sejak T27 tombol bilah di HP sudah keluar layar (Simpan dan Buat baru terpotong di lebar 390); dengan tombol
     dokumen jadi empat, jadi tombol pindah ke baris kedua selebar layar */
  .bilah-isi { flex-wrap: wrap; row-gap: 6px; }
  .bilah-tombol { flex: 1 1 100%; margin-left: 0; }
  .bilah-tombol .tombol-kecil { padding: 0 8px; }
  .jawab-baris, .kartu-tanya, #form-jawab { scroll-margin-top: 166px; }
}

/* T26c (bug Trisna 18.30, keputusan CoS 19.1x): sel rumus diisi lewat SUMBERNYA di sel itu. Kotak sumber berlabel nama
   isiannya (merah muda bergaris seperti isian kosong lain, tanpa tulisan "[wajib diisi peserta]"); hasil hitung murni
   dan bagian AI per butir = keterangan singkat abu. Warna kertas tetap terang di kedua mode (kertas = halaman dokumen),
   teks gelap di atas latar terang; tidak ada teks putih di atas emas. */
.kertas .isian-rumus { display: flex; flex-direction: column; gap: 6px; padding: 6px; margin: 2px 0; border-radius: 8px;
  background: #FDF6F5; box-shadow: inset 0 0 0 1px #EBC7C1; }
.kertas .rumus-isian { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kertas .rumus-label { font-size: 11px; font-weight: 700; line-height: 1.3; color: #7A2E26; }
.kertas .isian-rumus .kertas-isian { width: 100%; box-sizing: border-box; font-size: 13px; }
.kertas .isian-rumus select.isian-elemen { white-space: normal; }
.kertas .kosong-ket { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #F2F0EB; color: #5F5A51;
  font-size: 12px; font-style: italic; line-height: 1.4; }
.dok-tabel td.sel-kosong .isian-rumus { min-width: 0; }
/* pilihan elemen dan kotak sumber tidak melebarkan tabel: lebar ikut sel (persen = tidak menambah lebar minimum sel) */
.kertas .isian-rumus select.kertas-isian, .kertas .isian-rumus input.kertas-isian { width: 100%; min-width: 0; max-width: 100%; }
.kertas .isian-rumus input.isian-pendek { width: 100%; }
/* T26d: sel rumus yang sudah terisi tetap bisa diubah (Program pelatihan, Kompetensi, Durasi TNA): kotak sumber di bawah
   teks sel, latar kertas netral (bukan merah muda, karena sudah terisi); catatan kecil abu gelap di latar terang */
.kertas .isian-rumus-terisi { background: #FAF8F4; box-shadow: inset 0 0 0 1px #E7E2D8; margin-top: 6px; }
.kertas .isian-rumus-terisi .rumus-label { color: #5F5A51; }
.kertas .rumus-catatan { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: #5F5A51; }


/* T25c (keputusan Trisna 153): tombol "Setujui semua & lanjut" di bawah kotak jawaban */
.form-setujui-semua { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px dashed var(--garis, #ddd); }
.form-setujui-semua .kecil { flex: 1 1 260px; }
.dok-tabel td.sel-edit .kertas-isian.isian-program { display: block; width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; resize: vertical; font-size: 13px; line-height: 1.4; }


/* T31 (keputusan Trisna 166): tampilan Word diisi dengan mengetik langsung di sel. Satu tempat ketik per sel/bagian,
   rapi seperti dokumen: tanpa label di dalam sel, garis tipis dan latar lembut saat disorot. Tanda hanya di layar. */
.kertas .isian-ketik-bungkus { display: block; position: relative; }
.kertas p .isian-ketik-bungkus, .kertas li .isian-ketik-bungkus, .kertas .dok-ttd .isian-ketik-bungkus { display: block; }
.kertas textarea.isian-ketik { display: block; width: 100%; box-sizing: border-box; min-height: 1.6em; padding: 2px 4px;
  margin: 0; border-radius: 4px; line-height: inherit; white-space: pre-wrap; box-shadow: none; background: transparent; }
.kertas .isian-bersama textarea.isian-ketik { color: inherit; font-weight: inherit; background: transparent; box-shadow: none; }
.kertas textarea.isian-ketik:hover { background-color: #FAF7EF; box-shadow: inset 0 0 0 1px #E4D6B5; }
.kertas textarea.isian-ketik:focus { background-color: #FFFFFF; box-shadow: 0 0 0 2px #C39241; }
.kertas textarea.isian-ketik.isian-kosong { min-height: 2.2em; background: #FDF6F5; box-shadow: inset 0 0 0 1px #EBC3BD; }
.kertas textarea.isian-ketik.isian-kosong:focus { background: #FFFFFF; box-shadow: 0 0 0 2px #C39241; }
.dok-tabel td.sel-ketik { padding: 2px 3px; vertical-align: top; }
.dok-tabel td.sel-ketik.sel-kosong { background: #FFFFFF; }
.dok-tabel td.sel-manual { background: #FFFDF6; }
.kertas .dok-judul .isian-ketik, .kertas .dok-subjudul .isian-ketik { text-align: inherit; font-weight: inherit; }
.kertas .diubah-manual textarea.isian-ketik { box-shadow: inset 3px 0 0 #C39241; }
.ketik-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ketik-aksi:empty { display: none; }
.ketik-manual { display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; }
.ketik-manual[hidden] { display: none; }
.tanda-manual { font-family: Montserrat, system-ui, sans-serif; font-size: 11px; font-weight: 700; color: #5C4718;
  background: #F6EBD3; border-radius: 999px; padding: 1px 8px; }
.tombol-kembali-otomatis, .tombol-salin { font-family: Montserrat, system-ui, sans-serif; font-size: 12px; min-height: 28px;
  padding: 2px 9px; border-radius: 8px; border: 1px solid #C9BFA9; background: #FFFFFF; color: #121212; cursor: pointer; }
.tombol-kembali-otomatis:hover, .tombol-salin:hover { border-color: #C39241; background: #FBF5E8; }
.ketik-aksi .tombol-narasi { min-height: 28px; font-size: 12px; padding: 2px 9px; }
.ketik-saran { display: block; margin: 4px 0 2px; padding: 6px 8px; border-left: 3px solid #C39241; background: #FBF5E8;
  border-radius: 0 6px 6px 0; font-family: Montserrat, system-ui, sans-serif; font-size: 12px; color: #3A2E12; }
.ketik-saran[hidden] { display: none; }
.ketik-saran-butir { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ketik-saran-pesan { flex-basis: 100%; }
.ketik-saran .tombol-salin { text-align: left; white-space: normal; }
.v3-cek-dokumen { border-left: 3px solid #C39241; background: #FBF5E8; padding: 10px 12px; border-radius: 0 10px 10px 0;
  margin: 0 0 12px; color: #121212; }
.v3-cek-dokumen h3 { margin: 0 0 6px; font-size: 14px; }
.v3-cek-dokumen ul { margin: 0; padding-left: 18px; font-size: 13px; }
@media (max-width: 640px) {
  .kertas textarea.isian-ketik { font-size: 16px; }
}
.dok-tabel td.sel-ketik textarea.isian-ketik { width: auto; min-width: 100%; max-width: none; word-break: normal;
  overflow-wrap: break-word; }
.dok-tabel td .tanda-manual { display: none; }
/* T31 sesudah pemeriksa: saran dilipat, tanda data bersama tetap (garis ungu), ikon keterangan diubah manual */
details.ketik-saran { padding: 2px 8px; }
details.ketik-saran > summary { cursor: pointer; font-weight: 700; color: #5C4718; min-height: 24px; }
details.ketik-saran[open] > summary { margin-bottom: 4px; }
.kertas .isian-bersama textarea.isian-ketik { box-shadow: inset 3px 0 0 #8C7FB5; }
.kertas .isian-bersama textarea.isian-ketik:focus { box-shadow: 0 0 0 2px #8C7FB5; background: #FFFFFF; }
.v3-tanda-warna i.w-manual { background: #FFFDF6; border-color: #C39241; border-left-width: 3px; }
.tombol-kembali-otomatis { font-size: 11.5px; white-space: normal; text-align: left; }