/* Belajar Berani Berbicara — design system
   Palet resmi: Deep Soft Blue #397DB6 · Medium #8DB9DF · Pale #DCEBFA
   Near White #F3F8FD · White #FFFFFF · Dark Text #193B5A */
:root {
  --deep: #397DB6;
  --medium: #8DB9DF;
  --pale: #DCEBFA;
  --near: #F3F8FD;
  --white: #fff;
  --ink: #193B5A;
  --muted: #5C7793;
  --line: #D7E6F5;
  --ok: #1F8A70;
  --warn: #B8791C;
  --danger: #C0483F;
  --gold: #C99519;
  --shadow: 0 12px 32px rgba(25, 59, 90, .09);
  --shadow-sm: 0 4px 14px rgba(25, 59, 90, .07);
  --radius: 16px;
  --radius-sm: 10px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, #F7FBFF 0%, var(--near) 55%, #EAF4FD 100%);
  min-height: 100vh;
  line-height: 1.6;
  font-size: 15.5px;
}
img, svg, video { max-width: 100%; }
a { color: var(--deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
code { background: var(--pale); padding: .12em .4em; border-radius: 6px; font-size: .88em; }
:focus-visible { outline: 3px solid var(--medium); outline-offset: 2px; border-radius: 6px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 820px; }
.section { padding: 56px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.section-head h1, .section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; max-width: 62ch; }
.lede { font-size: 1.05rem; color: var(--muted); max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.block { display: block; }
.grow { flex: 1; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.w-full { width: 100%; }
.req { color: var(--danger); }
.disclaimer { font-size: .82rem; color: var(--muted); background: var(--pale); padding: 12px 16px; border-radius: var(--radius-sm); margin: 32px 0 48px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--deep), #2F6CA0); color: #fff; box-shadow: 0 8px 18px rgba(57,125,182,.28); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(57,125,182,.36); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--near); }
.btn-soft { background: var(--pale); color: var(--deep); }
.btn-soft:hover { background: #CFE3F7; }
.btn-danger { background: #FDECEA; color: var(--danger); border-color: #F5CFCB; }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-sm { padding: 8px 14px; font-size: .86rem; }
.btn-xs { padding: 5px 10px; font-size: .78rem; border-radius: 8px; }
.icon-btn { background: #fff; border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 1rem; color: var(--ink); }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.gap { gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.inline { display: inline; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------------------------ cards */
.card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px) saturate(140%);
}
.card.accent { background: linear-gradient(160deg, #fff 0%, #EAF4FD 100%); border-color: #CDE3F7; }
.card.hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--medium); text-decoration: none; }
.card.sticky { position: sticky; top: 84px; align-self: start; }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.lesson-layout { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.grid.chat-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid.admin-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.grid.summary-grid { gap: 20px; }

/* ------------------------------------------------------------------ header */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(247,251,255,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--deep), var(--medium)); color: #fff; font-weight: 800; font-size: .95rem;
  box-shadow: 0 6px 14px rgba(57,125,182,.28);
}
.brand-mark.small { width: 34px; height: 34px; font-size: .8rem; border-radius: 10px; }
.brand-text strong { display: block; font-size: .98rem; line-height: 1.15; }
.brand-text small { display: block; font-size: .7rem; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand.compact strong { font-size: .9rem; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { padding: 8px 12px; border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 500; }
.site-nav a:hover { background: var(--pale); text-decoration: none; }
.site-nav a.active { background: var(--pale); color: var(--deep); font-weight: 600; }
.header-actions { display: flex; gap: 8px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; }
.mobile-nav-panel { display: none; flex-direction: column; padding: 10px 20px 18px; gap: 4px; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav-panel a { padding: 10px 8px; border-radius: 10px; color: var(--ink); font-weight: 500; }
.mobile-nav-panel a:hover { background: var(--pale); text-decoration: none; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: 40px 0 24px; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(600px 340px at 12% 0%, rgba(141,185,223,.4), transparent 70%),
  radial-gradient(520px 320px at 88% 18%, rgba(220,235,250,.9), transparent 70%);
  pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; padding-bottom: 24px; }
.eyebrow { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--deep); font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); margin-bottom: 10px; color: var(--ink); }
.hero-tagline { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); color: var(--deep); font-weight: 600; margin-bottom: 12px; max-width: 34ch; }
.hero-desc { color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 18px; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .86rem; }
.hero-visual { position: relative; display: grid; place-items: center; }
.hero-illustration { width: 100%; max-width: 380px; filter: drop-shadow(0 22px 34px rgba(25,59,90,.14)); }
.bubble {
  position: absolute; top: 4px; right: 0; background: #fff; border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 16px 16px 4px 16px; font-weight: 600; font-size: .9rem; max-width: 200px;
  box-shadow: var(--shadow-sm); z-index: 2;
}
.card-float { position: absolute; bottom: 0; left: 0; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-sm); font-size: .82rem; }
.card-float strong { display: block; }
.section-band { background: linear-gradient(90deg, var(--pale), #EAF4FD); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 22px; font-weight: 600; color: var(--deep); text-align: center; margin-top: 8px; }

/* ------------------------------------------------------------- components */
.check-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 26px; font-size: .94rem; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--deep); font-weight: 800; }
.check-list.small li { font-size: .87rem; }
.check-list.muted li::before { color: var(--medium); }
.mini-steps { display: grid; gap: 14px; }
.mini-steps > div { display: flex; gap: 12px; align-items: flex-start; }
.step-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.feature-card { display: block; }
.feature-card h3 { margin: 10px 0 6px; }
.feature-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--pale); display: grid; place-items: center; font-size: 1.2rem; }
.timeline { display: grid; gap: 10px; }
.timeline-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; }
.timeline-item > div { flex: 1; }
.timeline-index { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--pale); color: var(--deep); font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.step-card { position: relative; padding-top: 26px; }
.step-number { position: absolute; top: -12px; left: 22px; width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: #fff; display: grid; place-items: center; font-weight: 700; }
.rating-summary { display: flex; justify-content: center; margin-bottom: 20px; }
.rating-score { text-align: center; }
.rating-score strong { font-size: 2.4rem; display: block; line-height: 1; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; }
.review-card { margin: 0; }
.review-card p { font-style: italic; }
.review-card footer { margin-top: 10px; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, var(--deep), #2C6795); color: #fff; border-radius: 22px; padding: 34px; margin-bottom: 12px; box-shadow: var(--shadow); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); margin-bottom: 6px; }
.cta-band .muted { color: rgba(255,255,255,.7) !important; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-band .btn-primary { background: #fff; color: var(--deep); }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.pill { padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill-soft { background: var(--pale); color: var(--deep); }
.pill-gold { background: #FDF3D7; color: #9A7314; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; }
.badge-ok { background: #E4F5EF; color: var(--ok); }
.badge-info { background: #E6F1FB; color: var(--deep); }
.badge-warn { background: #FCF1DC; color: var(--warn); }
.badge-danger { background: #FBE9E7; color: var(--danger); }
.badge-soft { background: var(--pale); color: #48688A; }
.badge-gold { background: #FCF0CE; color: #8D6B12; }
.chip { display: inline-block; background: var(--near); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: .76rem; margin: 0 6px 6px 0; }
.alert { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; border: 1px solid transparent; }
.alert-success { background: #E7F6F0; color: #14664F; border-color: #C6EADF; }
.alert-error { background: #FCEBE9; color: #8E322B; border-color: #F5D3CF; }
.alert-info { background: #EAF4FD; color: #215C8C; border-color: #D2E6F8; }
.alert-warn { background: #FDF4E3; color: #7C5310; border-color: #F6E4C2; }
.empty-state { text-align: center; padding: 36px 20px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-icon { font-size: 2rem; margin-bottom: 8px; }
.prose p { margin-bottom: 1em; }
.prose h4 { margin-top: 1.4em; }
.prose ul, .prose ol { margin-bottom: 1em; }
.prose li { margin-bottom: .35em; }
.faq-list { display: grid; gap: 12px; }
.faq-item summary, .level-card summary, .history-item summary, .eval-history summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker, .level-card summary::-webkit-details-marker { display: none; }
.faq-item summary { font-weight: 600; }
.faq-answer { margin-top: 10px; color: var(--muted); font-size: .93rem; }
.mini-faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.mini-faq:last-child { border-bottom: 0; }
.mini-faq summary { cursor: pointer; font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: .88rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--medium); box-shadow: 0 0 0 3px rgba(141,185,223,.28); outline: none; }
input:disabled { background: var(--near); color: var(--muted); }
textarea { resize: vertical; min-height: 80px; }
.checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; font-weight: 500; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--deep); flex: 0 0 18px; }
.help { color: var(--muted); font-size: .78rem; }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-bar input, .filter-bar select { width: auto; min-width: 150px; }
.star-input { display: flex; gap: 6px; }
.star-input button { background: none; border: 0; font-size: 1.9rem; color: #D3DFEC; cursor: pointer; line-height: 1; padding: 0; }
.star-input button.on { color: var(--gold); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.switch-row:last-of-type { border-bottom: 0; }
.switch-row input { appearance: none; width: 44px; height: 24px; background: #D3DFEC; border-radius: 999px; position: relative; cursor: pointer; transition: background .18s ease; flex: 0 0 44px; }
.switch-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch-row input:checked { background: var(--deep); }
.switch-row input:checked::after { transform: translateX(20px); }

/* ------------------------------------------------------------------- auth */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 20px 64px; max-width: 1080px; margin: 0 auto; }
.auth-wrap.single { grid-template-columns: minmax(0, 460px); justify-content: center; }
.glass { background: rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); }
.auth-card { border-radius: 22px; padding: 30px; }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.auth-brand strong { display: block; font-size: .95rem; }
.auth-brand small { font-size: .72rem; display: block; max-width: 240px; }
.auth-title { margin-bottom: 4px; }
.auth-sub { font-size: .9rem; margin-bottom: 20px; }
.auth-aside { text-align: center; }
.auth-aside .illustration svg { width: 100%; max-width: 320px; }
.speech-bubble { display: inline-block; background: #fff; border: 1px solid var(--line); padding: 10px 18px; border-radius: 18px 18px 18px 4px; font-weight: 600; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.auth-aside p { max-width: 34ch; margin: 18px auto 0; }

/* ------------------------------------------------------------- app shell */
.app-shell { display: flex; min-height: 100vh; }
/* Halaman publik memakai alur blok biasa (bukan sidebar + konten). */
.app-shell.public { display: block; }
.app-shell.public .app-main { display: block; }
.app-shell.public .page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 0; }
.app-shell.public .page.section, .app-shell.public .page .section:first-child { padding-top: 24px; }
.sidebar {
  width: 248px; flex: 0 0 248px; background: #fff; border-right: 1px solid var(--line);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar.dark { background: linear-gradient(180deg, #1F4E77, #163A5A); border-right: 0; color: #fff; }
.sidebar.dark .sidebar-brand strong, .sidebar.dark .sidebar-user strong { color: #fff; }
.sidebar.dark small { color: rgba(255,255,255,.6); }
.sidebar.dark .nav-link { color: rgba(255,255,255,.82); }
.sidebar.dark .nav-link:hover, .sidebar.dark .nav-link.active { background: rgba(255,255,255,.14); color: #fff; }
.sidebar.dark .avatar { background: rgba(255,255,255,.2); color: #fff; }
.sidebar-brand { display: flex; gap: 10px; align-items: center; color: inherit; padding: 4px 6px; }
.sidebar-brand strong { display: block; font-size: .88rem; line-height: 1.2; }
.sidebar-brand small { font-size: .68rem; color: var(--muted); }
.sidebar-user { display: flex; gap: 10px; align-items: center; background: var(--near); border-radius: 12px; padding: 10px; }
.sidebar.dark .sidebar-user { background: rgba(255,255,255,.1); }
.sidebar-user strong { display: block; font-size: .85rem; }
.sidebar-user small { font-size: .7rem; color: var(--muted); }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--pale); color: var(--deep); display: grid; place-items: center; font-weight: 700; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: .87rem; font-weight: 500; }
.nav-link:hover { background: var(--near); text-decoration: none; }
.nav-link.active { background: var(--pale); color: var(--deep); font-weight: 600; }
.nav-icon { width: 18px; text-align: center; font-size: .95rem; }
.as-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 8px; }
.sidebar.dark .sidebar-foot { border-color: rgba(255,255,255,.16); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.app-topbar-actions { display: flex; gap: 8px; align-items: center; }
.page { padding: 26px 30px 90px; }
.page.container { padding-top: 26px; }
.bottom-nav { display: none; }
.flash { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 30px 0; padding: 12px 16px; border-radius: 12px; font-size: .9rem; }
.flash-success { background: #E7F6F0; color: #14664F; }
.flash-error { background: #FCEBE9; color: #8E322B; }
.flash-info { background: #EAF4FD; color: #215C8C; }
.flash-warn { background: #FDF4E3; color: #7C5310; }
.flash-close { background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: inherit; line-height: 1; }

/* -------------------------------------------------------------- dashboard */
.dash-hero { display: flex; gap: 24px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.dash-hero-side { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; min-width: 170px; box-shadow: var(--shadow-sm); }
.stat-card strong { display: block; font-size: 1.5rem; line-height: 1.2; }
.stat-card.gold strong { font-size: 1rem; }
.stat-tile { display: flex; gap: 14px; align-items: center; }
.stat-tile strong { font-size: 1.25rem; display: block; line-height: 1.2; }
.tile-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; background: var(--pale); display: grid; place-items: center; font-size: 1.15rem; }
.bar { height: 8px; background: var(--pale); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.bar.big { height: 14px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--deep), var(--medium)); border-radius: 999px; }
.score-ring { width: 74px; height: 74px; flex: 0 0 74px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--deep) calc(var(--score) * 1%), var(--pale) 0); position: relative; }
.score-ring::after { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.score-ring span, .score-ring small { position: relative; z-index: 1; }
.score-ring span { font-weight: 800; font-size: 1.2rem; line-height: 1; }
.score-ring small { font-size: .65rem; color: var(--muted); }
.eval-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.dim-list { display: grid; gap: 8px; margin-top: 12px; }
.dim-row { display: grid; grid-template-columns: 120px 1fr 38px; gap: 10px; align-items: center; font-size: .84rem; }
.dim-row b { text-align: right; }
.activity-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 12px; }
.activity-list li { display: flex; gap: 10px; align-items: flex-start; }
.activity-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--medium); margin-top: 7px; flex: 0 0 8px; }
.notif-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.notif-list li { border-left: 3px solid var(--medium); padding-left: 12px; }
.stat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.stat-list li { display: flex; gap: 10px; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: .9rem; }
.stat-list li:last-child { border-bottom: 0; }
.progress-list { display: grid; gap: 14px; }
.progress-row { font-size: .9rem; }
.prose-answer { white-space: pre-wrap; }

/* ------------------------------------------------------------- kurikulum */
.level-list { display: grid; gap: 16px; }
.level-card summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.level-num { background: var(--pale); color: var(--deep); font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 999px; }
.level-title { flex: 1; font-weight: 700; display: block; }
.level-title small { display: block; font-weight: 400; font-size: .8rem; }
.level-body { margin-top: 16px; }
.level-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.lesson-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; }
.lesson-list li:hover { background: var(--near); }
.lesson-list li.done { background: #F1FAF6; }
.lesson-check { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .7rem; color: var(--ok); background: #fff; }
.lesson-list.done .lesson-check { background: #E4F5EF; border-color: #B9E3D4; }
.lesson-list li.done .lesson-check { background: #E4F5EF; border-color: #B9E3D4; }
.lesson-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--medium); margin-top: 8px; flex: 0 0 8px; }
.lesson-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .87rem; }
.lesson-mini li { padding: 7px 10px; border-radius: 8px; }
.lesson-mini li.current { background: var(--pale); font-weight: 600; }
.prompt-box { background: var(--near); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 14px; }
.prompt-box p { margin: 4px 0 0; }
.sentence { font-size: 1.05rem; font-weight: 600; color: var(--deep); }

/* ------------------------------------------------------------------ misc */
.exercise-card { display: block; }
.exercise-card h3 { margin: 10px 0 6px; }
.organizer-result { display: grid; gap: 12px; background: var(--near); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 16px; }
.organizer-result h4 { margin: 0 0 4px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--deep); }
.organizer-result p, .organizer-result ul { margin: 0; font-size: .9rem; }
.recorder-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rec-preview audio { width: 100%; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0; }
.metric { background: var(--near); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.metric strong { display: block; font-size: .95rem; }
.metric small { color: var(--muted); font-size: .72rem; }
.rec-status { font-variant-numeric: tabular-nums; }
.past-mission { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.past-mission p { margin: 0 0 4px; font-size: .88rem; }
.history-list { display: grid; gap: 8px; }
.history-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.history-item summary { display: flex; gap: 10px; align-items: center; }
.history-body { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.transcript { max-height: 220px; overflow: auto; background: var(--near); border-radius: 8px; padding: 10px; }
.transcript p { margin: 0 0 6px; font-size: .84rem; }
.recording-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.recording-item audio { width: 100%; margin: 8px 0; }
.eval-history { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.eval-history summary { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.eval-detail { margin-top: 10px; }
.admin-reply { background: var(--pale); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.admin-reply p { margin: 4px 0 0; }

/* -------------------------------------------------------------- chat UI */
.chat-card { display: flex; flex-direction: column; min-height: 520px; }
.chat-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.chat-head p { margin: 4px 0 0; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 0; max-height: 420px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.msg.ai { background: var(--pale); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--deep); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.sys { background: var(--near); border: 1px dashed var(--line); align-self: center; font-size: .8rem; color: var(--muted); }
.chat-input { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.chat-input input { flex: 1; }
.listening { animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(57,125,182,.4); } 50% { box-shadow: 0 0 0 8px rgba(57,125,182,0); } }
.turn-list { padding-left: 20px; display: grid; gap: 10px; }
.turn-list li p { margin: 0 0 4px; font-size: .9rem; }

/* ----------------------------------------------------------------- plans */
.plan-grid { align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.plan-card.popular { border-color: var(--medium); box-shadow: 0 16px 36px rgba(57,125,182,.16); }
.plan-flag { position: absolute; top: -12px; right: 16px; }
.plan-price { font-size: 1.7rem; font-weight: 800; }
.plan-price small { font-size: .82rem; font-weight: 500; color: var(--muted); }
.plan-card .check-list { flex: 1; margin-top: 8px; }
.pay-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pay-logo { background: var(--near); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: .8rem; font-weight: 600; color: var(--muted); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.table tbody tr:hover { background: var(--near); }
.table.small { font-size: .82rem; }
.table td.actions, .table th:last-child { white-space: nowrap; }
.table td.actions form { display: inline; }
.chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding-top: 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.chart-bar { width: 100%; max-width: 54px; background: linear-gradient(180deg, var(--medium), var(--deep)); border-radius: 8px 8px 4px 4px; display: flex; align-items: flex-start; justify-content: center; min-height: 4px; position: relative; transition: height .3s ease; }
.chart-bar span { position: absolute; top: -20px; font-size: .72rem; color: var(--muted); font-weight: 600; }
.chart-bar.gold { background: linear-gradient(180deg, #E7C878, #C99519); }
.review-admin-list { display: grid; gap: 16px; }
.ticket { margin-bottom: 16px; }
.article-card { display: block; }
.article-emoji { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.small-title { font-size: 1rem; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.footer-grid h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.footer-grid a { display: block; font-size: .88rem; color: var(--ink); padding: 3px 0; }
.footer-grid a:hover { color: var(--deep); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 16px; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1023px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav-panel.open { display: flex; }
  .header-actions { display: none; }
  /* tombol tema tetap terlihat di layar kecil */
  .header-inner .mobile-theme { display: inline-grid; margin-left: auto; }
  .header-inner .nav-toggle { margin-left: 8px; }
  .hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { order: -1; max-width: 320px; margin: 0 auto; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid.lesson-layout, .grid.chat-layout, .grid.admin-split { grid-template-columns: 1fr; }
  .card.sticky { position: static; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-104%);
    transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); width: 260px;
  }
  .sidebar.open { transform: translateX(0); }
  .app-topbar { display: flex; }
  .page { padding: 20px 18px 96px; }
  .flash { margin: 12px 18px 0; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
    padding: 6px 4px 8px; backdrop-filter: blur(12px);
  }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.05rem; color: var(--muted); padding: 4px; border-radius: 10px; }
  .bottom-nav a.active { color: var(--deep); background: var(--pale); }
  .bottom-nav small { font-size: .64rem; font-weight: 600; }
  .dim-row { grid-template-columns: 96px 1fr 34px; }
}
@media (max-width: 639px) {
  body { font-size: 15px; }
  /* header publik: logo + tombol tema + menu harus muat di 390px */
  .header-inner { gap: 8px; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand-text { min-width: 0; }
  .brand-text strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-text small { display: none; }
  .header-inner .mobile-theme { flex: 0 0 auto; }
  .section { padding: 36px 0; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-points { flex-direction: column; gap: 6px; }
  .card { padding: 18px; }
  .dash-hero-side { width: 100%; }
  .stat-card { flex: 1; min-width: 140px; }
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .cta-band { padding: 24px; }
  .table { font-size: .82rem; }
  .chat-log { max-height: 320px; }
  .msg { max-width: 92%; }
  .filter-bar > * { flex: 1 1 100%; }
}
@media (min-width: 1440px) {
  .container { max-width: 1280px; }
  .page { padding: 32px 44px 90px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   AI Speaking Tutor (upgrade v2)
   ========================================================================== */
.mb-0 { margin-bottom: 0; } .mt-4 { margin-top: 4px; }
.back-link { display: inline-block; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.back-link:hover { color: var(--deep); }
.tutor-head { margin-bottom: 18px; }
.tutor-head h1 { margin-bottom: 6px; }
.tutor-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.step-nav {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin-bottom: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm);
  position: sticky; top: 60px; z-index: 15; scrollbar-width: none;
}
.step-nav::-webkit-scrollbar { display: none; }
.step-nav button {
  flex: 1 0 auto; white-space: nowrap; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .85rem; font-weight: 600; padding: 9px 14px; border-radius: 999px; cursor: pointer;
}
.step-nav button.active { background: linear-gradient(135deg, var(--deep), #2F6CA0); color: #fff; }
.tutor-panel { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tutor-callout { background: var(--pale); border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0; border-left: 4px solid var(--deep); }
.example-line { font-size: 1.12rem; line-height: 1.6; font-weight: 600; color: var(--deep); background: var(--near); border-left: 4px solid var(--medium);
  padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 8px 0 16px; }
.example-audio { width: 100%; margin: 8px 0; }
.transcript-box { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .95rem; line-height: 1.8; color: var(--ink); }
.tts-player { background: var(--near); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }

.recorder-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); margin-top: 16px; }
.rec-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rec-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--deep); background: var(--pale); padding: 4px 12px; border-radius: 999px; font-size: .85rem; }
.consent-line { background: var(--near); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.waveform { width: 100%; height: 56px; display: block; background: var(--near); border-radius: 10px; margin: 12px 0; }
.recorder-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rec-preview textarea { margin-top: 4px; }
.no-mic { border-top: 1px dashed var(--line); padding-top: 10px; }
.no-mic summary { cursor: pointer; font-size: .85rem; color: var(--muted); font-weight: 600; }

.focus-list { display: grid; gap: 8px; margin-top: 12px; }
.focus-row { display: flex; gap: 10px; align-items: flex-start; background: var(--near); border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.focus-row span.badge { flex: 0 0 auto; }
.corrections { display: grid; gap: 10px; }
.correction { border-left: 3px solid var(--medium); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.correction p { margin: 6px 0 0; }
.correction .fix { color: var(--ok); }
.mastery-note { background: var(--pale); border-radius: 10px; padding: 10px 14px; font-size: .88rem; margin-top: 12px; }
.tutor-ask { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.tutor-ask input { flex: 1; }
.next-step-card { background: var(--pale); border-radius: var(--radius-sm); padding: 14px; }
.recap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.recap-list li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: .9rem; }
.recap-list li span { color: var(--muted); }
.recap-list li strong { text-align: right; }

.mastery-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mastery-chip { font-size: .78rem; padding: 6px 12px; border-radius: 999px; background: var(--near); border: 1px solid var(--line); color: var(--muted); }
.mastery-chip strong { color: var(--ink); }
.mastery-chip.mastered { background: #E4F5EF; border-color: #C6EADF; color: #14664F; }
.mastery-chip.almost { background: #E6F1FB; border-color: #D2E6F8; color: #215C8C; }
.mastery-chip.needs_review { background: #FDF4E3; border-color: #F6E4C2; color: #7C5310; }
.continue-card { background: linear-gradient(135deg, #fff, #EAF4FD); border-color: #CDE3F7; }
.chapter-block { margin-top: 18px; }
.chapter-title { font-size: .95rem; margin-bottom: 8px; }
.unit-row { align-items: flex-start; }
.unit-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.challenge-hero { background: linear-gradient(135deg, #fff, #EAF4FD); border-color: #CDE3F7; }
.done-stamp { text-align: center; font-size: .78rem; color: var(--ok); background: #E4F5EF; border-radius: 12px; padding: 8px 14px; }
.done-stamp strong { font-size: 1.3rem; display: block; }

@media (max-width: 639px) {
  .step-nav { top: 56px; }
  .step-nav button { font-size: .78rem; padding: 8px 10px; }
  .recorder-card { padding: 16px; }
  .example-line { font-size: 1rem; }
  .recap-list li { flex-direction: column; gap: 2px; }
  .recap-list li strong { text-align: left; }
}

/* Gambar karakter/ilustrasi yang dapat diganti owner */
.character-photo { display: block; width: 100%; border-radius: 20px; }
.hero-photo { max-width: 400px; max-height: 460px; filter: drop-shadow(0 22px 34px rgba(25,59,90,.16)); }
.hero-photo.fit-cover { height: 420px; object-fit: cover; }
.hero-photo.fit-contain { object-fit: contain; }
.auth-photo { max-width: 320px; margin: 0 auto; }
.auth-photo.fit-cover { height: 280px; object-fit: cover; }
.auth-photo.fit-contain { object-fit: contain; }
.image-editor .image-slot { display: flex; flex-direction: column; gap: 6px; }
.image-preview { background: var(--near); border: 1px dashed var(--line); border-radius: 14px; min-height: 150px; display: grid; place-items: center; padding: 10px; }
.image-preview img { max-width: 100%; max-height: 190px; border-radius: 10px; object-fit: contain; }
.image-preview.small { min-height: 120px; }
.upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.upload-row input[type=file] { font-size: .8rem; max-width: 100%; }
.auth-help { background: var(--near); border-radius: 10px; padding: 12px; margin-top: 14px; }
.auth-help p { margin: 0 0 6px; }
.auth-help p:last-child { margin-bottom: 0; }
@media (max-width: 639px) {
  .hero-photo.fit-cover { height: 300px; }
  .hero-photo { max-height: 320px; }
}

/* Logo yang dapat diganti gambar oleh owner */
.brand-mark.has-image { background: transparent; box-shadow: none; padding: 0; overflow: hidden; }
.brand-mark.has-image img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: inherit; }
.sidebar.dark .brand-mark.has-image { background: #fff; padding: 2px; }
.app-topbar .brand-mark.has-image { border: 1px solid var(--line); background: #fff; padding: 2px; }
.logo-preview-row { display: flex; gap: 10px; flex-wrap: wrap; }
.logo-preview-row .logo-preview-row { display: flex; }
.image-preview.logo-preview { width: 96px; height: 96px; min-height: 96px; padding: 8px; flex: 0 0 auto; }
.image-preview.logo-preview img { max-height: 80px; }
.image-preview.logo-preview.dark { background: #1F4E77; border-color: #2C6795; }
.mono-chip { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--deep), var(--medium)); font-size: 1.1rem; }

/* ==========================================================================
   Mode gelap (activated theme switch)
   Identitas biru pastel dipertahankan; latar menjadi navy dalam dengan
   permukaan berlapis. Semua komponen yang memakai warna terang eksplisit
   ditimpa di sini.
   ========================================================================== */
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --deep: #4E96CF;
  --medium: #7FB3DD;
  --pale: #1B3550;
  --near: #12243A;
  --white: #152A41;
  --ink: #E7EFF8;
  --muted: #9DB2C8;
  --line: #26445F;
  --ok: #4FD1A5;
  --warn: #E0AE5B;
  --danger: #F08A80;
  --gold: #E5B94E;
  --surface: #14283D;
  --surface-2: #1A3350;
  --shadow: 0 14px 34px rgba(0, 0, 0, .5);
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, .38);
}
html[data-theme="dark"] body {
  background: linear-gradient(180deg, #0B1622 0%, #0E1B29 55%, #102338 100%);
  color: var(--ink);
}
html[data-theme="dark"] a { color: #79B4E4; }
html[data-theme="dark"] .muted { color: var(--muted); }
html[data-theme="dark"] code { background: #1D3A56; color: #CDE3F7; }

/* permukaan */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .speech-bubble,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .mobile-nav-panel,
html[data-theme="dark"] .recorder-card,
html[data-theme="dark"] .transcript-box,
html[data-theme="dark"] .correction,
html[data-theme="dark"] .lesson-check,
html[data-theme="dark"] .image-preview {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .card {
  background: rgba(20, 40, 61, .9);
  backdrop-filter: blur(10px) saturate(120%);
}
html[data-theme="dark"] .card.accent,
html[data-theme="dark"] .continue-card,
html[data-theme="dark"] .challenge-hero,
html[data-theme="dark"] .card-float {
  background: linear-gradient(150deg, #172F47 0%, #14283D 100%);
  border-color: #2A4C6C;
}
html[data-theme="dark"] .card-float { background: rgba(23, 47, 71, .96); }
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .icon-btn {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .btn-ghost:hover { background: #21405F; }
html[data-theme="dark"] .btn-soft { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .btn-soft:hover { background: #24486A; }
html[data-theme="dark"] .btn-danger { background: #3A2028; color: #F5A39A; border-color: #57303A; }
html[data-theme="dark"] .btn-primary { box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }

/* header & navigasi */
html[data-theme="dark"] .site-header { background: rgba(11, 22, 34, .92); border-bottom-color: var(--line); }
html[data-theme="dark"] .site-nav a { color: var(--ink); }
html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-nav a.active { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .mobile-nav-panel a { color: var(--ink); }
html[data-theme="dark"] .mobile-nav-panel a:hover { background: #1D3A56; }
html[data-theme="dark"] .mobile-nav-panel { border-top-color: var(--line); }
html[data-theme="dark"] .app-topbar { background: rgba(15, 30, 46, .95); border-bottom-color: var(--line); }
html[data-theme="dark"] .sidebar { background: #0F2337; border-right-color: var(--line); }
html[data-theme="dark"] .sidebar.dark { background: linear-gradient(180deg, #142C44, #0D1F31); }
html[data-theme="dark"] .sidebar-user { background: #16304A; }
html[data-theme="dark"] .nav-link { color: var(--ink); }
html[data-theme="dark"] .nav-link:hover { background: #16304A; }
html[data-theme="dark"] .nav-link.active { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .bottom-nav { background: rgba(15, 30, 46, .97); border-top-color: var(--line); }
html[data-theme="dark"] .bottom-nav a { color: var(--muted); }
html[data-theme="dark"] .bottom-nav a.active { color: #A9D0EF; background: #1D3A56; }
html[data-theme="dark"] .site-footer { background: #0F2134; border-top-color: var(--line); }
html[data-theme="dark"] .footer-grid a { color: var(--ink); }
html[data-theme="dark"] .step-nav { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .step-nav button { color: var(--muted); }
html[data-theme="dark"] .step-nav button.active { color: #fff; }

/* form */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0F2337; border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6E879F; }
html[data-theme="dark"] input:disabled { background: #162B41; color: var(--muted); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--medium); box-shadow: 0 0 0 3px rgba(79, 150, 207, .3); }
html[data-theme="dark"] .glass { background: rgba(20, 40, 61, .92); border-color: #2A4C6C; }
html[data-theme="dark"] .consent-line { background: #12243A; }

/* pesan & status */
html[data-theme="dark"] .alert-success, html[data-theme="dark"] .flash-success { background: #12332A; color: #8FE3C4; border-color: #1C5342; }
html[data-theme="dark"] .alert-error, html[data-theme="dark"] .flash-error { background: #3A1F22; color: #F6A9A1; border-color: #5A2F33; }
html[data-theme="dark"] .alert-info, html[data-theme="dark"] .flash-info { background: #14304A; color: #A9D0EF; border-color: #24486A; }
html[data-theme="dark"] .alert-warn, html[data-theme="dark"] .flash-warn { background: #372B14; color: #EBC77E; border-color: #57431F; }
html[data-theme="dark"] .badge-ok { background: #12332A; color: #8FE3C4; }
html[data-theme="dark"] .badge-info { background: #14304A; color: #A9D0EF; }
html[data-theme="dark"] .badge-warn { background: #372B14; color: #EBC77E; }
html[data-theme="dark"] .badge-danger { background: #3A1F22; color: #F6A9A1; }
html[data-theme="dark"] .badge-soft { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .badge-gold { background: #372C10; color: #EBC77E; }
html[data-theme="dark"] .pill-soft { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .pill-gold { background: #372C10; color: #EBC77E; }
html[data-theme="dark"] .chip { background: #12243A; border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .mastery-chip { background: #12243A; border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .mastery-chip.mastered { background: #12332A; color: #8FE3C4; border-color: #1C5342; }
html[data-theme="dark"] .mastery-chip.almost { background: #14304A; color: #A9D0EF; border-color: #24486A; }
html[data-theme="dark"] .mastery-chip.needs_review { background: #372B14; color: #EBC77E; border-color: #57431F; }
html[data-theme="dark"] .done-stamp { background: #12332A; color: #8FE3C4; }

/* elemen latihan */
html[data-theme="dark"] .prompt-box,
html[data-theme="dark"] .organizer-result,
html[data-theme="dark"] .fusion,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .focus-row,
html[data-theme="dark"] .tts-player,
html[data-theme="dark"] .next-step-card,
html[data-theme="dark"] .mastery-note,
html[data-theme="dark"] .admin-reply,
html[data-theme="dark"] .auth-help,
html[data-theme="dark"] .transcript,
html[data-theme="dark"] .history-body,
html[data-theme="dark"] .waveform {
  background: #0F2337;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .next-step-card,
html[data-theme="dark"] .mastery-note,
html[data-theme="dark"] .admin-reply,
html[data-theme="dark"] .tutor-callout { background: #1A3350; }
html[data-theme="dark"] .tutor-callout { border-left-color: var(--deep); }
html[data-theme="dark"] .example-line { background: #0F2337; color: #A9D0EF; border-left-color: var(--medium); }
html[data-theme="dark"] .lesson-list li:hover { background: #16304A; }
html[data-theme="dark"] .lesson-list li.done { background: #102E28; }
html[data-theme="dark"] .lesson-mini li.current { background: #1D3A56; }
html[data-theme="dark"] .score-ring::after { background: var(--surface); }
html[data-theme="dark"] .bar { background: #1B3550; }
html[data-theme="dark"] .bar i { background: linear-gradient(90deg, #4E96CF, #7FB3DD); }
html[data-theme="dark"] .switch-row input { background: #2A4A68; }
html[data-theme="dark"] .switch-row input::after { background: #DCEBFA; }
html[data-theme="dark"] .star-input button { color: #34526F; }

/* tabel */
html[data-theme="dark"] .table th { color: var(--muted); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td { border-bottom-color: var(--line); }
html[data-theme="dark"] .table tbody tr:hover { background: #16304A; }
html[data-theme="dark"] .chart-bar { background: linear-gradient(180deg, #4E96CF, #2E6C9E); }
html[data-theme="dark"] .chart-bar.gold { background: linear-gradient(180deg, #B99638, #8A6C1F); }

/* media & misc */
html[data-theme="dark"] .image-preview.logo-preview.dark { background: #0B1622; }
html[data-theme="dark"] .brand-mark { background: linear-gradient(135deg, #4E96CF, #7FB3DD); color: #06121D; }
html[data-theme="dark"] .brand-mark.has-image { background: #fff; }
html[data-theme="dark"] .app-topbar .brand-mark.has-image { border-color: var(--line); }
html[data-theme="dark"] .tile-icon, html[data-theme="dark"] .feature-icon, html[data-theme="dark"] .step-dot,
html[data-theme="dark"] .timeline-index, html[data-theme="dark"] .level-num { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .avatar { background: #1D3A56; color: #A9D0EF; }
html[data-theme="dark"] .cta-band { background: linear-gradient(135deg, #1F4E77, #14324D); }
html[data-theme="dark"] .section-band { background: linear-gradient(90deg, #172F47, #14304A); border-color: var(--line); color: #A9D0EF; }
html[data-theme="dark"] .disclaimer { background: #12243A; color: var(--muted); }
html[data-theme="dark"] .msg.ai { background: #1D3A56; color: #E7EFF8; }
html[data-theme="dark"] .msg.user { background: #2E6C9E; color: #fff; }
html[data-theme="dark"] .msg.sys { background: #12243A; border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .recording-item,
html[data-theme="dark"] .history-item,
html[data-theme="dark"] .eval-history,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .level-card { border-color: var(--line); }
html[data-theme="dark"] audio, html[data-theme="dark"] video { filter: none; }
html[data-theme="dark"] .hero-bg { background:
  radial-gradient(600px 340px at 12% 0%, rgba(78, 150, 207, .28), transparent 70%),
  radial-gradient(520px 320px at 88% 18%, rgba(27, 53, 80, .85), transparent 70%); }

/* tombol tema */
.theme-toggle { display: inline-grid; place-items: center; line-height: 1; transition: transform .2s ease, background .2s ease; }
.theme-toggle:hover { transform: rotate(-12deg); }
.theme-toggle.theme-flash { transform: scale(1.12); }
@media (min-width: 1024px) { .mobile-theme { display: none; } }
.nav-theme-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
  font: inherit; font-weight: 500; color: var(--ink); padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.nav-theme-btn:hover { background: var(--pale); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* pemilih tema di halaman profil */
.theme-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-choice label { flex: 1 1 120px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; cursor: pointer; background: var(--surface); font-size: .9rem; font-weight: 600; }
.theme-choice label:hover { border-color: var(--medium); }
.theme-choice input { accent-color: var(--deep); width: 18px; height: 18px; }
.theme-choice label:has(input:checked) { border-color: var(--deep); box-shadow: 0 0 0 3px rgba(57, 125, 182, .18); background: var(--pale); }
.theme-choice small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }

/* kartu keluar akun */
.logout-card { border-color: #F0C9C4; }
html[data-theme="dark"] .logout-card { border-color: #57303A; background: #2A1B22; }
.logout-card h3 { margin-top: 0; }
.logout-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 639px) {
  .mobile-theme { display: inline-grid; }
  .theme-choice label { flex: 1 1 100%; }
}