/* ==========================================================================
   TEMA BARU (2026) — versi 2
   Fokus: banner sapa, tata letak HP yang benar-benar responsif,
   dan sasaran sentuh (tombol) yang nyaman.
   File ini MENIMPA gaya lama (tidak mengubah style.css).
   ========================================================================== */

:root {
    --utama: #4f46e5;
    --utama-2: #7c3aed;
    --utama-3: #db2777;
    --bg: #f5f6fb;
    --kartu: #ffffff;
    --garis: #e6e8f4;
    --teks: #1b2035;
    --teks-lembut: #6b7280;
    --gradasi: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #db2777 100%);
    --bayang: 0 10px 26px rgba(27, 32, 53, 0.09);
    --bayang-kecil: 0 4px 12px rgba(27, 32, 53, 0.07);
    --radius: 20px;
    --tinggi-sentuh: 46px;
}

* { -webkit-tap-highlight-color: transparent; }

body {
    background:
        radial-gradient(900px 320px at 50% -140px, #e9eaff 0%, rgba(233, 234, 255, 0) 70%),
        var(--bg) !important;
    color: var(--teks);
    -webkit-font-smoothing: antialiased;
}

.app-container {
    padding: 0 12px 28px;
    max-width: 720px;
    margin: 0 auto;
}

h1, h2, h3 { letter-spacing: -0.02em; }

/* ==========================================================================
   1. BANNER SAPA (menggantikan header lama)
   ========================================================================== */
.hero-banner {
    position: relative;
    margin: 0 -12px 16px;
    padding: 18px 18px 20px;
    background: var(--gradasi);
    border-radius: 0 0 26px 26px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.28);
    overflow: hidden;
}

.hero-banner::after {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 190px;
    height: 190px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

.hero-baris {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.hero-ikon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 13px;
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.hero-judul {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hero-sapaan {
    font-size: 0.88rem;
    font-weight: 700;
    margin-top: 1px;
}

.hero-pesan {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
    line-height: 1.35;
}

.hero-profil {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   2. TOMBOL: grid responsif + sasaran sentuh besar
   ========================================================================== */
.aksi-grid,
.header-container .aksi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
}

@media (min-width: 480px) {
    .aksi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tombol-aksi,
.action-btn-primary,
.restart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tinggi-sentuh);
    padding: 10px 12px !important;
    border-radius: 15px !important;
    border: 1px solid var(--garis) !important;
    background: #fff !important;
    color: var(--utama) !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    line-height: 1.15;
    text-align: center;
    text-decoration: none !important;
    box-shadow: var(--bayang-kecil) !important;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.tombol-aksi:active,
.action-btn-primary:active,
.restart-btn:active {
    transform: scale(0.955);
    box-shadow: 0 2px 6px rgba(27, 32, 53, 0.12) !important;
}

.tombol-aksi.utama,
.aksi-grid .utama {
    grid-column: 1 / -1;
    background: var(--gradasi) !important;
    background-image: var(--gradasi) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3) !important;
}

@media (min-width: 480px) {
    .tombol-aksi.utama,
    .aksi-grid .utama { grid-column: auto; }
}

.action-btn-primary {
    background: var(--gradasi) !important;
    color: #fff !important;
    border-color: transparent !important;
    width: 100%;
    margin-top: 8px;
}

/* tombol lama lain di halaman */
.quiz-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    border: 1px solid var(--garis) !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--utama) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-decoration: none !important;
    box-shadow: var(--bayang-kecil) !important;
    transition: transform 0.1s ease;
}

.quiz-link-btn:active { transform: scale(0.955); }

.back-calendar-btn {
    min-height: 42px;
    border-radius: 13px !important;
    border: 1px solid var(--garis) !important;
    background: #fff !important;
    color: var(--teks) !important;
    font-weight: 700 !important;
    padding: 9px 13px !important;
    box-shadow: var(--bayang-kecil);
}

.back-calendar-btn:active { transform: scale(0.96); }

/* ==========================================================================
   3. TAB: 5 tab muat sejajar di layar HP (tanpa terpotong)
   ========================================================================== */
.tab-navigation {
    position: sticky;
    top: 6px;
    z-index: 30;
    display: flex;
    gap: 3px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--garis);
    border-radius: 999px;
    box-shadow: var(--bayang-kecil);
    overflow-x: auto;
    scrollbar-width: none;
}

.tab-navigation::-webkit-scrollbar { display: none; }

.tab-btn {
    flex: 1 1 0;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    color: var(--teks-lembut) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: -0.03em;
    padding: 9px 2px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.tab-btn:active { transform: scale(0.95); }

.tab-btn.active {
    background: var(--gradasi) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(79, 70, 229, 0.3);
}

/* ==========================================================================
   4. KARTU
   ========================================================================== */
.calendar-card,
.study-hub-card,
.learning-card,
.completion-card,
.bunpou-header-card,
.kanji-header-card,
.dokkai-header-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--garis) !important;
    box-shadow: var(--bayang) !important;
    background: var(--kartu) !important;
    padding: 16px !important;
    margin-top: 14px;
    animation: naik 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ==========================================================================
   5. CHIP STATISTIK: grid 2 kolom, angka lebih menonjol
   ========================================================================== */
.stats-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-content: stretch;
    margin-bottom: 12px;
}

.stats-bar > * { margin: 0 !important; }

.stat-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
    background: #f2f3ff !important;
    border: 1px solid #e2e3fb !important;
    color: #3730a3 !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-align: center;
    box-shadow: none !important;
}

.stat-badge.jlpt {
    background: #ecfdf3 !important;
    border-color: #cdf3dd !important;
    color: #047857 !important;
}

.stat-badge.target-badge {
    background: #fff7e9 !important;
    border-color: #ffe4b5 !important;
    color: #b45309 !important;
}

/* ==========================================================================
   6. KALENDER
   ========================================================================== */
.day-cell {
    border-radius: 13px !important;
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}

.day-cell:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(27, 32, 53, 0.12); }
.day-cell.level-0 { background: #f0f1f7 !important; }
.day-cell.level-1 { background: #e0e2fe !important; }
.day-cell.level-2 { background: #a9acfb !important; }
.day-cell.level-3 { background: var(--gradasi) !important; }

.day-cell.level-2 .day-number, .day-cell.level-2 .day-time,
.day-cell.level-3 .day-number, .day-cell.level-3 .day-time { color: #fff !important; }

.legend-box { border-radius: 6px !important; }
.legend-box.level-1 { background: #e0e2fe !important; }
.legend-box.level-2 { background: #a9acfb !important; }
.legend-box.level-3 { background: var(--gradasi) !important; }

/* ==========================================================================
   7. KUIS
   ========================================================================== */
.quiz-option-btn {
    min-height: 52px;
    border-radius: 15px !important;
    border: 1px solid var(--garis) !important;
    background: #fff !important;
    color: var(--teks) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    padding: 13px 15px !important;
    text-align: left;
    box-shadow: var(--bayang-kecil);
    transition: transform 0.1s ease, border-color 0.18s ease, background 0.18s ease;
}

.quiz-option-btn:active:not(:disabled) { transform: scale(0.985); }
.quiz-option-btn:hover:not(:disabled) { border-color: #c9cbf8 !important; background: #fbfbff !important; }
.quiz-option-btn.correct { background: #e9fbf1 !important; border-color: #86efac !important; color: #065f46 !important; }
.quiz-option-btn.wrong { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; }

.study-select, select {
    min-height: var(--tinggi-sentuh);
    width: 100%;
    border-radius: 14px !important;
    border: 1px solid var(--garis) !important;
    padding: 11px 14px !important;
    font-weight: 600;
    font-size: 0.9rem;
    background: #fff !important;
    box-shadow: var(--bayang-kecil);
}

.info-bar { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--teks-lembut); font-weight: 600; }

/* ==========================================================================
   8. DAFTAR & PENCARIAN
   ========================================================================== */
.bunpou-search, .kanji-cari {
    min-height: 46px;
    border-radius: 14px !important;
    border: 1px solid var(--garis) !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    box-shadow: var(--bayang-kecil);
}

.bunpou-chip, .kanji-chips button {
    min-height: 36px;
    border-radius: 999px !important;
    border: 1px solid var(--garis) !important;
    background: #fff !important;
    color: var(--teks-lembut) !important;
    font-weight: 700 !important;
    padding: 7px 12px !important;
    transition: transform 0.12s ease;
}

.bunpou-chip.active, .kanji-chips button.active {
    background: var(--gradasi) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 5px 12px rgba(79, 70, 229, 0.28);
}

.bunpou-chip:active { transform: scale(0.96); }

.bunpou-item, .kanji-item {
    border-radius: 16px !important;
    border: 1px solid var(--garis) !important;
    box-shadow: var(--bayang-kecil) !important;
}

/* ==========================================================================
   9. SAPAAN DI DALAM BANNER (dulu kotak terpisah — sekarang menyatu)
   ========================================================================== */
#sapaan { display: block; }

#sapaan .sapaan-emoji { display: none; }        /* emoji dipindah ke ikon banner */
#sapaan .sapaan-nama { font-weight: 800; }
#sapaan .sapaan-pesan { display: block; font-weight: 500; opacity: 0.88; font-size: 0.74rem; }

/* ==========================================================================
   10. TOMBOL DENGAR (🔊)
   ========================================================================== */
.tombol-dengar {
    border: none;
    background: #eef0ff;
    color: #4338ca;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.12s ease, background 0.2s ease;
}

.tombol-dengar:active { transform: scale(0.9); }
.tombol-dengar-kartu { position: absolute; top: 10px; right: 10px; }
.tombol-dengar-kecil { width: 26px; height: 26px; font-size: 0.8rem; margin-left: 6px; vertical-align: middle; }

.info-dengar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    max-width: 92%;
    background: #1b2035;
    color: #fff;
    font-size: 0.82rem;
    padding: 11px 14px;
    border-radius: 13px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    z-index: 1200;
}

/* ==========================================================================
   11. HALAMAN LAIN (kuis/dashboard/review) — header ringkas bergradasi
   ========================================================================== */
.header-container.header-kecil {
    margin: 0 -12px 14px;
    padding: 16px 18px;
    background: var(--gradasi);
    border-radius: 0 0 22px 22px;
    color: #fff;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.25);
}

.header-container.header-kecil .header-title h1,
.header-container.header-kecil h1 {
    font-size: 1.1rem;
    color: #fff;
    background: none;
    -webkit-text-fill-color: #fff;
}

.header-container.header-kecil .calendar-icon { filter: none; }

/* ==========================================================================
   12. AKSESIBILITAS & LAYAR SANGAT KECIL
   ========================================================================== */
@media (max-width: 360px) {
    .tab-btn { font-size: 0.64rem !important; }
    .tombol-aksi { font-size: 0.78rem !important; }
    .stat-badge { font-size: 0.72rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- kontras angka tanggal & sel kalender ---------- */
.day-cell .day-number { color: #3f4757 !important; font-weight: 700; }
.day-cell.level-2 .day-number, .day-cell.level-3 .day-number { color: #fff !important; }
.day-cell { min-height: 46px !important; }

/* chip profil di banner: jangan terlalu lebar */
.hero-profil { max-width: 40%; }


/* ==========================================================================
   DESKTOP (layar ≥ 900px) — tata letak lebar, banyak kolom, efek hover
   ========================================================================== */
@media (min-width: 900px) {
    .app-container {
        max-width: 1080px !important;
        padding: 0 24px 40px;
    }

    /* induk banner jangan flex (bikin banner menyusut) */
    .header-container { display: block !important; width: 100% !important; }

    /* banner jadi kartu membulat (tidak melar sepanjang layar) */
    .hero-banner {
        width: 100% !important;
        margin: 20px 0 18px !important;
        border-radius: 26px !important;
        padding: 26px 30px !important;
    }

    .header-container.header-kecil {
        margin: 20px 0 18px !important;
        border-radius: 22px !important;
        padding: 22px 26px !important;
    }

    .hero-ikon { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 16px; }
    .hero-judul { font-size: 1.35rem; }
    .hero-sapaan { font-size: 1.05rem; }
    .hero-pesan { font-size: 0.86rem; }

    /* statistik: sejajar semua (bukan 2 kolom) */
    .stats-bar,
    .stats-bar.tiga-kolom {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
    .stat-badge { min-height: 46px; font-size: 0.84rem !important; }

    /* tab bar: berhenti menempel, jadi pil besar di tengah */
    .tab-navigation {
        position: static !important;
        max-width: 760px;
        margin: 0 auto 18px;
        padding: 7px;
        border-radius: 18px;
        gap: 5px;
    }
    .tab-btn { font-size: 0.92rem !important; padding: 12px 6px !important; }

    /* daftar materi jadi 2–3 kolom */
    .bunpou-list,
    .kanji-list,
    .dokkai-list,
    .day-vocab-list-container .vocab-list-scroll {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 14px;
        align-content: start;
    }
    .bunpou-item,
    .kanji-item { margin: 0 !important; }

    /* pilihan jawaban kuis: 2 kolom (a b / c d) */
    .quiz-options-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* kartu belajar & kuis jangan terlalu lebar */
    .flashcard-container,
    .quiz-question-container,
    .learning-card { max-width: 780px; margin-left: auto !important; margin-right: auto !important; }

    /* kartu-kartu utama sedikit lebih lega */
    .calendar-card, .study-hub-card, .learning-card, .completion-card { padding: 22px !important; border-radius: 22px !important; }

    h2 { font-size: 1.28rem; }

    /* efek hover khas desktop */
    .tombol-aksi:hover,
    .quiz-link-btn:hover,
    .action-btn-primary:hover,
    .restart-btn:hover,
    .back-calendar-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22) !important;
    }

    .calendar-card:hover,
    .study-hub-card:hover,
    .bunpou-item:hover,
    .kanji-item:hover {
        box-shadow: 0 16px 34px rgba(27, 32, 53, 0.13) !important;
    }

    .day-cell { min-height: 62px !important; }

    /* tombol aksi: 4 sejajar di desktop (semua sama lebar) */
    .aksi-grid,
    .header-container .aksi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .aksi-grid .utama,
    .tombol-aksi.utama {
        grid-column: auto !important;
        background: var(--gradasi) !important;
        color: #fff !important;
        border-color: transparent !important;
    }

    /* kalender: sel jangan melar jadi raksasa */
    .days-grid {
        grid-auto-rows: minmax(52px, auto) !important;
        align-content: start !important;
        gap: 8px !important;
    }
    .day-cell { min-height: 52px !important; max-height: 92px; }

    .day-cell .day-number { font-size: 1.02rem; }
}

/* layar sangat lebar: baris tiga kolom untuk daftar materi */
@media (min-width: 1300px) {
    .app-container { max-width: 1240px !important; }
    .bunpou-list, .kanji-list, .dokkai-list {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

/* ---------- dua tombol penilaian kartu (Ukuran besar, gampang dipencet) ---------- */
.btn-ingat,
.btn-lupa {
    flex: 1 1 0;
    min-height: 52px;
    border: none;
    border-radius: 15px;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(27, 32, 53, 0.16);
    transition: transform 0.1s ease, filter 0.18s ease;
}

.btn-ingat { background: linear-gradient(135deg, #10b981, #059669); }
.btn-lupa { background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; }
.btn-ingat:active, .btn-lupa:active { transform: scale(0.96); }
.btn-ingat:hover, .btn-lupa:hover { filter: brightness(1.05); }

@media (min-width: 900px) {
    .btn-ingat, .btn-lupa { min-height: 58px; font-size: 1rem; }
}

/* ==========================================================================
   TOMBOL NILAI KARTU: selalu dalam jangkauan jempol di HP
   (sebelumnya harus digulir dulu → terasa "tidak responsif")
   ========================================================================== */
@media (max-width: 899px) {
    /* tombol nilai menempel di bawah layar selama sesi (tanpa harus menggulir) */
    #ratingButtons {
        position: sticky;
        bottom: 8px;
        z-index: 40;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(6px);
        border-radius: 18px;
        padding: 8px;
        margin-top: 10px;
        box-shadow: 0 10px 24px rgba(27, 32, 53, 0.14);
    }
    /* kartu dipendekkan supaya kartu + tombol nyaman dalam satu layar */
    .flashcard-container { max-height: 40vh !important; }
    .card-face { padding: 14px !important; }
    .card-hint { margin: 6px 0 2px !important; font-size: 0.76rem !important; }
}

/* ==========================================================================
   MODE BELAJAR: saat sesi kartu aktif, ruang dipakai penuh untuk kartu
   ========================================================================== */
body.sesi-aktif .hero-banner,
body.sesi-aktif .aksi-grid { display: none !important; }

@media (max-width: 899px) {
    body.sesi-aktif .tab-navigation { display: none !important; }
    body.sesi-aktif .app-container { padding-top: 10px !important; }
}

/* ---------- pemilih level di form daftar ---------- */
.n3-level-wrap { margin: 4px 0 2px; }
.n3-level-judul { font-size: .85rem; color: #475569; margin-bottom: 8px; font-weight: 600; }
.n3-level-judul span { font-weight: 400; color: #94a3b8; }
.n3-level { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.n3-level .n3-lv {
    background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 14px; padding: 12px 6px;
    cursor: pointer; font-family: inherit; color: #334155; display: flex; flex-direction: column;
    align-items: center; gap: 2px; min-height: 62px;
}
.n3-level .n3-lv b { font-size: 1.05rem; }
.n3-level .n3-lv span { font-size: .68rem; color: #94a3b8; }
.n3-level .n3-lv.aktif {
    background: linear-gradient(135deg, #4f46e5, #a21caf); border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px rgba(79, 70, 229, .25);
}
.n3-level .n3-lv.aktif span { color: rgba(255, 255, 255, .85); }
.n3-level .n3-lv:active { transform: scale(.97); }

/* ---------- chip level & pemilih level (level.js) ---------- */
.chip-level { margin-left: auto; align-self: flex-start; background: rgba(255,255,255,.22); color: #fff;
    border: 0; border-radius: 99px; padding: 7px 12px; font-weight: 800; font-size: .78rem; cursor: pointer;
    white-space: nowrap; font-family: inherit; }
.chip-level span { font-weight: 500; opacity: .8; font-size: .7rem; }
.chip-level:active { transform: scale(.96); }
#pilihLevelBox { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center;
    justify-content: center; z-index: 400; padding: 20px; }
.pl-kartu { background: #fff; border-radius: 22px; padding: 22px 20px; width: 100%; max-width: 360px;
    box-shadow: 0 24px 60px rgba(15,23,42,.35); }
.pl-judul { font-weight: 800; font-size: 1.05rem; color: #1f2740; margin-bottom: 4px; }
.pl-sub { font-size: .84rem; color: #64748b; margin-bottom: 14px; }
.pl-opsi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.pl-lv { border: 2px solid #e2e8f0; background: #f8fafc; border-radius: 14px; min-height: 60px;
    font-weight: 800; font-size: 1.05rem; color: #334155; cursor: pointer; font-family: inherit; }
.pl-lv.aktif { background: linear-gradient(135deg,#4f46e5,#a21caf); color: #fff; border-color: transparent; }
.pl-lv:active { transform: scale(.97); }
.pl-batal { width: 100%; min-height: 44px; border: 0; border-radius: 13px; background: #f1f5f9; color: #475569;
    font-weight: 700; cursor: pointer; font-family: inherit; }

/* ==========================================================================
   AUDIT UI/UX (20 Sep 2026) — perbaikan kontras WCAG + focus ring + font 12px
   Tema sebelumnya: tombol hijau/oranye dengan teks putih hanya 2,1–3,6:1 (gagal
   ambang 4,5:1) dan teks bantuan pakai #94a3b8 (2,56:1). Blok ini bisa dicabut
   dengan menghapus barisnya kalau tidak diinginkan.
   ========================================================================== */
:focus-visible { outline: 3px solid #4f46e5 !important; outline-offset: 2px; border-radius: 6px; }

/* tombol hijau/oranye: gradasi digelapkan supaya teks putih lulus 4,5:1 */
.btn-ingat, .kf-ingat {
    background: linear-gradient(135deg, #047857, #065f46) !important;
}
.btn-lupa, .kf-lupa {
    background: linear-gradient(135deg, #b45309, #9a3412) !important;
}
/* ajakan utama tetap identitas indigo (lulus 6,3:1) */
.tombol-utama-lebar, .aksi-grid .utama, .tw-tombol button.utama, .pl-lv.aktif, .n3-level .n3-lv.aktif {
    background: linear-gradient(135deg, #4f46e5, #a21caf) !important;
}
/* tautan & teks bantuan: naikkan kontras */
.sapaan-kotak a, .rv-sub a, a { }
.hero-pesan, .kf-hint, .kf-maju, .tw-kredit, .card-hint, .rv-soal, .rv-badge,
.rv-label, .rv-sub, .kunci-catatan, #rvRingkas, .pl-sub {
    color: #64748b !important;
}
.rv-soal, .kf-hint small, .tw-kredit { font-size: 12px !important; }
.kf-contoh span { color: #64748b !important; font-size: 12px !important; }

/* ==========================================================================
   AUDIT 2 (20 Sep 2026, halaman setelah login) — teks abu-abu muda #94a3b8 /
   #cbd5e1 / #a5b4fc hanya 1,5–2,6:1 di atas putih (gagal WCAG 4,5:1).
   Semua diganti #64748b = 4,76:1. Selector diambil dari style.css + inline di
   HTML; inline ditangkap lewat selector atribut. Cabut blok ini untuk kembali.
   ========================================================================== */
.bunpou-empty, .bunpou-ex-label, .card-back .back-example-label, .card-hint,
.day-cell.level-0 .day-time, .dokkai-kosong, .kanji-kosong, .kanji-legenda,
.kanji-meta, .n3-gate-note, .vocab-number, #previewVocabList rt,
.back-example-jp rt, .rv-back rt { color: #64748b !important; }

[style*="color:#94a3b8"], [style*="color: #94a3b8"],
[style*="color:#cbd5e1"], [style*="color: #cbd5e1"],
[style*="color:#a5b4fc"], [style*="color: #a5b4fc"] { color: #64748b !important; }

/* ==========================================================================
   AUDIT 3 (20 Sep 2026) — sisa temuan setelah audit-2:
   · dashboard `p.catatan`: #94a3b8 di atas PUTIH = 2,56:1 (103 temuan)
   · tombol "Keluar": putih di #ef4444 = 3,76:1
   · tombol "Tampilkan semua": putih di #f59e0b = 2,15:1
   · badge "Selesai": #64748b di kartu abu = 4,2:1
   ========================================================================== */
.catatan, p.catatan, .dash-panel p, .dash-card p, .dashboard p { color: #475569 !important; }

[style*="background-color:#ef4444"], [style*="background-color: #ef4444"],
[style*="background:#ef4444"], [style*="background: #ef4444"] { background-color: #b91c1c !important; }

.kunci-catatan button { background: #b45309 !important; }
.rv-badge { color: #ffffff !important; background: #475569 !important; }

/* AUDIT 4 (20 Sep 2026): sisa terakhir — <small> abu #94a3b8 di putih (97 di dashboard)
   dan tombol nilai lama .btn-hard/.btn-medium/.btn-easy (putih di #ef4444 = 3,76:1) */
small { color: #475569 !important; }
.btn-hard, .btn-easy { background: linear-gradient(135deg, #b91c1c, #991b1b) !important; color: #fff !important; }
.btn-medium { background: linear-gradient(135deg, #b45309, #92400e) !important; color: #fff !important; }


/* ==========================================================================
   DASHBOARD — tata letak DESKTOP (bento 6 kolom). Hanya berlaku di
   dashboard.html (body.dash). Di HP tetap menumpuk ke bawah seperti semula.
   ========================================================================== */
body.dash .wrap { max-width: 1200px; }

@media (min-width: 900px) {
  body.dash .wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    align-items: start;
  }
  body.dash .topbar   { grid-column: 1 / -1; margin-bottom: 0;
                        display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  body.dash #kartuAku { grid-column: span 4; }
  body.dash #gridStat { grid-column: span 2; }
  body.dash #kartuImpor, body.dash #kartuNilai, body.dash #kartuKode { grid-column: span 2; }
  body.dash #papan    { grid-column: 1 / -1; }
  body.dash #pesanMuat{ grid-column: 1 / -1; }

  /* kartu profil jadi "hero" berwarna */
  body.dash #kartuAku {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
    border: none; color: #fff;
    box-shadow: 0 18px 40px rgba(79, 70, 229, .28);
    min-height: 232px;
  }
  body.dash #kartuAku * { color: #fff; }
  body.dash #kartuAku .bar-luar { background: rgba(255,255,255,.28); }
  body.dash #kartuAku .bar-dalam { background: #fff; }
  body.dash #kartuAku .avatar { box-shadow: 0 0 0 4px rgba(255,255,255,.35); }

  /* statistik: 2 x 2 di kolom kanan, angka besar */
  body.dash #gridStat {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    background: transparent; border: none; padding: 0; box-shadow: none;
  }
  body.dash #gridStat .kotak {
    background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid #4F46E5;
    border-radius: 16px; padding: 14px 12px; text-align: left;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
    transition: transform .16s ease, box-shadow .16s ease;
  }
  body.dash #gridStat .kotak:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(79,70,229,.14); }
  body.dash #gridStat .angka { font-size: 1.65rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  body.dash #gridStat .label { font-size: .74rem; }

  /* kartu alat: lebih ringkas, ikon sejajar judul */
  body.dash #kartuImpor, body.dash #kartuNilai, body.dash #kartuKode {
    min-height: 150px; background: #fff; border: 1px solid #E2E8F0;
    border-radius: 16px; padding: 16px;
    transition: transform .16s ease, box-shadow .16s ease;
  }
  body.dash #kartuImpor:hover, body.dash #kartuNilai:hover, body.dash #kartuKode:hover {
    transform: translateY(-3px); box-shadow: 0 12px 24px rgba(79,70,229,.13);
  }
  body.dash .kode-besar { font-size: 1.5rem; letter-spacing: 2px; }

  /* papan peringkat: 3 teratas dapat penanda */
  body.dash #papan .nl-row { border-radius: 10px; padding: 6px 10px;
                             display: flex; gap: 10px; align-items: center; }
  body.dash #papan .nl-row .nm { flex: 1; }
  body.dash #papan .nl-row .pos { min-width: 1.4em; }
  body.dash #papan .nl-row:nth-child(1) { background: linear-gradient(90deg,#FEF3C7,rgba(254,243,199,0)); }
  body.dash #papan .nl-row:nth-child(2) { background: linear-gradient(90deg,#E2E8F0,rgba(226,232,240,0)); }
  body.dash #papan .nl-row:nth-child(3) { background: linear-gradient(90deg,#FDE4D3,rgba(253,228,211,0)); }
  body.dash #papan .nl-row:nth-child(1) .pos::after { content: " 🥇"; }
  body.dash #papan .nl-row:nth-child(2) .pos::after { content: " 🥈"; }
  body.dash #papan .nl-row:nth-child(3) .pos::after { content: " 🥉"; }
}

@media (min-width: 1300px) {
  body.dash .wrap { max-width: 1320px; gap: 22px; }
}

/* ============================================================
   PAPAN PERINGKAT — VERSI BESAR (2). Berlaku HP & desktop.
   Ditulis paling akhir supaya menang urutan.
   ============================================================ */
/* #papan ada DI DALAM kotak .card, jadi yang harus dilebarkan = pembungkusnya */
body.dash #kartuPapan { grid-column: 1 / -1; width: 100%; }
body.dash #papan {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    padding: 26px 24px 30px;
}
body.dash #papan h2 { font-size: 1.5rem; margin-bottom: 6px; }
body.dash #papan .nl-row {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 20px; margin-bottom: 12px;
    font-size: 1.15rem; line-height: 1.4;
    border-radius: 18px; background: #F8FAFC;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
}
body.dash #papan .nl-row .pos {
    flex: 0 0 auto; min-width: 2.4em; height: 2.4em;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.2rem; color: #475569;
    background: #fff; border: 3px solid #E2E8F0; border-radius: 999px;
}
body.dash #papan .nl-row .nm { flex: 1 1 auto; font-weight: 800; font-size: 1.15rem; }
body.dash #papan .nl-row .avatar { width: 46px; height: 46px; }
/* tiga teratas makin menonjol */
body.dash #papan .nl-row:nth-child(1), body.dash #papan .nl-row:nth-child(2), body.dash #papan .nl-row:nth-child(3) {
    padding: 24px 20px; font-size: 1.3rem; margin-bottom: 14px;
}
body.dash #papan .nl-row:nth-child(1) .pos { background:#FEF3C7; border-color:#FCD34D; color:#92400E; font-size:1.5rem; }
body.dash #papan .nl-row:nth-child(2) .pos { background:#E2E8F0; border-color:#CBD5E1; color:#334155; font-size:1.4rem; }
body.dash #papan .nl-row:nth-child(3) .pos { background:#FDE4D3; border-color:#FDBA74; color:#9A3412; font-size:1.4rem; }
body.dash #papan .nl-row:nth-child(1) .nm, body.dash #papan .nl-row:nth-child(2) .nm, body.dash #papan .nl-row:nth-child(3) .nm { font-size: 1.3rem; }

@media (max-width: 899px) {
    body.dash #papan { padding: 18px 16px 22px; }
    body.dash #papan h2 { font-size: 1.3rem; }
    body.dash #papan .nl-row { padding: 16px 14px; font-size: 1.05rem; gap: 12px; margin-bottom: 9px; }
    body.dash #papan .nl-row .pos { min-width: 2.1em; height: 2.1em; font-size: 1.05rem; }
    body.dash #papan .nl-row .nm { font-size: 1.05rem; }
    body.dash #papan .nl-row .avatar { width: 36px; height: 36px; }
    body.dash #papan .nl-row:nth-child(1), body.dash #papan .nl-row:nth-child(2), body.dash #papan .nl-row:nth-child(3) { padding: 18px 14px; }
    body.dash #papan .nl-row:nth-child(1) .nm, body.dash #papan .nl-row:nth-child(2) .nm, body.dash #papan .nl-row:nth-child(3) .nm { font-size: 1.15rem; }
}

/* ===== POPUP BUNPOU ===== */
.popup-bunpou-latar { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex;
    align-items: center; justify-content: center; padding: 16px; z-index: 9999; }
.popup-bunpou-kotak { background: #fff; border-radius: 18px; max-width: 560px; width: 100%;
    max-height: 86vh; overflow: auto; padding: 20px 20px 16px; position: relative;
    box-shadow: 0 20px 50px rgba(15,23,42,.3); }
.popup-bunpou-x { position: absolute; top: 10px; right: 12px; border: 0; background: #f1f5f9;
    border-radius: 999px; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; }
.popup-bunpou-isi .bunpou-pattern { font-size: 1.5rem; font-weight: 800; color: #4f46e5; }
.popup-bunpou-isi .bunpou-rumus { font-size: 1.05rem; }
.popup-bunpou-isi .bunpou-meaning { font-size: 1.05rem; }
.popup-bunpou-isi .bunpou-jp, .popup-bunpou-isi .bunpou-example { font-size: 1.05rem; line-height: 1.6; }
.popup-bunpou-tutup { display: block; width: 100%; margin-top: 14px; padding: 13px;
    border: 0; border-radius: 12px; background: #4f46e5; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.popup-bunpou-note { margin-top: 14px; background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 12px; padding: 12px 14px; }
.popup-bunpou-note-judul { font-weight: 800; color: #4f46e5; margin-bottom: 6px; font-size: .95rem; }
.popup-bunpou-note-isi { font-size: 1rem; line-height: 1.7; color: #334155; }

/* ===== kata: bacaan + tombol かな/漢字 ===== */
.bacaan-kata { font-size: .68em; color: #64748b; font-weight: 500; }
/* tombol 漢字/かな: posisi mengambang */
.tombol-kana { position: fixed; right: 14px; bottom: 84px; z-index: 900; }
/* warna tombol — bisa dipakai kelas mana pun (chip, tombol biasa, dll) */
.tombol-kana, .tombol-warna {
    background: #4F46E5; color: #fff; border: 0; border-radius: 999px;
    padding: 9px 14px; font-size: .82rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(79,70,229,.32);
}
.tombol-kana:active, .tombol-warna:active { transform: scale(.96); }

/* ===== tab 動詞: kartu buka-tutup ===== */
.doushi-baris { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.doushi-baris .bunpou-pattern { flex: 0 0 auto; }
.doushi-hint { flex: 1 1 auto; color: #475569; font-size: .85rem; line-height: 1.45; }
.doushi-panah { flex: 0 0 auto; color: #4F46E5; font-weight: 700; }
.doushi-isi { margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.doushi-cara, .doushi-contoh { margin-top: 8px; }
.doushi-cara-judul { font-size: .78rem; font-weight: 800; color: #475569; margin-bottom: 4px; }
.doushi-cara-baris { font-size: .84rem; color: #334155; line-height: 1.6; margin-bottom: 6px; }
.doushi-contoh-baris b { color: #4F46E5; }
.doushi-contoh-baris span { color: #64748b; font-size: .82rem; }
.doushi-catatan { margin-top: 8px; font-size: .82rem; color: #9a3412; background: #fff7ed; border-radius: 10px; padding: 8px 10px; }
.doushi-tabel { margin-top: 6px; }
.doushi-tabel-baris { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted #eef2f7; font-size: .86rem; }
.doushi-tabel-nama { color: #64748b; }
.doushi-tabel-baris b { color: #0f172a; }
.doushi-chips { margin-top: 10px; }

/* ===== tab 動詞: judul golongan ===== */
.doushi-gol-header { margin: 14px 0 6px; padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff; }
.doushi-gol-header b { display: block; color: #3730a3; font-size: .92rem; }
.doushi-gol-ciri { display: block; color: #475569; font-size: .78rem; line-height: 1.5; margin-top: 3px; }
.doushi-gol-jumlah { display: inline-block; margin-top: 6px; font-size: .74rem; font-weight: 700;
    color: #4F46E5; background: #fff; border-radius: 999px; padding: 2px 8px; }
.doushi-ringkas { margin-top: 14px; text-align: center; font-size: .82rem; color: #475569; }

/* ===== tab 動詞: versi HP (desktop tidak diubah) ===== */
.doushi-cari { display: none; }
.doushi-gol-isi.tersembunyi { display: none; }
.doushi-gol-bisa-dilipat { cursor: pointer; }
.doushi-gol-panah { float: right; color: #4F46E5; font-weight: 700; }

@media (max-width: 700px) {
  /* kotak pencarian hanya di HP */
  .doushi-cari { display: block; width: 100%; box-sizing: border-box; margin: 8px 0 2px;
      padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 12px; font-size: .9rem; background: #fff; }
  /* 19 bentuk jadi chip 2 kolom, teks arti disembunyikan -> scroll jauh lebih pendek */
  .doushi-accordion { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .doushi-accordion .doushi-buka { padding: 9px 10px; }
  .doushi-accordion .doushi-hint { display: none; }
  .doushi-accordion .doushi-baris { gap: 6px; }
  .doushi-accordion .bunpou-pattern { font-size: .9rem; }
  .doushi-accordion .doushi-buka.buka-lebar { grid-column: 1 / -1; }
  /* judul golongan dipadatkan */
  .doushi-gol-header { padding: 8px 10px; margin: 10px 0 4px; }
  .doushi-gol-ciri { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .doushi-listkata .doushi-item, .doushi-listkata .doushi-buka { padding: 9px 10px; }
}

/* ===== chip tingkat (N5/N4/N3) di tab 動詞 ===== */
.doushi-chips .rv-chip { opacity: .6; }
.doushi-chips .rv-chip.aktif { opacity: 1; box-shadow: 0 0 0 3px rgba(79,70,229,.22), 0 6px 16px rgba(79,70,229,.35); }

/* ===== BOTTOM NAVIGATION (khusus HP; desktop tetap pakai tab atas) ===== */
.nav-bawah { display: none; }

@media (max-width: 700px) {
  /* tab lama disembunyikan di HP, gelanggangnya diganti nav bawah */
  .tab-navigation { display: none !important; }
  .nav-bawah {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 950;
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(79,70,229,.14); border-radius: 22px;
    box-shadow: 0 12px 30px rgba(79,70,229,.20);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: center; gap: 4px;
  }
  body { padding-bottom: 92px; }
  .nav-bawah .nb-item {
    flex: 1 1 0; min-width: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px; border-radius: 16px; position: relative;
    transition: background .22s ease, transform .18s ease;
  }
  .nav-bawah .nb-kanji {
    font-size: 1.32rem; line-height: 1; font-weight: 800; color: #94a3b8;
    transition: color .22s ease, transform .22s ease;
  }
  .nav-bawah .nb-teks {
    font-size: .62rem; font-weight: 800; letter-spacing: .01em; color: #94a3b8;
    max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color .22s ease;
  }
  .nav-bawah .nb-item.aktif { background: linear-gradient(160deg, #EEF2FF, #F5F3FF); }
  .nav-bawah .nb-item.aktif .nb-kanji { color: #4F46E5; transform: translateY(-2px) scale(1.12); }
  .nav-bawah .nb-item.aktif .nb-teks { color: #4F46E5; }
  .nav-bawah .nb-item.aktif::after {
    content: ""; position: absolute; bottom: 3px; width: 16px; height: 3px;
    border-radius: 99px; background: #F8B2B2;
  }
  .nav-bawah .nb-item:active { transform: scale(.95); }
}

@media (max-width: 700px) {
  .tombol-kana { bottom: 106px; }          /* beri jarak dari bottom navigation */
  .tombol-kalender {
    display: flex; position: fixed; top: 12px; right: 12px; z-index: 940;
    align-items: center; gap: 4px; border: 1px solid rgba(79,70,229,.16);
    background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    color: #4F46E5; border-radius: 999px; padding: 8px 13px;
    font-size: .78rem; font-weight: 800; box-shadow: 0 8px 20px rgba(79,70,229,.18);
  }
}
.tombol-kalender { display: none; }

/* ===== kartu sapaan bentuk BENTO (opsi C) =====
   Kartu ini duduk di dalam header ungu, jadi kotak besarnya pakai gaya kaca
   (bukan ungu lagi) supaya batasnya kelihatan. */
.hero-sapaan .sapaan-bento { display: block; width: 100%; }
.sb-atas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.sb-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 9px; }
.sb-kotak { position: relative; overflow: hidden; border-radius: 16px; padding: 12px;
    background: #fff; border: 1px solid #e6ebf3; }
.sb-besar { grid-row: span 2; color: #fff;
    background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.12));
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px rgba(30,20,80,.18);
    backdrop-filter: blur(3px); }
.sb-judul { font-size: 11px; font-weight: 800; color: #64748b; letter-spacing: .04em; }
.sb-besar .sb-judul { color: rgba(255,255,255,.85); }
.sb-angka { font-size: 40px; font-weight: 800; line-height: 1; margin-top: 6px; letter-spacing: -.03em; }
.sb-angka2 { font-size: 19px; font-weight: 800; color: #0f172a; margin-top: 2px; }
.sb-ket { display: block; font-size: 11.5px; font-weight: 700; opacity: .9; margin-top: 4px; }
.sb-kanji { position: absolute; right: 6px; bottom: -10px; font-size: 50px; font-weight: 800;
    color: rgba(79,70,229,.08); pointer-events: none; }
.sb-besar .sb-kanji { color: rgba(255,255,255,.15); bottom: -14px; font-size: 62px; }
@media (max-width: 700px) {
  .sb-angka { font-size: 34px; }
  .sb-kanji { font-size: 42px; }
  .sb-besar .sb-kanji { font-size: 54px; }
}

/* ===== baris aksi dibuat ringkas: chip bisa di-swipe (HP), rapi di desktop ===== */
/* Catatan: aturan lama memakai ".header-container .aksi-grid" (lebih spesifik),
   jadi yang ini pun harus sama supaya menang. */
.aksi-grid, .header-container .aksi-grid {
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; align-items: center;
    overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none; }
.aksi-grid::-webkit-scrollbar { display: none; }
.aksi-grid .tombol-aksi, .header-container .aksi-grid .tombol-aksi {
    flex: 0 0 auto !important; width: auto !important; white-space: nowrap;
    border-radius: 999px; padding: 9px 14px; font-size: .82rem; margin: 0; }
.aksi-grid .tombol-aksi.utama, .header-container .aksi-grid .tombol-aksi.utama {
    padding: 10px 18px; font-size: .88rem; }
.aksi-grid .tombol-kalender, .header-container .aksi-grid .tombol-kalender {
    background: #fff; color: #4F46E5; border: 1px solid rgba(79,70,229,.22);
    font-weight: 800; box-shadow: 0 4px 12px rgba(79,70,229,.10); }

@media (min-width: 701px) {
  .aksi-grid, .header-container .aksi-grid { flex-wrap: wrap !important; overflow: visible; }
}

/* tombol 漢字/かな mengambang: dimatikan (diminta リズ) */
.tombol-kana { display: none !important; }
@media (max-width: 700px) {
  .tombol-kalender { position: static !important; inset: auto !important; }
}

/* ===== kartu sapaan model B: strip 7 hari ===== */
.sb-pil { font-size: 11.5px; font-weight: 800; color: #4F46E5; background: #fff;
    border-radius: 999px; padding: 5px 11px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(79,70,229,.16); }
.sb-strip { display: flex; gap: 6px; margin-top: 12px; }
.sb-hari { flex: 1; text-align: center; }
.sb-hari span { display: block; font-size: 10px; font-weight: 800;
    color: rgba(255,255,255,.75); margin-bottom: 5px; letter-spacing: .06em; }
.hero-banner .sb-hari span { color: rgba(255,255,255,.75); }
.sb-dot { height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #94a3b8; background: rgba(255,255,255,.55); }
.sb-dot.isi { background: #fff; color: #4F46E5; }
.sb-dot.ini { background: #F8B2B2; color: #7a2e5e; box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.sb-kaki { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 11px;
    font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); }
.sb-kaki b { color: #fff; }
@media (max-width: 700px) {
  .sb-dot { height: 30px; font-size: 12px; }
  .sb-hari span { font-size: 9.5px; }
}

/* ===== banner dipadatkan (mengurangi tinggi, isi tetap sama) ===== */
.hero-banner { padding: 20px 24px; }
.sb-strip { margin-top: 9px; }
.sb-dot { height: 30px; }
.sb-kaki { margin-top: 9px; font-size: 11.5px; }
@media (max-width: 700px) {
  .hero-banner { padding: 15px 17px; }
  .hero-judul { font-size: 1.02rem; }
  .sb-atas { margin-bottom: 8px; }
  .sb-strip { margin-top: 8px; gap: 5px; }
  .sb-dot { height: 27px; font-size: 12px; border-radius: 9px; }
  .sb-hari span { font-size: 9px; margin-bottom: 4px; }
  .sb-kaki { margin-top: 8px; font-size: 11px; }
  .sb-pil { font-size: 11px; padding: 4px 9px; }
}

/* ===== banner: ukuran disesuaikan (mengikuti contoh リズ) ===== */
.sb-atas { display: flex; justify-content: space-between; align-items: center;
    flex-wrap: nowrap; gap: 10px; margin-bottom: 10px; }
.sb-atas .sapaan-nama { font-size: 1.08rem; line-height: 1.2; }
.sb-pil { flex: 0 0 auto; }
.sb-strip { gap: 6px; margin-top: 4px; }
.sb-hari span { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; margin-bottom: 5px; }
.sb-dot { height: 34px; border-radius: 10px; font-size: 14px; }
.sb-dot.isi { background: #fff; color: #4F46E5; }
.sb-dot.ini { background: #F8B2B2; color: #7a2e5e; box-shadow: none;
    outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; }
.sb-kaki { margin-top: 10px; font-size: 12.5px; }
@media (max-width: 700px) {
  .sb-atas .sapaan-nama { font-size: 1.02rem; }
  .sb-strip { gap: 5px; }
  .sb-dot { height: 30px; font-size: 13px; border-radius: 9px; }
  .sb-hari span { font-size: 9.5px; }
  .sb-kaki { font-size: 11.5px; }
}

/* ===== SELARAS DENGAN LANDING OPSI 1 (PRO) — token saja, struktur tidak diubah ===== */
:root {
    --utama: #4f46e5;          /* indigo, sama dengan landing */
    --utama-2: #7c3aed;
    --utama-3: #db2777;
    --bg: #eef2ff;             /* latar biru muda, sama dengan landing */
    --garis: #c7d2fe;          /* garis kartu, sama dengan landing */
    --teks: #312e81;           /* teks indigo gelap */
    --teks-lembut: #475569;
    --bayang: 0 1px 2px rgba(49,46,129,.06), 0 8px 24px rgba(49,46,129,.08);
    --bayang-kecil: 0 1px 2px rgba(49,46,129,.06), 0 4px 14px rgba(49,46,129,.07);
    --radius: 16px;
}
/* ponytail: hanya token yang disamakan. Kalau nanti ada bagian yang warnanya masih kolot,
   cukup tambahkan aturan di bawah blok ini — jangan bongkar 1.200 baris CSS di atasnya. */

/* ===== DOKKAI: saklar ON/OFF + bacaan & soal lebih rapi ===== */
.saklar-baris { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.saklar-label { font-size: .86rem; font-weight: 600; color: var(--teks-lembut); }
.saklar { position: relative; width: 58px; height: 32px; border: 0; padding: 0; border-radius: 999px;
    background: #cbd5e1; cursor: pointer; flex: 0 0 auto;
    transition: background .2s ease; -webkit-tap-highlight-color: transparent; }
.saklar:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.saklar.nyala { background: #7c3aed; }
.saklar-knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.28); transition: transform .2s ease; }
.saklar.nyala .saklar-knob { transform: translateX(26px); }
.saklar-ikon { position: absolute; top: 0; height: 32px; display: grid; place-items: center;
    font-size: 13px; font-weight: 800; line-height: 1; transition: opacity .2s ease; }
.saklar-x { right: 9px; color: #64748b; }        /* ✕ saat mati */
.saklar-c { left: 9px; color: #fff; }            /* ✓ saat hidup */
.saklar .saklar-c { opacity: 0; } .saklar.nyala .saklar-c { opacity: 1; }
.saklar .saklar-x { opacity: 1; } .saklar.nyala .saklar-x { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .saklar, .saklar-knob, .saklar-ikon { transition: none !important; }
}
/* bacaan: indent baris pertama ala Jepang, jarak baris lega, lebar nyaman dibaca */
.dokkai-teks { max-width: 60ch; margin: 0 auto; padding: 0 !important; }
.dokkai-teks p { text-indent: 1em !important; margin: 0 0 .85em !important; padding: 0 !important;
    line-height: 2.05 !important; }
.dokkai-judul { font-size: 1.28rem; padding-bottom: 8px; border-bottom: 1px solid var(--garis); margin-bottom: 6px; }
.dokkai-bacaan .catatan { margin-bottom: 14px; }
.dokkai-kotoba { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--garis); }
/* soal: tiap soal dipisah jelas, pilihan jadi baris yang enak dipencet */
.dokkai-soal-item { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--garis); }
.dokkai-soal-item:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }
.dokkai-pertanyaan { font-size: 1.03rem; line-height: 1.95; margin-bottom: 10px; }
.dokkai-soal-item .dokkai-opsi { display: flex; align-items: flex-start; gap: 10px; width: 100%;
    text-align: left; padding: 12px 14px; margin: 7px 0; border: 1px solid var(--garis); border-radius: 10px;
    background: var(--kartu); line-height: 1.7; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dokkai-soal-item .dokkai-opsi:hover { border-color: #7c3aed; }
.dokkai-soal-item .dokkai-opsi .huruf { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; background: #f1eafe; color: #6d28d9; font-weight: 800; font-size: .82rem; }
.dokkai-soal-item .dokkai-opsi.dipilih { border-color: #7c3aed; background: #f7f2ff; }
.dokkai-bahas { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #f8f6ff;
    border: 1px solid #e5dbff; line-height: 1.8; }
@media (max-width: 700px) {
  .dokkai-teks p { line-height: 1.95 !important; }
  .dokkai-soal-item .dokkai-opsi { padding: 11px 12px; }
  .saklar { width: 54px; height: 30px; }
  .saklar-knob { width: 22px; height: 22px; }
  .saklar.nyala .saklar-knob { transform: translateX(24px); }
}

/* ===== DOKKAI: kartu kepala, kartu bacaan & judul — disamakan dengan bagian Kanji =====
   Pakai variabel tema (--kartu/--garis/--teks) jadi ikut berubah baik di tema V1 maupun V2. */
.dokkai-header, .kartu.dokkai-header, .dokkai-header-card {
    background: var(--kartu) !important; border: 1px solid var(--garis) !important;
    border-radius: var(--radius) !important; padding: 18px !important;
    box-shadow: var(--bayang) !important; margin-bottom: 14px !important;
}
.dokkai-header h2 { margin: 0 0 4px !important; font-size: 1.15rem !important; color: var(--teks) !important; }
.dokkai-header .catatan { margin: 0 0 14px !important; font-size: .85rem !important; color: var(--teks-lembut) !important; }
.dokkai-tombol-baris { gap: 14px !important; row-gap: 6px !important; padding-top: 4px; }
.dokkai-ukuran { margin-left: auto; display: inline-flex; gap: 4px; }
.dokkai-ukuran button { min-width: 36px; height: 34px; border-radius: 9px; border: 1px solid var(--garis);
    background: var(--kartu); color: var(--teks-lembut); font-weight: 700; cursor: pointer; }
.dokkai-ukuran button.aktif { background: var(--utama); border-color: var(--utama); color: #fff; }

/* chip hari: dibiarkan memakai gaya dasar (sudah berupa bulatan angka seperti contoh リズ) */

/* kartu bacaan */
.dokkai-bacaan { background: var(--kartu) !important; border: 1px solid var(--garis) !important;
    border-radius: var(--radius) !important; padding: 22px 24px !important; box-shadow: var(--bayang) !important; }
/* judul cerita */
.dokkai-judul { font-size: 1.4rem !important; font-weight: 800 !important; color: var(--teks) !important;
    line-height: 1.5 !important; margin: 0 0 8px !important; padding-bottom: 12px !important;
    border-bottom: 2px solid var(--garis) !important; }
.dokkai-bacaan .catatan { font-size: .86rem !important; color: var(--teks-lembut) !important; margin: 0 0 18px !important; }
.dokkai-kotoba .label-kecil { display: block; margin-bottom: 8px; }
.dokkai-kata { background: var(--bg) !important; border: 1px solid var(--garis) !important;
    border-radius: 999px !important; padding: 6px 12px !important; font-size: .84rem !important; }
/* kartu soal */
.dokkai-soal { background: var(--kartu) !important; border: 1px solid var(--garis) !important;
    border-radius: var(--radius) !important; padding: 22px 24px !important; box-shadow: var(--bayang) !important; margin-top: 14px !important; }
.dokkai-soal h3 { margin: 0 0 6px !important; font-size: 1.1rem !important; color: var(--teks) !important; }
@media (max-width: 700px) {
  .dokkai-bacaan, .dokkai-soal { padding: 17px 16px !important; }
  .dokkai-judul { font-size: 1.2rem !important; }
  .dokkai-header { padding: 15px !important; }
  .dokkai-ukuran button { min-width: 32px; height: 32px; }
}

/* ===== tanda "Hari ini sudah selesai" (tab Belajar) ===== */
.tanda-selesai { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px;
    padding: 14px 16px; border-radius: var(--radius);
    background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important;
    box-shadow: var(--bayang-kecil); animation: naik 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tanda-selesai .ts-ikon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: #047857; color: #fff; font-weight: 800; font-size: .95rem; }
.tanda-selesai .ts-teks { display: block; line-height: 1.5; }
.tanda-selesai .ts-teks b { display: block; color: #065f46 !important; font-size: 1rem; }
.tanda-selesai .ts-teks span { display: block; color: #047857 !important; font-size: .85rem; }
@media (max-width: 700px) {
  .tanda-selesai { padding: 12px 13px; gap: 10px; }
  .tanda-selesai .ts-teks b { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .tanda-selesai { animation: none !important; } }

/* ===== KARTU TUGAS HARIAN (di bawah kalender) ===== */
.tugas-hari { display: grid; gap: 10px; margin: 14px 0 4px; }
.tugas { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border-radius: 16px; background: var(--kartu); border: 1px solid var(--garis);
    box-shadow: var(--bayang-kecil); position: relative; overflow: hidden;
    animation: naik 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tugas::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--utama); }
.tugas-ikon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.05rem; background: var(--bg); border: 1px solid var(--garis); }
.tugas-teks { flex: 1; min-width: 0; display: block; line-height: 1.45; }
.tugas-teks b { display: block; font-size: .98rem; color: var(--teks); }
.tugas-teks span { display: block; font-size: .84rem; color: var(--teks-lembut); margin-top: 2px; }
.tugas-tanda { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: .9rem; margin-top: 2px; }
/* selesai: latar hijau + centang */
.tugas.beres { background: #ecfdf5; border-color: #a7f3d0; }
.tugas.beres::before { background: #047857; }
.tugas.beres .tugas-teks b { color: #065f46; }
.tugas.beres .tugas-teks span { color: #047857; }
.tugas.beres .tugas-ikon { background: #d1fae5; border-color: #a7f3d0; }
.tugas.beres .tugas-tanda { background: #047857; color: #fff; }
/* belum selesai: nuansa merah + tanda seru */
.tugas.belum { background: #fff5f5; border-color: #fecaca; }
.tugas.belum::before { background: #dc2626; }
.tugas.belum .tugas-teks b { color: #991b1b; }
.tugas.belum .tugas-teks span { color: #b91c1c; }
.tugas.belum .tugas-ikon { background: #fee2e2; border-color: #fecaca; }
.tugas.belum .tugas-tanda { background: #dc2626; color: #fff; }
/* kartu semangat: nada hangat, bukan tugas */
.tugas.semangat { background: #fffbeb; border-color: #fde68a; }
.tugas.semangat::before { background: #d97706; }
.tugas.semangat .tugas-teks b { color: #92400e; }
.tugas.semangat .tugas-teks span { color: #b45309; }
.tugas.semangat .tugas-ikon { background: #fef3c7; border-color: #fde68a; }
@media (max-width: 700px) {
  .tugas { padding: 12px 13px; gap: 10px; }
  .tugas-ikon { flex: 0 0 34px; width: 34px; height: 34px; font-size: .98rem; }
  .tugas-teks b { font-size: .93rem; }
  .tugas-teks span { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .tugas { animation: none !important; } }

/* ====== VERSI HP: gaya kartu ala aplikasi kalender iOS (mengikuti contoh リズ) ====== */
@media (max-width: 700px) {
  /* latar & sudut lebih lembut */
  body { background: #f2f1ee !important; }
  .calendar-card, .tugas { border: 0 !important; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; }

  /* kalender: sel hari jadi bulat lembut, hari ini jadi kartu penuh */
  .days-grid { gap: 6px !important; }
  .days-grid .day-cell { border: 0 !important; border-radius: 14px !important;
      background: #fff !important; min-height: 58px; padding: 6px 4px !important; }
  .days-grid .day-cell .day-number { font-size: .95rem !important; font-weight: 700 !important; }
  .days-grid .day-cell .day-time { font-size: .68rem !important; }
  .days-grid .day-cell.is-today, .days-grid .day-cell.today {
      background: var(--utama) !important; box-shadow: 0 6px 14px rgba(79,70,229,.28) !important; }
  .legend-boxes { border: 0 !important; background: transparent !important; }

  /* judul kartu tugas: label kecil + judul tebal + baris meta */
  .tugas-hari { gap: 12px !important; margin-top: 16px !important; }
  .tugas-hari::before { content: "Hari ini"; display: block; text-align: center; font-size: .8rem;
      color: #8a8f98; letter-spacing: .02em; margin: 2px 0 4px; }
  .tugas { display: block !important; padding: 14px 16px !important; border-radius: 20px !important;
      background: #fff !important; position: relative; }
  .tugas::before { display: none !important; }
  .tugas .tugas-label { display: inline-block; font-size: .72rem; font-weight: 600; color: #6b7280;
      background: #f1f2f4; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
  .tugas .tugas-ikon { display: none !important; }
  .tugas .tugas-teks { display: block !important; }
  .tugas .tugas-teks b { font-size: 1.02rem !important; font-weight: 700 !important; letter-spacing: -.01em; }
  .tugas .tugas-teks span { font-size: .84rem !important; }
  .tugas .tugas-tanda { position: absolute; right: 14px; top: 14px; }
  /* keadaan selesai / belum: warna tetap jadi penanda */
  .tugas.beres { background: #f2fbf5 !important; }
  .tugas.beres .tugas-label { background: #dcfce7; color: #047857; }
  .tugas.belum { background: #fff6f6 !important; }
  .tugas.belum .tugas-label { background: #fee2e2; color: #b91c1c; }
  .tugas.semangat { background: #fffaf0 !important; }
  .tugas.semangat .tugas-label { background: #fef3c7; color: #92400e; }

  /* tab bawah: pil mengambang ala aplikasi iOS */
  .nav-bawah { left: 12px !important; right: 12px !important; bottom: 10px !important;
      border-radius: 22px !important; border: 0 !important; background: #fff !important;
      box-shadow: 0 10px 30px rgba(15,23,42,.16) !important; }
  .nb-item.aktif { border-radius: 16px !important; }
}

/* ===== STRIP HARI (versi HP) — seperti contoh リズ ===== */
.strip-hari { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 12px 6px 14px;
    margin-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--radius); }
.strip-hari::-webkit-scrollbar { display: none; }
.sh-item { flex: 0 0 auto; width: 52px; padding: 6px 0 8px; border: 0; background: transparent;
    border-radius: 16px; cursor: pointer; display: grid; gap: 2px; justify-items: center;
    color: var(--teks); font-family: inherit; transition: background .15s ease; }
.sh-item .sh-hari { font-size: .68rem; font-weight: 600; color: var(--teks-lembut); letter-spacing: .01em; }
.sh-item .sh-tgl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.sh-item:hover { background: var(--bg); }
.sh-item.ini { background: var(--utama); box-shadow: 0 6px 14px rgba(79,70,229,.28); }
.sh-item.ini .sh-hari { color: rgba(255,255,255,.85); }
.sh-item.ini .sh-tgl { color: #fff; }
.sh-panah { flex: 0 0 26px; text-align: center; color: var(--utama); font-weight: 800; font-size: 1.1rem; opacity: .8; }
@media (min-width: 701px) { .strip-hari { display: none; } }   /* hanya untuk HP */
@media (prefers-reduced-motion: reduce) { .sh-item { transition: none !important; } }

/* ===== HP vs DESKTOP: kalender bulan penuh disembunyikan di HP (cukup strip hari),
   dan strip hari disembunyikan di desktop (sudah diatur di blok strip). Statistik tetap tampil. ===== */
@media (max-width: 700px) {
  #calendarSection .month-nav,
  #calendarSection h2,
  #calendarSection .calendar-subtitle,
  #calendarSection .weekdays-grid,
  #calendarSection .days-grid,
  #calendarSection .calendar-legend { display: none !important; }
}

/* ===== STRIP HARI (HP) versi BESAR: angka besar, nama hari + menit belajar hari itu ===== */
@media (max-width: 700px) {
  .strip-hari { gap: 10px !important; padding: 14px 12px 16px !important; border-radius: 22px !important; }
  .sh-item { width: 72px !important; padding: 12px 0 10px !important; border-radius: 20px !important;
      background: var(--bg) !important; gap: 1px !important; }
  .sh-item .sh-tgl { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -.03em; order: 1; line-height: 1.1; }
  .sh-item .sh-hari { font-size: .74rem !important; font-weight: 600 !important; order: 2; }
  .sh-item .sh-menit { font-size: .7rem !important; font-weight: 700 !important; order: 3; margin-top: 3px;
      color: var(--utama) !important; }
  .sh-item.ini { background: var(--utama) !important; box-shadow: 0 10px 22px rgba(79,70,229,.32) !important; }
  .sh-item.ini .sh-tgl, .sh-item.ini .sh-hari { color: #fff !important; }
  .sh-item.ini .sh-menit { color: rgba(255,255,255,.92) !important; }
  .sh-panah { flex: 0 0 20px !important; }
}

/* ====== STRIP HARI: animasi (entrance berjenjang, denyut hari ini, bar kemajuan) ====== */
@media (max-width: 700px) {
  .strip-hari { position: relative; overflow-x: auto; overflow-y: hidden; }
  .sh-item { position: relative; overflow: hidden; will-change: transform;
      transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, background .22s ease; }
  .sh-item:active { transform: scale(.94); }
  .sh-item .sh-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px;
      border-radius: 99px; background: rgba(79,70,229,.16); overflow: hidden; }
  .sh-item .sh-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
      background: linear-gradient(90deg, #6366f1, #a855f7); }
  .sh-item.ini .sh-bar { background: rgba(255,255,255,.28); }
  .sh-item.ini .sh-bar i { background: #fff; }
  .sh-item .sh-kilau { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); }

  @media (prefers-reduced-motion: no-preference) {
    .sh-item { animation: shMasuk .52s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i,0) * 55ms); }
    .sh-item.ini { animation: shMasuk .52s cubic-bezier(.2,.8,.2,1) both, shDenyut 3s ease-in-out 1.1s infinite; }
    .sh-item .sh-bar i { animation: shIsi .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i,0) * 55ms + .35s); }
    .sh-item.ini .sh-tgl { animation: shPop .6s cubic-bezier(.2,1.4,.4,1) .55s both; }
    .sh-item.ini .sh-kilau { animation: shKilau 4.6s ease-in-out 1.1s infinite; }
    .sh-item.ada .sh-menit::before { content: "✦"; margin-right: 3px; opacity: .75; }
    .sh-item:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 18px rgba(79,70,229,.18); }
    @media (hover: none) { .sh-item:hover { transform: none; box-shadow: none; } }
  }
}

@keyframes shMasuk { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes shPop { 0% { transform: scale(.6); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes shDenyut { 0%, 100% { box-shadow: 0 10px 22px rgba(79,70,229,.32); } 50% { box-shadow: 0 14px 30px rgba(79,70,229,.5); } }
@keyframes shKilau { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: .75; } 30% { opacity: 0; transform: translateX(120%); } 100% { opacity: 0; transform: translateX(120%); } }
@keyframes shIsi { from { width: 0; } to { width: calc(var(--p,0) * 1%); } }
.sh-item .sh-bar i { width: calc(var(--p,0) * 1%); }   /* keadaan akhir (kalau animasi dimatikan) */

/* ====== STRIP HARI: sentuhan akhir (geser berhenti rapi + latar bergradasi) ====== */
@media (max-width: 700px) {
  .strip-hari { scroll-snap-type: x proximity;
      background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%) !important; }
  .sh-item { scroll-snap-align: center; }
  .sh-item.ini::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), transparent 60%); }
  .sh-item.ada:not(.ini) .sh-tgl { color: var(--utama); }
}

/* ====== MENU MELAYANG (tombol aksi dipindah ke sudut kanan bawah) ====== */
.fab-aksi {
    position: fixed; right: 16px; bottom: 24px; z-index: 60;
    width: 58px; height: 58px; border: 0; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; padding: 0;
    font: inherit; font-size: 1.5rem; line-height: 1; color: #fff;
    background: linear-gradient(140deg, #6366f1, #4338ca);
    box-shadow: 0 10px 24px rgba(79,70,229,.38), 0 2px 6px rgba(15,23,42,.18);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
    touch-action: manipulation;
}
.fab-aksi .fab-silang { display: none; font-size: 1.1rem; }
.fab-aksi .fab-tanda { display: block; }
.fab-aksi.terbuka .fab-tanda { display: none; }
.fab-aksi.terbuka .fab-silang { display: block; }
.fab-aksi:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 30px rgba(79,70,229,.48); }
.fab-aksi:active { transform: scale(.93); }
.fab-aksi:focus-visible { outline: 3px solid #312e81; outline-offset: 3px; }

/* panel menu (popover bawaan browser → tutup otomatis saat klik di luar / tekan Esc) */
.aksi-grid[popover]:popover-open,
.header-container .aksi-grid[popover]:popover-open {
    position: fixed !important; inset: auto 16px 94px auto !important; margin: 0 !important;
    width: min(76vw, 270px) !important; max-height: 70vh; overflow: auto;
    display: grid !important; grid-template-columns: 1fr !important;
    gap: 6px !important; padding: 10px !important;
    border: 1px solid var(--garis) !important; border-radius: 20px !important;
    background: var(--kartu) !important;
    box-shadow: 0 18px 40px rgba(15,23,42,.22) !important;
}
.aksi-grid[popover] .tombol-aksi,
.header-container .aksi-grid[popover] .tombol-aksi {
    grid-column: auto !important; width: 100%; text-align: left; justify-content: flex-start;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px !important; border-radius: 14px !important;
    font-size: .95rem !important; font-weight: 600;
    background: var(--bg) !important; border: 1px solid transparent !important;
    color: var(--teks) !important; box-shadow: none !important;
}
.aksi-grid[popover] .tombol-aksi::after {
    content: "›"; margin-left: auto; font-size: 1.15rem; font-weight: 700; color: var(--utama); opacity: .55;
}
.aksi-grid[popover] .tombol-aksi:hover {
    background: #fff !important; border-color: var(--garis) !important;
    transform: translateX(3px); box-shadow: 0 6px 14px rgba(79,70,229,.12) !important;
}
.aksi-grid[popover] .tombol-aksi:active { transform: scale(.98); }
.aksi-grid[popover] .tombol-aksi.utama,
.aksi-grid[popover] .aksi-grid .utama {
    background: linear-gradient(120deg, #6366f1, #4338ca) !important;
    color: #fff !important; font-weight: 700;
}
.aksi-grid[popover] .tombol-aksi.utama::after { color: #fff; opacity: .85; }

@keyframes fabApung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fabMuncul { from { opacity: 0; transform: translateY(16px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes menuMasuk { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes barangMasuk { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    .fab-aksi { animation: fabMuncul .5s cubic-bezier(.2,.9,.3,1.2) .2s both, fabApung 3.8s ease-in-out 1s infinite; }
    .fab-aksi.terbuka { animation: none; transform: none; }
    .aksi-grid[popover]:popover-open { animation: menuMasuk .3s cubic-bezier(.2,.8,.2,1); }
    .aksi-grid[popover]:popover-open .tombol-aksi {
        animation: barangMasuk .34s cubic-bezier(.2,.8,.2,1) both;
        animation-delay: calc(var(--i,0) * 45ms + 40ms);
    }
    .aksi-grid[popover] .tombol-aksi { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
}
@media (max-width: 700px) {
    .fab-aksi { right: 14px; bottom: 88px; }         /* di atas tab bawah */
    .aksi-grid[popover]:popover-open, .header-container .aksi-grid[popover]:popover-open { inset: auto 14px 152px auto !important; }
}

/* ===== STRIP HARI sekarang DI BAWAH kartu kalender: jaraknya dibalik ===== */
.strip-hari { margin: 12px 0 0 !important; }

/* Panah penting: tutup rapat saat menu belum dibuka.
   (aturan tema lain memakai display:grid !important, jadi UA yang menyembunyikan popover kalah) */
.aksi-grid[popover]:not(:popover-open),
.header-container .aksi-grid[popover]:not(:popover-open) { display: none !important; }

/* ====== TAB BAWAH (HP): animasi penuh ====== */
@media (max-width: 700px) {
  .nav-bawah { isolation: isolate; }
  /* pil penanda yang meluncur mengikuti tab aktif (menggantikan latar tombol) */
  .nav-bawah .nb-pil {
    position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0; pointer-events: none;
    width: var(--w, 0px); transform: translateX(var(--x, 0px));
    border-radius: 18px; background: linear-gradient(160deg, #EEF2FF, #F5F3FF);
    box-shadow: 0 6px 16px rgba(79,70,229,.18);
    transition: transform .44s cubic-bezier(.34,1.28,.42,1), width .44s cubic-bezier(.34,1.28,.42,1);
  }
  /* tombolnya sendiri jadi transparan — latarnya dari pil, biar bisa meluncur */
  .nav-bawah .nb-item,
  .nav-bawah .nb-item.aktif {
    background: transparent !important; z-index: 1; overflow: hidden;
    transition: transform .18s ease;
  }
  .nav-bawah .nb-item .nb-kanji { transition: color .26s ease, transform .3s cubic-bezier(.34,1.4,.42,1), filter .26s ease; }
  .nav-bawah .nb-item.aktif .nb-kanji {
    transform: translateY(-3px) scale(1.18); filter: drop-shadow(0 4px 8px rgba(79,70,229,.38));
  }
  .nav-bawah .nb-item.aktif .nb-teks { transform: translateY(-1px); }
  .nav-bawah .nb-item .nb-teks { transition: color .26s ease, transform .26s ease; }
  /* garis kecil di bawah tab aktif: tumbuh saat dipilih */
  .nav-bawah .nb-item.aktif::after { background: linear-gradient(90deg, #F8B2B2, #4F46E5); }
  /* riak saat dipencet */
  .nav-bawah .nb-ombak {
    position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: rgba(79,70,229,.32); pointer-events: none; z-index: 0;
    animation: nbOmbak .5s ease-out forwards;
  }
  .nav-bawah .nb-item:active { transform: scale(.94); }
}

@keyframes nbNaik { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nbItemMasuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nbPop { 0% { transform: translateY(-3px) scale(1); } 38% { transform: translateY(-5px) scale(1.34); } 100% { transform: translateY(-3px) scale(1.18); } }
@keyframes nbGaris { from { width: 3px; opacity: 0; } to { width: 16px; opacity: 1; } }
@keyframes nbNafas { 0%, 100% { box-shadow: 0 6px 16px rgba(79,70,229,.18); } 50% { box-shadow: 0 10px 24px rgba(79,70,229,.34); } }
@keyframes nbOmbak { from { transform: scale(.4); opacity: .55; } to { transform: scale(10); opacity: 0; } }

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .nav-bawah { animation: nbNaik .5s cubic-bezier(.2,.9,.3,1.1) both; }
  .nav-bawah .nb-item { animation: nbItemMasuk .42s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--i,0) * 55ms + .12s); }
  .nav-bawah .nb-pil { animation: nbNafas 4s ease-in-out 1s infinite; }
  .nav-bawah .nb-item.pop .nb-kanji { animation: nbPop .46s cubic-bezier(.3,1.4,.4,1) both; }
  .nav-bawah .nb-item.aktif::after { animation: nbGaris .4s cubic-bezier(.3,1.4,.4,1) both; }
}

/* ====== POPUP KELUAR BELAJAR (#customStudyExitModal) — gaya sendiri, tidak polos lagi ======
   Catatan: gaya aslinya ditulis inline di HTML, jadi di sini perlu !important supaya menang. */
#customStudyExitModal {
    position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    display: none; box-sizing: border-box; padding: 18px;
    justify-content: center !important; align-items: center !important;
    background: radial-gradient(120% 90% at 50% 0%, rgba(79,70,229,.42), rgba(15,23,42,.74)) !important;
    backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15);
    z-index: 1200 !important; opacity: 0; transition: opacity .26s ease;
}
#customStudyExitModal.buka { opacity: 1; }
#customStudyExitModal > div {
    position: relative; width: 100% !important; max-width: 340px !important;
    box-sizing: border-box; padding: 26px 22px 20px !important;
    border-radius: 24px !important; text-align: center !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%) !important;
    border: 1px solid rgba(79,70,229,.16);
    box-shadow: 0 24px 60px rgba(15,23,42,.35), 0 2px 8px rgba(15,23,42,.12) !important;
    transform: translateY(16px) scale(.94); opacity: 0;
    transition: transform .34s cubic-bezier(.3,1.4,.4,1), opacity .26s ease;
}
#customStudyExitModal.buka > div { transform: none; opacity: 1; }
/* bulatan ikon yang menempel di bibir atas kartu */
#customStudyExitModal > div::before {
    content: "👋"; display: grid; place-items: center;
    width: 56px; height: 56px; margin: -54px auto 12px; border-radius: 50%;
    font-size: 1.65rem; border: 4px solid #fff;
    background: linear-gradient(140deg, #6366f1, #4338ca);
    box-shadow: 0 12px 24px rgba(79,70,229,.42);
}
#customStudyExitModal h3 { margin: 0 0 8px !important; font-size: 1.22rem !important; color: #312e81 !important; letter-spacing: -.01em; }
#customStudyExitModal p { margin: 0 0 18px !important; color: #64748b !important; font-size: .94rem !important; line-height: 1.55; }
#customStudyExitModal > div > div { display: flex !important; gap: 10px !important; }
#cancelStudyExitBtn, #confirmStudyExitBtn {
    flex: 1 !important; padding: 13px 14px !important; border: 0 !important; border-radius: 14px !important;
    font: inherit; font-size: .95rem !important; font-weight: 700 !important; cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
#cancelStudyExitBtn { background: #eef2ff !important; color: #4338ca !important; box-shadow: inset 0 0 0 1px rgba(79,70,229,.2) !important; }
#confirmStudyExitBtn { background: linear-gradient(140deg, #f87171, #dc2626) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(220,38,38,.32) !important; }
#cancelStudyExitBtn:hover, #confirmStudyExitBtn:hover { transform: translateY(-2px); filter: brightness(1.04); }
#cancelStudyExitBtn:active, #confirmStudyExitBtn:active { transform: scale(.96); }
#cancelStudyExitBtn:focus-visible, #confirmStudyExitBtn:focus-visible { outline: 3px solid #312e81; outline-offset: 2px; }

@keyframes keluarLambaikan { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
@keyframes keluarTombolMasuk { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    #customStudyExitModal.buka > div::before { animation: keluarLambaikan 1.5s ease-in-out .15s 2; }
    #customStudyExitModal.buka > div > div > button { animation: keluarTombolMasuk .42s cubic-bezier(.2,.9,.3,1.2) both; }
    #customStudyExitModal.buka #confirmStudyExitBtn { animation-delay: .08s; }
}

/* ====== JUDUL MENU SESI (#studySessionMenuTitle) — tidak polos lagi ====== */
#studySessionMenuTitle { display: grid; gap: 3px; margin: 0; line-height: 1.25; text-align: left; }
#studySessionMenuTitle .ss-hari {
    justify-self: start; font-size: .66rem; font-weight: 800; letter-spacing: .14em;
    color: #4f46e5; background: linear-gradient(160deg, #eef2ff, #f5f3ff);
    border: 1px solid rgba(79,70,229,.22); border-radius: 999px; padding: 3px 10px;
}
#studySessionMenuTitle .ss-utama {
    font-size: 1.14rem; font-weight: 800; letter-spacing: -.01em; color: #312e81;
    background: linear-gradient(100deg, #312e81, #4f46e5 70%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
#studySessionMenuTitle .ss-rincian { font-size: .77rem; font-weight: 600; color: #64748b; }
#studySessionMenuTitle.ss-beres .ss-hari { color: #047857; background: #dcfce7; border-color: rgba(4,120,87,.28); }
#studySessionMenuTitle.ss-beres .ss-rincian { color: #047857; }
#studySessionMenuTitle.ss-beres .ss-rincian::before { content: "✓ "; font-weight: 800; }

@keyframes ssMasuk { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    #studySessionMenuTitle.ss-masuk > span { animation: ssMasuk .46s cubic-bezier(.2,.9,.3,1.15) both; }
    #studySessionMenuTitle.ss-masuk > span:nth-child(2) { animation-delay: .07s; }
    #studySessionMenuTitle.ss-masuk > span:nth-child(3) { animation-delay: .14s; }
}

/* ====== PILIHAN HARI (.study-select) — tidak polos lagi ====== */
select.study-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    width: 100%; box-sizing: border-box;
    padding: 13px 46px 13px 15px !important;
    border: 1px solid var(--garis) !important; border-radius: 16px !important;
    font: inherit; font-size: .95rem !important; font-weight: 700 !important;
    color: #312e81 !important; cursor: pointer;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 18px 18px !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.06);
    transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
select.study-select:hover { border-color: rgba(79,70,229,.4) !important; box-shadow: 0 8px 18px rgba(79,70,229,.16); transform: translateY(-1px); }
select.study-select:focus-visible { outline: 3px solid rgba(79,70,229,.35); outline-offset: 2px; border-color: #4f46e5 !important; }
select.study-select:disabled { opacity: .55; cursor: not-allowed; }
select.study-select option { color: #1e293b; font-weight: 600; background: #fff; }
select.study-select option:disabled { color: #94a3b8; }

@keyframes ssDenyut { 0% { box-shadow: 0 0 0 0 rgba(79,70,229,.45); transform: translateY(-1px) scale(1.012); }
                     100% { box-shadow: 0 6px 16px rgba(79,70,229,.12); transform: none; } }
select.study-select.pilih { animation: ssDenyut .5s ease-out; }

/* ====== KARTU TUGAS: baris "ada N hari ... belum selesai" ====== */
.tugas-hari .tugas-sisa {
    display: inline-block; margin-top: 7px; padding: 4px 10px;
    font-size: .76rem !important; font-weight: 700 !important; border-radius: 999px;
    background: #eef2f7; color: #475569;
}
.tugas-hari .tugas-sisa.ada { background: #fee2e2; color: #b91c1c; }
.tugas-hari .tugas.beres .tugas-sisa:not(.ada) { background: #dcfce7; color: #047857; }
.tugas-hari .tugas.beres .tugas-sisa.ada { background: #fee2e2; color: #b91c1c; }   /* peringatan tetap merah walau kartunya hijau */
@media (prefers-reduced-motion: no-preference) {
    .tugas-hari .tugas-sisa.ada { animation: sisaDenyut 2.6s ease-in-out infinite; }
}
@keyframes sisaDenyut { 0%, 100% { transform: none; } 50% { transform: translateY(-1px) scale(1.015); } }

/* ======================================================================
   DESKTOP: header & navigasi dipadatkan (minta リズ) — tab jadi pil meluncur,
   tombol aksi jadi baris kecil tembus pandang. HP tidak tersentuh.
   ====================================================================== */
@media (min-width: 701px) {
  /* --- banner atas dibuat setipis mungkin --- */
  .header-container .hero-banner { padding: 14px 18px !important; border-radius: 18px !important; }
  .header-container .hero-baris { gap: 12px !important; }
  .header-container .hero-ikon { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; border-radius: 12px !important; }
  .header-container .hero-judul { font-size: 1.02rem !important; }
  .header-container #sapaan, .header-container .hero-sapaan { font-size: .8rem !important; }
  .header-container .hero-profil { font-size: .78rem !important; padding: 5px 10px !important; }

  /* --- tombol aksi: baris kecil tembus pandang, rata kanan --- */
  .header-container .aksi-grid,
  .aksi-grid {
    display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important;
    gap: 6px !important; margin: 10px 0 2px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    grid-template-columns: none !important;
  }
  .aksi-grid .tombol-aksi,
  .header-container .aksi-grid .tombol-aksi {
    flex: 0 0 auto !important; width: auto !important;
    min-height: 0 !important; height: auto !important;          /* desktop tidak perlu target sentuh 44px */
    line-height: 1.2 !important;
    padding: 7px 13px !important; border-radius: 999px !important;
    background: transparent !important; border: 1px solid transparent !important;
    color: #4F46E5 !important; font-size: .82rem !important; font-weight: 700 !important;
    box-shadow: none !important;
    transition: background .18s ease, transform .18s ease, color .18s ease;
  }
  .aksi-grid .tombol-aksi:hover { background: #E8EBFF !important; transform: translateY(-1px); }
  .aksi-grid .tombol-aksi:active { transform: scale(.97); }
  .aksi-grid .tombol-aksi.utama,
  .aksi-grid .tombol-aksi.utama:hover {
    background: linear-gradient(140deg, #6366F1, #4338CA) !important; color: #fff !important;
    box-shadow: 0 6px 14px rgba(79,70,229,.28) !important;
  }
  /* tombol Kalender ganda: sudah ada di tab, jadi disembunyikan di desktop (pakai #id biar tak terkalahkan gaya inline) */
  #tombolKalender, .aksi-grid .tombol-kalender { display: none !important; }

  /* --- tab: satu bar segmen, pil ungu meluncur ke tab aktif --- */
  .tab-navigation {
    position: relative !important; display: flex !important; width: 100% !important; max-width: 100% !important;
    justify-self: stretch !important; align-self: stretch !important; gap: 4px !important;
    padding: 5px !important; margin: 12px 0 14px !important;
    background: #fff !important; border: 1px solid rgba(79,70,229,.14) !important;
    border-radius: 18px !important; box-shadow: 0 6px 18px rgba(79,70,229,.10) !important;
    border-bottom: 1px solid rgba(79,70,229,.14) !important;
  }
  .tab-navigation .tn-pil {
    position: absolute; top: 5px; bottom: 5px; left: 0; z-index: 0; pointer-events: none;
    width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius: 13px;
    background: linear-gradient(140deg, #6366F1, #4338CA);
    box-shadow: 0 8px 18px rgba(79,70,229,.35);
    transition: transform .42s cubic-bezier(.34,1.28,.42,1), width .42s cubic-bezier(.34,1.28,.42,1);
  }
  .tab-navigation .tab-btn {
    position: relative; z-index: 1; flex: 0 1 auto; min-width: 0;   /* lebar sesuai isinya → label tidak kepotong */
    border: 0 !important; background: transparent !important; cursor: pointer;
    padding: 10px 11px !important; border-radius: 13px !important;
    font: inherit; font-size: .86rem !important; font-weight: 700 !important; color: #64748B !important;
    box-shadow: none !important; white-space: nowrap;
    transition: color .22s ease, transform .18s ease, background .22s ease;
  }
  .tab-navigation .tab-btn:hover { background: #EEF2FF !important; color: #4338CA !important; }
  .tab-navigation .tab-btn:active { transform: scale(.97); }
  .tab-navigation .tab-btn.active,
  .tab-navigation .tab-btn.active:hover { background: transparent !important; color: #fff !important; }
  .tab-navigation .tab-btn:focus-visible { outline: 3px solid rgba(79,70,229,.4); outline-offset: 2px; }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .tab-navigation { animation: tnMuncul .45s cubic-bezier(.2,.9,.3,1.1) both; }
  .tab-navigation .tab-btn { animation: tnItem .4s cubic-bezier(.2,.9,.3,1.1) both; }
  .tab-navigation .tab-btn:nth-child(2) { animation-delay: .04s; }
  .tab-navigation .tab-btn:nth-child(3) { animation-delay: .08s; }
  .tab-navigation .tab-btn:nth-child(4) { animation-delay: .12s; }
  .tab-navigation .tab-btn:nth-child(5) { animation-delay: .16s; }
  .tab-navigation .tab-btn:nth-child(6) { animation-delay: .2s; }
  .tab-navigation .tab-btn:nth-child(7) { animation-delay: .24s; }
}
@keyframes tnMuncul { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tnItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ====== KAKI HALAMAN (pengganti dua tautan di atas; kredit tetap bisa dijangkau) ====== */
/* kaki halaman sekarang DI DALAM .app-container → cukup lebar penuh, rata dengan konten di atasnya */
.kaki-app { display: block !important; width: auto !important; max-width: none !important;
    box-sizing: border-box !important; margin: 26px 0 8px !important; padding: 14px 0 0 !important;
    border-top: 1px solid var(--garis); }
.kaki-app .ka-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; justify-content: space-between;
    font-size: .76rem; color: #7C86A8; }
.kaki-app .ka-merek { font-weight: 800; color: #4F46E5; letter-spacing: .01em; }
.kaki-app .ka-sumber { flex: 1 1 auto; min-width: 0; }
.kaki-app .ka-taut { color: #4F46E5; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kaki-app .ka-taut:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .kaki-app { margin: 22px 0 100px !important; padding: 12px 0 0 !important; }
    .kaki-app .ka-isi { font-size: .72rem !important; gap: 4px 10px !important; }
}

/* ====== DESKTOP: tombol alat masuk ke bar tab yang sama (satu baris saja) ====== */
@media (min-width: 701px) {
  .aksi-grid.aksi-di-tab {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    gap: 6px !important; margin: 10px 0 2px !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  .aksi-di-tab .tombol-aksi,
  .header-container .aksi-di-tab .tombol-aksi {
    width: 34px !important; height: 34px !important; min-height: 0 !important;
    flex: 0 0 auto !important; padding: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 50% !important; border: 1px solid rgba(79,70,229,.14) !important;
    background: #F7F8FF !important; color: #4F46E5 !important;
    font-size: .95rem !important; line-height: 1 !important;
    box-shadow: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .aksi-di-tab .tombol-aksi:hover { background: #E8EBFF !important; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(79,70,229,.18) !important; }
  .aksi-di-tab .tombol-aksi:active { transform: scale(.94); }
  .aksi-di-tab .tombol-aksi:focus-visible { outline: 3px solid rgba(79,70,229,.4); outline-offset: 2px; }
  .aksi-di-tab .tombol-aksi.utama,
  .aksi-di-tab .tombol-aksi.utama:hover {
    background: linear-gradient(140deg, #6366F1, #4338CA) !important; color: #fff !important; border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(79,70,229,.32) !important;
  }
  .aksi-di-tab .tombol-aksi.utama:hover { transform: translateY(-2px); }
  /* labelnya disembunyikan (ikon saja) → rapi & tetap muat di layar sempit;
     nama lengkap tetap ada lewat aria-label + title (muncul saat di-hover) */
  .aksi-di-tab .ta-teks { display: none !important; }   /* ikon saja; nama lengkap lewat title/aria-label */
  .aksi-di-tab .ta-ikon { font-size: .95rem !important; line-height: 1; }
}

/* ====== RAIL IKON KIRI (DESKTOP) — opsi G pilihan リズ ====== */
.rail-alat { display: none; }
@media (min-width: 701px) {
  body.ada-rail { padding-left: 84px; }
  .rail-alat {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: 84px; padding: 16px 0 18px; overflow-y: auto;
    background: #fff; border-right: 1px solid rgba(79,70,229,.12);
    box-shadow: 6px 0 22px rgba(79,70,229,.06);
  }
  .rail-alat .rail-logo {
    width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
    font-size: 1.2rem; color: #fff; margin-bottom: 4px;
    background: linear-gradient(140deg, #6366F1, #4338CA);
    box-shadow: 0 10px 22px rgba(79,70,229,.34);
  }
  .rail-alat .rail-garis { width: 34px; height: 1px; background: rgba(79,70,229,.16); margin: 2px 0 6px; }

  .rail-alat .aksi-grid.aksi-di-rail {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    gap: 6px !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    width: 100% !important;
  }
  .rail-alat .tombol-aksi,
  .header-container .rail-alat .tombol-aksi {
    width: 64px !important; min-height: 0 !important; height: auto !important;
    padding: 9px 4px 8px !important; border-radius: 16px !important;
    display: grid !important; justify-items: center; gap: 2px;
    background: transparent !important; border: 1px solid transparent !important;
    color: #4F46E5 !important; box-shadow: none !important; text-align: center;
    transition: background .2s ease, transform .2s cubic-bezier(.2,.9,.3,1.2), border-color .2s ease;
  }
  .rail-alat .tombol-aksi .ta-ikon { font-size: 1.25rem !important; line-height: 1; }
  .rail-alat .tombol-aksi .ta-teks { display: block !important; font-size: .62rem !important; font-weight: 800 !important;
    color: #8B93C7 !important; letter-spacing: .01em; }
  .rail-alat .tombol-aksi:hover { background: #EEF2FF !important; border-color: rgba(79,70,229,.16) !important; transform: translateX(3px); }
  .rail-alat .tombol-aksi:active { transform: scale(.95); }
  .rail-alat .tombol-aksi:focus-visible { outline: 3px solid rgba(79,70,229,.4); outline-offset: 2px; }
  .rail-alat .tombol-aksi.utama,
  .rail-alat .tombol-aksi.utama:hover {
    background: linear-gradient(140deg, #6366F1, #4338CA) !important; border-color: transparent !important;
    box-shadow: 0 10px 20px rgba(79,70,229,.3) !important;
  }
  .rail-alat .tombol-aksi.utama .ta-teks { color: #E0E7FF !important; }
  .rail-alat .tombol-aksi.utama:hover { transform: translateX(3px) scale(1.02); }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .rail-alat .rail-logo { animation: railMasuk .5s cubic-bezier(.2,.9,.3,1.2) both; }
  .rail-alat .tombol-aksi { animation: railMasuk .45s cubic-bezier(.2,.9,.3,1.2) both; }
  .rail-alat .tombol-aksi:nth-child(2) { animation-delay: .06s; }
  .rail-alat .tombol-aksi:nth-child(3) { animation-delay: .12s; }
  .rail-alat .tombol-aksi:nth-child(4) { animation-delay: .18s; }
  .rail-alat .tombol-aksi:nth-child(5) { animation-delay: .24s; }
}
@keyframes railMasuk { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* banner "hari ini sudah selesai" di dalam kotak kartu tugas */
.tugas-hari .tugas-selesai {
    display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(150deg, #ECFDF5, #DCFCE7); border: 1px solid rgba(4,120,87,.25);
    color: #047857; font-weight: 800; font-size: .95rem; border-radius: 18px; padding: 13px 16px;
}
.tugas-hari .tugas-selesai small { font-weight: 600; font-size: .78rem; color: #15803D; }
@media (prefers-reduced-motion: no-preference) {
    .tugas-hari .tugas-selesai { animation: tugasSelesaiMasuk .5s cubic-bezier(.2,.9,.3,1.2) both; }
}
@keyframes tugasSelesaiMasuk { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }


/* =========================================================================
   TAMBAHAN 28 Sep 2026 — kotak alat (Utang Review · P3K · Latihan Kilat),
   label "Tertahan di Hari N", tombol tema, MODE GELAP
   ========================================================================= */

/* ---------- kotak alat di tab Belajar ---------- */
.kotak-alat { margin: 14px 0 18px; }
.kotak-alat .ka-baris { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ka-kartu {
    position: relative; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: 14px 14px 12px; border: 1px solid var(--garis); border-radius: 16px;
    background: var(--kartu); color: var(--teks); cursor: pointer; text-align: left;
    box-shadow: var(--bayang-kecil); font: inherit; transition: transform .12s ease, border-color .12s ease;
}
.ka-kartu:hover { transform: translateY(-2px); border-color: var(--utama); }
.ka-kartu b { font-size: 13px; letter-spacing: .2px; }
.ka-kartu small { font-size: 11px; color: var(--teks-soft, var(--teks-lembut)); line-height: 1.35; }
.ka-ikon { font-size: 18px; }
.ka-angka {
    position: absolute; top: 10px; right: 12px; font-size: 20px; font-weight: 800;
    color: var(--utama); line-height: 1;
}
.ka-angka.ada { color: #db2777; }
.ka-tahan {
    margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
    background: #fff6f6; border: 1px solid #f6d3d3; color: #8a2b2b;
}
.ka-tahan b { font-weight: 700; }
.ka-tahan button {
    margin-left: 8px; border: 1px solid #e6b3b3; background: #fff; color: #8a2b2b;
    border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; cursor: pointer;
}
.ka-tahan.beres { background: #f0fbf3; border-color: #bfe7c9; color: #1f6b3a; }
@media (max-width: 700px) {
    .kotak-alat .ka-baris { grid-template-columns: 1fr 1fr; }
    .kotak-alat .ka-baris .ka-kartu:last-child { grid-column: 1 / -1; }
}

/* ---------- tombol tema ---------- */
.tombol-tema {
    margin-left: auto; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18);
    color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}

/* ---------- latihan kilat ---------- */
.kilat-panggung {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(15, 18, 32, .55); z-index: 9999; padding: 16px;
}
.kilat-kartu {
    width: min(460px, 100%); background: var(--kartu); color: var(--teks);
    border-radius: 20px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.kilat-kepala { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--teks-lembut); }
.kilat-kepala #kilatWaktu { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--utama); }
.kilat-kepala #kilatTutup { border: 0; background: transparent; color: var(--teks-lembut); font-size: 16px; cursor: pointer; }
.kilat-soal { font-size: 34px; font-weight: 800; text-align: center; margin: 18px 0 16px; letter-spacing: 1px; }
.kilat-pilih { display: grid; gap: 8px; }
.kilat-pilih button {
    padding: 12px; border-radius: 12px; border: 1px solid var(--garis); background: var(--bg);
    color: var(--teks); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.kilat-pilih button.tepat { border-color: #16a34a; background: #e8f8ee; color: #14532d; }
.kilat-pilih button.salah { border-color: #dc2626; background: #fdeaea; color: #7f1d1d; }
.kilat-balas { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--teks-lembut); text-align: center; }
.kilat-hasil { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 0 16px; }
.kilat-hasil b { font-size: 34px; }
.kilat-tombol { display: flex; gap: 10px; justify-content: center; }
.kilat-tombol button {
    padding: 10px 18px; border-radius: 12px; border: 1px solid var(--garis); background: var(--kartu);
    color: var(--teks); font: inherit; font-weight: 600; cursor: pointer;
}
.kilat-tombol #kilatSelesai { background: var(--utama); border-color: var(--utama); color: #fff; }

/* ---------- MODE GELAP ---------- */
html.gelap {
    --bg: #0b1020; --kartu: #151b31; --garis: #2a3150; --teks: #e9ecff; --teks-lembut: #9aa3c7;
    --bayang: 0 10px 26px rgba(0,0,0,.5); --bayang-kecil: 0 4px 12px rgba(0,0,0,.4);
}
html.gelap body, html.gelap .app-container { background: var(--bg) !important; color: var(--teks); }
html.gelap .header-container, html.gelap .hero-banner, html.gelap .kartu, html.gelap .kartu-tugas,
html.gelap .tugas, html.gelap .tugas-hari, html.gelap .tombol-aksi, html.gelap .day-cell,
html.gelap .strip-hari, html.gelap .sh-item, html.gelap .tab-btn, html.gelap .kaki-app,
html.gelap .popup-bunpou-isi, html.gelap .legend-box, html.gelap .stat-badge, html.gelap .sb-strip,
html.gelap .sb-hari, html.gelap .fab-aksi, html.gelap .dokkai-soal-item, html.gelap .quiz-option-btn,
html.gelap .btn-ingat, html.gelap .tombol-kana, html.gelap .n3r-bungkus, html.gelap .modal-isi {
    background: var(--kartu) !important; color: var(--teks) !important; border-color: var(--garis) !important;
}
html.gelap .day-cell.selesai, html.gelap .day-cell.buka { background: #1d2745 !important; }
html.gelap .ka-tahan { background: #2a1a1f !important; border-color: #5a2b33 !important; color: #ffc9c9 !important; }
html.gelap .ka-tahan.beres { background: #142a1e !important; border-color: #2f5c3f !important; color: #b7f0c6 !important; }
html.gelap .kilat-pilih button { background: #1b2240 !important; }
html.gelap .kilat-pilih button.tepat { background: #14351f !important; color: #b7f0c6 !important; }
html.gelap .kilat-pilih button.salah { background: #3a1a1a !important; color: #ffc9c9 !important; }