/* Tampilan publik (Guest/User) — bukan AdminLTE */
:root {
  --je-ink: #1f2430;
  --je-paper: #faf8f4;
  --je-seal: #c8402d;
  --je-indigo: #2f4a7a;
  --je-line: #e7e2d9;
  --je-font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-primary: var(--je-indigo);
  --bs-primary-rgb: 47, 74, 122;
}
body { background: var(--je-paper); color: var(--je-ink); min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.btn-primary { --bs-btn-bg: var(--je-indigo); --bs-btn-border-color: var(--je-indigo); --bs-btn-hover-bg: #253b62; --bs-btn-hover-border-color: #253b62; --bs-btn-active-bg: #203352; }

.site-nav { background: rgba(250, 248, 244, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--je-line); }
.site-nav .nav-link { color: var(--je-ink); font-weight: 500; }
.site-nav .nav-link.active { color: var(--je-seal); }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: .5rem; background: var(--je-seal); color: #fff;
  font-family: var(--je-font-jp); font-weight: 700; line-height: 1;
}

.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 { font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hero .jp-line { font-family: var(--je-font-jp); color: var(--je-seal); font-size: 1.05rem; letter-spacing: .08em; }
.hero-card { background: #fff; border: 1px solid var(--je-line); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px -18px rgba(31, 36, 48, .35); }
.hero-card ruby { font-family: var(--je-font-jp); font-size: 1.6rem; }
.hero-card rt { font-size: .5em; color: #5c636a; }
.option-row { display: flex; border: 1px solid var(--je-line); border-radius: .6rem; overflow: hidden; margin-top: .5rem; background: #fff; }
.option-row .marker { flex: 0 0 2.6rem; display: flex; align-items: center; justify-content: center; background: #f1ede6; font-family: var(--je-font-jp); font-weight: 600; }
.option-row .text { padding: .6rem .8rem; font-family: var(--je-font-jp); }
.option-row.is-selected { border-color: #2e8b57; }
.option-row.is-selected .marker { background: #2e8b57; color: #fff; }

.section { padding: 3rem 0; }
.section-title { font-weight: 700; margin-bottom: 1.25rem; }
.cat-card { background: #fff; border: 1px solid var(--je-line); border-radius: .9rem; padding: 1.25rem; height: 100%; }
.cat-card .cat-icon { width: 2.6rem; height: 2.6rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: #eef1f7; color: var(--je-indigo); font-size: 1.2rem; margin-bottom: .75rem; }
.empty-state { border: 1px dashed var(--je-line); border-radius: .9rem; padding: 2.5rem 1rem; text-align: center; color: #6c717c; background: #fff; }

.site-footer { border-top: 1px solid var(--je-line); padding: 1.25rem 0; font-size: .925rem; }

/* Isi soal (sama dengan editor) */
.jp rt { font-size: .5em; }
.hide-furigana rt { visibility: hidden; }
.je-blank { display: inline-block; min-width: 3.2em; border-bottom: 2px solid currentColor; text-align: center; margin: 0 .15em; line-height: 1.3; }
.je-blank.je-star { min-width: 2.4em; color: #c0392b; font-weight: 700; }
.jp img { max-width: 100%; height: auto; }
.je-img-s { max-width: min(160px, 100%) !important; }
.je-img-m { max-width: min(360px, 100%) !important; }
.je-img-l { max-width: min(640px, 100%) !important; }

ruby { ruby-align: center; }

/* ---------------------------------------------------------------- Phase 5: halaman peserta */
.jp-line { font-family: var(--je-font-jp); color: var(--je-seal); letter-spacing: .08em; }
.avatar-sm { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--je-indigo); color: #fff; font-weight: 600; font-size: .9rem; }

.pkg-card {
  display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1.15rem;
  background: #fff; border: 1px solid var(--je-line); border-radius: .9rem;
  color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pkg-card:hover, .pkg-card:focus-visible { border-color: #c9c1b3; box-shadow: 0 10px 24px -18px rgba(31, 36, 48, .45); transform: translateY(-1px); color: inherit; }
.pkg-card.is-closed { background: #f3f2ee; border-style: dashed; } /* ditutup: ditandai warna latar, bukan transparansi, agar teks tetap terbaca */
.pkg-card .pkg-name { font-weight: 700; line-height: 1.35; }
.pkg-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: #5b606b; }
.pkg-meta i { margin-right: .2rem; }
.badge.mode-practice { background: #eaf3ec; color: #24704a; font-weight: 600; }
.badge.mode-exam { background: #fbeae7; color: #a23422; font-weight: 600; }

.cat-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.cat-pill { flex: 0 0 auto; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--je-line); background: #fff; color: var(--je-ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.cat-pill .count { color: #5c636a; font-size: .85em; margin-left: .2rem; }
.cat-pill.active { background: var(--je-indigo); border-color: var(--je-indigo); color: #fff; }
.cat-pill.active .count { color: rgba(255, 255, 255, .75); }

.pkg-detail { background: #fff; border: 1px solid var(--je-line); border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 768px) { .pkg-detail { padding: 2rem 2.25rem; } }
.fact { background: var(--je-paper); border-radius: .7rem; padding: .75rem .9rem; height: 100%; }
.fact-label { font-size: .8rem; color: #6c717c; }
.fact-value { font-size: 1.2rem; font-weight: 700; }
.info-row { display: flex; gap: .6rem; align-items: flex-start; color: #4a4f5a; }
.assist-list { list-style: none; padding: 0; margin: 0; }
.assist-list li { display: flex; gap: .6rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid #f0ece5; }
.assist-list li:last-child { border-bottom: 0; }
.assist-list .label { flex: 0 0 9.5rem; color: #5b606b; }
@media (max-width: 575.98px) { .assist-list li { flex-wrap: wrap; } .assist-list .label { flex-basis: calc(100% - 1.6rem); } .assist-list li > span:last-child { padding-left: 1.6rem; font-weight: 500; } }
.start-box { border-top: 1px solid var(--je-line); padding-top: 1.25rem; }

.stat { background: #fff; border: 1px solid var(--je-line); border-radius: .9rem; padding: .9rem 1rem; text-align: center; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .85rem; color: #6c717c; }
.side-card { background: #fff; border: 1px solid var(--je-line); border-radius: .9rem; padding: 1rem 1.1rem; }

.pref-card { background: #fff; border: 1px solid var(--je-line); border-radius: 1rem; padding: 1.5rem; }
.pref-preview { --q-scale: 1; background: #fff; border: 1px solid var(--je-line); border-radius: 1rem; padding: 1.5rem; position: sticky; top: 5rem; }
.pref-preview .q-text { font-size: calc(1.35rem * var(--q-scale)); line-height: 2.1; }
.pref-preview .q-tr { font-size: calc(.95rem * var(--q-scale)); color: #4a4f5a; border-left: 3px solid #d7deeb; padding-left: .75rem; margin-top: .5rem; }
.pref-preview .option-row .text { font-size: calc(1.05rem * var(--q-scale)); }
.btn-primary { --bs-btn-disabled-bg: var(--je-indigo); --bs-btn-disabled-border-color: var(--je-indigo); }
.btn-outline-primary { --bs-btn-color: var(--je-indigo); --bs-btn-border-color: #b9c3d6; --bs-btn-hover-bg: #eef1f7; --bs-btn-hover-color: var(--je-indigo); --bs-btn-hover-border-color: #b9c3d6; --bs-btn-active-bg: var(--je-indigo); --bs-btn-active-border-color: var(--je-indigo); }
.fs-btn { display: flex; flex-direction: column; justify-content: flex-end; padding: .45rem .25rem; }
.fs-btn small { font-size: .78rem; }
.pkg-detail h1 { font-weight: 700; }

/* Logo unggahan (Pengaturan → Umum) */
.brand-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; border-radius: .4rem; }
.brand-logo.brand-mark-lg { height: 48px; max-width: 180px; }
.app-sidebar .brand-image.brand-logo { opacity: 1; max-height: 33px; margin-top: 0; box-shadow: none !important; }

/* Tipografi Jepang: kinsoku (。、ゃ っ ー tidak di awal baris), kata Latin panjang tetap dipenggal */
.jp, .q-text, .q-opt-text, .qa-question, .qa-text { line-break: strict; overflow-wrap: break-word; }
ruby { ruby-position: over; }

/* Aksesibilitas: abu-abu sekunder sedikit lebih gelap agar kontras ≥ 4,5:1 di latar krem/abu */
:root, [data-bs-theme="light"] { --bs-secondary-rgb: 92, 99, 106; --bs-secondary-color: rgba(33, 37, 41, .78); }
.btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a; }
/* Tautan sedikit lebih gelap agar kontras ≥ 4,5:1 di latar krem */
:root { --bs-link-color-rgb: 10, 88, 202; --bs-link-color: #0a58ca; --bs-link-hover-color: #084298; }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }

/* Teks tersembunyi (visually-hidden) di dalam tabel tidak boleh lolos dari area geser tabel */
.table-responsive { position: relative; }