/* =====================================================================
   TartiliKu - Gaya Tampilan (CSS)
   Berkas : css/styles.css

   Urutan aturan di berkas ini PENTING: aturan di bawah menimpa aturan di atas
   (cascade). Karena itu bagian-bagian di bawah tidak boleh dipindah-pindah
   sembarangan. Tema warna memakai variabel CSS (--bg-main, --accent-solid, dst)
   yang didefinisikan per tema: body.light-theme, body.dark-theme, dst.
   Menambah tema baru: tambah 1 blok `body.nama-theme { ... }` di sini + 1 baris
   pada daftar TARTILI_THEMES di index.html.

   DAFTAR ISI (urut dari atas ke bawah):
    1. DASAR: variabel, reset, dan warna tema Terang & Gelap
    2. LATAR HALAMAN & LAYAR (.screen)
    3. HALAMAN MASUK DAFTAR: kartu, form, tombol
    4. BRAND, FOOTER & IKON MEDIA SOSIAL
    5. MENU UTAMA: tata letak, kartu sapaan, judul seksi, grid jilid
    6. HALAMAN UTAMA (MENU) - TEMA GLASSMORPHISM FUTURISTIK
    7. BOOKMARK, PANEL GURU & TOAST
    8. KARTU & TOMBOL MENU, TOMBOL KEMBALI
    9. MODAL POPUP & NOTIFIKASI
   10. RESPONSIF: orientasi potret & lanskap (pintasan, dropdown, panel baca)
   11. COVER JILID & TOMBOL AKSI (tema, bookmark, riwayat, keluar)
   12. TOMBOL NAVIGASI HALAMAN
   13. LAYAR BACA: area gambar, blok suara, panel rekam & navigasi
   14. PANEL PINTASAN (pilih jilid & halaman)
   15. BAR PENILAIAN GURU
   16. MODE HEMAT EFEK (otomatis untuk HP dengan RAM kecil)
   17. SPLASH HALAMAN AWAL
   18. PENANDA OFFLINE
   19. SIMPAN JILID UNTUK OFFLINE
   20. TOMBOL SIMPAN OFFLINE (di bar atas menu)
   21. PEMUTAR REKAMAN SETORAN
   22. PERLINDUNGAN KONTEN
   23. SAMPUL JILID: tampil utuh sesuai rasio aslinya
   24. PASANG APLIKASI
   25. POPUP RIWAYAT SETORAN (siswa)
   26. JUDUL TARTILIKU: kiri, sejajar tombol download tema keluar
   27. TEMA TAMBAHAN
   28. POPUP PILIH TEMA
   29. TEMA: EMERALD (gelap, hijau zamrud dengan sentuhan emas)
   30. TEMA: AESTETIK (terang, pastel rose, sage & lilac)
   31. KARTU SAPAAN (menu): avatar, dekorasi, chip
   32. DROPDOWN PINTASAN: tampilan profesional, mengikuti tema
   33. TOMBOL PANDUAN & TENTANG (halaman masuk + menu)
   34. POPUP PANDUAN
   35. POPUP TENTANG
   36. INFO VERSI BARU
   37. ADMIN: lencana jumlah pendaftar + sembunyikan panel setoran
   38. PEMUTAR AUDIO 1 HALAMAN
   39. TINGGI LAYAR NYATA (--app-h diatur oleh skrip di <head>)
   40. NAMA JILID KHUSUS: Tartili Ghorib
   41. FITUR BELAJAR: Tandai blok, Perbaiki blok, Talaqqi, Tebak Bunyi, Laporan
   42. BINTANG, PETA PERJALANAN, LENCANA, MASKOT PELITA (semua warna dari variabel tema)
   43. TEBAK BUNYI: satu layar tanpa menggulir (HP laptop, potret landscape)
   44. TEBAK BUNYI (landscape): halaman besar & bisa digulir, panel tombol tetap di kanan
   45. PERLINDUNGAN HALAMAN DI MODE LATIHAN (sama seperti halaman baca)
   46. MASUK DENGAN GOOGLE
   47. LUPA KATA SANDI
   48. HALAMAN MASUK: TAMPILAN PROFESIONAL (rapi, tidak terpotong)
   ===================================================================== */

/* ===== DASAR: variabel, reset, dan warna tema Terang & Gelap ===== */
:root {
    --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    transition: background 0.5s ease, color 0.5s ease;
}

body.light-theme {
    --bg-main: #fdf4ff;
    --bg-gradient: radial-gradient(circle at 10% 15%, rgba(244, 114, 182, 0.16) 0%, transparent 45%), radial-gradient(circle at 90% 20%, rgba(168, 85, 247, 0.14) 0%, transparent 45%), radial-gradient(circle at 50% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 50%), #fdf5ff;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-panel: rgba(255, 255, 255, 0.8);
    --border-color: rgba(217, 70, 239, 0.18);
    --text-main: #3b0764;
    --text-muted: #86678f;
    --input-bg: rgba(250, 245, 255, 0.85);
    --accent-gradient: linear-gradient(135deg, #f472b6, #d946ef, #a855f7);
    --accent-solid: #d946ef;
    --accent-rgb: 217, 70, 239;
    --orb1-rgb: 244, 114, 182;
    --orb2-rgb: 168, 85, 247;
    --shadow: 0 20px 40px -15px rgba(168, 85, 247, 0.15), 0 10px 15px -5px rgba(217, 70, 239, 0.06);
    --glow: 0 0 20px rgba(217, 70, 239, 0.22), 0 0 35px rgba(244, 114, 182, 0.15);
}

body.dark-theme {
    --bg-main: #020617;
    --bg-gradient: radial-gradient(circle at 8% 12%, rgba(16, 185, 129, 0.16) 0%, transparent 42%), radial-gradient(circle at 92% 18%, rgba(59, 130, 246, 0.16) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(244, 63, 94, 0.10) 0%, transparent 48%), #020617;
    --bg-card: rgba(17, 24, 39, 0.7);
    --bg-panel: rgba(15, 23, 42, 0.8);
    --border-color: rgba(94, 234, 212, 0.12);
    --text-main: #f0fdfa;
    --text-muted: #94a3b8;
    --input-bg: rgba(30, 41, 59, 0.55);
    --accent-gradient: linear-gradient(135deg, #34d399, #22d3ee, #3b82f6);
    --accent-solid: #22d3ee;
    --accent-rgb: 34, 211, 238;
    --orb1-rgb: 16, 185, 129;
    --orb2-rgb: 59, 130, 246;
    --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset;
    --glow: 0 0 25px rgba(34, 211, 238, 0.3), 0 0 45px rgba(16, 185, 129, 0.15);
}

/* ===== LATAR HALAMAN & LAYAR (.screen) ===== */
body {
    background: var(--bg-gradient);
    background-attachment: fixed;
}

.screen {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.screen.active {
    display: flex;
    animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== HALAMAN MASUK / DAFTAR: kartu, form, tombol ===== */
#login-screen,
#google-complete-screen,
#verify-screen,
#admin-screen,
#class-members-screen {
    background: var(--bg-gradient);
    padding: 16px;
    z-index: 999;
    overflow-y: auto;
}

.login-card {
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px 24px;
    border-radius: 28px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: auto;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-gradient);
}

.login-card h2 {
    color: var(--text-main);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.auth-mode-toggle {
    display: flex;
    background: var(--input-bg);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 4px;
}

.auth-mode-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 10px;
    transition: var(--transition);
}

.auth-mode-btn.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.login-card input,
.login-card select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    font-size: 14px;
    outline: none;
    background: var(--input-bg);
    color: var(--text-main);
    transition: var(--transition);
    font-weight: 500;
    font-family: inherit;
}

.login-card input:focus,
.login-card select:focus {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

.login-card select option {
    background: var(--bg-panel);
    color: var(--text-main);
}

.register-only-field {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.register-only-field.show {
    display: flex;
}

.btn-login {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 14px;
    background: var(--accent-gradient);
    color: white;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
    transition: var(--transition);
    margin-top: 4px;
}

.btn-login:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(var(--accent-rgb), 0.4);
}

.login-error {
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    display: none;
}

/* ===== BRAND, FOOTER & IKON MEDIA SOSIAL ===== */
/* Judul brand kecil di atas Menu Utama */
.app-brand-title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.3px;
    margin-bottom: -4px;
}

/* Footer aplikasi (dipakai di Halaman Login & Menu Utama) */
.app-footer {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 0;
    letter-spacing: 0.2px;
}

.social-media-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 14px;
}

.social-media-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--border-color);
}

.kurnia-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-panel);
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.kurnia-icon svg {
    width: 16px;
    height: 16px;
}

.kurnia-icon:hover {
    transform: translateY(-2px);
}

.kurnia-icon.ig:hover {
    color: #00a6b2;
    border-color: rgba(0, 166, 178, 0.6);
}

.kurnia-icon.tt:hover {
    color: #a100d6;
    border-color: rgba(161, 0, 214, 0.6);
}

.kurnia-icon.web:hover {
    color: var(--accent-solid);
    border-color: rgba(var(--accent-rgb), 0.6);
}

.kurnia-icon.wa:hover {
    color: #00a85a;
    border-color: rgba(0, 168, 90, 0.6);
}

.kurnia-icon:focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 3px;
}

/* ===== MENU UTAMA: tata letak, kartu sapaan, judul seksi, grid jilid ===== */
#menu-screen {
    background: var(--bg-gradient);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    justify-content: flex-start;
    align-items: center;
}

.menu-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 880px;
    position: relative;
    margin: auto;
}

.menu-top-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}

.landing-hero-card {
    width: 100%;
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
}

.landing-hero-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.landing-hero-greeting {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}

.landing-hero-username {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
}

.landing-hero-motivation {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
}

.landing-hero-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
    flex-wrap: wrap;
}

.badge-role {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-solid);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-role:hover {
    background: rgba(var(--accent-rgb), 0.25);
}

.landing-hero-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.menu-section-title {
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.grid-jilid {
    display: grid;
    gap: 16px;
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ==========================================================
 HALAMAN UTAMA (MENU) - TEMA GLASSMORPHISM FUTURISTIK
 Semua gaya visual KHUSUS Halaman Utama dikumpulkan di sini
 (terpisah dari style dasar di atas) supaya mudah ditemukan
 dan diubah tanpa memengaruhi tampilan halaman lain.
 ========================================================== */

/* Latar: beberapa "orb" cahaya blur lembut di belakang konten,
 memberi kesan modern/futuristik tanpa mengganggu keterbacaan.
 isolation:isolate saja (bukan position) agar tidak merusak
 position:absolute bawaan dari class .screen. */
#menu-screen {
    isolation: isolate;
}

#menu-screen::before,
#menu-screen::after {
    content: "";
    position: fixed;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.32;
}

#menu-screen::before {
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(var(--orb1-rgb), 0.9), transparent 70%);
}

#menu-screen::after {
    bottom: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(var(--orb2-rgb), 0.9), transparent 70%);
}

/* Judul brand: teks gradient tipis, terasa lebih premium */
.app-brand-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    background: linear-gradient(135deg, var(--text-main) 40%, var(--accent-solid) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kartu sapaan utama: glass card + garis tepi gradient tipis */
.landing-hero-card {
    position: relative;
    border-radius: 26px;
    box-shadow: var(--shadow), 0 20px 45px -22px rgba(var(--accent-rgb),0.35);
}

.landing-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--orb1-rgb),0.55), rgba(255,255,255,0) 45%, rgba(var(--orb2-rgb),0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.landing-hero-username {
    background: linear-gradient(135deg, var(--text-main) 25%, var(--accent-solid));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Judul seksi (mis. "TARTILI 1-6"): tanda strip aksen + tracking rapi */
.menu-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1.6px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.menu-section-title::before {
    content: "";
    width: 18px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent-gradient);
    flex-shrink: 0;
}

/* Cover Jilid: lihat penyesuaian border & shadow langsung di
 deklarasi asli .btn-cover / .btn-cover:hover di bawah, supaya
 urutan cascade CSS tetap benar (tidak tertimpa aturan lain). */

/* Panel Pintasan khusus Menu Utama: selaraskan dengan gaya glass */
#menu-screen .shortcut-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

/* Footer copyright follows the social links below the divider. */
.app-footer {
    position: relative;
}

/* ===== BOOKMARK, PANEL GURU & TOAST ===== */
#bookmarks-screen {
    z-index: 10000;
    overflow: hidden;
}

.bookmarks-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 480px;
    height: calc(var(--app-h, 100vh) * 0.8);
    max-height: 600px;
    justify-content: flex-start;
    padding: 0;
}

.bookmarks-header {
    flex: 0 0 auto;
}

.bookmarks-list {
    width: 100%;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0 0 24px 24px;
    background: transparent;
    box-shadow: none;
    scrollbar-width: thin;
}

#teacher-admin-screen {
    z-index: 10000;
}

.teacher-admin-modal {
    max-width: 480px;
}

.teacher-admin-content {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 16px;
}

.teacher-class-code {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg);
}

.teacher-class-code-label {
    color: var(--text-muted);
    font-size: 11px;
}

.teacher-class-code-value {
    margin-top: 2px;
    color: var(--accent-solid);
    font-size: 16px;
    font-weight: 800;
}

.teacher-members-button {
    width: 100%;
    flex: 0 0 auto;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-gradient);
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.teacher-pending-label {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.teacher-pending-students {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 4px;
    text-align: left;
}

.bookmark-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
}

.bookmark-item:hover {
    border-color: var(--accent-solid);
    background: var(--bg-card);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.12);
}

.bookmark-item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.bookmark-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.bookmark-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.bookmark-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.bookmark-item-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.bookmark-item-delete {
    background: rgba(239, 68, 68, 0.1);
    border: none;
    color: #ef4444;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: var(--transition);
    flex-shrink: 0;
}

.bookmark-item-delete:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.08);
}

#toastNotification {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-panel);
    backdrop-filter: blur(16px);
    color: var(--text-main);
    padding: 12px 24px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 9999;
    pointer-events: none;
    border: 1px solid var(--border-color);
}

/* ===== KARTU & TOMBOL MENU, TOMBOL KEMBALI ===== */
/* 1. Pembungkus Utama Kartu */
.landing-hero-card,
.header-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 2. Pembungkus Tombol */
.landing-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    /* Jarak dirapatkan agar 6 tombol muat */
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: 60% !important;
}

/* 3. Rapikan tombol di landing-hero-actions, TAPI JANGAN paksa tombol
 Admin (.btn-admin) & Guru (.btn-teacher-panel) untuk tampil.
 Visibilitas keduanya wajib dikendalikan oleh setupDashboardAccess()
 di JavaScript, bukan oleh CSS ini. */
.landing-hero-actions button:not(.btn-admin):not(.btn-teacher-panel):not(.btn-riwayat) {
    display: inline-flex !important;

    /* Memastikan tombol lain tidak tersembunyi */
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.landing-hero-actions .btn-admin,
.landing-hero-actions .btn-teacher-panel {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.landing-hero-actions .btn-teacher-panel {
    order: 1;
}

.btn-back-admin {
    background-color: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4b5563 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Styling tombol kembali agar ramping dan estetik */
.btn-back-compact {
    width: auto;
    min-width: 140px;
    height: 40px;
    padding: 8px 20px;
    align-self: center;
    background: var(--input-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 13px;
    margin-top: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back-compact:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ===== MODAL / POPUP & NOTIFIKASI ===== */
/* STYLES UNTUK MODAL NOTIFIKASI & PESAN */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.modal-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.modal-box {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    height: calc(var(--app-h, 100vh) * 0.8);
    max-height: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
}

.modal-close-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.notif-item.unread {
    background: rgba(var(--accent-rgb), 0.08);
    border-left: 3px solid var(--accent-solid);
}

.notif-item:hover {
    background: var(--input-bg);
}

.btn-notif-trigger {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
}

/* ===== RESPONSIF: orientasi potret & lanskap (pintasan, dropdown, panel baca) ===== */
@media (orientation: portrait) {
    .menu-content-wrapper {
        max-width: 420px;
    }

    /* 7 jilid: 2 kolom (2 + 2 + 2 + 1), sampul ke-7 (Tartili Ghorib) di kolom kiri baris terakhir */
    .grid-jilid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 12px;
    }

    .grid-jilid .btn-cover:nth-child(7) {
        grid-column: 1;
    }

    .btn-cover {
        aspect-ratio: 3/4;
    }

    .landing-hero-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 16px;
    }

    .landing-hero-actions {
        width: auto;
        justify-content: flex-end;
    }

    .image-scroll-area {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px !important;
        overflow: hidden !important;
    }

    .image-container {
        height: 100% !important;
        width: auto !important;
        aspect-ratio: 1 / 1.414 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin-bottom: 0 !important;
    }

    .image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
    }

    .controls-wrapper {
        display: flex;
        flex-direction: column;
        width: 94% !important;
        max-width: 420px !important;
        gap: 4px !important;
        padding: 8px !important;
    }

    #read-screen .page-nav-panel {
        order: 1 !important;
        padding: 4px 10px !important;
    }

    #read-screen .shortcut-panel {
        order: 2 !important;
    }

    #read-screen .record-panel {
        order: 3 !important;
    }

    #read-screen .page-nav-panel .section-title,
    #read-screen .shortcut-panel .section-title,
    #bookmarks-screen .shortcut-panel .section-title {
        display: none !important;
    }

    .page-nav-buttons {
        gap: 8px !important;
    }

    .btn-page-nav-custom {
        height: 32px !important;
    }

    .btn-prev-custom .nav-icon,
    .btn-next-custom .nav-icon {
        width: 26px !important;
        height: 26px !important;
    }

    .nav-icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .btn-prev-custom {
        padding-left: 32px !important;
    }

    .btn-next-custom {
        padding-right: 32px !important;
    }

    #menu-screen .shortcut-panel,
    #bookmarks-screen .shortcut-panel {
        padding: 8px 12px !important;
    }

    #menu-screen .shortcut-container,
    #bookmarks-screen .shortcut-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #menu-screen .shortcut-left,
    #bookmarks-screen .shortcut-left {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex: 1 !important;
        align-items: center !important;
    }

    #menu-screen .shortcut-row,
    #bookmarks-screen .shortcut-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        margin: 0 !important;
        flex-direction: row !important;
    }

    #menu-screen .shortcut-row span,
    #bookmarks-screen .shortcut-row span {
        font-size: 11px !important;
        width: auto !important;
        color: var(--text-muted);
    }

    #menu-screen .shortcut-panel select,
    #bookmarks-screen .shortcut-panel select {
        width: 100% !important;
        height: 30px !important;
        font-size: 12px !important;
        padding: 2px 6px !important;
        flex: 1 !important;
        background: var(--input-bg);
        color: var(--text-main);
        border-color: var(--border-color);
        border-radius: 8px;
    }

    #menu-screen .shortcut-panel .btn-open-menu,
    #bookmarks-screen .shortcut-panel .btn-open-target,
    #bookmarks-screen .shortcut-panel .btn-menu-back {
        width: 55px !important;
        flex: 0 0 55px !important;
        height: 30px !important;
        font-size: 11px !important;
        margin-top: 0 !important;
        border-radius: 8px !important;
    }
}

@media (orientation: landscape) {
    #menu-screen {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        height: var(--app-h, 100dvh) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .menu-content-wrapper {
        max-width: 880px !important;
        gap: 12px !important;
    }

    .landing-hero-card {
        padding: 14px 20px;
    }

    .grid-jilid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: 10px;
    }

    .btn-cover {
        aspect-ratio: 3/4;
        max-height: 150px !important;
    }

    #menu-screen .shortcut-panel {
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
    }

    #menu-screen .shortcut-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
    }

    #menu-screen .shortcut-left {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        flex: 1 !important;
        align-items: center !important;
    }

    #menu-screen .shortcut-row {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        margin: 0 !important;
        flex-direction: row !important;
    }

    #menu-screen .shortcut-row span {
        width: auto !important;
        font-size: 11px !important;
        color: var(--text-muted);
    }

    #menu-screen .shortcut-panel select {
        padding: 2px 8px !important;
        font-size: 12px !important;
        height: 30px !important;
        width: 100% !important;
        flex: 1 !important;
        background: var(--input-bg);
        color: var(--text-main);
        border-color: var(--border-color);
        border-radius: 8px;
    }

    #menu-screen .shortcut-panel .btn-open-menu {
        width: 85px !important;
        flex: 0 0 85px !important;
        height: 30px !important;
        font-size: 11px !important;
        align-self: center !important;
        margin-top: 0 !important;
        border-radius: 8px !important;
    }

    .image-scroll-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-height: 0 !important;
    }

    .image-container {
        max-width: 550px !important;
        height: auto !important;
        aspect-ratio: 1 / 1.414 !important;
        margin: 0 auto !important;
        transform-origin: top center !important;
    }

    .image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
    }

    .controls-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: calc(550px * 1.8) !important;
        max-width: 98% !important;
        margin: 4px auto;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px !important;
        background: var(--bg-panel);
        backdrop-filter: blur(20px);
        padding: 8px 12px;
        border-radius: 18px;
        box-shadow: var(--shadow);
        z-index: 100;
        border: 1px solid var(--border-color);
    }

    .shortcut-panel {
        width: auto !important;
        flex: 1.8 !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .record-panel {
        width: auto !important;
        flex: 1.4 !important;
        height: auto !important;
        order: 2 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-nav-panel {
        width: auto !important;
        flex: 0.85 !important;
        height: auto !important;
        order: 3 !important;
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        padding: 6px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 4px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    }

    #read-screen .page-nav-panel .section-title,
    #read-screen .shortcut-panel .section-title {
        display: block !important;
    }

    #bookmarks-screen .bookmarks-content-wrapper {
        max-width: 480px !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    #bookmarks-screen .bookmarks-list {
        max-height: none !important;
    }

    .page-nav-buttons {
        gap: 6px !important;
    }

    .btn-page-nav-custom {
        height: 28px !important;
        flex: 1 !important;
        width: 100% !important;
        border-radius: 14px !important;
    }

    .btn-prev-custom .nav-icon,
    .btn-next-custom .nav-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .nav-icon svg {
        width: 11px !important;
        height: 11px !important;
    }

    .btn-prev-custom {
        padding-left: 20px !important;
    }

    .btn-next-custom {
        padding-right: 20px !important;
    }

    .universal-btn {
        height: 28px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    #read-screen .shortcut-container,
    #bookmarks-screen .shortcut-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #read-screen .shortcut-left,
    #bookmarks-screen .shortcut-left {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        flex: 2.2 !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    #read-screen .shortcut-row,
    #bookmarks-screen .shortcut-row {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        flex-direction: row !important;
        min-width: 0 !important;
    }

    #read-screen .shortcut-row span,
    #bookmarks-screen .shortcut-row span {
        width: auto !important;
        font-size: 11px !important;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    #bookmarks-screen .shortcut-row.row-tartili {
        flex: 0 0 75px !important;
        width: 75px !important;
    }

    #bookmarks-screen .shortcut-row.row-halaman {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    #read-screen .shortcut-row.row-tartili {
        flex: 0 0 75px !important;
        width: 75px !important;
    }

    #read-screen .shortcut-row.row-halaman {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    #read-screen .shortcut-panel select,
    #bookmarks-screen .shortcut-panel select {
        padding: 2px 4px !important;
        font-size: 11px !important;
        height: 28px !important;
        width: 100% !important;
        min-width: 0 !important;
        background: var(--input-bg);
        color: var(--text-main);
        border-color: var(--border-color);
        border-radius: 8px;
    }

    #read-screen .btn-open-target,
    #bookmarks-screen .btn-open-target {
        width: 55px !important;
        flex: 0 0 55px !important;
        height: 28px !important;
        font-size: 11px !important;
        align-self: center !important;
        margin-top: 0 !important;
        border-radius: 8px !important;
    }

    #read-screen .btn-menu-back,
    #bookmarks-screen .btn-menu-back {
        width: 55px !important;
        flex: 0 0 55px !important;
        height: 28px !important;
        font-size: 11px !important;
        align-self: center !important;
        margin-top: 0 !important;
        border-radius: 8px !important;
    }
}

/* Samakan dropdown hanya pada landscape; portrait memakai susunan awal. */
@media (orientation: landscape) {
    #read-screen .shortcut-left,
    #bookmarks-screen .shortcut-left {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    #read-screen .shortcut-row,
    #bookmarks-screen .shortcut-row {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
    }

    #read-screen .shortcut-row span,
    #bookmarks-screen .shortcut-row span {
        width: 52px !important;
    }

    #read-screen .shortcut-row select,
    #bookmarks-screen .shortcut-row select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Rapikan kotak dropdown pada shortcut portrait tanpa mengubah Menu. */
@media (orientation: portrait) {
    #read-screen .shortcut-left,
    #bookmarks-screen .shortcut-left {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #read-screen .shortcut-row,
    #bookmarks-screen .shortcut-row {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
    }

    #read-screen .shortcut-row span,
    #bookmarks-screen .shortcut-row span {
        width: 52px !important;
        white-space: nowrap;
    }

    #read-screen .shortcut-row select,
    #bookmarks-screen .shortcut-row select {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex: none !important;
    }
}

/* Hilangkan batas 75px lama pada baris Tartili agar kedua dropdown
 memakai track grid yang sama lebar. */
@media (orientation: landscape), (orientation: portrait) {
    #read-screen .shortcut-row.row-tartili,
    #read-screen .shortcut-row.row-halaman,
    #bookmarks-screen .shortcut-row.row-tartili,
    #bookmarks-screen .shortcut-row.row-halaman {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Panel pintasan baca portrait: tombol seimbang dan kontrol rapi. */
@media (orientation: portrait) {
    #read-screen .shortcut-panel {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    #read-screen .shortcut-container {
        display: grid !important;
        grid-template-columns: calc((100% - 18px) / 4) minmax(0, 1fr) calc((100% - 18px) / 4) !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
    }

    #read-screen .shortcut-container > .btn-menu-back,
    #read-screen .shortcut-container > .btn-open-target {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        border-radius: 9px !important;
    }

    #read-screen .shortcut-left {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }

    #read-screen .shortcut-row {
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #read-screen .shortcut-row span {
        width: 64px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    #read-screen .shortcut-row select {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        padding: 2px 4px !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
    }
}

/* ===== COVER JILID & TOMBOL AKSI (tema, bookmark, riwayat, keluar) ===== */
.btn-cover {
    width: 100%;
    border: 1px solid var(--border-color);
    padding: 0;
    cursor: pointer;
    border-radius: 20px;
    transition: var(--transition);
    transform: scale(0.96);
    background: transparent;
    box-shadow: 0 12px 28px -10px rgba(var(--accent-rgb),0.25), 0 2px 6px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.btn-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    transition: var(--transition);
}

.btn-cover:hover,
.btn-cover.keyboard-focused {
    transform: translateY(-6px) scale(1.02);
    outline: none;
    border-color: rgba(var(--accent-rgb),0.55);
    box-shadow: 0 22px 40px -12px rgba(var(--accent-rgb), 0.45);
}

.btn-cover:hover img {
    transform: scale(1.03);
}

.btn-cover:active {
    transform: scale(1.0);
}

.btn-theme-toggle,
.btn-bookmark,
.btn-riwayat,
.btn-logout,
.btn-admin,
.btn-teacher-panel,
.btn-notif-trigger {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-theme-toggle:hover,
.btn-bookmark:hover,
.btn-riwayat:hover,
.btn-admin:hover,
.btn-teacher-panel:hover,
.btn-notif-trigger:hover {
    transform: scale(1.08);
    background: var(--input-bg);
    border-color: var(--accent-solid);
}

.btn-logout {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-logout:hover {
    transform: scale(1.08);
    background: #ef4444;
    border-color: #ef4444;
}

.btn-logout:hover svg {
    stroke: white;
}

.btn-theme-toggle svg,
.btn-bookmark svg,
.btn-riwayat svg,
.btn-logout svg,
.btn-admin svg,
.btn-teacher-panel svg,
.btn-notif-trigger svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

body.is-dark .btn-theme-toggle svg {
    stroke: var(--accent-solid);
}

.btn-logout svg {
    stroke: #ef4444;
}

.menu-top-actions .btn-theme-toggle,
.menu-top-actions .btn-logout {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.menu-top-actions .btn-theme-toggle svg,
.menu-top-actions .btn-logout svg {
    width: 16px;
    height: 16px;
}

.btn-admin,
.btn-teacher-panel,
.btn-riwayat {
    display: none;
}

.btn-bookmark.saved {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.btn-bookmark.saved svg {
    fill: var(--accent-solid);
    stroke: var(--accent-solid);
}

body.is-dark .btn-bookmark.saved svg {
    fill: var(--accent-solid);
    stroke: var(--accent-solid);
}

/* ===== TOMBOL NAVIGASI HALAMAN ===== */
.btn-page-nav-custom {
    flex: 1;
    height: 34px;
    border: none;
    border-radius: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    font-weight: 700;
    font-size: 12px;
    transition: var(--transition);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25);
    color: white;
}

.btn-prev-custom {
    background: var(--accent-gradient);
    padding-left: 34px;
    justify-content: flex-start;
}

.btn-prev-custom .nav-icon {
    position: absolute;
    left: 3px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    color: var(--accent-solid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: var(--transition);
}

.btn-next-custom {
    background: var(--accent-gradient);
    padding-right: 34px;
    justify-content: flex-end;
}

.btn-next-custom .nav-icon {
    position: absolute;
    right: 3px;
    width: 28px;
    height: 28px;
    background: #ffffff;
    color: var(--accent-solid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: var(--transition);
}

.nav-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-page-nav-custom:hover {
    opacity: 0.95;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--accent-rgb), 0.35);
}

.btn-page-nav-custom:active {
    transform: scale(0.97);
}

/* ===== LAYAR BACA: area gambar, blok suara, panel rekam & navigasi ===== */
#read-screen {
    position: relative;
    background: var(--bg-gradient);
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#read-screen.active {
    display: flex;
    flex-direction: column;
}

.image-scroll-area {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 0;
    position: relative;
}

.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--accent-solid);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 5;
    display: none;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spinPlain {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.image-container {
    position: relative;
    display: block;
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    width: 92%;
    max-width: 440px;
    aspect-ratio: 1 / 1.414;
    transform-origin: center center;
    transition: transform 0.05s ease-out;
    border: 1px solid var(--border-color);
}

.image-container img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 18px;
    pointer-events: none;
    object-fit: fill;
}

.sound-block {
    position: absolute;
    cursor: pointer;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px dashed rgba(var(--accent-rgb), 0.4);
    border-radius: 8px;
    transition: var(--transition);
}

.sound-block:hover {
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--accent-solid);
    transform: scale(1.02);
}

.sound-block:active {
    background: rgba(var(--accent-rgb), 0.35);
}

.controls-wrapper {
    width: calc(440px * 1.8);
    max-width: 96%;
    margin: 0 auto 6px auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    z-index: 100;
    background: var(--bg-panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.section-title {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-nav-panel {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.page-nav-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.record-panel {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.record-buttons {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 6px;
}

.universal-btn {
    height: 32px;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.universal-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.btn-menu-back {
    background: linear-gradient(135deg, #10b981, #059669);
}

.btn-open-target {
    background: var(--accent-gradient);
}

.btn-record {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
}

.btn-stop {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.btn-ok {
    background: var(--accent-gradient);
}

.btn-send {
    background: linear-gradient(135deg, #10b981, #059669);
}

.universal-btn:disabled {
    background: var(--border-color) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.7;
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.is-recording {
    animation: pulse-animation 1.5s infinite ease-in-out;
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
}

/* ===== PANEL PINTASAN (pilih jilid & halaman) ===== */
.shortcut-panel {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.shortcut-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.shortcut-row span {
    width: 50px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.shortcut-panel select {
    flex: 1;
    width: 0;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 11px;
    background: var(--input-bg);
    color: var(--text-main);
    font-weight: 600;
    outline: none;
    transition: var(--transition);
}

.shortcut-panel select:focus {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.shortcut-container {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.shortcut-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Dua kontrol pintasan selalu berbagi lebar yang sama di semua layar. */
#menu-screen .shortcut-left {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#menu-screen .shortcut-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#menu-screen .shortcut-row span {
    width: 52px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

#menu-screen .shortcut-row select {
    width: 100% !important;
    min-width: 0 !important;
}

/* ===== BAR PENILAIAN GURU ===== */
/* Bar penilaian guru: satu grid stabil di landscape, dua baris di portrait. */
#read-screen .teacher-review-panel {
    width: 100%;
    padding: 8px 10px !important;
    display: flex;
    align-items: stretch;
}

.teacher-review-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(150px, 1.25fr) minmax(200px, 2.2fr) minmax(118px, 0.8fr);
    gap: 8px;
    align-items: stretch;
}

.teacher-review-score,
.teacher-review-audio,
.teacher-review-feedback,
.teacher-review-actions {
    min-width: 0;
}

.teacher-review-score {
    display: flex;
    align-items: center;
    gap: 6px;
}

.teacher-review-score .section-title {
    margin: 0;
    text-align: left;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-review-score input {
    width: 56px;
    flex: 0 0 56px;
    box-sizing: border-box;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.teacher-review-audio {
    display: flex;
    align-items: center;
}

.teacher-review-audio iframe {
    display: block;
    width: 100%;
    height: 44px;
    border: 0;
}

.teacher-review-feedback {
    width: 100%;
    min-height: 44px;
    height: 64px;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
}

.teacher-review-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 64px;
}

.teacher-review-actions button {
    width: 100%;
    min-height: 29px;
    flex: 1 1 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    padding: 4px 6px;
    margin: 0;
}

.teacher-review-actions .review-back {
    background: var(--input-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.teacher-review-actions .review-submit {
    background: var(--accent-gradient);
    color: white;
    border: 0;
}

@media (orientation: portrait) {
    #read-screen .teacher-review-panel {
        padding: 8px 10px !important;
    }

    .teacher-review-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: 8px;
    }

    .teacher-review-feedback,
    .teacher-review-actions {
        grid-column: 1 / -1;
    }

    .teacher-review-actions {
        flex-direction: row;
        min-height: 34px;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    #read-screen .teacher-review-panel {
        padding: 6px 8px !important;
    }

    .teacher-review-layout {
        gap: 6px;
    }

    .teacher-review-feedback {
        height: 54px;
    }

    .teacher-review-actions {
        min-height: 54px;
        gap: 4px;
    }
}

html,
body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===== MODE HEMAT EFEK (otomatis untuk HP dengan RAM kecil) ===== */
html.lite-fx * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.lite-fx body.light-theme {
    --bg-panel: rgba(255, 255, 255, 0.96);
}

html.lite-fx body.dark-theme {
    --bg-panel: rgba(15, 23, 42, 0.96);
}

/* ===== SPLASH / HALAMAN AWAL ===== */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-gradient);
    background-color: var(--bg-main);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#splash-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.splash-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.splash-logo {
    width: 112px;
    height: 112px;
    object-fit: contain;
    border-radius: 28px;
    filter: drop-shadow(0 12px 24px rgba(var(--accent-rgb), 0.35));
    animation: splashFloat 2.4s ease-in-out infinite;
}

.splash-title {
    margin-top: 18px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 4px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.splash-tagline {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.splash-spinner {
    margin-top: 26px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(var(--accent-rgb), 0.18);
    border-top-color: var(--accent-solid);
    animation: splashSpin 0.9s linear infinite;
}

.splash-status {
    margin-top: 16px;
    max-width: 280px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    min-height: 16px;
}

.splash-retry {
    display: none;
    margin-top: 12px;
    padding: 9px 22px;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: var(--accent-gradient);
}

.splash-footer {
    position: absolute;
    left: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
}

@keyframes splashSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes splashFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ===== PENANDA OFFLINE ===== */
#offlineBadge {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    background: #f59e0b;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

body.is-offline #offlineBadge {
    display: block;
}

/* ===== SIMPAN JILID UNTUK OFFLINE ===== */
#offline-modal,
#install-help-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.5);
}

#offline-modal.open,
#install-help-modal.open {
    display: flex;
}

.offline-card {
    width: 100%;
    max-width: 440px;
    max-height: calc(var(--app-h, 100vh) * 0.88);
    overflow-y: auto;
    border-radius: 20px;
    padding: 18px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.offline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.offline-title {
    font-size: 17px;
    font-weight: 800;
}

.offline-desc {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.offline-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}

.offline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offline-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.offline-row-info {
    flex: 1;
    min-width: 0;
}

.offline-row-title {
    font-size: 14px;
    font-weight: 800;
}

.offline-row-sub {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.offline-bar {
    margin-top: 7px;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.15);
}

.offline-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: var(--accent-gradient);
    transition: width 0.3s ease;
}

.offline-row-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex-shrink: 0;
}

.offline-btn {
    min-width: 82px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--accent-gradient);
}

.offline-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.offline-btn-del {
    display: none;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
}

.offline-foot {
    margin-top: 14px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    min-height: 14px;
}

/* ===== TOMBOL SIMPAN OFFLINE (di bar atas menu) ===== */
.btn-offline-manager {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-offline-manager:hover {
    transform: scale(1.08);
    background: var(--input-bg);
    border-color: var(--accent-solid);
}

.btn-offline-manager svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

body.is-dark .btn-offline-manager svg {
    stroke: var(--accent-solid);
}

/* ===== PEMUTAR REKAMAN SETORAN ===== */
.setoran-player {
    width: 100%;
}

.setoran-play-btn {
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--accent-gradient);
}

.setoran-play-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.setoran-player-msg {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ===== PERLINDUNGAN KONTEN ===== */
.image-container,
.image-container *,
.setoran-player {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.image-container img {
    -webkit-user-drag: none;
}

/* Tanda air nama pengguna di atas gambar halaman (tidak bisa disentuh) */
.image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: 18px;
    pointer-events: none;
    background-image: var(--page-watermark, none);
    background-repeat: repeat;
}

/* Cetak / simpan sebagai PDF: sembunyikan halaman */
@media print {
    .image-container,
    .setoran-player,
    audio {
        display: none !important;
    }
}

/* ===== SAMPUL JILID: tampil utuh sesuai rasio aslinya =====
 Sebelumnya tinggi sampul dibatasi dan gambar dipotong (object-fit: cover),
 sehingga angka jilid di pojok kiri atas ikut terpotong. */
.btn-cover {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
}

.btn-cover img {
    height: auto !important;
    object-fit: contain !important;
}

.grid-jilid {
    align-items: start;
}

/* ===== PASANG APLIKASI ===== */
.install-app-link {
    display: block;
    margin: 10px auto 0;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-solid);
}

.install-steps {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-main);
}

.install-steps li {
    margin-bottom: 6px;
}

/* ===== POPUP RIWAYAT SETORAN (siswa) ===== */
.landing-hero-actions .btn-riwayat {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.riwayat-summary {
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.riwayat-summary b {
    color: var(--accent-solid);
    font-weight: 800;
}

.riwayat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
}

.riwayat-item:hover {
    background: var(--input-bg);
}

.riwayat-info {
    flex: 1;
    min-width: 0;
}

.riwayat-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.riwayat-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.riwayat-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.riwayat-score {
    min-width: 48px;
    height: 38px;
    padding: 0 8px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
}

.riwayat-score.high {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.riwayat-score.mid {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.riwayat-score.low {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

.riwayat-score.pending {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--input-bg);
}

.riwayat-del {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.riwayat-del svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #ef4444;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: var(--transition);
}

.riwayat-del:hover {
    transform: scale(1.08);
    background: #ef4444;
    border-color: #ef4444;
}

.riwayat-del:hover svg {
    stroke: white;
}

.riwayat-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ===== JUDUL TARTILIKU: kiri, sejajar tombol download / tema / keluar ===== */
.menu-top-actions .app-brand-title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 auto 0 0;
    text-align: left;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== TEMA TAMBAHAN ===== */

/* Blue Night (gelap, biru malam) */
body.bluenight-theme {
    --bg-main: #070d1f;
    --bg-gradient: radial-gradient(circle at 10% 12%, rgba(59, 130, 246, 0.22) 0%, transparent 44%), radial-gradient(circle at 90% 16%, rgba(99, 102, 241, 0.20) 0%, transparent 44%), radial-gradient(circle at 50% 100%, rgba(14, 165, 233, 0.12) 0%, transparent 50%), #070d1f;
    --bg-card: rgba(15, 27, 56, 0.72);
    --bg-panel: rgba(12, 22, 48, 0.82);
    --bg-panel-solid: rgba(12, 22, 48, 0.97);
    --border-color: rgba(96, 165, 250, 0.18);
    --text-main: #e6efff;
    --text-muted: #8da2c8;
    --input-bg: rgba(30, 58, 120, 0.30);
    --accent-gradient: linear-gradient(135deg, #60a5fa, #3b82f6, #6366f1);
    --accent-solid: #60a5fa;
    --accent-rgb: 96, 165, 250;
    --orb1-rgb: 59, 130, 246;
    --orb2-rgb: 99, 102, 241;
    --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset;
    --glow: 0 0 25px rgba(96, 165, 250, 0.32), 0 0 45px rgba(99, 102, 241, 0.18);
}

/* Lavender (terang, ungu lembut) */
body.lavender-theme {
    --bg-main: #f5f3ff;
    --bg-gradient: radial-gradient(circle at 10% 14%, rgba(167, 139, 250, 0.24) 0%, transparent 45%), radial-gradient(circle at 90% 18%, rgba(129, 140, 248, 0.20) 0%, transparent 45%), radial-gradient(circle at 50% 100%, rgba(196, 181, 253, 0.26) 0%, transparent 50%), #f5f3ff;
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-panel: rgba(255, 255, 255, 0.82);
    --bg-panel-solid: rgba(255, 255, 255, 0.97);
    --border-color: rgba(139, 92, 246, 0.20);
    --text-main: #2e2766;
    --text-muted: #7a73a6;
    --input-bg: rgba(245, 243, 255, 0.9);
    --accent-gradient: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed);
    --accent-solid: #8b5cf6;
    --accent-rgb: 139, 92, 246;
    --orb1-rgb: 167, 139, 250;
    --orb2-rgb: 129, 140, 248;
    --shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.16), 0 10px 15px -5px rgba(139, 92, 246, 0.07);
    --glow: 0 0 20px rgba(139, 92, 246, 0.25), 0 0 35px rgba(167, 139, 250, 0.16);
}

/* Ceria Anak (terang, warna-warni hangat) */
body.kids-theme {
    --bg-main: #fff7e0;
    --bg-gradient: radial-gradient(circle at 10% 12%, rgba(255, 183, 3, 0.28) 0%, transparent 42%), radial-gradient(circle at 90% 18%, rgba(46, 196, 182, 0.22) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(255, 107, 107, 0.18) 0%, transparent 50%), #fff7e0;
    --bg-card: rgba(255, 255, 255, 0.82);
    --bg-panel: rgba(255, 255, 255, 0.88);
    --bg-panel-solid: rgba(255, 252, 242, 0.97);
    --border-color: rgba(255, 159, 28, 0.32);
    --text-main: #2d2a6e;
    --text-muted: #7b6f94;
    --input-bg: rgba(255, 244, 214, 0.9);
    --accent-gradient: linear-gradient(135deg, #ffb703, #ff7a59, #ff5d8f);
    --accent-solid: #ff7a59;
    --accent-rgb: 255, 122, 89;
    --orb1-rgb: 255, 183, 3;
    --orb2-rgb: 46, 196, 182;
    --shadow: 0 18px 36px -14px rgba(255, 122, 89, 0.28), 0 8px 14px -6px rgba(255, 183, 3, 0.18);
    --glow: 0 0 20px rgba(255, 122, 89, 0.28), 0 0 34px rgba(255, 183, 3, 0.20);
}

/* Futuristik (gelap, neon cyan & magenta + garis grid halus) */
body.future-theme {
    --bg-main: #04050d;
    --bg-gradient: radial-gradient(circle at 12% 10%, rgba(0, 229, 255, 0.18) 0%, transparent 42%), radial-gradient(circle at 88% 16%, rgba(255, 43, 214, 0.16) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(124, 77, 255, 0.16) 0%, transparent 50%), linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 38px 38px, linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 38px 38px, #04050d;
    --bg-card: rgba(10, 14, 34, 0.72);
    --bg-panel: rgba(8, 11, 28, 0.84);
    --bg-panel-solid: rgba(8, 11, 28, 0.97);
    --border-color: rgba(0, 229, 255, 0.26);
    --text-main: #e6faff;
    --text-muted: #7f93b2;
    --input-bg: rgba(0, 229, 255, 0.07);
    --accent-gradient: linear-gradient(135deg, #00e5ff, #7c4dff, #ff2bd6);
    --accent-solid: #00e5ff;
    --accent-rgb: 0, 229, 255;
    --orb1-rgb: 0, 229, 255;
    --orb2-rgb: 255, 43, 214;
    --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(0, 229, 255, 0.10) inset;
    --glow: 0 0 22px rgba(0, 229, 255, 0.45), 0 0 48px rgba(255, 43, 214, 0.25);
}

body.future-theme .landing-hero-card {
    box-shadow: var(--shadow), 0 0 26px rgba(var(--accent-rgb), 0.26);
}

/* Mode hemat efek: panel dibuat lebih pekat pada tema tambahan */
html.lite-fx body.bluenight-theme,
html.lite-fx body.lavender-theme,
html.lite-fx body.kids-theme,
html.lite-fx body.future-theme,
html.lite-fx body.emerald-theme,
html.lite-fx body.aesthetic-theme {
    --bg-panel: var(--bg-panel-solid);
}

/* ===== POPUP PILIH TEMA ===== */
.theme-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
}

.theme-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-main);
    font-family: inherit;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    transition: var(--transition);
}

.theme-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-solid);
}

.theme-card.active {
    border-color: var(--accent-solid);
    box-shadow: var(--glow);
}

.theme-preview {
    position: relative;
    display: block;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.28);
    margin-bottom: 4px;
}

.tp-dot {
    position: absolute;
    top: 9px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.tp-dot:nth-child(1) {
    left: 10px;
}

.tp-dot:nth-child(2) {
    left: 30px;
}

.tp-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 12px;
    border-radius: 6px;
}

.tp-check {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.theme-desc {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ===== TEMA: EMERALD (gelap, hijau zamrud dengan sentuhan emas) ===== */
body.emerald-theme {
    --bg-main: #03120d;
    --bg-gradient: radial-gradient(circle at 10% 12%, rgba(16, 185, 129, 0.24) 0%, transparent 44%), radial-gradient(circle at 90% 16%, rgba(212, 175, 55, 0.14) 0%, transparent 42%), radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.14) 0%, transparent 50%), #03120d;
    --bg-card: rgba(8, 30, 23, 0.72);
    --bg-panel: rgba(6, 26, 20, 0.84);
    --bg-panel-solid: rgba(6, 26, 20, 0.97);
    --border-color: rgba(52, 211, 153, 0.22);
    --text-main: #e6fff5;
    --text-muted: #8fb8a8;
    --input-bg: rgba(16, 185, 129, 0.10);
    --accent-gradient: linear-gradient(135deg, #34d399, #10b981, #0d9488);
    --accent-solid: #34d399;
    --accent-rgb: 52, 211, 153;
    --orb1-rgb: 16, 185, 129;
    --orb2-rgb: 212, 175, 55;
    --shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(212, 175, 55, 0.10) inset;
    --glow: 0 0 24px rgba(52, 211, 153, 0.35), 0 0 44px rgba(212, 175, 55, 0.14);
}

/* ===== TEMA: AESTETIK (terang, pastel rose, sage & lilac) ===== */
body.aesthetic-theme {
    --bg-main: #fbf6f1;
    --bg-gradient: radial-gradient(circle at 8% 10%, rgba(244, 194, 194, 0.42) 0%, transparent 44%), radial-gradient(circle at 92% 14%, rgba(184, 204, 190, 0.38) 0%, transparent 44%), radial-gradient(circle at 50% 100%, rgba(226, 208, 250, 0.34) 0%, transparent 52%), #fbf6f1;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-panel: rgba(255, 252, 249, 0.82);
    --bg-panel-solid: rgba(255, 252, 249, 0.97);
    --border-color: rgba(190, 140, 150, 0.26);
    --text-main: #4a3a3f;
    --text-muted: #8b7a7f;
    --input-bg: rgba(255, 244, 240, 0.92);
    --accent-gradient: linear-gradient(135deg, #d9809c, #c26a8a, #a76bb5);
    --accent-solid: #c26a8a;
    --accent-rgb: 194, 106, 138;
    --orb1-rgb: 244, 170, 190;
    --orb2-rgb: 160, 190, 170;
    --shadow: 0 18px 36px -16px rgba(194, 106, 138, 0.25), 0 8px 14px -6px rgba(160, 190, 170, 0.18);
    --glow: 0 0 20px rgba(194, 106, 138, 0.25), 0 0 34px rgba(160, 190, 170, 0.20);
}

/* ===== KARTU SAPAAN (menu): avatar, dekorasi, chip ===== */
.landing-hero-card {
    overflow: visible;
}

.hero-deco {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--orb1-rgb), 0.26) 0%, transparent 52%),
        repeating-conic-gradient(from 0deg at 100% 0%, rgba(var(--accent-rgb), 0.08) 0deg 6deg, transparent 6deg 12deg);
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.40) 48%, transparent 78%);
    mask-image: radial-gradient(circle at 100% 0%, #000 0%, rgba(0, 0, 0, 0.40) 48%, transparent 78%);
}

.landing-hero-info,
.landing-hero-actions {
    position: relative;
    z-index: 1;
}

.landing-hero-info {
    min-width: 0;
    gap: 10px;
}

.hero-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hero-avatar {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background: var(--accent-gradient);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16), 0 10px 20px -8px rgba(var(--accent-rgb), 0.65);
}

.hero-avatar::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--accent-rgb), 0.5);
}

.landing-hero-greeting {
    color: var(--accent-solid);
    letter-spacing: 0.4px;
}

.landing-hero-username {
    font-size: 21px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.landing-hero-motivation {
    font-size: 11.5px;
}

.landing-hero-subtitle {
    gap: 6px;
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}

#userClassText,
#userTeacherNameText {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

#userClassText::before {
    content: "🏫";
    margin-right: 5px;
    font-size: 10px;
}

#userTeacherNameText::before {
    content: "👨‍🏫";
    margin-right: 5px;
    font-size: 10px;
}

.landing-hero-subtitle .badge-role {
    background: var(--accent-gradient);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 12px -6px rgba(var(--accent-rgb), 0.7);
}

.landing-hero-subtitle .badge-role:hover {
    background: var(--accent-gradient);
    filter: brightness(1.12);
    transform: translateY(-1px);
}

body.future-theme .landing-hero-card {
    border-color: rgba(var(--accent-rgb), 0.38);
}

body.aesthetic-theme .landing-hero-card,
body.kids-theme .landing-hero-card {
    border-radius: 28px;
}

@media (max-width: 480px) {
    .hero-avatar {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .hero-identity {
        gap: 12px;
    }

    .landing-hero-username {
        font-size: 18px;
    }
}

/* ===== DROPDOWN PINTASAN: tampilan profesional, mengikuti tema ===== */
#menu-screen .shortcut-panel select,
#read-screen .shortcut-panel select,
#bookmarks-screen .shortcut-panel select,
#menu-screen .shortcut-row select,
#read-screen .shortcut-row select,
#bookmarks-screen .shortcut-row select,
.shortcut-panel select,
.shortcut-row select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--input-bg);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent-solid) 50%),
        linear-gradient(135deg, var(--accent-solid) 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-left: 10px !important;
    padding-right: 24px !important;
    border: 1px solid var(--border-color);
    border-radius: 10px !important;
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-overflow: ellipsis;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 8px -4px rgba(var(--accent-rgb), 0.38);
    transition: var(--transition);
}

#menu-screen .shortcut-panel select:hover,
#read-screen .shortcut-panel select:hover,
#bookmarks-screen .shortcut-panel select:hover,
#menu-screen .shortcut-row select:hover,
#read-screen .shortcut-row select:hover,
#bookmarks-screen .shortcut-row select:hover,
.shortcut-panel select:hover,
.shortcut-row select:hover {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 3px 8px -4px rgba(var(--accent-rgb), 0.45);
}

#menu-screen .shortcut-panel select:focus,
#read-screen .shortcut-panel select:focus,
#bookmarks-screen .shortcut-panel select:focus,
#menu-screen .shortcut-row select:focus,
#read-screen .shortcut-row select:focus,
#bookmarks-screen .shortcut-row select:focus,
.shortcut-panel select:focus,
.shortcut-row select:focus {
    border-color: var(--accent-solid);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

.shortcut-row span {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Daftar pilihan (popup) ikut warna tema */
select option {
    background: var(--bg-main);
    color: var(--text-main);
    font-weight: 600;
}

body.is-dark select {
    color-scheme: dark;
}

body:not(.is-dark) select {
    color-scheme: light;
}

/* Pilihan peran di form daftar: gaya yang sama */
.login-card select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent-solid) 50%),
        linear-gradient(135deg, var(--accent-solid) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
    cursor: pointer;
}

/* ===== TOMBOL PANDUAN & TENTANG (halaman masuk + menu) ===== */
.info-links-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.info-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.info-link-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--accent-solid);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-link-btn:hover {
    border-color: var(--accent-solid);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -10px rgba(var(--accent-rgb), 0.7);
}

/* ===== POPUP PANDUAN ===== */
.guide-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    flex-shrink: 0;
}

.guide-tab {
    flex: 1 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.guide-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), 0.8);
}

.guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 20px;
}

.guide-panel {
    display: none;
}

.guide-panel.active {
    display: block;
}

.guide-step {
    display: flex;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.guide-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.guide-text {
    min-width: 0;
}

.guide-text b {
    color: var(--text-main);
}

.guide-text > b {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}

.guide-text p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.guide-text p b {
    color: var(--accent-solid);
}

/* ===== POPUP TENTANG ===== */
.about-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 16px 20px;
}

.about-hero {
    text-align: center;
}

.about-logo {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    box-shadow: var(--glow);
}

.about-name {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.about-tagline {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.about-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.about-chips span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

.about-desc {
    margin: 16px 0 4px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: center;
}

.about-section-title {
    margin: 16px 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-solid);
    text-align: center;
}

.about-social-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-social {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: var(--transition);
}

.about-social:hover {
    transform: translateY(-1px);
    border-color: var(--accent-solid);
    box-shadow: 0 10px 18px -12px rgba(var(--accent-rgb), 0.7);
}

.about-social-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--accent-solid);
}

.about-social-icon svg {
    width: 20px;
    height: 20px;
}

.about-social.ig .about-social-icon {
    color: #e1306c;
}

.about-social.tt .about-social-icon {
    color: var(--text-main);
}

.about-social.wa .about-social-icon {
    color: #25d366;
}

.about-social-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.about-social-text b {
    font-size: 13px;
    color: var(--text-main);
}

.about-social-text small {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-social-go {
    font-size: 20px;
    color: var(--text-muted);
}

.about-credit {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.8;
}

/* ===== INFO VERSI BARU ===== */
.update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 16px;
    border-radius: 999px;
    background: var(--bg-panel-solid, var(--bg-main));
    color: var(--text-main);
    border: 1px solid var(--accent-solid);
    box-shadow: var(--shadow), var(--glow);
    font-size: 12px;
    font-weight: 700;
    max-width: calc(100vw - 24px);
}

.update-banner button {
    border: none;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: var(--accent-gradient);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ===== ADMIN: lencana jumlah pendaftar + sembunyikan panel setoran ===== */
.btn-admin {
    position: relative;
}

.admin-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: #ef4444;
    box-shadow: 0 0 0 2px var(--bg-main);
}

body.role-admin #studentRecordPanel {
    display: none !important;
}

/* ===== PEMUTAR AUDIO 1 HALAMAN ===== */
.page-player {
    position: absolute;
    z-index: 130;
    right: 12px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pp-extra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}

.pp-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    transition: var(--transition);
    padding: 0;
}

.pp-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--accent-solid);
    stroke: none;
}

.pp-btn:hover {
    transform: scale(1.08);
    border-color: var(--accent-solid);
}

.pp-main {
    background: var(--accent-gradient);
    border-color: transparent;
    box-shadow: 0 8px 16px -8px rgba(var(--accent-rgb), 0.8);
}

.pp-main svg {
    fill: #fff;
    margin-left: 1px;
}

.pp-small {
    width: 32px;
    height: 32px;
}

.pp-small svg {
    width: 14px;
    height: 14px;
}

.pp-chip {
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.pp-chip:hover {
    border-color: var(--accent-solid);
}

.pp-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
}

.sound-block.playing {
    background: rgba(var(--accent-rgb), 0.38);
    border: 1px solid var(--accent-solid);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
}

/* ===== TINGGI LAYAR NYATA (--app-h diatur oleh skrip di <head>) =====
 Mencegah panel bawah (Setoran membaca), popup, dan notifikasi keluar layar di HP. */
body {
    height: var(--app-h, 100dvh);
}

.screen,
#read-screen {
    height: var(--app-h, 100%);
}

.modal-overlay {
    height: var(--app-h, 100%);
}

#toastNotification {
    bottom: auto;
    top: calc(var(--app-h, 100dvh) - 84px);
}

.update-banner {
    bottom: auto;
    top: calc(var(--app-h, 100dvh) - 72px);
    transform: translateX(-50%);
}

/* Tombol audio yang sedang bunyi: tanda jelas */
.sound-block.playing {
    z-index: 6;
}

/* ===== NAMA JILID KHUSUS: Tartili Ghorib ===== */
.btn-cover {
    position: relative;
}

.cover-tag {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent-gradient);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 6px 12px -6px rgba(var(--accent-rgb), 0.8);
    pointer-events: none;
}

.jilid-badge {
    position: absolute;
    z-index: 130;
    left: 12px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
}

.jilid-badge b {
    color: var(--accent-solid);
    font-weight: 800;
}

/* =====================================================================
 FITUR BELAJAR: Tandai blok, Perbaiki blok, Talaqqi, Tebak Bunyi, Laporan
 (semua warna memakai variabel tema agar selalu serasi)
 ===================================================================== */
.bj-box {
    height: calc(var(--app-h, 100vh) - 24px) !important;
    max-height: 780px !important;
    max-width: 480px !important;
}

.bj-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bj-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.5;
}

.bj-note {
    text-align: center;
    padding: 26px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.bj-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bj-steps,
.bj-tools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bj-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    cursor: default;
    transition: var(--transition);
}

button.bj-chip {
    cursor: pointer;
}

.bj-chip.on {
    background: var(--accent-gradient);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bj-chip.warn {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.10);
}

.bj-btn {
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 0 18px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--accent-gradient);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 16px -10px rgba(var(--accent-rgb), 0.8);
    transition: var(--transition);
}

.bj-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.bj-btn:disabled {
    opacity: 0.45;
    cursor: default;
    box-shadow: none;
}

.bj-btn.ghost {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    text-shadow: none;
    box-shadow: none;
}

.bj-btn.round {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    font-size: 20px;
}

.bj-btn.wa {
    background: #25d366;
    color: #04210f;
    text-shadow: none;
    box-shadow: 0 8px 16px -10px rgba(37, 211, 102, 0.8);
}

.bj-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.bj-actions .bj-btn {
    flex: 1;
}

.bj-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    color: var(--text-main);
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: var(--transition);
}

.bj-card b {
    font-size: 14px;
}

.bj-card span {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.bj-card:hover:not(.static) {
    transform: translateY(-2px);
    border-color: var(--accent-solid);
    box-shadow: var(--glow);
}

.bj-card.static {
    cursor: default;
}

/* halaman + blok */
.bj-stage {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #fff;
    line-height: 0;
}

.bj-stage img {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.bj-b {
    position: absolute;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    border: 1px dashed rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.12);
    transition: var(--transition);
}

.bj-b.r,
.bj-b.bad {
    background: rgba(239, 68, 68, 0.38);
    border: 2px solid #ef4444;
}

.bj-b.y {
    background: rgba(245, 158, 11, 0.38);
    border: 2px solid #f59e0b;
}

.bj-b.ok {
    background: rgba(16, 185, 129, 0.38);
    border: 2px solid #10b981;
}

.bj-b.sel {
    outline: 3px solid var(--accent-solid);
    outline-offset: 1px;
}

.bj-b.pulse {
    animation: bjPulse 1.3s ease-in-out infinite;
}

@keyframes bjPulse {
    50% {
        box-shadow: 0 0 14px rgba(239, 68, 68, 0.85);
    }
}

/* Talaqqi */
.bj-cropwrap {
    display: flex;
    justify-content: center;
}

.bj-cropbox {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    aspect-ratio: var(--ar);
    width: min(100%, calc(var(--ar) * var(--app-h, 100vh) * 0.26));
}

.bj-cropbox img {
    position: absolute;
    height: auto;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.bj-wave {
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.bj-wave-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.bj-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 44px;
}

.bj-bars i {
    display: block;
    width: 6px;
    height: var(--h);
    border-radius: 3px;
    background: var(--accent-solid);
    opacity: 0.5;
    transform-origin: center;
}

.bj-bars.me i {
    background: rgb(var(--orb2-rgb));
}

.bj-bars.live i {
    opacity: 1;
    animation: bjBar 0.7s ease-in-out infinite alternate;
}

.bj-bars.live i:nth-child(odd) {
    animation-delay: 0.25s;
}

@keyframes bjBar {
    from {
        transform: scaleY(0.45);
    }

    to {
        transform: scaleY(1.15);
    }
}

.bj-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    min-height: 18px;
}

.bj-feedback {
    padding: 12px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--accent-solid);
}

/* Laporan orang tua */
.bj-card.report {
    cursor: default;
    border-color: var(--accent-solid);
    box-shadow: var(--glow);
}

.bj-stat {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

.bj-stat b {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
}

.bj-stat span {
    font-size: 11px;
    color: var(--text-muted);
}

.bj-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 10px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    outline: none;
}

.bj-textarea:focus {
    border-color: var(--accent-solid);
}

.bj-report-btn svg {
    stroke: var(--accent-solid) !important;
}

.bj-report-btn {
    background: rgba(var(--accent-rgb), 0.12) !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
}

.bj-report-btn:hover {
    background: var(--accent-solid) !important;
}

.bj-report-btn:hover svg {
    stroke: #fff !important;
}

/* tombol di tempat lain */
.riwayat-fix {
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--accent-gradient);
    border: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.review-mark-float {
    position: absolute;
    z-index: 130;
    left: 12px;
    top: calc(54px + env(safe-area-inset-top, 0px));
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-width: calc(100% - 100px);
}

.review-mark-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff;
    background: var(--accent-gradient);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.review-mark-summary {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
 BINTANG, PETA PERJALANAN, LENCANA, MASKOT PELITA (semua warna dari variabel tema)
 ===================================================================== */
.bs-chip {
    display: none;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 800;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.45);
    transition: var(--transition);
}

.bs-chip:hover {
    transform: translateY(-1px);
    border-color: #f59e0b;
}

#userStarChip.bs-chip {
    display: inline-flex;
}

/* Maskot Pelita: lentera tanpa wajah; ekspresi lewat nyala api, cahaya, dan percikan */
.pelita {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pelita .pl-halo {
    fill: #ffd166;
    opacity: calc(var(--glow) * 0.30);
    filter: blur(6px);
}

.pelita .pl-ring {
    stroke: var(--accent-solid);
    stroke-width: 3;
    stroke-linecap: round;
}

.pelita .pl-cap,
.pelita .pl-base {
    fill: var(--accent-solid);
}

.pelita .pl-glass {
    fill: rgba(var(--accent-rgb), 0.16);
    stroke: var(--accent-solid);
    stroke-width: 2;
}

.pelita .pl-flame {
    fill: #ff9f1c;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scale(calc(0.55 + var(--glow) * 0.45));
    animation: plFlicker 1.7s ease-in-out infinite alternate;
}

.pelita .pl-core {
    fill: #ffe9a8;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scale(calc(0.55 + var(--glow) * 0.45));
    animation: plFlicker 1.3s ease-in-out infinite alternate-reverse;
}

.pelita .pl-sparks path {
    fill: #ffd166;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.pelita.celebrate {
    animation: plBounce 0.7s ease 2;
}

.pelita.celebrate .pl-sparks path {
    animation: plSpark 1.1s ease-in-out infinite alternate;
}

.pelita.celebrate .pl-sparks path:nth-child(2) {
    animation-delay: 0.25s;
}

.pelita.celebrate .pl-sparks path:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes plFlicker {
    from {
        transform: scale(calc(0.50 + var(--glow) * 0.42)) rotate(-2deg);
    }

    to {
        transform: scale(calc(0.60 + var(--glow) * 0.45)) rotate(2deg);
    }
}

@keyframes plBounce {
    40% {
        transform: translateY(-8px);
    }
}

@keyframes plSpark {
    from {
        opacity: 0.1;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* hasil penilaian */
.bs-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
}

.bs-result .pelita {
    width: 62px;
    height: 72px;
}

.bs-result-stars {
    font-size: 28px;
    letter-spacing: 4px;
    color: #f59e0b;
    text-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
}

.bs-result-msg {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
}

/* peta */
.bs-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bs-mascot {
    flex-shrink: 0;
    width: 54px;
    height: 64px;
}

.bs-bubble {
    position: relative;
    flex: 1;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

.bs-bubble::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 18px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--input-bg);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.bj-body > * {
    flex-shrink: 0;
}

/* isi popup tidak boleh menyusut (mencegah tumpang tindih) */
.bs-map {
    position: relative;
    width: 100%;
}

.bs-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.bs-total span {
    font-size: 38px;
    font-weight: 800;
    color: #f59e0b;
    text-shadow: 0 0 18px rgba(245, 158, 11, 0.45);
}

.bs-total small {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.bs-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bs-seg {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}

.bs-seg.locked {
    stroke: var(--border-color);
    stroke-dasharray: 2 10;
}

.bs-seg.active {
    stroke: var(--accent-solid);
    stroke-dasharray: 10 8;
    animation: bsDash 1.4s linear infinite;
}

.bs-seg.done {
    stroke: var(--accent-solid);
}

@keyframes bsDash {
    to {
        stroke-dashoffset: -36;
    }
}

.bs-node {
    position: absolute;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    border: 0;
    background: var(--bg-card);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.bs-node:hover,
.bs-node.sel {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--glow);
}

.bs-node svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bs-node .tr {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 5;
}

.bs-node .pg {
    fill: none;
    stroke: var(--accent-solid);
    stroke-width: 5;
    stroke-linecap: round;
}

.bs-node.done .pg {
    stroke: #f59e0b;
}

.bs-node .num {
    position: relative;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
}

.bs-node.done .num {
    color: #f59e0b;
}

.bs-node.cur {
    animation: bsPulse 2s ease-in-out infinite;
}

@keyframes bsPulse {
    50% {
        box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.18), var(--glow);
    }
}

.bs-pin {
    position: absolute;
    top: -46px;
    right: -18px;
    width: 38px;
    height: 45px;
    pointer-events: none;
}

.bs-label {
    position: absolute;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.bs-label b {
    font-size: 16px;
    color: var(--text-main);
}

.bs-label span {
    font-size: 14px;
    font-weight: 800;
    color: #f59e0b;
}

/* konfeti */
.bs-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10100;
    overflow: hidden;
}

.bs-cf {
    position: absolute;
    top: -16px;
    border-radius: 2px;
    animation-name: bsFall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes bsFall {
    to {
        transform: translateY(calc(var(--app-h, 100vh) + 24px)) rotate(600deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pelita .pl-flame,
    .pelita .pl-core,
    .pelita.celebrate,
    .pelita.celebrate .pl-sparks path,
    .bs-node.cur,
    .bs-seg.active {
        animation: none;
    }

    .pelita.celebrate .pl-sparks path {
        opacity: 1;
    }
}

/* ===== TEBAK BUNYI: satu layar tanpa menggulir (HP/laptop, potret/landscape) ===== */
.bj-box.bj-game {
    max-width: min(1000px, calc(100vw - 16px)) !important;
    width: 100%;
    height: calc(var(--app-h, 100vh) - 16px) !important;
    max-height: none !important;
}

.bj-game .bj-body {
    overflow: hidden;
    padding: 8px 10px 10px;
}

.bj-game .bj-body > .tb-wrap,
.bj-game .bj-body > .tb-result {
    flex: 1;
    min-height: 0;
    flex-shrink: 1;
}

.tb-wrap {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
}

.tb-stagewrap {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tb-stagehost {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.tb-stagewrap .bj-stage {
    flex-shrink: 0;
}

.tb-stagewrap .bj-stage img {
    height: 100%;
}

.tb-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tb-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tb-row .bj-btn.round {
    flex-shrink: 0;
}

.tb-fb {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}

.tb-fb.ok {
    color: #10b981;
}

.tb-fb.bad {
    color: #ef4444;
}

.tb-next {
    width: 100%;
}

.tb-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--text-main);
}

.tb-result b {
    font-size: 20px;
}

.tb-result span {
    font-size: 13px;
    color: var(--text-muted);
}

.tb-result-stars {
    font-size: 56px;
    letter-spacing: 6px;
    color: #f59e0b;
    text-shadow: 0 0 24px rgba(245, 158, 11, 0.5);
}

@media (orientation: landscape) {
    .tb-wrap {
        grid-template-columns: minmax(0, 1fr) 250px;
        grid-template-rows: minmax(0, 1fr);
    }

    .tb-panel {
        justify-content: center;
        gap: 14px;
    }

    .tb-row {
        flex-direction: column;
        text-align: center;
    }

    .tb-fb {
        justify-content: center;
        text-align: center;
    }

    .tb-row .bj-btn.round {
        width: 72px;
        height: 72px;
        min-height: 72px;
        font-size: 26px;
    }

    .bj-game .modal-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ===== TEBAK BUNYI (landscape): halaman besar & bisa digulir, panel tombol tetap di kanan ===== */
.tb-stagewrap.scroll {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.tb-stagewrap.scroll .tb-stagehost {
    max-height: none;
    align-items: flex-start;
}

@media (orientation: landscape) {
    .tb-wrap {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 12px;
    }

    .tb-panel {
        align-self: stretch;
        justify-content: center;
        gap: 12px;
        padding: 14px 12px;
        border-radius: 16px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }

    .tb-chips {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .tb-chips .bj-chip {
        justify-content: center;
    }
}

/* ===== PERLINDUNGAN HALAMAN DI MODE LATIHAN (sama seperti halaman baca) ===== */
.bj-stage,
.bj-stage *,
.bj-cropbox,
.bj-cropbox * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* gambar tidak bisa disentuh langsung: tidak ada menu "simpan gambar" / seret gambar */
.bj-stage img,
.bj-cropbox img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* tanda air nama pengguna di atas halaman (tidak bisa disentuh) */
.bj-stage::after,
.bj-cropbox::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background-image: var(--page-watermark, none);
    background-repeat: repeat;
}

/* halaman tidak ikut tercetak / disimpan sebagai PDF */
@media print {
    .bj-stage,
    .bj-cropbox {
        display: none !important;
    }
}

/* ===== MASUK DENGAN GOOGLE ===== */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #3c4043;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 14px;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-google svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.btn-google:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.btn-google:disabled {
    opacity: 0.6;
    cursor: default;
}

.gc-email {
    align-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    word-break: break-all;
}

.gc-cancel {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-solid);
    margin-top: 4px;
}

/* ===== LUPA KATA SANDI ===== */
.link-forgot {
    align-self: flex-end;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    margin-top: -4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-solid);
}

.link-forgot:hover {
    text-decoration: underline;
}

.link-forgot:disabled {
    opacity: 0.5;
    cursor: default;
}

.login-info {
    display: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #10b981;
}

/* ===== HALAMAN MASUK: TAMPILAN PROFESIONAL (rapi, tidak terpotong) ===== */

/* Layar dapat digulir penuh; kartu otomatis di tengah bila muat, dan tidak terpotong
 di atas/bawah bila layar pendek (margin:auto = pemusatan yang aman). */
#login-screen,
#google-complete-screen,
#verify-screen {
    justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

#login-screen .login-card,
#google-complete-screen .login-card,
#verify-screen .login-card {
    margin: auto;
    flex-shrink: 0;
    max-width: 400px;
    min-width: 0;
    padding: 30px 24px 22px;
    gap: 12px;
    border-radius: 26px;
    overflow: hidden;
}

.login-card > * {
    min-width: 0;
    max-width: 100%;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.login-logo {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 24px -8px rgba(var(--accent-rgb), 0.55), 0 0 0 1px var(--border-color);
    margin-bottom: 8px;
}

.login-brand h2 {
    font-size: 24px;
    letter-spacing: 1.5px;
    line-height: 1.2;
}

.login-tagline {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
    text-wrap: balance;
}

.login-card .auth-mode-toggle {
    margin: 4px 0 2px;
}

.login-card .auth-mode-btn {
    padding: 10px 8px;
    font-size: 13px;
}

.input-wrap {
    position: relative;
    width: 100%;
}

.input-wrap .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 0.2s ease;
}

.input-wrap:focus-within .input-icon {
    stroke: var(--accent-solid);
}

.input-wrap input {
    padding-left: 44px;
    padding-right: 44px;
}

.input-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
    padding: 0;
}

.input-eye svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.input-eye.on svg {
    stroke: var(--accent-solid);
}

.input-eye:hover svg {
    stroke: var(--accent-solid);
}

.login-card input,
.login-card select {
    min-height: 46px;
    text-overflow: ellipsis;
}

.login-card input::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
    font-weight: 500;
}

.login-card .btn-login {
    min-height: 48px;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

.login-card .link-forgot {
    margin-top: -6px;
}

.login-error,
.login-info {
    overflow-wrap: anywhere;
}

.login-card .install-app-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin: 6px auto 0;
    padding: 9px 16px;
    max-width: 100%;
    border: 1px dashed rgba(var(--accent-rgb), 0.55);
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.07);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    transition: var(--transition);
}

.login-card .install-app-link[style*="display:none"],
.login-card .install-app-link[style*="display: none"] {
    display: none !important;
}

.install-app-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-card .install-app-link:hover {
    background: rgba(var(--accent-rgb), 0.14);
    transform: translateY(-1px);
}

.login-card .info-links-row {
    margin-top: 6px;
    flex-wrap: wrap;
}

.login-card .social-media-row {
    margin-top: 2px;
}

.login-card .app-footer {
    margin-top: 2px;
    line-height: 1.5;
}

@media (max-width: 380px) {
    #login-screen .login-card,
    #google-complete-screen .login-card,
    #verify-screen .login-card {
        padding: 24px 18px 18px;
    }

    .login-brand h2 {
        font-size: 22px;
    }
}

@media (max-height: 620px) {
    .login-logo {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        margin-bottom: 4px;
    }
}

.login-card .btn-google {
    white-space: nowrap;
    font-size: 14px;
}

.login-card .btn-google span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 340px) {
    .login-card .btn-google {
        font-size: 13px;
        gap: 8px;
        padding: 0 10px;
    }

    .login-card .install-app-link {
        font-size: 11.5px;
        padding: 8px 12px;
    }
}

.login-card .install-app-link span,
.login-card .app-footer {
    text-wrap: balance;
}