:root { --ink:#18334f; --ink-soft:#587087; --navy:#173f5f; --navy-deep:#102e49; --mist:#eff5f6; --paper:#fffdfa; --coral:#f06459; --sun:#f5b64b; --mint:#58c2ae; --line:#dae5e8; --shadow:0 18px 50px rgba(17,54,76,.10); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:#f5f8f8; color:var(--ink); font:15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .ambient { position:fixed; pointer-events:none; border-radius:50%; filter:blur(5px); opacity:.55; z-index:-1; } .ambient-one { width:340px; height:340px; right:-110px; top:95px; background:#d8f2ed; } .ambient-two { width:280px; height:280px; left:-130px; bottom:-50px; background:#fde8c2; }
.topbar { height:76px; background:rgba(255,253,250,.93); display:flex; align-items:center; gap:42px; padding:0 max(5vw,32px); border-bottom:1px solid rgba(218,229,232,.8); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); }.brand { display:inline-flex; align-items:center; gap:9px; font-size:20px; font-weight:850; letter-spacing:-1.2px; color:var(--navy); }.brand>span:last-child span { color:var(--coral); }.brand-mark { display:grid; width:30px; height:30px; place-items:center; border-radius:10px 10px 10px 3px; background:var(--coral); color:white; font:800 17px Georgia, serif; transform:rotate(-4deg); }.topnav { display:flex; gap:6px; flex:1; }.topnav a { color:#627789; padding:8px 12px; font-weight:650; border-radius:9px; }.topnav a:hover,.topnav a.active { background:#eef5f5; color:var(--navy); }.account-menu { display:flex; align-items:center; gap:9px; }.avatar { width:34px; height:34px; display:grid; place-items:center; color:white; background:var(--navy); border-radius:50%; font-weight:800; }.account-copy { display:grid; line-height:1.2; }.account-copy strong { font-size:13px; }.account-copy span { font-size:11px; color:var(--ink-soft); }.icon-button { border:0; color:var(--ink-soft); background:transparent; font-size:18px; }.page-wrap { width:min(1160px, calc(100% - 48px)); margin:0 auto; padding:56px 0 72px; }.guest-wrap { min-height:100vh; }.eyebrow,.section-kicker,.question-label { display:block; font-size:10px; letter-spacing:1.5px; font-weight:800; color:var(--coral); }.eyebrow-light { color:#f7c0af; }.section-kicker { color:#78909e; }.muted { color:var(--ink-soft); }.hero-row,.heading-action-row { display:flex; justify-content:space-between; gap:32px; align-items:flex-end; }.hero-row h1,.page-heading h1 { margin:8px 0 0; max-width:760px; font:700 clamp(31px,4vw,47px)/1.08 Georgia, ui-serif, serif; letter-spacing:-1.4px; }.hero-row h1 em,.page-heading h1 em,.complete-card h1 em,.student-brand-block h1 em { color:var(--coral); font-style:italic; }.hero-copy { margin:14px 0 0; max-width:580px; }.button { border:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 17px; min-height:44px; border-radius:11px; font-weight:800; transition:transform .18s ease, box-shadow .18s ease; }.button:hover { transform:translateY(-2px); }.button-primary { color:white; background:var(--navy); box-shadow:0 8px 18px rgba(23,63,95,.2); }.button-primary:hover { background:var(--navy-deep); }.button-secondary { color:var(--navy); background:#e5f1ef; }.button-ghost { color:var(--ink-soft); background:transparent; }.button-small { min-height:34px; padding:8px 11px; font-size:12px; }.button-full { width:100%; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0; }.stat-card { color:white; min-height:148px; padding:22px 25px; border-radius:18px; box-shadow:var(--shadow); display:grid; align-content:space-between; }.stat-card.navy { background:var(--navy); }.stat-card.coral { background:var(--coral); }.stat-card.sun { background:var(--sun); color:#654614; }.stat-label { font-size:13px; font-weight:700; opacity:.82; }.stat-card strong { font:700 38px/1 Georgia, serif; }.stat-card small { opacity:.75; }.content-card { background:rgba(255,253,250,.96); border:1px solid rgba(218,229,232,.85); border-radius:19px; padding:28px; box-shadow:var(--shadow); }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }.section-heading h2 { margin:3px 0 0; font:700 25px/1.2 Georgia, serif; letter-spacing:-.5px; }.text-link,.text-button { color:var(--coral); font-weight:800; border:0; padding:0; background:none; }.tryout-row { display:grid; grid-template-columns:45px 1fr 68px 68px 24px; gap:16px; align-items:center; padding:16px 4px; border-top:1px solid var(--line); transition:background .15s ease; }.tryout-row:hover { background:#f7fbfa; }.tryout-icon { display:grid; place-items:center; width:40px; height:40px; color:var(--navy); background:#e6f2ef; border-radius:13px; font-weight:850; }.tryout-title-line { display:flex; align-items:center; gap:10px; }.tryout-title-line h3 { margin:0; font-size:15px; }.tryout-main p { margin:2px 0 0; color:var(--ink-soft); font-size:12px; }.tryout-metric { display:grid; text-align:center; line-height:1.1; }.tryout-metric strong { font-size:16px; }.tryout-metric span { color:var(--ink-soft); font-size:10px; }.row-arrow { color:var(--coral); font-size:20px; }.status-pill,.chip { display:inline-flex; align-items:center; font-size:10px; font-weight:800; letter-spacing:.3px; padding:5px 8px; border-radius:999px; }.status-draft { color:#986818; background:#fff0d4; }.status-published { color:#14725f; background:#ddf5ee; }.chip { color:#506b7d; background:#edf3f4; }.empty-state,.inline-empty { text-align:center; padding:38px 20px; color:var(--ink-soft); }.empty-state>div { color:var(--coral); font-size:31px; }.empty-state h3 { margin:5px 0; color:var(--ink); }.empty-state p { margin:0 0 15px; }.page-heading { margin-bottom:28px; }.compact-heading { max-width:740px; }.compact-heading .eyebrow { margin-top:22px; }.back-link { color:var(--ink-soft); font-weight:750; font-size:13px; }.form-card { max-width:830px; }.form-wide { padding:32px; }.form-step { width:34px; height:34px; display:grid; place-items:center; color:var(--coral); background:#fff0ed; border-radius:50%; font-weight:900; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:19px; }.field { display:grid; gap:7px; color:#4e6577; font-size:12px; font-weight:800; }.field>span small { font-weight:600; color:#91a0aa; }.field-full { grid-column:1/-1; }.field input,.field textarea,.field select,.input-static { width:100%; border:1px solid var(--line); color:var(--ink); outline:none; background:#fff; padding:11px 12px; border-radius:10px; font-weight:600; transition:border-color .15s, box-shadow .15s; }.field textarea { resize:vertical; }.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(88,194,174,.15); }.input-static { color:var(--ink-soft); background:#f5f8f8; }.input-suffix { position:relative; }.input-suffix input { padding-right:60px; }.input-suffix span { position:absolute; right:11px; top:10px; color:var(--ink-soft); font-size:12px; }.form-footer { border-top:1px solid var(--line); margin-top:28px; padding-top:21px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.form-footer p { max-width:330px; margin:0; color:var(--ink-soft); font-size:12px; }.heading-action-row { align-items:center; }.chip-row { display:flex; flex-wrap:wrap; gap:6px; }.tryout-heading h1 { font-size:39px; margin-top:10px; }.publish-box { display:grid; justify-items:end; gap:10px; }.editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:start; }.editor-main { display:grid; gap:20px; }.upload-card { background:linear-gradient(135deg,#fffdfa,#eef9f7); }.section-heading p { margin:6px 0 0; font-size:12px; }.magic-mark { display:grid; place-items:center; width:44px; height:44px; color:var(--coral); background:#fff0ed; font-size:21px; border-radius:15px; }.upload-form { display:grid; grid-template-columns:1fr auto auto; gap:15px; align-items:center; }.upload-drop { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; padding:12px; border:1.5px dashed #a7cfc7; background:#fafffd; border-radius:13px; cursor:pointer; }.upload-drop input { position:absolute; opacity:0; pointer-events:none; }.upload-drop strong { font-size:13px; }.upload-drop small { grid-column:2; color:var(--ink-soft); font-size:10px; }.upload-icon { grid-row:1/3; display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#26846f; background:#d9f2eb; font-size:20px; }.ai-toggle { display:flex; align-items:center; gap:8px; min-width:170px; color:var(--ink); font-size:11px; cursor:pointer; }.ai-toggle input { display:none; }.toggle-dot { width:28px; height:17px; flex:0 0 auto; background:#d6e1e4; border-radius:99px; position:relative; }.toggle-dot::after { content:""; width:11px; height:11px; position:absolute; top:3px; left:3px; border-radius:50%; background:white; transition:.18s; }.ai-toggle input:checked + .toggle-dot { background:var(--mint); }.ai-toggle input:checked + .toggle-dot::after { left:14px; }.ai-toggle strong,.ai-toggle small { display:block; }.ai-toggle small { color:var(--ink-soft); line-height:1.2; margin-top:2px; }.manual-card { padding-bottom:23px; }.option-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.option-input { display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }.option-input b { display:grid; place-items:center; align-self:stretch; width:35px; color:var(--coral); background:#fff1ed; }.option-input input { border:0; outline:0; min-width:0; flex:1; padding:10px; }.manual-footer { display:flex; align-items:flex-end; justify-content:space-between; margin-top:16px; gap:18px; }.field.compact { width:190px; }.questions-card { padding-bottom:12px; }.question-list { border-top:1px solid var(--line); }.question-preview { display:grid; grid-template-columns:31px 1fr; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); }.question-number { display:grid; place-items:center; width:27px; height:27px; color:var(--navy); background:#e7f1f0; border-radius:8px; font-weight:850; font-size:11px; }.question-preview p { margin:0; font-weight:650; }.option-preview-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.option-preview-row span { max-width:195px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#758895; background:#f3f6f6; border-radius:5px; padding:3px 5px; font-size:10px; }.option-preview-row .correct { color:#287767; background:#def5ec; font-weight:700; }.editor-side { display:grid; gap:15px; position:sticky; top:96px; }.token-card { color:white; background:var(--navy); border-radius:18px; padding:23px; box-shadow:var(--shadow); }.token-card .section-kicker { color:#a8cfd4; }.token-card h3 { margin:7px 0 12px; font:700 22px Georgia,serif; }.token-code { display:block; margin:14px 0 9px; letter-spacing:3px; font-size:23px; }.token-card p { color:#bcd0db; font-size:11px; }.token-card .text-button { color:#f7c2b8; margin-top:6px; }.side-note { display:flex; gap:10px; padding:15px; color:#687f8d; background:#fff3dc; border-radius:14px; font-size:11px; }.side-note>span { font-size:17px; color:#b77a1b; }.side-note strong { color:#704e16; }.side-note p { margin:3px 0 0; }.toast { width:min(700px,100%); padding:13px 17px; margin:0 0 20px; border-radius:12px; box-shadow:var(--shadow); }.toast-success { color:#176957; background:#e0f5ed; }.toast-error { color:#8a413a; background:#fff0ec; }.toast ul { margin:6px 0 0; padding-left:18px; }.login-page { background:var(--navy); }.login-page .guest-wrap { min-height:100vh; }.login-grid { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(410px,.85fr); }.login-intro { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:clamp(42px,8vw,120px); color:#e3f0f1; background:linear-gradient(150deg,#153c5d,#23536f); }.login-intro::after { content:""; position:absolute; width:410px; height:410px; right:-155px; bottom:-120px; border:42px solid rgba(104,207,184,.25); border-radius:50%; }.brand-light { position:absolute; top:36px; left:clamp(42px,8vw,120px); color:white; }.brand-light .brand-mark { background:var(--coral); }.login-intro .eyebrow { margin-bottom:14px; }.login-intro h1,.student-brand-block h1 { z-index:1; margin:0; font:700 clamp(45px,5vw,74px)/.98 Georgia,serif; letter-spacing:-3px; }.login-intro h1 em { color:#f6c66a; }.login-intro p { z-index:1; max-width:440px; margin:24px 0 31px; color:#c1d5dc; font-size:16px; }.intro-points { display:grid; gap:10px; z-index:1; }.intro-points span { color:#d4e7e8; font-size:12px; }.intro-points b { display:inline-grid; place-items:center; width:23px; height:23px; margin-right:8px; color:#ffb3a8; border:1px solid #457994; border-radius:50%; font-size:9px; }.student-entry { z-index:1; margin-top:32px; color:#f6c66a; font-weight:800; }.student-entry span { font-size:20px; margin-left:8px; }.login-card-wrap { display:grid; place-items:center; padding:35px; background:#f6f7f4; }.auth-card { width:min(390px,100%); padding:34px; background:var(--paper); border-radius:20px; box-shadow:0 20px 55px rgba(17,54,76,.15); }.auth-card h2 { margin:5px 0; font:700 27px/1.12 Georgia,serif; }.auth-card .muted { margin:0 0 25px; font-size:12px; }.auth-card .field { margin-top:16px; }.check-row { display:flex; align-items:center; gap:7px; margin:16px 0 21px; color:var(--ink-soft); font-size:11px; font-weight:650; }.check-row input { accent-color:var(--navy); }.demo-note { margin-top:20px; padding-top:15px; border-top:1px solid var(--line); color:#78909e; font-size:10px; }.student-page { background:linear-gradient(135deg,#f6f8f8,#edf7f5); }.student-access-layout { min-height:100vh; display:grid; grid-template-columns:1fr minmax(400px,.8fr); }.student-brand-block { display:flex; flex-direction:column; justify-content:center; padding:clamp(50px,9vw,140px); color:white; background:var(--navy); }.student-brand-block .brand { align-self:flex-start; color:white; margin-bottom:75px; }.student-brand-block .eyebrow { color:#a9d2d4; margin-bottom:15px; }.student-brand-block h1 { max-width:540px; }.student-brand-block h1 em { color:#f6c66a; }.student-brand-block p { max-width:400px; color:#c0d6db; font-size:16px; }.student-access-card { align-self:center; justify-self:center; width:min(390px, calc(100% - 48px)); padding:36px; background:var(--paper); border-radius:21px; box-shadow:var(--shadow); }.student-card-icon { display:grid; place-items:center; width:43px; height:43px; color:var(--coral); background:#fff0eb; border-radius:14px; font-size:20px; }.student-access-card h2 { margin:15px 0 4px; font:700 28px Georgia,serif; }.student-access-card .muted { margin:0 0 20px; font-size:12px; }.student-access-card .field { margin-top:15px; }.token-input { letter-spacing:2px; text-transform:uppercase; }.subtle-link { display:block; margin-top:17px; text-align:center; color:#7a8d99; font-size:11px; font-weight:700; }.exam-page { background:#eef5f5; }.exam-shell { width:min(940px,100%); margin:0 auto; min-height:100vh; padding:0 25px 54px; }.exam-topbar { height:85px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.exam-meta { display:grid; text-align:center; line-height:1.2; }.exam-meta strong { font-size:13px; }.exam-meta span { color:var(--ink-soft); font-size:11px; }.exam-count { display:flex; align-items:baseline; gap:5px; color:var(--ink-soft); font-size:11px; }.exam-count strong { color:var(--navy); font-size:15px; }.progress-track { height:6px; overflow:hidden; background:#dbe8e8; border-radius:99px; }.progress-track span { display:block; height:100%; border-radius:99px; background:var(--coral); }.question-card { margin-top:34px; padding:clamp(25px,5vw,55px); background:var(--paper); border-radius:22px; box-shadow:var(--shadow); }.question-card h1 { max-width:740px; margin:12px 0 31px; font:700 clamp(24px,3vw,34px)/1.25 Georgia,serif; }.answer-list { display:grid; gap:10px; }.answer-choice { position:relative; display:flex; align-items:center; gap:15px; padding:14px; color:#456072; border:1px solid var(--line); border-radius:13px; cursor:pointer; transition:border .16s,background .16s; }.answer-choice:hover { border-color:#9bcabd; background:#f6fcfa; }.answer-choice input { position:absolute; opacity:0; }.choice-letter { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; color:#66808e; background:#eef4f4; border-radius:8px; font-weight:850; }.answer-choice:has(input:checked) { color:var(--navy); border-color:var(--mint); background:#eefbf7; font-weight:700; }.answer-choice:has(input:checked) .choice-letter { color:white; background:var(--mint); }.question-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:35px; padding-top:20px; border-top:1px solid var(--line); }.save-note { color:#8a9ca4; font-size:11px; }.complete-card { width:min(590px, calc(100% - 42px)); margin:0 auto; padding:78px 45px; min-height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }.complete-burst { display:grid; place-items:center; width:61px; height:61px; margin-bottom:18px; color:var(--coral); background:#fff0eb; border-radius:20px; font-size:28px; }.complete-card h1 { margin:10px 0 15px; font:700 clamp(38px,6vw,59px)/1 Georgia,serif; letter-spacing:-2px; }.complete-card>p { max-width:400px; color:var(--ink-soft); }.score-display { display:grid; justify-items:center; margin:32px 0 28px; padding:21px 47px; color:#577081; background:#fffdfa; border:1px solid var(--line); border-radius:17px; }.score-display span,.score-display small { font-size:11px; font-weight:750; }.score-display strong { color:var(--navy); font:700 56px/1 Georgia,serif; }
@media (max-width: 860px) { .topbar { gap:15px; padding:0 22px; }.topnav { display:none; }.account-copy { display:none; }.page-wrap { width:min(100% - 32px, 720px); padding-top:34px; }.hero-row,.heading-action-row { align-items:flex-start; flex-direction:column; }.stat-grid { grid-template-columns:1fr; }.stat-card { min-height:115px; }.editor-grid { grid-template-columns:1fr; }.editor-side { position:static; grid-template-columns:1fr 1fr; }.upload-form { grid-template-columns:1fr; }.login-grid,.student-access-layout { grid-template-columns:1fr; }.login-intro { min-height:510px; }.student-brand-block { min-height:430px; }.student-brand-block .brand { margin-bottom:50px; }.login-card-wrap { padding:35px 18px; }.tryout-row { grid-template-columns:43px 1fr 24px; }.tryout-metric { display:none; } }
@media (max-width: 560px) { .page-wrap { width:min(100% - 24px, 720px); }.hero-row h1,.page-heading h1 { font-size:33px; }.content-card { padding:20px; border-radius:16px; }.form-grid,.option-form-grid { grid-template-columns:1fr; }.form-footer,.manual-footer,.question-footer { align-items:stretch; flex-direction:column; }.field.compact { width:100%; }.button { width:100%; }.tryout-heading h1 { font-size:32px; }.editor-side { grid-template-columns:1fr; }.publish-box { justify-items:start; }.login-intro,.student-brand-block { padding:42px 28px; }.brand-light { left:28px; }.login-intro h1,.student-brand-block h1 { font-size:47px; }.auth-card,.student-access-card { padding:27px 23px; }.exam-shell { padding:0 13px 30px; }.exam-topbar { height:75px; }.exam-meta { display:none; }.question-card { margin-top:22px; padding:24px 19px; }.question-card h1 { font-size:25px; }.save-note { order:3; width:100%; text-align:center; }.button-ghost { width:auto; }.question-footer .button { width:100%; }.answer-choice { align-items:flex-start; } }

/* Administrasi, laporan, dan editor soal */
.admin-grid { display:grid; grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr); gap:22px; align-items:start; }.admin-form-card { position:sticky; top:96px; }.admin-list-card,.report-card { min-width:0; }.stack-form { display:grid; gap:15px; }.data-table-wrap { overflow:auto; margin:0 -4px; }.data-table { width:100%; min-width:620px; border-collapse:collapse; text-align:left; }.data-table th { padding:0 12px 10px; color:#7a8e9a; font-size:10px; letter-spacing:1px; text-transform:uppercase; }.data-table td { padding:14px 12px; border-top:1px solid var(--line); color:#526b7d; font-size:12px; vertical-align:middle; }.data-table td:first-child { padding-left:12px; }.data-table strong { display:block; color:var(--ink); font-size:13px; }.data-table small { display:block; margin-top:2px; color:#82939d; font-size:11px; }.data-table code { color:#597184; background:#edf3f4; border-radius:5px; padding:3px 5px; font:700 11px ui-monospace, SFMono-Regular, Menlo, monospace; }.table-actions { display:flex; align-items:center; gap:12px; white-space:nowrap; }.table-actions form { margin:0; }.danger-button { color:#c2554a; font-size:12px; font-weight:800; }.table-empty { padding:30px!important; text-align:center; color:#82939d!important; }.role-badge { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; font-size:10px; font-weight:800; }.role-admin { color:#745015; background:#fff0d3; }.role-teacher { color:#176957; background:#ddf5ee; }.pagination-wrap { margin-top:18px; }.pagination-wrap nav { display:flex; justify-content:center; }.report-hero { margin-bottom:28px; }.report-filter { display:flex; align-items:flex-end; gap:14px; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }.report-filter .field { width:min(390px,100%); }.report-filter .button { min-height:42px; }.status-submitted { color:#176957; background:#ddf5ee; }.status-in_progress { color:#986818; background:#fff0d4; }.score-cell { color:var(--navy)!important; font-weight:850; font-size:14px!important; }.question-preview { grid-template-columns:31px minmax(0,1fr) auto; align-items:start; }.question-actions { display:flex; gap:10px; padding-top:3px; font-size:11px; }.editor-lock-note { margin-bottom:0; }.option-edit-list { display:grid; gap:10px; }.question-edit-form { max-width:850px; }.preview-question-card { max-width:840px; padding:clamp(26px,5vw,54px); }.preview-meta { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#738895; font-size:12px; }.preview-meta strong { color:var(--coral); font-size:11px; letter-spacing:1px; text-transform:uppercase; }.preview-question-card h2 { margin:15px 0 30px; font:700 clamp(24px,3vw,34px)/1.25 Georgia,ui-serif,serif; }.preview-question-card .answer-choice { cursor:default; }.preview-question-card .answer-choice small { margin-left:auto; color:#287767; font-size:10px; font-weight:850; white-space:nowrap; }.preview-correct { color:#176957; border-color:#9bd8c8; background:#effbf6; font-weight:700; }.preview-correct .choice-letter { color:white; background:var(--mint); }.preview-explanation { margin-top:24px; padding:16px; color:#506b7d; background:#f0f7f6; border-radius:13px; }.preview-explanation strong { color:var(--navy); }.preview-explanation p { margin:4px 0 0; }.preview-question-card .form-footer { margin-top:28px; }
@media (max-width: 860px) { .admin-grid { grid-template-columns:1fr; }.admin-form-card { position:static; }.report-filter { align-items:stretch; flex-direction:column; }.report-filter .button { width:fit-content; }.question-preview { grid-template-columns:31px minmax(0,1fr); }.question-actions { grid-column:2; padding-top:0; } }
@media (max-width: 560px) { .data-table { min-width:570px; }.report-hero .button { width:100%; }.report-filter .button { width:100%; }.preview-meta { align-items:flex-start; flex-direction:column; }.preview-question-card .answer-choice small { display:none; }.question-actions { flex-wrap:wrap; } }

/* Review keseluruhan dan detail jawaban siswa */
.publish-box .button { white-space:nowrap; }.ai-review-note { display:flex; gap:12px; margin:-2px 0 18px; padding:14px 15px; color:#466779; background:#edf8f5; border:1px solid #cfe9e0; border-radius:12px; font-size:11px; }.ai-review-note>span { color:#23806d; font-size:18px; }.ai-review-note strong { color:#176957; }.ai-review-note p { margin:3px 0 0; }.ai-source-badge { display:inline-flex; margin-top:8px; padding:3px 6px; color:#177967; background:#e2f5ee; border-radius:5px; font-size:9px; font-weight:850; }.all-questions-preview,.answer-review-list { display:grid; gap:18px; }.all-questions-preview .preview-question-card { max-width:none; }.student-result-link { display:block; }.student-result-link:hover strong { color:var(--coral); }.score-summary { display:grid; justify-items:center; min-width:132px; padding:13px 19px; color:#607989; background:#fff5e9; border-radius:14px; line-height:1.15; }.score-summary span,.score-summary small { font-size:10px; font-weight:800; }.score-summary strong { margin:3px 0; color:var(--navy); font:700 31px/1 Georgia,serif; }.answer-review-card { padding:24px 27px; }.answer-review-top { display:grid; grid-template-columns:31px 1fr; gap:12px; align-items:start; }.answer-review-top h2 { margin:6px 0 0; font:700 21px/1.32 Georgia,ui-serif,serif; }.answer-status { display:inline-flex; padding:4px 7px; border-radius:999px; font-size:10px; font-weight:850; }.answer-status.is-correct { color:#176957; background:#ddf5ee; }.answer-status.is-incorrect { color:#a9453b; background:#fff0ec; }.answer-status.is-empty { color:#7a8d99; background:#eef3f4; }.answer-review-copy { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:19px 0 0 43px; }.answer-review-copy>div { display:grid; gap:3px; padding:12px; border-radius:10px; background:#f5f8f8; }.answer-review-copy span { color:#82939d; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }.answer-review-copy strong { color:#496476; font-size:12px; }.answer-correct { border-left:4px solid var(--mint); }.answer-incorrect { border-left:4px solid var(--coral); }.answer-empty { border-left:4px solid #c8d4d8; }
@media (max-width: 560px) { .publish-box { justify-items:stretch; width:100%; }.publish-box .button { width:100%; }.score-summary { justify-items:start; width:100%; }.answer-review-card { padding:20px; }.answer-review-copy { grid-template-columns:1fr; margin-left:0; }.answer-review-top h2 { font-size:19px; } }

/* Gambar soal, navigasi siswa, dan laporan berskala besar */
.question-image-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:-12px 0 27px; }.question-image-grid img { display:block; width:100%; max-height:360px; object-fit:contain; background:#f5f8f8; border:1px solid var(--line); border-radius:13px; }.preview-image-grid,.review-image-grid { margin:-10px 0 25px; }.question-inline-images { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.question-inline-images img { display:block; width:72px; height:54px; object-fit:cover; background:#f5f8f8; border:1px solid var(--line); border-radius:8px; }.imported-images-note { display:grid; gap:9px; padding:14px; color:#506b7d; background:#f4f9f8; border:1px solid #dbeae6; border-radius:12px; }.imported-images-note strong { color:var(--navy); font-size:12px; }.imported-images-note small { color:#78909e; font-size:11px; }
.exam-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:13px; }.exam-timer { display:flex; align-items:baseline; gap:5px; padding:7px 9px; color:#4f697b; background:#f9fcfb; border:1px solid #d7e7e3; border-radius:9px; font-size:10px; }.exam-timer strong { color:var(--coral); font-size:13px; letter-spacing:.4px; }.question-navigation { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; padding:12px; background:rgba(255,253,250,.68); border:1px solid #dbe8e8; border-radius:13px; }.question-nav-item { display:grid; place-items:center; width:32px; height:32px; color:#708693; background:white; border:1px solid #dbe6e6; border-radius:8px; font-size:11px; font-weight:850; transition:.16s ease; }.question-nav-item:hover { color:var(--navy); border-color:#9fcabc; }.question-nav-item.answered { color:#176957; background:#ddf5ee; border-color:#b9e3d5; }.question-nav-item.active { color:white; background:var(--navy); border-color:var(--navy); box-shadow:0 4px 10px rgba(23,63,95,.18); }
.report-filter { display:grid; grid-template-columns:repeat(3,minmax(145px,1fr)) auto; align-items:end; }.report-filter .field { width:auto; }.report-filter-actions { display:flex; align-items:center; gap:8px; }.report-filter-actions .button { white-space:nowrap; }.tryout-row { grid-template-columns:45px minmax(0,1fr) 68px 68px 76px 24px; }
@media (max-width: 860px) { .report-filter { grid-template-columns:1fr 1fr; }.report-filter-actions { grid-column:1/-1; }.tryout-row { grid-template-columns:43px minmax(0,1fr) 24px; }.tryout-metric { display:none; } }
@media (max-width: 560px) { .question-image-grid { grid-template-columns:1fr; margin:-8px 0 22px; }.question-image-grid img { max-height:280px; }.exam-topbar { gap:10px; }.exam-top-actions { margin-left:auto; gap:8px; }.exam-timer { padding:6px 7px; }.exam-timer span { display:none; }.question-navigation { gap:6px; padding:10px; }.question-nav-item { width:30px; height:30px; }.report-filter { grid-template-columns:1fr; }.report-filter-actions { display:grid; grid-template-columns:1fr 1fr; }.report-filter-actions .button { width:100%; } }

/* Transisi AJAX pada halaman pengerjaan */
#exam-app .exam-shell { opacity:1; transform:translateY(0); transition:opacity .16s ease, transform .16s ease; }#exam-app.is-loading .exam-shell { opacity:.46; transform:translateY(5px); pointer-events:none; }#exam-app button:disabled { cursor:wait; opacity:.68; }

/* Aksi selesai yang selalu tersedia dan konfirmasi pengiriman */
.exam-shell { padding-bottom:108px; }.exam-quick-finish { position:fixed; right:max(25px,calc((100vw - 940px) / 2 + 25px)); bottom:22px; z-index:6; }.button-finish { min-height:40px; padding:10px 14px; color:#9a443b; background:#fff9f5; border:1px solid #f0b9b0; box-shadow:0 10px 24px rgba(121,66,52,.16); font-size:12px; }.button-finish:hover { color:white; background:var(--coral); border-color:var(--coral); }.confirm-modal[hidden] { display:none; }.confirm-modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; }.confirm-modal-backdrop { position:absolute; inset:0; background:rgba(13,35,52,.5); backdrop-filter:blur(3px); }.confirm-modal-card { position:relative; width:min(430px,100%); padding:31px; text-align:center; background:var(--paper); border-radius:20px; box-shadow:0 22px 60px rgba(8,35,54,.26); }.confirm-modal-icon { display:grid; place-items:center; width:45px; height:45px; margin:0 auto 14px; color:#a15b19; background:#fff0d8; border-radius:14px; font-weight:900; font-size:22px; }.confirm-modal-card h2 { margin:0; color:var(--navy); font:700 26px/1.15 Georgia,ui-serif,serif; }.confirm-modal-card p { margin:12px auto 23px; max-width:340px; color:#697f8d; font-size:13px; line-height:1.5; }.confirm-modal-actions { display:flex; justify-content:center; gap:9px; }.confirm-modal-actions .button { min-width:130px; }.confirm-modal-actions .button-ghost { background:#edf3f4; }
@media (max-width: 560px) { .exam-shell { padding-bottom:90px; }.exam-quick-finish { right:13px; bottom:13px; }.button-finish { min-height:38px; padding:9px 11px; }.confirm-modal-card { padding:27px 21px; }.confirm-modal-actions { align-items:stretch; flex-direction:column-reverse; }.confirm-modal-actions .button { width:100%; } }

/* Modal notifikasi khusus ruang siswa */
.access-alert-modal { z-index:30; }.access-alert-kicker { display:block; margin-bottom:7px; color:var(--coral); font-size:10px; font-weight:850; letter-spacing:1.3px; }.access-alert-modal .confirm-modal-actions { margin-top:4px; }.access-alert-modal .confirm-modal-actions .button { min-width:180px; }

/* Layout pengerjaan dua kolom */
.exam-page { background:linear-gradient(135deg,#f4f7ff,#f6f9fc); }.exam-shell { width:min(1680px,calc(100% - 48px)); min-height:100vh; margin:0 auto; padding:26px 0 54px; }.exam-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }.exam-main,.exam-sidebar { background:rgba(255,255,255,.92); border:1px solid #e4eaf2; border-radius:28px; box-shadow:0 16px 44px rgba(27,55,91,.08); }.exam-main { min-height:calc(100vh - 80px); padding:34px; }.exam-question-chip { display:inline-flex; align-items:center; gap:8px; padding:13px 18px; color:#3f70d8; background:#eef3ff; border-radius:999px; font-size:15px; font-weight:850; }.exam-question-chip span { color:#97b2ef; }.exam-main .question-card { margin:25px 0 0; padding:0; background:transparent; border-radius:0; box-shadow:none; }.exam-main .question-label { margin-bottom:10px; color:#4976d5; }.exam-main .question-card h1 { max-width:100%; margin:0 0 25px; color:#1e2e48; font:750 clamp(17px,1.45vw,22px)/1.46 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.25px; }.exam-main .question-image-grid { margin:0 0 24px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }.exam-main .question-image-grid img { max-height:330px; border-radius:14px; }.exam-main .answer-list { gap:14px; }.exam-main .answer-choice { min-height:70px; gap:18px; padding:15px 20px; color:#27364e; border-color:#e5eaf1; border-radius:17px; font-size:16px; }.exam-main .answer-choice:hover { border-color:#b8cdf8; background:#f8faff; }.exam-main .answer-choice:has(input:checked) { color:#244f9d; border-color:#5d8be7; background:#f1f6ff; }.exam-main .choice-letter { width:38px; height:38px; color:#4977d7; background:#eff4ff; border-radius:11px; font-size:16px; }.exam-main .answer-choice:has(input:checked) .choice-letter { background:#4775d7; }.exam-main .question-footer { margin-top:30px; padding-top:24px; }.exam-main .exam-back-button { color:#1f304a; background:#fff; border:1px solid #e4eaf2; }.exam-main .exam-next-button { min-width:174px; background:#4775d7; }.exam-sidebar { position:sticky; top:24px; padding:31px; }.exam-time-panel { text-align:center; }.exam-time-panel>span { display:block; color:#77859b; font-size:17px; }.exam-large-timer { display:block; margin:9px 0 18px; color:#1c2a44; font-size:37px; line-height:1; letter-spacing:.5px; }.exam-large-timer.no-timer { color:#2c8a74; font-size:28px; }.exam-sidebar .progress-track { height:11px; margin:0; background:#edf0f6; }.exam-sidebar .progress-track span { background:linear-gradient(90deg,#4475dc,#83a3f0); }.exam-time-panel p { margin:18px 0 0; color:#77859b; font-size:14px; }.exam-time-panel p span { color:#b1bfce; }.exam-sidebar .question-navigation { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:25px 0 0; padding:0; background:none; border:0; border-radius:0; }.exam-sidebar .question-nav-item { width:100%; aspect-ratio:1; height:auto; color:#27364c; border-color:#e5eaf1; border-radius:11px; font-size:15px; }.exam-sidebar .question-nav-item.answered { color:#25715f; background:#e2f6ed; border-color:#c6eadc; }.exam-sidebar .question-nav-item.active { background:#4775d7; border-color:#4775d7; box-shadow:0 5px 12px rgba(71,117,215,.25); }.exam-sidebar .exam-quick-finish { position:static; margin-top:25px; }.exam-sidebar .button-finish { width:100%; min-height:46px; color:#aa4d43; background:#fff8f5; border-color:#f0c0b8; box-shadow:none; font-size:13px; }.exam-sidebar .button-finish:hover { background:var(--coral); color:#fff; }
@media (max-width: 1120px) { .exam-shell { width:min(100% - 32px,980px); }.exam-layout { grid-template-columns:1fr; }.exam-main { min-height:0; }.exam-sidebar { position:static; display:grid; grid-template-columns:250px 1fr; column-gap:25px; align-items:start; }.exam-sidebar .exam-quick-finish { grid-column:1/-1; margin-top:20px; }.exam-sidebar .question-navigation { margin:0; }.exam-time-panel { padding-top:3px; }.exam-sidebar .progress-track { margin-top:14px; } }
@media (max-width: 640px) { .exam-shell { width:min(100% - 24px,680px); padding:12px 0 30px; }.exam-layout { gap:15px; }.exam-main,.exam-sidebar { border-radius:20px; }.exam-main { padding:21px 17px; }.exam-question-chip { padding:10px 13px; font-size:12px; }.exam-main .question-card { margin-top:20px; }.exam-main .question-card h1 { margin-bottom:21px; font-size:16px; line-height:1.5; }.exam-main .answer-list { gap:10px; }.exam-main .answer-choice { min-height:60px; gap:13px; padding:12px; font-size:14px; border-radius:13px; }.exam-main .choice-letter { width:33px; height:33px; font-size:14px; }.exam-main .question-footer { align-items:stretch; gap:10px; margin-top:24px; padding-top:18px; }.exam-main .save-note { order:3; }.exam-main .exam-next-button,.exam-main .exam-back-button { width:100%; min-width:0; }.exam-sidebar { display:block; padding:21px 17px; }.exam-time-panel>span { font-size:14px; }.exam-large-timer { font-size:31px; }.exam-time-panel p { margin-top:12px; font-size:12px; }.exam-sidebar .question-navigation { gap:7px; margin-top:20px; }.exam-sidebar .question-nav-item { border-radius:9px; font-size:13px; }.exam-sidebar .exam-quick-finish { margin-top:20px; }.exam-sidebar .button-finish { min-height:43px; } }

/* Beranda siswa pada ponsel: header singkat, form sebagai fokus utama */
@media (max-width: 640px) { .student-access-layout { display:block; min-height:100vh; padding-bottom:26px; background:#f4f7f8; }.student-brand-block { display:block; min-height:0; padding:24px 24px 74px; border-radius:0 0 26px 26px; }.student-brand-block .brand { margin:0 0 23px; font-size:18px; }.student-brand-block .brand-mark { width:27px; height:27px; font-size:15px; }.student-brand-block .eyebrow { margin-bottom:8px; font-size:9px; }.student-brand-block h1 { max-width:300px; font:700 31px/1.06 Georgia,ui-serif,serif; letter-spacing:-1.3px; }.student-brand-block p { display:none; }.student-access-card { position:relative; width:calc(100% - 32px); margin:-43px auto 0; padding:25px 21px; border-radius:20px; box-shadow:0 16px 38px rgba(17,54,76,.18); }.student-card-icon { width:38px; height:38px; border-radius:12px; font-size:18px; }.student-access-card h2 { margin:12px 0 3px; font-size:24px; }.student-access-card .muted { margin-bottom:17px; }.student-access-card .field { margin-top:13px; }.student-access-card .button { margin-top:3px; } }

/* Login ponsel: fokus pada form, tanpa hero panjang. */
@media (max-width: 640px) { .login-grid { display:block; min-height:100vh; background:#f4f7f8; }.login-intro { display:block; min-height:0; padding:24px 24px 78px; border-radius:0 0 26px 26px; }.login-intro::after { display:none; }.login-intro .brand-light { position:static; margin:0; font-size:18px; }.login-intro .brand-mark { width:28px; height:28px; font-size:15px; }.login-intro .eyebrow { display:block; margin:21px 0 0; color:#a9d2d4; font-size:9px; }.login-intro h1,.login-intro>p,.intro-points,.student-entry { display:none; }.login-card-wrap { display:block; padding:0 0 28px; background:transparent; }.auth-card { position:relative; width:calc(100% - 32px); margin:-44px auto 0; padding:25px 21px; border-radius:20px; box-shadow:0 16px 38px rgba(17,54,76,.18); }.auth-card h2 { margin-top:6px; font-size:24px; }.auth-card .muted { margin-bottom:17px; }.auth-card .field { margin-top:13px; }.auth-card .button { margin-top:3px; }.demo-note { margin-top:16px; padding-top:13px; } }

/* Status hasil siswa */
.status-auto_submitted { color:#875a18; background:#fff0d4; }
.button-danger { color:#fff; background:var(--coral); box-shadow:0 8px 18px rgba(240,100,89,.2); }.button-danger:hover { background:#d9534a; }

/* Profil akun */
.account-profile { display:flex; align-items:center; gap:9px; padding:4px; border-radius:12px; }.account-profile:hover { background:#eef5f5; }.profile-grid { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr); gap:22px; align-items:start; }.profile-summary-card { position:sticky; top:96px; display:flex; flex-direction:column; align-items:flex-start; }.profile-avatar { display:grid; place-items:center; width:70px; height:70px; margin-bottom:16px; color:#fff; background:linear-gradient(135deg,var(--navy),#3d7496); border-radius:22px; font:700 31px/1 Georgia,serif; }.profile-summary-card h2 { margin:13px 0 2px; color:var(--navy); font:700 25px/1.15 Georgia,ui-serif,serif; }.profile-summary-card p { margin:0; color:#637c8b; font-size:12px; overflow-wrap:anywhere; }.profile-summary-card small { margin-top:22px; padding-top:17px; color:#81939e; border-top:1px solid var(--line); font-size:11px; }.profile-form-stack { display:grid; gap:22px; }.profile-form-stack .section-heading { margin-bottom:2px; }.password-form .button-secondary { color:#176957; background:#ddf5ee; }
@media (max-width: 860px) { .profile-grid { grid-template-columns:1fr; }.profile-summary-card { position:static; }.profile-summary-card small { margin-top:14px; padding-top:14px; } }
@media (max-width: 560px) { .profile-summary-card { padding:22px; }.profile-form-stack .form-footer .button { width:100%; } }

/* Aksi hapus Tryout dari dashboard */
.tryout-dashboard-row { position:relative; grid-template-columns:45px minmax(0,1fr) 68px 68px 76px 94px; }.tryout-dashboard-row:hover { background:#f7fbfa; }.tryout-row-link { position:absolute; inset:0; z-index:1; }.tryout-dashboard-row>:not(.tryout-row-link) { position:relative; z-index:2; }.tryout-dashboard-row>.tryout-icon,.tryout-dashboard-row>.tryout-main,.tryout-dashboard-row>.tryout-metric { pointer-events:none; }.tryout-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:13px; }.tryout-row-actions form { margin:0; }.dashboard-delete-button { padding:7px 8px; border-radius:8px; font-size:11px; }.dashboard-delete-button:hover { background:#fff0ec; }
@media (max-width: 860px) { .tryout-dashboard-row { grid-template-columns:43px minmax(0,1fr) auto; }.tryout-dashboard-row .tryout-metric { display:none; }.tryout-row-actions { gap:10px; } }

/* Identitas sekolah */
.brand-school-logo { display:block; width:32px; height:32px; flex:0 0 auto; object-fit:contain; border-radius:9px; background:#fff; box-shadow:0 2px 7px rgba(12,39,56,.12); }.brand-name { display:block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.brand-light .brand-name { color:#fff; }.complete-card>.brand { margin-bottom:30px; }.school-settings-form { max-width:700px; }.school-logo-setting { display:flex; align-items:center; gap:18px; padding:17px; background:#f4f9f8; border:1px solid #d9eae6; border-radius:15px; }.school-logo-preview { display:grid; place-items:center; width:82px; height:82px; flex:0 0 auto; overflow:hidden; color:#fff; background:var(--navy); border-radius:18px; box-shadow:0 7px 17px rgba(23,63,95,.14); font:700 32px/1 Georgia,serif; }.school-logo-preview img { width:100%; height:100%; object-fit:contain; background:#fff; }.school-logo-setting strong { color:var(--navy); }.school-logo-setting p { max-width:430px; margin:4px 0 11px; color:#718693; font-size:11px; }.school-logo-upload { position:relative; overflow:hidden; width:auto; min-height:34px; }.school-logo-upload input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }.exam-school-logo,.exam-school-mark { display:grid; place-items:center; width:23px; height:23px; flex:0 0 auto; object-fit:contain; color:#fff; background:#4775d7; border-radius:7px; font:800 12px/1 Georgia,serif; }.exam-school-logo { background:#fff; box-shadow:0 1px 4px rgba(40,73,125,.16); }.exam-tryout-name { display:inline-flex; align-items:center; gap:8px; }.exam-tryout-name i { color:#97b2ef; font-style:normal; }
@media (max-width: 640px) { .brand-school-logo { width:28px; height:28px; }.brand-name { max-width:190px; }.complete-card>.brand { margin-bottom:25px; }.school-logo-setting { align-items:flex-start; gap:13px; padding:14px; }.school-logo-preview { width:65px; height:65px; border-radius:15px; font-size:26px; }.school-logo-setting p { margin-bottom:9px; }.exam-school-logo,.exam-school-mark { width:20px; height:20px; border-radius:6px; font-size:11px; }.exam-question-chip { gap:7px; }.exam-tryout-name { gap:6px; } }

/* Jenis soal Benar / Salah */
.true-false-note { display:grid; gap:4px; margin-top:2px; padding:13px 15px; color:#426272; background:#edf6ff; border:1px solid #cfe1f6; border-radius:12px; font-size:11px; }.true-false-note strong { color:#2d5d9e; }.true-false-note span { color:#6f8797; }.answer-key-fields { display:flex; align-items:flex-end; }.question-type-badge { display:inline-flex; align-items:center; margin-left:7px; padding:3px 7px; color:#2d5d9e; background:#eaf2ff; border-radius:999px; font:800 9px/1.2 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:.45px; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }.preview-meta>div { display:flex; align-items:center; gap:7px; }.preview-meta .question-type-badge { margin-left:0; }.question-label .question-type-badge { margin-left:4px; color:#4775d7; background:#eef3ff; vertical-align:baseline; }
@media (max-width: 560px) { .answer-key-fields { width:100%; }.true-false-note { padding:12px; }.question-type-badge { margin-left:4px; } }

/* Soal Benar / Salah dengan beberapa pernyataan */
.true-false-group-editor { display:grid; gap:12px; }.statement-edit-list { display:grid; gap:10px; }.statement-edit-row { display:grid; grid-template-columns:minmax(0,1fr) 155px; gap:8px 12px; padding:13px; color:#506b7d; background:#f7fbff; border:1px solid #d9e7f5; border-radius:12px; font-size:11px; font-weight:800; }.statement-edit-row>span { grid-column:1/-1; color:#3970b7; }.statement-edit-row textarea,.statement-edit-row select { width:100%; border:1px solid #d4e0ed; outline:0; padding:10px; color:var(--ink); background:#fff; border-radius:9px; font:600 12px/1.45 Inter,ui-sans-serif,system-ui,sans-serif; resize:vertical; }.statement-edit-row textarea:focus,.statement-edit-row select:focus { border-color:#72a2e5; box-shadow:0 0 0 3px rgba(78,129,211,.12); }.statement-preview-row { display:grid; gap:5px; margin-top:8px; }.statement-preview-row span { display:block; max-width:100%; overflow:hidden; color:#6a8090; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }.statement-preview-row .correct { color:#287767; }.preview-statement-list { display:grid; gap:10px; }.preview-statement { display:flex; gap:13px; padding:14px; color:#466074; border:1px solid #e0e9f3; border-radius:13px; }.preview-statement>span { display:grid; place-items:center; width:29px; height:29px; flex:0 0 auto; color:#4775d7; background:#eef3ff; border-radius:9px; font-weight:850; }.preview-statement p { margin:0; font-weight:700; }.preview-statement small { display:block; margin-top:4px; color:#26816b; font-weight:800; }.true-false-statement-list { display:grid; gap:14px; }.true-false-statement { padding:17px; background:#f9fbff; border:1px solid #e1e9f5; border-radius:16px; }.true-false-statement>p { margin:0 0 13px; color:#243953; font-size:16px; line-height:1.5; font-weight:700; }.true-false-statement>p>span { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:4px; color:#4775d7; background:#eef3ff; border-radius:8px; font-size:12px; }.true-false-answer-options { display:flex; gap:9px; }.true-false-answer-options label { position:relative; display:flex; align-items:center; justify-content:center; min-width:108px; min-height:42px; overflow:hidden; color:#526d83; border:1px solid #dbe4ef; border-radius:11px; background:#fff; cursor:pointer; font-size:13px; font-weight:850; transition:.16s; }.true-false-answer-options input { position:absolute; opacity:0; }.true-false-answer-options label:has(input:checked) { color:#2356aa; border-color:#5d8be7; background:#edf4ff; box-shadow:0 3px 9px rgba(70,112,195,.13); }.answer-review-statement-list { display:grid; gap:9px; margin-top:18px; }.answer-review-statement { padding:14px; border:1px solid #e1e9ee; border-radius:12px; }.answer-review-statement>strong { display:block; color:#314d62; font-size:13px; }.answer-review-statement>div { display:flex; flex-wrap:wrap; gap:9px 15px; margin-top:9px; color:#6d8291; font-size:11px; }.answer-review-statement em { color:#b55c50; font-style:normal; font-weight:850; }.answer-review-statement.is-correct { border-color:#bfe2d4; background:#f1fbf6; }.answer-review-statement.is-correct em { color:#227360; }.answer-review-statement.is-empty { background:#fbfcfd; }
@media (max-width: 560px) { .statement-edit-row { grid-template-columns:1fr; }.statement-edit-row>span { grid-column:auto; }.true-false-statement { padding:14px; }.true-false-statement>p { font-size:14px; }.true-false-answer-options label { min-width:0; flex:1; }.answer-review-statement>div { display:grid; gap:5px; } }

/* Editor pernyataan B/S dan penulisan matematika */
.math-editor-tools { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 18px; padding:15px 17px; color:#466176; background:linear-gradient(135deg,#f8fbff,#f3fbf9); border:1px solid #d8e9e8; border-radius:14px; }.math-editor-tools strong { display:block; color:var(--navy); font-size:12px; }.math-editor-tools p { margin:3px 0 0; color:#728896; font-size:11px; line-height:1.45; }.math-editor-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.math-editor-actions button { min-height:31px; padding:6px 9px; color:#315d79; background:#fff; border:1px solid #cbdfe4; border-radius:8px; font-size:11px; font-weight:800; }.math-editor-actions button:hover { color:#1e7666; border-color:#82c2b6; background:#effaf7; }.math-editor-example { grid-column:1/-1; }.math-editor-example code { color:#245b91; background:#eaf2fb; border-radius:5px; padding:2px 4px; font-size:10px; }.math-editor-preview { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:10px; border-top:1px dashed #c9dddf; color:#738895; font-size:11px; }.math-editor-preview [data-math-preview-content] { color:var(--ink); font-size:15px; }.statement-edit-list { gap:13px; }.statement-edit-card { display:grid; grid-template-columns:minmax(0,1fr) 175px; gap:15px 18px; padding:18px; background:#fbfdff; border:1px solid #d8e6f2; border-radius:15px; box-shadow:0 5px 14px rgba(44,88,119,.04); }.statement-edit-heading { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding-bottom:13px; border-bottom:1px solid #e4edf5; }.statement-edit-number { display:grid; flex:0 0 auto; place-items:center; width:31px; height:31px; color:#376fb4; background:#eaf2ff; border-radius:9px; font-size:12px; font-weight:900; }.statement-edit-heading strong,.statement-edit-heading small { display:block; }.statement-edit-heading strong { color:#294d70; font-size:13px; }.statement-edit-heading small { margin-top:2px; color:#8193a0; font-size:10px; font-weight:600; }.statement-body-field { min-width:0; }.statement-key-field { align-self:end; }.statement-key-field select { min-height:44px; }.add-statement-button { width:fit-content; padding:5px 0; font-size:12px; }.true-false-group-editor[hidden] { display:none; }.katex { font-size:1em; }.question-preview [data-math-content] .katex { font-size:1em; }.answer-choice [data-math-content],.preview-statement [data-math-content],.answer-review-card [data-math-content] { overflow-wrap:anywhere; }
@media (max-width: 680px) { .math-editor-tools { grid-template-columns:1fr; }.math-editor-actions { justify-content:flex-start; }.statement-edit-card { grid-template-columns:1fr; gap:13px; padding:15px; }.statement-key-field { align-self:auto; }.math-editor-actions button { flex:1 0 auto; } }

/* Unggah dan kelola gambar pada soal manual */
.question-image-uploader { display:grid; gap:11px; padding:16px; background:#fbfcfb; border:1px solid #dce9e6; border-radius:14px; }.question-image-uploader-heading strong { color:var(--navy); font-size:12px; }.question-image-uploader-heading small { color:#8a9aa3; font-weight:650; }.question-image-uploader-heading p { margin:3px 0 0; color:#738894; font-size:10px; }.question-image-drop { display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 13px; color:#426778; background:#fff; border:1.5px dashed #a9cdc5; border-radius:11px; cursor:pointer; }.question-image-drop:hover { border-color:#58ae9b; background:#f7fdfb; }.question-image-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.question-image-drop-icon { display:grid; flex:0 0 auto; place-items:center; width:33px; height:33px; color:#267f6b; background:#def3ec; border-radius:9px; font-size:18px; }.question-image-drop strong,.question-image-drop small { display:block; }.question-image-drop strong { color:#39586b; font-size:12px; }.question-image-drop small { margin-top:2px; color:#82929c; font-size:10px; }.existing-question-images,.new-question-image-preview { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }.existing-question-image,.new-question-image-preview figure { position:relative; display:grid; gap:7px; margin:0; padding:7px; background:#fff; border:1px solid #dfe9e7; border-radius:10px; }.existing-question-image img,.new-question-image-preview img { display:block; width:100%; height:94px; object-fit:cover; border-radius:7px; background:#edf4f2; }.existing-question-image label { display:flex; align-items:flex-start; gap:5px; color:#8a5149; font-size:10px; font-weight:750; line-height:1.35; cursor:pointer; }.existing-question-image input { accent-color:var(--coral); margin:1px 0 0; }.new-question-image-preview figcaption { overflow:hidden; color:#738794; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }

/* Penyempurnaan halaman edit dan mode preview ujian */
.question-edit-form { max-width:900px; }.question-edit-form textarea[name="body"] { min-height:112px; }.question-edit-form .math-editor-tools { grid-template-columns:1fr; gap:9px; }.question-edit-form .math-editor-actions { justify-content:flex-start; }.math-editor-preview[hidden],.new-question-image-preview[hidden] { display:none!important; }.existing-question-images,.new-question-image-preview { grid-template-columns:repeat(auto-fill,minmax(118px,160px)); }.preview-exam-page .page-wrap { width:100%; max-width:none; padding:0; }.preview-exam-page .exam-sidebar { top:96px; }.preview-exam-shell { width:min(1480px,calc(100% - 48px)); }.preview-exam-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:24px; }.preview-exam-topline>span { color:#8392a4; font-size:10px; font-weight:850; letter-spacing:1px; }.preview-exam-question[hidden] { display:none!important; }.preview-exam-question .answer-choice { cursor:default; }.preview-exam-question .answer-choice:hover { border-color:#e5eaf1; background:transparent; }.preview-exam-question .answer-choice.preview-correct:hover { border-color:#9bd8c8; background:#effbf6; }.preview-key-label { margin-left:auto; color:#267967; font-size:11px; font-weight:850; white-space:nowrap; }.preview-true-false-statement { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:13px; }.preview-true-false-statement>p { margin:0; }.preview-statement-key { align-self:center; padding:7px 9px; color:#9a651b; background:#fff2d8; border-radius:8px; font-size:11px; font-weight:850; white-space:nowrap; }.preview-statement-key.is-complete { color:#267967; background:#e2f6ed; }.preview-nav-button { padding:0; font:inherit; cursor:pointer; }.preview-nav-button:focus-visible { outline:3px solid rgba(71,117,215,.22); outline-offset:2px; }.ai-preview-badge { color:#93641f!important; background:#fff1d7!important; }
@media (max-width: 640px) { .preview-exam-shell { width:min(100% - 24px,680px); }.preview-exam-topline { align-items:flex-start; flex-direction:column; margin-bottom:18px; }.preview-true-false-statement { grid-template-columns:1fr; }.preview-statement-key { justify-self:start; }.preview-key-label { font-size:10px; } }

/* Pilihan ganda kompleks */
.complex-choice-key { min-width:255px; margin:0; padding:12px 14px; color:#486476; background:#f5f9ff; border:1px solid #d5e3f7; border-radius:12px; }.complex-choice-key legend { padding:0 3px; color:#345d98; font-size:12px; font-weight:850; }.complex-choice-key legend small { color:#7d94a7; font-weight:650; }.complex-choice-key p { margin:0 0 9px; color:#738899; font-size:10px; }.complex-choice-key>div { display:flex; flex-wrap:wrap; gap:7px; }.complex-choice-key label { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; color:#355f98; background:#fff; border:1px solid #d1e0f5; border-radius:8px; font-size:11px; font-weight:850; cursor:pointer; }.complex-choice-key input { accent-color:#4775d7; }.complex-choice-note { margin:0 0 12px; color:#4b73b4; font-size:12px; font-weight:750; }.complex-choice-note::before { content:'✓'; display:inline-grid; width:18px; height:18px; margin-right:7px; place-items:center; color:#fff; background:#608bdd; border-radius:6px; font-size:11px; }
.complex-answer-choice { gap:14px!important; }.complex-choice-check { display:grid; flex:0 0 auto; place-items:center; width:22px; height:22px; color:transparent; background:#fff; border:2px solid #9aabba; border-radius:3px; font-size:14px; font-weight:900; line-height:1; transition:.16s ease; }.complex-answer-choice:has(input:checked) .complex-choice-check { color:#fff; background:#4775d7; border-color:#4775d7; }.complex-answer-choice:has(input:checked) .choice-letter { color:#4775d7!important; background:#eff4ff!important; }
@media (max-width: 560px) { .complex-choice-key { width:100%; min-width:0; } }