/* Bahasa visual: paper #E9EAE3, slate #1E2422, Instrument Sans + JetBrains Mono (§9). */
:root {
  --paper: #e9eae3;
  --paper-tua: #dedfd6;
  --slate: #1e2422;
  --slate-muda: #4a5450;
  --garis: #c9cbc0;
  --hijau: #2f6b4f;
  --merah: #9d3b30;
  --kuning: #8a6a12;
  --kuning-latar: #f4ecd2;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

a { color: var(--slate); text-decoration-color: var(--garis); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--slate); }

.wadah { max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }
.wadah-lebar { max-width: 1240px; }

header.atas {
  border-bottom: 1px solid var(--garis);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
header.atas .isi {
  max-width: 1240px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: baseline; gap: 18px;
}
header.atas nav { display: flex; gap: 16px; margin-left: auto; font-size: 14px; }
/* Nama terpanjang di kelas 41 huruf, dan di lebar sedang itu mendorong tombol
   Keluar keluar layar. Dipotong dengan elipsis, bukan dibiarkan meluber.
   Di panel layar sempit batas ini dilepas lagi, karena di sana lebarnya cukup. */
header.atas nav .kecil {
  max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tombol menu hanya muncul di layar sempit. Di layar lebar navigasinya sudah
   muat dalam satu baris, dan menyembunyikannya di balik satu ketukan justru
   memperlambat. */
.menu-tombol { display: none; }

@media (max-width: 640px) {
  header.atas .isi { padding: 10px 16px; align-items: center; }

  .menu-tombol {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 42px; padding: 0;
    border: 1px solid var(--garis); border-radius: 9px;
    background: transparent; color: var(--slate); cursor: pointer;
  }
  .menu-tombol:active { background: var(--paper-tua); }
  .menu-tombol span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: currentColor; position: relative;
  }
  .menu-tombol span::before, .menu-tombol span::after {
    content: ''; position: absolute; left: 0; width: 18px; height: 2px;
    border-radius: 2px; background: currentColor;
  }
  .menu-tombol span::before { top: -6px; }
  .menu-tombol span::after { top: 6px; }
  /* Terbuka: tiga garis jadi silang, supaya jelas ketukan berikutnya menutup. */
  header.atas.buka .menu-tombol span { background: transparent; }
  header.atas.buka .menu-tombol span::before { top: 0; transform: rotate(45deg); }
  header.atas.buka .menu-tombol span::after { top: 0; transform: rotate(-45deg); }

  /* Daftar tautan turun sebagai panel selebar layar. Digulung ke bawah, bukan
     dibiarkan meluber ke kanan, karena nama mahasiswa bisa panjang dan yang
     terpotong justru tombol Keluar. */
  header.atas nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: 4px 0;
    /* Sedikit lebih terang daripada bilah dan halaman, supaya panelnya
       terbaca sebagai lapisan tersendiri, bukan bagian dari isi halaman. */
    background: #f2f3ec;
    border-bottom: 1px solid var(--garis);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
    font-size: 15px;
  }
  header.atas.buka nav { display: flex; }
  header.atas nav > * { padding: 12px 16px; }
  header.atas nav a { text-decoration: none; }
  header.atas nav a:active { background: var(--paper-tua); }
  /* Nama pemakai bukan tautan, jadi dibedakan dan diletakkan sebagai kepala
     dari kelompoknya sendiri. */
  header.atas nav .kecil {
    order: 10; border-top: 1px solid var(--garis);
    margin-top: 4px; padding-top: 12px; color: var(--slate-muda);
    max-width: none; overflow: visible; white-space: normal;
  }
  header.atas nav a[href*="keluar"] { order: 11; }
}

h1 { font-size: 26px; letter-spacing: -0.02em; margin: 22px 0 6px; }
h2 { font-size: 18px; letter-spacing: -0.01em; margin: 30px 0 10px; }
h3 { font-size: 15px; margin: 20px 0 8px; }
p.penjelasan { color: var(--slate-muda); margin: 0 0 18px; max-width: 62ch; }

.kartu {
  background: #f2f3ec;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.baris { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.antara { justify-content: space-between; }
.tumbuh { flex: 1; }

.pita {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--garis);
}
.pita-kuat { background: #dcece2; color: var(--hijau); border-color: #b6d3c3; }
.pita-cukup { background: var(--paper-tua); color: var(--slate); }
.pita-perlu { background: #f3e2df; color: var(--merah); border-color: #e0bdb7; }

.label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--slate-muda);
}

.status { font-weight: 600; }
.status-done { color: var(--hijau); }
.status-compile_error, .status-timeout, .status-error { color: var(--merah); }
.status-queued, .status-running { color: var(--kuning); }

ul.test { list-style: none; padding: 0; margin: 0; }
ul.test li {
  border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 8px; background: #f2f3ec;
}
li.lolos { border-left: 3px solid var(--hijau); }
li.gagal-wajib { border-left: 3px solid var(--merah); }
/* Saran yang gagal: kuning, bukan merah (§9). */
li.gagal-saran { border-left: 3px solid var(--kuning); background: var(--kuning-latar); }

.tag-saran {
  font-size: 11px; font-weight: 700; color: var(--kuning);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tag-wajib {
  font-size: 11px; font-weight: 700; color: var(--slate-muda);
  text-transform: uppercase; letter-spacing: 0.06em;
}

pre.alasan {
  white-space: pre-wrap; word-break: break-word;
  background: #ffffff8c; border: 1px solid var(--garis); border-radius: 8px;
  padding: 10px; margin: 8px 0 0; font-size: 13px;
}

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--garis); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-muda); }
tr.sorot td { background: #f3e2df; }
td.tengah, th.tengah { text-align: center; }

button, .tombol {
  font: inherit; font-weight: 600; font-size: 14px;
  background: var(--slate); color: var(--paper);
  border: 1px solid var(--slate); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-block;
}
button.sekunder, .tombol.sekunder { background: transparent; color: var(--slate); }
button:disabled { opacity: 0.5; cursor: default; }

textarea {
  width: 100%; font: inherit; padding: 10px; border-radius: 8px;
  border: 1px solid var(--garis); background: #fff; min-height: 90px;
}

.kecil { font-size: 13px; color: var(--slate-muda); }
.mono-kecil { font-size: 12px; color: var(--slate-muda); }
.kosong { color: var(--slate-muda); font-style: italic; }

/* ---- Modul, checklist, progress bar ---- */
.bar {
  height: 8px; border-radius: 999px; background: var(--paper-tua);
  overflow: hidden; border: 1px solid var(--garis);
}
.bar > i { display: block; height: 100%; background: var(--hijau); transition: width .4s ease; }
.bar.besar { height: 12px; }

.modul { border: 1px solid var(--garis); border-radius: var(--radius); margin-bottom: 16px; background: #f2f3ec; }
.modul > header { padding: 16px 18px; }
.modul.terkunci { opacity: .62; }
.modul.selesai > header { background: #dcece2; border-radius: var(--radius) var(--radius) 0 0; }

ul.soal { list-style: none; margin: 0; padding: 0 18px 14px; }
ul.soal li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--garis);
}
ul.soal li .tanda {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1px solid var(--garis); background: var(--paper);
}
/* Pemilihnya harus sama panjang dengan aturan dasar di atas, kalau tidak
   aturan dasar yang menang dan centangnya tidak terlihat. */
ul.soal li.s-selesai .tanda { background: var(--hijau); color: var(--paper); border-color: var(--hijau); }
ul.soal li.s-terbuka .tanda { border-color: var(--slate); border-width: 2px; }
li.s-terkunci { color: var(--slate-muda); }
ul.soal li.s-terkunci .tanda { color: var(--slate-muda); }
li.s-terbuka { font-weight: 600; }

.level {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--garis);
  color: var(--slate-muda);
}
.level-lanjut, .level-expert { border-color: var(--kuning); color: var(--kuning); }

a.soal-tautan { text-decoration: none; color: inherit; flex: 1; display: flex; align-items: center; gap: 10px; }
a.soal-tautan:hover { text-decoration: underline; text-decoration-color: var(--garis); }
span.terkunci-teks { flex: 1; display: flex; align-items: center; gap: 10px; }

/* ---- Halaman masuk: panduan mahasiswa ---- */
.sambutan { max-width: 62ch; }
.sambutan h1 { margin-top: 4px; }

.tombol-besar { font-size: 15px; padding: 11px 20px; }

ol.langkah { list-style: none; counter-reset: l; padding: 0; margin: 0; }
ol.langkah > li {
  counter-increment: l; position: relative;
  padding: 0 0 18px 42px; border-left: 1px solid var(--garis); margin-left: 13px;
}
ol.langkah > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.langkah > li::before {
  content: counter(l); position: absolute; left: -13px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--slate); color: var(--paper);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
ol.langkah h3 { margin: 2px 0 6px; font-size: 15px; }
ol.langkah p { margin: 0 0 8px; font-size: 14px; color: var(--slate-muda); }

pre.kode {
  background: var(--slate); color: #e8eae6; border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; font-size: 13px; margin: 0 0 8px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
pre.kode b { color: #9fd3b6; font-weight: 500; }

ul.periksa { list-style: none; padding: 0; margin: 0; }
ul.periksa li { padding: 5px 0 5px 26px; position: relative; font-size: 14px; }
ul.periksa li::before {
  content: '☐'; position: absolute; left: 0; top: 4px; color: var(--slate-muda);
}

.aturan { border-left: 3px solid var(--kuning); background: var(--kuning-latar); }

/* ---- Panduan instalasi dua sistem operasi ---- */
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .dua-kolom { grid-template-columns: 1fr; } }

.os { border: 1px solid var(--garis); border-radius: var(--radius); padding: 14px 16px; background: #f2f3ec; }
.os h3 { margin: 0 0 4px; font-size: 15px; }
.os ol { margin: 10px 0 0; padding-left: 18px; font-size: 14px; }
.os ol li { margin-bottom: 9px; }
.os pre.kode { margin: 6px 0 0; font-size: 12px; }
.os .kecil { margin-top: 10px; }

.catatan-penting {
  border-left: 3px solid var(--merah); background: #f7eae8;
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}

/* ---- Halaman panduan ---- */
.daftar-isi {
  position: sticky; top: 58px; align-self: start;
  border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 14px 16px; background: #f2f3ec; font-size: 13px;
}
.daftar-isi a { display: block; padding: 4px 0; color: var(--slate-muda); text-decoration: none; }
.daftar-isi a:hover { color: var(--slate); text-decoration: underline; }
.daftar-isi .label { margin-bottom: 6px; }

.panduan { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .panduan { grid-template-columns: 1fr; } .daftar-isi { position: static; } }

.panduan section { scroll-margin-top: 70px; }
.panduan h2 { border-top: 1px solid var(--garis); padding-top: 20px; margin-top: 30px; }
.panduan section:first-child h2 { border-top: none; padding-top: 0; margin-top: 6px; }

dl.tanya { margin: 0; }
dl.tanya dt { font-weight: 600; margin-top: 16px; }
dl.tanya dd { margin: 5px 0 0; color: var(--slate-muda); font-size: 14px; }

table.arti { margin-top: 10px; }
table.arti td:first-child { white-space: nowrap; font-weight: 600; }

/* ---- Formulir pendaftaran ---- */
form.daftar { max-width: 460px; }
form.daftar label { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; }
form.daftar .petunjuk { font-weight: 400; color: var(--slate-muda); font-size: 13px; margin-top: 2px; }
form.daftar input {
  width: 100%; font: inherit; padding: 9px 11px; margin-top: 6px;
  border: 1px solid var(--garis); border-radius: 8px; background: #fff;
}
form.daftar input:focus { outline: 2px solid var(--slate); outline-offset: -1px; }
form.daftar button { margin-top: 18px; }

.pesan-gagal { border-left: 3px solid var(--merah); background: #f7eae8; }
.pesan-baik { border-left: 3px solid var(--hijau); background: #dcece2; }

/* Soal dengan skor penuh: seluruh barisnya hijau, termasuk id, level, dan angka. */
li.s-penuh,
li.s-penuh a,
li.s-penuh .mono-kecil,
li.s-penuh .kecil,
li.s-penuh .level {
  color: var(--hijau);
}
li.s-penuh .level { border-color: #b6d3c3; background: #dcece2; }
li.s-penuh { border-left-color: var(--hijau); }

/* Foto kamus bergurau di halaman masuk. Lebarnya dikunci supaya tidak
   mendominasi halaman, dan tetap menyusut sendiri di layar sempit. */
figure.kamus { margin: 34px 0 0; max-width: 360px; }
figure.kamus img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--garis); border-radius: var(--radius);
}
figure.kamus figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--slate-muda);
}

/* Tiga langkah setelah pendaftaran berhasil. Jaraknya dilonggarkan supaya
   tiap langkah terbaca terpisah, bukan sebagai satu paragraf panjang. */
ol.langkah-daftar { margin: 0 0 0 18px; padding: 0; font-size: 14px; }
ol.langkah-daftar li { margin-bottom: 16px; }
ol.langkah-daftar li:last-child { margin-bottom: 0; }
ol.langkah-daftar .kecil { margin-top: 5px; }
ol.langkah-daftar pre.kode { margin: 6px 0 0; font-size: 12px; }

/* ---- Halaman pantau kelas ---- */
.kepala-pantau {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
}

/* Tabel sempit cukup digulir mendatar, jangan dipotong diam-diam. */
.gulir-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 760px) {
  /* Di layar sempit tiap baris jadi kartu. Enam kolom tidak mungkin muat, dan
     menggulir tabel ke samping membuat nama mahasiswa hilang dari pandangan,
     padahal nama itulah yang dicari saat memindai daftar. */
  table.mahasiswa, table.mahasiswa tbody, table.mahasiswa tr, table.mahasiswa td { display: block; }
  table.mahasiswa thead { display: none; }
  table.mahasiswa tr {
    border-bottom: 1px solid var(--garis);
    padding: 10px; margin: 0 -10px;
  }
  table.mahasiswa td { border: 0; padding: 0; }
  table.mahasiswa td.tengah { text-align: left; }
  table.mahasiswa td.sel-nama { margin-bottom: 7px; }
  table.mahasiswa td[style*="min-width"] { min-width: 0 !important; margin-bottom: 7px; }
  /* Angka kemajuan naik ke sebelah kanan batangnya, menghemat satu baris
     penuh dikali 37 mahasiswa. */
  table.mahasiswa td[style*="min-width"] { display: flex; align-items: center; gap: 10px; }
  table.mahasiswa td[style*="min-width"] .bar { flex: 1; }
  /* Sejak kemajuan dipecah per modul, isi sel ini adalah pembungkus berisi
     beberapa bar, bukan satu .bar langsung. Tanpa ini pembungkusnya menciut
     ke lebar isinya dan bar D1 cuma selebar 88 piksel di layar HP. */
  table.mahasiswa td[style*="min-width"] > .bar-per-modul { flex: 1; min-width: 0; }
  table.mahasiswa td[style*="min-width"] .kecil { margin-top: 0 !important; white-space: nowrap; }
  /* Tiga angka pendek berjajar dalam satu baris, masing-masing dengan namanya. */
  table.mahasiswa td[data-label] {
    display: inline-block; margin-right: 16px; font-size: 13px;
  }
  table.mahasiswa td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--slate-muda); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  table.mahasiswa tr.sorot td { background: transparent; }
  table.mahasiswa tr.sorot { background: #f3e2df; }
}

@media (max-width: 420px) {
  /* Dua kartu angka per baris, bukan satu, supaya ringkasan tidak memanjang
     sampai perlu digulir sebelum sampai ke daftar mahasiswa. */
  .baris > .kartu { min-width: 0 !important; flex: 1 1 calc(50% - 10px) !important; }
}

/* Daftar video panduan di halaman masuk. Durasi didorong ke kanan supaya
   ketiganya sejajar dan mudah dibandingkan sebelum memilih mana yang ditonton. */
.kartu.video { max-width: 520px; }
.kartu.video ol { margin: 0; padding-left: 20px; font-size: 14px; }
.kartu.video li { margin-bottom: 7px; }
.kartu.video li:last-child { margin-bottom: 0; }
.kartu.video li a { margin-right: 10px; }
.kartu.video li .mono-kecil { float: right; }
@media (max-width: 480px) {
  .kartu.video li .mono-kecil { float: none; display: block; }
}

/* Petunjuk pada test yang merah. Dibedakan dari kutipan galat: galat itu fakta
   dari mesin, petunjuk itu kalimat dari dosen. */
.petunjuk {
  margin: 8px 0 0; padding: 9px 11px; font-size: 13px; line-height: 1.55;
  background: var(--kuning-latar); border-left: 3px solid var(--kuning);
  border-radius: 0 8px 8px 0;
}
.petunjuk .label-petunjuk {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kuning); margin-bottom: 3px;
}

/* ---- Pengumuman menu baru ---- */
.kabar {
  background: var(--kuning-latar);
  border-bottom: 1px solid var(--kuning);
  font-size: 14px;
}
.kabar .isi {
  max-width: 1180px; margin: 0 auto; padding: 9px 16px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
/* Kabar berisi daftar butuh perataan atas, bukan tengah, supaya tombol
   tutupnya sejajar dengan baris pertama dan bukan melayang di tengah daftar. */
.kabar .isi.kabar-daftar { align-items: flex-start; gap: 10px; }
.kabar ol { margin: 3px 0 0; padding-left: 20px; }
.kabar ol li { margin: 4px 0; }
.kabar a { color: var(--kuning); font-weight: 700; }

@media (max-width: 640px) {
  .kabar { font-size: 13px; }
  .kabar .isi { padding: 8px 12px; }
  .kabar ol { padding-left: 18px; }
}
.kabar .tutup-kabar {
  margin-left: auto; background: transparent; border: 0; color: var(--kuning);
  font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; font-weight: 700;
}

/* ---- Tabel progress kelas ---- */
table.kelas tr.saya td { background: #dcece2; }
table.kelas tr.saya td:first-child { border-left: 3px solid var(--hijau); }
.sel-kemajuan { min-width: 170px; }
@media (max-width: 700px) {
  table.kelas th:nth-child(5), table.kelas td:nth-child(5) { display: none; }
  /* Angka per modul sudah tertulis di ujung tiap bar, jadi kolom Total cuma
     mengulang, dan di layar sempit ia yang mendorong angka bar keluar layar. */
  table.kelas th:nth-child(4), table.kelas td:nth-child(4) { display: none; }
  .sel-kemajuan { min-width: 128px; }
  .bar-modul { grid-template-columns: 22px 1fr 38px; gap: 6px; }
}

/* Tombol dukungan melayang.
   Diletakkan di kanan bawah dan tetap terlihat saat halaman digulir, karena
   mahasiswa paling butuh bertanya justru saat sedang membaca hasil yang
   membingungkan, bukan saat sedang di puncak halaman. */
.dukungan-tombol {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 17px; border: 0; border-radius: 999px;
  background: var(--slate); color: #fff;
  font: inherit; font-weight: 600; font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  cursor: pointer;
}
.dukungan-tombol:hover { opacity: .9; }
.dukungan-tombol .titik {
  width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8;
}

.dukungan-panel {
  position: fixed; right: 18px; bottom: 74px; z-index: 41;
  width: 360px; max-width: calc(100vw - 36px);
  max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--garis); border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 16px;
}
.dukungan-panel h3 { margin: 0 0 4px; font-size: 16px; }
.dukungan-panel textarea {
  width: 100%; min-height: 84px; resize: vertical;
  padding: 9px 10px; border: 1px solid var(--garis); border-radius: 8px;
  font: inherit; font-size: 14px; background: #fff; color: var(--slate);
}
.dukungan-riwayat { margin-top: 14px; border-top: 1px solid var(--garis); padding-top: 12px; }
.dukungan-item { margin-bottom: 12px; }
.dukungan-item .tanya {
  background: #f1f0ec; border-radius: 8px; padding: 8px 10px; font-size: 14px;
  white-space: pre-wrap; word-break: break-word;
}
.dukungan-item .jawab {
  background: #dcece2; border-left: 3px solid var(--hijau);
  border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 14px;
  white-space: pre-wrap; word-break: break-word;
}
.dukungan-item .menunggu { font-size: 12px; color: var(--slate-muda); margin-top: 4px; }

@media (max-width: 480px) {
  .dukungan-panel {
    right: 10px; left: 10px; bottom: 70px; width: auto;
    max-height: calc(100vh - 110px);
  }
  .dukungan-tombol { right: 12px; bottom: 12px; }
}

/* Bar per modul: label di kiri, bar di tengah, angka di kanan. Dipakai di
   halaman Progress dan halaman admin, supaya D1 dan D2 masing-masing punya
   pembagi yang benar. D2 diberi warna berbeda supaya tidak dikira kelanjutan
   bar D1 yang sama. */
.bar-modul {
  display: grid; grid-template-columns: 26px 1fr 44px;
  align-items: center; gap: 8px; margin: 3px 0;
}
.bar-modul .label-modul { font-weight: 600; }
.bar-modul .angka-modul { text-align: right; white-space: nowrap; }
.bar-modul.modul-lanjut .bar > i { background: #3d5a80; }

/* --- Blok kode gaya dokumentasi (brief soal, panduan) --- */
.blok-kode {
  margin: 12px 0; border-radius: 8px; overflow: hidden;
  border: 1px solid #2c3431; background: var(--slate);
}
.blok-kode-kepala {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 6px 12px; background: #171c1a; border-bottom: 1px solid #2c3431;
}
.blok-kode-bahasa {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa39b;
}
.blok-kode-salin {
  background: transparent; border: 1px solid #3a433f; color: #c3ccc7;
  border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer;
  font-family: inherit;
}
.blok-kode-salin:hover { background: #232a27; color: #fff; }
.blok-kode pre.kode { margin: 0; border-radius: 0; padding: 12px 14px; }

/* Kode sebaris di dalam teks: cukup menonjol untuk dikenali, tidak berisik. */
.seksi p code, .seksi li code, .seksi td code, .seksi th code {
  background: #ffffffb0; border: 1px solid var(--garis); border-radius: 4px;
  padding: 1px 5px; font-size: 0.92em;
}

/* Satu kartu per bagian brief, supaya halaman tidak jadi satu blok panjang. */
.kartu.seksi { padding: 4px 20px 18px; }
.kartu.seksi > h2, .kartu.seksi > h3 { margin-top: 18px; }
.kartu.seksi > :last-child { margin-bottom: 0; }
.kartu.seksi table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kartu.seksi th, .kartu.seksi td {
  border-bottom: 1px solid var(--garis); padding: 7px 8px; text-align: left; vertical-align: top;
}
.kartu.seksi th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-muda); }

/* --- Pemilih slot UTS --- */
.slot-petak { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.slot {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--garis); background: #ffffffb0; color: var(--slate);
  cursor: pointer;
}
.slot:hover { border-color: var(--slate); }
.slot.penuh {
  background: var(--paper-tua); color: var(--slate-muda);
  cursor: not-allowed; text-decoration: line-through;
}