/* Sistem tema (UI-01 P1). Setiap tema ialah set token pada <html data-theme=...>. Ringkas = app.css (cerah/gelap, ikut telefon). Fon dihoskan sendiri (tiada permintaan ke pihak ketiga). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/bricolage-grotesque-600-800.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/chakra-petch-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-700.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cormorant-garamond-700.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/figtree-400-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jost-400-600.woff2) format('woff2')}
html[data-theme=amber]{--radius:4px;--bg:#d6d5c9;--card:#ecebe2;--field:#f7f6ef;--ink:#1f1d14;--muted:#4f4c3e;--line:#bdb9a4;--line2:#8a8468;--soft:#e3e1d4;--hover:#dedcca;--soft2:#d9d6c5;--stage:#c9c7b8;--brand:#a85a00;--brand-2:#8a4a00;--on-brand:#ffffff;--link:#7a4200;--tint:#e8dcc4;--tint-line:#b8914f;--focus:#a85a00;--faint:#69665a;--ph:#6f6b58;--gray-ink:#3b3828;--chart:#a85a00;--chart-fill:rgba(168,90,0,.14);--gn:#68675a;--font-d:'Chakra Petch',system-ui,sans-serif;--font-b:'IBM Plex Sans',system-ui,sans-serif;--font-m:'IBM Plex Mono',ui-monospace,monospace;color-scheme:light;--danger:#a61b1b;--danger-bg:#f3d3d0;--danger-line:#d99a9a;--danger-ink:#7f1d1d;--ok:#116b32;--ok-bg:#cfe6d0;--ok-ink:#14532d;--ok-line:#8cc79f;--warn:#9a4a07;--warn-bg:#f0dfae;--warn-ink:#5f3507;--warn-line:#d3b868;--info-bg:#d3e0f0;--info-ink:#15336a;--info-line:#8fb0dc;--sa-bg:#e0d9f2;--sa-ink:#4a1d96;--wa:#15803d;--wa-2:#116b32;--gm:#1c5cab;--gf:#c2410c;--on-warn:#ffffff;}
html[data-theme=siber]{--radius:4px;--bg:#04090c;--card:#0a181e;--field:#0d2229;--ink:#dff7ff;--muted:#8fb3bd;--line:#164552;--line2:#2a6b7c;--soft:#071318;--hover:#102a33;--soft2:#0c1f26;--stage:#0f2a33;--brand:#22e5ff;--brand-2:#6beeff;--on-brand:#021419;--link:#6beeff;--tint:#0d2f38;--tint-line:#1b6b7c;--focus:#22e5ff;--faint:#7aa0ab;--ph:#7aa0ab;--gray-ink:#c4e9f2;--chart:#22e5ff;--chart-fill:rgba(34,229,255,.14);--gn:#8aa8b2;--font-d:'Chakra Petch',system-ui,sans-serif;--font-b:'IBM Plex Sans',system-ui,sans-serif;--font-m:'IBM Plex Mono',ui-monospace,monospace;color-scheme:dark;--danger:#f87171;--danger-bg:#3b1d1f;--danger-line:#7f3a3d;--danger-ink:#fca5a5;--ok:#4ade80;--ok-bg:#16351f;--ok-ink:#86efac;--ok-line:#2f6b43;--warn:#fbbf24;--warn-bg:#3a2e12;--warn-ink:#fcd34d;--warn-line:#6b5420;--info-bg:#172b4a;--info-ink:#bfdbfe;--info-line:#2d4f85;--sa-bg:#2d2350;--sa-ink:#ddd6fe;--wa:#15803d;--wa-2:#116b32;--gm:#6aa4ff;--gf:#f08a5d;--on-warn:#2b1a00;}
html[data-theme=aurora]{--radius:14px;--bg:#070a1c;--card:#10152c;--field:#171d3a;--ink:#eef1ff;--muted:#aab4d8;--line:#262e55;--line2:#3d4a80;--soft:#0b1024;--hover:#1a2142;--soft2:#131a36;--stage:#1a2142;--brand:#5eead4;--brand-2:#99f6e4;--on-brand:#04201c;--link:#8ff0df;--tint:#122c3a;--tint-line:#2a6b7c;--focus:#5eead4;--faint:#8c97c2;--ph:#8c97c2;--gray-ink:#cdd5f5;--chart:#5eead4;--chart-fill:rgba(94,234,212,.15);--gn:#9aa4c8;--font-d:'Bricolage Grotesque',system-ui,sans-serif;--font-b:Figtree,system-ui,sans-serif;--font-m:ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:dark;--danger:#f87171;--danger-bg:#3b1d1f;--danger-line:#7f3a3d;--danger-ink:#fca5a5;--ok:#4ade80;--ok-bg:#16351f;--ok-ink:#86efac;--ok-line:#2f6b43;--warn:#fbbf24;--warn-bg:#3a2e12;--warn-ink:#fcd34d;--warn-line:#6b5420;--info-bg:#172b4a;--info-ink:#bfdbfe;--info-line:#2d4f85;--sa-bg:#2d2350;--sa-ink:#ddd6fe;--wa:#15803d;--wa-2:#116b32;--gm:#6aa4ff;--gf:#f08a5d;--on-warn:#2b1a00;}
html[data-theme=porselin]{--radius:2px;--bg:#f7f2e7;--card:#fffdf7;--field:#ffffff;--ink:#1d1a14;--muted:#5a5444;--line:#d9c9a3;--line2:#a8956a;--soft:#f1ead8;--hover:#efe5cc;--soft2:#ece2c9;--stage:#e9dfc6;--brand:#8a5a00;--brand-2:#6f4900;--on-brand:#fffdf7;--link:#7a5000;--tint:#f3e8c9;--tint-line:#c9a95a;--focus:#8a5a00;--faint:#6b6452;--ph:#756e59;--gray-ink:#3d382c;--chart:#8a5a00;--chart-fill:rgba(138,90,0,.14);--gn:#6b6556;--font-d:'Cormorant Garamond',Georgia,serif;--font-b:Jost,system-ui,sans-serif;--font-m:ui-monospace,SFMono-Regular,Menlo,monospace;color-scheme:light;--danger:#a61b1b;--danger-bg:#f3d3d0;--danger-line:#d99a9a;--danger-ink:#7f1d1d;--ok:#116b32;--ok-bg:#cfe6d0;--ok-ink:#14532d;--ok-line:#8cc79f;--warn:#9a4a07;--warn-bg:#f0dfae;--warn-ink:#5f3507;--warn-line:#d3b868;--info-bg:#d3e0f0;--info-ink:#15336a;--info-line:#8fb0dc;--sa-bg:#e0d9f2;--sa-ink:#4a1d96;--wa:#15803d;--wa-2:#116b32;--gm:#1c5cab;--gf:#c2410c;--on-warn:#ffffff;}

/* ---- umum untuk empat tema berwarna ---- */
html[data-theme=amber] body,html[data-theme=siber] body,html[data-theme=aurora] body,html[data-theme=porselin] body{font-family:var(--font-b)}
html[data-theme=amber] :is(h1,h2,h3,.brand),html[data-theme=siber] :is(h1,h2,h3,.brand),html[data-theme=aurora] :is(h1,h2,h3,.brand),html[data-theme=porselin] :is(h1,h2,h3,.brand){font-family:var(--font-d)}
html[data-theme=amber] :is(.mono,.code,.codeinput,code),html[data-theme=siber] :is(.mono,.code,.codeinput,code),html[data-theme=aurora] :is(.mono,.code,.codeinput,code),html[data-theme=porselin] :is(.mono,.code,.codeinput,code){font-family:var(--font-m)}
html[data-theme=porselin] :is(h1,h2,h3){font-weight:700}
/* ---- komponen tajuk event ---- */
.evh{margin:0 0 .6rem}
.evt{margin:0;font-size:clamp(1.5rem,7vw,2.2rem);line-height:1.1;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.evm{margin:.55rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}.evm b{color:var(--ink);font-weight:600}.evm .org{display:block}
html[data-theme=amber] .evt,html[data-theme=siber] .evt{text-transform:uppercase;letter-spacing:.03em}
html[data-theme=porselin] .evt{font-size:clamp(1.8rem,8vw,2.8rem)}
/* ---- halaman awam ---- */
html[data-theme=amber] body.pubpage{background-image:linear-gradient(rgba(120,80,20,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,80,20,.08) 1px,transparent 1px);background-size:44px 44px}
html[data-theme=siber] body.pubpage{background-image:linear-gradient(rgba(34,229,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,229,255,.06) 1px,transparent 1px);background-size:44px 44px}
html[data-theme=amber] .pubpage .pub .card,html[data-theme=siber] .pubpage .pub .card{position:relative}
html[data-theme=amber] .pubpage .pub .card::after,html[data-theme=siber] .pubpage .pub .card::after{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--brand),var(--brand)) 0 0/16px 2px,linear-gradient(var(--brand),var(--brand)) 0 0/2px 16px,linear-gradient(var(--brand),var(--brand)) 100% 0/16px 2px,linear-gradient(var(--brand),var(--brand)) 100% 0/2px 16px,linear-gradient(var(--brand),var(--brand)) 0 100%/16px 2px,linear-gradient(var(--brand),var(--brand)) 0 100%/2px 16px,linear-gradient(var(--brand),var(--brand)) 100% 100%/16px 2px,linear-gradient(var(--brand),var(--brand)) 100% 100%/2px 16px;background-repeat:no-repeat}
html[data-theme=amber] .pubpage :is(.pub h1,.pub h2),html[data-theme=siber] .pubpage :is(.pub h1,.pub h2){text-transform:uppercase;letter-spacing:.04em}
html[data-theme=amber] .pubpage .btn,html[data-theme=siber] .pubpage .btn{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
html[data-theme=amber] .pubpage .btn.big,html[data-theme=siber] .pubpage .btn.big{min-height:52px;font-size:.95rem}
html[data-theme=amber] .pubpage .btn:not(.sec):not(.wa){box-shadow:0 6px 16px rgba(168,90,0,.25)}
html[data-theme=siber] .pubpage .btn:not(.sec):not(.wa){box-shadow:0 0 22px rgba(34,229,255,.3)}
html[data-theme=siber] .pubpage .codebox .code{color:var(--brand);text-shadow:0 0 22px rgba(34,229,255,.55)}
html[data-theme=amber] .pubpage .codebox .code{color:var(--link)}
html[data-theme=aurora] body.pubpage::before,html[data-theme=aurora] body.pubpage::after{content:'';position:fixed;z-index:0;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none}
html[data-theme=aurora] body.pubpage::before{left:-22vmax;top:-22vmax;background:#14b8a6}
html[data-theme=aurora] body.pubpage::after{right:-22vmax;top:28vh;background:#7c3aed}
html[data-theme=aurora] .pubpage :is(main,.pubtop){position:relative;z-index:1}
html[data-theme=aurora] .pubpage .pub .card{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.16)}
html[data-theme=aurora] .pubpage .evt,html[data-theme=aurora] .pubpage .pub h1{background:linear-gradient(100deg,#fff 20%,#5eead4 65%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=aurora] .pubpage .btn:not(.sec):not(.wa){box-shadow:0 0 26px rgba(94,234,212,.3)}
html[data-theme=porselin] .pubpage .pub .card{box-shadow:0 18px 40px rgba(120,90,20,.12);border-color:var(--line)}
html[data-theme=porselin] .pubpage .pub h1::after{content:'';display:block;width:120px;height:3px;margin-top:.7rem;background:linear-gradient(90deg,#b88a2e,#f2d27a,#b88a2e)}
html[data-theme=porselin] .pubpage .btn{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
html[data-theme=porselin] .pubpage .btn.big{min-height:52px}
@media (prefers-reduced-motion:no-preference){
html[data-theme=aurora] body.pubpage::before,html[data-theme=aurora] body.pubpage::after{animation:thDrift 24s ease-in-out infinite alternate}
html[data-theme=aurora] body.pubpage::after{animation-duration:30s}
html[data-theme=porselin] .pubpage .pub h1::after{animation:thDraw 1.4s .2s ease-out both}
html[data-theme=amber] .pubpage .pub .card,html[data-theme=siber] .pubpage .pub .card,html[data-theme=porselin] .pubpage .pub .card,html[data-theme=aurora] .pubpage .pub .card{animation:thRise .6s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes thDrift{to{transform:translate(10vmax,8vmax) scale(1.15)}}
@keyframes thDraw{from{width:0}}
@keyframes thRise{from{opacity:0;transform:translateY(14px)}}
/* ---- pemilih tema ---- */
.mc-choose{width:min(460px,100%)}
.mc-choose .thm{display:grid;gap:.4rem;margin-top:.8rem}
.thm-opt{display:grid;grid-template-columns:56px 1fr 22px;gap:.8rem;align-items:center;width:100%;min-height:56px;padding:.45rem .6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--field);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.thm-opt:hover{background:var(--hover)}
.thm-opt[aria-checked=true]{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:-1px}
.thm-opt strong{display:block;font-size:.95rem}.thm-opt small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.thm-opt .mc-check{visibility:hidden;color:var(--link)}.thm-opt[aria-checked=true] .mc-check{visibility:visible}
.thm-sw{width:56px;height:36px;border-radius:6px;border:1px solid var(--line2);display:block}
.thm-sw[data-t=amber]{background:linear-gradient(135deg,#d6d5c9 58%,#a85a00 59%)}
.thm-sw[data-t=siber]{background:linear-gradient(135deg,#04090c 58%,#22e5ff 59%)}
.thm-sw[data-t=aurora]{background:radial-gradient(circle at 25% 30%,#14b8a6,transparent 60%),radial-gradient(circle at 80% 70%,#7c3aed,transparent 60%),#070a1c}
.thm-sw[data-t=porselin]{background:linear-gradient(135deg,#f7f2e7 58%,#b88a2e 59%)}
.thm-sw[data-t=auto]{background:linear-gradient(90deg,#e1e4e8 50%,#212833 50%)}
.thm-sw[data-t=light]{background:#e1e4e8}
.thm-sw[data-t=dark]{background:#212833}
html[data-theme=amber] .pubpage .pub h1.evt.nocaps,html[data-theme=siber] .pubpage .pub h1.evt.nocaps{text-transform:none;letter-spacing:0}

/* ---- banner event dilukis kod (komponen x-banner dan galeri tetapan) ---- */
.bnr{position:relative;display:block;width:100%;aspect-ratio:2/1;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:#0b3a3b;margin:0 0 1rem}
.bnr svg{display:block;width:100%;height:100%;overflow:hidden}
.bnr svg *{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
.bn-a1{animation:bnA1 16s ease-in-out infinite alternate}.bn-a2{animation:bnA2 19s ease-in-out infinite alternate}.bn-a3{animation:bnA3 22s ease-in-out infinite alternate}
.bn-grid{animation:bnGrid 3.2s linear infinite}.bn-scan{animation:bnScan 6.5s linear infinite}
.bn-w1{animation:bnW 20s linear infinite}.bn-w2{animation:bnW 30s linear infinite reverse}.bn-w3{animation:bnW 44s linear infinite}
.bn-dot{animation:bnDot linear infinite}
.still .bnr svg *,.still.mc-back svg *{animation:none!important}
}
@keyframes bnA1{to{transform:translate(260px,90px) scale(1.15)}}@keyframes bnA2{to{transform:translate(-300px,-110px) scale(1.1)}}@keyframes bnA3{to{transform:translate(-200px,160px) scale(1.2)}}
@keyframes bnGrid{to{transform:translate(50px,50px)}}@keyframes bnScan{from{transform:translateY(0)}to{transform:translateY(780px)}}
@keyframes bnW{to{transform:translateX(-1200px)}}
@keyframes bnDot{from{transform:translateY(0);opacity:0}10%{opacity:.9}85%{opacity:.7}to{transform:translateY(-720px);opacity:0}}
.bnr svg{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
.bn-star{animation:bnTw ease-in-out infinite}.bn-cf{animation:bnCf linear infinite}
.bn-shim{animation:bnShim 7s ease-in-out infinite}
.bn-ring{animation:bnRing 5.2s ease-out infinite}.bn-sweep{transform-box:view-box;transform-origin:600px 300px;animation:bnSpin 7s linear infinite}
.bn-rays{transform-box:view-box;transform-origin:600px 470px;animation:bnSpin 90s linear infinite}.bn-sun{animation:bnBreath 6s ease-in-out infinite}
.bn-m1{animation:bnM 70s ease-in-out infinite alternate}.bn-m2{animation:bnM 46s ease-in-out infinite alternate-reverse}.bn-m3{animation:bnM 30s ease-in-out infinite alternate}
.bn-cl1{animation:bnCl 40s linear infinite alternate}.bn-cl2{animation:bnCl 55s linear infinite alternate-reverse}
}
@keyframes bnTw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes bnCf{from{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(660px) rotate(540deg);opacity:.85}}
@keyframes bnShim{0%{transform:skewX(-18deg) translateX(0)}60%,100%{transform:skewX(-18deg) translateX(1900px)}}
@keyframes bnRing{from{transform:scale(.3);opacity:.7}to{transform:scale(2.6);opacity:0}}
@keyframes bnSpin{to{transform:rotate(360deg)}}
@keyframes bnBreath{50%{transform:scale(1.08);opacity:.8}}
@keyframes bnM{to{transform:translateX(-300px)}}
@keyframes bnCl{to{transform:translateX(260px)}}


/* ---- pilihan tema dan banner pada Tetapan event / sistem ---- */
.optset{border:0;margin:1rem 0 0;padding:0;min-width:0}.optset>legend,.optset .lbl{font-weight:600;font-size:.92rem;padding:0;margin-bottom:.4rem}
.optgrid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.bgal{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.lgal{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt2{display:block;cursor:pointer;min-width:0;margin:0;font-weight:500}
.opt2 .box{display:flex;gap:.6rem;align-items:center;min-height:56px;padding:.45rem .55rem;border:1px solid var(--line2);border-radius:var(--radius);background:var(--field);height:100%}
.opt2 .box>span:last-child{min-width:0}.opt2 strong{display:block;font-size:.9rem;overflow-wrap:anywhere}.opt2 small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3}
.opt2 input:checked+.box{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:-1px;background:var(--tint)}
.opt2 input:focus-visible+.box{outline:3px solid var(--focus);outline-offset:2px}
.bgal .box,.lgal .box{flex-direction:column;align-items:stretch;gap:.35rem;padding:.4rem}.bgal .bnthumb{margin:0;border-radius:6px}.lgal img{width:48px;height:48px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--line);margin:auto}
.bnnone{display:grid;place-items:center;aspect-ratio:2/1;font-size:1.8rem;color:var(--muted);border:1px dashed var(--line2);border-radius:6px}.lgal .bnnone{aspect-ratio:1;width:48px;margin:auto;font-size:1.3rem}
.bnprev{margin-bottom:.8rem;max-width:620px}.bnprev .bnr{margin-bottom:.3rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bnr.off svg *{animation-play-state:paused!important}

/* ---- UI-01 P3: halaman admin dan superadmin dalam tema (Ringkas tidak diubah) ---- */
html:is([data-theme=amber],[data-theme=siber]) body{background-image:linear-gradient(rgba(120,80,20,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,80,20,.07) 1px,transparent 1px);background-size:44px 44px;background-attachment:fixed}
html[data-theme=siber] body{background-image:linear-gradient(rgba(34,229,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,229,255,.05) 1px,transparent 1px)}
html:is([data-theme=amber],[data-theme=siber]) :is(.card,.kpi,.stat):not(.danger-zone){position:relative}
html:is([data-theme=amber],[data-theme=siber]) :is(.card,.kpi,.stat):not(.danger-zone)::after{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--brand),var(--brand)) 0 0/14px 2px,linear-gradient(var(--brand),var(--brand)) 0 0/2px 14px,linear-gradient(var(--brand),var(--brand)) 100% 0/14px 2px,linear-gradient(var(--brand),var(--brand)) 100% 0/2px 14px,linear-gradient(var(--brand),var(--brand)) 0 100%/14px 2px,linear-gradient(var(--brand),var(--brand)) 0 100%/2px 14px,linear-gradient(var(--brand),var(--brand)) 100% 100%/14px 2px,linear-gradient(var(--brand),var(--brand)) 100% 100%/2px 14px;background-repeat:no-repeat;border-radius:inherit}
html:is([data-theme=amber],[data-theme=siber]) :is(h1,h2){text-transform:uppercase;letter-spacing:.04em}
html:is([data-theme=amber],[data-theme=siber]) h1{font-size:1.45rem}
html:is([data-theme=amber],[data-theme=siber]) .btn{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.07em;font-size:.8rem;font-weight:600}
html:is([data-theme=amber],[data-theme=siber]) .btn.sm{font-size:.72rem}
html:is([data-theme=amber],[data-theme=siber]) .tabs a{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
html:is([data-theme=amber],[data-theme=siber]) .nav{border-bottom-color:var(--brand)}
html:is([data-theme=amber],[data-theme=siber]) .nav .brand{text-transform:uppercase;letter-spacing:.08em}
html:is([data-theme=amber],[data-theme=siber]) :is(.stat .n,.kpi .n){font-family:var(--font-d)}
html[data-theme=siber] .nav{box-shadow:0 1px 18px rgba(34,229,255,.12)}
html[data-theme=siber] :is(.stat .n,.kpi .n,.codebox .code){text-shadow:0 0 18px rgba(34,229,255,.45)}
/* Aurora: cahaya aurora di belakang, kad dan bar kaca */
html[data-theme=aurora] body::before,html[data-theme=aurora] body::after{content:'';position:fixed;z-index:0;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.38;pointer-events:none}
html[data-theme=aurora] body::before{left:-22vmax;top:-22vmax;background:#14b8a6}
html[data-theme=aurora] body::after{right:-22vmax;top:30vh;background:#7c3aed}
html[data-theme=aurora] :is(.nav,main,.imp-bar,.announce,.pubtop){position:relative;z-index:1}
html[data-theme=aurora] .nav{background:rgba(16,21,44,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-theme=aurora] :is(.card,.kpi,.stat,.vcard,.pcard):not(.danger-zone){background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.14)}
html[data-theme=aurora] h1{background:linear-gradient(100deg,#fff 20%,#5eead4 65%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=aurora] .btn:not(.sec):not(.danger):not(.wa){box-shadow:0 0 22px rgba(94,234,212,.25)}
/* Porselin: garis emas, kad lembut */
html[data-theme=porselin] :is(.card,.kpi,.stat){box-shadow:0 10px 28px rgba(120,90,20,.09)}
html[data-theme=porselin] h1::after{content:'';display:block;width:90px;height:3px;margin-top:.5rem;background:linear-gradient(90deg,#b88a2e,#f2d27a,#b88a2e)}
html[data-theme=porselin] .nav{border-bottom-color:#c9a95a}
html[data-theme=porselin] .btn{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:600}
html[data-theme=porselin] .btn.sm{font-size:.7rem}
html[data-theme=porselin] .tabs a{letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
@media (prefers-reduced-motion:no-preference){
html[data-theme=aurora] body::before,html[data-theme=aurora] body::after{animation:thDrift 24s ease-in-out infinite alternate}
html[data-theme=aurora] body::after{animation-duration:30s}
html[data-theme=porselin] h1::after{animation:thDraw 1.4s .2s ease-out both}
}
@keyframes thDraw90{from{width:0}}
@media (max-width:420px){html:is([data-theme=amber],[data-theme=siber],[data-theme=aurora],[data-theme=porselin]) :is(th,td){padding:.45rem .3rem}html:is([data-theme=amber],[data-theme=siber],[data-theme=aurora],[data-theme=porselin]) th{letter-spacing:0;font-size:.7rem}}
/* Cetak (FE-11): kertas sentiasa cerah dan jimat dakwat, apa pun tema. Selektor :root:root:root mengatasi semua tema dan Ringkas gelap. */
@media print{
html:root:root:root{--bg:#fff;--card:#fff;--field:#fff;--ink:#1f2937;--muted:#4b5563;--line:#9ca3af;--line2:#6b7280;--soft:#f3f4f6;--hover:#f3f4f6;--soft2:#f3f4f6;--stage:#f3f4f6;--brand:#0f766e;--brand-2:#115e59;--on-brand:#fff;--link:#0b5f58;--tint:#e6f2f0;--tint-line:#8fbdb6;--focus:#0f766e;--faint:#6b7280;--ph:#6b7280;--gray-ink:#374151;--chart:#0f766e;--chart-fill:rgba(15,118,110,.15);--gm:#1c5cab;--gf:#c2410c;--gn:#6b7280;--danger:#a61b1b;--danger-bg:#fde8e8;--danger-line:#d99a9a;--danger-ink:#7f1d1d;--ok:#116b32;--ok-bg:#e6f4ea;--ok-ink:#14532d;--ok-line:#8cc79f;--warn:#9a4a07;--warn-bg:#fdf3d6;--warn-ink:#5f3507;--warn-line:#d3b868;--info-bg:#e6effa;--info-ink:#15336a;--info-line:#8fb0dc;color-scheme:light;--radius:6px;background:#fff}
html:root:root:root{-webkit-print-color-adjust:exact;print-color-adjust:exact}
html:root:root:root :is(.card,.stat,.kpi)::before,html:root:root:root :is(.card,.stat,.kpi)::after{display:none!important}
html:root:root:root body{background:#fff!important;background-image:none!important;color:var(--ink);font-family:system-ui,sans-serif}
html:root:root:root body::before,html:root:root:root body::after{display:none!important}
html:root:root:root :is(.card,.stat,.kpi){background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--line)!important;border-radius:6px;break-inside:avoid}
html:root:root:root :is(h1,h2,h3){background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--ink)!important;font-family:inherit;text-shadow:none;text-transform:none;letter-spacing:0}
html:root:root:root h1::after{display:none}
html:root:root:root :is(.stat .n,.kpi .n){color:var(--link)!important;text-shadow:none;font-family:inherit}
html:root:root:root :is(.imp-bar,.announce,.tabs,.no-print,.themebtn,.langsw,.mc-back,.mc-modal){display:none!important}
html:root:root:root .print-only{display:block}
html:root:root:root main{position:static}
html:root:root:root .wrap{max-width:none;padding:0}
html:root:root:root .grid.g4{grid-template-columns:repeat(4,1fr);gap:.5rem}
html:root:root:root .grid.g2{grid-template-columns:1fr 1fr;gap:.6rem}
html:root:root:root .stat{padding:.5rem .6rem}
html:root:root:root .stat .n{font-size:1.4rem}
html:root:root:root .card{margin-bottom:.6rem;padding:.6rem .8rem}
html:root:root:root .card.tbl{break-inside:avoid}
html:root:root:root .card.tbl:last-of-type{break-inside:auto}
html:root:root:root .card:has(#cRace){order:1}
html:root:root:root canvas{max-width:100%!important;width:100%!important;height:58mm!important;object-fit:contain;break-inside:avoid}
html:root:root:root canvas#cGender{height:46mm!important}
html:root:root:root canvas#cAge{height:52mm!important}
html:root:root:root .grid.g2>.card[style*=grid-column]{order:2}
html:root:root:root :is(h2,h3){break-after:avoid;margin-top:0}
html:root:root:root :is(th,td){padding:.22rem .4rem}
html:root:root:root table{width:100%;font-size:.85rem}
html:root:root:root :is(tr,th,td,thead){break-inside:avoid}
html:root:root:root thead{display:table-header-group}
html:root:root:root :is(th,td){color:var(--ink)!important;border-color:var(--line)!important}
html:root:root:root .flash{break-inside:avoid;background:var(--soft)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
@page{size:A4 portrait;margin:12mm}
}