:root{--color-bg: #f4f7fb;--color-surface: #ffffff;--color-fg: #0f1b2d;--color-fg-muted: #5b6b7f;--color-accent: #2563eb;--color-accent-strong: #1d4ed8;--color-accent-soft: #dbeafe;--color-teal: #0d9488;--color-teal-soft: #ccfbf1;--color-success: #16a34a;--color-success-soft: #dcfce7;--color-error: #dc2626;--color-error-soft: #fee2e2;--color-disabled: #9ca3af;--color-surface-muted: #f3f4f6;--color-surface-subtle: #f9fafb;--border-color: #e2e8f0;--border-strong: #d1d5db;--gradient-header: linear-gradient(135deg, #1e3a8a 0%, #2563eb 48%, #0d9488 100%);--space-1: .5rem;--space-2: 1rem;--space-3: 1.5rem;--space-4: 2rem;--radius: .75rem;--radius-sm: .5rem;--shadow-card: 0 1px 3px rgba(15, 27, 45, .06), 0 1px 2px rgba(15, 27, 45, .04);--shadow-card-hover: 0 8px 20px rgba(37, 99, 235, .12)}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--color-fg);background:var(--color-bg);line-height:1.5}.app-header{position:sticky;top:0;z-index:10;background:var(--gradient-header);color:#fff;box-shadow:0 4px 16px #2563eb40;padding:var(--space-2) var(--space-2) 0}.app-title{margin:0 0 var(--space-1);font-size:1.25rem;line-height:1.2;letter-spacing:.01em}.app-title-link{color:inherit;text-decoration:none}.app-title-link:hover{text-decoration:underline;text-underline-offset:.2em}.app-nav{display:flex;gap:var(--space-1);overflow-x:auto}.nav-link{padding:var(--space-1) var(--space-2);text-decoration:none;color:#ffffffd9;border-radius:var(--radius-sm) var(--radius-sm) 0 0;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.nav-link:hover{color:#fff}.nav-link.is-active{background:#ffffff2e;color:#fff;font-weight:600}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;min-height:2.25rem;padding:var(--space-1);font:inherit;color:#ffffffe6;background:#ffffff1f;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-sm);white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}.theme-toggle:hover{color:#fff;background:#ffffff38}.app-main{padding:var(--space-3) var(--space-2)}.screen h2{margin-top:0;font-size:1.4rem}.dataset-status{font-weight:600}.dataset-error{color:var(--color-error);font-weight:600}@media (min-width: 40rem){.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding-bottom:var(--space-2)}.app-title{margin:0}.app-nav{gap:var(--space-2)}.nav-link{border-radius:var(--radius-sm)}.app-main{max-width:48rem;margin:0 auto}}.nav-link-btn{padding:var(--space-1) var(--space-2);font:inherit;color:var(--color-accent);background:var(--color-surface);border:1px solid var(--color-accent);border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s ease,color .15s ease}.nav-link-btn:hover:not(:disabled){background:var(--color-accent-soft)}.nav-link-btn:disabled{color:var(--color-disabled);background:var(--color-surface-muted);border-color:var(--border-color);cursor:not-allowed}.exam-intro{margin-top:0}.exam-picker,.exam-picker-form{display:grid;gap:var(--space-2)}.version-fieldset{border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-2);margin:0;background:var(--color-surface);box-shadow:var(--shadow-card)}.version-legend{font-weight:600;padding:0 var(--space-1);color:var(--color-accent-strong)}.version-option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1);border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s ease}.version-option:hover{background:var(--color-accent-soft)}.version-option:has(input:checked){background:var(--color-teal-soft)}.version-name{font-weight:600}.version-count{margin-left:auto;color:var(--color-fg-muted);font-size:.9rem}.exam-start{justify-self:start}.exam-submit{display:inline-block}.exam-start,.exam-submit{padding:var(--space-1) var(--space-3);font:inherit;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--color-accent),var(--color-teal));border:1px solid transparent;border-radius:var(--radius-sm);box-shadow:0 2px 8px #2563eb4d;cursor:pointer;transition:filter .15s ease}.exam-start:hover:not(:disabled),.exam-submit:hover:not(:disabled){filter:brightness(1.05)}.exam-start:disabled,.exam-submit:disabled{background:var(--color-disabled);border-color:var(--color-disabled);box-shadow:none;cursor:not-allowed}.exam-status{font-weight:600}.exam-run{display:grid;gap:var(--space-2)}.exam-progress{margin:0;font-weight:600}.exam-dots{display:flex;flex-wrap:wrap;gap:.35rem}.question-dot{width:2rem;height:2rem;padding:0;font:inherit;color:var(--color-fg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--color-surface-subtle);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.question-dot.is-current{border-color:var(--color-accent);background:var(--color-accent-soft);font-weight:700}.question-dot.is-answered{background:var(--color-success-soft);border-color:var(--color-success)}.exam-nav{display:flex;gap:var(--space-1)}.exam-question .exam-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-2);background:var(--color-surface);box-shadow:var(--shadow-card)}.exam-question .option-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}.exam-question .option{display:flex;align-items:baseline;gap:var(--space-1);padding:.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:background-color .15s ease}.exam-question .option:hover{background:var(--color-accent-soft)}.exam-question .option:has(input:checked){background:var(--color-teal-soft)}.fill-input{width:100%;max-width:16rem;padding:var(--space-1);font:inherit;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--color-surface)}.fill-input:focus{outline:2px solid var(--color-accent-soft);border-color:var(--color-accent)}.lang-en{display:block;font-style:italic}.option{flex-wrap:wrap}.option-text.lang-en{flex-basis:100%}.exam-submit-row{margin-top:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-1)}.exam-new-row{margin-top:var(--space-2)}.result-screen{display:grid;gap:var(--space-2)}.result-status{margin:0;padding:var(--space-2);border-radius:var(--radius);text-align:center;font-size:1.2rem;font-weight:700}.result-status.is-pass{color:var(--color-success);background:var(--color-success-soft)}.result-status.is-fail{color:var(--color-error);background:var(--color-error-soft)}.result-error-points{margin:0;font-weight:600}.result-review{display:grid;gap:var(--space-4)}.review-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-2);background:var(--color-surface);box-shadow:var(--shadow-card);transition:box-shadow .15s ease}.review-card:hover{box-shadow:var(--shadow-card-hover)}.review-header{display:flex;justify-content:space-between;gap:var(--space-1);margin-bottom:var(--space-1)}.review-id{font-weight:700;font-size:.85rem;color:var(--color-fg-muted)}.review-card.salah .review-mark{color:var(--color-error);font-weight:600}.review-card.benar .review-mark{color:var(--color-success);font-weight:600}.review-answers{margin:0 0 var(--space-1)}.review-answers dt{font-size:.85rem;color:var(--color-fg-muted)}.review-answers dd{margin:0 0 var(--space-1)}.review-correct{font-weight:600;color:var(--color-success)}.browse-jump{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);margin-left:auto}.browse-jump-label{font-size:.9rem}.browse-jump-input{width:6rem;padding:var(--space-1);font:inherit;color:inherit;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--color-surface)}.browse-jump-error{color:var(--color-error);font-size:.9rem;font-weight:600}.browse-position-inline{font-weight:400;color:var(--color-fg-muted)}.browse-list{display:grid;gap:var(--space-1)}.browse-card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:var(--space-2)}.browse-card .card-id{font-weight:700;font-size:.85rem}.browse-card .option.is-correct{color:#15803d;font-weight:600}.browse-card .correct-answer,.browse-card .fill-answer{margin:0 0 var(--space-1);color:#15803d;font-weight:600}.browse-card .card-comment{margin-top:var(--space-1)}.browse-card .comment-label{display:block;color:var(--color-accent);font-weight:600;margin-bottom:.25rem}.browse-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-1);margin-bottom:var(--space-1)}.browse-list{display:grid;gap:var(--space-3)}.browse-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:var(--space-2);background:var(--color-surface);box-shadow:var(--shadow-card);transition:box-shadow .15s ease}.browse-card:hover{box-shadow:var(--shadow-card-hover)}.browse-card .card-header{display:flex;justify-content:space-between;gap:var(--space-1);margin-bottom:var(--space-1)}.browse-card .card-id{font-weight:700;font-size:.85rem;color:var(--color-fg-muted)}.browse-card .question-image{max-width:100%;border-radius:var(--radius);margin-bottom:var(--space-2)}.browse-card .question-text{margin:0 0 var(--space-1);font-weight:600}.browse-card .option-list{list-style:none;margin:0 0 var(--space-1);padding:0;display:grid;gap:.25rem}.browse-card .option{display:flex;gap:var(--space-1);align-items:baseline;padding:.25rem 0}.browse-card .option.is-correct{color:var(--color-success);font-weight:600}.browse-card .correct-badge{margin-left:auto}.browse-card .correct-answer,.browse-card .fill-answer{margin:0 0 var(--space-1);color:var(--color-success);font-weight:600}.browse-card .card-comment{margin-top:var(--space-1);padding-top:var(--space-1);border-top:1px solid var(--border-color)}.browse-card .comment-label{display:block;color:var(--color-accent-strong);font-weight:600;margin-bottom:.25rem}.browse-card .comment-body{font-size:.95rem}.last-result{margin-top:var(--space-2);padding:var(--space-2);border:1px solid var(--border-color);border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow-card)}.last-result h3{margin:0 0 var(--space-1)}.last-result-line{margin:0;display:flex;gap:var(--space-2);align-items:baseline}.last-result-version{font-weight:600}.last-result-status.is-pass{color:var(--color-success);font-weight:600}.last-result-status.is-fail{color:var(--color-error);font-weight:600}.last-result-points{margin:var(--space-1) 0 0}.last-result-time{margin:var(--space-1) 0 0;color:var(--color-fg-muted);font-size:.9rem}.question-image-button{position:relative;display:block;width:100%;margin:0 0 var(--space-2);padding:0;border:none;background:none;border-radius:var(--radius);cursor:zoom-in;text-align:left}.question-image-button .question-image{display:block;width:100%;height:auto;margin:0;border-radius:var(--radius)}.question-image-button:hover .question-image{box-shadow:var(--shadow-card-hover)}.question-image-badge{position:absolute;top:.5rem;right:.5rem;width:2rem;height:2rem;display:grid;place-items:center;background:#0f1b2d8c;color:#fff;border-radius:999px;font-size:1rem;pointer-events:none}.question-video{margin:0 0 var(--space-2)}.question-video video{display:block;width:100%;max-height:60vh;border-radius:var(--radius);background:var(--color-surface-muted)}.image-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:var(--space-2)}.image-modal[hidden]{display:none}.image-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f1b2dd9}.image-modal-panel{position:relative;max-width:min(92vw,56rem);max-height:92vh;overflow:auto;padding:var(--space-3);background:var(--color-surface);border-radius:var(--radius);box-shadow:0 20px 60px #0f1b2d80}.image-modal-img{display:block;margin:0 auto;max-width:100%;max-height:78vh;border-radius:var(--radius-sm);cursor:zoom-in}.image-modal.is-zoomed .image-modal-img{max-width:none;max-height:none;cursor:zoom-out}.image-modal-close{position:absolute;top:var(--space-1);right:var(--space-1);width:2.25rem;height:2.25rem;padding:0;font-size:1.5rem;line-height:1;color:var(--color-fg-muted);background:var(--color-surface-muted);border:1px solid var(--border-color);border-radius:999px;cursor:pointer}.image-modal-close:hover{background:var(--color-error-soft);color:var(--color-error)}.image-modal-hint{margin:var(--space-1) 0 0;text-align:center;font-size:.85rem;color:var(--color-fg-muted)}:root[data-theme=dark]{--color-bg: #0f172a;--color-surface: #1e293b;--color-fg: #e2e8f0;--color-fg-muted: #94a3b8;--color-accent: #60a5fa;--color-accent-strong: #93c5fd;--color-accent-soft: #1e3a5f;--color-teal: #2dd4bf;--color-teal-soft: #134e4a;--color-success: #4ade80;--color-success-soft: #14532d;--color-error: #f87171;--color-error-soft: #7f1d1d;--color-disabled: #64748b;--color-surface-muted: #334155;--color-surface-subtle: #16233b;--border-color: #334155;--border-strong: #475569;--shadow-card: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-card-hover: 0 8px 20px rgba(0, 0, 0, .35)}body{transition:background-color .2s ease,color .2s ease}