/* Theme styles affect the application UI only; the printable LJK is a separate document. */
html[data-ui-design] {background:var(--bg-body,#fff);}
html[data-ui-design] body {--shadow:none;--score-shadow:none;--panel-radius:4px;--bg-body:#fafaf8;--bg-card:#fff;--bg-input:#fff;--text-main:#191c21;--text-muted:#56606b;--border:#9aa2aa;--ui-line:#1e242b;background:var(--bg-body);}
html[data-ui-design] body.dark-mode {--bg-body:#14171b;--bg-card:#1e2228;--bg-input:#252a31;--text-main:#f4f5f7;--text-muted:#b9c2ce;--border:#82909f;--ui-line:#b7c2cd;}
html[data-ui-design] body::before {display:none!important;}
html[data-ui-design] body .header,html[data-ui-design] body .bottom-nav {background:var(--bg-card);box-shadow:none!important;}
html[data-ui-design] body .header {border-bottom:1px solid var(--ui-line);}
html[data-ui-design] body .bottom-nav {border-top:1px solid var(--ui-line);}
html[data-ui-design] body .container .card {background:var(--bg-card)!important;border:1px solid var(--ui-line)!important;border-radius:4px!important;box-shadow:none!important;}
html[data-ui-design] body .input-css,html[data-ui-design] body .correction-picker-trigger,html[data-ui-design] body .table-container,html[data-ui-design] body .score-card {border-radius:4px!important;box-shadow:none!important;}
html[data-ui-design] body .btn-utama,html[data-ui-design] body .rekap-action-btn {border-radius:4px!important;box-shadow:none!important;}
html[data-ui-design] body .sub-nav-container {background:transparent;border-radius:0!important;border-bottom:1px solid var(--ui-line);padding:0;}
html[data-ui-design] body .sub-nav-btn,html[data-ui-design] body .sub-nav-btn.active {background:transparent;box-shadow:none;border-radius:0;}
html[data-ui-design] body .scan-setting-card {border-radius:4px!important;background:var(--bg-card);color:var(--text-main);}
html[data-ui-design] body .scan-setting-label {color:var(--text-main);}
html[data-ui-design] body #statusSenter.off,html[data-ui-design] body #statusSuara.off {color:var(--text-muted);}
html[data-ui-design] body #wadahKamera {border-radius:4px!important;box-shadow:none!important;outline:1px solid var(--ui-line);}
html[data-ui-design] body #btnNyalakan,html[data-ui-design] body #statusPindai {border-radius:4px!important;}
html[data-ui-design] body .swal2-popup {border:1px solid var(--ui-line);border-radius:4px!important;background:var(--bg-card);color:var(--text-main);}
html[data-ui-design] body .swal2-title,html[data-ui-design] body .swal2-html-container {color:var(--text-main);}
html[data-ui-design] body :is(button,input,select,textarea,a):focus-visible {outline:2px solid var(--primary);outline-offset:3px;}
.scan-ready-placeholder {box-sizing:border-box;position:relative;display:flex;min-height:260px;padding:28px 16px;margin:11px 0;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--bg-card);border:1px solid var(--ui-line);border-radius:4px;color:var(--text-main);}
.scan-ready-placeholder[hidden] {display:none!important;}
.scan-ready-placeholder svg {width:54px;height:68px;margin-bottom:16px;color:var(--text-muted);}
.scan-ready-placeholder h3 {margin:0;font-size:17px;line-height:1.4;}
.scan-ready-placeholder p {margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted);}
/* Editor chrome only: the paper iframe retains all original print/scanner geometry. */
html[data-ui-design] body > header,html[data-ui-design] body aside {background:var(--bg-card);border-color:var(--ui-line);}
html[data-ui-design] body .panel {background:var(--bg-card);border:1px solid var(--ui-line);border-radius:4px;box-shadow:none;}
html[data-ui-design] body > header button,html[data-ui-design] body aside button,html[data-ui-design] body aside select,html[data-ui-design] body aside input:not([type=range]):not([type=checkbox]),html[data-ui-design] body aside textarea {border:1px solid var(--ui-line);border-radius:4px;background:var(--bg-input);color:var(--text-main);}
html[data-ui-design] body {--ink:var(--text-main);--muted:var(--text-muted);--accent:var(--primary);}
html[data-ui-design] body #workspace {background:var(--bg-body);}
@media(max-width:360px) {.scan-ready-placeholder {min-height:220px;padding:22px 11px;}}

html[data-ui-design="outline"] body {--ui-line:#242424;--border:#767676;--bg-body:#fbfaf7;}
html[data-ui-design="outline"] body.dark-mode {--ui-line:#b9c2cc;--border:#929dab;--bg-body:#14171b;}
html[data-ui-design="outline"] body .container .card {border-width:1.5px!important;}
html[data-ui-design="outline"] body .scan-settings-row {gap:0;border:1.5px solid var(--ui-line);background:var(--bg-card);border-radius:0;}
html[data-ui-design="outline"] body .scan-settings-row .scan-setting-card {border:0;border-radius:0!important;min-height:58px;padding:11px;}
html[data-ui-design="outline"] body .scan-settings-row .scan-setting-card:first-child {border-right:1.5px solid var(--ui-line);}
html[data-ui-design="outline"] body .scan-mode-control {border:1.5px solid var(--ui-line);min-height:48px;}
html[data-ui-design="outline"] body .scan-setting-label {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;}
html[data-ui-design="outline"] body .btn-utama {border:1.5px solid var(--ui-line);background:var(--bg-card)!important;color:var(--text-main)!important;}
html[data-ui-design="outline"] body #statusPindai {border:1.5px solid var(--ui-line)!important;background:var(--bg-card)!important;color:var(--text-main)!important;}
html[data-ui-design="outline"] body .btn-utama:hover {background:var(--bg-input)!important;}
html[data-ui-design="outline"] body .scan-ready-placeholder {border:1.5px solid var(--ui-line);border-radius:0;min-height:290px;}
html[data-ui-design="outline"] body .scan-ready-placeholder svg {color:var(--text-main);}
html[data-ui-design="outline"] body .header .app-title {font-weight:800;}
html[data-ui-design="outline"] body >header button.primary {background:var(--bg-card);color:var(--text-main);}


html[data-ui-design="modular"] body {--bg-body:#f2f5fa;--bg-input:#f7f9fc;--ui-line:#cbd5e1;--border:#cbd5e1;--text-main:#172334;--text-muted:#526172;--panel-radius:12px;}
html[data-ui-design="modular"] body.dark-mode {--bg-body:#121820;--bg-card:#202a36;--bg-input:#263242;--ui-line:#526276;--border:#526276;--text-main:#f0f4fa;--text-muted:#bac6d4;}
html[data-ui-design="modular"] body .container .card {border:1px solid var(--ui-line)!important;border-radius:12px!important;box-shadow:0 3px 10px #18284208!important;}
html[data-ui-design="modular"] body .scan-setting-card {border:1px solid var(--ui-line);border-radius:12px!important;background:var(--bg-card);}
html[data-ui-design="modular"] body .scan-settings-row {gap:11px;}
html[data-ui-design="modular"] body .btn-utama,html[data-ui-design="modular"] body #btnNyalakan,html[data-ui-design="modular"] body #statusPindai,html[data-ui-design="modular"] body .input-css {border-radius:12px!important;}
html[data-ui-design="modular"] body .scan-ready-placeholder {border-radius:12px;min-height:290px;box-shadow:0 3px 10px #18284208;}
html[data-ui-design="modular"] body .scan-ready-placeholder svg {color:var(--primary);}
html[data-ui-design="modular"] body .panel {border-radius:12px;}
.theme-settings label {display:block;font-size:13px;font-weight:700;margin-bottom:8px;}
.container .theme-settings h3 {margin-top:0;margin-bottom:11px;font-size:15px;font-weight:700;line-height:1.4;}
.theme-settings .input-css {margin:0;min-height:44px;}
.theme-settings p {font-size:11px;line-height:1.5;color:var(--text-muted);margin:8px 0 0;}
/* Keep destructive actions visually distinct in the outline theme. */
html[data-ui-design="outline"] body {--ui-danger:#b42318;}
html[data-ui-design="outline"] body.dark-mode {--ui-danger:#ff887f;}
html[data-ui-design="outline"] body .btn-utama[style*="var(--danger)"] {color:var(--ui-danger)!important;border-color:var(--ui-danger)!important;}
html[data-ui-design] body {min-height:100dvh;}
html[data-ui-design="outline"] body .switch input:not(:checked) + .slider {background:var(--bg-card);border:1px solid var(--ui-line);box-sizing:border-box;}
html[data-ui-design="outline"] body .switch input:not(:checked) + .slider:before {background:var(--text-main);}
html[data-ui-design] body .app-version-badge {background:#e5e5ea;border-color:#e5e5ea;color:#007aff;}
html[data-ui-design] body.dark-mode .app-version-badge {background:#38383a;border-color:#38383a;color:#79b9ff;}
/* An app-owned, keyboard-operable menu instead of the OS/browser select popup. */
.theme-checklist {display:grid;gap:8px;}
.theme-option {display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--ui-line);border-radius:var(--action-radius,4px);background:var(--bg-card);color:var(--text-main);text-align:left;cursor:pointer;box-sizing:border-box;font-family:inherit;font-size:13px;line-height:1.3;font-weight:600;}
.theme-option:hover {background:var(--bg-input);}
.theme-option:focus-visible {outline:2px solid var(--primary);outline-offset:2px;}
.theme-option[aria-checked=true] {background:var(--bg-input);color:var(--primary);border-color:var(--primary);}
.theme-check {display:flex;align-items:center;justify-content:center;margin-left:auto;width:20px;height:20px;box-sizing:border-box;border:1.5px solid var(--ui-line);border-radius:3px;flex-shrink:0;color:transparent;font-size:13px;}
.theme-option[aria-checked=true] .theme-check {background:var(--primary);border-color:var(--primary);color:var(--bg-card);}
.theme-swatch {width:21px;height:21px;box-sizing:border-box;border:1px solid #657080;border-radius:3px;flex:0 0 21px;}
.theme-swatch-modular {background:linear-gradient(135deg,#fff 50%,#007aff 50%);border-radius:6px;}
.theme-swatch-outline {background:#fff;border:2px solid #222;}
.theme-swatch-retro {background:linear-gradient(135deg,#f5e9d5 50%,#b74e21 50%);border-color:#805939;}
.theme-swatch-brutalist {background:linear-gradient(135deg,#d8f14a 50%,#d7c8f5 50%);border:2px solid #222;box-shadow:2px 2px #222;border-radius:0;}
/* Match ALL report actions to the outline vocabulary, including per-student actions. */
html[data-ui-design="outline"] body .rekap-action-btn,
html[data-ui-design="outline"] body #tabelRiwayat .wa-btn,
html[data-ui-design="outline"] body #tabelRiwayat .pdf-btn {background:var(--bg-card)!important;color:var(--text-main)!important;border:1.5px solid var(--ui-line)!important;border-radius:4px!important;box-shadow:none!important;}
html[data-ui-design="outline"] body .rekap-delete-btn {color:var(--ui-danger)!important;border-color:var(--ui-danger)!important;}
html[data-ui-design="outline"] body #tabelRiwayat .wa-btn:hover,
html[data-ui-design="outline"] body #tabelRiwayat .pdf-btn:hover {transform:none!important;background:var(--bg-input)!important;}
/* Warm retro: ivory, ink-brown, editorial title, burnt-orange actions. */
html[data-ui-design="retro"] body {--bg-body:#f6efe3;--bg-card:#fffaf1;--bg-input:#f7eddf;--text-main:#3b3028;--text-muted:#725b49;--ui-line:#93765f;--border:#af9680;--primary:#b74e21;--ui-action:#a64620;}
html[data-ui-design="retro"] body.dark-mode {--bg-body:#211b17;--bg-card:#30261f;--bg-input:#3b2f25;--text-main:#f5ebdf;--text-muted:#d1bbaa;--ui-line:#af8b6d;--border:#9e8169;--primary:#f1a880;--ui-action:#a64620;}
html[data-ui-design="retro"] body .header .app-title {font-family:Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:0;}
html[data-ui-design="retro"] body .container .card,html[data-ui-design="retro"] body .scan-setting-card,html[data-ui-design="retro"] body .input-css,html[data-ui-design="retro"] body .scan-ready-placeholder,html[data-ui-design="retro"] .theme-checklist,html[data-ui-design="retro"] .theme-checklist {border-radius:6px!important;border-color:var(--ui-line);}
html[data-ui-design="retro"] body .btn-utama:not(.btn-outline),html[data-ui-design="retro"] body #btnNyalakan,html[data-ui-design="retro"] body #statusPindai {background:var(--ui-action)!important;color:#fff!important;border-radius:6px!important;}
html[data-ui-design="retro"] body .scan-ready-placeholder svg {color:var(--text-muted);}
html[data-ui-design="retro"] body .rekap-download-btn {background:var(--ui-action);}
/* Neo-brutalist: lime/lavender, hard shadows, thick outlines, compact geometry. */
html[data-ui-design="brutalist"] body {--bg-body:#faf6e9;--bg-card:#fffdf6;--bg-input:#f4f0e5;--text-main:#171717;--text-muted:#515151;--ui-line:#202020;--border:#767676;--primary:#0058c9;--brutal-lime:#d8f14a;--brutal-lavender:#d7c8f5;}
html[data-ui-design="brutalist"] body.dark-mode {--bg-body:#151515;--bg-card:#252525;--bg-input:#303030;--text-main:#f7f4eb;--text-muted:#c6c3b9;--ui-line:#b9b9b1;--border:#96968d;--primary:#84b6ff;--brutal-lime:#d8f14a;--brutal-lavender:#d7c8f5;}
html[data-ui-design="brutalist"] body .header .app-title {font-weight:800;letter-spacing:-.6px;}
html[data-ui-design="brutalist"] body .container .card,html[data-ui-design="brutalist"] body .scan-setting-card,html[data-ui-design="brutalist"] body .scan-ready-placeholder {border:2px solid var(--ui-line)!important;border-radius:3px!important;box-shadow:3px 3px var(--ui-line)!important;}
html[data-ui-design="brutalist"] body .scan-settings-row .scan-setting-card:first-child {background:var(--brutal-lime);color:#171717;}
html[data-ui-design="brutalist"] body .scan-settings-row .scan-setting-card:last-child {background:var(--brutal-lavender);color:#171717;}
html[data-ui-design="brutalist"] body .scan-settings-row .scan-setting-label,html[data-ui-design="brutalist"] body .scan-settings-row .scan-setting-state.off {color:#252525;}
html[data-ui-design="brutalist"] body #btnNyalakan,html[data-ui-design="brutalist"] body #statusPindai {background:var(--brutal-lime)!important;color:#171717!important;border:2px solid var(--ui-line)!important;box-shadow:3px 3px var(--ui-line)!important;border-radius:3px!important;}
html[data-ui-design="brutalist"] body .theme-checklist,html[data-ui-design="brutalist"] body .theme-checklist {border:2px solid var(--ui-line);border-radius:3px;box-shadow:3px 3px var(--ui-line);}
html[data-ui-design="brutalist"] body .btn-utama {border:2px solid var(--ui-line);border-radius:3px!important;}

html[data-ui-design="retro"] body .btn-utama[style*="background:var(--danger)"] {background:#b42318!important;}
html[data-ui-design="outline"] body .rekap-action-btn {box-sizing:border-box;}
/* Status colors follow the bright tile, even while the rest of the UI is dark. */
html[data-ui-design="brutalist"] body .scan-settings-row .scan-setting-card {--text-main:#171717;--text-muted:#333333;--success:#34C759;--warning:#854d0e;}
/* Unified action tokens: all skins share typography, sizing and interaction states. */
html[data-ui-design] body {--action-bg:#0065d9;--action-fg:#fff;--action-line:#0065d9;--action-secondary-bg:var(--bg-card);--action-secondary-fg:var(--primary);--action-secondary-line:var(--primary);--action-radius:4px;--action-border:1.5px;--action-shadow:none;--action-danger-bg:#fff5f4;--action-danger-fg:#b42318;--action-danger-line:#b42318;--action-paused-bg:var(--bg-card);--action-paused-fg:var(--text-main);--action-paused-line:var(--primary);}
html[data-ui-design] body.dark-mode {--action-bg:#1769d4;--action-fg:#fff;--action-secondary-fg:#91c4ff;--action-secondary-line:#91c4ff;--action-danger-bg:#382222;--action-danger-fg:#ffb4ac;--action-danger-line:#ffb4ac;--action-paused-line:#91c4ff;}
html[data-ui-design="modular"] body {--action-radius:12px;--action-shadow:0 2px 5px #14284410;}
html[data-ui-design="outline"] body {--action-bg:var(--bg-card);--action-fg:var(--text-main);--action-line:var(--ui-line);--action-secondary-bg:var(--bg-card);--action-secondary-fg:var(--text-main);--action-secondary-line:var(--ui-line);--action-danger-bg:var(--bg-card);}
html[data-ui-design="outline"] body.dark-mode {--action-bg:var(--bg-card);--action-fg:var(--text-main);--action-line:var(--ui-line);--action-secondary-fg:var(--text-main);--action-secondary-line:var(--ui-line);--action-danger-bg:var(--bg-card);}
html[data-ui-design="retro"] body {--action-bg:#a64620;--action-line:#a64620;--action-radius:6px;--action-secondary-fg:var(--text-main);--action-secondary-line:var(--ui-line);--action-paused-line:var(--ui-line);}
html[data-ui-design="brutalist"] body {--action-bg:#d8f14a;--action-fg:#171717;--action-line:var(--ui-line);--action-secondary-bg:#d7c8f5;--action-secondary-fg:#171717;--action-secondary-line:var(--ui-line);--action-radius:3px;--action-border:2px;--action-shadow:3px 3px var(--ui-line);--action-danger-line:var(--ui-line);--action-paused-bg:#d7c8f5;--action-paused-fg:#171717;--action-paused-line:var(--ui-line);}
html[data-ui-design="brutalist"] body.dark-mode {--action-bg:#d8f14a;--action-fg:#171717;--action-line:var(--ui-line);--action-secondary-bg:#d7c8f5;--action-secondary-fg:#171717;--action-secondary-line:var(--ui-line);--action-danger-line:var(--ui-line);--action-paused-bg:#d7c8f5;--action-paused-fg:#171717;--action-paused-line:var(--ui-line);}
html[data-ui-design] body .ui-action.ui-action,
html[data-ui-design] body #btnNyalakan.ui-action.ui-action,
html[data-ui-design] body #statusPindai.ui-action.ui-action,
html[data-ui-design] body #tabelRiwayat .ui-action.ui-action {box-sizing:border-box!important;min-height:44px!important;height:auto!important;max-width:100%;padding:10px 12px!important;font-family:inherit!important;font-size:13px!important;font-weight:700!important;line-height:20px!important;border:var(--action-border) solid var(--action-line)!important;border-radius:var(--action-radius)!important;background:var(--action-bg)!important;color:var(--action-fg)!important;box-shadow:var(--action-shadow)!important;text-decoration:none;white-space:normal;gap:6px!important;cursor:pointer;transition:opacity .15s ease,transform .15s ease;}
html[data-ui-design] body .ui-action.ui-action[data-action-kind="secondary"] {background:var(--action-secondary-bg)!important;color:var(--action-secondary-fg)!important;border-color:var(--action-secondary-line)!important;}
html[data-ui-design] body .ui-action.ui-action[data-action-kind="danger"],
html[data-ui-design] body #tabelRiwayat .ui-action.ui-action[data-action-kind="danger"] {background:var(--action-danger-bg)!important;color:var(--action-danger-fg)!important;border-color:var(--action-danger-line)!important;}
html[data-ui-design] body #statusPindai.ui-action.ui-action[aria-pressed="true"] {background:var(--action-paused-bg)!important;color:var(--action-paused-fg)!important;border-color:var(--action-paused-line)!important;}
html[data-ui-design] body .ui-action.ui-action svg {width:16px!important;height:16px!important;flex-shrink:0;}
html[data-ui-design] body .ui-action.ui-action:not(:disabled):hover {opacity:.88;transform:none!important;}
html[data-ui-design] body .ui-action.ui-action:disabled {opacity:.48!important;cursor:not-allowed!important;box-shadow:none!important;}
html[data-ui-design] body .ui-action.ui-action:focus-visible {outline:2px solid var(--primary);outline-offset:3px;}
html[data-ui-design] body .ui-action.ui-action.ui-icon-action,
html[data-ui-design] body #tabelRiwayat .ui-action.ui-action.ui-icon-action {min-width:44px!important;min-height:44px!important;padding:8px!important;}
html[data-ui-design] body .ui-choice-card.ui-action.ui-action {min-height:74px!important;background:var(--action-secondary-bg)!important;color:var(--text-main)!important;border-color:var(--action-secondary-line)!important;text-align:left;}
html[data-ui-design] body .ui-choice-card.ui-action.ui-action[aria-checked="true"] {border-width:2px!important;border-color:var(--primary)!important;}
html[data-ui-design] body .ui-choice-card.ui-action.ui-action svg {width:20px!important;height:20px!important;}
html[data-ui-design] body .ui-choice-card .export-format-icon,html[data-ui-design] body .ui-choice-card .wa-share-icon {width:32px;height:32px;flex:0 0 32px;border-radius:var(--action-radius);}
html[data-ui-design] body .input-css,html[data-ui-design] body .theme-checklist {border-radius:var(--action-radius)!important;}
/* Narrow report toolbars keep all three action names and icons without truncation. */
@media(max-width:430px){html[data-ui-design] body .rekap-toolbar-actions .ui-action.ui-action {flex-direction:column!important;min-height:56px!important;padding:6px 4px!important;gap:3px!important;}}
/* Review choices keep their selected-state semantics and use the skin's geometry. */
html[data-ui-design] body .scan-review-option,html[data-ui-design] body .scan-student-card {border-radius:var(--action-radius);font-size:13px;}
html[data-ui-design="modular"] body:not(.dark-mode) {--action-secondary-fg:#005eb8;}

/* Compact history cells: scores and student actions use identical theme geometry. */
html[data-ui-design] body #tabelRiwayat .badge-score,
html[data-ui-design] body #tabelRiwayat .ui-action.ui-action.ui-icon-action {
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;min-width:34px!important;
    height:32px!important;min-height:32px!important;
    padding:0!important;
    font-family:inherit!important;font-size:13px!important;
    font-weight:700!important;line-height:20px!important;
    border:var(--action-border) solid var(--action-line)!important;
    border-radius:var(--action-radius)!important;
    background:var(--action-bg)!important;color:var(--action-fg)!important;
    box-shadow:var(--action-shadow)!important;
}
/* Scoring fields share the same box geometry in every skin. */
html[data-ui-design] body #inputKKM,
html[data-ui-design] body #sistemPenilaian-trigger,
html[data-ui-design] body #kodePaketSoal,
html[data-ui-design] body #pilihPaketSoal-trigger {box-sizing:border-box;width:100%;height:46px;min-height:46px;padding:9px 13px;font-size:15px;border:1.5px solid var(--border);border-radius:var(--action-radius)!important;background:var(--bg-input);color:var(--text-main);}

/* Match label-to-field spacing and compact report metadata. */
html[data-ui-design] body #inputKKM {margin-top:0;}
html[data-ui-design] body .rekap-info .rekap-summary {display:block;margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;}
html[data-ui-design] body .rekap-info .rekap-summary span {text-align:left;}

/* Three distinct UI skins; printed LJK coordinates remain in a separate document. */
.theme-swatch-paper {background:#fcfbf7;border-color:#243c5a;border-radius:0;}
.theme-swatch-focus {background:linear-gradient(135deg,#101d2c 50%,#2ac5e5 50%);border-color:#4a647e;}
.theme-swatch-bauhaus {background:linear-gradient(135deg,#f6ca39 50%,#004ed1 50%);border:2px solid #191919;border-radius:0;}
html[data-ui-design="paper"] body,html[data-ui-design="paper"] body.dark-mode {--bg-body:#fcfbf7;--bg-card:#fffefa;--bg-input:#faf9f5;--text-main:#172b43;--text-muted:#556271;--ui-line:#33455c;--border:#8090a0;--primary:#244b7d;--action-bg:var(--bg-card);--action-fg:var(--text-main);--action-line:var(--ui-line);--action-secondary-bg:var(--bg-card);--action-secondary-fg:var(--text-main);--action-secondary-line:var(--ui-line);--action-radius:2px;--action-shadow:none;--action-danger-bg:var(--bg-card);--action-danger-fg:#a32320;--action-danger-line:#a32320;}
html[data-ui-design="paper"] body.dark-mode {--bg-body:#171d25;--bg-card:#202833;--bg-input:#26303d;--text-main:#edf1f5;--text-muted:#bdc8d4;--ui-line:#a8b5c4;--border:#788798;--primary:#aac9ef;--action-danger-fg:#ffb4ab;--action-danger-line:#ffb4ab;}
html[data-ui-design="paper"] body .header .app-title {font-family:Georgia,'Times New Roman',serif;letter-spacing:0;}
html[data-ui-design="paper"] body .container .card {border-radius:2px!important;box-shadow:none!important;border-color:var(--ui-line)!important;}
html[data-ui-design="paper"] body .rekap-card {border-left:0!important;border-right:0!important;}
html[data-ui-design="paper"] body .rekap-info {background:transparent!important;}
html[data-ui-design="paper"] body .sub-nav-container {border-bottom-color:var(--ui-line);}
html[data-ui-design="focus"] body,html[data-ui-design="focus"] body.dark-mode {--bg-body:#0b1522;--bg-card:#112238;--bg-input:#172b42;--text-main:#f2f6fc;--text-muted:#b1c4dc;--ui-line:#3f5a76;--border:#56708c;--primary:#39cbe8;--action-bg:#174b77;--action-fg:#effbff;--action-line:#39cbe8;--action-secondary-bg:#142e47;--action-secondary-fg:#79e3f4;--action-secondary-line:#47839d;--action-radius:10px;--action-shadow:none;--action-danger-bg:#4b2029;--action-danger-fg:#ffbec8;--action-danger-line:#fa8d9e;--action-paused-bg:#172b42;--action-paused-fg:#bdeff6;--action-paused-line:#39cbe8;}
html[data-ui-design="focus"] body.dark-mode {--bg-body:#070f19;--bg-card:#0e1c2e;--bg-input:#14263b;}
html[data-ui-design="focus"] body .container .card,html[data-ui-design="focus"] body .scan-setting-card {border-radius:10px!important;border-color:var(--ui-line)!important;box-shadow:none!important;}
html[data-ui-design="focus"] body .header .app-title {letter-spacing:0;font-weight:800;}
html[data-ui-design="focus"] body #tabelRiwayat td:first-child,html[data-ui-design="focus"] body .badge-score {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;}
html[data-ui-design="focus"] body .nav-item.active {color:#39cbe8;}
html[data-ui-design="focus"] body .sub-nav-btn.active {color:#39cbe8;border-bottom:2px solid #39cbe8;}
html[data-ui-design="bauhaus"] body,html[data-ui-design="bauhaus"] body.dark-mode {--bg-body:#faf6e9;--bg-card:#fffdf6;--bg-input:#f8f3e6;--text-main:#171717;--text-muted:#505050;--ui-line:#191919;--border:#777;--primary:#004ed1;--action-bg:#004ed1;--action-fg:#fff;--action-line:#191919;--action-secondary-bg:#f6ca39;--action-secondary-fg:#171717;--action-secondary-line:#191919;--action-radius:0px;--action-border:2px;--action-shadow:none;--action-danger-bg:#c33c13;--action-danger-fg:#fff;--action-danger-line:#191919;--action-paused-bg:#f6ca39;--action-paused-fg:#171717;--action-paused-line:#191919;}
html[data-ui-design="bauhaus"] body.dark-mode {--bg-body:#151515;--bg-card:#252525;--bg-input:#303030;--text-main:#f8f4e7;--text-muted:#c5c1b7;--ui-line:#c5c1b7;--border:#97958b;--primary:#8cb9ff;}
html[data-ui-design="bauhaus"] body .container .card {border:2px solid var(--ui-line)!important;border-radius:0!important;box-shadow:none!important;}
html[data-ui-design="bauhaus"] body .header .app-title {font-weight:800;letter-spacing:-.4px;}
html[data-ui-design="bauhaus"] body .rekap-info {background:#f6ca39!important;color:#171717!important;border-color:#191919!important;}
html[data-ui-design="bauhaus"] body #tabelRiwayat th {background:#171717!important;color:#fff!important;}
html[data-ui-design="bauhaus"] body .theme-checklist,html[data-ui-design="bauhaus"] body .theme-checklist {border:2px solid var(--ui-line);border-radius:0;box-shadow:none;}
html[data-ui-design="paper"] body .correction-picker-trigger,html[data-ui-design="focus"] body .correction-picker-trigger,html[data-ui-design="bauhaus"] body .correction-picker-trigger {border-radius:var(--action-radius)!important;}
.apk-update-card[hidden],#apkInstallUpdate[hidden] {display:none!important;}
.apk-update-actions {display:grid;grid-template-columns:1fr;gap:8px;}
#apkInstallUpdate {margin-top:8px;width:100%;}
.apk-update-banner[hidden] {display:none!important;}
.apk-update-banner {margin-bottom:11px;}

html[data-ui-design] body #kodePaketSoal {font-weight:500;line-height:1.4;margin:0;}

/* Bauhaus keeps the table viewport and header corners square. */
html[data-ui-design="bauhaus"] body .container .table-container,
html[data-ui-design="bauhaus"] body #tabelRiwayat,
html[data-ui-design="bauhaus"] body #tabelRiwayat thead,
html[data-ui-design="bauhaus"] body #tabelRiwayat thead tr,
html[data-ui-design="bauhaus"] body #tabelRiwayat th {border-radius:0!important;}

/* Profil: tab sejajar dengan navigasi Setelan/Riwayat. */
#tab-profil > .profil-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#tab-profil > .profil-tabs .sub-nav-btn { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:44px; padding:8px 6px; font-size:13px; line-height:1.25; }
#tab-profil > .profil-tabs svg { flex:none; }
.profil-sub-tab-content[hidden] { display:none!important; }
.profil-tabs .sub-nav-btn:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }

/* Data: gunakan padding kartu yang sama dengan Setelan. */
.container .data-storage-card {padding:var(--layout-gap);}
.data-storage-intro {margin:0 0 11px;}
.data-storage-intro h3 {margin:0;font-size:15px;font-weight:700;line-height:1.4;}
.data-storage-intro p {margin:8px 0 0;font-size:11px;color:var(--text-muted);line-height:1.5;}
.data-storage-card .settings-actions {margin:0;}

/* Data Sekolah: padding sama dengan kartu Setelan, tanpa margin paragraf bawaan. */
#set-siswa #kartuDataSekolahLJK {padding:var(--layout-gap);margin-bottom:0;}
#kartuDataSekolahLJK #infoSekolahLJK {margin:0 0 var(--layout-gap);line-height:1.5;}
#kartuDataSekolahLJK > p:last-child {margin:var(--layout-gap) 0 0;line-height:1.5;}

/* v14.9: reports use the same typography, spacing, and theme tokens as settings. */
.analytics-overview h3,.item-analysis-panel h3,.similarity-report h3,.similarity-settings h3 {margin:0;font-size:15px;line-height:1.4;}
.report-caption {margin:8px 0 11px;color:var(--text-muted);font-size:11px;line-height:1.5;}
.report-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:11px 0;}
.report-metrics > div {padding:11px 8px;border:1px solid var(--ui-line);border-radius:var(--action-radius);background:var(--bg-input);min-width:0;}
.report-metrics span,.report-metrics strong {display:block;}
.report-metrics span {font-size:11px;color:var(--text-muted);}
.report-metrics strong {font-size:17px;color:var(--primary);margin-top:5px;overflow-wrap:anywhere;}
.completion-bar {height:9px;background:var(--bg-input);border:1px solid var(--ui-line);overflow:hidden;border-radius:var(--action-radius);}
.completion-bar > span {display:block;height:100%;background:var(--success);}
.completion-legend {display:flex;justify-content:space-between;gap:11px;margin-top:8px;font-size:11px;color:var(--text-muted);}
.analysis-tools {display:grid;gap:11px;margin:11px 0;}
.analysis-filter-buttons {display:flex;flex-wrap:wrap;gap:8px;}
.analysis-filter-buttons button {min-height:44px;padding:8px 11px;font-family:inherit;font-size:13px;color:var(--text-main);background:var(--bg-input);border:1px solid var(--ui-line);border-radius:var(--action-radius);cursor:pointer;}
.analysis-filter-buttons button.active {color:var(--primary);border-color:var(--primary);}
.analysis-filter-buttons button:focus-visible {outline:2px solid var(--primary);outline-offset:2px;}
.analysis-tools .input-css {margin:0;width:100%;box-sizing:border-box;min-height:44px;}
.item-analysis-list,.similarity-list {display:grid;gap:8px;}
.item-analysis,.similarity-pair,.item-excluded {border:1px solid var(--ui-line);border-radius:var(--action-radius);background:var(--bg-input);overflow:hidden;min-width:0;}
.item-analysis summary,.similarity-pair summary {display:flex;align-items:center;gap:11px;padding:11px;min-height:44px;cursor:pointer;list-style:none;}
.item-analysis summary::-webkit-details-marker,.similarity-pair summary::-webkit-details-marker {display:none;}
.item-analysis summary::after,.similarity-pair summary::after {content:'+';color:var(--primary);font-size:17px;margin-left:auto;}
.item-analysis[open] summary::after,.similarity-pair[open] summary::after {content:'−';}
.item-number {width:30px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-line);border-radius:var(--action-radius);font-size:13px;font-weight:700;color:var(--primary);}
.item-summary,.pair-names {flex:1;display:grid;gap:4px;min-width:0;overflow-wrap:anywhere;}
.item-summary b,.pair-names b {font-size:13px;}
.item-summary > span,.pair-names > span {font-size:11px;color:var(--text-muted);}
.report-chip {flex:none;font-size:11px;font-weight:700;padding:5px 8px;border:1px solid var(--ui-line);border-radius:var(--action-radius);white-space:nowrap;}
.item-analysis-detail {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:11px;border-top:1px solid var(--ui-line);}
.item-analysis-detail span {display:block;font-size:11px;color:var(--text-muted);margin-bottom:5px;}
.item-analysis-detail b {font-size:13px;overflow-wrap:anywhere;}
.item-excluded {display:flex;justify-content:space-between;padding:11px;font-size:13px;color:var(--text-muted);}
[data-analysis-item][hidden] {display:none!important;}
.similarity-settings {display:flex;align-items:center;justify-content:space-between;gap:11px;}
.similarity-settings .report-caption {margin-bottom:0;}
.similarity-settings .input-css {width:70px;margin:0;padding:9px;text-align:center;min-height:44px;flex:none;}
.similarity-summary {display:flex;align-items:center;gap:11px;margin:11px 0;}
.similarity-summary strong {font-size:17px;color:var(--primary);}
.similarity-summary span {font-size:13px;}
.report-note {font-size:11px;line-height:1.5;padding:11px;background:var(--bg-input);border:1px solid var(--ui-line);border-radius:var(--action-radius);margin:0 0 11px;color:var(--text-muted);}
.pair-detail {border-top:1px solid var(--ui-line);padding:11px;font-size:13px;}
.pair-detail p {margin:8px 0 0;line-height:1.5;overflow-wrap:anywhere;}
.report-empty {padding:11px;background:var(--bg-input);border:1px solid var(--ui-line);border-radius:var(--action-radius);font-size:13px;}
.report-empty p {font-size:11px;line-height:1.5;margin:8px 0 0;color:var(--text-muted);}
@media(max-width:430px){.report-metrics {grid-template-columns:repeat(2,minmax(0,1fr));}.item-analysis-detail {grid-template-columns:1fr;}.similarity-pair summary {gap:8px;}}

/* Let the app receive horizontal gestures in report cards, not browser panning. */
#sub-analisis > .card,#sub-nyontek > .card,#tab-profil .card,
#tab-riwayat > .sub-nav-container,#tab-pengaturan > .sub-nav-container,#tab-profil > .sub-nav-container,
#tab-pengaturan h3,#tab-pengaturan p,#tab-pengaturan .btn-utama {touch-action:pan-y pinch-zoom;}
.advanced-item-statistics > h3 {margin:0 0 11px;font-size:15px;line-height:1.4;}
.advanced-item-statistics .stat-number {font-size:13px;line-height:1.4;}
.advanced-item-detail {display:block;}
.advanced-item-detail > p {margin:0 0 11px;line-height:1.5;font-size:13px;}
.option-distribution {display:grid;gap:11px;}
.option-row {display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-size:13px;}
.option-row span,.option-row small {display:block;font-size:11px;line-height:1.5;overflow-wrap:anywhere;}
.option-row small {color:var(--text-muted);}
.option-bar {height:6px;margin:5px 0;background:var(--bg-card);border:1px solid var(--ui-line);border-radius:var(--action-radius);overflow:hidden;}
.option-bar > span {height:100%;background:var(--primary);}
.advanced-question-search {width:100%;box-sizing:border-box;margin:0;}
[data-stat-number][hidden] {display:none!important;}

.statistics-method summary {font-size:13px;font-weight:600;cursor:pointer;color:var(--primary);}
.statistics-method p {margin:11px 0 0;line-height:1.5;}

.archive-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}.archive-fields label{font-size:13px;font-weight:600}.archive-fields input{display:block;width:100%;box-sizing:border-box;margin-top:6px}.archive-actions,.archive-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.archive-row{padding:12px 0;border-bottom:1px solid var(--border)}.archive-row>div:first-child{flex:1;min-width:150px}.archive-actions label{cursor:pointer}.advanced-item-detail small{display:block}#archive-view[hidden]{display:none}#tab-riwayat .sub-nav-container{overflow-x:auto}#tab-riwayat .sub-nav-btn{min-width:80px}@media(max-width:600px){.archive-fields{grid-template-columns:1fr}}

/* Switch-shaped range fills available width; split follows the thumb center. */
.scan-mode-control.scan-setting-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:14px;--scan-split:calc(50% + 12px)}
.scan-mode-control .scan-setting-label{min-width:0;white-space:normal;font-size:11px;line-height:1.3}
.scan-mode-control .scan-setting-label{font-weight:600}
.scan-mode-control #statusModeScan{font-weight:700;display:inline-block;white-space:nowrap}
.scan-slider-shell{position:relative;display:block;width:100%;min-width:0;height:32px}
.scan-slider-track{position:absolute;left:0;right:0;top:4px;height:24px;border-radius:99px;background:var(--border);pointer-events:none;overflow:hidden;box-shadow:inset 0 0 0 1px #0001}
.scan-slider-fill{display:block;width:var(--scan-split);height:100%;border-radius:99px;background:var(--success)}
.scan-mode-control #scanLevel{position:relative;z-index:1;display:block;width:calc(100% - 6px);min-width:0;height:32px;margin:0 3px;padding:0;background:transparent;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;box-sizing:border-box}
.scan-mode-control #scanLevel::-webkit-slider-runnable-track{height:24px;border-radius:99px;background:transparent}
.scan-mode-control #scanLevel::-moz-range-track{height:24px;border-radius:99px;background:transparent}
.scan-mode-control #scanLevel::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:3px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003}
.scan-mode-control #scanLevel::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003}
.scan-mode-control #scanLevel:disabled{opacity:.5;cursor:wait}
.scan-mode-control #scanLevel:focus-visible{outline:2px solid var(--success);outline-offset:2px;border-radius:99px}
.archive-storage-card .archive-fields{gap:10px;margin:14px 0}
.archive-storage-card .archive-fields label{font-family:inherit;font-size:12px;font-weight:600;color:var(--text-muted);line-height:1.4}
.archive-storage-card .input-css{font-family:inherit;font-size:13px;min-height:40px;padding:10px;margin-top:5px}
.archive-storage-card .archive-primary-actions{margin:0 0 14px}
.archive-storage-card .report-note{margin:0 0 14px}
.archive-row{font-family:inherit;font-size:13px}
.archive-row b{font-weight:600}
.archive-secondary-action{width:auto;margin:0;min-height:40px;padding:9px 12px}
#archive-view{font-family:inherit}
#archive-view h3{margin:0;font-size:15px;font-weight:700;line-height:1.4}

.scan-mode-control #scanLevel::-moz-range-progress{background:transparent}

.learning-summary h3{margin:0;font-size:15px;line-height:1.4}
.learning-summary h4{margin:16px 0 8px;font-size:14px}
.learning-class-label{display:block;margin:11px 0;font-size:12px;font-weight:600}
.histogram-row{display:grid;grid-template-columns:minmax(76px,.8fr) minmax(0,1.4fr) 24px;gap:8px;align-items:center;margin:10px 0;font-size:11px}
.histogram-row>span{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.histogram-row>b{text-align:right}
.histogram-track{background:var(--bg-input);height:18px;border-radius:4px;overflow:hidden}
.histogram-track>div{height:100%;background:var(--primary);border-radius:4px}
.remedial-student{border-top:1px solid var(--border);padding:10px 0}
.remedial-student[hidden]{display:none}
.remedial-student summary{display:flex;justify-content:space-between;align-items:start;gap:10px;cursor:pointer;font-size:13px}
.remedial-student summary>span:first-child{min-width:0;overflow-wrap:anywhere}
.remedial-student summary>span:last-child{flex-shrink:0;text-align:right}
.remedial-student small{display:block;margin-top:4px;color:var(--text-muted);font-size:11px}
.remedial-detail{font-size:12px;line-height:1.5;overflow-wrap:anywhere}

.analytics-field{margin:11px 0;min-width:0}
.analytics-field>label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;line-height:1.4}
.analytics-field .correction-picker{position:relative;min-width:0}
.analytics-field .correction-picker-trigger{min-height:46px;white-space:normal;overflow-wrap:anywhere}
.analytics-field .correction-picker-panel{position:relative;z-index:3}
.analytics-field .correction-picker-option{white-space:normal;overflow-wrap:anywhere}
.topic-mastery h3,.session-progress h3{margin:0;font-size:15px;line-height:1.4}
.topic-editor{margin:11px 0;padding:11px;border:1px solid var(--border)}
.topic-editor summary{cursor:pointer;font-size:13px;font-weight:600}
.topic-editor label{display:block;font-size:12px;font-weight:600;margin:11px 0 8px}
.topic-editor textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;min-height:220px;padding:12px;resize:vertical;font-family:inherit;font-size:15px;line-height:1.65;}
.topic-editor .topic-save{margin-top:11px}
.topic-result{padding:11px 0;border-top:1px solid var(--border);font-size:13px}
.topic-result summary{display:flex;gap:11px;justify-content:space-between;cursor:pointer}
.topic-result summary>span{min-width:0;overflow-wrap:anywhere}
.topic-result small,.topic-mastery td small,.session-progress td small{display:block;font-size:11px;color:var(--text-muted);margin-top:4px}
.topic-mastery .table-container,.session-progress .table-container{max-width:100%;overflow-x:auto}
.progress-equivalence{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;margin:11px 0}
.progress-equivalence input{flex-shrink:0;margin-top:3px;width:18px;height:18px}
.session-progress .progress-export{margin-top:11px}

.histogram-heading{display:flex;justify-content:space-between;gap:10px;margin:14px 0 10px;color:var(--text-muted);font-size:11px;font-weight:600}
.histogram-row{min-height:26px;margin:8px 0}
.histogram-row>span{white-space:nowrap;overflow-wrap:normal}
.session-progress.progress-empty .progress-empty-content{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:0}
.progress-empty-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--border);border-radius:var(--action-radius,4px);background:var(--bg-input);color:var(--primary)}
.progress-empty-content>div{min-width:0}
.progress-empty-content b{font-size:13px;line-height:1.5}
.progress-empty-content p{font-size:11px;line-height:1.6;color:var(--text-muted);margin:6px 0 9px}
.progress-session-count{display:inline-block;font-size:11px;font-weight:600;color:var(--text-muted)}

.progress-export-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.progress-export-actions .btn-utama{margin-top:0;min-width:0;white-space:normal}@media(max-width:400px){.progress-export-actions{grid-template-columns:1fr}}

/* Keep primary sub-tabs below the actual header, including safe-area and text scaling. */
.tab-content > .sub-nav-container {background:var(--bg-card)!important;isolation:isolate;top:var(--app-header-height,calc(80px + env(safe-area-inset-top,0px)));}
.student-source-tabs {position:static;}
.scan-mode-control .scan-setting-label,.scan-mode-control #statusModeScan {font-weight:800!important;}
.analysis-disclosure {margin:12px 0 0;border:1px solid var(--ui-line);border-radius:var(--action-radius);background:var(--bg-input);}
.analysis-disclosure > summary {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;cursor:pointer;font-size:13px;font-weight:700;list-style:none;}
.analysis-disclosure > summary::-webkit-details-marker {display:none;}
.analysis-disclosure-action {color:var(--primary);font-size:12px;text-align:right;flex-shrink:0;}
.analysis-disclosure .analysis-hide {display:none;}
.analysis-disclosure[open] > summary .analysis-show {display:none;}
.analysis-disclosure[open] > summary .analysis-hide {display:inline;}
.analysis-disclosure-body {padding:0 12px 12px;min-width:0;}
.analysis-disclosure > summary:focus-visible {outline:2px solid var(--primary);outline-offset:2px;}
@media print {.analysis-disclosure > summary {display:none;}.analysis-disclosure > .analysis-disclosure-body {display:block!important;}}

/* v14.44: approved Zamrud, Indigo and Grafit palettes. */
html[data-ui-design="zamrud"] body{--bg-body:#eef7f1;--bg-card:#fbfffc;--bg-input:#e8f3ec;--text-main:#173b2f;--text-muted:#526e62;--primary:#087f5b;--success:#16a56e;--ui-line:#c4dbce;--action-fg:#ffffff;--action-radius:18px;--new-theme-shadow:0 4px 16px #17463308;--border:var(--ui-line);--action-bg:var(--primary);--action-line:var(--primary);--action-secondary-bg:var(--bg-input);--action-secondary-fg:var(--primary);--action-secondary-line:var(--ui-line);--action-border:1px;--action-shadow:none;background:var(--bg-body)!important;color:var(--text-main);}
html[data-ui-design="zamrud"]{background:#eef7f1;}
html[data-ui-design="zamrud"] body.dark-mode{--bg-body:#0c2119;--bg-card:#132f24;--bg-input:#1d3e30;--text-main:#e8f7ef;--text-muted:#b1cdbd;--primary:#69d6a9;--success:#34cf91;--ui-line:#3c6250;--action-fg:#09291c;--action-radius:18px;--new-theme-shadow:none;--border:var(--ui-line);--action-bg:var(--primary);--action-line:var(--primary);--action-secondary-bg:var(--bg-input);--action-secondary-fg:var(--primary);--action-secondary-line:var(--ui-line);--action-border:1px;--action-shadow:none;background:var(--bg-body)!important;color:var(--text-main);}
html[data-ui-design="zamrud"][data-theme="dark"]{background:#0c2119;}
html[data-ui-design="grafit"] body{--bg-body:#111827;--bg-card:#1b263a;--bg-input:#25334a;--text-main:#f2f5fb;--text-muted:#b5c1d3;--primary:#f4bd62;--success:#24b88b;--ui-line:#3a4860;--action-fg:#172033;--action-radius:14px;--new-theme-shadow:none;--border:var(--ui-line);--action-bg:var(--primary);--action-line:var(--primary);--action-secondary-bg:var(--bg-input);--action-secondary-fg:var(--primary);--action-secondary-line:var(--ui-line);--action-border:1px;--action-shadow:none;background:var(--bg-body)!important;color:var(--text-main);}
html[data-ui-design="grafit"]{background:#111827;}
html[data-ui-design="grafit"] body.dark-mode{--bg-body:#080e18;--bg-card:#121c2c;--bg-input:#1d2b40;--text-main:#f3f6fc;--text-muted:#b8c7dc;--primary:#ffd18b;--success:#3bd5a6;--ui-line:#3b4e69;--action-fg:#172033;--action-radius:14px;--new-theme-shadow:none;--border:var(--ui-line);--action-bg:var(--primary);--action-line:var(--primary);--action-secondary-bg:var(--bg-input);--action-secondary-fg:var(--primary);--action-secondary-line:var(--ui-line);--action-border:1px;--action-shadow:none;background:var(--bg-body)!important;color:var(--text-main);}
html[data-ui-design="grafit"][data-theme="dark"]{background:#080e18;}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .header,html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .bottom-nav{background:var(--bg-card)!important;border-color:var(--ui-line)!important;}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .container .card{border:1px solid var(--ui-line)!important;border-radius:var(--action-radius)!important;background:var(--bg-card)!important;box-shadow:var(--new-theme-shadow)!important;}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-setting-card{border-color:var(--ui-line)!important;background:var(--bg-input)!important;border-radius:12px!important;}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-ready-placeholder{background:var(--bg-card)!important;border:1px solid var(--ui-line)!important;border-radius:var(--action-radius)!important;min-height:300px;}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-ready-placeholder svg{color:var(--primary);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-ready-placeholder h3,html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-setting-label{color:var(--text-main);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-ready-placeholder p,html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .header .app-tagline{color:var(--text-muted);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .header .app-title{font-family:Arial,sans-serif;font-weight:800;letter-spacing:-.3px;color:var(--text-main);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .app-version-badge{background:var(--bg-input);color:var(--primary);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .nav-item{color:var(--text-muted);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .nav-item.active,html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .sub-nav-btn.active{color:var(--primary);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body #statusSenter.off,html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body #statusSuara.off{color:var(--text-muted);}
html:is([data-ui-design="zamrud"],[data-ui-design="grafit"]) body .scan-slider-track{background:var(--border);}
html[data-ui-design="grafit"]{color-scheme:dark!important;}
.theme-swatch-zamrud{background:linear-gradient(135deg,#087f5b 50%,#e8f3ec 50%);}
.theme-swatch-grafit{background:linear-gradient(135deg,#1b263a 50%,#f4bd62 50%);}

html[data-ui-design="grafit"] body .scan-slider-track{background:#526178;}
html[data-ui-design="grafit"] body.dark-mode .scan-slider-track{background:#394b65;}

/* Equal geometry for all primary sub-tab bars, with room for two-line labels. */
:is(#tab-riwayat,#tab-pengaturan,#tab-profil) > .sub-nav-container {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;box-sizing:border-box;}
:is(#tab-riwayat,#tab-pengaturan,#tab-profil) > .sub-nav-container > .sub-nav-btn {display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:52px;box-sizing:border-box;padding:8px 6px;font-size:13px;line-height:1.25;white-space:normal;}
:is(#tab-riwayat,#tab-pengaturan,#tab-profil) > .sub-nav-container > .sub-nav-btn svg {flex:none;width:16px;height:16px;}

/* Item-analysis headings share the same geometry as the statistics card. */
html[data-ui-design] body :is(.item-analysis-panel,.advanced-item-statistics) > .analysis-section-title {margin:0 0 11px;padding:0;font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;color:var(--text-main);letter-spacing:normal;}

/* Space the summary box itself so the fix also covers older heading markup. */
html[data-ui-design] body .item-analysis-panel > #itemAnalysisTitle + .analysis-compact-summary {margin-block-start:16px;}

/* Consistent spacing within the analysis cards; preserve theme borders and padding. */
html[data-ui-design] body :is(.item-analysis-panel,.advanced-item-statistics,.topic-mastery,.learning-summary) > h3 {margin-block:0;}
html[data-ui-design] body :is(.item-analysis-panel,.advanced-item-statistics,.topic-mastery,.learning-summary) > h3 + :is(p,.report-note,.report-caption,.report-metrics) {margin-block-start:16px;}
html[data-ui-design] body .item-analysis-panel > :is(p,.analysis-disclosure) {margin-block-end:0;}
html[data-ui-design] body .item-analysis-panel > :is(p,.analysis-disclosure) + :is(p,.analysis-disclosure) {margin-block-start:12px;}
html[data-ui-design] body .learning-results > h4 + .report-caption {margin-block-start:12px;}
html[data-ui-design] body :is(.item-analysis-panel,.advanced-item-statistics,.topic-mastery,.learning-summary) > :last-child {margin-block-end:0;}

/* Settings card titles share the report/profile heading typography. */
#tab-pengaturan .settings-section-title{font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;color:var(--text-main);}

/* Shared card-title hierarchy across Scan, History, Settings and Profile. */
.container .card{--card-title-size:15px;--subcard-title-size:13px}
.container .card .card{--card-title-size:13px;--subcard-title-size:12px}
.container .card .card .card{--card-title-size:12px;--subcard-title-size:12px}
.container .card :is(.school-data-card,.analysis-disclosure,.topic-editor,.topic-result,.item-analysis,.similarity-pair,.remedial-student,.statistics-method){--card-title-size:13px;--subcard-title-size:12px}
.container .card .card :is(.school-data-card,.analysis-disclosure,.topic-editor,.topic-result,.item-analysis,.similarity-pair,.remedial-student,.statistics-method),
.container .card .analysis-disclosure :is(.analysis-disclosure,.topic-editor,.topic-result,.item-analysis,.similarity-pair,.remedial-student,.statistics-method){--card-title-size:12px;--subcard-title-size:12px}
html[data-ui-design] body .container .card :is(h2,h3,.settings-section-title){font-family:inherit;font-size:var(--card-title-size,15px)!important;font-weight:700!important;line-height:1.4!important}
html[data-ui-design] body .container .card h4{font-family:inherit;font-size:var(--subcard-title-size,13px)!important;font-weight:700!important;line-height:1.4!important}
html[data-ui-design] body .container :is(.analysis-disclosure,.topic-editor,.topic-result,.item-analysis,.similarity-pair,.remedial-student,.statistics-method)>summary{font-family:inherit;font-size:var(--card-title-size,13px)!important;font-weight:700!important;line-height:1.4}
html[data-ui-design] body .container :is(.item-summary,.pair-names) b,
html[data-ui-design] body .container :is(.topic-result,.remedial-student)>summary b{font-size:inherit!important;font-weight:700}
html[data-ui-design] body .container #archive-list .archive-row b{font-size:13px;font-weight:700;line-height:1.4}
/* Camera status messages are display text, separate from card titles. */
html[data-ui-design] body .container :is(.scan-ready-placeholder,.camera-error-panel) h3{font-size:17px!important}

/* One spacing scale for menu cards: field 8, content/card 12, section 16. */
:root{--layout-gap:12px;--space-field:8px;--space-content:12px;--space-section:16px}
html[data-ui-design] body .container .card :is(h2,h3,h4){margin-block:0!important}
html[data-ui-design] body .container .card h4:not(:first-child){margin-block-start:var(--space-section)!important}
html[data-ui-design] body .container .card p{margin-block:0 var(--space-content)!important}
html[data-ui-design] body .container .card :is(h2,h3)+p{margin-block-start:var(--space-section)!important}
html[data-ui-design] body .container .card h4+p{margin-block-start:var(--space-field)!important}
html[data-ui-design] body .container .card p:last-child,
html[data-ui-design] body .container .card>:last-child{margin-block-end:0!important}
html[data-ui-design] body .container .form-group{padding-block-end:var(--space-section)!important;margin-block-end:0!important}
html[data-ui-design] body .container .form-group:last-child{padding-block-end:0!important}
html[data-ui-design] body .container #kartuDataSekolahLJK{padding:var(--space-content)!important;margin-block:0 var(--space-section)!important}
html[data-ui-design] body .container #set-siswa>.card>.form-group:first-child{margin-block-end:var(--space-section)!important}
html[data-ui-design] body .container .input-css{margin-block-start:0!important}
html[data-ui-design] body .container label>.input-css{margin-block-start:var(--space-field)!important}
html[data-ui-design] body .container .analytics-field{margin-block:var(--space-section)!important}
html[data-ui-design] body .container .analytics-field>label{margin-block:0 var(--space-field)!important}
html[data-ui-design] body .container .archive-fields{gap:var(--space-content);margin-block:var(--space-section)!important}
html[data-ui-design] body .container .settings-actions{gap:var(--space-content);margin-block:var(--space-section)!important}
html[data-ui-design] body .container .archive-primary-actions{margin-block:0 var(--space-section)!important}
html[data-ui-design] body .container .packet-settings{margin-block-start:var(--space-section)!important}
html[data-ui-design] body .container .key-heading-row{margin-block-end:var(--space-section)!important}
html[data-ui-design] body .container .analysis-disclosure{margin-block:var(--space-content) 0}
html[data-ui-design] body .container .analysis-disclosure>summary{padding:var(--space-content)}
html[data-ui-design] body .container .analysis-disclosure-body{padding:0 var(--space-content) var(--space-content)}
html[data-ui-design] body .container .topic-editor{margin-block:var(--space-content);padding:var(--space-content)}
html[data-ui-design] body .container .topic-editor label{margin-block:var(--space-content) var(--space-field)}
html[data-ui-design] body .container .report-metrics{gap:var(--space-field);margin-block:var(--space-content)}
html[data-ui-design] body .container .progress-empty-content{margin-block-start:var(--space-section)}
html[data-ui-design] body .container .scan-mode-control{margin-block:var(--space-content)!important}
/* State colors are shared, including the theme-specific accessible palette. */
html[data-ui-design] body{--scan-active-label:var(--success);--scan-inactive-label:var(--text-muted)}
html[data-ui-design="brutalist"] body{--scan-active-label:#34C759;--scan-inactive-label:#252525}
html[data-ui-design] body .scan-setting-state,html[data-ui-design] body #statusModeScan{color:var(--scan-active-label)!important}
html[data-ui-design] body .scan-setting-state.off,
html[data-ui-design] body .scan-mode-control:is([data-level="1"],[data-level="2"]) #statusModeScan{color:var(--scan-inactive-label)!important}

html[data-ui-design] body .container .card>.archive-row:first-child{margin-block-start:0}
html[data-ui-design] body .container .card>.archive-row+p{margin-block-start:var(--space-section)!important}
html[data-ui-design] body .container .theme-checklist{margin-block:var(--space-section)}

html[data-ui-design] body .container .card :is(.input-css,.correction-picker)+p{margin-block-start:var(--space-field)!important}
html[data-ui-design] body .container .analysis-tools{gap:var(--space-content);margin-block:var(--space-content)}
html[data-ui-design] body .container .similarity-summary{gap:var(--space-content);margin-block:var(--space-content)}
html[data-ui-design] body .container :is(.report-note,.report-empty){padding:var(--space-content)}
html[data-ui-design] body .container :is(.item-analysis,.similarity-pair)>summary{padding:var(--space-content)}
html[data-ui-design] body .container .item-analysis-detail{padding:var(--space-content);gap:var(--space-content)}
html[data-ui-design] body .container :is(.topic-result,.remedial-student){padding-block:var(--space-content)}
html[data-ui-design] body .container .topic-result summary{gap:var(--space-content)}
html[data-ui-design] body .container .topic-editor .topic-save{margin-block-start:var(--space-section)}
html[data-ui-design] body .container .statistics-method>p{margin-block-start:var(--space-content)!important}
html[data-ui-design] body .container .progress-equivalence{margin-block:var(--space-content)}
html[data-ui-design] body .container .progress-export-actions{margin-block-start:var(--space-section);gap:var(--space-field)}
html[data-ui-design] body .container .histogram-heading{gap:var(--space-content);margin-block:var(--space-section) var(--space-field)}

/* Explicit gaps where a wrapper separates controls from their help text. */
html[data-ui-design] body .container .packet-toggle-card{margin-block-end:var(--space-content)}
html[data-ui-design] body .container .packet-fields{gap:var(--space-content);margin-block-end:var(--space-content)}
html[data-ui-design] body .container .packet-buttons{gap:var(--space-content)}
html[data-ui-design] body .container .packet-actions>.key-syntax-hint{margin-block-start:var(--space-content)!important}
html[data-ui-design] body .container #archive-search+#archive-list{margin-block-start:var(--space-content)}
html[data-ui-design] body .container #kartuDataSekolahLJK>.school-data-actions{display:grid!important;grid-template-columns:minmax(0,1fr);gap:var(--space-content)!important;margin:0}
html[data-ui-design] body .container .school-data-actions>button{margin:0!important}
html[data-ui-design] body .container .school-data-actions>[hidden]{display:none!important}
html[data-ui-design] body .container #kartuDataSekolahLJK>.school-data-actions+p{margin-block-start:var(--space-content)!important}
/* Low scan levels use the same off track as switches; thumb position stays a slider. */
html[data-ui-design] body .scan-mode-control[data-level="1"] .scan-slider-track{background:var(--border)}
html[data-ui-design] body .scan-mode-control[data-level="1"] .scan-slider-fill{background:transparent}
html[data-ui-design="outline"] body .scan-mode-control[data-level="1"] .scan-slider-track{background:var(--bg-card);border:1px solid var(--ui-line);box-sizing:border-box}

/* One section gap: avoid adding toggle bottom and packet top margins. */
html[data-ui-design] body .container #set-kunci .packet-toggle-card{margin-block-end:0}
html[data-ui-design] body .container #set-kunci .packet-fields{margin-block-start:var(--space-section)}

/* Scan slider: off, yellow, blue, purple, on, from left to right. */
html[data-ui-design] body .scan-mode-control[data-level="2"] .scan-slider-fill{background:#facc15}
html[data-ui-design] body .scan-mode-control[data-level="3"] .scan-slider-fill{background:#3b82f6}
html[data-ui-design] body .scan-mode-control[data-level="4"] .scan-slider-fill{background:#a855f7}
html[data-ui-design] body .scan-mode-control[data-level="5"] .scan-slider-fill{background:var(--success)}
html[data-ui-design] body .scan-mode-control[data-level="2"] #statusModeScan{color:#facc15!important}
html[data-ui-design] body .scan-mode-control[data-level="3"] #statusModeScan{color:#3b82f6!important}
html[data-ui-design] body .scan-mode-control[data-level="4"] #statusModeScan{color:#a855f7!important}
html[data-ui-design] body .scan-mode-control[data-level="5"] #statusModeScan{color:var(--success)!important}

/* Muted status follows dark surfaces; bright scan tiles retain dark text. */
html[data-ui-design="brutalist"] body.dark-mode{--scan-inactive-label:var(--text-muted)}
html[data-ui-design="brutalist"] body.dark-mode .scan-settings-row .scan-setting-card{--scan-inactive-label:#252525}

/* v14.66: one box radius per application theme, including nested and popup controls. */
html[data-ui-design] body{--theme-box-radius:12px;--panel-radius:var(--theme-box-radius);--input-radius:var(--theme-box-radius);--action-radius:var(--theme-box-radius)}
html[data-ui-design="outline"] body,html[data-ui-design="brutalist"] body,html[data-ui-design="paper"] body,html[data-ui-design="bauhaus"] body{--theme-box-radius:0px}
html[data-ui-design="retro"] body{--theme-box-radius:6px}html[data-ui-design="focus"] body{--theme-box-radius:10px}html[data-ui-design="zamrud"] body{--theme-box-radius:18px}html[data-ui-design="grafit"] body{--theme-box-radius:14px}
html[data-ui-design] body :is(.container,.account-dialog,.account-lock,.swal2-container,aside,body>header) :is(.card,.panel,.score-card,.scan-setting-card,.scan-settings-row,.scan-ready-placeholder,.input-css,.btn-utama,.rekap-action-btn,.student-action-btn,.table-container,.analysis-disclosure,.histogram-track,.histogram-track>div,.account-select-trigger,.account-select-options,.account-select-options button,.reg-import-list,.account-session-actions button,.theme-checklist,.sub-nav-container,.sub-nav-btn,.correction-picker-trigger,details,input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){border-radius:var(--theme-box-radius)!important}
html[data-ui-design] body :is(.account-dialog,.account-loading,.swal2-popup,.swal2-confirm,.swal2-cancel,.swal2-input,.swal2-select,#reg-school-manager,#reg-upload-list,#wadahKamera,#btnNyalakan,#statusPindai,.analysis-summary,.distribution-stat,.progress-empty){border-radius:var(--theme-box-radius)!important}
/* Include dynamically rendered nested boxes and older inline-radius containers. */
html[data-ui-design] body .container :is(div,section,article,form,fieldset,details,button,input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select),
html[data-ui-design] body .account-dialog :is(div,section,form,fieldset,details,button,input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select),
html[data-ui-design] body aside :is(.panel,button,input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select){border-radius:var(--theme-box-radius)!important}