/* UI CBT: tema profesional (navy / biru / teal). Dipakai halaman siswa, admin, dan guru. */
:root{
  --navy:#0b2447;--navy2:#13335f;--brand:#1e5aa8;--brand-d:#174a8b;--teal:#0d9488;--teal-d:#0f766e;
  --ink:#1e293b;--muted:#64748b;--line:#dbe3ee;--soft:#eef4fb;--bg:#f3f6fa;
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter','Noto Sans','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans TC','Noto Sans Devanagari','Noto Sans Thai','Noto Sans Symbols 2','Segoe UI','Arial Unicode MS',system-ui,sans-serif;color:var(--ink);
  background:var(--bg);min-height:100vh;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* Kartu */
.cd{background:#fff;border:1px solid var(--line);border-radius:.85rem;box-shadow:0 1px 2px rgba(15,36,71,.05),0 6px 18px -10px rgba(15,36,71,.18);padding:1.1rem}

/* Input */
.in{border:1px solid #c5d1e0;background:#fff;border-radius:.6rem;padding:.6rem .8rem;width:100%;font-size:.95rem;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:#94a3b8}
.in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,90,168,.16)}
select.in{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center/1.2rem;padding-right:2.4rem}

/* Tombol */
.bt{background:var(--brand);color:#fff;border-radius:.6rem;padding:.6rem 1.1rem;font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  box-shadow:0 1px 2px rgba(15,36,71,.2);transition:background .15s,box-shadow .15s;cursor:pointer;border:0}
.bt:hover{background:var(--brand-d);box-shadow:0 4px 12px -4px rgba(23,74,139,.55)}.bt:active{background:var(--navy2)}.bt:disabled{opacity:.5;cursor:not-allowed}
.bt-teal{background:var(--teal)}.bt-teal:hover{background:var(--teal-d);box-shadow:0 4px 12px -4px rgba(13,148,136,.55)}
.bg{background:#fff;color:var(--brand-d);border:1px solid #c5d1e0;border-radius:.55rem;padding:.4rem .8rem;font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:.35rem;transition:.15s;cursor:pointer}
.bg:hover{background:var(--soft);border-color:#9db6d6}
.bd{background:#fff;color:#be123c;border:1px solid #fecdd3;border-radius:.55rem;padding:.4rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s}
.bd:hover{background:#fff1f2;border-color:#fda4af}

/* Label status */
.chip{display:inline-block;border-radius:.4rem;padding:.12rem .55rem;font-size:.72rem;font-weight:600;letter-spacing:.01em}
.chip-ok{background:#dcfce7;color:#166534}.chip-warn{background:#fef3c7;color:#92400e}.chip-bad{background:#ffe4e6;color:#9f1239}
.chip-info{background:#dbeafe;color:#1e3a8a}.chip-mute{background:#e2e8f0;color:#475569}

/* Tabel */
table.tbl{width:100%;font-size:.875rem;border-collapse:separate;border-spacing:0}
table.tbl th{color:#475569;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;background:#f1f5f9;padding:.6rem .7rem;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
table.tbl th:first-child{border-radius:.5rem 0 0 0}table.tbl th:last-child{border-radius:0 .5rem 0 0}
table.tbl td{padding:.6rem .7rem;border-bottom:1px solid #eaf0f7;vertical-align:middle}
table.tbl tr:hover td{background:#f8fafd}
table td,table th{text-align:left}

/* Util */
.fade-in{animation:fi .22s ease both}@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.safe-b{padding-bottom:max(.75rem,env(safe-area-inset-bottom))}
.glass{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.veil{background:rgba(11,36,71,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ico{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Header navy (ujian, beranda siswa) */
.topbar{background:linear-gradient(135deg,#1e5aa8 0%,#2f7bd0 100%);color:#fff;border-bottom:3px solid var(--teal)}
.topbar .text-blue-200,.topbar .text-blue-100{color:#e6f0fb}.topbar .text-teal-300{color:#ccfbf1}
.brandmark{background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff}

/* Panel kiri login */
.hero{background:linear-gradient(160deg,#f6f9fd 0%,#e3edf9 55%,#d9f1ee 100%);color:var(--navy)}
.hero p{color:#475569}

@media print{body{background:#fff}}

/* ===== Komponen halaman admin / guru ===== */
.ph{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.ph h1{font-size:1.3rem;font-weight:700;color:var(--navy);line-height:1.25}
.ph p{font-size:.85rem;color:var(--muted);margin-top:.15rem}
.st{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--navy);font-size:1rem}
.st .si{width:2rem;height:2rem;border-radius:.5rem;background:var(--soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.st .si.teal{background:#ccfbf1;color:var(--teal-d)}
.lbl{display:block;font-size:.78rem;font-weight:600;color:#475569;margin-bottom:.25rem}
.hint{font-size:.78rem;color:var(--muted);line-height:1.45}
.empty{text-align:center;color:var(--muted);padding:2rem 1rem;font-size:.9rem}
.sep{border-top:1px solid #eaf0f7}
.chk{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:#f8fafd;border-radius:.55rem;padding:.45rem .75rem;font-size:.85rem;cursor:pointer;transition:.12s;color:#334155}
.chk:hover{border-color:#9db6d6;background:#fff}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:1rem;height:1rem;flex:none}
input[type=file]{width:100%;font-size:.85rem;color:var(--muted);border:1px dashed #b4c3d8;border-radius:.6rem;padding:.5rem;background:#f8fafd}
input[type=file]::file-selector-button{margin-right:.75rem;border:0;border-radius:.45rem;background:var(--brand);color:#fff;font-weight:600;padding:.42rem .8rem;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--brand-d)}
textarea.in{resize:vertical}
code{background:#eef4fb;color:var(--navy2);padding:.08rem .4rem;border-radius:.3rem;font-size:.85em}
.lnk{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}.lnk:hover{color:var(--brand-d)}
.stat{border-left:4px solid var(--brand)}
.tk{font-variant-numeric:tabular-nums;letter-spacing:.25em;font-weight:700}

/* ===== Tema terang: login admin/guru ===== */
.auth-bg{background:radial-gradient(1100px 520px at 12% -10%,#dbeafe 0%,transparent 60%),radial-gradient(900px 480px at 100% 110%,#ccfbf1 0%,transparent 55%),#f4f8fc}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:1.1rem;box-shadow:0 18px 50px -24px rgba(19,51,95,.35),0 2px 6px rgba(15,36,71,.05)}
.fld{position:relative}
.fld>.ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#94a3b8;width:1.1rem;height:1.1rem;pointer-events:none}
.fld>.in{padding-left:2.7rem;padding-top:.75rem;padding-bottom:.75rem}
.fld>.eye{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:2.2rem;height:2.2rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#64748b;background:transparent;border:0;cursor:pointer}
.fld>.eye:hover{background:var(--soft);color:var(--brand-d)}
.fld>.in.pr{padding-right:2.9rem}
.feat{display:flex;gap:.85rem;align-items:flex-start}
.feat .fi{width:2.4rem;height:2.4rem;border-radius:.65rem;background:#fff;border:1px solid var(--line);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 2px rgba(15,36,71,.06)}
.feat b{display:block;font-size:.92rem;color:var(--navy)}.feat span{font-size:.82rem;color:#64748b;line-height:1.45}

/* ===== Akordion (dasbor guru) ===== */
details.acc>summary{list-style:none;cursor:pointer}
details.acc>summary::-webkit-details-marker{display:none}
details.acc .chev{transition:transform .18s}
details.acc[open] .chev{transform:rotate(180deg)}
details.acc[open]>summary{border-bottom:1px solid #eaf0f7;padding-bottom:.85rem;margin-bottom:.35rem}

/* ===== Tampilan soal (siswa & pratinjau admin): apa yang diketik, itu yang tampil ===== */
.soal-teks{overflow-wrap:anywhere;line-height:1.7}
.soal-teks img{max-width:100%;height:auto}
.soal-teks .katex-display{margin:.5em 0;overflow-x:auto;overflow-y:hidden}
.soal-teks sup,.soal-teks sub{font-size:.75em;line-height:0}

/* ===== Halaman hasil: kolom soal membagi lebar layar, tanpa gulir ke samping ===== */
table.hasil{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.82rem}
table.hasil th,table.hasil td{padding:.4rem .45rem;border-bottom:1px solid #eaf0f7}
table.hasil th{background:#f1f5f9;color:#475569;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;text-align:left}
table.hasil td.nm{overflow-wrap:anywhere;font-weight:600;color:#0f172a}
table.hasil td.sl,table.hasil th.sl{padding:0;text-align:center}
table.hasil td.sl{border:1px solid #fff;height:1.65rem}
table.hasil th.sl.tight{writing-mode:vertical-rl;transform:rotate(180deg);height:2.6rem;font-size:.62rem;letter-spacing:0}
table.hasil th.sl.mini{font-size:.55rem;letter-spacing:0}
@media (max-width:1023px){.hasil-wrap{overflow-x:auto}table.hasil{min-width:var(--min,900px)}}