/* Bima Santya identity: solid white, leaf green and the logo's golden yellow. */
:root {
  --ink: #193927;
  --muted: #53675A;
  --subtle: #63796A;
  --purple: #14582D;
  --purple-hover: #0D4522;
  --purple-soft: #EAF5EC;
  --teal: #1D7651;
  --teal-soft: #EAF6ED;
  --amber: #735400;
  --amber-soft: #FFF6CD;
  --white: #FFFFFF;
  --canvas: #F5F8F5;
  --line: #D9E5DB;
  --control-line: #82998A;
  --shadow: 0 7px 22px rgb(13 62 29 / 5%);
}

body { color: var(--ink); }
a { color: var(--purple); }
.sidebar { box-shadow: 2px 0 12px rgb(17 70 34 / 3%); }
.brand { gap: 7px; padding-inline: 3px; }
.brand-mark { width: 54px; height: 54px; border-radius: 0; background: transparent; }
.brand-mark img { display: block; width: 54px; height: 54px; object-fit: contain; }
.mobile-brand-logo { display: none; }
.brand-sub { color: #54705C; }
.nav-btn.active, .nav-btn[aria-current='page'] { background: #E7F3E9; color: #124D29; }
.nav-btn:hover { background: #EFF5F0; }
.side-bottom { padding-top: 8px; }
.side-bottom > span { color: #53735E; font-size: 12px; }
.topbar { border-bottom-color: #DFE9E0; }
.avatar { background: #F9D629; color: #12431E; }
.content { max-width: 1260px; }

/* One clear introduction, one primary action. */
.dashboard-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 34px;
  min-height: 142px;
  padding: 22px 28px;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #0D3B1D;
  border-radius: 17px;
  background: #12431E;
  box-shadow: 0 14px 28px rgb(14 55 26 / 10%);
}
.dashboard-intro .hero-copy { flex: 0 0 auto; min-width: 190px; }
.dashboard-intro .eyebrow { display: block; color: #F8D020; font-size: 11px; letter-spacing: .16em; }
.dashboard-intro h1 { margin: 3px 0 2px; color: #FFFFFF; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; }
.dashboard-intro p { color: #E4F1E7; margin: 0; font-size: 14px; line-height: 1.5; }
.brand-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand-footer img { display: block; width: 100px; height: auto; }
.dashboard-grid { grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr); gap: 18px; }
.picker-card, .progress-card { border-radius: 14px; }
.picker-card { padding: 23px; }
.picker-card > .card-heading { display: flex; align-items: center; margin-bottom: 18px; }
.picker-card > .card-heading h2 { font-size: 21px; }
.field { margin-bottom: 15px; }
.field label { font-size: 13px; }
.field input, .field select { border-color: #9CB1A1; border-radius: 9px; }
.field input:focus, .field select:focus { border-color: #14582D; }
.selected-pack, .selected-pack.math { background: #FFFCED; border: 1px solid #E7D674; padding: 18px; }
.selected-pack h3 { font-size: 21px; margin-bottom: 9px; }
.selected-pack .pack-kicker, .selected-pack.math .pack-kicker { color: #14582D; }
.pack-kicker .badge { background: #E5F4E6; color: #14582D; }
.pack-kicker .badge.draft { background: #FBE7A2; color: #604700; }
.pack-meta { gap: 16px; margin: 8px 0; }
.pack-meta > span { color: #52675A; }
.picker-actions { margin-top: 16px; }
.picker-actions > .btn-primary { border-radius: 9px; }
.save-hint { margin-top: 13px; font-size: 12px; }
.save-hint svg { color: #14582D; }
.progress-card { padding: 19px; }
.progress-card > .card-heading { margin-bottom: 13px; }
.progress-card .card-heading > svg { color: #165B2F; }
.quick-stats > div { border-color: #E0EADF; background: #F9FBF9; }
.quick-stats strong { color: #164B29; }
.resume-list > .resume-row:hover, .recent-list > .recent-row:hover { background: #F1F8F1; border-color: #A8C7AF; }
.info-details { margin-top: 14px; }

/* Gold is reserved for the main action, green for navigation and progress. */
.btn-primary { background: #F8D020; border-color: #E6BD0B; color: #173D21; }
.btn-primary:hover:not(:disabled) { background: #FFE05D; border-color: #D3A800; color: #173D21; box-shadow: 0 5px 13px rgb(178 134 0 / 18%); }
.btn-outline:hover:not(:disabled) { background: #EDF5EE; border-color: #14582D; color: #14582D; }
.btn-soft { background: #E6F4E9; color: #14582D; }
.btn-soft:hover:not(:disabled) { background: #D5EAD9; color: #0D4522; }
.btn-dark { background: #12431E; }
.btn-dark:hover:not(:disabled) { background: #0B3217; }
.filter-btn:hover { color: #12431E; border-color: #12431E; }
.filter-btn.active, .filter-btn[aria-pressed='true'] { border-color: #83B28D; background: #E7F4E8; color: #12431E; }
.section-step, .subject-icon { color: #12431E; background: #E9F4EB; }
.pill.gray { color: #45614E; background: #ECF3ED; }

/* Legible questions with clear, consistent selection states. */
.quiz-toolbar h1 { margin: 0 0 3px; font-size: clamp(22px, 2.6vw, 28px); }
.quiz-toolbar p { margin: 0; font-size: 14px; }
.quiz-progress .progress-wrap, .draft-progress .progress-wrap { background: #DFEADD; }
.progress-fill { background: #1A6938; }
.question-panel, .reading-panel { border-color: #D5E3D8; }
.reading-text { color: #263D2F; line-height: 1.82; }
.reading-panel h2 { margin-bottom: 17px; }
.reading-hint { display: none; }
.question-title { line-height: 1.62; }
.stem-sentence { display: block; }
.stem-sentence + .stem-sentence { margin-top: .55em; }
.option { border-color: #91A999; }
.option:hover { background: #F5FAF4; border-color: #14582D; }
.option.selected, .option:has(input:checked) { color: #193927; background: #FFF9D8; border-color: #14582D; box-shadow: inset 0 0 0 1px #14582D; }
.opt-letter { background: #E9F0EA; color: #31523B; }
.option.selected .opt-letter, .option:has(input:checked) .opt-letter { color: #F8D020; background: #12431E; }
.category-actions label.selected, .category-actions label:has(input:checked) { color: #12431E; background: #FFF9D8; border-color: #14582D; box-shadow: inset 0 0 0 1px #14582D; }
.stimulus-table th { background: #E8F1E9; color: #1B432A; }
.stimulus-table-wrapper { border-color: #9EB6A4; }
.number-btn.answered:not(.active) { color: #14582D; background: #E7F4E8; border-color: #80AE8B; }
.number-btn.active, .number-btn[aria-current='step'] { color: #F8D020; background: #12431E; border-color: #12431E; }
.number-btn:hover { color: #12431E; border-color: #12431E; }
.legend .legend-done { background: #E7F4E8; border-color: #80AE8B; box-shadow: inset 0 -2px #14582D; }
.time-card { border-color: #CBDDCE; }

/* Results open one question at a time, keeping the page scannable. */
.result-hero { border-color: #D7E5D9; background: #ECF5EC; padding: 20px 24px; gap: 20px; }
.score-circle { background: conic-gradient(#1A6938 var(--pct, 0%), #D1E2D4 var(--pct, 0%)); }
.score-circle strong { color: #12431E; }
.result-copy > .eyebrow, .result-copy > h2, .result-copy > p, .review-toolbar .section-caption { display: none; }
.result-stats { margin-top: 0; }
.result-chip { border-color: #CFDDCF; }
.review-list { gap: 9px; margin-top: 15px; }
.review-card { padding: 0; border-color: #D8E4DA; border-left-width: 4px; }
.review-card > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; min-height: 68px; margin: 0; padding: 13px 17px; list-style: none; font-weight: 600; }
.review-card > summary::after { content: '+'; margin: 0; font-size: 23px; color: #14582D; }
.review-card[open] > summary { margin: 0; border-bottom: 1px solid var(--line); }
.review-card[open] > summary::after { content: '−'; }
.review-number { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 9px; color: #12431E; background: #EAF4EB; font-size: 15px; font-weight: 800; }
.review-preview { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #263E2E; font-size: 14px; line-height: 1.45; }
.review-card[open] .review-preview { display: block; overflow: visible; -webkit-line-clamp: unset; }
.review-card .status { white-space: nowrap; font-size: 11px; }
.review-body { padding: 20px 22px 23px; }
.review-body h3 { font-size: 17px; margin: 0 0 16px; }
.review-answer { margin: 14px 0; }
.explanation { border-left-color: #1A6938; color: #2A4833; background: #EFF7F0; }
.explanation h4 { color: #14582D; }
.review-stimulus { background: #F7FAF7; }
.review-option.key, .review-item.ok { border-color: #9DCBAB; background: #F0F9F1; }
.option-explanations > summary { color: #14582D; }
.history-table th { color: #264C31; background: #EAF3EB; }
.history-table th:last-child { position: relative; }
.history-table .history-score { color: #14582D; }
.toast { background: #12431E; }

/* Ruang kelompok: ringan, terpisah dari pengerjaan soal. */
.group-heading { margin-bottom: 16px; }
.cloud-card {
  min-width: 0; padding: 22px; margin-bottom: 16px;
  background: #FFFFFF; border: 1px solid #D9E5DB;
  border-radius: 14px; box-shadow: 0 7px 22px rgb(13 62 29 / 4%);
}
.cloud-card h2 { font-size: 20px; margin: 0 0 16px; }
.cloud-card p { color: #53675A; }
.cloud-login { max-width: 520px; padding: 26px; }
.google-login-btn { width: 100%; margin-top: 16px; min-height: 52px; border: 1px solid #BDCFBF; border-radius: 10px; background: #FFFFFF; color: #193927; }
.google-login-btn:hover:not(:disabled) { background: #F4F9F5; border-color: #14582D; }
.google-g { display: grid; place-items: center; width: 26px; height: 26px; flex: none; background: #FFFFFF; font-size: 23px; font-weight: 900; line-height: 1; color: #4285F4; }
.cloud-login .field { margin: 22px 0 18px; }
.cloud-login .field input, .group-creator input, .group-layout select {
  display: block; width: 100%; min-height: 46px; padding: 10px 12px;
  background: #FFFFFF; border: 1px solid #9CB1A1; border-radius: 9px;
}
.cloud-badge { display: inline-flex; align-items: center; gap: 8px; color: #14582D; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.cloud-badge svg { width: 19px; height: 19px; }
.cloud-message { padding: 11px 13px; margin: 14px 0 0; border: 1px solid #9CC7A5; border-radius: 8px; background: #F1FAF2; color: #14582D !important; font-size: 13px; }
.cloud-error { margin: 11px 0 0; padding: 10px 12px; border: 1px solid #E6A7A7; border-radius: 8px; color: #992929 !important; background: #FFF3F3; font-size: 13px; }
.cloud-account { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; color: #41604C; font-size: 13px; }
.cloud-account svg { width: 17px; height: 17px; color: #18703A; }
.cloud-account .text-button { margin-left: 4px; font-size: 13px; }
.group-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 16px; }
.group-creator { display: flex; align-items: flex-end; gap: 12px; margin-top: 20px; }
.group-creator .field { flex: 1; margin: 0; }
.group-creator .btn { flex: 0 0 auto; }
.group-overview .quick-stats { margin-top: 13px; }
.group-privacy { display: flex; gap: 7px; align-items: flex-start; margin: 18px 0 0; font-size: 12px; }
.group-privacy svg { width: 16px; height: 16px; margin-top: 2px; }
.cloud-results > .row-between { margin-bottom: 17px; }
.cloud-results > .row-between h2 { margin-bottom: 4px; }
.cloud-results > .row-between p { margin: 0; font-size: 13px; }
.group-empty { padding: 28px 15px; color: #53675A; background: #F8FBF8; border: 1px dashed #B8CCBD; border-radius: 9px; text-align: center; font-size: 14px; }
.cloud-results .history-table { min-width: 620px; }

/* Super Admin: mengikuti identitas hijau-putih asli, bukan tema gelap. */
.admin-heading { align-items: center; flex-wrap: wrap; gap: 14px; }
.admin-heading .lead { max-width: 680px; }
.admin-tabs { display: flex; gap: 7px; padding: 6px; margin: 0 0 17px;
  overflow-x: auto; background: #EAF3EB; border: 1px solid #DAE6DC; border-radius: 12px; }
.admin-tab { flex: 1 0 auto; padding: 11px 15px; background: transparent; border: 1px solid transparent;
  border-radius: 8px; color: #3D5B47; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.admin-tab:hover { background: #F7FBF7; color: #12431E; }
.admin-tab.active { background: #FFFFFF; border-color: #A8C9AF; color: #12431E;
  box-shadow: 0 3px 10px rgb(23 75 35 / 7%); }
.admin-tab:focus-visible { outline: 3px solid #D5B614; outline-offset: 1px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin: 0 0 17px; }
.admin-stat { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 20px;
  background: #FFFFFF; border: 1px solid #D9E5DB; border-radius: 13px;
  box-shadow: 0 6px 16px rgb(13 62 29 / 4%); }
.admin-stat span { color: #5C7162; font-size: 13px; font-weight: 600; }
.admin-stat strong { color: #12431E; font-size: clamp(23px, 3vw, 31px); line-height: 1; }
.admin-table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 580px; font-size: 13px; }
.admin-table th, .admin-table td { padding: 13px 12px; border-bottom: 1px solid #E2ECE3; text-align: left; vertical-align: middle; }
.admin-table th { background: #EAF3EB; color: #264C31; font-size: 12px; font-weight: 800; }
.admin-table td { color: #2E4434; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table small { display: block; margin-top: 5px; color: #6A7C6C; font-size: 11px; }
.admin-table td strong { color: #193927; overflow-wrap: anywhere; }
.admin-table .btn-sm { white-space: nowrap; }
.admin-count { display: inline-flex; vertical-align: middle; padding: 3px 9px; margin-left: 5px;
  background: #E6F4E9; border-radius: 99px; color: #14582D; font-size: 12px; }
.admin-status { display: inline-block; padding: 5px 9px; border-radius: 50px; font-size: 12px; font-weight: 800; }
.admin-status.on { color: #14582D; background: #E5F5E9; }
.admin-status.off { color: #8B2929; background: #FFE6E6; }
.admin-search { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-search label { font-size: 13px; font-weight: 700; color: #41604C; }
.admin-search > div { display: flex; gap: 7px; width: min(100%, 590px); }
.admin-search input { flex: 1; min-width: 0; min-height: 41px; padding: 9px 12px;
  background: #FFFFFF; border: 1px solid #9CB1A1; border-radius: 8px; color: #193927; }
.admin-search input:focus-visible { outline: 2px solid #14582D; outline-offset: 1px; }
.admin-bank-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-bank-item { padding: 18px; border: 1px solid #D7E8D9; background: #FAFCFA; border-radius: 12px; }
.admin-bank-item > div { display: flex; align-items: center; gap: 10px; }
.admin-bank-item svg { width: 26px; height: 26px; color: #14582D; }
.admin-bank-item p { margin: 9px 0 0; font-size: 13px; }
.admin-hint { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 5px;
  color: #54705C; font-size: 12px; line-height: 1.6; }
.admin-hint svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.admin-warning { border: 1px solid #E7D17B; background: #FFF9DE; color: #614A00;
  border-radius: 9px; padding: 12px; margin-bottom: 16px; font-size: 13px; }
.admin-loading { min-height: 210px; }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(235px, .8fr); }
}
@media (max-width: 760px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-intro { padding: 20px; }
  .group-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .group-creator { align-items: stretch; flex-direction: column; }
  .group-creator .btn { width: 100%; }
  .admin-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-search { align-items: stretch; flex-direction: column; }
  .admin-search > div { width: 100%; }
}
@media (max-width: 640px) {
  .content { padding-bottom: 16px; }
  .top-left { gap: 5px; }
  .mobile-brand-logo { display: block; width: 34px; height: 34px; object-fit: contain; flex: none; }
  .page-crumb > span, .page-crumb > strong { display: none; }
  .mobile-bottom { justify-content: space-around; gap: 5px; padding-inline: 8px; }
  .mobile-bottom button { max-width: 190px; }
  .mobile-bottom button { font-size: 10px; }
  .cloud-card { padding: 17px; }
  .cloud-results .table-wrap { overflow: visible; }
  .cloud-results .history-table { min-width: 0; }
  .admin-table-scroll { overflow-x: auto; border: 1px solid #D9E5DB; border-radius: 10px; }
  .admin-table { min-width: 560px; }
  .admin-tabs { margin-inline: -2px; }
  .admin-heading .btn { width: 100%; }
  .admin-bank-grid { grid-template-columns: 1fr; }
  .admin-search > div { flex-wrap: wrap; }
  .admin-search input { flex-basis: 100%; }
  .dashboard-intro { display: block; min-height: 0; padding: 20px 18px 16px; margin-bottom: 18px; }
  .dashboard-intro .hero-copy { min-width: 0; }
  .dashboard-intro h1 { font-size: 30px; }
  .dashboard-grid { gap: 15px; }
  .picker-card, .progress-card { padding: 17px; }
  .selected-pack { padding: 16px; }
  .review-card > summary { grid-template-columns: 34px minmax(0, 1fr) 17px; gap: 9px; padding: 12px; }
  .review-number { width: 34px; height: 34px; }
  .review-card .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .review-card > summary::after { grid-column: 3; grid-row: 1 / 3; }
  .review-body { padding: 17px; }
  .result-hero { padding: 17px; gap: 15px; }
  .result-chip { min-width: 78px; padding: 9px 11px; }
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  .history-table { display: block; min-width: 0; width: 100%; }
  .history-table thead { display: none; }
  .history-table tbody { display: grid; gap: 12px; }
  .history-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 14px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
  .history-table td { display: block; padding: 0; border: 0; }
  .history-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .history-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .history-table td:nth-child(3) { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; }
  .history-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; font-size: 12px; }
  .history-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; margin-top: 7px; }
  .history-table td:nth-child(5) .btn { width: 100%; }
}
@media print {
  .dashboard-intro { background: #FFFFFF !important; color: #193927 !important; }
  .dashboard-intro h1 { color: #193927 !important; }
  .review-card > summary::after { display: none; }
  .review-card[open] .review-body { display: block; }
}

/* Dense print styling: complete answers and explanations, with minimal whitespace. */
@media print {
  @page { size: A4 portrait; margin: 7mm 8mm; }
  :root, body { color: #111111; background: #FFFFFF; font-size: 8.5pt; line-height: 1.3; }
  .content { padding: 0 !important; }
  .result-heading { display: block; margin: 0 0 2mm; }
  .result-heading .eyebrow { margin: 0; font-size: 7pt; letter-spacing: .05em; }
  .result-heading .page-title { margin: 0 0 1mm; font-size: 14pt; line-height: 1.15; }
  .result-heading .lead { margin: 0; font-size: 8pt; line-height: 1.25; }
  .version-notice { margin: 1.5mm 0; padding: 1mm 2mm; font-size: 7.5pt; line-height: 1.25; }
  .result-hero {
    display: flex; flex-direction: row; align-items: center; gap: 3mm;
    margin: 2mm 0 3mm; padding: 2mm 3mm; border: 1px solid #B9C8BC;
    border-radius: 0; background: #FFFFFF; break-inside: avoid;
  }
  .score-circle { width: 20mm; height: 20mm; min-width: 20mm; background: #FFFFFF; border: 1px solid #1A6938; }
  .score-circle::before { display: none; }
  .score-circle strong { font-size: 18pt; }
  .score-circle span { margin-top: 0; font-size: 6.5pt; }
  .result-copy { flex: 1; }
  .result-stats { display: flex; flex-wrap: nowrap; gap: 2mm; margin: 0; }
  .result-chip {
    min-width: 0; flex: 1; padding: 1mm 1.5mm; border: 0;
    border-left: 1px solid #C9D8CC; border-radius: 0; background: #FFFFFF;
    font-size: 7.5pt; line-height: 1.15;
  }
  .result-chip strong { margin: 0 0 .5mm; font-size: 12pt; line-height: 1.1; }
  .review-toolbar { display: block; margin: 1mm 0 1.5mm; }
  .review-toolbar h2 { margin: 0; font-size: 11pt; line-height: 1.15; }
  .review-list { display: block; margin: 0; }
  .review-card, .review-card.correct, .review-card.wrong, .review-card.skipped {
    display: block; margin: 0; padding: 0; border: 0; border-top: 1px solid #AEBBAF;
    border-radius: 0; box-shadow: none; background: #FFFFFF; overflow: visible;
    break-inside: auto; page-break-inside: auto;
  }
  .review-card > summary, .review-card[open] > summary {
    display: grid; grid-template-columns: 7mm minmax(0, 1fr) auto;
    align-items: start; gap: 1.5mm; min-height: 0; margin: 0 !important;
    padding: 1.5mm 0 .5mm; border: 0; font-size: 8.5pt; line-height: 1.25;
    break-after: avoid; page-break-after: avoid;
  }
  .review-number { width: 6.5mm; height: 6.5mm; border-radius: 0; font-size: 8pt; }
  .review-preview, .review-card[open] .review-preview {
    display: block; overflow: visible; -webkit-line-clamp: unset;
    color: #111111; font-size: 8.5pt; line-height: 1.25;
  }
  .review-card .status { padding: .5mm 1mm; border-radius: 0; color: #333333; background: #FFFFFF; font-size: 7pt; }
  .review-card > summary::after { display: none !important; }
  .review-body, .review-card[open] .review-body { display: block !important; margin: 0; padding: 0 0 1.5mm 8mm; }
  .review-answer { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2mm; margin: 1mm 0; }
  .answer-box { padding: 0; border: 0; border-radius: 0; background: #FFFFFF; }
  .answer-box > span { display: inline; margin: 0; font-size: 7.5pt; line-height: 1.2; letter-spacing: 0; }
  .answer-box > span::after { content: ": "; }
  .answer-box > strong { display: inline; font-size: 8pt; font-weight: 650; line-height: 1.25; }
  .explanation {
    margin: 1mm 0; padding: 1mm 2mm; border-left: 1.5px solid #14582D;
    border-radius: 0; background: #FFFFFF; color: #222222;
    font-size: 8.5pt; line-height: 1.3;
  }
  .explanation h4 { margin: 0 0 .5mm; color: #193927; font-size: 8pt; line-height: 1.2; }
  .explanation p, .review-option p, .review-item p { margin: 0; font-size: 8pt; line-height: 1.25; }
  .solution-steps, .solution-steps li { color: #222222; font-size: 8pt; line-height: 1.25; }
  .solution-steps ol, ol.solution-steps { margin: .5mm 0; padding-left: 4mm; }
  .solution-steps li + li { margin-top: .5mm; }
  .review-stimulus {
    margin: 1mm 0; padding: 1mm 2mm; border: 1px solid #CBD6CD;
    border-radius: 0; background: #FFFFFF; color: #222222;
    font-size: 8pt; line-height: 1.3;
  }
  .review-stimulus summary { min-height: 0; padding: 0 0 .5mm; font-size: 8pt; line-height: 1.2; }
  .review-stimulus[open] { padding-bottom: 1mm; }
  .review-stimulus.print-duplicate-stimulus { display: none !important; }
  .review-stimulus .reading-text { font-size: 8pt; line-height: 1.3; }
  .review-stimulus .passage-paragraph { margin: .8mm 0; }
  .option-explanations { margin: 1mm 0 0; padding: 0; border-top: 0; }
  .option-explanations > summary { min-height: 0; padding: 0 0 .5mm; font-size: 7.5pt; line-height: 1.2; }
  .review-options, .option-explanations .review-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1mm 2mm; margin: .5mm 0; }
  .review-checks, .option-explanations .review-checks { display: grid; gap: 1mm; margin: .5mm 0; }
  .review-option, .review-item {
    padding: 1mm 1.5mm; border: 1px solid #D7DED8; border-radius: 0;
    background: #FFFFFF; color: #222222; font-size: 8pt; line-height: 1.25;
    break-inside: avoid;
  }
  .review-option-top { display: block; }
  .review-option-top > strong, .review-item strong { color: #111111; font-size: 8pt; line-height: 1.25; }
  .review-option-top > span { display: inline; padding: 0; border: 0; border-radius: 0; background: #FFFFFF; font-size: 7pt; line-height: 1.2; }
  .review-option p, .review-item p { margin-top: .5mm; }
  .review-choice-meta { gap: 1mm 3mm; margin: .5mm 0; font-size: 7.5pt; line-height: 1.2; }
  .choice-status { width: 4mm; font-size: 10pt; }
  .question-media { margin: 1mm 0; }
  .question-media img, .zoomed-image { max-width: 100%; max-height: 65mm; object-fit: contain; }
  .question-media figcaption { margin: .5mm 0; font-size: 7.5pt; }
  .stimulus-table { font-size: 7.5pt; line-height: 1.2; }
  .stimulus-table th, .stimulus-table td { padding: 1mm; }
  .result-actions { display: none !important; }
  .content > .footer-note { display: block !important; margin: 2mm 0 0; font-size: 7pt; }
}
 +/* Identitas akun kecil dan lurus dengan judul, pada layar besar maupun ponsel. */
.brand-mark, .brand-mark img { width: 34px; height: 34px; }
.mobile-brand-logo { width: 28px; height: 28px; }
.header-logout { min-height: 36px; padding: 5px 8px; font-size: 13px; }
.student-identity { display: flex; gap: 11px; align-items: center; padding: 10px 12px;
 margin: 0 0 17px; background: #F2F8F3; border: 1px solid #D6E5D8; border-radius: 10px; }
.student-identity svg { width: 20px; height: 20px; color: #14582D; }
.student-identity strong, .student-identity small { display: block; line-height: 1.35; }
.student-identity strong { font-size: 14px; }
.student-identity small { margin-top: 3px; font-size: 12px; color: #54705C; }
.sync-message { display: inline-block; margin: 0 0 14px; padding: 8px 11px;
  color: #315E3D; background: #F2F8F3; border: 1px solid #D4E6D7; border-radius: 8px; font-size: 13px; }
.sync-message.ok { color: #13642D; }
.sync-message.warning { color: #835100; background: #FFF9E8; border-color: #E9D596; }
.sync-message .text-button { font-size: 13px; }

/* Pintu masuk sesuai rancangan: panel mandiri di atas, dua login di bawah. */
.auth-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  color: #153D25; background: radial-gradient(ellipse 70% 50% at 50% 0%, #E8F4EA 0%, #F6F9F6 85%, #F6F9F6 100%); }
.auth-header { display: flex; gap: 10px; align-items: center; width: min(820px,100%);
  padding: 23px 21px; margin: 0 auto; }
.auth-header img { display: block; width: 36px; height: 36px; object-fit: contain; }
.auth-header > span { color: #12431E; font-size: 18px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.auth-header small { display: block; margin-top: 5px; font-size: 10px; color: #51725A; letter-spacing: .11em; font-weight: 750; }
.auth-content { width: min(810px,100%); margin: auto; padding: 44px 14px 78px; }
.auth-heading { margin: 0 auto 30px; text-align: center; }
.auth-heading .eyebrow { color: #237A44; }
.auth-heading h1 { margin: 7px 0 9px; color: #123E22; font-size: clamp(28px,4vw,39px);
  font-weight: 800; letter-spacing: -.045em; }
.auth-heading p { font-size: 14px; color: #55705D; }
.auth-paths { display: grid; gap: 12px; }
.auth-guest-feature { padding: 16px 13px 12px; border: 1px solid #C5DFCA; border-radius: 12px;
  background: #FFFFFF; box-shadow: 0 10px 28px rgb(13 62 29 / 5%); }
.auth-guest-name { display: flex; align-items: center; gap: 9px; }
.auth-guest-name svg { width: 16px; height: 16px; flex: none; }
.auth-guest-name h2 { margin: 0; font-size: 16px; font-weight: 780; color: #153D25; }
.auth-guest-feature p { margin: 12px 0 10px; font-size: 14px; color: #5B7061; }
.auth-guest-cta { display: block; width: 100%; min-height: 50px; padding: 12px 15px;
  border: 0; border-radius: 9px; background: #FFCC00; color: #164B29;
  font: inherit; font-weight: 780; font-size: 15px; cursor: pointer; }
.auth-guest-cta:hover { background: #FFDD41; }
.auth-guest-cta:focus-visible, .auth-role-tile:focus-visible, .auth-back:focus-visible {
  outline: 3px solid #217443; outline-offset: 3px; }
.auth-role-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.auth-role-tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 102px; padding: 13px 10px; border: 1px solid #D8E6DB; border-radius: 12px;
  background: #FFFFFF; color: #153D25; font: inherit; cursor: pointer; }
.auth-role-tile:hover, .auth-role-tile.selected { border-color: #84B796; background: #EDF7EF; }
.auth-role-tile svg { width: 19px; height: 19px; margin-bottom: 9px; color: #176335; }
.auth-role-tile strong { font-size: 15px; font-weight: 750; }
.auth-role-tile small { margin-top: 9px; font-size: 12px; color: #61766A; }
.auth-role-tile:disabled, .auth-guest-cta:disabled { cursor: not-allowed; opacity: .55; }
.student-login-panel { padding: 20px; border: 1px solid #C5DFCA; border-radius: 12px;
  background: #FFFFFF; }
.student-login-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.student-login-heading h2 { color: #153D25; font-size: 19px; margin: 0 0 5px; }
.student-login-heading p { color: #5B7061; font-size: 13px; margin: 0 0 16px; }
.auth-back { padding: 6px 9px; border: 1px solid #C5DFCA; border-radius: 7px;
  background: #F5FAF6; color: #164B29; font: inherit; font-size: 12px; cursor: pointer; }
.auth-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.auth-form .field { margin: 0; }
.student-login-panel .field label { color: #153D25; }
.auth-form .field input { min-height: 46px; background: #FFFFFF; color: #203C27; }
.auth-form > button { grid-column: 1 / -1; }
.auth-footer { padding: 18px 24px 25px; color: #607569; font-size: 12px; text-align: center; }
.auth-loading { max-width: 440px; margin: 0 auto; padding: 20px 28px; color: #3C5D45;
  background: #FFFFFF; border: 1px solid #D4E4D7; border-radius: 12px; text-align: center; }
.auth-error { max-width: 650px; margin: 20px auto 0; }
.group-overview .quick-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.group-overview .quick-stats > div { padding: 12px 9px; }
.group-overview .quick-stats strong { font-size: 25px; }
.student-manager > .row-between, .student-manager > .row-between p { margin: 0 0 14px; }
.student-manager > .row-between p { color: #5B7061; font-size: 13px; }
.student-form { display: flex; align-items: end; gap: 13px; margin: 3px 0 24px; }
.student-form .field { flex: 1; margin: 0; }
.student-form .btn { flex: none; }
.student-table { min-width: 590px; }
.student-table td { vertical-align: middle; }
.student-table td:last-child { text-align: right; }
.student-index { margin-right: 6px; color: #698071; font-size: 12px; font-weight: 750; }
.account-username { padding: 5px 7px; color: #13512A; background: #EFF7F0; border-radius: 6px;
  font-size: 13px; user-select: all; white-space: nowrap; }
.credential-card { margin: 15px 0 24px; padding: 19px 20px; border: 1px solid #E4CB55;
  border-radius: 12px; background: #FFFCED; }
.credential-card h3 { margin: 3px 0 0; font-size: 19px; }
.credential-card > p { margin: 10px 0 15px; font-size: 13px; }
.credential-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0 0 15px; }
.credential-fields > div { padding: 11px; border: 1px solid #E1D899; border-radius: 8px; background: #FFFFFF; }
.credential-fields span { display: block; margin-bottom: 5px; font-size: 12px; color: #5C6D57; }
.credential-fields strong { display: block; overflow-wrap: anywhere; font-size: 15px; user-select: all; }
.login-print-panel { margin: 9px 0 25px; padding: 18px 19px; border: 1px solid #C5DCCB;
  background: #F5FAF6; border-radius: 12px; }
.login-print-panel h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 0 0 6px; }
.login-print-panel h3 svg { width: 20px; height: 20px; color: #176335; }
.login-print-panel .row-between { align-items: flex-start; }
.login-print-panel .row-between p { margin: 0 0 13px; font-size: 13px; color: #52735B; }
.login-print-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 5px 0 12px; }
.login-print-actions .btn { min-height: 43px; }
.login-print-note { display: flex; gap: 8px; margin: 0; color: #5B6F61;
  font-size: 12px; line-height: 1.5; }
.login-print-note svg { flex: 0 0 17px; width: 17px; height: 17px; }
@media (max-width: 760px) {
  .auth-content { padding: 24px 18px 55px; }
  .auth-header { padding: 18px; }
  .auth-heading { margin-bottom: 23px; }
  .auth-heading h1 { font-size: 30px; }
  .auth-form { grid-template-columns: minmax(0,1fr); }
  .student-form { display: grid; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .student-form .btn { width: 100%; }
  .login-print-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .login-print-actions .btn { width: 100%; }
  .login-print-panel .row-between { gap: 8px; }
  .student-table { display: block; min-width: 0; width: 100%; }
  .student-table thead { display: none; }
  .student-table tbody { display: grid; gap: 10px; }
  .student-table tr { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px;
    padding: 13px; border: 1px solid #DCE8DE; border-radius: 11px; }
  .student-table td { display: block; padding: 0; border: 0; }
  .student-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .student-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .student-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .student-table td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; text-align: left; }
  .student-table td:nth-child(4) .btn { width: 100%; }
  .group-overview .quick-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 420px) {
  .credential-fields { grid-template-columns: minmax(0,1fr); }
  .group-overview .quick-stats strong { font-size: 20px; }
  .top-right .participant-name { max-width: 125px; font-size: 12px; }
  .header-logout { font-size: 12px; }
}