/* Shine Store - header switches + dark mode */
.hd-r{gap:8px}
.lang.ssm-l{position:relative;width:auto;height:38px;padding:4px;gap:2px;border-radius:99px;background:rgba(0,0,0,.06);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:transform .2s}
.ssm-hl{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .45s cubic-bezier(.3,1.4,.5,1),background .3s}
[data-lang=en] .ssm-hl{transform:translateX(32px)}
.ssm-f{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .3s,filter .3s}
.ssm-f svg{display:block;width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
[data-lang=en] .f-mm,[data-lang=my] .f-en{opacity:.55;filter:saturate(.7);transform:scale(.86)}
.ssm-l:active{transform:scale(.95)}
html[data-theme=dark] .ssm-hl{background:#2e2e3e;box-shadow:0 2px 8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.2)}
.ssm-sw{position:relative;flex:none;width:58px;height:34px;padding:0;border:0;border-radius:99px;cursor:pointer;background:linear-gradient(135deg,#a5ddff,#4da3ff 60%,#7c8cff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 2px 8px rgba(77,163,255,.32);transition:background .4s,box-shadow .4s;-webkit-tap-highlight-color:transparent}
.ssm-sw:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;background:radial-gradient(circle at 22% 30%,#fff 0 1px,transparent 1.7px),radial-gradient(circle at 36% 70%,#fff 0 .8px,transparent 1.5px),radial-gradient(circle at 50% 26%,#fff 0 .8px,transparent 1.5px)}
.ssm-kn{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.28);display:grid;place-items:center;transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .3s}
.ssm-kn svg{grid-area:1/1;width:17px;height:17px;transition:opacity .25s,rotate .45s cubic-bezier(.3,1.4,.5,1),scale .45s}
.ssm-kn .sun{fill:#ffb020;stroke:#ffb020;stroke-width:1.7;stroke-linecap:round}
.ssm-kn .moon{fill:#5e5ce6;stroke:#5e5ce6;stroke-width:1.2;stroke-linejoin:round;opacity:0;rotate:-60deg;scale:.5}
.ssm-sw:active .ssm-kn{width:32px}
body,.hd,.ft{transition:background-color .35s,color .35s,border-color .35s}

/* ---------- Dark mode ---------- */
html[data-theme=dark]{color-scheme:dark;--bg:#07070d;--bg2:#14141d;--card:#14141d;--line:rgba(255,255,255,.1);--tx:#f5f5f7;--mu:#a0a0ae;--a:#4f9dff;--a2:#74b3ff;--b:#4f9dff;--hot:#ff6b6b;--ok:#34d27b;--sh:0 8px 28px rgba(0,0,0,.5)}
html[data-theme=dark] .ssm-sw{background:linear-gradient(135deg,#2a2a5a,#0f0f22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 2px 12px rgba(94,92,230,.4)}
html[data-theme=dark] .ssm-sw:before{opacity:1}
html[data-theme=dark] .ssm-kn{transform:translateX(24px);background:#eceaff}
html[data-theme=dark] .ssm-sw:active .ssm-kn{transform:translateX(20px)}
html[data-theme=dark] .ssm-kn .sun{opacity:0;rotate:60deg;scale:.5}
html[data-theme=dark] .ssm-kn .moon{opacity:1;rotate:0deg;scale:1}
html[data-theme=dark] .lang.ssm-l{background:rgba(255,255,255,.1)}
html[data-theme=dark] .lang.ssm-l:hover{background:rgba(255,255,255,.16)}
html[data-theme=dark] body{background:radial-gradient(1100px 560px at 10% -8%,rgba(94,92,230,.28),transparent 62%),radial-gradient(900px 520px at 100% 2%,rgba(255,45,85,.16),transparent 60%),#07070d;background-repeat:no-repeat}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#6b6b7a}

/* header + hero */
html[data-theme=dark] .hd{background:rgba(7,7,13,.72);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme=dark] .lt{color:#fff}
html[data-theme=dark] .search{background:rgba(255,255,255,.08)}
html[data-theme=dark] .search:focus-within{background:#14141d;box-shadow:0 0 0 4px rgba(79,157,255,.22)}
html[data-theme=dark] .lang:hover{background:rgba(255,255,255,.14)}
html[data-theme=dark] .hero{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
html[data-theme=dark] .hero h1 em{background:linear-gradient(90deg,#4f9dff,#a78bfa 55%,#ff6bd6);-webkit-background-clip:text;background-clip:text}
html[data-theme=dark] .warn{background:rgba(255,107,107,.12)}
html[data-theme=dark] .poster,html[data-theme=dark] .gpost{box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
html[data-theme=dark] .card:hover .poster{box-shadow:0 16px 38px rgba(79,157,255,.3),0 0 0 1px rgba(255,255,255,.16)}
html[data-theme=dark] .gbanner{background:linear-gradient(180deg,rgba(94,92,230,.16),transparent)}
html[data-theme=dark] .nv a.nv-b:not(.on){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
html[data-theme=dark] .nv a.nv-b:not(.on):hover{background:rgba(255,255,255,.1)}

/* order form */
html[data-theme=dark] .step h2 i{background:linear-gradient(135deg,#0a84ff,#6a2ff0);color:#fff}
html[data-theme=dark] .pk:hover .pk-b{background:rgba(255,255,255,.1)}
html[data-theme=dark] .pk input:checked+.pk-b{background:rgba(79,157,255,.13);box-shadow:0 0 0 4px rgba(79,157,255,.2)}
html[data-theme=dark] .art .pk-b{background:var(--bg2);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .art .pk:hover .pk-b{background:var(--bg2);box-shadow:0 12px 30px rgba(79,157,255,.2)}
html[data-theme=dark] .art .pk input:checked+.pk-b{border-color:var(--a);box-shadow:0 0 0 4px rgba(79,157,255,.22)}
html[data-theme=dark] .art .bn,html[data-theme=dark] .ptag{color:#34d27b}
html[data-theme=dark] .fld input{background:#0e0e16;border-color:rgba(255,255,255,.16)}
html[data-theme=dark] .fld input:focus{box-shadow:0 0 0 4px rgba(79,157,255,.25)}
html[data-theme=dark] .pay:hover span{background:rgba(255,255,255,.1)}
html[data-theme=dark] .pay input:checked+span{background:rgba(79,157,255,.13);box-shadow:0 0 0 4px rgba(79,157,255,.2)}
html[data-theme=dark] .pay-note{background:rgba(79,157,255,.1);color:#bcd7ff}
html[data-theme=dark] .bar{background:rgba(7,7,13,.82)}
html[data-theme=dark] .modal{background:rgba(0,0,0,.62)}
html[data-theme=dark] .sheet{background:#14141d;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
html[data-theme=dark] .sheet .row a:hover{background:rgba(255,255,255,.1)}

/* PUBG accounts */
html[data-theme=dark] .aimg{background:linear-gradient(155deg,#1b1b26,#101018)}
html[data-theme=dark] .specs>span{background:rgba(255,255,255,.08)}
html[data-theme=dark] .acard{background:var(--bg2);border-color:rgba(255,255,255,.1)}
html[data-theme=dark] .acta-tg{background:transparent}
html[data-theme=dark] .pick.has-on .pick-b:not(.on){background:#14141d}

/* sell form */
html[data-theme=dark] .sell-f{background:var(--bg2)}
html[data-theme=dark] .sell-btn{border-color:rgba(255,255,255,.28)}
html[data-theme=dark] .sell-pick:hover .sell-btn{background:rgba(255,255,255,.1)}
html[data-theme=dark] .sell-in:focus{background:#0e0e16}
html[data-theme=dark] .sell-tg{background:transparent}

/* payment status */
html[data-theme=dark] .pst{background:rgba(255,159,10,.16);color:#ffb340}
html[data-theme=dark] .pst.s-verifying{background:rgba(10,132,255,.18);color:#6cb4ff}
html[data-theme=dark] .pst.s-paid,html[data-theme=dark] .pst.s-delivered{background:rgba(52,210,123,.16);color:#4ade80}
html[data-theme=dark] .pst.s-cancelled{background:rgba(255,255,255,.08);color:#a0a0ae}
html[data-theme=dark] .pbtn{background:transparent}
html[data-theme=dark] .cf-x:hover{background:rgba(255,255,255,.1)}
html[data-theme=dark] .cf-note{background:rgba(255,204,0,.12);color:#ffd666}

/* chat */
html[data-theme=dark] .sc-win{background:#14141d}
html[data-theme=dark] .sc-hd{background:rgba(20,20,29,.92)}
html[data-theme=dark] .sc-m.a{background:rgba(255,255,255,.09)}
html[data-theme=dark] .sc-form textarea{background:#0e0e16;border-color:rgba(255,255,255,.16)}
html[data-theme=dark] .sc-x:hover{background:rgba(255,255,255,.1)}
html[data-theme=dark] .sc-dot{border-color:#14141d}

/* footer */
html[data-theme=dark] .ft{background:#0a0a11;border-top:1px solid rgba(255,255,255,.06)}
html[data-theme=dark] .sf-btn,html[data-theme=dark] .ft a.sf-btn{background:rgba(255,255,255,.06);border-color:rgba(79,157,255,.4)}
html[data-theme=dark] .sf-btn:hover,html[data-theme=dark] .ft a.sf-btn:hover{background:rgba(79,157,255,.15)}
html[data-theme=dark] .sf-card{background:rgba(255,255,255,.06)}
html[data-theme=dark] .sf-list .sf-card{background:var(--bg2)}
html[data-theme=dark] .sf-gu{background:linear-gradient(135deg,rgba(52,210,123,.15),rgba(79,157,255,.12));border-color:rgba(52,210,123,.3)}
html[data-theme=dark] .sf-sheet{background:#14141d}
html[data-theme=dark] .sf-form input[type=text],html[data-theme=dark] .sf-form textarea{background:#0e0e16;border-color:rgba(255,255,255,.16)}
html[data-theme=dark] .sf-empty{border-color:rgba(255,255,255,.2);background:transparent}
html[data-theme=dark] .sf-pl{box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* info pages */
html[data-theme=dark] .stx-s{background:var(--bg2);border-color:rgba(255,255,255,.1);box-shadow:none}
html[data-theme=dark] .stx-s p,html[data-theme=dark] .stx-s li{color:#c9c9d3}
html[data-theme=dark] .stx-s.ok{background:rgba(52,210,123,.1);border-color:rgba(52,210,123,.28)}
html[data-theme=dark] .stx-s.no{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.28)}
html[data-theme=dark] .stx-s ol li:before{background:rgba(79,157,255,.16);color:#6cb4ff;box-shadow:inset 0 0 0 1.5px rgba(79,157,255,.4)}
html[data-theme=dark] .stx-nav a,html[data-theme=dark] .stx-more a{background:rgba(255,255,255,.08)}
html[data-theme=dark] .stx-c{border:1px solid rgba(255,255,255,.1)}

/* mobile dock */
html[data-theme=dark] .dk{background:rgba(20,20,29,.94);border-color:rgba(255,255,255,.1);box-shadow:0 12px 36px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.08)}
html[data-theme=dark] .dk-i{color:#9a9aa8}
html[data-theme=dark] .dk-i.on{color:#6cb4ff;background:rgba(79,157,255,.18)}
html[data-theme=dark] .dk-i.on .dk-ic svg .k{stroke:#14141d}
html[data-theme=dark] .dk-bd{box-shadow:0 0 0 2px #14141d}
html[data-theme=dark] .dk-sh{background:#14141d;box-shadow:0 -20px 50px rgba(0,0,0,.6)}
html[data-theme=dark] .dk-gr{background:rgba(255,255,255,.2)}
html[data-theme=dark] .dk-cp{background:rgba(255,255,255,.1);box-shadow:none}
html[data-theme=dark][data-lang=en] .dk-lg [data-l=en],html[data-theme=dark][data-lang=my] .dk-lg [data-l=my]{background:rgba(255,255,255,.14);color:var(--tx);box-shadow:none}