/* Arab SPM Ceria — gaya asal oleh Muhammad Fakhrul Mu’iz Bin Mohd Azmy (diskop .asc, token warna laman, saiz teks ikut A-/A+).
   Dijana oleh _projek/inovasi-baharu-2nov/kerja/bina_arab_spm_ceria.py — jangan sunting dengan tangan. */
.asc *{box-sizing:border-box}
.asc h1,
.asc h2,
.asc h3{font-family:'Baloo 2','Nunito',system-ui,sans-serif;line-height:1.2;margin:0 0 .4em}
.asc h1,
.asc h2.a-tajuk{font-size:1.4em}
.asc h2{font-size:1.22em}
.asc h3{font-size:1.05em}
.asc p{margin:.3em 0 .8em}
.asc button{font:inherit;color:inherit;cursor:pointer}
.asc :focus-visible{outline:3px solid var(--a-brand);outline-offset:2px}
.asc .ar{font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;direction:rtl;unicode-bidi:isolate;text-align:right;font-size:calc(1.55 * var(--a-rem));line-height:2.1}
.asc .ar-lg{font-size:calc(2.05 * var(--a-rem))}
.asc .muted{color:var(--a-muted)}
.asc .small{font-size:calc(.9 * var(--a-rem))}
.asc .card{background:var(--a-card);border:1px solid var(--a-line);border-radius:var(--radius,14px);padding:var(--kad-pad,16px);box-shadow:var(--a-shadow);margin-bottom:var(--gap,14px)}
.asc .card.flat{box-shadow:none}
.asc .grid{display:grid;gap:14px}
.asc .g2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.asc .btn{border:0;background:var(--a-brand);color:var(--a-brand-ink);padding:11px 20px;border-radius:99px;font-weight:800;min-height:44px}
.asc .btn.sec{background:var(--a-soft);color:var(--a-ink)}
.asc .btn.ghost{background:none;border:1.5px solid var(--a-line);color:var(--a-ink)}
.asc .btn.sm{padding:6px 14px;min-height:36px;font-size:calc(.9 * var(--a-rem))}
.asc .btn:disabled{opacity:.45;cursor:not-allowed}
.asc .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.asc .sp{justify-content:space-between}
.asc select,
.asc textarea{font:inherit;color:var(--a-ink);background:var(--a-card);border:1.5px solid var(--a-line);border-radius:12px;padding:10px 12px;width:100%}
.asc select{min-height:44px}
.asc textarea{resize:vertical}
.asc textarea.ar{font-size:calc(1.5 * var(--a-rem));line-height:2.2;min-height:150px}
.asc .tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 6px;scrollbar-width:thin}
.asc .tabs button{flex:none;border:1.5px solid var(--a-line);background:var(--a-card);padding:8px 14px;border-radius:99px;font-weight:700;white-space:nowrap}
.asc .tabs button[aria-selected="true"]{background:var(--a-ink);color:var(--a-bg);border-color:var(--a-ink)}
.asc .chips{display:flex;flex-wrap:wrap;gap:8px}
.asc .chip{border:1.5px solid var(--a-line);background:var(--a-card);padding:5px 12px;border-radius:99px;font-weight:700;font-size:calc(.92 * var(--a-rem))}
.asc .chip.on{background:var(--a-brand);border-color:var(--a-brand);color:var(--a-brand-ink)}
.asc .chip.ins{font-family:'Amiri',serif;direction:rtl;font-size:calc(1.1 * var(--a-rem));padding:2px 12px}
.asc .tile{--c:#64748B;position:relative;display:flex;gap:12px;align-items:flex-start;background:color-mix(in srgb,var(--c) 13%,var(--a-card));border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);border-left:7px solid var(--c);border-radius:12px;padding:10px 14px;margin:8px 0;text-align:left;width:100%}
.asc .tile .badge{flex:none;min-width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--c) 80%,#000);color:#fff;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:calc(.95 * var(--a-rem));padding:0 6px}
.asc .tile .body{flex:1;min-width:0}
.asc .tile .ar{margin:0}
.asc .tile .tr{font-size:calc(.92 * var(--a-rem));color:var(--a-muted);margin-top:2px}
.asc .tile .why{font-size:calc(.88 * var(--a-rem));margin-top:6px;padding-top:6px;border-top:1px dashed color-mix(in srgb,var(--c) 45%,transparent)}
.asc .tile.plain{--c:#94A3B8;background:var(--a-card)}
.asc .tile.good{--c:var(--a-ok)}
.asc .tile.badx{--c:var(--a-bad)}
.asc button.tile{cursor:pointer;font:inherit;color:inherit}
.asc .tile .badge.sm{font-size:calc(.8 * var(--a-rem))}
.asc .legend{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.asc .legend span{--c:#64748B;display:inline-flex;gap:6px;align-items:center;font-size:calc(.82 * var(--a-rem));font-weight:700}
.asc .legend i{width:14px;height:14px;border-radius:5px;background:var(--c);display:inline-block}
.asc .progress{height:12px;background:var(--a-soft);border-radius:99px;overflow:hidden}
.asc .progress>i{display:block;height:100%;background:var(--a-brand);border-radius:99px;transition:width .35s}
.asc .progress.ok>i{background:var(--a-ok)}
.asc .pill{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--a-soft);font-weight:800;font-size:calc(.8 * var(--a-rem));color:var(--a-muted)}
.asc .hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.asc .ring{position:relative;width:96px;height:96px}
.asc .ring svg{transform:rotate(-90deg)}
.asc .ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:calc(1.5 * var(--a-rem))}
.asc .stats{display:flex;gap:10px;flex-wrap:wrap}
.asc .stat{background:var(--a-soft);border-radius:14px;padding:8px 14px;font-weight:800}
.asc .stat small{display:block;font-weight:600;color:var(--a-muted)}
.asc .check{display:flex;gap:10px;padding:6px 0;align-items:flex-start;font-size:calc(.95 * var(--a-rem))}
.asc .check .m{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:calc(.8 * var(--a-rem));font-weight:800;background:var(--a-soft);color:var(--a-muted)}
.asc .check.ok .m{background:var(--a-ok);color:#fff}
.asc .warnbox{background:color-mix(in srgb,var(--a-gold) 20%,var(--a-card));border:1.5px solid var(--a-gold);border-radius:12px;padding:8px 12px;margin:8px 0;font-size:calc(.92 * var(--a-rem))}
.asc .counter{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);z-index:5;background:var(--a-card);border:1.5px solid var(--a-line);border-radius:16px;padding:10px 14px;box-shadow:var(--a-shadow);margin:12px 0}
.asc .blank{display:inline-block;min-width:110px;border-bottom:3px dashed var(--a-brand);text-align:center;color:var(--a-brand)}
.asc .opt{display:block;width:100%;text-align:center;border:2px solid var(--a-line);background:var(--a-card);border-radius:14px;padding:6px 12px;margin:8px 0}
.asc .opt.ok{border-color:var(--a-ok);background:color-mix(in srgb,var(--a-ok) 15%,var(--a-card))}
.asc .opt.no{border-color:var(--a-bad);background:color-mix(in srgb,var(--a-bad) 13%,var(--a-card))}
.asc .opt:disabled{cursor:default}
.asc .vcard{border:2px solid var(--a-line);background:var(--a-card);border-radius:18px;padding:16px 10px;min-height:120px;display:grid;place-items:center;text-align:center;width:100%}
.asc .vcard.back{background:var(--a-soft)}
.asc .vcard.known{border-color:var(--a-ok)}
.asc .badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.asc .bdg{text-align:center;padding:14px 8px;border:1.5px solid var(--a-line);border-radius:16px;background:var(--a-card)}
.asc .bdg .e{font-size:calc(2 * var(--a-rem))}
.asc .bdg.lock{opacity:.45;filter:grayscale(1)}
.asc .bar{display:grid;grid-template-columns:130px 1fr 52px;gap:10px;align-items:center;margin:8px 0;font-weight:700;font-size:calc(.92 * var(--a-rem))}
.asc .toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translateX(-50%) translateY(30px);background:var(--a-ink);color:var(--a-bg);padding:10px 18px;border-radius:99px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:92vw;text-align:center}
.asc .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.asc .fx{position:fixed;inset:0;pointer-events:none;z-index:55;overflow:hidden}
.asc .fx i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:asc-fall 1.6s ease-in forwards}
@keyframes asc-fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
@media (max-width:900px){
  .asc .hero{grid-template-columns:1fr;justify-items:start}
  .asc .bar{grid-template-columns:100px 1fr 46px}
}
@media (prefers-reduced-motion:reduce){
  .asc *{transition:none!important;animation:none!important}
}
.asc .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 104px)}
.asc .mods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(min-width:700px){
  .asc .mods{grid-template-columns:repeat(3,1fr)}
}
.asc .mod{background:var(--a-card);border:1.5px solid var(--a-line);border-radius:18px;padding:14px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:block}
.asc .mod i{font-style:normal;font-size:calc(1.7 * var(--a-rem));display:block;line-height:1.2}
.asc .mod b{display:block;margin-top:4px}
.asc .mod span{display:block;color:var(--a-muted);font-size:calc(.85 * var(--a-rem))}
.asc .mod:active{transform:scale(.98)}
.asc .how li{margin:8px 0}
.asc .pt{display:grid;grid-template-columns:1fr 30% 42px;gap:10px;align-items:center;margin:10px 0}
.asc .pt b{text-align:right}
.asc .bar2{height:9px;background:var(--a-soft);border-radius:9px;overflow:hidden}
.asc .bar2 i{display:block;height:100%;border-radius:9px;background:var(--a-line)}
.asc .bar2 i.g{background:var(--a-ok)}
.asc .bar2 i.y{background:var(--a-gold)}
.asc .bar2 i.r{background:var(--a-bad)}
.asc .stc{text-align:center;margin:0;padding:14px 8px}
.asc .stc b{display:block;font-family:'Baloo 2',sans-serif;font-size:calc(1.6 * var(--a-rem));line-height:1.15}
.asc .stc small{color:var(--a-muted);font-weight:700}

/* ===== Tambahan SistemGuru.My: token laman, ikon SVG, rangka aplikasi, skrin penuh, helaian Menu ===== */
.asc{--a-rem:calc(var(--kd-fs-asas,14px) * var(--fs-scale,1));--a-bg:var(--bg);--a-card:var(--card);--a-ink:var(--text);--a-muted:var(--text-muted);
  --a-line:var(--border);--a-brand:var(--primary-dark,#047857);--a-brand-ink:#fff;--a-ok:#15803D;--a-bad:#DC2626;--a-gold:#F5B301;
  --a-soft:var(--primary-bg,#ECFDF5);--a-shadow:0 1px 0 rgba(23,35,59,.06),0 10px 24px -14px rgba(23,35,59,.28);
  color:var(--a-ink);font-family:'Nunito',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;-webkit-text-size-adjust:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .asc{--a-brand:#34D399;--a-brand-ink:#0F172A;--a-ok:#4ADE80;--a-bad:#F87171;--a-shadow:none}}
:root[data-theme="dark"] .asc{--a-brand:#34D399;--a-brand-ink:#0F172A;--a-ok:#4ADE80;--a-bad:#F87171;--a-shadow:none}
.asc #app svg:not(.a-ik){width:auto;height:auto;flex-shrink:initial}   /* kedai.css: svg 20px */
.asc .a-ik{width:1.15em;height:1.15em;fill:currentColor;display:inline-block;vertical-align:-.2em;flex-shrink:0}
.asc .a-hijau{color:var(--a-ok)} .asc .a-merah{color:var(--a-bad)} .asc .a-emas{color:#D97706} .asc .a-oren{color:#EA580C} .asc .a-pudar{color:var(--a-muted)}
.asc .tabs button .a-ik{margin-right:.15em}
.asc .mod i .a-ik{width:1.6em;height:1.6em}
.asc .mod:nth-child(1) i{color:#2F7BEA}
.asc .mod:nth-child(2) i{color:#0E9F8E}
.asc .mod:nth-child(3) i{color:#8B5CF6}
.asc .mod:nth-child(4) i{color:#C2570C}
.asc .mod:nth-child(5) i{color:#E5484D}
.asc .mod:nth-child(6) i{color:#D99A00}
.asc .mod:nth-child(7) i{color:#2E9E4F}
.asc .mod:nth-child(8) i{color:#4F46E5}
.asc .bdg .e{color:#D97706}.asc .bdg .e .a-ik{width:1.9em;height:1.9em}
.asc .stat .a-ik{color:#EA580C}
.asc .toast{display:flex;align-items:center;gap:8px;z-index:60}.asc .toast .a-ik{color:#FBBF24}
.asc .ar-i{font-family:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;font-size:1.15em;line-height:1}
.asc input:not([type=checkbox]):not([type=radio]){font:inherit;color:var(--a-ink);background:var(--a-card);border:1.5px solid var(--a-line);border-radius:12px;padding:8px 10px;max-width:100%}
.asc label{display:block;margin-top:8px;font-weight:700}.asc label:has(input[type=checkbox]){display:flex;gap:8px;align-items:center;font-weight:600}
.asc .ring svg{width:96px;height:96px}
/* Studio Karangan: kaunter melekat di atas nav bawah (telefon & tablet potret) */
@media (max-width: 899px), (max-width: 1366px) and (orientation: portrait){.asc .counter{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}}
html.embed .asc .counter,html.iv-sp-aktif .asc .counter{bottom:8px}
/* bar aplikasi (logo asal + XP + Menu + Skrin penuh, Bhg 16J) */
.asc-app{display:block}
.asc-bar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius,14px);padding:8px 10px;margin-bottom:var(--gap,14px)}
.asc-logo{width:40px;height:40px;border-radius:11px;flex:none;object-fit:cover}
.asc-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.asc-bar-t b{font-family:'Baloo 2',Inter,sans-serif;font-size:1.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asc-bar-t small{color:var(--text-muted);font-size:.82em}
.asc-bar .iv-sp-btn{color:var(--primary-text,#047857)}
.asc-bar-btn{display:none;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:8px;padding:6px 10px;min-height:34px;font:inherit;font-size:.85em;font-weight:700;cursor:pointer}
.asc-bar-btn svg{width:18px;height:18px}
html.iv-sp-aktif .asc-bar .asc-menu-btn{display:inline-flex}
@media (max-width: 640px){.asc-bar .iv-sp-btn span,.asc-bar-btn span{display:none}.asc-bar-t small{display:none}}
.asc-app.iv-skrin-penuh{padding:calc(4px + env(safe-area-inset-top)) 4px calc(4px + env(safe-area-inset-bottom)) !important}
html.asc-kunci,html.asc-kunci body{overflow:hidden}
/* helaian Menu (modul asal) */
.asc-menu-senarai{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.asc-menu-senarai a{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:700;border:1px solid var(--border)}
.asc-menu-senarai a svg{width:22px;height:22px;color:var(--primary-text,#047857)}
.asc-menu-senarai a.aktif{background:var(--primary-bg);border-color:var(--primary-bd);color:var(--primary-text)}
.asc-menu-senarai hr{border:0;border-top:1px solid var(--border);margin:8px 0}