/* Ujian Diagnostik dan Kertas Penuh (m-diag.js, m-mock.js). Dibina daripada token app.css. */

/* ---------- Kecil dan bersama ---------- */
i.ev{font-style:italic}
.mock-clock[hidden],.confirm[hidden]{display:none}
.bookref{display:flex;align-items:flex-start;gap:9px;margin:26px 0 0;padding-top:13px;border-top:1px solid var(--line2);color:var(--soft);font-size:.93rem;line-height:1.45}
.bookref .ic{color:var(--mod);margin-top:.12em}
.confirm{margin:12px 0;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:var(--r-s)}
.confirm p{margin:0}
.confirm .row{margin:10px 0 0}
.d-bar{margin:4px 0 14px}
.d-sec{display:flex;align-items:center;gap:12px;padding:13px 16px}
.d-sec[data-c] .k{color:var(--s)}
.d-meta{flex:none;text-align:right;font:600 .84rem/1.25 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.d-meta b{display:block;color:var(--ink);font-size:.98rem;letter-spacing:.03em}
.d-meta span{display:block}
.d-meta .t-bad{color:var(--bad)}
.d-nl{margin:18px 0 6px;color:var(--soft)}

/* ---------- Bar masa melekat ---------- */
.t-bar{position:sticky;top:0;z-index:5;margin:0 -16px 16px;padding:9px 16px 10px;background:var(--paper);border-bottom:1px solid var(--line2)}
.t-main{display:flex;align-items:center;gap:14px}
.t-clock{font:700 2.5rem/1 var(--ui);letter-spacing:.01em;font-variant-numeric:tabular-nums;min-width:2.9em}
.t-clock.low,.t-bar.rec .t-clock{color:var(--bad)}
.t-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.t-info .cap{color:var(--soft)}
.t-sub{font-size:.9rem;line-height:1.25;color:var(--ink)}
.t-bar .barprog{margin:8px 0 0}
.t-bar.rec .barprog i{background:var(--bad)}
.strip75{position:relative;display:flex;gap:2px;height:8px;margin:11px 0 3px}
.strip75 i{display:block;height:100%;background:var(--s);opacity:.3}
.strip75[data-cur="1"] i[data-c="1"],.strip75[data-cur="2"] i[data-c="2"],.strip75[data-cur="3"] i[data-c="3"],.strip75[data-cur="4"] i[data-c="4"],.strip75[data-cur="5"] i[data-c="5"],.strip75[data-cur="0"] i[data-c="0"]{opacity:1}
.strip75 b{position:absolute;top:-4px;left:0;width:2px;height:16px;margin-left:-1px;background:var(--ink)}

/* ---------- Kertas jawapan (OMR) ---------- */
.omr{margin:16px 0;background:var(--sheet);border:1px solid var(--line2);border-radius:3px;box-shadow:0 1px 0 #fff inset,0 10px 24px -20px rgba(23,26,38,.6);overflow:hidden}
.omr-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:11px 14px 9px 32px;border-bottom:2px solid var(--ink);font:600 .8rem/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.omr-s{color:var(--soft)}
.omr-part{break-inside:avoid}
.omr-ph{display:flex;align-items:baseline;gap:10px;padding:7px 14px 6px 32px;background:var(--s);color:#fff;font:600 .8rem/1.2 var(--ui);letter-spacing:.09em;text-transform:uppercase}
.omr-ph b{font-size:.96rem;letter-spacing:.07em}
.omr-ph span{opacity:.88}
.omr-pn{margin-left:auto}
.omr-row{position:relative;display:flex;align-items:center;min-height:46px;padding:0 8px 0 32px;border-bottom:1px solid var(--line)}
.omr-part:last-child .omr-row:last-child{border-bottom:0}
.omr-row::before{content:"";position:absolute;left:9px;top:50%;width:13px;height:5px;margin-top:-2.5px;background:var(--ink)}
.omr-n{flex:none;width:2.1em;font:700 1.08rem/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--s)}
.omr-bs{display:flex;flex:1;min-width:0}
.bub{flex:1 1 0;min-width:0;max-width:58px;height:46px;margin:0;padding:0;border:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bub i{display:flex;align-items:center;justify-content:center;width:calc(100% - 6px);max-width:40px;height:28px;border:1.5px solid color-mix(in srgb,var(--s) 50%,#fff);border-radius:50%;background:#fff;font:600 .9rem/1 var(--ui);font-style:normal;color:var(--s);transition:background .08s}
button.bub:hover i{border-color:var(--s)}
button.bub:focus-visible{outline:none}
button.bub:focus-visible i{outline:2px solid var(--s);outline-offset:2px}
.bub.fill i{background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.82)}
.omr.locked .bub{cursor:default}
.omr.locked .bub:not(.fill) i{opacity:.55}
.omr-m{flex:none;width:2em;display:flex;justify-content:center;color:var(--ok);font:700 1.05rem/1 var(--ui)}
.omr-m .ic{width:18px;height:18px}
.omr.review .bub{cursor:default}
.omr.review .bub.key i{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok)}
.omr.review .bub:not(.fill):not(.key) i{opacity:.45}
.omr.review .omr-row.no{background:#FDF2F1}
.omr.review .omr-row.no::before{background:var(--bad)}
@media(min-width:700px){
  .omr-parts{columns:2;column-gap:0;column-rule:1px solid var(--line2)}
  .omr-part:last-child .omr-row:last-child{border-bottom:1px solid var(--line)}
}
.submit-box{margin-top:18px}
.submit-box .left{margin:0;font-size:.93rem;color:var(--soft)}
.submit-box .row{margin-top:12px}

/* ---------- Senarai semak kendiri ---------- */
.chk{list-style:none;margin:10px 0 14px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s)}
.chk li+li{border-top:1px solid var(--line)}
.chk label{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:46px;padding:11px 14px;cursor:pointer}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk-box{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:.14em;border:1.5px solid var(--line2);border-radius:4px;background:#fff;color:transparent}
.chk-box .ic{width:15px;height:15px;stroke-width:2.6}
.chk input:checked+.chk-box{background:var(--mod);border-color:var(--mod);color:#fff}
.chk input:focus-visible+.chk-box{outline:2px solid var(--mod);outline-offset:2px}
.chk label:has(input:checked){background:var(--mod-tint)}
.chk-h{margin:20px 0 6px;font:600 .86rem/1.2 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}

/* ---------- Diagnostik ---------- */
a.result-band{text-decoration:none;color:var(--ink)}
.d-more{display:flex;margin-top:6px}
.d-by{color:var(--soft)}
textarea.d-notes{min-height:0;height:4.6rem}
.d-shown{margin:0;padding:8px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-s)}
.transcript.hand{font:1.2rem/1.5 Tulis,"Comic Sans MS",cursive;color:#1E3A6E}
.d-text{margin:12px 0}
.d-text summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--mod);font:600 .86rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.cn{display:inline-flex;align-items:center;justify-content:center;width:1.45em;height:1.45em;margin-left:4px;border-radius:50%;background:var(--mod);color:#fff;font:700 .72rem/1 var(--ui);vertical-align:.25em}
.cn-notes{font-size:.96rem}
.lv{margin:14px 0 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lv-row{display:grid;grid-template-columns:1.9em 1fr auto;align-items:center;gap:8px 10px;padding:12px 14px;border-left:4px solid var(--s)}
.lv-row+.lv-row{border-top:1px solid var(--line)}
.lv-k{font:700 1.1rem/1 var(--ui);color:var(--s)}
.lv-s{font-weight:600}
.lv-n{font:500 1rem/1 var(--ui);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-n b{font-size:1.5rem;font-weight:700;color:var(--ink)}
.lv-scale{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.lv-scale i{padding:6px 4px 5px;background:#EEEBE3;color:var(--faint);font:600 .8rem/1.15 var(--ui);font-style:normal;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.lv-scale small{display:block;margin-top:2px;font-weight:500;font-size:.74rem;letter-spacing:.03em;text-transform:none}
.lv-scale i.on{color:#fff}
.lv-scale i.l0{background:var(--bad)}.lv-scale i.l1{background:var(--warn)}.lv-scale i.l2{background:var(--ok)}
.lv-total{border-left-color:var(--ink);background:var(--sheet)}
.lv-note{grid-column:1/-1;font-size:.92rem;color:var(--soft)}
@media(min-width:640px){
  .lv-row{grid-template-columns:1.9em 7.5em 5em 1fr;gap:14px}
  .lv-scale,.lv-note{grid-column:auto}
}
.seg{margin:14px 0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.seg legend{padding:0;margin-bottom:7px;color:var(--soft)}
.seg label{position:relative;display:block;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:6px 8px;border:1px solid var(--line2);margin-left:-1px;background:var(--card);font:600 .92rem/1.15 var(--ui);letter-spacing:.04em;text-align:center}
.seg label:first-of-type span{margin-left:0;border-radius:var(--r-s) 0 0 var(--r-s)}
.seg label:last-of-type span{border-radius:0 var(--r-s) var(--r-s) 0}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--mod);outline-offset:2px}
.rule-rows{list-style:none;margin:12px 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rule-rows li{display:grid;grid-template-columns:1.6em 1fr auto;align-items:center;gap:10px;padding:11px 14px;color:var(--soft)}
.rule-rows li+li{border-top:1px solid var(--line)}
.rr-n{font:700 1rem/1 var(--ui)}
.rr-l{font:600 .86rem/1.15 var(--ui);letter-spacing:.07em;text-transform:uppercase;text-align:right}
.rule-rows li.hit{background:var(--mod);color:#fff}

/* ---------- Kertas Penuh: jam pada kepala laman ---------- */
.mock-clock{display:inline-flex;align-items:baseline;gap:7px;padding:6px 10px 5px;border:1px solid rgba(255,255,255,.36);border-radius:4px;color:#fff;text-decoration:none;font:600 .8rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.mock-clock b{font-size:1.02rem;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.mock-clock:hover{border-color:#fff}

/* ---------- Kertas Penuh: skrin masuk ---------- */
.set{margin:22px 0}
.set-head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 20px;padding:15px 18px 14px;background:var(--mod);color:#fff;border-radius:var(--r) var(--r) 0 0}
.set-head .cap{color:#fff;opacity:.82}
.set-name{margin:4px 0 0;padding:0;border:0;font-size:1.75rem;line-height:1.1}
.set-aim{margin:0;max-width:17em;font-size:.93rem;line-height:1.4;text-align:right;opacity:.94}
.set-list{margin:0;border-top:0;border-radius:0 0 var(--r) var(--r)}
.set-st{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;font:600 .84rem/1.2 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.set-st b{font-size:1.5rem;line-height:1;font-weight:700;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.set-st small{font-size:.74rem;font-weight:500}
.set-raw{color:var(--ok)}
.set-st.run{color:var(--warn);max-width:9em}
.set-sum>a{background:var(--mod-tint)}
.set-sum .k .ic{color:var(--mod);width:22px;height:22px}
@media(max-width:520px){.set-head{flex-direction:column;align-items:flex-start}.set-aim{text-align:left}}

/* ---------- Jadual bahagian, pelan masa ---------- */
.pt,.plan-t,.sum{margin:14px 0 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pt-row{display:grid;grid-template-columns:minmax(0,1fr) 3.9em 3.4em auto;align-items:center;gap:8px;padding:10px 14px;border-left:4px solid var(--s)}
.pt.three .pt-row{grid-template-columns:minmax(0,1fr) 4.2em 4.6em}
.pt-row+.pt-row{border-top:1px solid var(--line)}
.pt-head{border-left-color:transparent;padding-top:8px;padding-bottom:7px;background:var(--sheet);font:600 .78rem/1.2 var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.pt-k b{display:block;font:700 1rem/1.2 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--s)}
.pt-k small{display:block;font-size:.86rem;line-height:1.3;color:var(--soft)}
.pt-n{font:500 1rem/1 var(--ui);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-n b{font-size:1.4rem;font-weight:700;color:var(--ink)}
.pt-t{display:inline-flex;align-items:center;gap:4px;font:600 .95rem/1 var(--ui);letter-spacing:.03em;color:var(--soft);white-space:nowrap}
.pt-t .ic{width:15px;height:15px;color:var(--ok)}
.pt-t.under{color:var(--bad)}
.pt-row .linkbtn{justify-self:end;min-height:44px;font:600 .86rem/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.conv{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;margin:0 0 4px;font:500 .95rem/1 var(--ui);letter-spacing:.04em;color:var(--soft)}
.conv b{font-size:2rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.conv span::after{content:" =";}
.sum-band .conv span::after{content:""}
.plan-r{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:10px 14px;border-left:4px solid var(--s)}
.plan-r+.plan-r{border-top:1px solid var(--line)}
.plan-k b,.plan-m b{display:block;font:700 1rem/1.25 var(--ui);letter-spacing:.04em}
.plan-k b{text-transform:uppercase;color:var(--s)}
.plan-k small,.plan-m small{display:block;font-size:.86rem;color:var(--soft)}
.plan-m{text-align:right}
.plan-e{grid-column:1/-1;font-size:.88rem;color:var(--soft)}
.plan-d{grid-column:1/-1;font-size:.95rem}
.plan-r.now{background:var(--s-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s) 30%,#fff)}
.plan-r.past{opacity:.5}
@media(min-width:640px){
  .plan-r{grid-template-columns:11em 8em 1fr;align-items:center}
  .plan-m{text-align:left}
  .plan-e{grid-column:auto;text-align:right}
  .plan-d{grid-column:2/-1}
}

/* ---------- Soalan yang salah ---------- */
.wrong{list-style:none;margin:12px 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wrong li{display:grid;grid-template-columns:2.2em 4.2em 1fr 1fr;align-items:center;gap:8px;padding:9px 14px;border-left:4px solid var(--s);font-size:.93rem;color:var(--soft)}
.wrong li+li{border-top:1px solid var(--line)}
.w-n{font:700 1.1rem/1 var(--ui);color:var(--s);font-variant-numeric:tabular-nums}
.w-p{font:600 .78rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase}
.w-a b{color:var(--bad);font:700 1.05rem/1 var(--ui)}
.w-k b{color:var(--ok);font:700 1.05rem/1 var(--ui)}
@media(max-width:480px){.wrong li{grid-template-columns:2.2em 1fr 1fr}.w-p{display:none}}

/* ---------- Anggaran sendiri ---------- */
.est{margin:16px 0;padding:0;border:0;min-width:0}
.est legend{padding:0;margin-bottom:8px;color:var(--soft)}
.est-row{position:relative;display:flex;align-items:flex-start;gap:14px;padding:12px 14px;margin-top:-1px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.est-row:first-of-type{border-radius:var(--r-s) var(--r-s) 0 0}
.est-row:last-of-type{border-radius:0 0 var(--r-s) var(--r-s)}
.est input{position:absolute;opacity:0;width:1px;height:1px}
.est-v{flex:none;width:3.3em;text-align:center}
.est-v b{display:block;font:700 1.7rem/1 var(--ui);font-variant-numeric:tabular-nums}
.est-v small{display:block;margin-top:2px;font:500 .74rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.est-t b{display:block;font-weight:600}
.est-d{display:block;margin-top:2px;font-size:.92rem;line-height:1.45;color:var(--soft)}
.est-rg{white-space:nowrap}
.est-row.between{align-items:center;padding-top:8px;padding-bottom:8px;background:var(--sheet)}
.est-row.between .est-v b{font-size:1.3rem;color:var(--soft)}
.est-row.between .est-t b{font-weight:400;color:var(--soft)}
.est-row:has(input:checked){background:var(--mod-tint);box-shadow:inset 4px 0 0 var(--mod);z-index:1}
.est-row:has(input:checked) .est-v b,.est-row:has(input:checked) .est-t b{color:var(--mod)}
.est-row:has(input:focus-visible){outline:2px solid var(--mod);outline-offset:2px;z-index:2}
.est-saved{margin:10px 0;padding:9px 14px;background:var(--mod-tint);border-left:3px solid var(--mod);border-radius:var(--r-s);font-size:.95rem}
.est-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:640px){.est-grid{grid-template-columns:repeat(6,1fr)}}
.est-cell{position:relative;cursor:pointer}
.est-cell span{display:block;padding:9px 6px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);text-align:center}
.est-cell small{display:block;font:500 .74rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.est-cell b{display:block;margin:2px 0;font:700 1.5rem/1 var(--ui)}
.est-cell em{display:block;font-style:normal;font-size:.82rem;color:var(--soft)}
.est-cell input:checked+span{background:var(--mod-tint);border-color:var(--mod);box-shadow:inset 0 3px 0 var(--mod)}
.est-cell input:checked+span b{color:var(--mod)}
.est-cell input:focus-visible+span{outline:2px solid var(--mod);outline-offset:2px}
.sp-list .sp-q{margin-top:5px;font:15px/1.4 Taip,"Courier New",monospace;color:var(--ink)}

/* ---------- Ringkasan set ---------- */
.sum-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;padding:12px 14px;border-left:4px solid var(--s);color:var(--ink);text-decoration:none}
a.sum-row:hover{background:var(--s-tint)}
.sum-row+.sum-row{border-top:1px solid var(--line)}
.sum-k b{display:block;font-weight:600}
.sum-k small{display:block;font:500 .82rem/1.3 var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.sum-n{font:500 1rem/1 var(--ui);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.sum-n b{font-size:1.5rem;font-weight:700;color:var(--ink)}
.sum-n .muted{font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;white-space:normal}
.sum-bar{grid-column:1/-1;grid-row:2;position:relative;height:9px;background:#EEEBE3}
.sum-bar i{display:block;height:100%;background:var(--s)}
.sum-bar em{position:absolute;left:58.89%;top:-4px;bottom:-4px;width:1.5px;background:var(--ink)}
.sum-bar.none{display:none}
.sum-total{border-left-color:var(--ink);background:var(--sheet)}
.sum-total .sum-k small{text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:.84rem}
@media(min-width:640px){
  .sum-row{grid-template-columns:10.5em 1fr 6.5em}
  .sum-bar{grid-column:auto;grid-row:auto}
  .sum-bar.none{display:block;visibility:hidden}
}
.bt{width:100%;margin:16px 0;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:.95rem}
.bt caption{padding:0 0 7px;text-align:left;color:var(--soft)}
.bt th,.bt td{padding:7px 14px;border-top:1px solid var(--line);text-align:left;font-variant-numeric:tabular-nums}
.bt th{width:7em;font:700 .98rem/1.2 var(--ui);letter-spacing:.05em;text-transform:uppercase}
.bt tr.hit th,.bt tr.hit td{background:var(--mod);color:#fff}

@media(max-width:480px){.t-clock{font-size:2.2rem}.set-name{font-size:1.5rem}}