@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- tokens
   Palet mengikuti design.md: satu keluarga biru untuk blob dan aksen,
   netral untuk teks. Nilai mode gelap tidak mengubah tata letak apa pun,
   hanya warna dasar, jadi tidak ada komponen yang perlu ditata ulang. */
:root {
  color-scheme: light;

  --bg: #F7F8FA;
  --ink: #20242A;
  --ink-soft: #414852;
  --muted: #626A75;
  --faint: #717985;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --paper-deep: #E9EDF1;

  --line: rgba(17, 18, 20, 0.09);
  --line-strong: rgba(17, 18, 20, 0.18);

  --btn-primary-bg: #111214;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-hover: #24262B;
  --btn-secondary-bg: rgba(255, 255, 255, 0.8);
  --ghost-hover: rgba(17, 18, 20, 0.045);
  --danger-hover: rgba(161, 37, 43, 0.08);

  --accent: #1A66AC;
  /* Nama lama dipertahankan sebagai alias supaya aturan komponen tidak perlu
     disentuh satu per satu; semuanya mengarah ke palet baru. */
  --paper: var(--bg);
  --green: var(--accent);
  --green-bright: #5DB7F2;
  --accent-strong: #14548C;
  --accent-on-dark: #8FC7F5;
  --on-accent: #FFFFFF;
  --green-deep: #14548C;

  --ok: #1C6642;
  --ok-ink: #1C6642;
  --ok-wash: rgba(28, 102, 66, 0.09);
  --ok-border: rgba(28, 102, 66, 0.28);
  --danger: #A1252B;
  --danger-wash: rgba(161, 37, 43, 0.08);

  --clay: #A1252B;
  --clay-soft: rgba(161, 37, 43, 0.08);
  --clay-soft-2: rgba(161, 37, 43, 0.14);
  --clay-ink: #8E2126;
  --clay-dark: #8E2126;
  --sand: rgba(20, 60, 120, 0.07);
  --sand-2: rgba(20, 60, 120, 0.12);
  --sand-ink: #3E4A57;

  --forest: #16202B;
  --forest-soft: #1D2937;
  --dark-surface: #16202B;
  --on-dark: #F5F6F8;
  --on-dark-muted: #B4BAC3;
  --on-dark-faint: #8C939D;
  --on-dark-chip: rgba(255, 255, 255, 0.12);

  --blob-1: #B5DCF3;
  --blob-2: #D1E7F5;
  --blob-3: #E2EFF8;
  --blob-opacity: 0.2;

  --toast-bg: #111214;
  --toast-fg: #FFFFFF;

  --rail-bg: rgba(255, 255, 255, 0.94);
  --rail-border: rgba(17, 18, 20, 0.08);
  --rail-ink: #20242A;
  --rail-muted: #626A75;
  --rail-faint: #717985;
  --rail-hover: rgba(17, 18, 20, 0.05);
  --rail-active: rgba(17, 18, 20, 0.07);
  --rail-chip: rgba(17, 18, 20, 0.06);
  --rail-card: rgba(255, 255, 255, 0.9);

  --selection: rgba(93, 183, 242, 0.3);
  --wash: rgba(255, 255, 255, 0.5);
  --shimmer: rgba(255, 255, 255, 0.7);
  --scrim: rgba(17, 18, 20, 0.28);
  --shadow-modal: rgba(20, 60, 120, 0.28);

  --shadow-sm: 0 1px 2px rgba(20, 60, 120, 0.05), 0 8px 24px -14px rgba(20, 60, 120, 0.22);
  --shadow-md: 0 2px 6px rgba(20, 60, 120, 0.05), 0 26px 50px -30px rgba(20, 60, 120, 0.35);
  --btn-shadow: 0 1px 2px rgba(20, 60, 120, 0.16);
  --btn-shadow-hover: 0 6px 18px -10px rgba(20, 60, 120, 0.6);

  --radius: 14px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --sidebar: 268px;
  --spring: cubic-bezier(0.22, 1.16, 0.36, 1);
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #242424;
  --ink: #F5F6F8;
  --ink-soft: #D3D7DC;
  --muted: #A9ADB5;
  --faint: #9AA0A8;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: #313131;
  --paper-deep: #343434;

  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);

  --btn-primary-bg: #FFFFFF;
  --btn-primary-fg: #111214;
  --btn-primary-hover: #E4E7EC;
  --btn-secondary-bg: transparent;
  --ghost-hover: rgba(255, 255, 255, 0.07);
  --danger-hover: rgba(255, 158, 158, 0.12);

  --accent: #8FC7F5;
  --accent-strong: #B7DCF9;
  --accent-on-dark: #8FC7F5;
  --on-accent: #111214;
  --green-deep: #B7DCF9;

  --ok: #7BD9A5;
  --ok-ink: #7BD9A5;
  --ok-wash: rgba(123, 217, 165, 0.13);
  --ok-border: rgba(123, 217, 165, 0.34);
  --danger: #FF9E9E;
  --danger-wash: rgba(255, 158, 158, 0.13);

  --clay: #FF9E9E;
  --clay-soft: rgba(255, 158, 158, 0.13);
  --clay-soft-2: rgba(255, 158, 158, 0.2);
  --clay-ink: #FFBDBD;
  --clay-dark: #FFBDBD;
  --sand: rgba(143, 199, 245, 0.1);
  --sand-2: rgba(143, 199, 245, 0.17);
  --sand-ink: #C6D6E4;

  --forest: #1B1B1B;
  --forest-soft: #262626;
  --dark-surface: #1B1B1B;
  --on-dark: #F5F6F8;
  --on-dark-muted: #B4BAC3;
  --on-dark-faint: #8C939D;
  --on-dark-chip: rgba(255, 255, 255, 0.14);

  --rail-bg: rgba(36, 36, 36, 0.82);
  --rail-border: rgba(255, 255, 255, 0.1);
  --rail-ink: #F5F6F8;
  --rail-muted: #A9ADB5;
  --rail-faint: #9AA0A8;
  --rail-hover: rgba(255, 255, 255, 0.07);
  --rail-active: rgba(255, 255, 255, 0.11);
  --rail-chip: rgba(255, 255, 255, 0.1);
  --rail-card: rgba(255, 255, 255, 0.05);

  --selection: rgba(143, 199, 245, 0.32);
  --wash: rgba(255, 255, 255, 0.04);
  --shimmer: rgba(255, 255, 255, 0.12);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow-modal: rgba(0, 0, 0, 0.55);

  /* design.md: mode gelap memakai border tipis, bukan bayangan. */
  --shadow-sm: none;
  --shadow-md: none;
  --btn-shadow: none;
  --btn-shadow-hover: none;

  /* Aura di mode gelap memakai nada yang jauh lebih dalam daripada mode
     terang. Nada asli (#5DB7F2 dan sejenisnya) di atas #242424 menghasilkan
     bidang seterang L 0.13, sehingga teks --muted (L 0.42) hanya mencapai
     2.6:1 dan tampak "bertabrakan" dengan aura. Nada di bawah ini menjaga
     puncak aura di L ~0.05, cukup untuk 4.5:1 pada teks sekunder mana pun
     yang duduk di atasnya, tanpa kehilangan kesan biru. */
  --blob-1: #2F6183;
  --blob-2: #2A5675;
  --blob-3: #255070;
  --blob-opacity: 0.46;

  --toast-bg: #F5F6F8;
  --toast-fg: #111214;
}

/* Tanpa JavaScript, setelan sistem tetap dipakai. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #242424;
    --ink: #F5F6F8;
    --ink-soft: #D3D7DC;
    --muted: #A9ADB5;
    --faint: #9AA0A8;
    --surface: rgba(255, 255, 255, 0.06);
    --surface-2: #313131;
    --paper-deep: #343434;
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    --btn-primary-bg: #FFFFFF;
    --btn-primary-fg: #111214;
    --btn-primary-hover: #E4E7EC;
    --btn-secondary-bg: transparent;
    --ghost-hover: rgba(255, 255, 255, 0.07);
    --danger-hover: rgba(255, 158, 158, 0.12);
    --accent: #8FC7F5;
    --accent-strong: #B7DCF9;
    --accent-on-dark: #8FC7F5;
    --on-accent: #111214;
    --green-deep: #B7DCF9;
    --ok: #7BD9A5;
    --ok-ink: #7BD9A5;
    --ok-wash: rgba(123, 217, 165, 0.13);
    --ok-border: rgba(123, 217, 165, 0.34);
    --danger: #FF9E9E;
    --danger-wash: rgba(255, 158, 158, 0.13);
    --clay: #FF9E9E;
    --clay-soft: rgba(255, 158, 158, 0.13);
    --clay-soft-2: rgba(255, 158, 158, 0.2);
    --clay-ink: #FFBDBD;
    --clay-dark: #FFBDBD;
    --sand: rgba(143, 199, 245, 0.1);
    --sand-2: rgba(143, 199, 245, 0.17);
    --sand-ink: #C6D6E4;
    --forest: #1B1B1B;
    --forest-soft: #262626;
    --dark-surface: #1B1B1B;
    --on-dark: #F5F6F8;
    --on-dark-muted: #B4BAC3;
    --on-dark-faint: #8C939D;
    --on-dark-chip: rgba(255, 255, 255, 0.14);
    --rail-bg: rgba(36, 36, 36, 0.82);
    --rail-border: rgba(255, 255, 255, 0.1);
    --rail-ink: #F5F6F8;
    --rail-muted: #A9ADB5;
    --rail-faint: #9AA0A8;
    --rail-hover: rgba(255, 255, 255, 0.07);
    --rail-active: rgba(255, 255, 255, 0.11);
    --rail-chip: rgba(255, 255, 255, 0.1);
    --rail-card: rgba(255, 255, 255, 0.05);
    --selection: rgba(143, 199, 245, 0.32);
    --wash: rgba(255, 255, 255, 0.04);
    --shimmer: rgba(255, 255, 255, 0.12);
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow-modal: rgba(0, 0, 0, 0.55);
    --blob-1: #2F6183;
    --blob-2: #2A5675;
    --blob-3: #255070;
    --blob-opacity: 0.46;
    --toast-bg: #F5F6F8;
    --toast-fg: #111214;
    --shadow-sm: none;
    --shadow-md: none;
    --btn-shadow: none;
    --btn-shadow-hover: none;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 320px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--selection); }

/* ---------------------------------------------------------------- icons */
/* Inline SVGs have no intrinsic size; every icon needs an explicit box or it
   stretches to its flex/line context (the oversized chevron bug). */
svg.ico { width: 16px; height: 16px; flex: none; vertical-align: middle; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- layout */
/* Blob adalah satu-satunya dekorasi, sama seperti landing page. Satu lapisan
   tetap di belakang konten: tidak menangkap klik dan tidak ikut menggulir. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 300px at -6% 12%, var(--blob-1), transparent 70%),
    radial-gradient(circle 260px at 104% 2%, var(--blob-2), transparent 70%),
    radial-gradient(circle 240px at 102% 62%, var(--blob-3), transparent 72%),
    radial-gradient(circle 220px at -8% 88%, var(--blob-2), transparent 72%);
  opacity: var(--blob-opacity);
  filter: blur(40px);
}

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

/* Rail terang: mengikuti bahasa visual navbar pill di landing page, bukan
   panel gelap, supaya blob tetap terbaca sebagai latar utama. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px 18px;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-border);
  color: var(--rail-ink);
  overflow-y: auto;
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; padding: 2px 6px 0; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: block;
  overflow: hidden;
  border-radius: 11px;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-family: 'Newsreader', Georgia, serif; font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--rail-ink); }
.brand-text span { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail-faint); }

.nav { display: grid; gap: 2px; }
.nav-label { padding: 0 12px; margin-bottom: 6px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rail-faint); }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  color: var(--rail-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), transform 0.35s var(--spring);
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: 0.8; }
.nav-item:hover { color: var(--rail-ink); background: var(--rail-hover); }
.nav-item:active { transform: scale(0.985); }
.nav-item[aria-current="page"] { color: var(--rail-ink); background: var(--rail-active); font-weight: 600; }
.nav-item[aria-current="page"] svg { opacity: 1; color: var(--accent); }
.nav-item[aria-current="page"]::before {
  content: '';
  position: absolute; left: -16px; top: 50%;
  width: 3px; height: 18px;
  translate: 0 -50%;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  animation: rail 0.45s var(--spring);
}
.nav-count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--rail-chip);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--rail-muted);
}

@keyframes rail { from { height: 0; opacity: 0; } to { height: 18px; opacity: 1; } }

.sidebar-foot { margin-top: auto; display: grid; gap: 12px; }
.storage-card {
  border: 1px solid var(--rail-border);
  background: var(--rail-card);
  border-radius: var(--radius);
  padding: 13px 14px;
}
.storage-card p { font-size: 12px; color: var(--rail-muted); line-height: 1.5; }
.storage-card strong { display: block; font-size: 12.5px; color: var(--rail-ink); font-weight: 600; margin-bottom: 3px; }
.meter { height: 4px; border-radius: 4px; background: var(--rail-chip); overflow: hidden; margin: 10px 0 8px; }
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.9s var(--spring); }

.account { display: flex; align-items: center; gap: 10px; padding: 8px 6px 2px; }
.avatar {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--rail-chip);
  color: var(--rail-ink);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.account-meta { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.account-meta span, .account-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta span { font-size: 12.5px; color: var(--rail-ink); }
.account-meta small { font-size: 10.5px; color: var(--rail-faint); letter-spacing: 0.04em; }
.icon-btn {
  margin-left: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rail-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--rail-muted);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.icon-btn:hover { background: var(--rail-hover); color: var(--rail-ink); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- main */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px;
  padding: 0 clamp(20px, 4vw, 48px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.crumbs a { text-decoration: none; transition: color 0.15s var(--ease); }
.crumbs a:hover { color: var(--ink); }
.crumbs svg { width: 12px; height: 12px; opacity: 0.5; flex: none; }
.crumbs strong { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.menu-btn { display: none; }
/* Tombol tema di topbar memakai warna halaman, bukan warna rail. */
.topbar-theme {
  border-color: var(--line-strong);
  color: var(--muted);
  background: transparent;
}
.topbar-theme:hover { background: var(--surface-2); color: var(--ink); }


/* --------------------------------------------------------- announcements bar */
#announcements:empty { display: none; }
.ann-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px clamp(20px, 4vw, 48px);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  font-size: 12.5px; color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s var(--ease);
}
.ann-bar:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.ann-bar + .ann-bar { border-top: none; }
.ann-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: ann-pulse 1.6s ease-in-out infinite;
}
@keyframes ann-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ann-name { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ann-detail { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ann-percent { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 32px; text-align: right; }
.ann-track { flex: none; width: 80px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); overflow: hidden; }
.ann-fill { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.4s var(--ease); }
.ann-fill.is-live { background-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white), var(--accent)); background-size: 200% 100%; animation: progress-shine 1.8s linear infinite; }
@keyframes progress-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.page { padding: clamp(24px, 3.6vw, 44px) clamp(20px, 4vw, 48px) 72px; width: 100%; max-width: 1180px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.page-title { font-size: clamp(28px, 3.4vw, 40px); margin: 10px 0 8px; }
.page-sub { color: var(--muted); max-width: 58ch; font-size: 14.5px; }
.page-sub strong { color: var(--ink-soft); font-weight: 600; }

/* ---------------------------------------------------------------- surfaces */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-head h2 { font-size: 17px; }
.card-head p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.section { margin-top: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.section-head h2 { font-size: 19px; }
.section-head p { font-size: 12.5px; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.32s var(--spring), background 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
  box-shadow: var(--btn-shadow);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--btn-primary-hover); transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { cursor: not-allowed; transform: none; box-shadow: none; }
/* Tombol nonaktif jangan hanya diredupkan dengan opacity: teks dan latarnya
   ikut memudar bersama, sehingga di tema gelap teks gelap duduk di atas abu
   dan di tema terang teks putih duduk di atas abu. Warna diturunkan satu
   lapis saja (latar jadi samar, teks tetap pekat) supaya keduanya tetap
   terbaca sebagai tombol yang belum bisa ditekan. */
.btn[disabled], .btn[disabled]:hover {
  background: var(--paper-deep);
  color: var(--muted);
  border-color: var(--line);
}
.btn-ghost[disabled], .btn-ghost[disabled]:hover,
.btn-soft[disabled], .btn-soft[disabled]:hover,
.btn-danger[disabled], .btn-danger[disabled]:hover {
  background: transparent;
  color: var(--faint);
  border-color: var(--line);
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-strong); }
.btn-soft { background: var(--sand); color: var(--ink); box-shadow: none; }
.btn-soft:hover { background: var(--sand-2); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--ghost-hover); border-color: var(--line-strong); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(161, 37, 43, 0.32); box-shadow: none; }
.btn-danger:hover { background: var(--danger-hover); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--radius-pill); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); }
.field small { font-size: 11.5px; color: var(--muted); }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  font-size: 14px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 102, 172, 0.12); }
.modal input:not([type]), .modal input[type="text"], .modal textarea, .modal select {
  box-sizing: border-box;
  background: var(--surface);
}
.modal input:not([type]), .modal input[type="text"] { min-height: 44px; border-radius: 12px; }
textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
textarea[data-answer] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
  overflow-y: hidden;
  resize: none;
  border-radius: 10px;
  line-height: 1.7;
}

/* Popup daftar <select> digambar oleh sistem, bukan oleh CSS kotaknya, jadi
   warnanya diambil dari `color` elemen. Di tema gelap `color` adalah --ink
   (#F5F6F8), sehingga daftar berlatarkan putih sistem tampil putih di atas
   putih. `option` diberi warna solid sendiri agar daftarnya selalu terbaca;
   panel gelap memakai latar gelap dengan teks terang. */
select option { background-color: #FFFFFF; color: #111214; }
[data-theme="dark"] select option { background-color: #2B2B2B; color: #F5F6F8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) select option { background-color: #2B2B2B; color: #F5F6F8; }
}

/* ---------------------------------------------------------------- badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.pill-plain::before { display: none; }
.pill-green { background: var(--ok-wash); color: var(--ok-ink); }
.pill-clay { background: var(--clay-soft); color: var(--clay-ink); }
.pill-sand { background: var(--sand); color: var(--sand-ink); }
.pill-quiet { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); }
.pill svg.ico { width: 12px; height: 12px; }
.card-head > svg.ico { width: 18px; height: 18px; }
.course-meta svg.ico { width: 12px; height: 12px; }
.reveal-btn svg.ico { width: 13px; height: 13px; transition: transform 0.3s var(--spring); }
.reveal-btn[aria-expanded="true"] svg.ico { transform: rotate(90deg); }

/* ---------------------------------------------------------------- dashboard */
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: clamp(24px, 3.4vw, 38px);
  box-shadow: var(--shadow-sm);
}
/* Blob di dalam panel, bukan lingkaran gelap: panel tetap terang dan blob
   menjadi satu-satunya dekorasi, sama seperti hero di landing page. */
.hero-card::after {
  content: '';
  position: absolute; right: -110px; top: -130px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blob-2), transparent 70%);
  opacity: var(--blob-opacity);
  filter: blur(40px);
  pointer-events: none;
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .eyebrow { color: var(--accent); }
.hero-card h1 { font-size: clamp(27px, 3.6vw, 38px); margin: 12px 0 10px; color: var(--ink); }
.hero-card p { color: var(--muted); max-width: 46ch; font-size: 14px; }
.hero-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hero-card .btn { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.hero-card .btn:hover { background: var(--accent-strong); }
.hero-card .btn-ghost { background: var(--btn-secondary-bg); color: var(--ink); border-color: var(--line-strong); }
.hero-card .btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
.stat span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat strong { display: block; font-family: 'Newsreader', Georgia, serif; font-size: 26px; font-weight: 500; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat strong .unit { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.stat small { font-size: 11.5px; color: var(--faint); }

/* course cards */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.course-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--spring), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
}
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(26, 102, 172, 0.3); }
.course-card h3 { font-size: 17px; line-height: 1.28; }
.course-card p { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--faint); margin-top: auto; }
.course-cover {
  position: relative;
  isolation: isolate;
  min-height: 78px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.course-cover::after {
  position: absolute;
  z-index: 1;
  top: 11px;
  left: 15px;
  content: 'PROGRES KURSUS';
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--muted);
}
.course-cover-fill {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--course-progress);
  border-right: 1px solid rgba(93, 183, 242, .42);
  background: linear-gradient(110deg, rgba(93, 183, 242, .20), rgba(93, 183, 242, .07));
  transition: width .55s var(--ease);
}
.course-cover-count, .course-cover-percent { position: relative; z-index: 2; }
.course-cover-count { font-size: 12px; font-weight: 600; }
.course-cover-percent { font-size: 21px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: var(--ink); }

/* list rows */
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.list-row:hover { border-color: var(--line-strong); }
.list-row .grow { min-width: 0; flex: 1; }
.list-row strong { font-size: 13.5px; font-weight: 600; display: block; }
.list-row small { font-size: 12px; color: var(--muted); }

/* module list */
.module-row {
  display: flex; align-items: center; gap: 15px;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s var(--spring), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.module-row:hover { transform: translateX(3px); border-color: rgba(26, 102, 172, 0.35); box-shadow: var(--shadow-sm); }
.module-index {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.module-index svg.ico { width: 16px; height: 16px; }
.module-row[data-done="true"] .module-index { background: var(--ok-wash); color: var(--ok-ink); }
.module-row .grow { flex: 1; min-width: 0; }
.module-row strong { display: block; font-size: 14px; font-weight: 600; }
.module-row small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-row > svg.ico { width: 15px; height: 15px; color: var(--faint); }
.module-row:hover > svg.ico { color: var(--green); }

/* roadmap timeline
   One document per stage, its modules on a vertical spine, and a quiz
   checkpoint closing each module. The spine is a single pseudo-element on the
   list so nodes stay aligned no matter how tall a card grows. */
.timeline { display: grid; gap: 30px; }
.tl-doc-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.tl-doc-head .grow { flex: 1; min-width: 0; }
.tl-doc-head strong { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-doc-head small { display: block; font-size: 11.5px; color: var(--muted); }
.tl-doc-badge {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-dark);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-list { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 54px; row-gap: 18px; margin: 0; padding: 0; list-style: none; }
.tl-list::before {
  content: '';
  position: absolute;
  left: 50%; top: 18px; bottom: 18px;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 11px);
}
.tl-item { position: relative; min-width: 0; list-style: none; }
.tl-item:nth-child(4n + 1) { grid-column: 1; }
.tl-item:nth-child(4n + 2), .tl-item:nth-child(4n + 3) { grid-column: 2; }
.tl-item:nth-child(4n + 4) { grid-column: 1; }
.tl-item:nth-child(4n + 1) .tl-node, .tl-item:nth-child(4n + 4) .tl-node { left: auto; right: -42px; }
.tl-item:nth-child(4n + 2) .tl-node, .tl-item:nth-child(4n + 3) .tl-node { left: -42px; }
.tl-item:not(.tl-item-quiz)::after {
  content: '';
  position: absolute;
  top: 29px;
  width: 21px;
  border-top: 1px solid var(--line-strong);
}
.tl-item:nth-child(4n + 1)::after, .tl-item:nth-child(4n + 4)::after { right: -21px; }
.tl-item:nth-child(4n + 2)::after, .tl-item:nth-child(4n + 3)::after { left: -21px; }
.tl-item-quiz { grid-column: 1 / -1; }
.tl-item-quiz .tl-node { left: calc(50% - 15px); top: 12px; }
.tl-item { position: relative; list-style: none; }
.tl-node {
  position: absolute;
  left: -46px; top: 14px;
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  color: var(--ink-soft);
  z-index: 1;
}
.tl-node svg.ico { width: 15px; height: 15px; }
.tl-item[data-state="done"] .tl-node { border-color: var(--ok-border); background: var(--ok-wash); color: var(--ok-ink); }
.tl-item[data-state="active"] .tl-node { border-color: var(--green); background: var(--green); color: var(--on-accent); }

.tl-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tl-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.tl-item[data-state="active"] .tl-card { border-color: rgba(26, 102, 172, 0.35); box-shadow: var(--shadow-sm); }
.tl-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.tl-card h3 { font-size: 15px; font-weight: 600; line-height: 1.4; }
.tl-card p { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.tl-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 13px; }
.tl-actions .btn { padding: 6px 12px; font-size: 12.5px; }

/* The checkpoint is the module's combined quiz: quieter than a module card so
   the spine still reads as modules first, practice second. */
.tl-item-quiz .tl-node { top: 12px; }
.tl-node-quiz { border-style: dashed; }
.tl-node-quiet { border-style: dashed; color: var(--faint); }
.tl-checkpoint {
  padding: 13px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
}
.tl-checkpoint.is-muted { background: transparent; }
.tl-checkpoint-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-checkpoint-head strong { font-size: 13px; font-weight: 600; }
.tl-checkpoint p { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.tl-checkpoint .btn { margin-top: 10px; padding: 5px 11px; font-size: 12.5px; }

@media (max-width: 620px) {
  .tl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 38px; }
  .tl-list::before { left: 13px; top: 6px; bottom: 14px; width: 1px; transform: none; border-radius: 0; background: linear-gradient(var(--line-strong), var(--line)); }
  .tl-item, .tl-item:nth-child(n) { grid-column: 1; }
  .tl-item .tl-node, .tl-item:nth-child(n) .tl-node { left: -38px; right: auto; top: 14px; width: 27px; height: 27px; font-size: 12px; }
  .tl-item::after, .tl-item:nth-child(n)::after { display: none; }
  .tl-item-quiz .tl-node { top: 12px; }
  .tl-card { padding: 14px; }
  .tl-doc-badge { display: none; }
}

/* source attribution */
.page-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(26, 102, 172, 0.16);
  border-radius: 999px;
  background: rgba(26, 102, 172, 0.07);
  color: var(--green-deep, var(--green-deep));
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.page-tag svg.ico { width: 11px; height: 11px; opacity: 0.8; }
.source-line { display: flex !important; align-items: center; gap: 8px; margin-top: 6px; white-space: nowrap; }
.source-line > span:not(.page-tag) { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.flash-source { margin-bottom: -4px; }
.review-source { margin-top: 8px; }

/* progress */
.progress { height: 6px; border-radius: 6px; background: var(--paper-deep); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--green-bright), var(--green)); transition: width 0.6s var(--spring); }
.progress-thin { height: 4px; }
/* The fill eases toward each reported value, so a long generation reads as
   movement rather than a bar that jumps only when a stage completes. */
.progress span.is-live { transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* stage track: which part of the pipeline is running right now */
.job-stages { display: flex; align-items: center; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.job-stage-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--paper-deep); color: var(--faint); font-size: 11px; letter-spacing: 0.01em; }
.job-stage-chip.is-active { background: rgba(26, 102, 172, 0.12); color: var(--green); font-weight: 600; }
.job-stage-chip.is-done { color: var(--muted); }
.job-stage-chip.is-done::before { content: '✓'; font-size: 10px; }
.job-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.ring { --value: 0; width: 92px; height: 92px; flex: none; display: grid; place-items: center; position: relative; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: var(--paper-deep); }
.ring .value { stroke: var(--green); stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: calc(264 - 264 * var(--value) / 100); transition: stroke-dashoffset 1s var(--spring); }
.ring strong { font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- upload */
.dropzone {
  display: grid; place-items: center; gap: 8px;
  padding: 40px 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.4s var(--spring);
}
.dropzone:hover { border-color: var(--green); background: var(--surface-2); }
.dropzone.dragging { border-color: var(--green); background: var(--ok-wash); transform: scale(1.006); }
.dropzone-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--paper-deep);
  color: var(--green);
  margin-bottom: 4px;
}
.dropzone-icon svg { width: 22px; height: 22px; }
.dropzone strong { font-size: 14.5px; font-weight: 600; }
.dropzone small { font-size: 12px; color: var(--muted); }
.dropzone input { display: none; }
.file-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--ok-wash);
  border: 1px solid rgba(26, 102, 172, 0.18);
  font-size: 13px;
}
.file-chip .grow { min-width: 0; }
.file-chip strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-chip small { color: var(--muted); font-size: 11.5px; }

.job-card { border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; background: var(--surface); }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.job-head strong { font-size: 13.5px; }
/* Distinguish bytes being sent from the background document-processing job. */
.upload-live-card { border-color: var(--line-strong); }
.upload-live-card .progress { margin-top: 9px; }
.job-head .pill { flex: none; }
.job-stage { font-size: 12px; color: var(--muted); margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.job-error { margin-top: 9px; padding: 9px 11px; border-radius: var(--radius-pill); background: var(--danger-wash); color: var(--danger); font-size: 12.5px; line-height: 1.5; }

.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------------------------------------------------------------- reader */
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 26px; align-items: start; }
.prose { font-size: 15.5px; line-height: 1.78; color: var(--ink-soft); }
.prose p + p { margin-top: 15px; }
.prose h2, .prose h3 { margin: 26px 0 10px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose code { padding: 1px 5px; border-radius: 5px; background: var(--paper-deep); font-size: 13px; }
/* A figure sits inside the prose at the point it illustrates and never
   exceeds the column, so a scanned diagram stays readable on a phone. */
.figure-block { margin: 20px 0; }
.figure-block a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--paper-deep); }
.figure-block img { display: block; width: 100%; height: auto; }
.figure-block figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* Rendered formulas keep the body rhythm: inline math sits on the text
   baseline, display math gets its own centred line and may scroll sideways
   instead of pushing a long equation out of the column. */
.katex { font-size: 1.03em; }
.math-block { margin: 18px 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden; text-align: center; }
.math-block .katex-display { margin: 0; }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.choice-pick .katex, .flash .katex, .review-card .katex { font-size: 1em; }
.inline-code { padding: 0.08em 0.34em; border-radius: 5px; background: var(--paper-deep); color: var(--ink-soft); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em; white-space: nowrap; }

.aside-card { position: sticky; top: 84px; display: grid; gap: 14px; }
.toc { display: grid; gap: 2px; }
.toc button {
  width: 100%;
  padding: 7px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 12.5px;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.toc button:hover { background: var(--paper-deep); color: var(--ink); }

/* exercises */
.exercise { border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; background: var(--surface); }
.exercise-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.exercise-head span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.exercise p, .exercise-prompt p { font-size: 14px; line-height: 1.65; }
/* Prompts and explanations are split into paragraphs when they hold a
   formula, so the first paragraph must not add the reveal's top padding. */
.exercise-explanation p { padding-top: 0; }
.exercise-explanation p + p { padding-top: 12px; }
.choice-list { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 5px; }
.choice-list li { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.reveal-btn {
  white-space: nowrap;
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.18s var(--ease);
}
.reveal-btn:hover { background: var(--paper-deep); }
.reveal-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--spring), opacity 0.3s var(--ease);
  opacity: 0;
}
.reveal-body > div { overflow: hidden; }
.reveal-body.open { grid-template-rows: 1fr; opacity: 1; }
.reveal-body p { padding-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.reveal-body strong { color: var(--ink); }

/* flashcards */
.flash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.flash {
  position: relative;
  min-height: 132px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  transition: transform 0.4s var(--spring), box-shadow 0.24s var(--ease);
}
.flash:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.flash p { font-size: 13.5px; line-height: 1.55; font-weight: 500; }
.flash .back { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 11px; display: none; }
.flash.flipped .back { display: block; animation: fadeUp 0.4s var(--spring); }
.flash.flipped .front { color: var(--faint); font-size: 12px; }
.flash-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* module checklist — doubles as the tab bar between materi/latihan/kartu */
.steps-wrap { margin-bottom: 22px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.steps > li { display: flex; min-width: 0; }
.step {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--spring);
}
.step:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.step-dot {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.step-dot svg { width: 14px; height: 14px; }
.step-body { display: grid; gap: 1px; min-width: 0; }
.step-body strong { font-size: 13px; font-weight: 600; }
.step-body small { font-size: 11.5px; color: var(--muted); }
.step.is-done { border-color: var(--ok-border); background: var(--ok-wash); }
.step.is-done .step-dot { border-color: var(--green); background: var(--green); color: #FFFFFF; }
.step.is-active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 102, 172, 0.1); }
.step.is-active .step-dot { border-color: var(--green); color: var(--green); }
.step.is-locked { opacity: 0.55; }
.step[aria-current="page"] { background: var(--paper-deep); border-color: var(--green); box-shadow: 0 0 0 3px rgba(26, 102, 172, 0.14); }
.step[aria-current="page"] .step-body strong { color: var(--green-deep, var(--green-deep)); }
.step[aria-current="page"] .step-body small { color: var(--green); }

/* link to the next step at the end of a page */
.next-step {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 20px; padding: 15px 18px;
  border: 1px solid var(--line-strong); border-radius: 13px;
  background: var(--surface);
  color: inherit; text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--spring);
}
.next-step:hover { border-color: var(--green); background: var(--surface-2); transform: translateY(-1px); }
.next-step span { display: grid; gap: 2px; }
.next-step strong { font-size: 14px; }
.next-step small { font-size: 12px; color: var(--muted); }
.next-step svg { width: 17px; height: 17px; color: var(--green); flex: none; }

.is-locked .exercise,
.is-locked .flash { opacity: 0.5; pointer-events: none; }
.locked-note {
  margin-bottom: 12px; padding: 10px 13px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--muted);
  background: var(--paper-deep);
}
.choice-pick { display: grid; gap: 7px; margin-top: 11px; }
.choice-pick label {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.choice-pick label:hover { border-color: var(--line-strong); background: var(--paper-deep); }
.choice-pick input { margin-top: 3px; accent-color: var(--green); }
.choice-pick input:checked + span { font-weight: 600; color: var(--green-deep, var(--green-deep)); }
.answer-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.exercise input[type="text"] { margin-top: 11px; }
.exercise textarea { margin-top: 11px; min-height: 96px; }
.feedback:empty { display: none; }
.feedback { margin-top: 9px; }
.feedback p { font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* review */
.review-stage { max-width: 620px; margin: 0 auto; }
.review-card {
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.review-card h2 { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; }
.review-card .answer { font-size: 14.5px; color: var(--ink-soft); max-width: 44ch; line-height: 1.7; }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.rating-btn {
  min-width: 78px;
  display: grid; gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.32s var(--spring), border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.rating-btn:hover { transform: translateY(-2px); border-color: var(--green); }
.rating-btn strong { font-size: 13px; font-weight: 600; }
.rating-btn small { font-size: 10.5px; color: var(--muted); }
.rating-btn[data-rating="again"]:hover { border-color: var(--danger); background: var(--danger-wash); }
.rating-btn[data-rating="easy"]:hover { border-color: var(--green); background: var(--ok-wash); }

/* classrooms */
.class-card { display: grid; gap: 12px; }
.invite-code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  border: 1px dashed var(--line-strong);
}
.invite-code code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 14px; letter-spacing: 0.1em; }
.student-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.student-row:last-child { border-bottom: 0; }
.student-row .grow { flex: 1; min-width: 0; }
.student-row strong { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.student-row small { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- empty & skeleton */
.empty {
  display: grid; place-items: center; gap: 6px;
  padding: 44px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  background: var(--wash);
}
.empty svg { width: 26px; height: 26px; color: var(--faint); margin-bottom: 4px; }
.empty strong { font-size: 14px; font-weight: 600; }
.empty p { font-size: 12.5px; color: var(--muted); max-width: 36ch; }

.skeleton { position: relative; overflow: hidden; background: var(--paper-deep); border-radius: 8px; }
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-aside {
  position: relative;
  /* isolate() membuat panel ini jadi konteks tumpukan sendiri, sehingga
     aura ber-z-index -1 duduk di atas latar panel tetapi tetap di bawah
     teks. Tanpa ini aura akan jatuh ke belakang latar panel. */
  isolation: isolate;
  overflow: hidden;
  padding: 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-2);
  color: var(--ink);
  border-right: 1px solid var(--line);
}
.auth-aside > :not(.lp-aura) { position: relative; z-index: 1; }
.auth-aside .brand { padding: 0; }
.auth-aside .brand-text span { color: var(--ink-soft); }
.auth-aside .small { color: var(--ink-soft); }
.auth-quote { max-width: 30ch; }
.auth-quote h1 { font-size: clamp(30px, 3.4vw, 44px); color: var(--ink); margin-bottom: 14px; }
/* Teks panel ini duduk di atas aura, jadi warnanya satu tingkat lebih tegas
   daripada --muted biasa: --muted hanya lolos 4.5:1 di atas latar polos. */
.auth-quote p { color: var(--ink-soft); font-size: 14.5px; max-width: 36ch; }
.auth-points { display: grid; gap: 12px; margin-top: 30px; }
.auth-point { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); }
.auth-form-wrap { position: relative; display: grid; place-items: center; padding: 40px 28px; }
.auth-theme-wrap { position: absolute; top: 22px; right: 22px; z-index: 2; }
.auth-card { width: min(400px, 100%); }
.auth-card h2 { font-size: 26px; margin-bottom: 6px; }
.auth-card > p { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--paper-deep); margin-bottom: 22px; }
.segmented button {
  padding: 8px 10px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent;
  font-size: 13px; font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#google-signin-btn { display: flex; justify-content: center; min-height: 44px; margin-bottom: 4px; }
#google-signin-btn iframe { width: 100% !important; }
.auth-legal { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 12px; color: var(--faint); }
.auth-legal a { color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); }
.auth-legal a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- modal & toast */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 18px;
  background: var(--scrim);
  backdrop-filter: blur(1px);
  animation: fade 0.2s var(--ease);
}
.modal {
  width: min(480px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 24px 64px -30px var(--shadow-modal);
  animation: modalIn 0.4s var(--spring);
}
.modal h2 { font-size: 21px; margin-bottom: 8px; }
.modal > p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.modal .field { margin-bottom: 16px; }
.modal .field:last-of-type { margin-bottom: 0; }
.modal .field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.modal input[name="title"] { min-height: 44px; border-radius: 12px; background: var(--surface); }
.modal textarea { min-height: 112px; border-radius: 12px; background: var(--surface); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
/* Shared modal action layout is defined above with the modal surface. */
.share-link {
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  word-break: break-all;
  line-height: 1.55;
}
@keyframes fade { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } }

#toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 120;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 17px;
  border-radius: var(--radius-sm);
  background: var(--toast-bg);
  color: var(--toast-fg);
  font-size: 13px;
  box-shadow: 0 20px 40px -20px var(--shadow-modal);
  opacity: 0;
  transform: translate(-50%, 14px) scale(0.97);
  transition: opacity 0.28s var(--ease), transform 0.42s var(--spring);
  pointer-events: none;
  max-width: min(90vw, 460px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#toast[data-kind="error"] { background: var(--danger); }

.task-board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 12px; }
.task-column { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.task-column > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.task-column > header h2 { font-size: 14px; font-weight: 600; }
.task-column > header span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--rail-chip); color: var(--muted); font-size: 11px; }
.task-column-cards { display: grid; align-content: start; gap: 10px; min-height: 84px; }
.task-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.task-card-head { display: flex; align-items: flex-start; gap: 8px; }
.task-card-head h3 { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 600; }
.task-card-head .icon-btn { flex: none; width: 28px; height: 28px; margin: -5px -5px 0 0; }
.task-card > p { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; }
.task-card-foot time { color: var(--faint); font-size: 11px; }
.task-card-foot select { max-width: 130px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 11px; }
.task-empty { padding: 14px 4px; color: var(--faint); text-align: center; font-size: 12px; }
@media (max-width: 860px) { .task-board { grid-template-columns: repeat(3, minmax(230px, 1fr)); } }
@media (max-width: 720px) { .task-board { grid-template-columns: 1fr; overflow: visible; } }

/* Separate the page canvas from work surfaces without adding bright glare. */
.task-column { background: var(--surface-2); border-color: var(--line-strong); }
.task-card { background: var(--surface); border-color: var(--line); box-shadow: 0 1px 3px rgba(20, 30, 45, 0.06); }
.task-card-foot select { background: var(--surface); }

/* Drag-and-drop */
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:active { cursor: grabbing; }
.task-card.dragging { opacity: 0.4; transform: scale(0.97); transition: opacity 0.2s var(--ease), transform 0.2s var(--spring); }
.task-column.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }

 /* ---------------------------------------------------------------- motion */
/* ---------------------------------------------------------------- motion */
.reveal { animation: rise 0.62s var(--spring) both; }
.reveal:nth-child(2) { animation-delay: 0.05s; }
.reveal:nth-child(3) { animation-delay: 0.1s; }
.reveal:nth-child(4) { animation-delay: 0.14s; }
.reveal:nth-child(5) { animation-delay: 0.18s; }
.reveal:nth-child(6) { animation-delay: 0.22s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Hero staggered entrance — spring-like ease with index-based delay */
.lp-entrance {
  animation: lpEntrance 0.72s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 0.09s + 0.1s);
}
@keyframes lpEntrance {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-triggered section reveals */
.lp-section {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--spring);
}
.lp-section.lp-visible { opacity: 1; transform: none; }

/* Stagger children inside revealed sections */
.lp-visible .lp-feature,
.lp-visible .lp-who-card,
.lp-visible .lp-faq-item,
.lp-visible .task-column {
  animation: lpChildRise 0.52s var(--spring) both;
}
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(1) { animation-delay: 0.05s; }
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(2) { animation-delay: 0.09s; }
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(3) { animation-delay: 0.125s; }
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(4) { animation-delay: 0.16s; }
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(5) { animation-delay: 0.195s; }
.lp-visible :is(.lp-feature, .lp-who-card, .lp-faq-item, .task-column):nth-child(6) { animation-delay: 0.23s; }
@keyframes lpChildRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Kanban card stagger within columns — 35ms cascade */
.lp-visible .task-column-cards .task-card {
  animation: lpCardIn 0.48s var(--spring) both;
}
.lp-visible .task-column-cards .task-card:nth-child(1) { animation-delay: 0.15s; }
.lp-visible .task-column-cards .task-card:nth-child(2) { animation-delay: 0.185s; }
.lp-visible .task-column-cards .task-card:nth-child(3) { animation-delay: 0.22s; }
@keyframes lpCardIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Spring hover lift on landing kanban cards */
.lp-task-board .task-card {
  transition: transform 0.38s var(--spring), box-shadow 0.22s var(--ease);
}
.lp-task-board .task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px -6px rgba(20, 30, 45, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; }
  .lp-entrance { opacity: 1; }
  .lp-section { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader { grid-template-columns: minmax(0, 1fr); }
  .aside-card { position: static; }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: min(292px, 86vw);
    transform: translateX(-102%);
    transition: transform 0.44s var(--spring);
    box-shadow: 24px 0 60px -30px var(--shadow-modal);
  }
  .sidebar.open { transform: none; }
  .menu-btn {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
  }
  .menu-btn svg { width: 17px; height: 17px; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: var(--scrim); animation: fade 0.2s var(--ease); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .page { padding-inline: 18px; }
  .topbar { padding-inline: 18px; }
  .card { padding: 18px; }
  .hero-card { padding: 24px 20px; }
  .stat-grid { gap: 9px; }
  .stat { padding: 12px 13px; }
  .stat strong { font-size: 22px; }
  .course-grid { grid-template-columns: 1fr; }
  .flash-grid { grid-template-columns: 1fr; }
  .page-head { margin-bottom: 20px; }
  .steps { grid-template-columns: 1fr; }
  .ann-bar { padding-inline: 18px; gap: 8px; }
  .ann-detail { display: none; }
  .ann-name { max-width: 140px; }
}

/* ---------------------------------------------------------------- landing
   Halaman depan sekarang bagian dari SPA: memakai token, tombol, dan kartu
   yang sama dengan ruang belajar, bukan stylesheet terpisah. Kelas diberi
   awalan `lp-` supaya tidak bertabrakan dengan `.shell`, `.nav`, atau `.step`
   milik aplikasi. */
.lp { position: relative; z-index: 1; }
.lp [hidden] { display: none !important; }
.lp-skip {
  position: absolute; left: 16px; top: -80px; z-index: 60;
  padding: 10px 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: top 0.2s var(--ease);
}
.lp-skip:focus { top: 16px; }
.lp-shell { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.lp section[id] { scroll-margin-top: 104px; }

/* Navigasi pil melayang: sama seperti rail, hanya bentuknya mendatar. */
.lp-nav-wrap {
  position: fixed; inset: 16px 0 auto; z-index: 50;
  display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none;
}
/* Pudaran latar di balik pil: isi halaman memudar sebelum menyentuh
   navigasi, jadi tidak ada teks yang menabrak tautan saat digulir. */
.lp-nav-wrap::before {
  content: ''; position: absolute; inset: -16px 0 auto; height: 132px;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 62%, transparent 100%);
  pointer-events: none;
}

/* Pil melayang: latarnya hampir pekat supaya tautan tetap terbaca, tetapi
   tetap tembus sedikit agar blob latar masih terasa. */
.lp-nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 8px 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--shadow-sm);
}
.lp-brand { display: flex; align-items: center; gap: 9px; margin-right: 10px; text-decoration: none; }
.lp-brand .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
.lp-brand-text { display: grid; line-height: 1.1; }
.lp-brand-text strong { font-family: 'Newsreader', Georgia, serif; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.lp-brand-text span { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.lp-nav-links { display: flex; align-items: center; gap: 2px; }
.lp-nav-link {
  padding: 8px 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lp-nav-link:hover { color: var(--ink); background: var(--ghost-hover); }
.lp-nav-actions { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.lp-icon-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lp-icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.lp-icon-btn svg { width: 16px; height: 16px; }

/* Hero */
.lp-hero { padding: 152px 0 40px; text-align: center; }
.lp-hero h1 { font-size: clamp(36px, 5.4vw, 60px); line-height: 1.14; max-width: 18em; margin: 0 auto; text-wrap: balance; }
.lp-hero h1 em { font-style: italic; }
.lp-hero p { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 36em; margin: 20px auto 0; }
.lp-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.lp-hero-actions .btn { min-height: 44px; padding: 12px 22px; font-size: 14px; }
.lp-hero-note { margin-top: 16px; font-size: 12.5px; color: var(--faint); }

/* Judul bagian */
.lp-head { margin-bottom: 30px; max-width: 32em; }
.lp-head.center { margin-inline: auto; text-align: center; max-width: 36em; }
.lp-head h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; text-wrap: balance; }
.lp-head h2 em { font-style: italic; }
.lp-head p { margin-top: 12px; font-size: 15px; color: var(--muted); }
.lp-section { padding: 72px 0; }

/* Demo */
.lp-demo { padding: 32px 0 84px; }
.lp-panel {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.lp-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.lp-file { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.lp-file-mark {
  display: grid; place-items: center;
  width: 36px; height: 42px; flex: none;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted);
}
.lp-file-name { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.lp-file-meta { display: block; font-size: 12px; color: var(--muted); }
.lp-panel-body { padding: 20px; }
.lp-state-empty, .lp-state-error {
  display: grid; place-items: center;
  min-height: 200px; padding: 24px;
  text-align: center; font-size: 13.5px;
  /* Panel ini semi-transparan supaya aura terlihat di belakangnya, jadi teks
     di dalamnya tidak boleh memakai --muted: di tema gelap puncak aura
     mendorong latar ke L 0.056 dan --muted tinggal 4.3:1. */
  color: var(--ink-soft);
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
}
.lp-state-loading { display: grid; place-items: center; gap: 16px; min-height: 200px; text-align: center; font-size: 13.5px; color: var(--ink-soft); }
.lp-loader { width: min(220px, 70%); height: 3px; border-radius: var(--radius-pill); background: var(--paper-deep); overflow: hidden; }
.lp-loader::after { content: ''; display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent); animation: lpSweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes lpSweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

.lp-result { animation: fadeUp 0.4s var(--spring) both; }
.lp-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  width: fit-content; max-width: 100%;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.lp-tab {
  padding: 8px 16px; min-height: 36px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lp-tab[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--btn-shadow); }
.lp-tabpanel { min-height: 180px; }
.lp-q { font-size: 16px; line-height: 1.55; margin-bottom: 16px; max-width: 46em; }
.lp-options { display: grid; gap: 8px; max-width: 34em; }
.lp-option {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 15px; min-height: 44px; text-align: left;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--bg); font-size: 14.5px; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.28s var(--spring);
}
.lp-option:hover:not(:disabled) { border-color: var(--muted); transform: translateY(-1px); }
.lp-option:disabled { cursor: default; }
.lp-option .key {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 6px; border: 1px solid var(--line-strong);
  font-size: 11.5px; color: var(--muted);
}
.lp-option[data-state="ok"] { border-color: var(--ok-border); background: var(--ok-wash); color: var(--ok-ink); }
.lp-option[data-state="bad"] { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); }
.lp-option[data-state="ok"] .key, .lp-option[data-state="bad"] .key { border-color: currentColor; color: inherit; }
.lp-verdict { display: flex; gap: 10px; margin-top: 14px; padding: 13px 15px; border-radius: var(--radius); font-size: 13.5px; line-height: 1.5; max-width: 40em; }
.lp-verdict[data-state="ok"] { background: var(--ok-wash); color: var(--ok-ink); }
.lp-verdict[data-state="bad"] { background: var(--danger-wash); color: var(--danger); }
.lp-verdict strong { font-weight: 600; }

.lp-lesson h3 { font-size: 22px; margin-bottom: 6px; }
.lp-lesson .lede { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.lp-lesson ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; max-width: 42em; }
.lp-lesson li { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.55; }
.lp-lesson li::before { content: ''; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--accent); }
.lp-formula {
  font-family: 'Newsreader', Georgia, serif; font-size: 18px; letter-spacing: 0.01em;
  padding: 2px 9px; border-radius: 7px;
  background: var(--paper-deep); border: 1px solid var(--line);
  white-space: nowrap;
}

/* Kartu balik */
.lp-card-wrap { max-width: 34em; }
.lp-flip { display: block; width: 100%; height: 180px; padding: 0; border: 0; background: transparent; perspective: 1000px; cursor: pointer; }
.lp-flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s var(--spring); }
.lp-flip[aria-pressed="true"] .lp-flip-inner { transform: rotateY(180deg); }
.lp-face {
  position: absolute; inset: 0;
  display: grid; align-content: center; gap: 8px;
  padding: 22px; text-align: center;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.lp-face .label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.lp-face .text { font-size: 15.5px; line-height: 1.5; }
.lp-face.back { transform: rotateY(180deg); background: var(--surface-2); }
.lp-hint { margin-top: 10px; font-size: 12.5px; color: var(--faint); }

/* Cara kerja */
.lp-steps { display: grid; gap: 0; max-width: 46em; }
.lp-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 32px; }
.lp-step:last-child { padding-bottom: 0; }
.lp-step:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 6px; width: 1px; background: var(--line-strong); }
.lp-step-num {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  /* Latar solid, bukan --surface yang tembus: nomor ini duduk di atas aura,
     jadi latar tembus membuat angka 17px ikut berubah kontras mengikuti
     bagian aura yang kebetulan lewat di belakangnya. */
  background: var(--bg);
  font-family: 'Newsreader', Georgia, serif; font-size: 17px; color: var(--ink-soft);
}
.lp-step h3 { font-size: 20px; margin-bottom: 4px; }
.lp-step p { font-size: 14.5px; color: var(--muted); max-width: 32em; }

/* Fitur */
.lp-feature-list { display: grid; border-top: 1px solid var(--line); }
.lp-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px 40px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.lp-feature h3 { font-size: 20px; }
.lp-feature:first-child h3 { font-size: clamp(24px, 2.8vw, 32px); }
.lp-feature p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Landing kanban — reuses .task-board/.task-column/.task-card, backed by localStorage */
.lp-task-board { margin-top: 32px; }

/* Untuk siapa */
.lp-who-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.lp-who-card { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.lp-who-card h3 { font-size: 21px; margin-bottom: 8px; }
.lp-who-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 28em; }
.lp-who-card.secondary { box-shadow: none; background: transparent; }

/* FAQ */
.lp-faq-list { max-width: 46em; border-top: 1px solid var(--line); }
.lp-faq-item { border-bottom: 1px solid var(--line); }
.lp-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 18px 0; min-height: 44px;
  border: 0; background: transparent; text-align: left;
  font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.lp-faq-q .sign { position: relative; flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform 0.34s var(--spring); }
.lp-faq-q .sign::before, .lp-faq-q .sign::after { content: ''; position: absolute; inset: 6px 0 auto; height: 2px; border-radius: 2px; background: currentColor; }
.lp-faq-q .sign::after { transform: rotate(90deg); transition: opacity 0.24s var(--ease); }
.lp-faq-item[open] .sign { transform: rotate(180deg); }
.lp-faq-item[open] .sign::after { opacity: 0; }
.lp-faq-a { padding: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 42em; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::marker { content: ''; }

/* Penutup dan kaki halaman */
.lp-closing { padding: 24px 0 80px; }
.lp-closing-inner { padding: 52px 30px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); text-align: center; }
.lp-closing h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.16; }
.lp-closing h2 em { font-style: italic; }
.lp-closing p { margin-top: 12px; font-size: 15px; color: var(--muted); }
.lp-closing .btn { margin-top: 24px; min-height: 44px; padding: 12px 22px; font-size: 14px; }
.lp-foot { padding: 26px 0 40px; border-top: 1px solid var(--line); }
.lp-foot-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.lp-foot-links { display: flex; gap: 16px; }
.lp-foot-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.lp-foot-links a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

@media (max-width: 860px) {
  .lp-nav-links { display: none; }
  .lp-feature { grid-template-columns: 1fr; gap: 6px; }
  .lp-who-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lp-shell { padding: 0 18px; }
  .lp-hero { padding-top: 128px; }
  .lp-hero p { font-size: 15.5px; }
  .lp-panel-head { padding: 13px 15px; }
  .lp-panel-body { padding: 15px; }
  .lp-file-mark { display: none; }
  .lp-step { grid-template-columns: 44px 1fr; gap: 14px; }
  .lp-step:not(:last-child)::before { left: 17px; }
  .lp-closing-inner { padding: 38px 20px; }
  .lp-flip { height: 200px; }
  .lp-tabs { width: 100%; }
  .lp-tab { flex: 1; padding: 8px 10px; }
  .lp-hero-actions .btn { width: 100%; }
}

/* -------------------------------------------------------------- legal pages */
.legal-page {
  display: flex; flex-direction: column; min-height: 100dvh;
  max-width: 780px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.legal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0 12px;
}
.legal-body { flex: 1; padding: 24px 0 56px; }
.legal-body h1 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 8px; }
.legal-updated { font-size: 13px; color: var(--faint); margin-bottom: 28px; }
.legal-body h2 { font-size: 18px; font-weight: 700; margin-top: 32px; margin-bottom: 10px; }
.legal-body h3 { font-size: 15px; font-weight: 600; margin-top: 20px; margin-bottom: 6px; }
.legal-body p { font-size: 14.5px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 10px; }
.legal-body ul { padding-left: 22px; margin-bottom: 12px; }
.legal-body li { font-size: 14.5px; line-height: 1.72; color: var(--ink-soft); margin-bottom: 4px; }
.legal-body code { font-size: 13px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-foot-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 12.5px; color: var(--muted);
  padding: 20px 0 36px; border-top: 1px solid var(--line);
}