/* ==========================================================================
   Halaman ujian HSK — peserta
   Gaya visual diambil langsung dari berkas ujian yang sudah berjalan
   (HSK 4/005.html) supaya peserta tidak merasa pindah aplikasi.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

:root {
    --primary-color: #a8232a;
    --primary-hover: #8c1c22;
    --secondary-color: #fcf4f5;
    --text-color: #2d3748;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --bg-color: #f7fafc;
    --success-color: #2f855a;
    --warning-color: #dd6b20;
}

body {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 2.0;
    background-color: var(--bg-color);
    color: #2A1F14;
    margin: 0;
}

/* Peserta tidak boleh menyalin soal maupun mencetak halaman. */
body.exam-mode { user-select: none !important; }

@media print {
    body.exam-mode { display: none !important; }
}

.hidden { display: none !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(168, 35, 42, .15);
}

header .exam-title { font-size: 17px; font-weight: 700; cursor: default; }
header .student-info { font-size: 14px; opacity: .95; }
header .timer-box { font-size: 16px; font-weight: 700; }
header .timer-box .clock { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
header .timer-box.low .clock { color: #ffe082; }

/* ── Wadah utama ────────────────────────────────────────────────────────── */
.container {
    max-width: 1200px;
    width: 95%;
    margin: 100px auto 40px;
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
}

/* ── Layar login & pemeriksaan perangkat ────────────────────────────────── */
.login-screen {
    max-width: 600px;
    width: 95%;
    margin: 100px auto;
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
    text-align: center;
    border-top: 5px solid var(--primary-color);
}

.login-screen h2 { color: var(--primary-color); margin: 0 0 8px; font-size: 22px; }
.login-screen .login-subtitle { color: #666; font-size: 14px; margin: 0 0 28px; line-height: 1.6; }

.login-logo { max-width: 140px; height: auto; margin-bottom: 20px; display: inline-block; }

.login-mark {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 2px;
    padding: 12px 20px;
    border-radius: 14px;
    margin-bottom: 18px;
}

.check-screen {
    max-width: 560px;
    width: 95%;
    margin: 100px auto 40px;
    background: #fff;
    padding: 40px 35px;
    border-radius: 16px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, .1);
    text-align: center;
    border-top: 5px solid var(--primary-color);
}

.check-screen h2 { color: var(--primary-color); font-size: 22px; margin: 5px 0 2px; }

.student-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    object-fit: cover;
    background: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    color: var(--primary-color);
}

.test-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 12px;
    text-align: left;
    flex-wrap: wrap;
}

.test-item .test-label { flex: 0 0 130px; font-weight: 600; font-size: 14px; }
.test-item input { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; }
.test-status { font-size: 20px; min-width: 28px; text-align: center; }

.btn-test {
    background: var(--primary-color);
    color: #fff;
    border: 0;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.btn-test:hover { background: var(--primary-hover); }
.btn-test:disabled { background: #cbd5e0; color: #718096; cursor: not-allowed; }

.wait-box {
    background: #fffbea;
    border: 1px solid #f6e05e;
    color: #744210;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    margin: 18px 0;
}
.wait-box.ready { background: #f0fff4; border-color: #9ae6b4; color: #22543d; }

/* ── Formulir ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 15px; }

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
}

.btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 14px 25px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    box-shadow: 0 4px 10px rgba(168, 35, 42, .2);
    font-family: inherit;
}
.btn:hover { background-color: var(--primary-hover); }
.btn:disabled { background-color: #cbd5e0; color: #718096; cursor: not-allowed; box-shadow: none; }

.btn-secondary { background: #4a5568; box-shadow: none; }
.btn-secondary:hover { background: #2d3748; }

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    text-align: left;
}
.alert-error { background: #fff5f5; border: 1px solid #feb2b2; color: #822727; }
.alert-info { background: #ebf8ff; border: 1px solid #90cdf4; color: #2a4365; }

/* ── Informasi ujian & judul bagian ─────────────────────────────────────── */
.exam-info {
    background: var(--secondary-color);
    padding: 15px;
    border-left: 5px solid var(--primary-color);
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    line-height: 1.7;
}

.part-title {
    background: #edf2f7;
    padding: 12px 16px;
    font-weight: 700;
    margin-top: 45px;
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
    color: #2d3748;
}

.part-instruction { font-size: 15px; color: var(--text-muted); padding: 8px 4px; line-height: 1.7; }

/*
 | Bacaan milik sub-bagian. SENGAJA bukan .part-instruction dan bukan
 | .example-box: yang pertama kecil dan redup karena ditulis untuk satu kalimat
 | perintah, yang kedua berbingkai hijau putus-putus yang di seluruh aplikasi
 | ini berarti "contoh, bukan soal". Bacaan bukan keduanya -- ia bahan yang
 | harus dibaca penuh, jadi ukurannya seukuran teks soal dan jaraknya selega
 | paragraf, bukan selega catatan kaki.
 */
.part-passage {
    padding: 16px 18px;
    margin: 12px 0;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
    font-size: 17px;
    line-height: 1.9;
}
.part-passage p { margin: 0 0 10px; }
.part-passage p:last-child { margin-bottom: 0; }

/* Spanduk pratinjau. Sengaja mencolok dan tidak bergaya ujian: admin harus
   tahu sekali lihat bahwa ini bukan halaman yang sedang dikerjakan siapa pun. */
.preview-banner {
    background: #2d3748;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
}

.example-box {
    background: #f1f8e9;
    border: 1px dashed #7cb342;
    padding: 15px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.8;
}
.example-box p { margin: 6px 0; }
.example-badge {
    background: #7cb342;
    color: #fff;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 8px;
}

.word-bank {
    padding: 15px;
    background: #f9f9f9;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 10px;
    /* Grid, bukan deretan inline yang patah di tempat acak: bank 选词填空 kini
       boleh sampai N, dan empat belas kata harus bisa dipindai per kolom
       seperti tabel di lembar aslinya. Enam kata pun ikut rapi satu baris. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 16px;
}
.word-bank span { display: block; min-width: 0; }

/* Bank gambar A–F milik sub-bagian 图片匹配: tampil sekali di kepala bagian,
   dipakai bersama seluruh soal di bawahnya. */
.image-bank {
    display: grid;
    /*
     | Batas ATAS 180px, bukan 1fr.
     |
     | Dengan 1fr tiap sel memakan seluruh sisa lebar, dan begitu gambarnya
     | dibuat persegi tingginya ikut membesar -- tiga gambar bisa menjadi 357px
     | masing-masing, dan enam gambar mendorong soal pertama hampir satu layar
     | penuh ke bawah. Bank ini bahan rujukan yang dibaca sekilas, bukan medan
     | jawaban; ia tidak perlu sebesar itu.
     |
     | Pola batas-atas ini sama dengan .options-letters di bawah.
     */
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
    justify-content: center;
    gap: 14px;
    padding: 15px;
    margin-top: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.image-bank figure { margin: 0; text-align: center; }
.image-bank img {
    width: 100%;
    /* Persegi, sebangun dengan seluruh bingkai gambar lain di aplikasi ini.
       Sisinya mengikuti lebar kolom grid, jadi keenam gambar bank selalu
       sama besar berapa pun rasio berkas aslinya. */
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}
.image-bank figcaption { margin-top: 6px; font-weight: 700; font-size: 16px; }

/* Bank kalimat A–F milik sub-bagian 句子配对. Sama seperti bank gambar, ia tampil
   sekali di kepala bagian dan dipakai bersama seluruh soal di bawahnya. Bedanya
   isinya kalimat, jadi tersusun ke bawah -- bukan berjajar seperti daftar kata. */
.sentence-bank {
    padding: 15px;
    margin-top: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
}
/* Huruf pada kolom tetap: kalimat yang membungkus ke baris kedua tetap rata
   dengan baris pertamanya, tidak menyelip ke bawah hurufnya. */
.sentence-bank .sb-item { display: flex; gap: 10px; align-items: baseline; }
.sentence-bank .sb-item + .sb-item { margin-top: 8px; }
.sentence-bank .sb-letter { flex: 0 0 auto; width: 18px; font-weight: 700; font-size: 16px; }
.sentence-bank .sb-text { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.5; }

/* ── Blok soal ──────────────────────────────────────────────────────────── */
.question-block {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    background: #fff;
    scroll-margin-top: 110px;
}

.question-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.question-number { font-weight: 700; color: var(--primary-color); }
.question-text { font-size: 18px; font-weight: 500; margin-bottom: 10px; line-height: 1.6; }

.flag-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
}
.flag-btn.flagged { background: #ff9800; color: #fff; border-color: #e65100; }

.options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.option-label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    font-size: 15px;
}
.option-label:hover { background-color: var(--bg-color); border-color: #cbd5e0; }
.option-label:has(input:checked) {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}
.option-label input { margin-right: 12px; transform: scale(1.2); accent-color: var(--primary-color); }
/*
 | Pilihan bergambar (mc_image): kotak persegi yang sama besar.
 |
 | Dulu height:auto, sehingga tiga pilihan dengan rasio berbeda menghasilkan
 | tiga kotak setinggi berbeda -- dan peserta membaca ketidakrataan itu sebagai
 | petunjuk, padahal ia hanya kebetulan ukuran berkasnya.
 |
 | contain, bukan cover: memotong gambar pilihan bisa membuang bagian yang
 | justru membedakannya dari pilihan lain.
 */
.option-label img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

/* Pilihan yang hanya berupa huruf — gambarnya sudah ada di bank sub-bagian. */
.options-letters { grid-template-columns: repeat(auto-fit, minmax(84px, 110px)); }
.option-letter span { font-weight: 700; font-size: 17px; }

/* Instruksi resmi menyebut setiap gambar hanya dipakai sekali. Huruf yang sudah
   terpakai soal lain diredupkan sebagai pengingat, bukan sebagai penghalang:
   peserta tetap boleh memilihnya, persis seperti mengerjakan di atas kertas. */
.option-letter.used { opacity: .55; border-style: dashed; }
.option-letter.used:has(input:checked) { opacity: 1; border-style: solid; }

/*
 | Varian bertesk (show_option_text pada sub-bagian). Kotaknya harus melar
 | mengikuti isinya, jadi batas ATAS 110px milik huruf telanjang dilepas.
 */
.options-letters-text { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.option-letter .ol-text { flex: 1 1 auto; min-width: 0; margin-left: 8px; font-weight: 400; font-size: 17px; }
.option-letter:has(.ol-text) { align-items: flex-start; }
/*
 | Tiga kelas, bukan dua. `.option-letter span` di atas berkekuatan 0-1-1 dan
 | mengalahkan .opt-atas/.opt-bawah yang hanya 0-1-0 -- tanpa dua baris ini,
 | pinyin yang ditumpuk admin di kotak banknya tercetak sebesar dan setebal
 | hanzinya, justru pada tipe yang petunjuk builder-nya menyuruh menumpuk.
 */
.option-letter .ol-text .opt-atas  { font-size: 14px; font-weight: 400; color: #718096; }
.option-letter .ol-text .opt-bawah { font-size: 17px; font-weight: 400; }
/*
 | .option-label img di atas memaksa width:100% + aspect-ratio:1 -- benar untuk
 | mc_image yang gambarnya MEMANG soal, salah di sini: satu gambar setinggi
 | kolomnya, dikalikan enam huruf dan lima nomor, mendorong soal berikutnya
 | satu layar penuh ke bawah.
 */
.option-letter .ol-thumb {
    width: auto;
    height: 44px;
    aspect-ratio: auto;
    border: 1px solid var(--border-color);
    margin-left: 8px;
}
.options-letters-text:has(.ol-thumb) { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

.writing-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    margin-top: 8px;
    font-family: inherit;
}

.order-input {
    width: 120px;
    padding: 10px;
    border: 2px solid var(--primary-color);
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    border-radius: 4px;
    font-family: inherit;
}

/*
 | Gambar soal: kotak persegi berukuran tetap.
 |
 | max-width yang sudah ada kini menentukan SISI perseginya, sehingga bingkainya
 | ikut mengecil sendiri pada titik henti 768px dan 480px di bawah -- tanpa
 | aturan tambahan.
 |
 | Foto lanskap karena itu menyisakan bidang putih di atas dan bawah. Itu harga
 | yang dibayar untuk deretan yang benar-benar seragam, dan lebih murah daripada
 | memotong gambar soal ujian.
 */
.q-image {
    display: block;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1;
    object-fit: contain;
    background: #fff;
    margin: 10px auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/*
 | Gambar yang DITEMPEL admin ke dalam teks kaya — petunjuk, kotak 例如, dan
 | isi soal. Ketiganya dicetak apa adanya, dan tag <img>-nya hanya membawa
 | max-width:100%; satu tempelan tinggi bisa menguasai seluruh layar.
 |
 | Dibatasi, BUKAN dibingkai. Gambar di sini adalah ilustrasi paragraf: memaksa
 | pindaian lembar 例如 yang lebar ke dalam kotak persegi justru merusaknya.
 | Yang dibutuhkan cuma lantai atas.
 */
.question-text img,
.part-instruction img,
.part-passage img,
.example-box img,
.exam-info img {
    max-width: 100%;
    max-height: 320px;
    height: auto;
}

/* Pemutar milik satu soal (mode audio per soal). */
.q-audio {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 4px 0 14px;
}

/* ── Hanzi + Pinyin ──────────────────────────────────────────────────────── */
/* HSK 1-2 mencetak pinyin di bawah setiap baris Hanzi. Dipakai dari dalam
   content_html tiap soal, jadi berlaku untuk paket mana pun. */
.hanzi-lg {
    font-size: 26px;
    line-height: 1.6;
    font-weight: 500;
}

.pinyin {
    font-size: 15px;
    color: #718096;
    line-height: 1.5;
    margin-top: 2px;
    font-weight: 400;
}

/* Pilihan bertumpuk: dua bagian pada satu baris yang sama, seperti lembar HSK
   resmi. Isinya Hanzi, jadi kelasnya dinamai menurut LETAKNYA — bukan menurut
   salah satu isi yang kebetulan pernah dipakai di sana. */
.opt-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-atas  { font-size: 15px; color: #718096; line-height: 1.4; font-weight: 400; }
.opt-bawah { font-size: 17px; line-height: 1.5; }

/* Kotaknya melar ke bawah, dan radionya tetap sejajar baris pertama — bukan
   melayang di tengah tumpukan. */
.option-label:has(.opt-stack) { align-items: flex-start; }
.option-label:has(.opt-stack) input { margin-top: 3px; }

/* ── Susun kata (完成句子) ───────────────────────────────────────────────── */
.click-words-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    min-height: 40px;
    align-items: stretch;
}

.click-word {
    background: #fff;
    border: 1px solid #b4c6e7;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: #2e5b82;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    user-select: none;
    transition: all .1s ease;
    /* Flex, bukan blok: kartu boleh memuat pinyin di atas hanzi, dan tumpukan
       itu harus duduk rata tengah berapa pun tinggi kartunya. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.click-word .opt-stack { align-items: center; }
.click-word:hover { background: #e6eefc; transform: translateY(-1px); }
.click-word:active { transform: translateY(1px); }

.target-zone-container {
    border: 2px dashed #a8232a;
    background: #fffcfc;
    min-height: 50px;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Sama dengan daftar sumbernya. Dulu di sini 'center' sementara di sana
       'stretch'; selama kartunya satu baris selisih itu tak terlihat, tetapi
       kartu bertumpuk akan berubah rupa begitu dipindahkan ke sini. */
    align-items: stretch;
    margin-top: 10px;
}
.target-zone-container:empty::before {
    content: attr(data-placeholder);
    color: #999;
    font-size: 14px;
    padding-left: 5px;
    pointer-events: none;
}

.btn-reset-click {
    background: #666;
    color: #fff;
    border: 0;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 5px;
    float: right;
    font-family: inherit;
}
.btn-reset-click:hover { background: #444; }

/* ── Panel navigasi / lembar jawaban ────────────────────────────────────── */
.nav-panel {
    position: fixed;
    right: 20px;
    top: 100px;
    width: 260px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
    z-index: 999;
    border: 1px solid #e2e8f0;
}
.nav-panel.minimized {
    width: 45px;
    height: 140px;
    overflow: hidden;
    padding: 10px 5px;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
}
.nav-panel.minimized .nav-content { display: none; }

.toggle-nav-btn {
    background: #333;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    float: right;
    font-family: inherit;
}
.nav-panel.minimized .toggle-nav-btn {
    float: none;
    background: #fff;
    color: var(--primary-color);
    width: 100%;
    padding: 5px 0;
    margin-top: 5px;
    font-size: 14px;
}

.nav-progress-bar { height: 8px; background: #edf2f7; border-radius: 4px; overflow: hidden; margin: 10px 0 6px; }
.nav-progress-bar > span { display: block; height: 100%; background: var(--success-color); width: 0; transition: width .25s ease; }
.nav-progress-label { font-size: 13px; color: var(--text-muted); }

.font-buttons { display: flex; gap: 6px; margin: 10px 0; }
.font-buttons button {
    flex: 1;
    background: #edf2f7;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 0;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 15px;
    max-height: 50vh;
    overflow-y: auto;
}

.nav-item {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
    color: #4a5568;
    background: #f7fafc;
}
.nav-item.disabled { opacity: .4; pointer-events: none; }
.nav-item.answered { background-color: var(--success-color) !important; color: #fff !important; }
.nav-item.flagged { background-color: var(--warning-color) !important; color: #fff !important; }

.save-indicator { font-size: 12px; color: var(--text-muted); margin-top: 10px; text-align: center; }
.save-indicator.saving { color: var(--warning-color); }
.save-indicator.offline { color: #c53030; }

/* ── Pemutar audio menyimak ─────────────────────────────────────────────── */
#audio-player-container {
    background: #fff3f3;
    padding: 15px;
    border: 1px solid #ffcdd2;
    border-radius: 6px;
    margin-bottom: 25px;
    text-align: center;
}

#audio-notice { color: #c62828; font-weight: 700; margin-bottom: 8px; font-size: 15px; }

.custom-audio-btn {
    background: #2e7d32;
    color: #fff;
    border: 0;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.custom-audio-btn:hover { background: #256428; }
.custom-audio-btn:disabled { background: #ccc; cursor: not-allowed; }

#audio-progress { font-variant-numeric: tabular-nums; font-size: 14px; color: #555; margin-top: 8px; }

/* Pesan audio macet. Merah pekat, bukan merah muda: wadah di sekelilingnya sudah
   #fff3f3, jadi latar yang lembut akan menyatu dan luput dari perhatian. */
.audio-error {
    background: #c62828;
    color: #fff;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.lock-banner {
    background: linear-gradient(135deg, #a8232a, #c62828);
    color: #fff;
    padding: 22px 26px;
    border-radius: 10px;
    margin: 30px 0;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    line-height: 1.7;
    box-shadow: 0 6px 18px rgba(168, 35, 42, .25);
}

/* ── Hamparan penuh layar ───────────────────────────────────────────────── */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.overlay-warning { background: rgba(221, 107, 32, .96); color: #fff; }
.overlay-warning .big { font-size: 46px; font-weight: 800; animation: pulse 1s infinite; }

.overlay-audio { background: rgba(45, 55, 72, .97); color: #fff; }
.overlay-audio .big { font-size: 40px; font-weight: 800; }

/*
 | Tirai layar penuh (句子 anti-contek: require_fullscreen).
 |
 | z-index-nya DI BAWAH .overlay yang lain, dan itu disengaja. Peserta yang
 | terkunci sekaligus belum masuk layar penuh harus membaca layar kuncinya --
 | di sanalah kotak PIN pengawas berada. Tirai ini hanya menutup soal; layar
 | kunci menutup segalanya.
 |
 | Latarnya pekat, bukan tembus pandang: yang ditutupnya justru naskah soal.
 */
.overlay-fullscreen {
    z-index: 1900;
    background: #ffffff;
    color: #2d3748;
    flex-direction: column;
}
.overlay-fullscreen .lock-title {
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 14px;
}
.overlay-fullscreen .lock-body { max-width: 520px; font-size: 16px; line-height: 1.8; }

/* Waktu tetap berjalan selama tirai terbuka; menyembunyikan jamnya berarti
   membiarkan orang kehilangan waktu tanpa tahu. */
.overlay-fullscreen .fs-clock {
    margin-top: 18px;
    font-size: 15px;
    color: #718096;
}
.overlay-fullscreen .fs-clock span {
    font-weight: 800;
    font-size: 20px;
    color: var(--primary-color);
    margin-left: 6px;
}

/*
 | Layar terkunci.
 |
 | Pemilihnya harus #lockScreen -- persis id yang dipakai play.php dan exam.js.
 | Selama ia tertulis #lock-screen, tidak ada satu pun aturan di bawah yang
 | pernah menyala: hamparannya tembus pandang, dan soal ujian tetap terbaca di
 | baliknya. Justru itulah yang harus ditutupnya.
 */
#lockScreen {
    background: #ffffff;
    color: #2d3748;
    flex-direction: column;
}
#lockScreen .lock-title {
    color: var(--primary-color);
    font-size: 30px;
    font-weight: 800;
    animation: blink 1s step-start infinite;
    margin-bottom: 14px;
}
#lockScreen .lock-body { max-width: 520px; font-size: 16px; line-height: 1.8; margin-bottom: 20px; }
#lockScreen input {
    padding: 12px;
    font-size: 20px;
    text-align: center;
    letter-spacing: 6px;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
    background: #fff;
    color: #2d3748;
    width: 220px;
    font-family: inherit;
}
#lockScreen .unlock-error { color: var(--primary-color); font-size: 14px; min-height: 22px; margin-top: 10px; }

/* ── Spanduk koneksi terputus ───────────────────────────────────────────── */
/*
 | Ditaruh melekat di dasar layar, bukan di puncaknya: bilah atas sudah dihuni
 | pengatur waktu, dan yang paling perlu terbaca saat jaringan mati adalah
 | kalimat "jangan tutup halaman" -- bukan hitungan detiknya.
 */
.offline-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1900;
    background: #7b341e;
    color: #fff;
    padding: 12px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .2);
}
.offline-banner strong { display: block; font-size: 16px; margin-bottom: 2px; }
.offline-banner span { display: block; max-width: 720px; margin: 0 auto; }

.blink-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #ff1744;
    animation: blink .6s step-start infinite;
    z-index: 2100;
}

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    width: 46px;
    height: 46px;
    border: 5px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .9s linear infinite;
    margin: 0 auto 18px;
}

/* ── Modal konfirmasi kirim ─────────────────────────────────────────────── */
.modal-backdrop-hsk { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: #fff; border-radius: 14px; max-width: 460px; width: 100%; padding: 30px; text-align: center; }
.modal-box h3 { margin: 0 0 14px; color: var(--primary-color); font-size: 21px; }
.modal-stats { display: flex; gap: 12px; margin: 18px 0; }
.modal-stats > div { flex: 1; padding: 12px; border-radius: 8px; }
.modal-stats .ok { background: #f0fff4; color: #22543d; }
.modal-stats .blank { background: #fffaf0; color: #7b341e; }
.modal-stats .num { font-size: 26px; font-weight: 800; display: block; line-height: 1.2; }
.modal-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ── Kartu hasil ────────────────────────────────────────────────────────── */
.result-card {
    max-width: 640px;
    width: 95%;
    margin: 100px auto 40px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.result-head { background: linear-gradient(135deg, #2f855a, #276749); color: #fff; padding: 34px 30px; text-align: center; }
.result-head.failed { background: linear-gradient(135deg, #a8232a, #742a2a); }
.result-head .icon { font-size: 46px; line-height: 1; }
.result-head h2 { margin: 12px 0 4px; font-size: 24px; }
.result-body { padding: 28px 30px 34px; text-align: center; }

.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 20px 0; }
.score-cell { background: var(--bg-color); border-radius: 10px; padding: 14px 10px; }
.score-cell .cap { font-size: 13px; color: var(--text-muted); }
.score-cell .num { font-size: 26px; font-weight: 800; color: var(--primary-color); }

.idiom { font-size: 20px; font-weight: 700; color: var(--primary-color); margin: 18px 0 4px; }
.idiom-sub { font-size: 13.5px; color: var(--text-muted); }

/* ── Responsif ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    body { font-size: 17px; }
    header { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 16px; }
    header .exam-title { font-size: 14px; }
    .container { margin: 125px 10px 40px; width: auto; padding: 20px 15px; }
    .part-title { font-size: 14px; margin-top: 30px; }
    .options { grid-template-columns: repeat(2, 1fr); }
    /* Pilihan huruf saja tidak ikut dua kolom: empat belas huruf dua per baris
       adalah tujuh baris tombol untuk satu nomor. Selebar apa pun layarnya,
       huruf-huruf itu tetap dijajarkan sebanyak muatnya. */
    .options-letters { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    /* Variannya HARUS diulang di dalam media query ini. Aturan di sini
       berkekuatan 0-1-0 sedangkan .options-letters-text 0-2-0, dan kekhususan
       mengalahkan urutan sumber bahkan lintas media query -- tanpa baris ini,
       ponsel diam-diam tetap memakai kolom desktop. */
    .options-letters-text { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .q-image { max-width: 200px; }

    .nav-panel {
        right: 0;
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 12px 16px;
        max-height: 46vh;
        overflow-y: auto;
    }
    .nav-panel.minimized {
        width: auto;
        height: auto;
        left: auto;
        right: 12px;
        bottom: 12px;
        border-radius: 20px;
        padding: 8px 14px;
    }
    .nav-grid { grid-template-columns: repeat(8, 1fr); max-height: 26vh; }
    .nav-item { width: 100%; height: 32px; }
}

@media (max-width: 480px) {
    body { font-size: 15px; }
    .options { grid-template-columns: 1fr; }
    .options-letters { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    /* Satu kolom penuh: di layar selebar ini, huruf berikut katanya tidak
       muat berdampingan tanpa memenggal kata di tengah. */
    .options-letters-text { grid-template-columns: 1fr; }
    .nav-grid { grid-template-columns: repeat(5, 1fr); }
    .q-image { max-width: 160px; }
    .login-screen, .check-screen { padding: 26px 20px; }
    .modal-box { padding: 22px 18px; }
}