/* ==========================================================================
   Hanfa AI, gaya antarmuka v3
   Design read: alat kerja harian guru (SaaS produktivitas), audiens non-teknis,
   aset merek = logo biru/ungu. Dial: VARIANCE 4, MOTION 5, DENSITY 5.
   Aturan sistem:
   - Netral abu-abu dingin satu keluarga + SATU aksen biru dari logo.
     Hijau/kuning/merah hanya untuk status semantik (kunci jawaban, level, galat).
   - Font tunggal Geist (sans) + Geist Mono untuk angka.
   - Radius: kontrol (tombol, input) 10px, wadah (panel, kartu, lembar) 16px,
     chip 999px. Tidak ada campuran lain.
   - Gerak hanya transform/opacity; semua animasi mati di prefers-reduced-motion (pemuat tetap berdenyut lewat opacity).
     Bahasa geraknya "Lapisan": lembar bertumpuk di ruang 3D (lihat bagian ANIMASI dan assets/js/motion.js).
   ========================================================================== */

:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F8F9FB;
  --sunken: #EDEFF3;
  --muted-sunken: #5B6272;       /* teks kecil di atas --sunken (5,31:1); --muted hanya 4,31:1 di sana */
  --ink: #12151C;
  --ink-2: #3B4150;
  --muted: #697080;
  --line: #E3E6EB;
  --line-2: #CFD4DC;
  --accent: #2C6BD2;
  --accent-hover: #2259B3;
  --accent-ink: #1B4E9E;
  --accent-soft: #E9F0FC;
  --ok: #1E7F54;
  --ok-soft: #E3F3EB;
  --warn: #9A6410;
  --warn-soft: #FBF1DD;
  --danger: #B3372C;
  --danger-soft: #FAE9E6;

  --font: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-box: 16px;
  --r-ctl: 10px;

  --shadow-sm: 0 1px 2px rgba(18, 28, 45, .06);
  --shadow: 0 1px 2px rgba(18, 28, 45, .05), 0 10px 28px -16px rgba(26, 45, 82, .28);
  --shadow-lg: 0 28px 64px -28px rgba(22, 38, 70, .45);

  --z-header: 30;
  --z-modal: 60;
  --z-toast: 70;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);                       /* gerak di layar: bergerak dari titik A ke B */
  --spring: linear(0, .2 6%, .62 15%, .93 25%, 1.05 36%, 1.06 42%, 1.03 52%, 1.005 66%, .998 80%, 1);   /* pegas kecil (pantulan 6%); peramban lama memakai --ease */
  --topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.req { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-ctl); text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Ikon Phosphor berbasis fill */
svg use { pointer-events: none; }
.btn svg, .icon-btn svg, .nav__item svg, .quota svg, .contact svg, .ticks svg, .demo-banner svg, .modal__icon svg, .tool svg, .menu__item svg, .fig-tools svg, .file-row svg, .fig__status > svg, .notes svg, .toast svg, .slide-card__cap svg, .chip svg {
  fill: currentColor; stroke: none; flex-shrink: 0;
}

.h-title { font-size: clamp(24px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.h-sub { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.brand b { font-weight: 600; color: var(--accent); }
.brand--sm { font-size: 17px; gap: 8px; white-space: nowrap; }

/* ----------------------------------------------------------------- tombol */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid transparent; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), border-color .18s, color .18s, transform .12s var(--ease); }
.btn svg { width: 18px; height: 18px; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-2); }
.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--sunken); color: var(--ink); }
.btn--outline { background: var(--surface); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn--lg { min-height: 50px; font-size: 15px; }
.btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn .cost.is-kurang { background: var(--warn-soft); color: #7A4E0C; opacity: 1; font-weight: 600; }
.gen-poin-hint { margin-top: 8px; color: #7A4E0C; font-weight: 500; }
.gen-poin-hint[hidden] { display: none; }
.btn .cost { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; opacity: .85; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.18); }
/* Tombol sibuk: ikon pertama berputar di ruang (koin) dan seberkas cahaya melintas; tombol tidak bisa diketuk dua kali. */
.btn.is-loading { pointer-events: none; position: relative; overflow: hidden; }
.btn.is-loading > svg:first-child { animation: coin 1.7s var(--ease-io) infinite; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.5s var(--ease-io) infinite; pointer-events: none; }
.btn--google.is-loading::after, .btn--ghost.is-loading::after, .btn--outline.is-loading::after { background: linear-gradient(100deg, transparent 30%, rgba(44, 107, 210, .14) 50%, transparent 70%); }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

/* ============================================================ LAYAR MASUK */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); grid-template-areas: "intro panel" "stage panel" "kaki panel"; grid-template-rows: auto 1fr auto; }
.auth__intro { grid-area: intro; padding: clamp(28px, 5vw, 64px) clamp(24px, 5vw, 72px) 0; }
.auth__headline { font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; margin: 48px 0 16px; max-width: 15ch; text-wrap: balance; }
.auth__headline .w { display: inline-block; }
/* Sebelum font siap (maks. 700 ms), isi layar masuk disembunyikan agar animasi pembuka tidak dimulai dengan font pengganti lalu melompat (Motion.authIntro). */
.auth.is-intro .brand, .auth.is-intro .auth__headline, .auth.is-intro .auth__lede, .auth.is-intro .auth-card, .auth.is-intro .auth__stage, .auth.is-intro .auth__kaki { opacity: 0; }
.auth__lede { font-size: 17px; color: var(--ink-2); max-width: 44ch; }
.auth__panel { grid-area: panel; background: var(--surface); border-left: 1px solid var(--line); }
/* Panel kanan setinggi kolom kiri (judul + contoh hasil), yang lebih tinggi dari layar. Kotak masuk menempel di tengah LAYAR, bukan di tengah kolom,
   agar tidak turun ke bawah dan tetap terlihat saat contoh hasil digulir. */
.auth__sticky { position: sticky; top: 0; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.auth-card { width: min(380px, 100%); display: grid; gap: 12px; }
.auth-card h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.auth-card > .muted { font-size: 14px; margin-bottom: 6px; }
.auth-card__fine { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.auth-izin { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 4px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; line-height: 1.45; }
.auth-izin svg { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: currentColor; }
.auth-trust { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.auth-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.auth-trust svg { width: 18px; height: 18px; flex: none; fill: var(--accent); }
.auth-trust b { font-weight: 600; color: var(--ink); }
.btn--google { min-height: 50px; border: 1px solid var(--line-2); font-size: 15px; }
.btn--google:hover { border-color: var(--ink-2); }
.returning { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); }
.returning b { display: block; font-size: 14px; }
.returning small { font-size: 12px; }

.auth__stage { grid-area: stage; margin: 0; padding: 36px clamp(24px, 5vw, 72px) 24px; align-self: end; }
/* Label merek di dasar layar masuk (Powered by Hanfa Edutech): kecil dan tenang, Geist Mono, tanpa huruf kapital semua; bukan tautan, jadi bukan target ketuk. */
.auth__kaki { grid-area: kaki; display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px clamp(24px, 5vw, 72px) 22px; font: 500 12px/1.4 var(--mono); letter-spacing: .01em; color: var(--muted); }
.auth__kaki svg { width: 14px; height: 14px; flex: none; fill: var(--accent); }
.auth__kaki b { font-weight: 600; color: var(--ink-2); }
.stage { position: relative; height: 340px; max-width: 560px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.auth__stage { perspective: 1200px; }                       /* kedalaman untuk adegan contoh dan miring mengikuti penunjuk (Motion.tilt) */.scene { position: absolute; inset: 0; padding: 22px 24px; opacity: 0; visibility: hidden; }
.scene.is-on { opacity: 1; visibility: visible; }
.scene__q { font-size: 14px; color: var(--ink-2); max-width: 48ch; }
.scene__chart { margin: 8px 0 6px; height: 150px; }
.scene__chart svg { height: 100%; width: auto; }
.scene__opts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13.5px; }
.scene__opts li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; border: 1px solid transparent; }
.scene__opts i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--sunken); font-size: 12px; font-weight: 600; }
.scene__opts li.is-key.is-lit { background: var(--ok-soft); border-color: #C2E3D0; }
.scene__opts li.is-key.is-lit i { background: var(--ok); color: #fff; }
.mini-slide { position: relative; height: 100%; border-radius: 10px; background: #FBFAF7; border: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 22px 18px 18px 26px; overflow: hidden; }
.mini-slide__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: #2F6FB7; }
.mini-slide h3 { font-family: Georgia, serif; font-size: 24px; }
.mini-slide__rule { display: block; width: 34px; height: 3px; background: #E07A2E; margin: 8px 0 12px; }
.mini-slide ul { margin: 0; padding-left: 16px; font-size: 13px; display: grid; gap: 8px; list-style: square; }
.mini-slide__art { display: grid; place-items: center; }
.mini-slide__art svg { width: 100%; height: auto; }
.scene--doc h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; text-align: center; }
.scene--doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.scene--doc th, .scene--doc td { border: 1px solid var(--line-2); padding: 8px 10px; text-align: left; }
.scene--doc th { background: var(--accent-soft); }
.stage-tabs { display: flex; gap: 6px; max-width: 560px; margin-top: 14px; }
.stage-tabs button { flex: 1; border: 0; background: transparent; text-align: left; padding: 8px 2px 0; font-size: 13px; font-weight: 500; color: var(--muted); position: relative; }
.stage-tabs button i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.stage-tabs button i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.stage-tabs button.is-on { color: var(--ink); }

/* ================================================================= SHELL */
.topbar { position: sticky; top: 0; z-index: var(--z-header); height: var(--topbar-h); background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 600px) minmax(max-content, 1fr); align-items: center; gap: 16px; }
/* Navigasi: tiga alat dalam satu pengalih (Soal, Slide, Modul ajar); Riwayat dan Akun terpisah karena bukan alat. Penanda hanya bergeser (transform). */
.tabs { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.tools { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(600px, 100%); padding: 4px; border-radius: 14px; background: var(--sunken); }
.tools__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); transform: translateX(calc(var(--tool-i, 0) * 100%)); transition: transform .42s var(--ease), opacity .2s; will-change: transform; }
@supports (transition-timing-function: linear(0, 1)) { .tools__ind { transition: transform .62s var(--spring), opacity .2s; } }   /* penanda meluncur dengan pantulan kecil; tarikan dan lenturnya (Motion.tab) memakai `scale` terpisah */
.tabs.is-away .tools__ind { opacity: 0; }
.tabs__pill { display: none; }
.nav__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted-sunken); text-align: left; transition: color .18s; }
.nav__item:hover { color: var(--ink); }
.nav__item .ic { width: 20px; height: 20px; flex-shrink: 0; }
.nav__item .ic--on { display: none; }
.nav__item.is-active { color: var(--ink); }
.nav__item.is-active .ic { display: none; }
.nav__item.is-active .ic--on { display: block; color: var(--accent); animation: tab-pop .42s var(--ease); }
.nav__txt { display: grid; min-width: 0; line-height: 1.2; }
.nav__txt strong { font-size: 14px; font-weight: 600; }
.nav__txt small { font-size: 12px; font-weight: 400; color: var(--muted-sunken); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__item--mobile { display: none; }
.nav__busy { display: none; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.nav__busy::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 1.7s var(--ease) infinite; }
.nav__item.is-busy .nav__busy { display: block; }
/* ikon aktif berputar masuk seperti koin dari belakang; di HP ikut melompat */
@keyframes nav-hop { 0% { transform: perspective(160px) translateY(9px) rotateY(-150deg) scale(.6); opacity: .3; } 55% { transform: perspective(160px) translateY(-5px) rotateY(12deg) scale(1.18); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes nav-label { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tab-pop { 0% { transform: perspective(160px) rotateY(-150deg) scale(.6); opacity: .3; } 60% { transform: perspective(160px) rotateY(12deg) scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
.hist-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; transition: color .18s, background .18s; }
.hist-btn:hover { color: var(--ink); background: var(--surface-2); }
.hist-btn .ic { width: 20px; height: 20px; flex-shrink: 0; }
.hist-btn .ic--on { display: none; }
.hist-btn.is-active { color: var(--accent-ink); background: var(--accent-soft); }
.hist-btn.is-active .ic { display: none; }
.hist-btn.is-active .ic--on { display: block; color: var(--accent); animation: tab-pop .42s var(--ease); }
/* Pengalih alat di desktop: latar biru muda dan tab aktif biru penuh, supaya terbaca sebagai pilihan fitur (bukan hiasan abu-abu). */
@media (min-width: 901px) {
  .tools { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(44, 107, 210, .22); }
  .tools__ind { background: var(--accent); box-shadow: 0 6px 14px -6px rgba(44, 107, 210, .7); }
  .tools .nav__item .ic { color: var(--accent); }
  .tools .nav__item { color: var(--ink); }
  .tools .nav__item:not(.is-active):hover { background: rgba(255, 255, 255, .65); }
  .tools .nav__item.is-active, .tools .nav__item.is-active .nav__txt small { color: #fff; }
  .tools .nav__item.is-active .ic--on { color: #fff; }
  .tools .nav__txt small { color: var(--accent-ink); }
}
/* petunjuk pertama: dua denyut cincin pada alat yang belum aktif + gelembung (sekali per perangkat) */
.nav__item.hint::after { content: ""; position: absolute; inset: 2px; border-radius: 10px; box-shadow: 0 0 0 2px var(--accent); opacity: 0; animation: tab-ring 1.4s ease-out 2; pointer-events: none; }
@keyframes tab-ring { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.04); } }
.coach { position: absolute; z-index: 5; width: min(300px, calc(100vw - 32px)); display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.45; box-shadow: 0 14px 32px -14px rgba(18, 28, 45, .5); animation: coach-in .35s var(--ease); }
.coach::before { content: ""; position: absolute; left: 50%; width: 12px; height: 12px; border-radius: 2px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.tabs .coach { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.tabs .coach::before { top: -6px; }
.coach button { justify-self: end; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
@keyframes coach-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.topbar__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.quota { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); }
.quota svg { width: 15px; height: 15px; color: var(--accent); }
.quota__max { color: var(--muted); }
.quota.is-low { border-color: #EFC9C3; background: var(--danger-soft); }
.quota.is-low svg { color: var(--danger); }
.quota.is-low .quota__max { color: #8A2A21; }      /* di latar merah muda, abu-abu muted kurang dari 4,5:1 (terlihat saat poin tinggal sedikit) */
.account { border: 0; background: transparent; padding: 0; border-radius: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--sunken); border: 1px solid var(--line); flex-shrink: 0; }
.avatar--sm { width: 34px; height: 34px; font-size: 18px; }
.avatar--lg { width: 80px; height: 80px; font-size: 42px; border-radius: 22px; cursor: pointer; transition: transform .2s var(--ease); }
.avatar--lg:hover { transform: scale(1.04); }

.main { position: relative; isolation: isolate; max-width: 1400px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 32px) 72px; outline: none; }
/* pelat "halaman sebelumnya" yang surut ke kedalaman saat pindah menu (dibuat dan dibuang oleh Motion.view; kosong, hanya hiasan) */
.view-ghost { position: absolute; z-index: -1; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); pointer-events: none; }
.demo-banner, .drive-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 20px; border-radius: var(--r-box); background: var(--warn-soft); border: 1px solid #EED8AE; font-size: 13.5px; }
.demo-banner svg { width: 18px; height: 18px; color: var(--warn); }
.drive-banner { background: var(--accent-soft); border-color: #C7D8F5; }
.drive-banner svg { width: 18px; height: 18px; color: var(--accent); fill: currentColor; }
.demo-banner span { flex: 1; min-width: 220px; }

/* ============================================================ WORKSPACE */
.workspace { display: grid; grid-template-columns: minmax(330px, 384px) minmax(0, 1fr); gap: 28px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); }
/* Bingkai form: tempat mengisi harus langsung terlihat dan beda tegas dari pratinjau di kanan.
   Cincin biru 3px + halo lembut selalu ada. Sorot cahaya tipis berputar hanya saat kolom topik masih
   kosong dan form belum disentuh (3 putaran lalu berhenti); begitu diklik, bingkai jadi biru penuh. */
.form-frame { position: sticky; top: calc(var(--topbar-h) + 20px); padding: 3px; border-radius: calc(var(--r-box) + 3px); background: rgba(44, 107, 210, .42); box-shadow: 0 0 0 5px var(--accent-soft), var(--shadow-lg); overflow: hidden; isolation: isolate; transition: background-color .25s; }
.form-frame:focus-within { background: var(--accent); }
.form-frame::before { content: none; }
.form-panel { position: relative; z-index: 1; background: var(--surface); border-radius: var(--r-box); padding: 24px; display: grid; gap: 16px; max-height: calc(100dvh - var(--topbar-h) - 46px); overflow-y: auto; scrollbar-width: thin; }
/* Contoh hasil di kanan sengaja lebih pucat dan bergaris putus: ia petunjuk, bukan tempat bekerja. */
.example__body > :not(.example__tag) { opacity: .8; filter: saturate(.6); }
.example__body .sheet, .example__body .doc { border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.form-panel__head { margin-bottom: 4px; }
.form-panel__head .muted { margin-top: 6px; font-size: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field label .muted { font-weight: 400; }
.field__error { color: var(--danger); font-size: 12.5px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-2 > .field:only-child { grid-column: 1 / -1; }
.input { width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--surface); font-size: 14.5px; transition: border-color .18s, box-shadow .18s; appearance: none; -webkit-appearance: none; }
select.input { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23697080'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
textarea.input { resize: vertical; line-height: 1.5; }
.input::placeholder { color: #8C93A1; }
.input:hover { border-color: #B6BCC7; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,107,210,.16); }
.input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,55,44,.12); }
.stepper { display: grid; grid-template-columns: 40px 1fr 40px; border: 1px solid var(--line-2); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.stepper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(44,107,210,.16); }
.stepper__btn { border: 0; background: var(--surface-2); font-size: 18px; color: var(--ink-2); }
.stepper__btn:hover { background: var(--sunken); }
.stepper__input { border: 0; border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; -moz-appearance: textfield; }
.stepper__input:focus { box-shadow: none; }
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ratio { margin-top: 6px; padding: 10px 12px 8px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); }
.ratio input[type=range] { width: 100%; accent-color: var(--accent); }
.ratio__legend { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-ctl); background: var(--sunken); }
.segmented__opt { position: relative; z-index: 1; border: 0; background: transparent; border-radius: 7px; padding: 7px 10px; font-size: 13px; font-weight: 500; color: #5B6272; transition: color .2s; }
.segmented__opt.is-on { color: var(--ink); }
.segmented__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease); }
.segmented.is-right .segmented__thumb { transform: translateX(100%); }
#f-referensi { margin-top: 8px; }
.switch { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { width: 40px; height: 24px; border-radius: 99px; background: #C5CAD3; position: relative; transition: background .2s; margin-top: 1px; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch__text b { display: block; font-size: 14px; font-weight: 600; }
.switch__text small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }

/* --------------------------------------------------------------- preview */
.preview { min-width: 0; }
.workspace > * { min-width: 0; }
.example { position: relative; }
.example__head { margin-bottom: 16px; max-width: 60ch; }
.example__head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.example__head p { margin-top: 4px; color: var(--muted); }
.example__body { position: relative; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); max-height: 640px; overflow: hidden; }
.example__tag { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }

.toolbar { position: sticky; top: calc(var(--topbar-h) + 12px); z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 10px 10px 16px; margin-bottom: 16px; border-radius: var(--r-box); background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.toolbar__title { flex: 1; min-width: 160px; }
.toolbar__title b { display: block; font-size: 14.5px; font-weight: 600; }
.toolbar__title small { color: var(--muted); font-size: 12.5px; }
.toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toggle-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 0 6px; cursor: pointer; user-select: none; }
.toggle-key input { width: 16px; height: 16px; accent-color: var(--ok); }

.menu { position: relative; }
.menu__list { position: absolute; right: 0; top: calc(100% + 6px); min-width: min(260px, calc(100vw - 16px)); max-width: calc(100vw - 16px); padding: 6px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 20; display: grid; gap: 2px; transform-origin: top right; }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; }
.menu__item svg { width: 18px; height: 18px; color: var(--muted); }
.menu__item small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-2); }
.menu__sep { height: 1px; background: var(--line); margin: 4px 6px; }
.menu__check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.menu__check input { accent-color: var(--accent); width: 16px; height: 16px; }

/* proses generate: tumpukan lembar melayang di kepala kartu, langkah tersusun di sepanjang rel yang terisi, rangka soal naik dari kedalaman */
.progress-card { padding: 26px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); }
.progress-card__head { display: flex; align-items: center; gap: 22px; }
.progress-card__head .spinner { --s: 64px; margin: 8px 6px 8px 4px; }
.progress-card h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.progress-card__head p { margin-top: 4px; }
.steps { position: relative; list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: var(--ok); transform: scaleY(var(--prog, 0)); transform-origin: top; transition: transform .9s var(--ease-io); }
.steps li { position: relative; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); transition: color .3s; animation: step-in .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
.steps li i { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); flex-shrink: 0; transition: border-color .3s, background-color .3s; }
.steps li.is-active { color: var(--ink); font-weight: 500; }
.steps li.is-active i { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 32%, var(--surface) 38%); }
.steps li.is-active i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: ping 1.7s var(--ease) infinite; }
.steps li.is-done { color: var(--ink-2); }
.steps li.is-done i { animation: step-check .5s var(--ease); }
.steps li.is-done i { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='white'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/11px no-repeat; }
.elapsed { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; margin-top: 14px; }
.ghost-sheet { margin-top: 22px; display: grid; gap: 18px; perspective: 900px; }
.ghost-q { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; transform-origin: 50% 0; animation: rise-deep .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 140ms + 350ms); }
.ghost-q > span { grid-row: span 3; }
/* kerangka menunggu: kilau melintas lewat transform (bukan menggeser latar), jadi tetap lancar saat halaman sibuk */
.skel, .fig--loading, .slide__media.is-loading { position: relative; overflow: hidden; }
.skel::after, .fig--loading::after, .slide__media.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .72) 50%, transparent 75%); transform: translateX(-100%); animation: sheen 1.6s var(--ease-io) infinite; pointer-events: none; }
.skel { height: 12px; border-radius: 6px; background: var(--sunken); }
.skel--box { height: 120px; border-radius: 12px; }

/* ----------------------------------------------------------- lembar soal */
.sheet { min-width: 0; overflow-wrap: anywhere; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 48px); }
.sheet__head { text-align: center; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.sheet__head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.sheet__head p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
/* mode cetak ujian: kop sekolah dan garis ganda */
.sheet__head--kop { border-bottom: 4px double var(--ink); }
.sheet__school { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.sheet__head--kop p:last-child { color: var(--ink-2); }
.kop-form { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); }
.kop-form > summary { display: flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); list-style: none; }
.kop-form > summary::-webkit-details-marker { display: none; }
.kop-form > summary svg { width: 16px; height: 16px; color: var(--muted); }
.kop-form__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; padding: 4px 16px 16px; }
.kop-form__ringkas { margin-left: auto; padding-left: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.answer-sheet { margin-top: 28px; padding-top: 20px; border-top: 2px dashed var(--line-2); }
.answer-sheet h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.answer-sheet__hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.ans__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.ans__row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #EEF0F3; break-inside: avoid; }
.ans__row b { min-width: 26px; font-variant-numeric: tabular-nums; }
.ans__ch { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ans__ch i { width: 28px; height: 28px; border: 1.5px solid var(--ink-2); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 600; }
.ans__dots { display: inline-block; width: 150px; border-bottom: 1.5px dotted var(--ink-2); height: 1.4em; }
.ans__note { color: var(--muted); font-size: 12.5px; font-style: italic; }
.sheet__ident { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; font-size: 13.5px; padding: 12px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sheet__ident span { display: flex; gap: 8px; }
.sheet__ident span::after { content: ""; flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.q { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 6px; padding: 20px 0; border-bottom: 1px solid #EEF0F3; }
.q:last-child { border-bottom: 0; }
.q__num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; padding-top: 2px; }
.q__body { min-width: 0; }
.q__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); }
.tag--l1 { background: var(--ok-soft); color: #186643; }
.tag--l2 { background: var(--warn-soft); color: #82540D; }
.tag--l3 { background: var(--danger-soft); color: #922E25; }
.q__text { font-size: 15.5px; line-height: 1.65; overflow-wrap: anywhere; }
/* tanda pemeriksaan soal: kuning = perlu dicek (Check), merah = kunci diragukan AI, hijau = kunci cocok. Hanya menandai, tidak ikut tercetak. */
.q__flags { display: grid; gap: 6px; justify-items: start; margin: 0 0 8px; }
.q__flags:empty { display: none; }
.flag { display: block; max-width: 100%; font-size: 13px; line-height: 1.5; }
.flag > summary, .flag__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 12px 3px 9px; border-radius: 999px; border: 1px solid; font-weight: 600; cursor: pointer; list-style: none; }
.flag > summary::-webkit-details-marker { display: none; }
.flag svg { width: 15px; height: 15px; flex-shrink: 0; }
.flag__n { font-family: var(--mono); font-size: 12px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.7); }
.flag__body { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid; display: grid; gap: 8px; justify-items: start; }
.flag__body ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.flag__body p { margin: 0; }
.flag__alasan { margin: 0; max-width: 64ch; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.flag__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flag--warn > summary, .flag--warn .flag__body, .chip--warn { background: var(--warn-soft); border-color: #EED8AE; color: #82540D; }
.flag--warn .flag__body { color: #4D3A12; }
.flag--bad > summary, .flag--bad .flag__chip, .flag--bad .flag__body { background: var(--danger-soft); border-color: #EFC9C3; color: #8A2A21; }
.flag--ok .flag__chip { background: var(--ok-soft); border-color: #C2E3D0; color: #186643; cursor: default; }
.chip--warn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.chip--warn:hover { border-color: #C9A24E; }
.chip--warn svg { width: 15px; height: 15px; }
.q.is-flagged { outline: 2px solid #D9A93F; outline-offset: 6px; border-radius: 8px; }
.q__tools { position: absolute; right: 0; top: 14px; display: flex; gap: 4px; opacity: 0; transform: translateY(-2px); transition: opacity .18s, transform .18s var(--ease); background: rgba(255,255,255,.96); padding: 3px; border-radius: var(--r-ctl); }
.q:hover .q__tools, .q:focus-within .q__tools, .q__tools.is-open { opacity: 1; transform: none; }
.tool { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: background .15s, color .15s, border-color .15s; }
.tool:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: #C7D8F2; }
.tool--danger:hover { background: var(--danger-soft); color: var(--danger); border-color: #EFCBC5; }
.tool svg { width: 16px; height: 16px; }
.opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { min-width: 0; overflow-wrap: anywhere; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 10px 6px 6px; border-radius: var(--r-ctl); border: 1px solid transparent; font-size: 15px; transition: background .25s, border-color .25s; }
.opt__letter { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 13px; background: var(--sunken); transition: background .25s, color .25s; }
.opt__mark { display: none; color: var(--ok); }
.opt__mark svg { width: 18px; height: 18px; fill: currentColor; }
.show-key .opt.is-key { background: var(--ok-soft); border-color: #C2E3D0; }
.show-key .opt.is-key .opt__letter { background: var(--ok); color: #fff; }
.show-key .opt.is-key .opt__mark { display: block; }
.answer-line { margin-top: 12px; height: 28px; border-bottom: 1.5px dotted var(--line-2); width: min(420px, 100%); }
.answer-lines { margin-top: 10px; display: grid; gap: 4px; }
.answer-lines i { display: block; height: 28px; border-bottom: 1.5px dotted var(--line-2); }
.match { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 14.5px; overflow-wrap: anywhere; }
.match__col { display: grid; gap: 6px; align-content: start; }
.match__col h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.match__cell { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); }
.keybox { display: none; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--ok-soft); font-size: 14px; }
.show-key .keybox { display: block; }
.keybox b { color: #186643; }
.keybox p + p { margin-top: 6px; color: var(--ink-2); }

/* gambar pada soal */
.fig { position: relative; margin: 12px 0 4px; border-radius: var(--r-box); border: 1px solid var(--line); background: #fff; overflow: hidden; max-width: 640px; }
.fig img { width: 100%; height: auto; max-height: 440px; object-fit: contain; margin: 0 auto; }
.fig__inner > svg { width: auto; max-width: 100%; height: auto; max-height: 440px; margin: 0 auto; }   /* hanya gambar isi; ikon bersarang di dalamnya memakai ukuran sendiri */
.fig__inner { padding: 8px; display: flex; justify-content: center; }
.fig__note { display: block; padding: 0 12px 10px; font-size: 12px; color: var(--muted); text-align: center; }
.fig__credit { display: block; padding: 0 12px 6px; font-size: 12px; line-height: 1.35; color: var(--muted); text-align: center; text-decoration: none; }
a.fig__credit:hover { text-decoration: underline; }
.fig-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .18s; }
.fig:hover .fig-tools, .fig:focus-within .fig-tools { opacity: 1; }
.fig-tools button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.96); display: grid; place-items: center; color: var(--ink-2); }
.fig-tools button:hover { color: var(--accent-ink); border-color: var(--accent); }
.fig-tools svg { width: 15px; height: 15px; }
.fig--loading { min-height: 220px; display: grid; place-items: center; background: var(--surface-2); }
.fig__status { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px; color: var(--muted); font-size: 13px; font-weight: 500; }
.fig__status .spinner { --s: 30px; margin: 4px 0; }
.fig__status > svg { width: 26px; height: 26px; }
.fig--error { border-style: dashed; background: var(--surface-2); }
.fig--error .fig__status { color: var(--ink-2); }
.fig__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.fig__actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.fig .btn svg { width: 18px; height: 18px; max-height: none; margin: 0; }   /* `.fig svg` untuk gambar isi, jangan ikut membesarkan ikon tombol */
.fig__why { max-width: 36ch; }

/* editor inline */
.editor { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-box); background: var(--surface-2); border: 1px solid var(--line); margin-top: 6px; }
.editor label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.editor__opt { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.editor__opt input[type=radio] { width: 18px; height: 18px; accent-color: var(--ok); margin: 0 auto; }
.editor__row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.q.is-busy > :not(.q__busy) { opacity: .35; transition: opacity .2s; }
.q__busy { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-weight: 500; font-size: 13.5px; color: var(--accent-ink); }
.q__busy > span { display: inline-flex; gap: 10px; align-items: center; background: var(--surface); padding: 10px 14px; border-radius: var(--r-ctl); box-shadow: var(--shadow); }
.q__busy .spinner { --s: 20px; }
.more { display: flex; justify-content: center; margin-top: 16px; }

/* ------------------------------------------------------------ slide deck */
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.slide-card { display: grid; gap: 8px; }
.slide-card__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.slide-card__cap b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.slide-card__cap .tool { width: 28px; height: 28px; margin-left: auto; }
.slide-card__cap .tool + .tool { margin-left: 0; }
.slide-card__cap .tool { flex-shrink: 0; }                          /* enam alat (ganti, pilih, gaya, unggah, hapus) tidak boleh mengecil di bawah 40 px di HP */
.theme-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.theme-row__lbl { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.theme-row .chips { margin: 0; }

/* tanda pemeriksaan deck (Check.deck) */
.deck-cek { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.deck-cek:empty { display: none; }
.slide__flags { margin: 8px 0 0; }

/* editor kerangka slide (API 2.11) */
.krg__tip { font-size: 13.5px; margin: 0 0 14px; max-width: 70ch; }
.krg { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.krg__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-box); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.krg__item.is-drag { opacity: .45; }
.krg__item.is-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.krg__grip { display: none; width: 18px; height: 40px; border-radius: 6px; cursor: grab; background: radial-gradient(circle, var(--line-2) 1.6px, transparent 1.8px) 0 0 / 9px 9px; }
.krg__no { width: 32px; height: 32px; margin-top: 5px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 600 13.5px var(--mono); }
.krg__body { display: grid; gap: 8px; min-width: 0; }
.krg__layout { max-width: 260px; }
.krg__judul { font-weight: 600; }
.krg__tools { display: grid; gap: 6px; }
.krg__tools .tool[disabled] { opacity: .35; cursor: default; }
.krg__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .krg__grip { display: block; margin-top: 1px; } }
@media (max-width: 640px) {
  .krg__item { grid-template-columns: auto minmax(0, 1fr); }
  .krg__tools { grid-column: 2; grid-auto-flow: column; justify-content: end; }
  .krg__layout { max-width: none; }
}

/* Slide: warna, font, dan bentuk berasal dari tema (variabel --s-* diisi inline oleh Render.themeStyle dari Office.THEMES,
   sumber yang sama dengan berkas .pptx). Ukuran dalam cqi: lebar slide 13,33 inci = 100cqi, jadi 1 inci = 7,5cqi dan 1 pt = 1/9,6cqi. */
.slide {
  --s-bg: #FFFFFF; --s-ink: #14233B; --s-primary: #1F4E8C; --s-accent: #C2571A; --s-accent-ink: #A64A14;
  --s-soft: #EAF0F8; --s-soft2: #F7EFE9; --s-muted: #5B6678; --s-line: #D5DAE1; --s-radius: .3cqi;
  --s-head: Georgia, 'Times New Roman', serif; --s-body: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--s-bg);
  box-shadow: var(--shadow-sm); container-type: inline-size; color: var(--s-ink); font-family: var(--s-body);
}
.slide__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 1.35cqi; background: var(--s-primary); }
.slide__num { position: absolute; right: 2.4cqi; bottom: 2cqi; font-size: 1.1cqi; color: var(--s-muted); }
.slide__inner { position: absolute; inset: 3.15cqi 5cqi 3cqi 4.9cqi; display: flex; flex-direction: column; }
.slide__title { margin: 0; min-height: 6.75cqi; font-family: var(--s-head); font-weight: 700; line-height: 1.15; outline: none; }
.slide__rule { width: 6.75cqi; height: .45cqi; background: var(--s-accent); margin: .3cqi 0 3.6cqi; flex-shrink: 0; border-radius: var(--s-radius); }
.slide__sub { margin: -3cqi 0 .4cqi; color: var(--s-muted); line-height: 1.25; }
.slide__ruang { min-height: 6.75cqi; }                                   /* sama tinggi dengan .slide__title supaya isi slide tidak bergeser */
.slide .is-ruang { visibility: hidden; pointer-events: none; }                 /* tempat kosong di aliran: kepala keluarga gaya digambar sebagai kotak absolut (Render.kotakHtml) */
.slide__caption { margin: 0; text-align: center; font-style: italic; color: var(--s-muted); line-height: 1.25; }
[contenteditable] { overflow-wrap: anywhere; }                /* gaya bawaan peramban memberi break-word, yang tidak memperkecil lebar minimum kolom grid */
.slide-card, .flag, .flag__body, .notes, .fig__note { min-width: 0; overflow-wrap: anywhere; }
.slide { overflow-wrap: anywhere; }                       /* alamat web atau kata sangat panjang patah di dalam kartu, tidak melebarkan kolom */
.slide__body, .slide__bullets, .slide__inner > * { min-width: 0; }
.slide__body { flex: 1; min-height: 0; display: grid; gap: 2.2cqi; grid-template-columns: 1fr; }
.slide__body.has-media { grid-template-columns: 6.2fr 5.5fr; }
.slide__body.media-left { grid-template-columns: 5.6fr 6.2fr; }
/* diagram lebar (alur, tabel ikon): butir di atas, diagram selebar slide di bawahnya (sama dengan pptx) */
.slide__body.has-media.is-wide { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.slide__bullets { margin: 0; padding: 0 0 0 2.8cqi; line-height: 1.2; display: grid; gap: .83cqi; align-content: start; list-style: var(--s-penanda, square); }     /* --s-penanda: karakter penanda keluarga gaya (Office.penandaKeluarga), kosong = kotak */
.slide__bullets li::marker { color: var(--s-ink); }
.slide [contenteditable]:focus { background: #FFF6CC; border-radius: 4px; box-shadow: 0 0 0 .4cqi #FFF6CC; outline: none; }
.slide__media { min-height: 0; display: grid; place-items: center; border-radius: 1cqi; overflow: hidden; position: relative; }
/* hanya gambar/diagram langsung di dalam kotak media; ikon di dalam .fig__status (keadaan gagal) tidak boleh ikut membesar dan menutupi tombol */
.slide__media > img, .slide__media > svg { width: 100%; height: 100%; object-fit: contain; }
.slide__media .fig__status > svg { width: 3.4cqi; height: 3.4cqi; flex-shrink: 0; }
.slide__media.is-loading { background: #EFECE5; }
.slide__media .fig__status { font-size: 1.6cqi; padding: 1cqi; gap: .6cqi; }
.slide__media .fig__actions { gap: .6cqi; }
.slide__media .fig__actions .btn { font-size: 1.35cqi; padding: .55cqi 1.1cqi; min-height: 0; }
.slide__media .fig__actions .btn svg { width: 1.7cqi; height: 1.7cqi; }
.slide__media .spinner { --s: 3.4cqi; }
.slide__credit { position: absolute; right: .8cqi; bottom: .8cqi; max-width: 94%; padding: .3cqi .8cqi; border-radius: .6cqi; background: rgba(255, 255, 255, .9); color: #3D4757; font-size: 1.15cqi; line-height: 1.3; text-decoration: none; }
.slide-note { text-align: left; padding: 0 2px; }

/* tata letak pedagogis (API 2.11): pemantik, contoh dan bukan contoh, langkah, aktivitas, kosakata, cek paham, foto penuh */
.ped { flex: 1; min-height: 0; display: grid; gap: 2cqi; }
.ped-panel, .ped-concept, .ped-col, .ped-card, .ped-problem, .ped-term, .ped-q { background: var(--s-soft); border: .15cqi solid var(--s-line); border-radius: var(--s-radius); }
.ped--pemantik.has-media { grid-template-columns: 6.9fr 4.9fr; }
.ped-panel { padding: 2.6cqi 3.4cqi; display: grid; grid-template-rows: auto 1fr; gap: 1.2cqi; min-height: 0; }
.ped-badge { width: 6.4cqi; height: 6.4cqi; border-radius: 50%; background: var(--s-primary); display: grid; place-items: center; font: 800 3.6cqi var(--s-head); font-style: normal; }
.ped-question { margin: 0; align-self: center; font-family: var(--s-head); font-weight: 700; line-height: 1.2; outline: none; }
.ped--cb { grid-template-rows: auto 1fr; }
.ped--cb:not(.has-concept) { grid-template-rows: 1fr; }
.ped-concept { margin: 0; padding: 1.7cqi 2.4cqi; font-weight: 700; line-height: 1.2; outline: none; }
.ped-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqi; min-height: 0; }
.ped-col { padding: 1.9cqi 2.4cqi; display: grid; grid-template-rows: auto 1fr; gap: 1.2cqi; min-height: 0; }
.ped-col + .ped-col { background: var(--s-soft2); }
.ped-col__head { display: flex; align-items: center; gap: 1.4cqi; font-family: var(--s-head); font-weight: 700; font-size: 2.3cqi; }
.ped-mark { width: 4.5cqi; height: 4.5cqi; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 2.1cqi; flex-shrink: 0; }
.ped-col ul { margin: 0; padding-left: 2.8cqi; display: grid; gap: .83cqi; align-content: start; line-height: 1.2; list-style: square; }
.ped--langkah { display: flex; flex-direction: column; gap: 1.6cqi; align-content: start; }
.ped-problem { margin: 0 0 1.2cqi; padding: 1.7cqi 2.4cqi; line-height: 1.25; flex-shrink: 0; }
.ped-problem b { color: var(--s-primary); margin-right: .8cqi; }
.ped-step { display: flex; align-items: center; gap: 2cqi; padding: 0 2.4cqi; background: var(--s-bg); border: .15cqi solid var(--s-line); border-radius: var(--s-radius); line-height: 1.2; flex-shrink: 0; overflow: hidden; }
.ped-step i { font-style: normal; font-weight: 800; flex-shrink: 0; }
.ped-result { margin: 1.2cqi 0 0; padding: 1.2cqi 2.4cqi; background: var(--s-primary); border-radius: var(--s-radius); font-weight: 700; flex-shrink: 0; }
.ped-result b { margin-right: 1cqi; }
.ped--aktivitas.has-side { grid-template-columns: 8.4fr 3.35fr; }
.ped-card { padding: 2.4cqi 3cqi; min-height: 0; }
.ped-card ol { margin: 0; padding-left: 3.4cqi; display: grid; gap: 1.1cqi; line-height: 1.25; }
.ped-side { display: grid; grid-auto-rows: 1fr; gap: 1.9cqi; min-height: 0; }
.ped-stat { display: grid; place-items: center; align-content: center; gap: .6cqi; text-align: center; background: var(--s-bg); border: .15cqi solid var(--s-line); border-radius: var(--s-radius); padding: 1cqi; font: inherit; color: inherit; }
button.ped-stat { cursor: pointer; }
button.ped-stat:hover { border-color: var(--s-primary); }
.ped-stat__n { font-family: var(--s-head); font-weight: 800; font-size: 6.25cqi; color: var(--s-primary); line-height: 1; outline: none; }
.ped-stat__u { font-family: var(--s-head); font-weight: 700; font-size: 2.3cqi; }
.ped-dots { display: flex; gap: 1.5cqi; justify-content: center; margin-bottom: .8cqi; }
.ped-dots i { width: 3.75cqi; height: 3.75cqi; border-radius: 50%; display: block; }
.ped--kosakata { grid-auto-rows: 1fr; gap: 1.9cqi; }
.ped--kosakata.dua-kolom { grid-template-columns: 1fr 1fr; }
.ped-term { display: grid; grid-template-columns: 7.5cqi 1fr; gap: 2cqi; align-items: center; padding: 0 2.2cqi; min-height: 0; overflow: hidden; }
.ped-term:nth-child(even) { background: var(--s-soft2); }
.ped-ico { width: 7.5cqi; height: 7.5cqi; border-radius: 50%; display: grid; place-items: center; font: 800 3.1cqi var(--s-head); }
.ped-ico svg { width: 100%; height: 100%; }
.ped-term__word { margin: 0; font-family: var(--s-head); font-weight: 700; line-height: 1.15; outline: none; }
.ped-term__meaning { margin: .5cqi 0 0; line-height: 1.2; outline: none; }
.ped--cek { align-content: start; gap: 1.9cqi; }
.ped-q { display: flex; align-items: center; gap: 2.4cqi; padding: 0 2.4cqi; overflow: hidden; }
.ped-q:nth-child(even) { background: var(--s-soft2); }
.ped-q i { width: 5.25cqi; height: 5.25cqi; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-family: var(--s-head); font-size: 2.5cqi; flex-shrink: 0; }
.ped-q span { line-height: 1.2; }
.slide--foto-penuh { background: var(--s-ink); }
.slide__bleed { position: absolute; inset: 0; }
.slide__bleed .slide__media { width: 100%; height: 100%; border-radius: 0; }
.slide__bleed .slide__media > img { object-fit: cover; }
.slide__band { position: absolute; left: 0; right: 0; bottom: 0; height: 14.6cqi; background: rgba(0, 0, 0, .65); z-index: 1; pointer-events: none; }
.slide__band p { position: absolute; left: 5.25cqi; right: 5.25cqi; top: 1.5cqi; bottom: 4.5cqi; margin: 0; display: flex; align-items: center; font-family: var(--s-head); font-weight: 700; color: #fff; line-height: 1.2; outline: none; pointer-events: auto; }
.slide--foto-penuh .slide__credit { z-index: 2; }

/* ornamen tema */
.deco { position: absolute; pointer-events: none; box-sizing: border-box; }
.deco--o, .deco--r, .deco--rc, .deco--pill, .deco--tri { background: var(--c); }
.deco--o, .deco--ring { border-radius: 50%; }
.deco--ring, .deco--fr { border: .15cqi solid var(--c); }
.deco--rc { border-radius: var(--s-radius); }
.deco--pill { border-radius: 99cqi; }
.deco--tri { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.star8 { position: absolute; pointer-events: none; box-sizing: border-box; border: .15cqi solid var(--c, var(--s-accent)); }
.star8::after { content: ""; position: absolute; inset: -.15cqi; border: .15cqi solid var(--c, var(--s-accent)); transform: rotate(45deg); }
.slide--cover::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.65cqi; background: var(--s-primary); }
.slide--cover .slide__inner { inset: 11.2cqi 5cqi 5cqi 6cqi; display: grid; grid-template-columns: 64.5cqi 1fr; gap: 2cqi; align-content: start; }
.slide--cover.has-media .slide__inner { grid-template-columns: 49.5cqi 1fr; }
.slide--cover .slide__kicker { margin: 0 0 1.4cqi; font-size: 1.7cqi; font-weight: 700; color: var(--s-accent-ink); }
.slide--cover .slide__title { min-height: 0; }
.slide--cover .slide__rule { margin: 1.4cqi 0 1cqi; }
.slide--cover .slide__sub { margin: 0; }
.slide--closing .slide__inner { inset: 16.5cqi auto 5cqi 6.75cqi; width: 64.5cqi; }
.slide--closing .slide__title { min-height: 0; }
.slide--closing .slide__sub { margin-bottom: 1cqi; }

/* tata letak */
.quiz { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.quiz-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1.4cqi; margin: 2cqi 0 1cqi; }
.quiz-opt { display: flex; gap: 1.4cqi; align-items: center; padding: 1cqi 1.6cqi; border-radius: var(--s-radius); background: var(--s-bg); border: .15cqi solid var(--s-line); }
.quiz-opt i { width: 4.5cqi; height: 4.5cqi; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; flex-shrink: 0; font-size: 1.7cqi; }
.quiz-q { margin: 0; font-weight: 700; line-height: 1.2; }
/* Kotak dari Office.rancang (Fase 12A): berposisi absolut di dalam .slide; satuan cqi dari inci (x 7,5) dan pt (/ 9,6), jadi sama dengan berkas .pptx. */
.kt { position: absolute; box-sizing: border-box; margin: 0; }
.kt--teks { line-height: 1.2; }
.kt__t { display: block; outline: none; }
.kt--tombol { display: flex; align-items: flex-start; padding: 0; text-align: inherit; font: inherit; cursor: pointer; margin: 0; }          /* kotak teks yang juga tombol (bentuk kerja kegiatan): gaya tombol dibuang, tampil seperti kotak teks */
.kt--tombol > .kt__t { flex: 1 1 auto; }
.kt--tombol:focus-visible { outline: .3cqi solid var(--s-accent); outline-offset: .2cqi; }
.slide.is-gelap { background: var(--s-ink); }
.kt--daftar .slide__bullets { padding-left: 2.6cqi; }                  /* butir dalam kotak engine: jarak penanda sama dengan BULLET_W pptx (0,35 inci) */
.kt--daftar .slide__bullets li::marker { color: currentColor; }
.kt--gambar > .slide__media { width: 100%; height: 100%; }            /* kotak gambar engine (foto, grafik, tabel) diisi media() slide */
.kt--gambar.is-penuh > .slide__media { border-radius: 0; }
.kt--gambar.is-penuh > .slide__media > img { object-fit: cover; }
.cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1cqi; margin-bottom: 1cqi; }
.col-box { border-radius: var(--s-radius); padding: 2.2cqi; background: var(--s-soft); border: .1cqi solid var(--s-line); }
.col-box + .col-box { background: var(--s-soft2); }
.col-box h4 { margin: 0 0 1cqi; font-family: var(--s-head); color: var(--s-primary); }
.col-box + .col-box h4 { color: var(--s-accent-ink); }
.col-box ul { margin: 0; padding-left: 2.8cqi; display: grid; gap: .83cqi; line-height: 1.2; list-style: square; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-auto-flow: column; grid-template-rows: 6cqi 3.75cqi auto; row-gap: 1.2cqi; margin: auto 0; align-content: start; }
.timeline::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 8.9cqi; height: .4cqi; background: var(--s-line); border-radius: 1cqi; }
.timeline__label { align-self: end; text-align: center; font-family: var(--s-head); font-weight: 700; line-height: 1.15; padding: 0 .6cqi; }
.timeline__dot { position: relative; z-index: 1; justify-self: center; width: 3.75cqi; height: 3.75cqi; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.45cqi; }
.timeline__text { text-align: center; line-height: 1.2; padding: 0 .6cqi; }
.bignum { display: grid; grid-template-columns: 6.8fr 5.65fr; gap: 0; margin: auto 0; align-items: start; }
.bignum__num { align-self: center; text-align: center; font-family: var(--s-head); font-weight: 700; color: var(--s-primary); line-height: 1; white-space: nowrap; padding-top: 4cqi; }
.bignum__side { border-left: .3cqi solid var(--s-accent); padding-left: 2cqi; display: grid; gap: 1.5cqi; align-content: start; }
.bignum__cap { margin: 0; font-weight: 700; line-height: 1.2; }
.quote { position: relative; display: grid; justify-items: center; text-align: center; margin: auto 0; }
.quote__mark { position: absolute; left: 1cqi; top: -2.5cqi; font-family: var(--s-head); font-size: 11.5cqi; line-height: 1; font-weight: 700; color: var(--s-accent); }
.quote__text { margin: 3cqi 5cqi 0; font-family: var(--s-head); font-style: italic; line-height: 1.25; }
.quote__src { display: grid; justify-items: center; gap: 1cqi; margin-top: 3cqi; color: var(--s-muted); }
.quote__src i { display: block; width: 11.25cqi; height: .25cqi; background: var(--s-accent); }
.notes { font-size: 13px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; }
.notes summary { cursor: pointer; font-weight: 500; color: var(--muted); font-size: 12.5px; list-style: none; display: flex; align-items: center; gap: 6px; }
.notes summary::-webkit-details-marker { display: none; }
.notes p { white-space: pre-line; }
.notes svg { width: 15px; height: 15px; }
.notes p { margin-top: 6px; }

/* -------------------------------------------------------- dokumen modul */
.doc { min-width: 0; width: 100%; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: var(--shadow-sm); padding: clamp(22px, 5vw, 56px); max-width: 860px; }
/* Fase 11C: teks dokumen patah di mana saja bila satu kata atau alamat web lebih panjang daripada kolomnya; gambar dan grafik tidak lebih lebar daripada kolom */
.doc p, .doc li, .doc td, .doc th, .doc h3, .doc h4, .doc__sub, .doc-tujuan, .doc-guru, .tugas__ins { overflow-wrap: anywhere; word-break: normal; }
.doc img, .doc svg, .doc .fig { max-width: 100%; height: auto; }
.doc .fig svg { height: auto; }
/* Tabel dalam wadah gulir: tabel yang lebih lebar daripada layar digeser ke samping di dalam wadahnya, halaman tidak ikut melebar */
.tbl-gulir { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tbl-gulir > table { min-width: 100%; margin: 0; }
/* di layar kata utuh menentukan lebar kolom terkecil (break-word tidak mengecilkan min-content); kata yang lebih panjang daripada layar melebarkan tabel, dan wadah yang menggulir. Hanya cetak yang memotong kata (aturan di @media print). */
.tbl-gulir > table th, .tbl-gulir > table td { overflow-wrap: break-word; }
.tbl-gulir--doc-table { margin: 10px 0; }
.tbl-gulir--rj { margin: 8px 0 0; }
.tbl-gulir--doc__ident { margin: 22px 0 6px; }
.tbl-gulir--lk-kepala { margin: 18px 0 4px; }
.tbl-gulir.is-luap { box-shadow: inset -16px 0 14px -14px rgba(18, 28, 45, .22); }
.tbl-gulir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tbl-tip { display: none; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.tbl-gulir.is-luap + .tbl-tip { display: block; }
.doc h2.doc__title { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.doc__sub { text-align: center; color: var(--muted); margin-top: 4px; }
.doc__ident { width: 100%; border-collapse: collapse; margin: 22px 0 6px; font-size: 14px; }
.doc__ident td { padding: 6px 10px; border: 1px solid var(--line); vertical-align: top; }
.doc__ident td:first-child { width: 34%; font-weight: 600; background: var(--surface-2); }
.doc-sec { position: relative; padding-top: 6px; }
.doc-sec h3 { font-size: 17px; font-weight: 600; color: var(--accent-ink); margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.doc-sec h3 .tool { margin-left: auto; width: 28px; height: 28px; opacity: 0; transition: opacity .18s; }
.doc-sec:hover h3 .tool, .doc-sec:focus-within h3 .tool { opacity: 1; }
.doc-sec h4 { font-size: 15px; margin: 14px 0 6px; }
.doc-sec p { margin: 6px 0; font-size: 14.5px; line-height: 1.65; }
.doc-sec ul, .doc-sec ol { margin: 6px 0; padding-left: 22px; font-size: 14.5px; line-height: 1.6; }
.doc-sec li { margin: 3px 0; }
.doc-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.doc-table th, .doc-table td { border: 1px solid #C9CFD8; padding: 7px 9px; vertical-align: top; text-align: left; }
.doc-table th { background: var(--accent-soft); }
.doc-sec .fig { margin: 12px auto; }

/* ---- LKPD siap cetak (Fase 10C): kepala, tujuan, tugas dengan ruang jawab, refleksi, kunci guru. Garis dan kotak dari border agar ikut tercetak. */
.field__hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13.5px; font-weight: 400; color: var(--ink-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.doc--lkpd { position: relative; }
.lk-versi { position: absolute; top: 14px; right: 18px; font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.lk-kepala { width: 100%; border-collapse: collapse; margin: 18px 0 4px; font-size: 14px; }
.lk-kepala td { padding: 8px 10px; border: 1px solid var(--line-2); height: 42px; vertical-align: middle; }
.lk-kepala__l { width: 15%; font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.lk-kepala__v { width: 35%; }
.doc-tujuan { display: grid; gap: 2px; margin: 14px 0 2px; padding: 12px 14px; border: 1px solid #C7D8F5; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-ink); font-size: 14.5px; line-height: 1.55; }
.doc-tujuan b { font-size: 12.5px; }
.tugas { list-style: none; counter-reset: tg; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tugas__item { min-width: 0; counter-increment: tg; display: flex; gap: 8px; align-items: flex-start; }
.tugas__item::before { content: counter(tg) "."; flex: none; min-width: 22px; font-weight: 600; font-size: 14.5px; line-height: 1.6; }
.tugas__ikon { flex: none; font-size: 19px; line-height: 1.4; }
.tugas__isi { flex: 1; min-width: 0; }
.tugas__ins { font-size: 14.5px; line-height: 1.6; }
.titik { display: inline-block; min-width: 96px; border-bottom: 1.5px solid #6B7280; margin: 0 3px; height: 1em; vertical-align: baseline; }
.rj { margin-top: 8px; }
.rj--garis i { display: block; height: 30px; border-bottom: 1px solid #9AA3B2; }
.rj--kotak { border: 1.5px dashed #9AA3B2; border-radius: 8px; }
.rj--kecil { height: 70px; } .rj--sedang { height: 130px; } .rj--besar { height: 210px; }
.rj--tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 0; }
.rj--tabel th, .rj--tabel td { border: 1px solid #9AA3B2; padding: 6px 9px; text-align: left; vertical-align: middle; }
.rj--tabel th { background: var(--accent-soft); font-weight: 600; }
.rj--tabel td { height: 36px; }
.rj--pilihan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.cb { display: inline-block; width: 15px; height: 15px; border: 1.5px solid #6B7280; border-radius: 3px; margin-right: 8px; vertical-align: -3px; }
.rj--jodoh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: min(56px, 6vw); font-size: 14.5px; }
.rj--jodoh ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.rj__kiri { counter-reset: jk; } .rj__kanan { counter-reset: jr; }
.rj__kiri li, .rj__kanan li { display: flex; align-items: center; gap: 8px; }
.rj__kiri li .dot { margin-left: auto; }
.rj__kiri li::before { counter-increment: jk; content: counter(jk) "."; font-weight: 600; margin-right: 2px; }
.rj__kanan li::before { counter-increment: jr; content: counter(jr, upper-alpha) "."; font-weight: 600; order: -1; }
.rj__kanan li .dot { order: -2; }
.dot { width: 11px; height: 11px; border: 1.5px solid #6B7280; border-radius: 50%; flex: none; }
.doc-refleksi__ket { font-size: 13.5px; color: var(--muted); margin: 0 0 4px; }
.rj--refleksi td:not(:first-child), .rj--refleksi th:not(:first-child) { text-align: center; width: 84px; }
.wajah { font-size: 22px; line-height: 1; }
.doc-guru { margin: 28px 0 0; padding: 16px 18px; border: 1.5px dashed #C9A24E; border-radius: var(--r-ctl); background: var(--warn-soft); }
.doc-guru h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.doc-guru__tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #fff; color: var(--warn); border: 1px solid #E5CC95; }
.doc-guru__ket { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
.doc-guru h4 { font-size: 14.5px; margin: 12px 0 4px; }
.doc-guru p, .doc-guru li { font-size: 14px; line-height: 1.6; }
.doc-guru ul, .doc-guru ol { margin: 4px 0; padding-left: 22px; }
@media (max-width: 640px) { .rj--jodoh { column-gap: 24px; } .rj--tabel { font-size: 12.5px; } .lk-kepala td { padding: 6px 7px; } }

.legacy-card { text-align: center; padding: 48px 24px; }
.legacy-card .modal__icon { margin: 0 auto 16px; }
.legacy-card h2 { font-size: 22px; font-weight: 600; }
.legacy-card p { color: var(--muted); margin: 8px auto 22px; max-width: 44ch; }

/* ================================================================ PAGES */
.page { max-width: 1080px; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page__head .muted { margin-top: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
/* Mapel dan Kelas bersebelahan di layar lebar dengan pilihan cepat mapel melebar di bawahnya; di HP tersusun mapel, pilihan cepat, kelas (urutan sama dengan urutan fokus). */
.grid-mapel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.grid-mapel > .field:first-child { grid-column: 1; grid-row: 1; }
.grid-mapel > .field:last-child { grid-column: 2; grid-row: 1; }
.grid-mapel > .mapel-chips { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.chip { border: 1px solid var(--line-2); background: var(--surface); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background .18s, color .18s, border-color .18s; }
.chip:hover { border-color: var(--ink-2); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.file-list { display: grid; gap: 8px; }
.file-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .18s, transform .18s var(--ease); }
.file-row:hover { border-color: var(--line-2); transform: translateY(-1px); }
.file-row__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.file-row__icon svg { width: 22px; height: 22px; }
.file-row__name { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-row__meta { font-size: 12.5px; color: var(--muted); }
.file-row__go { color: var(--muted); }
.file-row__go svg { width: 18px; height: 18px; }
/* Draf "Di perangkat ini" di Riwayat dan pengingat "Belum disimpan" (Fase 13A). Kuning/hijau hanya sebagai status. */
.draf { display: grid; gap: 8px; margin-bottom: 20px; }
.draf[hidden] { display: none; }
.draf__judul { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.draf__judul--drive { margin: 4px 0 -2px; }
.draf__list { display: grid; gap: 8px; }
.draf-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); }
.draf-row__isi { display: grid; min-width: 0; }
.draf-row__judul { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.draf-row__label { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.draf-row__label.is-belum { background: var(--warn-soft); color: #85540C; }
.draf-row__label.is-ok { background: var(--ok-soft); color: #166A45; }
.draf-row__aksi { display: flex; gap: 6px; }
@media (max-width: 640px) {
  .draf-row { grid-template-columns: 42px minmax(0, 1fr); }
  .draf-row__label { grid-column: 2; justify-self: start; }
  .draf-row__aksi { grid-column: 1 / -1; }
  .draf-row__aksi .btn { flex: 1; }
}
.belum-simpan { display: flex; width: fit-content; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.belum-simpan[hidden] { display: none; }
.belum-simpan__titik { width: 8px; height: 8px; border-radius: 50%; background: #E3A817; flex: none; }
.auth-tetap { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.auth-tetap input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.auth-tetap b { display: block; font-size: 14px; }
.auth-tetap small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted-sunken); }
.sesi-kartu { display: grid; gap: 8px; justify-items: start; padding-top: 4px; border-top: 1px solid var(--line); }
.sesi-kartu[hidden], .drive-hubung[hidden] { display: none; }
.drive-hubung { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-box); background: var(--surface-2); border: 1px solid var(--line); }
.auth-sisa { margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.auth-sisa b { color: var(--ink); }
.keluar__ket { margin: -4px 0 4px; }
.list-empty { padding: 40px 20px; border-radius: var(--r-box); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.list-empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; font-weight: 600; }

.profile-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
.profile-card { padding: 24px; display: grid; gap: 18px; }
.profile-card__id { display: flex; gap: 18px; align-items: center; }
.profile-card__id h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.badge { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.stats div { padding: 14px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); }
.stats dt { font-size: 12.5px; color: var(--muted); }
.stats dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.stats dd b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.stats dd span { color: var(--muted); font-size: 14px; margin-left: 4px; }
.stats .is-low b { color: var(--danger); }
.trial-note { margin: 0; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; line-height: 1.55; }
.trial-note[hidden] { display: none; }
.avatar-picker__grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.avatar-picker__grid button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 24px; transition: transform .15s var(--ease), border-color .15s; }
.avatar-picker__grid button:hover { transform: translateY(-2px); border-color: var(--accent); }
.plan-card { padding: 24px; display: grid; gap: 14px; grid-row: span 2; }
.install-card { padding: 24px; display: grid; gap: 12px; }
.install-help { margin: 0; line-height: 1.55; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.ticks li { display: flex; gap: 10px; align-items: center; }
.ticks svg { width: 18px; height: 18px; color: var(--accent); }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); }
.price__term { font-size: 13px; font-weight: 500; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.price__term em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; }
.price b { font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.price small { font-size: 12px; color: var(--muted); }
.price s { margin-right: 4px; }
.price--best { border: 1.5px solid var(--accent); }
.support-card { padding: 22px; display: grid; gap: 10px; }
.contact { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; font-size: 14px; transition: border-color .18s, background .18s; }
.contact:hover { border-color: var(--accent); background: var(--accent-soft); }
.contact svg { width: 20px; height: 20px; color: var(--accent); }
.contact small { display: block; font-size: 12px; color: var(--muted); }

/* ================================================================ MODAL */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; background: rgba(18, 21, 28, .42); backdrop-filter: blur(3px); }
.modal__card { position: relative; width: min(420px, 100%); background: var(--surface); border-radius: var(--r-box); padding: 28px; box-shadow: var(--shadow-lg); display: grid; gap: 12px; text-align: center; }
.modal__card h2 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.modal__close { position: absolute; right: 12px; top: 12px; }
.modal__icon { width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.modal__icon svg { width: 26px; height: 26px; }
.modal__icon--ok { background: var(--ok-soft); color: var(--ok); }
.modal--soft .modal__card { justify-items: center; }
.photo-card { width: min(760px, 100%); max-height: min(92vh, 760px); overflow: auto; text-align: left; align-content: start; }
.photo-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); padding: 0; cursor: pointer; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile:hover, .photo-tile:focus-visible { border-color: var(--accent); }
.photo-tile.is-busy { opacity: .55; cursor: progress; }
.photo-tile__lic { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.photo-credit-note { margin-top: 4px; }
@media (max-width: 640px) {
  .modal--sheet { align-items: end; padding: 0; }
  .modal--sheet .photo-card { width: 100%; max-height: 90vh; border-radius: 16px 16px 0 0; padding: 20px 16px 24px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Pemuat "Lapisan": tiga lembar bertumpuk di ruang miring. Lembar atas dan tengah terangkat bergelombang (jeda 0,22 detik antar lembar:
   waktu sebagai sumbu keempat), seluruh tumpukan berputar pelan. Elemen ini sendiri lembar paling bawah, dua lembar lain adalah ::before dan ::after,
   jadi cukup <span class="spinner"> tanpa isi. Ukuran lewat --s. Hanya transform; gerak dikurangi: tumpukan diam, lembar atas berdenyut (opacity). */
.spinner { --s: 38px; --b: max(1.5px, calc(var(--s) * .05)); position: relative; display: inline-block; flex-shrink: 0; width: var(--s); height: var(--s); box-sizing: border-box; border-radius: 22%; border: var(--b) solid rgba(44, 107, 210, .4); background: rgba(44, 107, 210, .08);
  transform-style: preserve-3d; transform: perspective(calc(var(--s) * 8)) rotateX(58deg) rotateZ(-36deg); animation: lyr-turn 4.8s var(--ease-io) infinite alternate; }
.spinner::before, .spinner::after { content: ""; position: absolute; inset: calc(var(--b) * -1); box-sizing: border-box; border-radius: inherit; border: var(--b) solid; }
.spinner::before { border-color: rgba(44, 107, 210, .62); background: rgba(44, 107, 210, .12); animation: lyr-lift-a 1.8s var(--ease-io) infinite; }
.spinner::after { border-color: var(--accent); background: linear-gradient(var(--accent), var(--accent)) 24% 34% / 46% 9% no-repeat, linear-gradient(var(--accent), var(--accent)) 24% 58% / 30% 9% no-repeat, rgba(233, 240, 252, .9); animation: lyr-lift-b 1.8s var(--ease-io) .22s infinite; }
.progress { position: relative; width: 100%; height: 4px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.progress__bar { height: 100%; width: 100%; background: var(--accent); border-radius: 99px; transform: scaleX(.08); transform-origin: left; transition: transform .7s var(--ease); }
.progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 1.6s var(--ease-io) infinite; }

/* ================================================================ TOAST */
.toasts { position: fixed; z-index: var(--z-toast); right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 12px 12px 12px 14px; border-radius: var(--r-box); background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; }
.toast svg { width: 20px; height: 20px; }
.toast--ok svg { color: #7DD3A8; } .toast--err svg { color: #FF9F94; } .toast--info svg { color: #9EC2F5; }
.toast button { border: 0; background: transparent; color: rgba(255,255,255,.7); padding: 0 2px; font-size: 18px; line-height: 1; }
.toast__action { color: #9EC2F5 !important; font-size: 13px !important; font-weight: 600; text-decoration: underline; }

.alert { padding: 10px 12px; border-radius: var(--r-ctl); font-size: 13.5px; font-weight: 500; }
.alert--danger { background: var(--danger-soft); color: #8A2A21; }
.alert--info { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }

/* =========================================================== ANIMASI */
/* Bahasa gerak "Lapisan": lembar bertumpuk di ruang 3D (pemuat, perpindahan menu, kartu yang naik dari kedalaman) dan waktu sebagai sumbu
   keempat (gelombang berjeda antar lembar, kilau yang melintas). Semuanya hanya transform dan opacity (dijaga tests/unit/animasi-css.test.js).
   Keluar dan masuk memakai ease-out; di layar memakai --ease-io; pantulan hanya pada penanda menu (--spring). */
@keyframes lyr-turn { from { transform: perspective(calc(var(--s) * 8)) rotateX(58deg) rotateZ(-36deg); } to { transform: perspective(calc(var(--s) * 8)) rotateX(58deg) rotateZ(-8deg); } }
@keyframes lyr-lift-a { 0%, 100% { transform: translateZ(calc(var(--s) * .04)); } 50% { transform: translateZ(calc(var(--s) * .42)); } }
@keyframes lyr-lift-b { 0%, 100% { transform: translateZ(calc(var(--s) * .08)); } 50% { transform: translateZ(calc(var(--s) * .84)); } }
@keyframes sheen { to { transform: translateX(100%); } }
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes coin { 0% { transform: perspective(120px) rotateY(0); } 60%, 100% { transform: perspective(120px) rotateY(360deg); } }
@keyframes step-in { from { opacity: 0; transform: perspective(500px) translateY(10px) rotateX(-55deg); } to { opacity: 1; transform: none; } }
@keyframes step-check { 0% { transform: scale(.5); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes rise-deep { from { opacity: 0; transform: translateY(16px) translateZ(-70px) rotateX(10deg); } to { opacity: 1; transform: none; } }
@keyframes modal-veil { from { opacity: 0; } }
@keyframes modal-deep { from { opacity: 0; transform: perspective(900px) translateY(10px) translateZ(-70px) rotateX(-7deg); } }
@keyframes soft-pulse { 50% { opacity: .62; } }
#busy-modal:not([hidden]) { animation: modal-veil .25s ease-out; }
#busy-modal:not([hidden]) .modal__card { animation: modal-deep .5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* "kurangi gerak" berarti lebih sedikit dan lebih lembut, bukan nol: penanda sibuk tetap hidup lewat denyut opacity tanpa perpindahan */
  .spinner::after, .skel, .fig--loading, .slide__media.is-loading { animation: soft-pulse 1.8s ease-in-out infinite !important; }
  .spinner::before { animation: none !important; transform: translateZ(calc(var(--s) * .3)); }
  .spinner::after { transform: translateZ(calc(var(--s) * .6)); }
  .steps li.is-active i::after, .nav__busy::after { display: none; }
}

@keyframes frame-beam { to { transform: rotate(360deg); } }
@keyframes frame-beam-out { to { opacity: 0; } }
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .form-frame:has(#f-topik:placeholder-shown):not(:focus-within)::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--accent) 99%, transparent 100%);
    animation: frame-beam 4s linear 3, frame-beam-out .6s ease 12s forwards;
  }
}

/* ======================================================== RESPONSIF */
@media (max-width: 1100px) {
  .nav__txt small { display: none; }
}
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .form-frame { position: static; }
  .form-panel { max-height: none; }
  .profile-grid { grid-template-columns: 1fr; }
  .plan-card { grid-row: auto; }
}
/* Satu kolom untuk layar sempit DAN layar tegak yang lebar (tablet tegak, HP dengan "situs desktop"): dua kolom di layar setinggi itu
   menyisakan ruang kosong besar dan mendorong contoh hasil ke bawah. Dua kolom hanya untuk layar mendatar yang lebar. */
@media (max-width: 960px), (orientation: portrait) {
  .auth { grid-template-columns: 1fr; grid-template-areas: "intro" "panel" "stage" "kaki"; grid-template-rows: auto auto auto auto; align-content: start; }
  .auth__headline { margin-top: 32px; }
  .auth__panel { border-left: 0; background: transparent; padding: 24px clamp(24px, 5vw, 72px); }
  .auth__sticky { position: static; min-height: 0; display: block; place-items: normal; padding: 0; }
  .auth-card { width: 100%; max-width: 440px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); }
  .auth__stage { align-self: start; padding-top: 8px; }
  .stage { height: 310px; }
}
@media (min-width: 961px) and (orientation: portrait) {
  .auth { max-width: 820px; margin-inline: auto; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .topbar__inner { gap: 12px; }
  .topbar__inner { display: flex; }
  .topbar__end { margin-left: auto; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); justify-content: stretch; align-items: stretch; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 2px solid var(--accent); box-shadow: 0 -8px 20px -12px rgba(44, 107, 210, .55); z-index: var(--z-header); }
  .tools { display: contents; }
  .tools__ind, .hist-btn { display: none; }
  .nav__item { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 0; padding: 0 4px; border-radius: 0; background: transparent; color: var(--muted); text-align: center; }
  .nav__item .ic { width: 22px; height: 22px; }
  .nav__txt small { display: none; }
  .nav__txt strong { font-size: 12px; font-weight: 500; }
  .nav__item.is-active { color: var(--accent-ink); }
  .nav__item.is-active .nav__txt strong { font-weight: 700; }
  .nav__item.is-active .ic--on { animation: nav-hop .5s var(--ease); }
  .nav__item.is-active .nav__txt strong { animation: nav-label .4s var(--ease); }
  .nav__item--mobile { display: flex; }
  .nav__busy { top: 8px; right: calc(50% - 18px); }
  .tabs__pill { position: absolute; top: 5px; left: 6px; z-index: 0; display: grid; place-items: center; width: calc((100% - 12px) / 5); height: 52px; transform: translateX(calc(var(--nav-i, 0) * 100%)); transition: transform .5s cubic-bezier(.34, 1.45, .5, 1); pointer-events: none; }
  .tabs__pill::before { content: ""; width: 68px; height: 52px; border-radius: 16px; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); transform-origin: var(--o, 50% 50%); }   /* Motion.tab memanjangkannya ke arah gerak */
  .nav__item.hint::after { inset: 4px 6px; border-radius: 14px; }
  .tabs .coach { bottom: calc(100% + 12px); top: auto; }
  .tabs .coach::before { top: auto; bottom: -6px; }
  body:has(.coach) .toasts { bottom: calc(190px + env(safe-area-inset-bottom)); }       /* toast tidak menumpuk gelembung petunjuk */
  .account { display: none; }
  .main { padding: 18px 16px calc(88px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toolbar { top: calc(var(--topbar-h) + 8px); }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .tbl-gulir > table { font-size: 13px; }
  .tbl-gulir th, .tbl-gulir td { min-width: 7em; }
  .grid-2, .grid-mapel { grid-template-columns: 1fr; }
  .grid-mapel > .field:first-child, .grid-mapel > .field:last-child, .grid-mapel > .mapel-chips { grid-column: 1; grid-row: auto; }
  .form-panel { padding: 18px; }
  .opts--grid { grid-template-columns: 1fr; }
  .sheet__ident { grid-template-columns: 1fr; }
  .kop-form__grid { grid-template-columns: 1fr 1fr; }
  .kop-form__grid .field:first-child { grid-column: 1 / -1; }
  .ans__cols { grid-template-columns: 1fr; }
  .q { grid-template-columns: 26px minmax(0, 1fr); }
  .q__tools { position: static; opacity: 1; transform: none; grid-column: 1 / -1; justify-content: flex-end; margin-top: 8px; padding: 0; }
  .fig-tools { opacity: 1; }
  .toolbar { position: relative; top: auto; }      /* bukan static (top: auto agar tidak bergeser oleh aturan sticky di atas): z-index 5 (dan menu Lainnya di dalamnya) harus berlaku di atas soal; backdrop-filter membuat toolbar konteks tumpukan sendiri */
  .toolbar__actions { width: 100%; }
  .toolbar__actions .btn { flex: 1; }
  .match { grid-template-columns: 1fr; }
  .prices, .stats { grid-template-columns: 1fr; }
  .doc-sec h3 .tool { opacity: 1; }
  .stage { height: 330px; }
  .scene__chart { height: 130px; }
}

/* sambungan antar alat dan sorotan kolom topik */
.next-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.next-tools p { flex: 1 1 220px; margin: 0; }
.next-tools .chip { display: inline-flex; align-items: center; gap: 6px; }
.next-tools .chip svg { width: 16px; height: 16px; }
.next-tools .chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.input.is-flash { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ========================================================= LAYAR SENTUH */
/* Temuan audit Fase 5 (HP 390px dan tablet 820px, semua layar): kolom isian 14,5px membuat Safari iOS memperbesar halaman saat diketuk;
   tombol dan chip 28 sampai 34px mudah salah ketuk (ikon hapus bersebelahan dengan ikon turun); alat per soal tersembunyi sampai
   "hover" sehingga tidak ada di tablet; tanda silang kecil di kotak "Kunci". Aturan ini hanya untuk layar sentuh atau layar sempit. */
/* petunjuk toolbar: kursor di desktop, ketuk di layar sentuh */
.hint-touch { display: none; }
@media (hover: none), (max-width: 640px) {
  .input, select.input, textarea.input { font-size: 16px; }
  .btn--sm, .chip, .quota, .segmented__opt { min-height: 40px; }
  .tool, .slide-card__cap .tool, .doc-sec h3 .tool { width: 40px; height: 40px; }
  .fig-tools button { width: 38px; height: 38px; }
  .fig-tools { gap: 6px; position: static; justify-content: flex-end; padding: 0 8px 8px; }      /* di bawah gambar, tidak menutupi judul grafik */
  .q__tools { gap: 6px; }
  .flag > summary, .flag__chip { min-height: 36px; }
  .toggle-key { min-height: 40px; padding: 0 8px; }
  .toggle-key input { width: 20px; height: 20px; }
  .menu__item { min-height: 44px; }
  .kop-form > summary { min-height: 44px; }
  input[type=range] { min-height: 32px; }
  .notes summary { min-height: 40px; }
  .stage-tabs button { min-height: 40px; }
  .auth-card__fine a, .small a { display: inline-block; padding: 9px 3px; margin: -9px 0; }
  .toast > button { min-width: 40px; min-height: 40px; margin: -10px -6px -10px 0; }
  .toast .toast__action { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0; padding: 0 8px; }
}
@media (hover: none) {
  .q__tools { position: static; opacity: 1; transform: none; grid-column: 1 / -1; justify-content: flex-end; margin-top: 8px; padding: 0; }
  .fig-tools, .doc-sec h3 .tool { opacity: 1; }
  .hint-hover { display: none; }
  .hint-touch { display: inline; }
}

/* ============================================================ CETAK */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff; font-size: 12pt; }
  .topbar, .form-frame, .form-panel, .toolbar, .kop-form, .next-tools, .q__tools, .q__flags, .fig-tools, .fig__note, .tabs, .demo-banner, .drive-banner, .toasts, .modal, .notes, .slide-card__cap .tool, .doc-sec h3 .tool, #auth-screen, .more { display: none !important; }
  .main { margin: 0; padding: 0; max-width: none; }
  .workspace { display: block; }
  .sheet, .doc { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .q { break-inside: avoid; padding: 10px 0; }
  .answer-sheet { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .ans__ch i, .sheet__head--kop { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .fig { border: 0; break-inside: avoid; }
  .slide-card { break-inside: avoid; margin-bottom: 8mm; }
  .deck { display: block; }
  .doc-table, .doc__ident { break-inside: avoid; }
  .tbl-gulir { overflow: visible; box-shadow: none; }
  .tbl-gulir > table { width: 100%; table-layout: fixed; }
  .tbl-gulir > table th, .tbl-gulir > table td { min-width: 0; overflow-wrap: anywhere; }
  .tbl-tip { display: none !important; }
  .tugas__item, .rj--tabel, .rj--jodoh, .lk-kepala, .doc-tujuan, .doc-refleksi { break-inside: avoid; }
  .doc-guru, .varian-row { display: none !important; }
  body.print-guru .doc > :not(.doc-guru) { display: none !important; }
  body.print-guru .doc-guru { display: block !important; border: 0; background: none; padding: 0; margin: 0; }
  body.print-guru .doc-guru__ket { display: none; }
  .rj--garis i, .rj--tabel th, .rj--tabel td, .rj--kotak, .cb, .dot, .titik, .lk-kepala td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Hemat tinta (Fase 12F): gambar data digambar hitam-abu berpola arsir oleh Visual.render; foto ikut diabukan di layar dan saat dicetak */
.sheet.is-hemat .fig img { filter: grayscale(1); }
@media print { .sheet.is-hemat .fig img { filter: grayscale(1); } }