/* Redesign UI siswa — S1 palet senja (Okt 2026).
   Hanya warna: tata letak, ukuran, dan posisi tidak diubah.
   Scope: halaman yang memuat aplikasi siswa (.app tanpa .app-staff, termasuk Mode siswa & game) dan layar login.
   Panel admin/guru (.app-staff, .adm-shell) tidak tersentuh. Variabel diisi di <body> supaya
   overlay di luar .app (deck slide, toast, kamus) ikut palet yang sama. */

/* ---------- Mode siang: variabel lama → token senja ---------- */
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)),
:root:not([data-theme="dark"]) body:has(.login){
  --ai:#2E1A4F;--ai-2:#9E3F5F;--ai-soft:#F8E7EC;--ai-bg:#2E1A4F;
  --washi:#FBF4EC;--card:#FFFFFF;--line:#EFE3DC;
  --ink:#241739;--muted:#6B6580;
  background:var(--washi);color:var(--ink);
}

/* Garis putus-putus, latar abu, dan bayangan biru lama */
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) :is(.note,.empty){border-color:#E2CFD6}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .built{border-color:#E2CFD6}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .built .tok{border-color:#E2CFD6}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) :is(.kl-lock,.kl-url code){background:#F6EEE8}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .deck{background:var(--washi)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .sl{box-shadow:0 6px 24px rgba(46,26,79,.08)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .nav{box-shadow:0 12px 30px rgba(46,26,79,.28)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .logo img{box-shadow:0 1px 4px rgba(46,26,79,.25)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .seg button.on{box-shadow:0 1px 3px rgba(46,26,79,.15)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .play{box-shadow:0 10px 24px rgba(46,26,79,.25)}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .game{box-shadow:0 8px 20px rgba(46,26,79,.18)}

/* Teks terang di atas panel plum (menu bawah, hero, kartu balik, deck) */
body:has(.app:not(.app-staff)) .nav button:not(.on){color:#D9CCE6}
body:has(.app:not(.app-staff)) :is(.today .kicker,.today .sub span){color:#E3D3EC}
body:has(.app:not(.app-staff)) .today .count{color:#EADFF0}
body:has(.app:not(.app-staff)) :is(.dchip.now span,.dk-hero .kick,.deck-top span,.face.back .kj,.face.back .hint,.classroom .kj,.classroom .pos,.sl.cover .kick){color:#D9CCE6}

/* Hero Hari ini: langit senja (plum → anggur), satu-satunya gradien di halaman */
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .today{background:linear-gradient(160deg,#2E1A4F 45%,color-mix(in srgb,#2E1A4F 62%,#9E3F5F))}

/* Kartu try-out: biru terang → plum ke anggur */
body:has(.app:not(.app-staff)) .tryalert{background:linear-gradient(135deg,#2E1A4F,#9E3F5F)}
body:has(.app:not(.app-staff)) .tryalert .tl{color:#FFD27A}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .tryhd em{color:#9E3F5F}
:root[data-theme="dark"] body:has(.app:not(.app-staff)) .tryhd em{color:#F4B3C2}
body:has(.app:not(.app-staff)) .trydot{background:#C8463D}

/* Kartu game Ulangan: biru → plum (g2 jingga tetap) */
body:has(.app:not(.app-staff)) .game.g1{background:linear-gradient(150deg,#5A3A7E,#2E1A4F)}

/* Kalender kelas: warna mode 1 biru → plum (legenda ikut) */
body:has(.app:not(.app-staff)) :is(.kc-d.m1,.kc-l i.m1){background:#2E1A4F}
:root[data-theme="dark"] body:has(.app:not(.app-staff)) :is(.kc-d.m1,.kc-l i.m1){background:#5A3A7E}
:root:not([data-theme="dark"]) body:has(.app:not(.app-staff)) .lax-k.ulangan{background:#EFE6F5;color:#2E1A4F}

/* Link teks biasa (mis. "Berlangganan", "Cerita Kanji"): bukan biru bawaan browser */
:root:not([data-theme="dark"]) .app:not(.app-staff) a:not([class]){color:#9E3F5F}
:root[data-theme="dark"] .app:not(.app-staff) a:not([class]){color:#F4B3C2}

/* Mode malam: kotak abu terang lama (link Zoom, "Belum termasuk paketmu") dan label "baru" avatar terbaca */
:root[data-theme="dark"] body:has(.app:not(.app-staff)) :is(.kl-lock,.kl-url code){background:var(--ai-soft)}
:root[data-theme="dark"] body:has(.app:not(.app-staff)) .avnew{color:#15122B}

/* Chip-link di header & halaman (Kamus, Menu, dll.): bukan biru bawaan browser */
.app:not(.app-staff) a.chip{color:var(--ink)}

/* =====================================================================
   S2 — Kerangka (Okt 2026). Hanya tampilan; tombol & tautan memakai data-go/href yang sama.
   HP (≤430): posisi & urutan header dan menu bawah tetap; hanya tinggi chip diseragamkan.
   431–1023: header ikon saja seperti HP (sebelumnya label patah & bisa geser ke samping).
   ≥1024 (layar saja; saat cetak tanpa ruang sidebar): menu bawah yang sama menjadi sidebar kiri (seperti panel admin), header menjadi topbar.
   ===================================================================== */
.app:not(.app-staff) .logo span{white-space:nowrap}
.app:not(.app-staff) .top-r>:is(.chip,.streak){min-height:36px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}

@media (min-width:431px) and (max-width:599px){ .app:not(.app-staff) .logo span{display:none} }
@media (min-width:431px) and (max-width:1023px){
  .app:not(.app-staff) .top-r .kq-t{display:none}
  .app:not(.app-staff) .top-r{gap:6px}
  .app:not(.app-staff) .top-r>:is(.chip,.streak){padding:6px 10px}
}

@media screen and (min-width:1024px){
  /* Isi: kolom di kanan sidebar */
  .app:not(.app-staff):has(~ nav.nav){max-width:none;margin:0 0 0 240px;padding:0 32px 56px}
  .app:not(.app-staff):has(~ nav.nav)>:is(header.top,main,.offline){max-width:760px;margin-left:auto;margin-right:auto}
  /* Topbar: menempel di atas saat menggulir; logo pindah ke atas sidebar */
  .app:not(.app-staff):has(~ nav.nav)>header.top{position:sticky;top:0;z-index:35;justify-content:flex-end;padding:14px 0 12px;background:var(--washi)}
  .app:not(.app-staff):has(~ nav.nav)>header.top .logo{position:fixed;top:18px;left:20px;z-index:31;max-width:200px}
  .app:not(.app-staff):has(~ nav.nav)>header.top .logo span{font-size:16px}
  /* Kamus, Try-out, Semua menu sudah ada di sidebar */
  .app:not(.app-staff):has(~ nav.nav) .top-r>:is(.kq,a.chip[href="/menu/"]){display:none}

  /* Sidebar */
  .app:not(.app-staff) ~ nav.nav{left:0;top:0;bottom:0;transform:none;width:240px;max-width:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:76px 12px 16px;border-radius:0;background:var(--card);border-right:1px solid var(--line);box-shadow:none;overflow-x:hidden;overflow-y:auto}
  .app:not(.app-staff) ~ nav.nav :is(button,a.nav-d){position:relative;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-width:0;min-height:44px;padding:0 14px;
    border-radius:999px;font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none;background:transparent}
  .app:not(.app-staff) ~ nav.nav :is(button,a.nav-d) svg{width:20px;height:20px;flex:none}
  .app:not(.app-staff) ~ nav.nav .adm-ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  :root body:has(.app:not(.app-staff)) .app:not(.app-staff) ~ nav.nav{box-shadow:none}
  .app:not(.app-staff) ~ nav.nav :is(button,a.nav-d):hover{background:var(--ai-soft);color:var(--ink)}
  .app:not(.app-staff) ~ nav.nav button.on{background:#9E3F5F;color:#fff}
  .app:not(.app-staff) ~ nav.nav .nav-d[hidden]{display:flex}
  .app:not(.app-staff) ~ nav.nav .nav-g[hidden]{display:block;margin:16px 14px 6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .app:not(.app-staff) ~ nav.nav .nav-d .trydot{position:static;margin-left:auto;box-shadow:none}
  .app:not(.app-staff) ~ nav.nav button.on .trydot{background:#fff}
}

/* =====================================================================
   S3 — Beranda track (Okt 2026). Urutan isi diatur di v2/index.html (todayView/jftView/jadwalView);
   di sini hanya gaya ringkasan "Tugas dari guru" yang dilipat dan jarak kotak kamus di Jadwal.
   ===================================================================== */
.app:not(.app-staff) .tgfold>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding-right:28px;position:relative}
.app:not(.app-staff) .tgfold>summary::-webkit-details-marker{display:none}
.app:not(.app-staff) .tgfold>summary::after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.app:not(.app-staff) .tgfold[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.app:not(.app-staff) .tgfold>summary h2{margin:0;display:flex;align-items:center;gap:8px}
.app:not(.app-staff) .tgfold .tgn{font-size:12px;font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ai-soft);color:var(--ai-2)}
.app:not(.app-staff) .tgfold .tgl{font-style:normal;font-weight:700;color:#C8463D}
:root[data-theme="dark"] .app:not(.app-staff) .tgfold .tgl{color:#F4B3C2}
.app:not(.app-staff) .tgfold[open]>summary{margin-bottom:12px}
.app:not(.app-staff) .kl-kq{margin-top:14px}
.app:not(.app-staff) .kl-kq .kqs{margin:0}
.app:not(.app-staff) .kl-kq:empty{display:none}
.app:not(.app-staff) main>.tgfold+.apb{margin-top:14px}
.app:not(.app-staff) main>:is(.stats,.games)+.kqs{margin-top:14px}

/* =====================================================================
   S4 — Halaman belajar (Okt 2026). Layar soal (tombol jawaban, timer, progres) tidak diubah.
   Akun: baris tautan (Langganan, Syarat) tampil seperti baris tombol di menu yang sama.
   ===================================================================== */
:root .app:not(.app-staff) .menu>a:not([class]){display:flex;gap:12px;align-items:center;width:100%;border-bottom:1px solid var(--line);padding:15px 16px;font-weight:600;color:var(--ink);text-decoration:none}
.app:not(.app-staff) .menu>a span{width:24px;text-align:center;flex:none}
.app:not(.app-staff) .menu>a::after{content:"↗";margin-left:auto;color:var(--muted);font-weight:400}
.app:not(.app-staff) .menu>a[href^="/"]::after{content:"›";font-size:20px;line-height:1}
.app:not(.app-staff) .menu>:is(a,button):hover{background:var(--ai-soft)}

/* =====================================================================
   S6 — QA (Okt 2026).
   Kartu "Perpanjang langganan"/paket: harga coret + harga promo boleh turun baris
   (sebelumnya "Rp24.500" terpotong di HP 360–390 karena melewati kartu).
   ===================================================================== */
.app:not(.app-staff) .apl-c{min-width:0}
.app:not(.app-staff) .apl-p{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:0}