/* ============================================================
   Generator Soal — gaya visual
   Palet: papan tulis (hijau gelap), kertas ujian (putih hangat),
   kapur (putih), kunyit (aksen tindakan).
   ============================================================ */
:root {
  --papan: #17352c;        /* hijau papan tulis */
  --papan-tua: #0f241e;
  --kertas: #f7f5ef;       /* kertas ujian hangat */
  --kartu: #ffffff;
  --tinta: #22302b;
  --tinta-muda: #5c6b64;
  --garis: #dcd8cc;
  --kunyit: #d99a1b;       /* aksen tindakan */
  --kunyit-tua: #b57e0e;
  --merah: #b3402f;
  --hijau-ok: #2e7d54;
  --radius: 10px;
  --bayang: 0 1px 2px rgba(23, 53, 44, .06), 0 4px 14px rgba(23, 53, 44, .06);
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--kertas);
  color: var(--tinta);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; padding: 28px 20px 48px; }
.wrap { max-width: 1000px; margin: 0 auto; }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: 1.7rem; font-weight: 800; margin: .2em 0 .5em; }
h2 { font-size: 1.2rem; font-weight: 700; margin: 1.4em 0 .5em; }
p  { margin: .4em 0 1em; }
a  { color: var(--papan); }

/* ---------- Bilah atas ---------- */
.topbar {
  background: var(--papan);
  color: #fff;
  border-bottom: 4px solid var(--kunyit);
}
.topbar-in { display: flex; align-items: center; gap: 22px; padding: 0 20px; height: 60px; }
.brand {
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em;
}
.brand-mark {
  background: var(--kunyit); color: var(--papan-tua);
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800;
}
.mainnav { display: flex; gap: 4px; flex: 1; }
.mainnav a {
  color: rgba(255,255,255,.78); text-decoration: none; font-weight: 600;
  font-size: .92rem; padding: 7px 12px; border-radius: 7px;
}
.mainnav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.mainnav a.aktif { background: rgba(255,255,255,.14); color: #fff; }
.userbox { display: flex; align-items: center; gap: 12px; }
.usernama { font-size: .88rem; opacity: .85; }

.foot {
  background: transparent; color: var(--tinta-muda);
  font-size: .82rem; padding: 18px 20px; border-top: 1px solid var(--garis);
}

/* ---------- Kartu & tata letak ---------- */
.kartu {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
  padding: 22px 24px; margin-bottom: 20px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .topbar-in { flex-wrap: wrap; height: auto; padding: 10px 14px; }
  .mainnav { order: 3; width: 100%; overflow-x: auto; }
}

/* ---------- Formulir ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
select, textarea {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--garis); border-radius: 8px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--kunyit); outline-offset: 1px; border-color: var(--kunyit);
}
textarea { resize: vertical; min-height: 74px; }
.field { margin-bottom: 15px; }
.hint { font-size: .8rem; color: var(--tinta-muda); margin-top: 4px; }
.cek-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.cek-grup label {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  border: 1.5px solid var(--garis); border-radius: 999px; padding: 5px 13px;
  cursor: pointer; background: #fff; font-size: .85rem; margin: 0;
}
.cek-grup input { accent-color: var(--papan); }
.cek-grup label:has(input:checked) { border-color: var(--papan); background: #eef3f0; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-weight: 700; font-size: .92rem;
  padding: 10px 20px; border-radius: 8px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .12s;
}
.btn-utama { background: var(--kunyit); color: var(--papan-tua); }
.btn-utama:hover { background: var(--kunyit-tua); }
.btn-papan { background: var(--papan); color: #fff; }
.btn-papan:hover { background: var(--papan-tua); }
.btn-garis { background: #fff; color: var(--papan); border-color: var(--garis); }
.btn-garis:hover { border-color: var(--papan); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-sm { padding: 6px 13px; font-size: .83rem; }
.btn-bahaya { background: #fff; color: var(--merah); border-color: var(--garis); }
.btn-bahaya:hover { border-color: var(--merah); }

/* ---------- Notifikasi ---------- */
.flash {
  padding: 12px 16px; border-radius: 8px; margin-bottom: 18px;
  font-size: .92rem; font-weight: 500; border: 1px solid;
}
.flash-ok { background: #eaf5ee; color: var(--hijau-ok); border-color: #bfe0cd; }
.flash-error { background: #fbeeec; color: var(--merah); border-color: #edc6bf; }

/* ---------- Tabel ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th {
  text-align: left; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-muda);
  padding: 8px 10px; border-bottom: 2px solid var(--garis);
}
table.data td { padding: 10px; border-bottom: 1px solid var(--garis); vertical-align: top; }
table.data tr:hover td { background: #faf9f4; }

/* ---------- Lencana ---------- */
.lencana {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; letter-spacing: .03em;
}
.lencana-pg   { background: #e7eef8; color: #2b5797; }
.lencana-esai { background: #f3e9f7; color: #7a3f96; }
.lencana-ai   { background: #fdf3dd; color: var(--kunyit-tua); }
.lencana-manual { background: #e8efe9; color: var(--hijau-ok); }
.lencana-level { background: #eef0ef; color: var(--tinta-muda); }

/* ---------- Kartu soal (pratinjau) ---------- */
.soal-item {
  border: 1px solid var(--garis); border-left: 4px solid var(--papan);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; background: #fff;
}
.soal-item .opsi { margin: 8px 0 0; padding-left: 0; list-style: none; }
.soal-item .opsi li { padding: 2px 0; }
.soal-item .opsi .kunci-benar { font-weight: 700; color: var(--hijau-ok); }
.soal-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
.pembahasan {
  margin-top: 10px; font-size: .87rem; color: var(--tinta-muda);
  background: #faf9f4; border-radius: 7px; padding: 9px 12px;
}

/* ---------- Halaman masuk ---------- */
.auth-wrap { max-width: 420px; margin: 7vh auto 0; }
.auth-logo {
  text-align: center; margin-bottom: 22px;
}
.auth-logo .brand-mark { width: 52px; height: 52px; font-size: 1.7rem; border-radius: 14px; }
.auth-logo h1 { font-size: 1.45rem; margin: 12px 0 2px; }
.auth-logo p { color: var(--tinta-muda); margin: 0; font-size: .92rem; }

/* ---------- Statistik beranda ---------- */
.stat { text-align: left; }
.stat .angka { font-size: 2.1rem; font-weight: 800; color: var(--papan); line-height: 1.1; }
.stat .ket { font-size: .85rem; color: var(--tinta-muda); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Konten kaya dari editor ---------- */
.isi-soal > p:first-child { margin-top: 0; }
.isi-soal > p:last-child { margin-bottom: 0; }
.isi-soal p, .pembahasan p { margin: .35em 0; }
.isi-soal img, .pembahasan img, .isi-opsi img {
  max-width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--garis); margin: 6px 0; display: block;
}
.isi-opsi { display: inline; }
.isi-opsi p { display: inline; margin: 0; }
.isi-soal table, .pembahasan table {
  border-collapse: collapse; margin: 10px 0; font-size: .92em;
  max-width: 100%; overflow-x: auto; display: block;
}
.isi-soal table td, .isi-soal table th,
.pembahasan table td, .pembahasan table th {
  border: 1px solid var(--garis); padding: 6px 10px; text-align: left;
}
.isi-soal table th, .pembahasan table th { background: #f2f0ea; font-weight: 700; }
.isi-soal ul, .isi-soal ol { margin: .4em 0 .4em 1.2em; padding-left: .6em; }
.isi-soal sup, .isi-soal sub { font-size: .72em; line-height: 0; }
.isi-soal blockquote {
  margin: .5em 0; padding-left: 12px; border-left: 3px solid var(--garis);
  color: var(--tinta-muda);
}

/* Kotak editor sebelum TinyMCE selesai dimuat */
textarea.editor-penuh, textarea.editor-sedang, textarea.editor-ringkas {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.tox-tinymce { border-radius: 8px !important; border-color: var(--garis) !important; }