/* ===== Tokens — Edutech Foundation DS ===== */
:root {
  --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #565656; --neutral-700: #3b3b3b;
  --neutral-800: #2a2a2a; --neutral-850: #242424; --neutral-900: #1f1f1f; --neutral-950: #161616;
  --blue-50: #ebf2fe; --blue-100: #d8e6fd; --blue-200: #b1cdfb; --blue-300: #89b4fa; --blue-400: #629bf8;
  --blue-500: #3b82f6; --blue-600: #326fd1; --blue-700: #2c62b8; --blue-800: #234e94; --blue-900: #183462;
  --green-50: #e7f8f2; --green-100: #cff1e6; --green-200: #9fe3cd; --green-300: #70d5b3; --green-400: #40c79a;
  --green-500: #10b981; --green-600: #0e9d6e; --green-700: #0c8b61; --green-800: #0a6f4d; --green-900: #064a34;
  --yellow-50: #fef5e7; --yellow-100: #fdecce; --yellow-200: #fbd89d; --yellow-300: #f9c56d; --yellow-400: #f7b13c;
  --yellow-500: #f59e0b; --yellow-600: #d98708; --yellow-700: #b87708; --yellow-800: #935f07; --yellow-900: #623f04;
  --red-50: #fdecec; --red-100: #fcdada; --red-200: #f9b4b4; --red-300: #f58f8f; --red-400: #f26969;
  --red-500: #ef4444; --red-600: #cb3a3a; --red-700: #b33333; --red-800: #8f2929; --red-900: #601b1b;
  --gold-50: #fffaeb; --gold-100: #fff3cc; --gold-200: #ffe699; --gold-300: #ffd166; --gold-400: #ffc233;
  --gold-500: #f5b000; --gold-600: #cc9200; --gold-700: #a37500; --gold-800: #7a5800; --gold-900: #523b00;

  --color-primary-default: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-primary-lip: var(--blue-700);
  --color-primary-content: #fff;
  --color-primary-disabled: var(--neutral-100);
  --color-primary-content-disabled: var(--neutral-400);
  --color-primary-subtle: var(--blue-50);
  --color-primary-subtle-content: var(--blue-700);
  --color-secondary-lip: var(--neutral-200);
  --color-content-primary: var(--neutral-900);
  --color-content-secondary: var(--neutral-600);
  --color-content-tertiary: var(--neutral-500);
  --color-content-disabled: var(--neutral-400);
  --color-content-inverse: #fff;
  --color-bg-default: #fff;
  --color-surface-default: #fff;
  --color-surface-secondary: var(--neutral-50);
  --color-border-subtle: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-input: var(--neutral-500);
  --color-border-focus: var(--blue-500);
  --color-border-selected: var(--blue-300);
  --color-error-default: var(--red-600);
  --color-error-hover: var(--red-700);
  --color-error-active: var(--red-800);
  --color-error-lip: var(--red-800);
  --color-error-bg: var(--red-50);
  --color-error-content: var(--red-900);
  --color-success-default: var(--green-600);
  --color-success-lip: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-success-content: var(--green-900);
  --color-warning-default: var(--yellow-600);
  --color-warning-bg: var(--yellow-50);
  --color-warning-content: var(--yellow-900);
  --color-info-default: var(--blue-600);
  --color-info-bg: var(--blue-50);
  --color-info-content: var(--blue-900);
  --color-reward-default: var(--gold-300);
  --color-reward-strong: var(--gold-500);
  --color-reward-lip: var(--gold-600);
  --color-reward-bg: var(--gold-50);
  --color-reward-content: var(--gold-900);
  --color-overlay: #1f1f1f66;

  --spacing-0: 0; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px;
  --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px;
  --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px;

  --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-xxl: 20px; --radius-full: 999px;

  --border-width-thin: 1px; --border-width-default: 2px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Typography — Figma letterSpacing is in %, so -1 => -0.01em */
.heading-lg { font: 700 28px/36px var(--font); letter-spacing: -0.01em; margin: 0; }
.body-lg { font: 400 16px/24px var(--font); margin: 0; }
.text-secondary { color: var(--color-content-secondary); }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--color-bg-default); color: var(--color-content-primary); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
img { display: block; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Shared screens: pick the sign-up or forgot-password variant */
.app:not([data-flow="reset"]) [data-only="reset"], .app[data-flow="reset"] [data-only="daftar"] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { max-width: 480px; margin: 0 auto; height: 100dvh; }
.screen { display: flex; flex-direction: column; height: 100%; }

/* ===== Top app bar ===== */
.top-bar { display: flex; align-items: center; gap: var(--spacing-3); height: 56px; padding: 0 var(--spacing-4) 0 var(--spacing-2); flex-shrink: 0; }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-xl); background: none; cursor: pointer; flex-shrink: 0; }
.icon-btn:active { background: var(--color-primary-disabled); }

/* ===== Progress bar (L) ===== */
.progress { flex: 1; height: 16px; border-radius: var(--radius-full); background: var(--color-primary-disabled); overflow: hidden; }
.progress-fill { position: relative; height: 100%; width: 0; border-radius: var(--radius-full); background: var(--color-primary-default); transition: width .6s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }
.progress-fill::after { content: ""; position: absolute; top: 4px; left: 12px; right: 12px; height: 4px; border-radius: var(--radius-full); background: var(--color-primary-content); opacity: .3; }

/* ===== Layout ===== */
.content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-6); padding: var(--spacing-4); }
.content-tight { gap: var(--spacing-3); }
.content-center { justify-content: center; align-items: center; gap: var(--spacing-4); text-align: center; }
.actions { flex-shrink: 0; padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-6) + env(safe-area-inset-bottom)); }

/* ===== Mascot speech ===== */
.mascot-speech { display: flex; gap: var(--spacing-3); align-items: flex-start; }
.mascot { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-subtle); object-fit: cover; }
.bubble { flex: 1; min-width: 0; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-secondary); border: var(--border-width-thin) solid var(--color-border-subtle); border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-xl); }
.bubble-title { font: 600 16px/22px var(--font); }
.bubble-text { font: 400 14px/21px var(--font); color: var(--color-content-secondary); }

/* ===== Button ===== */
.btn { display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); width: 100%; height: 48px; padding: 0 var(--spacing-6); border: 0; border-radius: var(--radius-xl); font: 600 16px/22px var(--font); cursor: pointer; transition: transform .05s, box-shadow .05s; }
.btn-primary { background: var(--color-primary-default); color: var(--color-primary-content); box-shadow: 0 4px 0 var(--color-primary-lip); }
@media (hover: hover) { .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn:disabled { background: var(--color-primary-disabled); color: var(--color-primary-content-disabled); box-shadow: none; cursor: not-allowed; }

/* ===== Text field ===== */
.field { display: flex; flex-direction: column; gap: var(--spacing-2); }
.field-label { font: 600 14px/20px var(--font); }
.field-input, .select { width: 100%; height: 48px; padding: 0 var(--spacing-4); border: var(--border-width-default) solid var(--color-border-input); border-radius: var(--radius-lg); background: var(--color-surface-default); font: 400 16px/24px var(--font); color: var(--color-content-primary); }
.field-input:placeholder-shown { background: var(--color-surface-secondary); }
.field-input::placeholder { color: var(--color-content-tertiary); }
.field-input:focus { outline: none; border-color: var(--color-border-focus); background: var(--color-surface-default); }
.field-helper { font: 400 12px/18px var(--font); color: var(--color-content-secondary); }
.field-helper:empty { display: none; }
#pw-helper { white-space: pre-wrap; } /* R3 checklist uses spaced items */
.field.is-error .field-input { border-color: var(--color-error-default); background: var(--color-error-bg); }
.field.is-error .select { border-color: var(--color-error-default); background: var(--color-error-bg); }
.field.is-error .field-helper { color: var(--color-error-default); }

/* ===== Select (native date input underneath) ===== */
.select { position: relative; display: flex; align-items: center; gap: var(--spacing-2); padding-right: var(--spacing-3); background: var(--color-surface-secondary); }
.select-value { flex: 1; color: var(--color-content-tertiary); }
.select.has-value { background: var(--color-surface-default); }
.select.has-value .select-value { color: var(--color-content-primary); }
.select:focus-within { border-color: var(--color-border-focus); }
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.select-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* ===== Card + Radio (grade option) ===== */
.choices { display: flex; flex-direction: column; gap: var(--spacing-3); }
.card { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); cursor: pointer; }
.card input { appearance: none; flex-shrink: 0; width: 24px; height: 24px; margin: 12px 0; border: var(--border-width-default) solid var(--color-border-input); border-radius: var(--radius-full); background: var(--color-surface-default); }
.card input:checked { border: 0; background: url("assets/icons/radio-checked.svg") center / 24px 24px no-repeat; }
.card input:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.card:has(input:checked) { background: var(--color-primary-subtle); border-color: var(--color-border-selected); box-shadow: 0 2px 0 var(--color-border-selected); }
.card-text { display: flex; flex-direction: column; gap: var(--spacing-1); }
.card-title { font: 600 16px/22px var(--font); }
.card-sub { font: 400 12px/18px var(--font); color: var(--color-content-secondary); }

/* ===== Inline alert (info) ===== */
.alert { display: flex; gap: var(--spacing-3); align-items: flex-start; padding: var(--spacing-4); border-radius: var(--radius-lg); background: var(--color-info-bg); color: var(--color-info-content); }
.alert > div { display: flex; flex-direction: column; gap: var(--spacing-1); }
.alert-title { font: 600 14px/20px var(--font); }
.alert-text { font: 400 12px/18px var(--font); }

/* ===== Avatar picker ===== */
.avatar-grid { display: flex; justify-content: space-between; }
.avatar-legend { float: left; width: 100%; padding: 0; margin-bottom: var(--spacing-4); text-align: center; font: 600 16px/22px var(--font); }
.avatar-cols { clear: both; display: grid; grid-template-columns: repeat(2, 64px); gap: var(--spacing-4); }
.avatar { position: relative; width: 64px; height: 64px; border-radius: var(--radius-full); cursor: pointer; }
.avatar input { position: absolute; opacity: 0; pointer-events: none; }
.avatar img { width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; }
.avatar:has(input:checked)::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); box-shadow: inset 0 0 0 3px var(--color-border-focus); }
.avatar:has(input:focus-visible) { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* ===== Success ===== */
.hero-mascot { width: 160px; height: 160px; }
.summary { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; padding: var(--spacing-4); text-align: left; background: var(--color-surface-secondary); border: var(--border-width-thin) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.summary-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); }
.summary-name { font: 600 16px/22px var(--font); }
.summary-meta { font: 400 12px/18px var(--font); color: var(--color-content-secondary); }

/* ===== Type helpers ===== */
.heading-sm { font: 600 20px/28px var(--font); letter-spacing: -0.01em; margin: 0; }
.body-md { font: 400 14px/21px var(--font); }
.caption { font: 400 12px/18px var(--font); color: var(--color-content-secondary); }
.text-center { text-align: center; }
.numeric-lg { font: 700 32px/40px var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* ===== Button variants & sizes ===== */
.actions { display: flex; flex-direction: column; gap: var(--spacing-2); }
.btn { text-decoration: none; position: relative; }
.btn-secondary { background: var(--color-surface-default); color: var(--color-primary-default); border: var(--border-width-default) solid var(--color-border-subtle); box-shadow: 0 4px 0 var(--color-secondary-lip); }
.btn-ghost { background: none; color: var(--color-primary-default); }
.btn-ghost:active:not(:disabled) { transform: none; background: var(--color-primary-subtle); }
.btn-m { height: 40px; padding: 0 var(--spacing-5); font: 600 14px/20px var(--font); }
/* Loading: spinner replaces label, width stays */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--spinner, var(--color-primary-content)); border-right-color: transparent; animation: spin .8s linear infinite; }
.btn-ghost.is-loading, .btn-secondary.is-loading { --spinner: var(--color-primary-default); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Alert tones (base .alert = info) ===== */
.alert-error { background: var(--color-error-bg); color: var(--color-error-content); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-content); }

/* ===== Password reveal ===== */
.input-wrap { position: relative; }
.input-wrap .field-input { padding-right: 52px; }
.reveal { position: absolute; top: 0; right: 4px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }

/* ===== OTP input: one real input over 6 visual cells ===== */
.otp-box { position: relative; display: flex; gap: var(--spacing-2); }
.otp-box input { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; caret-color: transparent; cursor: pointer; }
.otp-cell { width: 48px; height: 56px; display: grid; place-items: center; border: var(--border-width-default) solid var(--color-border-input); border-radius: var(--radius-lg); background: var(--color-surface-secondary); font: 700 24px/32px var(--font); letter-spacing: -0.01em; }
.otp-cell.is-filled { background: var(--color-surface-default); }
.otp-box:focus-within .otp-cell.is-active { border-color: var(--color-border-focus); background: var(--color-surface-default); }
.otp-box:focus-within .otp-cell.is-active:empty::after { content: ""; width: 2px; height: 28px; background: var(--color-primary-default); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.field.is-error .otp-cell { border-color: var(--color-error-default); background: var(--color-error-bg); }
.resend { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); text-align: center; }

/* ===== Timer (C2) ===== */
.timer-box { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); padding: var(--spacing-6) var(--spacing-4); background: var(--color-surface-secondary); border-radius: var(--radius-xl); }

/* ===== Laporan ===== */
.top-bar-title { font: 600 20px/28px var(--font); letter-spacing: -0.01em; margin: 0; }
.top-bar:has(> .top-bar-title:not([data-only])), .app[data-flow="reset"] .top-bar:has(> .top-bar-title) { gap: var(--spacing-2); }
.content-gap-4 { gap: var(--spacing-4); }
.card-static { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2); padding: var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-thin) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-4); font: 400 14px/21px var(--font); }
.checklist li { position: relative; padding-left: 1.6em; }
.checklist li::before { content: "✓"; position: absolute; left: 0; }
.badge { display: inline-flex; align-items: center; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); font: 600 12px/16px var(--font); white-space: nowrap; }
.badge-success { background: var(--color-success-bg); color: var(--color-success-content); }
.badge-neutral { background: var(--color-primary-disabled); color: var(--color-content-secondary); }

/* ===== Summary rows ===== */
.summary { flex-direction: column; align-items: stretch; }
.summary-row { display: flex; align-items: center; gap: var(--spacing-3); }
.summary-row-between { justify-content: space-between; }

/* ===== Bottom sheet (native <dialog>) ===== */
.sheet { margin: auto auto 0; width: 100%; max-width: 480px; max-height: 90dvh; padding: var(--spacing-2) var(--spacing-4) calc(var(--spacing-8) + env(safe-area-inset-bottom)); border: 0; border-top: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xxl) var(--radius-xxl) 0 0; background: var(--color-surface-default); color: var(--color-content-primary); }
.sheet[open] { display: flex; flex-direction: column; gap: var(--spacing-4); animation: sheet-in .25s ease-out; }
.sheet::backdrop { background: var(--color-overlay); }
.sheet:focus { outline: none; }
.sheet-handle { align-self: center; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--color-content-disabled); }
.sheet-header { display: flex; align-items: center; gap: var(--spacing-2); }
.sheet-header h2 { flex: 1; }
.sheet-message { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-1); text-align: center; }
.mascot-lg { width: 96px; height: 96px; }
.sheet-actions { display: flex; flex-direction: column; gap: var(--spacing-3); }
@keyframes sheet-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sheet[open], .btn.is-loading::after, .otp-cell::after { animation: none; } }

/* ===== Type helpers (labels) ===== */
.label-sm { font: 600 12px/16px var(--font); margin: 0; }
.label-md { font: 600 14px/20px var(--font); margin: 0; }
.label-lg { font: 600 16px/22px var(--font); margin: 0; }
.badge-primary { background: var(--color-primary-subtle); color: var(--color-primary-subtle-content); }
.badge-unread { background: var(--color-error-default); color: var(--color-primary-content); }

/* ===== Beranda (01/02) ===== */
.home { gap: var(--spacing-6); }
.home-greet { display: flex; align-items: center; gap: var(--spacing-3); }
.home-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; }
.streak-card { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.streak-head { display: flex; align-items: center; gap: var(--spacing-3); }
.streak-head > div { flex: 1; }
.streak-num { display: flex; align-items: baseline; gap: var(--spacing-2); margin: 0; }
.streak-icon { display: grid; place-items: center; padding: var(--spacing-3); border-radius: var(--radius-full); background: var(--color-reward-bg); }
.week { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.week li { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-full); font: 600 12px/16px var(--font); background: var(--color-surface-secondary); color: var(--color-content-tertiary); }
.week li.selesai { background: var(--color-reward-default); color: var(--color-reward-content); }
.week li.hari-ini { background: var(--color-reward-bg); border: var(--border-width-default) solid var(--color-reward-strong); color: var(--color-reward-content); }
.target { display: flex; flex-direction: column; gap: var(--spacing-2); }
.target-row { display: flex; align-items: center; gap: var(--spacing-2); }
.target-row .label-md { flex: 1; }
.progress-m { flex: none; height: 8px; }
.progress-reward { background: var(--color-reward-default); }
.progress-reward::after { display: none; }
.home-section { display: flex; flex-direction: column; gap: var(--spacing-3); }
.guru-card { display: flex; align-items: center; gap: var(--spacing-4); width: 100%; padding: var(--spacing-4); text-align: left; font: inherit; color: inherit; background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); cursor: pointer; }
.guru-card:active { transform: translateY(2px); box-shadow: none; }
.guru-card.is-static { box-shadow: none; cursor: default; }
.guru-card.is-static:active { transform: none; }
.guru-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-full); object-fit: cover; }
.guru-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); }
.bottom-nav { flex-shrink: 0; display: flex; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3) calc(var(--spacing-6) + env(safe-area-inset-bottom)); background: var(--color-surface-default); border-top: var(--border-width-default) solid var(--color-border-subtle); }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-1); padding: var(--spacing-2); border: var(--border-width-default) solid transparent; border-radius: var(--radius-lg); background: none; font: 600 12px/16px var(--font); color: var(--color-content-secondary); cursor: pointer; }
.nav-item.is-active { background: var(--color-primary-default); border-color: var(--color-border-selected); color: var(--color-primary-content); }

/* ===== Chat (03–07b) ===== */
.chat-header { flex-shrink: 0; display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2); background: var(--color-surface-default); border-bottom: var(--border-width-default) solid var(--color-border-subtle); }
.chat-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
.chat-title { flex: 1; min-width: 0; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); }
.chat-date { align-self: center; font: 600 12px/16px var(--font); color: var(--color-content-tertiary); }
.msg-guru { display: flex; gap: var(--spacing-2); align-items: flex-start; }
.msg-guru .avatar-slot { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); object-fit: cover; }
.bubble-guru { width: 280px; max-width: 100%; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-secondary); border: var(--border-width-thin) solid var(--color-border-subtle); border-radius: var(--radius-sm) var(--radius-xl) var(--radius-xl) var(--radius-xl); font: 400 14px/21px var(--font); overflow-wrap: anywhere; }
.msg-anak { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1); }
.bubble-anak { max-width: 280px; padding: var(--spacing-3) var(--spacing-4); background: var(--color-primary-default); color: var(--color-primary-content); border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-xl); font: 400 14px/21px var(--font); overflow-wrap: anywhere; }
.foto-pr { display: grid; place-items: center; align-content: center; gap: var(--spacing-2); width: 200px; height: 150px; overflow: hidden; background: var(--color-surface-secondary); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); font: 400 12px/18px var(--font); color: var(--color-content-tertiary); }
.foto-pr img.foto { width: 100%; height: 100%; object-fit: cover; }
.msg-status { font: 600 12px/16px var(--font); color: var(--color-content-tertiary); }
.indent { padding-left: var(--spacing-10); display: flex; flex-direction: column; gap: var(--spacing-3); }
.chips { padding-left: var(--spacing-10); display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.chip { padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-full); box-shadow: 0 2px 0 var(--color-border-subtle); font: 600 14px/20px var(--font); color: var(--color-primary-subtle-content); cursor: pointer; }
.chip:active { transform: translateY(2px); box-shadow: none; }
/* Chat/Soal */
.soal { width: 280px; display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xxl); }
.soal-head { display: flex; align-items: center; gap: var(--spacing-2); }
.soal-head .label-sm { flex: 1; color: var(--color-content-secondary); }
.soal-q { font: 400 16px/24px var(--font); }
/* Chat/Opsi jawaban: Default · Dipilih · Benar · Salah · Nonaktif */
.opsi { width: 280px; display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); text-align: left; font: 400 16px/24px var(--font); color: var(--color-content-primary); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: 0 2px 0 var(--color-border-subtle); cursor: pointer; }
.opsi:disabled { cursor: default; }
.opsi .huruf { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-surface-secondary); font: 600 14px/20px var(--font); color: var(--color-content-secondary); }
.opsi .jawaban { flex: 1; }
.opsi.dipilih { background: var(--color-primary-subtle); border-color: var(--color-border-selected); box-shadow: 0 2px 0 var(--color-border-selected); }
.opsi.dipilih .huruf { background: var(--color-primary-default); color: var(--color-primary-content); }
.opsi.benar { background: var(--color-success-bg); border-color: var(--color-success-default); box-shadow: none; }
.opsi.benar .huruf { background: var(--color-success-default); color: var(--color-content-inverse); }
.opsi.salah { background: var(--color-error-bg); border-color: var(--color-error-default); box-shadow: none; }
.opsi.salah .huruf { background: var(--color-error-default); color: var(--color-content-inverse); }
.opsi.nonaktif { background: var(--color-surface-secondary); box-shadow: none; color: var(--color-content-disabled); }
.opsi.nonaktif .huruf { color: var(--color-content-disabled); }
/* Chat/Langkah + diagram template */
.langkah { width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.langkah-label { padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-sm); background: var(--color-primary-subtle); color: var(--color-primary-subtle-content); font: 600 12px/16px var(--font); }
.diagram { align-self: stretch; display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-3); border-radius: var(--radius-lg); background: var(--color-surface-secondary); }
.diagram-row { display: flex; align-items: center; gap: var(--spacing-3); }
.diagram-row > span:first-child { width: 32px; flex-shrink: 0; font: 600 14px/20px var(--font); }
.batang { flex: 1; display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--color-border-strong); }
.batang i { flex: 1; height: 28px; background: var(--color-surface-default); }
.batang i.arsir { background: var(--color-primary-default); }
.diagram-note { font: 600 12px/16px var(--font); color: var(--color-content-secondary); }
.langkah-teks { font: 400 14px/21px var(--font); }
/* Chat/Guru mengetik */
.mengetik { display: flex; align-items: center; gap: var(--spacing-2); color: var(--color-content-secondary); }
.mengetik img.spin { animation: spin .8s linear infinite; }
/* Chat/Topik aktif + Composer */
.topik { flex-shrink: 0; display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4); background: var(--color-primary-subtle); border-top: var(--border-width-default) solid var(--color-border-subtle); }
.topik-text { flex: 1; min-width: 0; }
.topik-text .label-sm { color: var(--color-primary-subtle-content); }
.composer { flex-shrink: 0; display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4) calc(var(--spacing-3) + env(safe-area-inset-bottom)); background: var(--color-surface-default); border-top: var(--border-width-default) solid var(--color-border-subtle); }
.composer .field-input { flex: 1; min-width: 0; }
.icon-btn-l { width: 48px; height: 48px; }
.send-btn { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: var(--radius-xl); background: var(--color-primary-default); box-shadow: 0 4px 0 var(--color-primary-lip); cursor: pointer; }
.send-btn:active { transform: translateY(4px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .mengetik img.spin { animation: none; } }

/* ===== Toast ===== */
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(343px, calc(100% - 32px)); display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); }
.toast p { flex: 1; font: 400 14px/21px var(--font); }
.toast-action { border: 0; background: none; padding: 0; font: 600 14px/20px var(--font); color: var(--color-primary-default); cursor: pointer; }

/* ===== Section 3 · Kartu belajar, materi, latihan soal ===== */
.heading-md { font: 700 24px/32px var(--font); letter-spacing: -0.01em; margin: 0; }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-content); }
.actions-bar { padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-4) + env(safe-area-inset-bottom)); background: var(--color-surface-default); border-top: var(--border-width-default) solid var(--color-border-subtle); }
.btn-success { background: var(--color-success-default); color: var(--color-content-inverse); box-shadow: 0 4px 0 var(--color-success-lip); }
/* Chat/Kartu belajar */
.kartu { width: 280px; max-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); }
.kartu-head { display: flex; align-items: center; gap: var(--spacing-3); }
.kartu-ikon { display: grid; place-items: center; padding: var(--spacing-2); border-radius: var(--radius-lg); background: var(--color-primary-subtle); flex-shrink: 0; }
.kartu-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }
.kartu-judul .label-sm { color: var(--color-content-secondary); }
/* Chat/Konteks */
.konteks { width: 260px; max-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-1); padding: var(--spacing-3); text-align: left; font: inherit; color: inherit; background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); cursor: pointer; }
.konteks-head { display: flex; align-items: center; gap: var(--spacing-2); color: var(--color-content-secondary); }
.konteks-ikon { display: grid; place-items: center; padding: 4.8px; border-radius: 7.2px; background: var(--color-primary-subtle); }
/* 09 · Materi */
.ilustrasi { display: grid; place-items: center; padding: var(--spacing-4); border-radius: var(--radius-xl); background: var(--color-primary-subtle); }
/* 11 · Latihan soal: kartu soal & opsi melebar penuh */
.latihan .soal, .latihan .opsi { width: 100%; }
.latihan-soal { display: flex; flex-direction: column; gap: var(--spacing-3); }
.feedback { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-4) var(--spacing-4) calc(var(--spacing-4) + env(safe-area-inset-bottom)); background: var(--color-success-bg); border-top: var(--border-width-default) solid var(--color-success-default); color: var(--color-success-content); animation: sheet-in .25s ease-out; }
.feedback.salah { background: var(--color-error-bg); border-color: var(--color-error-default); color: var(--color-error-content); }
.feedback-head { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.feedback .body-md { color: var(--color-content-primary); }
@media (prefers-reduced-motion: reduce) { .feedback { animation: none; } }
/* 11d/11e · Hasil */
.hasil { align-items: center; gap: var(--spacing-3); padding-top: var(--spacing-6); text-align: center; }
.skor { display: flex; align-items: baseline; gap: var(--spacing-2); }
.ringkasan { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); padding-top: var(--spacing-2); }
.nomor-row { display: flex; gap: var(--spacing-2); }
/* Latihan/Nomor soal */
.nomor { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: var(--border-width-default) solid var(--color-success-default); background: var(--color-success-bg); color: var(--color-success-content); font: 600 14px/20px var(--font); cursor: pointer; }
.nomor.salah { border-color: var(--color-error-default); background: var(--color-error-bg); color: var(--color-error-content); }
.nomor.aktif { border-color: var(--color-border-selected); background: var(--color-primary-default); color: var(--color-primary-content); }
.riwayat { align-self: stretch; display: flex; flex-direction: column; gap: var(--spacing-2); text-align: left; }
/* List item (badge + chevron) */
.list-item { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; height: 64px; padding: var(--spacing-3) 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.list-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }
.list-lead { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-primary-subtle-content); font: 600 12px/16px var(--font); }
/* 11f/11h · Pembahasan */
.pembahasan { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-4); border-radius: var(--radius-xl); background: var(--color-surface-secondary); }
.nav-row { display: flex; gap: var(--spacing-3); }
.nav-row .btn { flex: 1; min-width: 0; padding: 0 var(--spacing-2); white-space: nowrap; }

/* ===== Section 4 · Tab Belajar, detail bab, ujian bab ===== */
.app:not([data-asal="tab"]) [data-only-asal="tab"], .app[data-asal="tab"] [data-only-asal="chat"] { display: none !important; }
.nav-item { position: relative; }
.nav-dot { position: absolute; top: 6px; left: calc(50% + 6px); width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-error-default); border: var(--border-width-default) solid var(--color-surface-default); }
.mapel { display: flex; align-items: center; gap: var(--spacing-2); }
.mapel .label-lg { flex: 1; }
.list-card { display: flex; flex-direction: column; gap: var(--spacing-3); }
.list-item.is-card { height: auto; padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); }
.list-item.is-card:active { transform: translateY(2px); box-shadow: none; }
.progress-m .progress-fill::after { display: none; }
.ujian-card { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-4); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: 0 2px 0 var(--color-border-subtle); }
.ujian-head { display: flex; align-items: center; gap: var(--spacing-3); }
.ujian-head img { border-radius: var(--radius-full); flex-shrink: 0; }
.ujian-head > div { flex: 1; min-width: 0; }
.ujian-actions { display: flex; flex-direction: column; gap: var(--spacing-2); }
/* 18/E9 · 10 nomor: rata kiri & membungkus */
.ringkasan.kiri { align-self: stretch; align-items: flex-start; text-align: left; }
.nomor-row { flex-wrap: wrap; }

/* ===== 19a · Progres — segera hadir (MVP) ===== */
.progres-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.progres-preview { filter: blur(8px); overflow: hidden; user-select: none; } /* Figma: layer blur 16 = CSS blur 8px */
.segera-hadir { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--spacing-6); }
.segera-card { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); width: 100%; padding: var(--spacing-6); text-align: center; background: var(--color-surface-default); border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.lencana-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--spacing-3); }
.lencana { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-2); text-align: center; border: var(--border-width-default) solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.lencana-ikon { display: grid; place-items: center; padding: var(--spacing-4); border-radius: var(--radius-full); background: var(--color-reward-bg); }
.lencana.is-kunci .lencana-ikon { background: var(--color-surface-secondary); }
.lencana.is-kunci .label-sm { color: var(--color-content-secondary); }
.lencana.is-kunci .caption { color: var(--color-content-tertiary); }

/* ===== Section 7 · Kak Budi ===== */
.chat-list.dari-bawah > :first-child { margin-top: auto; } /* chat Kak Budi tanpa kolom ketik: pesan menempel ke bawah */