/* CPNS peserta — calm, high-contrast, focus-first UI. Plain CSS (works alongside Tailwind CDN). */
:root{
  --c-ink:#0f172a; --c-ink-2:#334155; --c-muted:#64748b; --c-line:#e2e8f0; --c-bg:#f6f7fb;
  --c-brand:#3730a3; --c-brand-600:#4338ca; --c-brand-50:#eef2ff; --c-ok:#047857; --c-warn:#b45309; --c-bad:#b91c1c;
  --radius:14px; --tap:44px;
}
html{ -webkit-text-size-adjust:100%; }
body.cpns-body-root{ font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--c-bg); color:var(--c-ink); line-height:1.6; font-size:16px; overflow-x:hidden; }
*,*::before,*::after{ box-sizing:border-box; }
img,svg,video{ max-width:100%; height:auto; }
mjx-container{ max-width:100%; overflow-x:auto; overflow-y:hidden; }

/* ---------- Building blocks ---------- */
.cpns-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.cpns-h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--c-ink); }
.cpns-h2{ font-size:1.075rem; font-weight:700; color:var(--c-ink); }
.cpns-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.cpns-muted{ color:var(--c-muted); }

.cpns-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--tap); padding:.6rem 1.15rem;
  border-radius:12px; font-weight:700; font-size:.975rem; line-height:1.2; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s, transform .05s; -webkit-tap-highlight-color:transparent; }
.cpns-btn:active{ transform:translateY(1px); }
.cpns-btn:focus-visible,.cpns-input:focus-visible,.cpns-link:focus-visible{ outline:3px solid #a5b4fc; outline-offset:2px; }
.cpns-btn-primary{ background:var(--c-brand); color:#fff; }
.cpns-btn-primary:hover{ background:var(--c-brand-600); }
.cpns-btn-success{ background:var(--c-ok); color:#fff; }
.cpns-btn-success:hover{ background:#065f46; }
.cpns-btn-ghost{ background:#fff; color:var(--c-ink); border-color:#cbd5e1; }
.cpns-btn-ghost:hover{ background:#f8fafc; border-color:#94a3b8; }
.cpns-btn-warn{ background:#b45309; color:#fff; }
.cpns-btn[disabled],.cpns-btn.is-disabled{ opacity:.45; pointer-events:none; }
.cpns-btn-block{ width:100%; }

.cpns-link{ color:var(--c-brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.cpns-label{ display:block; font-size:.9rem; font-weight:600; color:var(--c-ink-2); margin-bottom:.35rem; }
.cpns-input{ width:100%; min-height:var(--tap); padding:.6rem .85rem; font-size:16px; /* 16px = no iOS zoom */
  border:1px solid #cbd5e1; border-radius:12px; background:#fff; color:var(--c-ink); }
.cpns-input:focus{ border-color:var(--c-brand-600); box-shadow:0 0 0 3px rgba(67,56,202,.15); outline:none; }
.cpns-error{ color:var(--c-bad); font-size:.85rem; font-weight:600; margin-top:.3rem; }
.cpns-check{ width:1.25rem; height:1.25rem; accent-color:var(--c-brand); flex:none; margin-top:.15rem; }

.cpns-alert{ border-radius:12px; padding:.8rem 1rem; font-size:.925rem; font-weight:500; border:1px solid; }
.cpns-alert-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.cpns-alert-bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.cpns-alert-info{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.cpns-alert-warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; }

.cpns-badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; }
.cpns-badge-ok{ background:#d1fae5; color:#065f46; } .cpns-badge-bad{ background:#fee2e2; color:#991b1b; }
.cpns-badge-info{ background:#dbeafe; color:#1e3a8a; } .cpns-badge-warn{ background:#fef3c7; color:#92400e; }

.cpns-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cpns-table{ width:100%; border-collapse:collapse; font-size:.925rem; }
.cpns-table th{ text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted); font-weight:700; padding:.5rem .6rem; white-space:nowrap; }
.cpns-table td{ padding:.65rem .6rem; border-top:1px solid var(--c-line); vertical-align:top; }

/* ---------- Exam: focus mode ---------- */
.cpns-no-select,.cpns-no-select *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.cpns-no-select input,.cpns-no-select textarea{ -webkit-user-select:auto; user-select:auto; }
body.cpns-exam-mode{ background:#f1f5f9; }

.cpns-exambar{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--c-line); }
.cpns-exambar-inner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 1rem; max-width:72rem; margin:0 auto; }
.cpns-progress{ height:4px; background:#e2e8f0; }
.cpns-progress > span{ display:block; height:100%; background:var(--c-brand); transition:width .3s ease; }

#timer{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:800;
  font-size:1.35rem; letter-spacing:.02em; color:var(--c-ink); padding:.25rem .65rem; border-radius:.6rem; border:2px solid transparent; background:#f1f5f9; white-space:nowrap; }

.cpns-q-meta{ font-size:.8rem; font-weight:600; color:var(--c-muted); display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; }
.cpns-q-no{ display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 .5rem; border-radius:10px;
  background:var(--c-ink); color:#fff; font-weight:800; font-size:.95rem; }
.cpns-q-body{ font-size:1.2rem; line-height:1.65; font-weight:600; color:var(--c-ink); overflow-wrap:anywhere; }
@media (min-width:768px){ .cpns-q-body{ font-size:1.3rem; } }
.cpns-qimg{ max-width:100%; height:auto; cursor:zoom-in; border-radius:.75rem; border:1px solid var(--c-line); }

.cpns-opt{ position:relative; display:flex; gap:.85rem; align-items:flex-start; min-height:56px; padding:.85rem 1rem; border-radius:14px;
  border:2px solid var(--c-line); background:#fff; cursor:pointer; transition:border-color .12s, background-color .12s; -webkit-tap-highlight-color:transparent; }
.cpns-opt:hover{ border-color:#a5b4fc; background:#fafaff; }
.cpns-opt input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.cpns-opt-letter{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:999px;
  border:2px solid #94a3b8; font-weight:800; color:var(--c-ink-2); font-size:.95rem; background:#fff; }
.cpns-opt-text{ font-size:1.075rem; font-weight:600; line-height:1.55; color:var(--c-ink); padding-top:.2rem; overflow-wrap:anywhere; min-width:0; }
.cpns-opt:has(input:checked){ border-color:var(--c-brand); background:var(--c-brand-50); }
.cpns-opt:has(input:checked) .cpns-opt-letter{ background:var(--c-brand); border-color:var(--c-brand); color:#fff; }
.cpns-opt:has(input:focus-visible){ outline:3px solid #a5b4fc; outline-offset:2px; }

/* Navigator */
#navigator{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:.4rem; }
.nav-dot{ min-width:44px; height:44px; border-radius:10px; font-size:.9rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nav-dot.empty{ background:#f1f5f9; color:var(--c-ink-2); border-color:#e2e8f0; }
.nav-dot.answered{ background:var(--c-brand); color:#fff; }
.nav-dot.current{ outline:3px solid var(--c-ink); outline-offset:2px; }
.nav-legend{ display:inline-block; width:.85rem; height:.85rem; border-radius:4px; vertical-align:-2px; }

/* Lightbox */
.cpns-lightbox{ position:fixed; inset:0; background:rgba(2,6,23,.88); display:flex; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.cpns-lightbox img{ max-width:95vw; max-height:92vh; border-radius:.5rem; background:#fff; }

/* ---------- Timer warning <= 5 menit (preserved) ---------- */
@keyframes cpns-pulse-urgent{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(220,38,38,.45);} 50%{ transform:scale(1.04); box-shadow:0 0 0 10px rgba(220,38,38,0);} }
@keyframes cpns-banner-in{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
@keyframes cpns-border-flash{ 0%,100%{ border-color:#fca5a5;} 50%{ border-color:#dc2626;} }
#timer.cpns-timer-warn{ color:#b91c1c; background:#fef2f2; border:2px solid #fca5a5;
  animation:cpns-pulse-urgent 1.2s ease-in-out infinite, cpns-border-flash 1.2s ease-in-out infinite; font-weight:800; }
#timer.cpns-timer-critical{ color:#fff; background:#dc2626; border-color:#991b1b; animation:cpns-pulse-urgent .7s ease-in-out infinite; }
#cpns-time-banner{ display:none; animation:cpns-banner-in .35s ease-out; background:linear-gradient(90deg,#fef2f2,#fff7ed);
  border:1px solid #fecaca; color:#991b1b; border-radius:.75rem; padding:.75rem 1rem; margin-bottom:1rem; font-weight:700; }
#cpns-time-banner.show{ display:flex; align-items:center; gap:.75rem; }
#exam-root.cpns-exam-urgent .cpns-exam-main{ outline:3px solid rgba(220,38,38,.35); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  #timer.cpns-timer-warn,#timer.cpns-timer-critical{ animation:none; }
  #cpns-time-banner{ animation:none; }
}

/* Mobile bottom action bar during exam */
.cpns-actionbar{ position:sticky; bottom:0; z-index:25; background:rgba(255,255,255,.97); border-top:1px solid var(--c-line);
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); margin:1.25rem -1.25rem -1.25rem; border-radius:0 0 var(--radius) var(--radius); }
@media (min-width:1024px){ .cpns-actionbar{ position:static; background:transparent; border-top:1px solid var(--c-line); margin:1.5rem 0 0; padding:1rem 0 0; } }