/* ==========================================================================
   JuaraPKSK — Dewan Peperiksaan Maya (web demo, fullscreen)
   A faithful port of the real app's exam + results screens (renderer/styles.css)
   so the browser demo feels identical to the downloadable app.
   ========================================================================== */

:root {
  --navy-900:#0a2439; --navy-800:#0F2A4A; --navy-700:#16506f; --navy-600:#1d6488;
  --navy-100:#e3edf4; --navy-50:#f0f6fa;
  --gold-600:#c48d1c; --gold-500:#e0a82e; --gold-400:#f0c14b; --gold-50:#fdf6e4;
  --teal-500:#147D7A; --teal-lt:#8FD3CE;
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1;
  --line:#e2e8f0; --line-soft:#eef2f6; --surface:#fff; --surface-2:#f8fafc; --bg:#f1f5f9;
  --green-700:#15803d; --green-600:#16a34a; --green-100:#dcfce7; --green-50:#f0fdf4;
  --red-700:#b91c1c; --red-600:#dc2626; --red-100:#fee2e2; --red-50:#fef2f2;
  --amber-700:#b45309; --amber-600:#d97706; --amber-100:#fef3c7;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;--s10:40px;--s12:48px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-pill:999px;
  --sh-1:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --sh-2:0 2px 4px rgba(15,23,42,.05),0 6px 16px rgba(15,23,42,.07);
  --sh-3:0 8px 24px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.06);
  --sh-4:0 24px 60px rgba(10,36,57,.28);
  --ring:0 0 0 3px rgba(29,100,136,.28);
  --font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,Arial,sans-serif;
  --font-mono:"Cascadia Mono",Consolas,"SF Mono","Roboto Mono","Courier New",monospace;
  --t-xs:.6875rem;--t-sm:.78125rem;--t-base:.875rem;--t-md:.9375rem;--t-lg:1.0625rem;
  --t-xl:1.25rem;--t-2xl:1.625rem;--t-3xl:2.125rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); font-size: 16px; background: var(--bg); color: var(--ink-800); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.2; }
:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- buttons ---------- */
.btn { font: inherit; font-size: var(--t-base); font-weight: 650; cursor: pointer; border: 1.5px solid transparent; border-radius: var(--r-md); padding: 10px 18px; transition: background-color .14s, border-color .14s, box-shadow .14s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 14px 26px; font-size: var(--t-md); }
.btn-block { width: 100%; }
.btn-primary { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn-primary:hover { background: var(--navy-700); }
.btn-secondary { background: var(--surface); color: var(--ink-700); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--navy-600); color: var(--navy-800); }
.btn-secondary:disabled { opacity: .5; cursor: default; }
.btn-success { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.btn-success:hover { background: var(--green-700); }
.btn-gold { background: var(--gold-400); color: #3a2e05; border-color: var(--gold-400); }
.btn-gold:hover { background: var(--gold-500); }
.btn-on-navy { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-on-navy:hover { background: rgba(255,255,255,.2); }
.btn-danger { background: rgba(220,38,38,.18); color: #fff; border-color: #f87171; }
.btn-danger:hover { background: rgba(220,38,38,.3); }

.progress-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; background: var(--navy-600); border-radius: 999px; transition: width .3s ease; }
.progress-fill.green { background: var(--green-500,#22c55e); }
.progress-fill.red { background: var(--red-600); }
.progress-fill.amber { background: var(--amber-600); }
.badge { display: inline-block; font-size: var(--t-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.badge-gold { background: var(--gold-50); color: var(--gold-600); }
.badge-info { background: var(--navy-50); color: var(--navy-700); }
.badge-warn { background: var(--amber-100); color: var(--amber-700); }
.badge-danger { background: var(--red-100); color: var(--red-700); }

/* ==========================================================================
   Start screen
   ========================================================================== */
.start-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: radial-gradient(1200px 600px at 50% -10%, #14345c 0%, var(--navy-900) 55%); }
.start-card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-4); max-width: 560px; width: 100%; padding: var(--s10) var(--s8); text-align: center; }
.start-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--s6); }
.start-brand img { width: 46px; height: 46px; }
.start-brand b { font-size: 1.15rem; color: var(--navy-800); }
.start-brand span { display: block; font-size: .7rem; color: var(--teal-500); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.start-card h1 { font-size: var(--t-2xl); color: var(--navy-800); }
.start-card .sub { color: var(--ink-500); font-size: var(--t-md); line-height: 1.6; margin: 0 auto var(--s6); max-width: 440px; }
.start-facts { display: flex; gap: var(--s3); justify-content: center; margin-bottom: var(--s7); flex-wrap: wrap; }
.start-facts .f { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 18px; min-width: 92px; }
.start-facts .f b { display: block; font-size: var(--t-xl); color: var(--navy-800); font-weight: 800; }
.start-facts .f span { font-size: var(--t-xs); color: var(--ink-500); font-weight: 600; }
.fs-hint { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-400); }
.fs-hint .kbd { display: inline-block; padding: 1px 7px; border: 1px solid var(--ink-300); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font-family: var(--font-mono); font-size: var(--t-xs); }

/* ==========================================================================
   Exam
   ========================================================================== */
.exam-screen { background: var(--bg); min-height: 100vh; }
.exam-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s5); padding: var(--s3) var(--s6); background: linear-gradient(100deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700)); color: #fff; box-shadow: var(--sh-2); }
.exam-bar .spacer { flex: 1 1 auto; }
.exam-bar .ident { line-height: 1.35; min-width: 0; }
.exam-bar .ident b { display: block; font-size: var(--t-md); font-weight: 650; }
.exam-bar .ident span { display: block; font-size: var(--t-sm); color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.answered-meter { min-width: 170px; }
.answered-meter .row { display: flex; justify-content: space-between; font-size: var(--t-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 5px; }
.answered-meter .row b { color: #fff; }
.answered-meter .progress-track { background: rgba(255,255,255,.18); }
.answered-meter .progress-fill { background: var(--gold-500); }
.timer-pill { display: flex; flex-direction: column; align-items: center; padding: var(--s2) var(--s6); border-radius: var(--r-lg); background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22); min-width: 176px; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.timer-pill .cap { font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.timer-pill .clock { font-family: var(--font-mono); font-size: 2.125rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.timer-pill.amber { background: rgba(245,158,11,.22); border-color: var(--gold-400); animation: pulse-amber 1s ease-in-out infinite; }
.timer-pill.amber .clock, .timer-pill.amber .cap { color: var(--gold-400); }
.timer-pill.expired { background: rgba(220,38,38,.28); border-color: #f87171; }
.timer-pill.expired .clock { color: #fecaca; font-size: 1.75rem; }
.timer-pill.expired .cap { color: #fecaca; }
@keyframes pulse-amber { 0%,100% { box-shadow: 0 0 0 0 rgba(240,193,75,.48); } 50% { box-shadow: 0 0 0 7px rgba(240,193,75,0); } }

.exam-body { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: var(--s6); width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--s6); align-items: start; }
.palette-panel { position: sticky; top: 108px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s5); max-height: calc(100vh - 130px); overflow-y: auto; }
.palette-panel h4 { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--s3); }
.palette-panel h4:not(:first-child) { margin-top: var(--s5); }
.palette-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 5px; }
.pnum { aspect-ratio: 1/1; min-height: 32px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-500); font-size: var(--t-sm); font-weight: 650; cursor: pointer; padding: 0; transition: background-color .12s, border-color .12s, color .12s, transform .08s; }
.pnum:hover { border-color: var(--navy-600); color: var(--navy-800); }
.pnum.answered { background: var(--navy-100); border-color: #b8d2e2; color: var(--navy-800); }
.pnum.current { background: var(--navy-800); border-color: var(--navy-900); color: #fff; transform: scale(1.06); box-shadow: var(--sh-2); }
.palette-legend { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s2); }
.palette-legend div { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-500); }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--line); flex: none; }
.swatch.answered { background: var(--navy-100); border-color: #b8d2e2; }
.swatch.current { background: var(--navy-800); border-color: var(--navy-900); }

.question-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s8); min-height: 60vh; display: flex; flex-direction: column; }
.q-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.q-number { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--r-md); background: var(--navy-800); color: #fff; font-size: var(--t-lg); font-weight: 700; }
.q-head .meta b { display: block; font-size: var(--t-base); font-weight: 650; color: var(--ink-900); }
.q-head .meta span { display: block; font-size: var(--t-sm); color: var(--ink-500); }
.q-stem { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-900); margin-bottom: var(--s6); }
.options-list { display: flex; flex-direction: column; gap: var(--s3); }
.option-row { display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s5); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color .14s, background-color .14s, box-shadow .14s; }
.option-row:hover { border-color: var(--navy-600); background: var(--navy-50); }
.option-row.selected { border-color: var(--navy-800); background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--navy-800); }
.opt-letter { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink-300); background: var(--surface); font-size: var(--t-base); font-weight: 700; color: var(--ink-600); transition: background-color .14s, border-color .14s, color .14s; }
.option-row.selected .opt-letter { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.opt-text { font-size: var(--t-md); line-height: 1.62; color: var(--ink-800); padding-top: 3px; }
.exam-foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line-soft); }
.exam-foot .spacer { flex: 1 1 auto; }
.kbd-hint { font-size: var(--t-sm); color: var(--ink-400); }
.kbd { display: inline-block; padding: 1px 6px; margin: 0 1px; border: 1px solid var(--ink-300); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-600); }

/* ==========================================================================
   Modal (submit / cancel confirm)
   ========================================================================== */
.modal-mask { position: fixed; inset: 0; background: rgba(10,36,57,.55); display: grid; place-items: center; z-index: 100; padding: var(--s5); }
.modal { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-4); max-width: 440px; width: 100%; padding: var(--s8); text-align: center; }
.modal .ic { font-size: 2rem; margin-bottom: var(--s3); }
.modal h3 { color: var(--navy-800); font-size: var(--t-xl); }
.modal p { color: var(--ink-500); font-size: var(--t-md); line-height: 1.6; margin: 0 0 var(--s6); }
.modal .acts { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Results
   ========================================================================== */
.res-wrap { max-width: 960px; margin: 0 auto; padding: var(--s6); }
.res-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); background: var(--navy-800); color: #fff; }
.res-bar b { font-size: var(--t-md); }
.res-bar .spacer { flex: 1; }
.result-hero { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s5); margin-bottom: var(--s6); }
.hero-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s6); }
.hero-card .eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.hero-card .big { font-size: var(--t-3xl); font-weight: 800; color: var(--navy-800); line-height: 1; margin: var(--s2) 0; }
.hero-card .big small { font-size: var(--t-xl); color: var(--ink-400); }
.splits { display: flex; gap: var(--s5); margin-top: var(--s3); }
.splits .k { font-size: var(--t-xs); color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.splits .v { font-size: var(--t-lg); font-weight: 800; color: var(--ink-900); }
.tally-card .n { font-size: var(--t-3xl); font-weight: 800; line-height: 1; margin: var(--s2) 0; }
.tally-card .n small { font-size: var(--t-xl); color: var(--ink-400); font-weight: 600; }
.tally-correct .n { color: var(--green-600); }
.tally-wrong .n { color: var(--red-600); }

.skills { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s6); margin-bottom: var(--s6); }
.skills h4 { color: var(--navy-800); margin-bottom: var(--s4); }
.skillrow { display: grid; grid-template-columns: 130px 1fr 46px; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.skillrow .nm { font-size: var(--t-sm); font-weight: 650; color: var(--ink-700); }
.skillrow .bar { height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.skillrow .bar i { display: block; height: 100%; border-radius: 999px; }
.skillrow .pc { font-size: var(--t-sm); font-weight: 800; text-align: right; color: var(--ink-700); }
.verdict { color: var(--ink-500); font-size: var(--t-sm); margin-top: var(--s3); }

.res-cta { background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); color: #fff; border-radius: var(--r-lg); padding: var(--s7); text-align: center; margin-bottom: var(--s6); }
.res-cta h3 { color: #fff; font-size: var(--t-xl); }
.res-cta p { color: #cfe0ee; font-size: var(--t-md); line-height: 1.6; margin: 0 auto var(--s5); max-width: 560px; }
.res-cta .acts { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

.review h4 { color: var(--navy-800); margin: var(--s6) 0 var(--s4); }
.review details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: var(--s2); overflow: hidden; }
.review summary { padding: var(--s4) var(--s5); cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-800); list-style: none; }
.review summary::-webkit-details-marker { display: none; }
.review .ans { padding: 0 var(--s5) var(--s5); font-size: var(--t-sm); line-height: 1.6; color: var(--ink-700); }
.review .ans .ok { color: var(--green-700); font-weight: 700; }
.review .ans .no { color: var(--red-700); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .exam-bar { flex-wrap: wrap; gap: var(--s3); }
  .timer-pill { min-width: 120px; padding: var(--s1) var(--s4); }
  .timer-pill .clock { font-size: 1.5rem; }
  .exam-body { grid-template-columns: 1fr; }
  .palette-panel { position: static; max-height: none; order: 2; }
  .question-panel { order: 1; }
  .result-hero { grid-template-columns: 1fr; }
  .kbd-hint { display: none; }
}