/* ============ Tema & token ============ */
:root{
  --pri:#2563eb; --pri2:#0ea5e9; --pri-d:color-mix(in srgb,var(--pri) 82%,#000);
  --pri-l:color-mix(in srgb,var(--pri) 12%,transparent);
  --pri-glow:color-mix(in srgb,var(--pri) 35%,transparent);
  --bg:#f3f6fd; --bg2:#e9effc; --card:#fff; --card2:#f6f8fd; --ink:#0f172a; --muted:#586478; --line:#e3e9f5;
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --r:18px; --r-s:12px; --r-xs:9px;
  --sh:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --glass:rgba(255,255,255,.78);
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:#0b1020; --bg2:#101733; --card:#141b34; --card2:#1a2242; --ink:#e8ecf8; --muted:#97a3c0; --line:#26304f;
  --sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  --glass:rgba(14,20,42,.78);
  --pri-l:color-mix(in srgb,var(--pri) 20%,transparent);
  color-scheme:dark;
}
html[data-accent=violet]{--pri:#7c3aed;--pri2:#a855f7}
html[data-accent=pink]{--pri:#db2777;--pri2:#f43f5e}
html[data-accent=green]{--pri:#047857;--pri2:#10b981}
html[data-accent=orange]{--pri:#c2410c;--pri2:#f97316}
html[data-accent=red]{--pri:#b91c1c;--pri2:#ef4444}
html[data-accent=cyan]{--pri:#0e7490;--pri2:#06b6d4}
html[data-accent=indigo]{--pri:#4f46e5;--pri2:#818cf8}
html[data-accent=sky]{--pri:#0284c7;--pri2:#38bdf8}
html[data-accent=navy]{--pri:#1e3a8a;--pri2:#3b82f6}
html[data-accent=teal]{--pri:#0f766e;--pri2:#2dd4bf}
html[data-accent=ocean]{--pri:#0369a1;--pri2:#14b8a6}
html[data-accent=lime]{--pri:#4d7c0f;--pri2:#84cc16}
html[data-accent=amber]{--pri:#b45309;--pri2:#fbbf24}
html[data-accent=gold]{--pri:#a16207;--pri2:#eab308}
html[data-accent=sunset]{--pri:#e11d48;--pri2:#f59e0b}
html[data-accent=rose]{--pri:#be123c;--pri2:#fb7185}
html[data-accent=fuchsia]{--pri:#a21caf;--pri2:#e879f9}
html[data-accent=purple]{--pri:#6b21a8;--pri2:#a855f7}
html[data-accent=brown]{--pri:#8b5a2b;--pri2:#c08457}
html[data-accent=slate]{--pri:#334155;--pri2:#64748b}
html[data-r=sedang]{--r:12px;--r-s:9px;--r-xs:7px}
html[data-r=tajam]{--r:5px;--r-s:4px;--r-xs:3px}
html[data-theme=dark][data-accent=blue],html[data-theme=dark]:not([data-accent]){--pri:#5b8cff}
html[data-theme=dark][data-accent=violet]{--pri:#9b6bff}
html[data-theme=dark][data-accent=pink]{--pri:#f0529c}
html[data-theme=dark][data-accent=green]{--pri:#20c997}
html[data-theme=dark][data-accent=orange]{--pri:#fb8a3c}
html[data-theme=dark][data-accent=red]{--pri:#f25f5f}
html[data-theme=dark][data-accent=cyan]{--pri:#22c8e6}
html[data-theme=dark][data-accent=indigo]{--pri:#7c83ff}
html[data-theme=dark][data-accent=sky]{--pri:#38b6f0}
html[data-theme=dark][data-accent=navy]{--pri:#6b8cff}
html[data-theme=dark][data-accent=teal]{--pri:#2cc4b0}
html[data-theme=dark][data-accent=ocean]{--pri:#2bb3c0}
html[data-theme=dark][data-accent=lime]{--pri:#8bc34a}
html[data-theme=dark][data-accent=amber]{--pri:#f5a524}
html[data-theme=dark][data-accent=gold]{--pri:#e6b422}
html[data-theme=dark][data-accent=sunset]{--pri:#f06a5a}
html[data-theme=dark][data-accent=rose]{--pri:#f2557a}
html[data-theme=dark][data-accent=fuchsia]{--pri:#d45cf0}
html[data-theme=dark][data-accent=purple]{--pri:#b07cff}
html[data-theme=dark][data-accent=brown]{--pri:#c8935f}
html[data-theme=dark][data-accent=slate]{--pri:#8794ab}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:radial-gradient(900px 380px at 85% -80px,var(--pri-l),transparent 70%);background-repeat:no-repeat;transition:background-color .25s,color .25s}
a{color:var(--pri);text-decoration:none}
img{max-width:100%}
.wrap{max-width:1000px;margin:0 auto;padding:0 14px}
.main{padding-top:16px;padding-bottom:28px;min-height:60vh}
body:has(.bar) .main{padding-bottom:110px}
.muted{color:var(--muted)} .center{text-align:center} .small{font-size:13px}
h1{font-size:22px;margin:0 0 6px;letter-spacing:-.01em} h2{font-size:16px;margin:0 0 12px}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* ============ Header ============ */
.top{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:saturate(1.8) blur(16px);-webkit-backdrop-filter:saturate(1.8) blur(16px);border-radius:0 0 22px 22px;box-shadow:0 8px 24px rgba(15,23,42,.07)}
html[data-theme=dark] .top{box-shadow:0 8px 24px rgba(0,0,0,.4)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:8px;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);min-width:0}
.logo{position:relative;overflow:hidden;width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;display:grid;place-items:center;font-size:18px;flex:none;box-shadow:0 6px 16px var(--pri-glow)}
.logo img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:contain;background:var(--card);z-index:1}
.brand-t{display:flex;min-width:0}
.brand-t b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1.3;padding:1px 2px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:linear-gradient(100deg,var(--ink) 0%,var(--pri) 45%,var(--pri2) 70%,var(--pri) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:nameFlow 7s ease-in-out infinite}
.top-act{display:flex;gap:7px;flex:none}
.ibtn,.menu-btn{width:40px;height:40px;flex:none;padding:0;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.ibtn:hover,.menu-btn:hover,.menu-btn[aria-expanded=true]{border-color:var(--pri);color:var(--pri);background:var(--pri-l)}
.ibtn:active,.menu-btn:active{transform:scale(.9)}
.ibtn svg{width:19px;height:19px}
.ibtn .i-sun,.ibtn .i-moon{display:grid}.ibtn .i-moon{display:none}
html[data-theme=dark] .ibtn .i-sun{display:none} html[data-theme=dark] .ibtn .i-moon{display:grid}
#themeBtn:hover svg{animation:spin .6s ease}
.menu-btn{place-content:center;gap:4px}
.menu-btn span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;transition:width .2s}
.menu-btn span:nth-child(2){width:12px;margin-left:auto}
.menu-btn:hover span:nth-child(2){width:17px}
@keyframes hdrIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes hdrLine{from{background-position:0 0}to{background-position:200% 0}}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
@keyframes logoShine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes nameFlow{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Drawer menu ============ */
.drw{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:90}
.drw[hidden]{display:none}
.drw-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(5,8,20,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .2s ease-out}
.drw-p{position:absolute;top:0;right:0;bottom:0;width:min(86vw,330px);background:var(--card);display:flex;flex-direction:column;border-radius:26px 0 0 26px;box-shadow:-14px 0 40px rgba(0,0,0,.3);padding-bottom:env(safe-area-inset-bottom);animation:slide .26s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.drw-h{display:flex;align-items:center;gap:12px;padding:18px 16px 16px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;position:relative;overflow:hidden;flex:none}
.drw-h::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14);right:-40px;top:-60px}
.drw-h>*{position:relative}
.drw-logo .logo{width:42px;height:42px;background:rgba(255,255,255,.22);box-shadow:none;border:1px solid rgba(255,255,255,.35)}
.drw-ti{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.drw-ti b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:19px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drw-ti small{opacity:.85;font-size:12px}
.drw-x{width:36px;height:36px;border:0;border-radius:50%;background:var(--card2);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .2s}
.drw-h .drw-x{background:rgba(255,255,255,.22);color:#fff}
.drw-x:hover{transform:rotate(90deg)}
.drw-x svg{width:18px;height:18px}
.drw-body{flex:1;overflow-y:auto;padding:12px 12px 8px}
.drw-n{display:flex;flex-direction:column;gap:4px}
.drw-n a,.drw-cs{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-s);color:var(--ink);font-weight:600;font-size:15px;transition:background .15s,color .15s,transform .15s}
.drw-n a{animation:drwItem .35s ease-out both}
.drw-n a:nth-child(2){animation-delay:.05s}
.drw-n a:hover{background:var(--pri-l);transform:translateX(3px)}
.drw-n a.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 8px 18px var(--pri-glow)}
.drw-i{width:38px;height:38px;border-radius:12px;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;flex:none;font-size:16px;transition:.15s}
.drw-n a.on .drw-i{background:rgba(255,255,255,.24);color:#fff}
.drw-l{flex:1;min-width:0}
.drw-ch{font-size:11px;opacity:.45}
.drw-s{padding:16px 6px 8px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.drw-k{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drw-k a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13px;line-height:1.25;animation:drwItem .4s ease-out both;transition:border-color .15s,transform .15s,background .15s}
.drw-k a:nth-child(2n){animation-delay:.05s}.drw-k a:nth-child(3n){animation-delay:.1s}
.drw-k a i{width:30px;height:30px;border-radius:10px;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;font-size:13px}
.drw-k a:hover{border-color:var(--pri);background:var(--pri-l);transform:translateY(-2px)}
.drw-f{flex:none;padding:10px 12px 14px;border-top:1px solid var(--line)}
.drw-cs{width:100%;border:0;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-align:left;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 20px var(--pri-glow);padding:10px 14px 10px 10px}
.drw-cs .drw-i{background:rgba(255,255,255,.24);color:#fff}
.drw-cs .drw-l small{display:block;font-weight:500;font-size:11.5px;opacity:.9}
.drw-cs>i{font-size:13px;transition:transform .2s}
.drw-cs:hover>i{transform:translateX(4px)}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drwItem{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ============ Panel pengaturan tema ============ */
.set{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:95}
.set[hidden]{display:none}
.set-p{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;padding:8px 18px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.3);animation:up .25s ease-out;max-height:88vh;overflow-y:auto}
.set-grip{width:42px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 12px}
.set-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.set-h b{font-size:17px}
.set-g{margin-top:16px}
.set-g>label,.set-lb{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s);padding:4px}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13.5px;padding:9px 6px;border-radius:calc(var(--r-s) - 3px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button svg{width:16px;height:16px}
.seg button.on{background:var(--card);color:var(--pri);box-shadow:0 1px 4px rgba(0,0,0,.14)}
html[data-theme=dark] .seg button.on{background:var(--pri-l)}
.sw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 6px;justify-items:center}
.sw button{width:100%;max-width:38px;height:auto;aspect-ratio:1;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;background:linear-gradient(135deg,var(--c1),var(--c2));display:grid;place-items:center;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sw button svg{width:18px;height:18px;opacity:0;stroke-width:3}
.sw button.on{border-color:var(--card);outline:2px solid var(--c1)}
.sw button.on svg{opacity:1}
.set-reset{margin-top:18px;width:100%}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* ============ Kartu umum ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.narrow{max-width:520px;margin:0 auto}
.empty{text-align:center;color:var(--muted)}
.state{max-width:440px;margin:30px auto;text-align:center}
.state-ik{font-size:46px}

/* ============ Hero + grid ============ */
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:calc(var(--r) + 6px);padding:22px 16px 18px;margin-bottom:14px;box-shadow:0 12px 30px var(--pri-glow)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.hero::before{width:180px;height:180px;right:-50px;top:-70px}
.hero::after{width:120px;height:120px;left:-40px;bottom:-60px}
.hero>*{position:relative}
.hero h1{font-size:23px;line-height:1.2} .hero p{margin:0 0 14px;opacity:.95;font-size:14px}
.hero-search{width:100%;border:0;padding:13px 16px;border-radius:var(--r-s);box-shadow:0 6px 18px rgba(0,0,0,.14);background:var(--card);color:var(--ink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 15px;font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--pri)}
.chip.on{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 4px 12px var(--pri-glow)}

/* 3 kolom di semua ukuran layar */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
@media(min-width:640px){.grid{gap:14px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.game{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);box-shadow:var(--sh);transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0}
.game[hidden]{display:none}
.game:hover{transform:translateY(-3px);border-color:var(--pri);box-shadow:0 12px 28px var(--pri-glow)}
.game:active{transform:scale(.97)}
/* gambar penuh (tidak dipotong): contain + latar blur dari gambar yang sama */
.game-img{position:relative;aspect-ratio:1/1;background:var(--card2);overflow:hidden;display:grid;place-items:center}
.game-bg{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);max-width:none;object-fit:cover;filter:blur(14px) saturate(1.3);opacity:.55;transform:scale(1.1)}
.game-img img.game-main{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.game-fb{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:grid;place-items:center;font-size:38px;font-weight:800;color:var(--pri)}
.game-t{padding:8px 9px 10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.game-t b{font-size:12.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.game-t small{color:var(--muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.from{color:var(--pri);font-weight:700;font-size:11.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:640px){.game-t{padding:11px 13px 13px}.game-t b{font-size:14.5px;min-height:0}.game-t small{font-size:12px}.from{font-size:13.5px}}

/* ============ Form ============ */
.input{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);font:inherit;color:var(--ink)}
.input::placeholder{color:var(--muted)}
.input:focus{outline:3px solid var(--pri-l);border-color:var(--pri)}
select.input{appearance:auto}
.f{margin-bottom:10px} .f label{display:block;font-weight:600;font-size:13px;margin-bottom:5px}
.row{display:grid;gap:10px}
@media(min-width:560px){.row{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.back{display:inline-flex;align-items:center;margin-bottom:10px;font-weight:600;font-size:14px}
.gh{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.gh-img{position:relative;width:92px;height:92px;border-radius:var(--r-s);background:var(--card2);overflow:hidden;flex:none;display:grid;place-items:center;border:1px solid var(--line)}
.gh-img img{width:100%;height:100%;object-fit:contain}
.tag-row{margin:8px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.tag{background:var(--pri-l);color:var(--pri);border-radius:999px;font-size:12px;font-weight:600;padding:3px 10px}
.step{margin-bottom:12px}
.step h2{display:flex;align-items:center;gap:8px}
.n{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;font-size:13px;display:grid;place-items:center}
.nominal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.nominal{grid-template-columns:repeat(3,1fr)}}
.nom{position:relative;cursor:pointer;display:block}
.nom input{position:absolute;opacity:0;top:0;right:0;bottom:0;left:0;inset:0;cursor:pointer}
.nom-b{display:flex;flex-direction:column;gap:3px;height:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--card);transition:.14s}
.nom:hover .nom-b{border-color:var(--pri)}
.nom-n{font-weight:600;font-size:13.5px;line-height:1.3}
.nom-h{color:var(--pri);font-weight:800}
.nom input:checked + .nom-b{border-color:var(--pri);background:var(--pri-l);box-shadow:0 0 0 3px var(--pri-l)}
.nom input:focus-visible + .nom-b{outline:2px solid var(--pri)}

/* ============ Bar bawah ============ */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:30;box-shadow:0 -6px 24px rgba(0,0,0,.08)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.bar-s{display:flex;flex-direction:column;min-width:0}
.bar-s small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
.bar-s b{font-size:18px}

.btn{display:inline-block;border:0;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 70%,var(--pri2)));color:#fff;font:inherit;font-weight:700;padding:10px 18px;border-radius:var(--r-s);cursor:pointer;text-align:center;box-shadow:0 6px 16px var(--pri-glow);transition:transform .1s,filter .15s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.97)}
.btn:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;filter:none}
.btn.big{padding:12px 22px} .btn.sm{padding:6px 12px;font-size:13px;box-shadow:none}
.btn.ghost{background:transparent;color:var(--pri);border:1.5px solid var(--pri);box-shadow:none}
.btn.ghost:hover{background:var(--pri-l)}
.alert{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:var(--r-s);padding:10px 12px;margin:12px 0}
.inline{display:flex;gap:8px;margin:12px 0}

/* ============ Invoice ============ */
.inv{max-width:520px;margin:0 auto;padding:0;overflow:hidden}
.inv>*{padding-left:18px;padding-right:18px}
.inv-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:26px;padding-bottom:18px;background:linear-gradient(180deg,var(--pri-l),transparent)}
.inv-head p{margin:0;max-width:340px;line-height:1.5;font-size:14px}
.inv-ico{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 10px 24px var(--pri-glow);animation:invPop .5s cubic-bezier(.2,.9,.3,1.3) both}
.inv[data-tahap=sukses] .inv-ico{background:linear-gradient(135deg,#16a34a,#4ade80);box-shadow:0 10px 24px rgba(22,163,74,.4)}
.inv[data-tahap=gagal] .inv-ico,.inv[data-tahap=kadaluarsa] .inv-ico{background:linear-gradient(135deg,#dc2626,#f87171);box-shadow:0 10px 24px rgba(220,38,38,.4)}
.inv[data-tahap=proses] .inv-ico{background:linear-gradient(135deg,#d97706,#fbbf24);box-shadow:0 10px 24px rgba(217,119,6,.4)}
@keyframes invPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.badge{display:inline-block;border-radius:999px;padding:5px 16px;font-weight:700;font-size:14px;background:var(--pri-l);color:var(--pri)}
.b-sukses{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.b-gagal,.b-kadaluarsa{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.b-proses{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}
.qrbox{margin:4px 18px 14px;padding:16px 14px;border:1px dashed var(--line);border-radius:var(--r);background:var(--card2)}
.qr-frame{width:fit-content;margin:0 auto 10px;padding:10px;background:#fff;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.12);border:3px solid var(--pri)}
.qr{display:block;width:100%;max-width:240px;margin:0 auto;background:#fff;border-radius:8px}
.qr-note i{color:var(--pri);margin-right:4px}
.countdown{margin:10px 0}
.cd-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:var(--pri-l);color:var(--pri);font-size:13.5px}
.cd-pill b{font-variant-numeric:tabular-nums;font-size:15px}
.qrbox .btn{display:inline-flex;align-items:center;gap:8px}
.inv-total{margin:0 18px 6px;padding:14px 16px;border-radius:var(--r-s);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 10px 24px var(--pri-glow)}
.inv-total span{font-size:13.5px;opacity:.95}
.inv-total b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:24px;font-weight:800}
.detail{margin:8px 0 6px}
.detail>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.detail dt{color:var(--muted);display:flex;align-items:center;gap:9px;font-size:14px;flex:none}
.detail dt i{width:28px;height:28px;border-radius:9px;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;font-size:12px}
.detail dd{margin:0;font-weight:600;text-align:right;word-break:break-word;font-size:14px}
.kode{padding-top:12px;padding-bottom:6px}
.kode-r{display:flex;gap:8px;align-items:center;margin-top:6px}
.kode-r code{flex:1;background:var(--card2);border:1px solid var(--line);padding:10px 12px;border-radius:var(--r-xs);font-size:12px;word-break:break-all}
.kode-r .btn{white-space:nowrap}
.inv-adm{margin:12px 18px 4px;padding:14px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent);display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;animation:pop .25s ease-out}
.inv-adm[hidden]{display:none}
.inv-adm-i{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;display:grid;place-items:center;font-size:18px}
.inv-adm-t{display:flex;flex-direction:column;line-height:1.35}
.inv-adm-t b{font-size:15px}
.inv-adm-t small{color:var(--muted);font-size:12.5px}
.inv-adm .btn{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#dc2626,#f87171);box-shadow:0 8px 18px rgba(220,38,38,.35)}
.inv-foot{display:flex;justify-content:center;gap:18px;padding-top:14px;padding-bottom:18px;font-size:13.5px;font-weight:600}
.inv-foot i{margin-right:5px}
.sub{font-size:14px;margin:18px 0 6px}
.list{list-style:none;margin:0;padding:0}
.list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}

/* ============ Footer ============ */
.foot{position:relative;margin-top:8px;background:linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%);border-radius:28px 28px 0 0;box-shadow:0 -8px 24px rgba(15,23,42,.05);padding:26px 0 14px;color:var(--muted);font-size:13.5px}
.foot-card{display:flex;flex-direction:column;align-items:flex-start}
.foot-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-size:17px;margin-bottom:10px}
.foot-card p{margin:0 0 14px;line-height:1.65;max-width:420px}
.foot-soc{display:flex;gap:6px;flex-wrap:wrap}
.foot-soc a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--pri));color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.14);transition:transform .15s}
@media(min-width:420px){.foot-soc{gap:8px}.foot-soc a{width:34px;height:34px}}
.foot-soc a:hover{transform:translateY(-3px)}
.foot-soc svg{width:16px;height:16px}

.foot-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
@media(min-width:760px){.foot-trust{grid-template-columns:repeat(4,1fr)}}
.foot-trust>div{display:flex;align-items:center;gap:9px;padding:10px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r-s);min-width:0;transition:border-color .15s,transform .15s}
.foot-trust>div:hover{border-color:var(--pri);transform:translateY(-2px)}
.foot-trust i{width:32px;height:32px;border-radius:var(--r-xs);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;display:grid;place-items:center;font-size:13px;flex:none;box-shadow:0 4px 10px var(--pri-glow)}
.foot-trust span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.foot-trust b{color:var(--ink);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot-trust small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(min-width:760px){.foot-links{max-width:560px}}
.foot-col{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.foot-col h4{margin:0 0 6px;color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.foot-col a,.foot-col button{display:inline-flex;align-items:center;gap:8px;padding:5px 0;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;text-align:left;transition:color .15s,transform .15s}
.foot-col a:hover,.foot-col button:hover{color:var(--pri);transform:translateX(3px)}
.foot-col i{width:16px;text-align:center;color:var(--pri);font-size:12.5px;flex:none}
.foot-bot b{color:var(--ink)}
.foot-bot{margin-top:18px;padding:12px 56px 0 0;border-top:1px solid var(--line);text-align:center;font-size:12px}
@media(min-width:760px){.foot-bot{padding-right:0}}

/* legalitas */
.lg{z-index:96}
.lg-b{font-size:14px;line-height:1.65;color:var(--muted)}
.lg-b[hidden]{display:none}
.lg-b p{margin:6px 0 10px;color:var(--ink)}
.lg-b ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.lg-b li::marker{color:var(--pri);font-weight:700}

/* ============ Kembali ke atas ============ */
.btt{position:fixed;right:22px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:39;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--pri);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh);transition:transform .15s,bottom .15s,background .15s;animation:pop .2s ease-out}
.btt[hidden]{display:none}
.btt:hover{background:var(--pri);color:#fff;transform:translateY(-3px)}
.btt-up{bottom:calc(86px + env(safe-area-inset-bottom))}
.btt.has-bar{bottom:calc(88px + env(safe-area-inset-bottom))}
.btt-up.has-bar{bottom:calc(158px + env(safe-area-inset-bottom))}

/* ============ Layar verifikasi ============ */
.vf{display:none}
html.vf-on{overflow:hidden}
html.vf-on .vf{display:grid}
.vf{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:300;background:var(--bg);place-items:center;padding:24px;transition:opacity .4s}
.vf.out{opacity:0;pointer-events:none}
.vf-in{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.vf-logo{width:84px;height:84px;color:var(--pri);animation:vfspin 2.4s cubic-bezier(.6,.1,.3,.9) infinite}
.vf-t{margin:0;font-size:22px;font-weight:400;letter-spacing:.01em;line-height:1.4;color:var(--pri)}
.vf-bar{width:180px;height:4px;border-radius:4px;background:var(--pri-l);overflow:hidden}
.vf-bar i{display:block;height:100%;width:40%;border-radius:4px;background:linear-gradient(90deg,var(--pri),var(--pri2));animation:vfbar 1.2s ease-in-out infinite}
.vf-s{margin:0;font-size:12.5px;color:var(--muted)}
@keyframes vfspin{0%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
@keyframes vfbar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ============ Banner + popup ============ */
.bn{position:relative;margin-bottom:14px;border-radius:calc(var(--r) + 4px);overflow:hidden;background:var(--card2);box-shadow:var(--sh)}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bn-track::-webkit-scrollbar{display:none}
.bn-s{flex:0 0 100%;scroll-snap-align:start}
.bn-s img{display:block;width:100%;height:auto}
.bn-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.bn-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(0,0,0,.35);transition:all .2s}
.bn-dots i.on{background:#fff;width:18px;border-radius:4px}
.pop{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:100;background:rgba(5,8,20,.65);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.pop[hidden]{display:none}
.pop-box{position:relative;max-width:min(92vw,420px);max-height:86vh}
.pop-box img{display:block;max-width:100%;max-height:86vh;border-radius:var(--r);box-shadow:0 10px 40px rgba(0,0,0,.45);background:var(--card)}
.pop-x{position:absolute;top:-12px;right:-12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2}

/* ============ Tombol CS melayang ============ */
.cs{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;transition:bottom .15s}
.cs.cs-kiri{right:auto;left:16px;align-items:flex-start}
.cs.has-bar{bottom:calc(88px + env(safe-area-inset-bottom))}
.cs-fab{position:relative;width:56px;height:56px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px var(--pri-glow);padding:0}
.cs-fab::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:50%;background:var(--pri2);opacity:.5;z-index:-1;animation:ping 2.6s ease-out infinite}
.cs.open .cs-fab::before{animation:none;opacity:0}
.cs-fi{grid-area:1/1;display:grid;place-items:center;transition:opacity .15s,transform .2s}
.cs-fi svg{width:28px;height:28px}
.cs-fi-x{opacity:0;transform:rotate(-80deg) scale(.7)}
.cs.open .cs-fi-cs{opacity:0;transform:rotate(80deg) scale(.7)}
.cs.open .cs-fi-x{opacity:1;transform:none}
.cs-m{width:min(86vw,320px);max-height:min(74vh,560px);display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 50px rgba(0,0,0,.32);transform-origin:bottom right;animation:pop .2s cubic-bezier(.2,.8,.2,1)}
.cs-kiri .cs-m{transform-origin:bottom left}
.cs-m[hidden]{display:none}
.cs-mh{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;position:relative;overflow:hidden;flex:none}
.cs-mh::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.15);right:-30px;top:-50px}
.cs-mh>*{position:relative}
.cs-mh-i{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:18px;flex:none}
.cs-mh-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cs-mh-t b{font-family:"Outfit","Inter",system-ui,sans-serif;font-size:18px;font-weight:800}
.cs-mh-t small{font-size:12px;opacity:.92;display:flex;align-items:center;gap:6px}
.cs-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:csDot 1.8s infinite;flex:none}
.cs-mb{overflow-y:auto;padding:4px 12px 14px}
.cs-g{padding:14px 4px 8px;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cs-list{display:grid;gap:8px}
.cs-l-sosmed{grid-template-columns:repeat(3,1fr)}
.cs-l-komunitas{grid-template-columns:1fr 1fr}
.cs-i{display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;background:var(--card2);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;min-width:0;animation:drwItem .35s ease-out both;transition:border-color .15s,transform .15s,background .15s}
.cs-i:nth-child(2){animation-delay:.05s}.cs-i:nth-child(3){animation-delay:.1s}.cs-i:nth-child(4){animation-delay:.15s}
.cs-i:hover{border-color:var(--pri);background:var(--pri-l);transform:translateY(-2px)}
.cs-i:active{transform:scale(.97)}
.cs-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 5px 12px rgba(0,0,0,.18)}
.cs-ic svg{width:21px;height:21px}
.cs-l{flex:1;min-width:0;line-height:1.3}
.cs-l small{display:block;color:var(--muted);font-weight:500;font-size:11.5px;margin-top:1px}
.cs-ch{display:grid;place-items:center;color:var(--muted);transition:transform .15s}
.cs-ch svg{width:15px;height:15px}
.cs-i:hover .cs-ch{transform:translateX(3px);color:var(--pri)}
/* sosial media: ubin 3 kolom, ikon di atas */
.cs-l-sosmed .cs-i{flex-direction:column;gap:7px;padding:12px 4px 10px;text-align:center;font-size:12px}
.cs-l-sosmed .cs-ch{display:none}
/* grup & channel: 2 kolom ringkas */
.cs-l-komunitas .cs-i{flex-direction:column;align-items:flex-start;gap:8px;padding:11px;font-size:12.5px}
.cs-l-komunitas .cs-ch{display:none}
@keyframes csDot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%,100%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ============ Cek pesanan ============ */
.cek{display:flex;flex-direction:column;gap:14px}
.cek-hero{display:flex;align-items:center;gap:14px;padding:18px 16px;border-radius:calc(var(--r) + 4px);background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;position:relative;overflow:hidden;box-shadow:0 12px 28px var(--pri-glow)}
.cek-hero::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);right:-40px;top:-60px}
.cek-hero>*{position:relative}
.cek-ic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;font-size:22px;flex:none}
.cek-hero h1{margin:0 0 2px;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:24px;font-weight:800}
.cek-hero p{margin:0;font-size:13.5px;opacity:.95;line-height:1.45}
.cek-card{padding:16px}
.cek-lb{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.cek-row{display:flex;gap:8px}
.cek-in{position:relative;flex:1;min-width:0}
.cek-in>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}
.cek-in .input{padding-left:38px;height:100%;min-height:48px}
.cek-row .btn{display:inline-flex;align-items:center;gap:8px;padding:0 18px;min-height:48px}
.cek-hint{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.cek-hint i{color:var(--pri);margin-right:3px}
.cek-card .alert{margin:12px 0 0}
.cek-rh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cek-rh h2{margin:0;display:flex;align-items:center;gap:8px;font-size:15px}
.cek-rh h2 i{color:var(--pri)}
.cek-clear{border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:var(--r-xs)}
.cek-clear:hover{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.cek-rs{margin:2px 0 10px}
.rw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rw-list li{padding:0;border:0}
.rw{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);color:var(--ink);transition:border-color .15s,transform .15s,background .15s}
.rw:hover{border-color:var(--pri);background:var(--pri-l);transform:translateX(3px)}
.rw-i{width:38px;height:38px;border-radius:12px;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;font-size:15px;flex:none}
.rw-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.rw-t b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-t small{color:var(--muted);font-size:12px}
.rw-ch{font-size:11px;color:var(--muted)}

/* ============ Invoice: tahap, tiket, unduh QR ============ */
.stp{list-style:none;margin:0;display:flex;padding:18px 24px 0;counter-reset:s}
.stp li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;color:var(--muted)}
.stp li::before{content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;border-radius:3px;background:var(--line);z-index:0}
.stp li:first-child::before{display:none}
.stp-d{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:var(--card2);border:2px solid var(--line);transition:.25s}
.stp small{font-size:11.5px;font-weight:600}
.stp li.on,.stp li.done{color:var(--ink)}
.stp li.on .stp-d{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
.stp li.done .stp-d{background:var(--ok);border-color:transparent;color:#fff}
.stp li.done::before,.stp li.on::before{background:var(--pri)}
.stp li.err .stp-d{background:var(--bad);border-color:transparent;color:#fff}
.stp li.err{color:var(--bad)} .stp li.err::before{background:var(--bad)}
.cd-pill.low{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);animation:lowBlink 1s ease-in-out infinite}
@keyframes lowBlink{50%{opacity:.55}}
.tkt{position:relative;height:22px;margin:10px 0 4px;padding:0!important}
.tkt::before{content:"";position:absolute;left:22px;right:22px;top:50%;border-top:2px dashed var(--line)}
.tkt::after{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:radial-gradient(circle 11px at 0 50%,var(--bg) 98%,transparent) left center/11px 22px no-repeat,radial-gradient(circle 11px at 100% 50%,var(--bg) 98%,transparent) right center/11px 22px no-repeat;pointer-events:none}
.qrbox{border-style:solid;background:var(--card2)}
#unduhQr{display:inline-flex;align-items:center;gap:8px;margin-top:2px}

.inv[data-tahap=bayar] .s1{color:var(--ink)}
.inv[data-tahap=bayar] .s1 .stp-d{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
.inv[data-tahap=proses] .s1 .stp-d,.inv[data-tahap=sukses] .s1 .stp-d,.inv[data-tahap=sukses] .s2 .stp-d,.inv[data-tahap=gagal] .s1 .stp-d{background:var(--ok);border-color:transparent;color:#fff}
.inv[data-tahap=proses] .s2 .stp-d{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 6px 14px var(--pri-glow)}
.inv[data-tahap=sukses] .s3 .stp-d{background:var(--ok);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(22,163,74,.4)}
.inv[data-tahap=gagal] .s2 .stp-d,.inv[data-tahap=kadaluarsa] .s1 .stp-d{background:var(--bad);border-color:transparent;color:#fff}
.inv[data-tahap=proses] .s1::before{background:var(--pri)}
.inv[data-tahap=proses] .s2::before,.inv[data-tahap=sukses] .s2::before,.inv[data-tahap=sukses] .s3::before,.inv[data-tahap=gagal] .s2::before{background:var(--ok)}
.inv[data-tahap=gagal] .s2::before{background:var(--ok)}
.inv[data-tahap=sukses] .s1,.inv[data-tahap=sukses] .s2,.inv[data-tahap=sukses] .s3,.inv[data-tahap=proses] .s1,.inv[data-tahap=proses] .s2,.inv[data-tahap=gagal] .s1{color:var(--ink)}
.inv[data-tahap=gagal] .s2,.inv[data-tahap=kadaluarsa] .s1{color:var(--bad)}

/* ============ Perbaikan kontras ============ */
.inv-head{background:none;padding-top:18px}
.inv-head p{color:color-mix(in srgb,var(--ink) 72%,transparent)}
.inv-total{background:linear-gradient(135deg,var(--pri-d),var(--pri))}
.stp li{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.stp li::before{background:color-mix(in srgb,var(--ink) 16%,var(--line))}
.stp-d{background:var(--card);border:2px solid color-mix(in srgb,var(--ink) 22%,var(--line));color:color-mix(in srgb,var(--ink) 55%,transparent)}
.stp small{font-weight:700}
.badge{background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-d);border:1px solid color-mix(in srgb,var(--pri) 30%,transparent)}
.b-sukses{background:color-mix(in srgb,var(--ok) 15%,transparent);color:#15803d;border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.b-gagal,.b-kadaluarsa{background:color-mix(in srgb,var(--bad) 13%,transparent);color:#b91c1c;border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.b-proses{background:color-mix(in srgb,var(--warn) 15%,transparent);color:#b45309;border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
html[data-theme=dark] .badge{color:var(--pri)}
html[data-theme=dark] .b-sukses{color:#4ade80} html[data-theme=dark] .b-gagal,html[data-theme=dark] .b-kadaluarsa{color:#f87171} html[data-theme=dark] .b-proses{color:#fbbf24}
.cd-pill{background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-d);border:1px solid color-mix(in srgb,var(--pri) 30%,transparent);font-weight:600}
html[data-theme=dark] .cd-pill{color:var(--pri)}
.cd-pill.low{background:var(--bad);border-color:var(--bad);color:#fff;animation:lowPulse 1.2s ease-in-out infinite}
@keyframes lowPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)}}
.qrbox{border:1px solid color-mix(in srgb,var(--ink) 14%,var(--line))}
.detail dt{color:color-mix(in srgb,var(--ink) 65%,transparent)}
.detail dt i{background:color-mix(in srgb,var(--pri) 14%,transparent)}
.kode small.muted{color:color-mix(in srgb,var(--ink) 65%,transparent)}
.btn.ghost{color:var(--pri-d)} html[data-theme=dark] .btn.ghost{color:var(--pri)}

/* ============ Invoice: hero seperti kartu Cek pesanan ============ */
.invw{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.invw-hero{--hc:var(--pri-d);position:relative;overflow:hidden;padding:18px 16px 16px;border-radius:calc(var(--r) + 4px);color:#fff;background:linear-gradient(135deg,var(--pri-d),var(--pri) 55%,var(--pri2));box-shadow:0 12px 28px var(--pri-glow)}
.invw[data-tahap=sukses] .invw-hero{--hc:#15803d;background:linear-gradient(135deg,#166534,#16a34a 55%,#22c55e);box-shadow:0 12px 28px rgba(22,163,74,.35)}
.invw[data-tahap=gagal] .invw-hero,.invw[data-tahap=kadaluarsa] .invw-hero{--hc:#b91c1c;background:linear-gradient(135deg,#991b1b,#dc2626 55%,#ef4444);box-shadow:0 12px 28px rgba(220,38,38,.35)}
.invw[data-tahap=proses] .invw-hero{--hc:#b45309;background:linear-gradient(135deg,#92400e,#d97706 55%,#f59e0b);box-shadow:0 12px 28px rgba(217,119,6,.35)}
.invw-hero::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.13);right:-45px;top:-65px}
.invw-hero>*{position:relative}
.invw-top{display:flex;align-items:center;gap:14px}
.invw-ic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-size:22px;flex:none;animation:invPop .5s cubic-bezier(.2,.9,.3,1.3) both}
.invw-tx{min-width:0}
.invw-tx h1{margin:0 0 2px;font-family:"Outfit","Inter",system-ui,sans-serif;font-size:23px;font-weight:800;line-height:1.2}
.invw-tx p{margin:0;font-size:13.5px;line-height:1.45;opacity:.96}
/* tahap di dalam hero */
.invw-hero .stp{padding:18px 8px 0}
.invw-hero .stp li{color:rgba(255,255,255,.8)}
.invw-hero .stp li::before{background:rgba(255,255,255,.35)}
.invw-hero .stp-d{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);color:#fff;box-shadow:none}
.invw-hero .stp small{color:inherit;font-weight:700}
/* aktif / selesai = lingkaran putih */
.invw[data-tahap=bayar] .s1 .stp-d,
.invw[data-tahap=proses] .s1 .stp-d,.invw[data-tahap=proses] .s2 .stp-d,
.invw[data-tahap=sukses] .stp-d,
.invw[data-tahap=gagal] .s1 .stp-d,.invw[data-tahap=gagal] .s2 .stp-d,
.invw[data-tahap=kadaluarsa] .s1 .stp-d{background:#fff;border-color:#fff;color:var(--hc)}
.invw[data-tahap=bayar] .s1 .stp-d,.invw[data-tahap=proses] .s2 .stp-d,.invw[data-tahap=sukses] .s3 .stp-d,.invw[data-tahap=gagal] .s2 .stp-d,.invw[data-tahap=kadaluarsa] .s1 .stp-d{box-shadow:0 0 0 5px rgba(255,255,255,.28)}
.invw[data-tahap=bayar] .s1,.invw[data-tahap=proses] .s1,.invw[data-tahap=proses] .s2,.invw[data-tahap=sukses] li,.invw[data-tahap=gagal] .s1,.invw[data-tahap=gagal] .s2,.invw[data-tahap=kadaluarsa] .s1{color:#fff}
.invw[data-tahap=proses] .s2::before,.invw[data-tahap=sukses] .s2::before,.invw[data-tahap=sukses] .s3::before,.invw[data-tahap=gagal] .s2::before{background:#fff}
.invw[data-tahap=gagal] .s2 .stp-d i::before{content:"\f00d"}
.invw[data-tahap=kadaluarsa] .s1 .stp-d i::before{content:"\f254"}
/* kartu isi */
.inv-card{padding-top:16px;margin:0}
.qrbox[hidden]+.tkt{display:none}

/* garis tahap berhenti di tepi lingkaran (tidak masuk ke dalamnya) */
.stp li::before{right:calc(50% + 24px);width:calc(100% - 48px)}
/* judul web di footer sama seperti header */
.foot-brand{gap:11px;margin-bottom:12px}
.foot-brand .logo{animation:none}

.set-hint{display:block;margin-top:2px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.sw-root button.on{border-color:var(--card)}
.sw-root button.on{outline-color:var(--pri)}


.set-hint{display:block;margin-top:2px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.sw-root button.on{border-color:var(--card)}
.sw-root button.on{outline-color:var(--pri)}


.set-hint{display:block;margin-top:2px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.sw-root button.on{border-color:var(--card)}
.sw-root button.on{outline-color:var(--pri)}

.sw-root button[data-v=default]{color:#334155;border-color:var(--line)}
.sw-root{grid-template-columns:repeat(7,minmax(0,1fr))}
/* ===== Warna root: seluruh tema (latar + semua kartu) berwarna cerah; selalu mode terang ===== */
html[data-root=blue][data-theme]{--bg:#9dbbfb;--bg2:#85aafa;--card:#ccdbfd;--card2:#b3cafc;--ink:#091734;--muted:#2b3d64;--line:#5787ef;--glass:#bacffcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #0844c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=violet][data-theme]{--bg:#bf9dfb;--bg2:#b085fa;--card:#deccfd;--card2:#ceb3fc;--ink:#190934;--muted:#402b64;--line:#8f57ef;--glass:#d3bafcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #4d08c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=pink][data-theme]{--bg:#fb9dcc;--bg2:#fa85bf;--card:#fdcce4;--card2:#fcb3d7;--ink:#34091f;--muted:#642b47;--line:#ef57a3;--glass:#fcbadbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c4086640;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=red][data-theme]{--bg:#fb9d9d;--bg2:#fa8585;--card:#fdcccc;--card2:#fcb3b3;--ink:#340909;--muted:#642b2b;--line:#ef5757;--glass:#fcbabad9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c4080840;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=orange][data-theme]{--bg:#fbc39d;--bg2:#fab485;--card:#fddfcc;--card2:#fcd0b3;--ink:#341a09;--muted:#64422b;--line:#ef9457;--glass:#fcd5bad9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c4530840;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=green][data-theme]{--bg:#9dfbcc;--bg2:#85fabf;--card:#ccfde4;--card2:#b3fcd7;--ink:#09341f;--muted:#2b6447;--line:#57efa3;--glass:#bafcdbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #08c46640;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=cyan][data-theme]{--bg:#9debfb;--bg2:#85e6fa;--card:#ccf5fd;--card2:#b3f0fc;--ink:#092d34;--muted:#2b5a64;--line:#57d6ef;--glass:#baf1fcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #08a5c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=indigo][data-theme]{--bg:#a29dfb;--bg2:#8a85fa;--card:#ceccfd;--card2:#b7b3fc;--ink:#0b0934;--muted:#2e2b64;--line:#5f57ef;--glass:#bebafcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #1208c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=sky][data-theme]{--bg:#9ddcfb;--bg2:#85d3fa;--card:#ccecfd;--card2:#b3e4fc;--ink:#092634;--muted:#2b5164;--line:#57bdef;--glass:#bae6fcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #0885c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=navy][data-theme]{--bg:#9eb5fa;--bg2:#86a3f9;--card:#ccd8fc;--card2:#b4c6fb;--ink:#091434;--muted:#2b3964;--line:#597eee;--glass:#bbcbfbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #0a38c240;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=teal][data-theme]{--bg:#9dfbf3;--bg2:#85faf0;--card:#ccfdf9;--card2:#b3fcf6;--ink:#093430;--muted:#2b645f;--line:#57efe3;--glass:#bafcf7d9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #08c4b440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=ocean][data-theme]{--bg:#9de3fb;--bg2:#85ddfa;--card:#ccf1fd;--card2:#b3eafc;--ink:#092934;--muted:#2b5664;--line:#57c9ef;--glass:#baecfcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #0895c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=lime][data-theme]{--bg:#d3f5a3;--bg2:#c8f28c;--card:#e8facf;--card2:#ddf7b8;--ink:#223409;--muted:#4c642b;--line:#aee561;--glass:#e0f8bfd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #74b81440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=amber][data-theme]{--bg:#fcdf9c;--bg2:#fcd783;--card:#feeecb;--card2:#fde6b2;--ink:#342709;--muted:#64532b;--line:#f2c355;--glass:#fde9b9d9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c78d0540;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=gold][data-theme]{--bg:#fae89e;--bg2:#f9e286;--card:#fcf3cc;--card2:#fbedb4;--ink:#342b09;--muted:#64592b;--line:#eed059;--glass:#fbefbbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c29d0a40;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=sunset][data-theme]{--bg:#fb9dad;--bg2:#fa8598;--card:#fdccd4;--card2:#fcb3bf;--ink:#340910;--muted:#642b34;--line:#ef5771;--glass:#fcbac5d9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c4082740;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=rose][data-theme]{--bg:#fb9db5;--bg2:#fa85a2;--card:#fdccd8;--card2:#fcb3c5;--ink:#340914;--muted:#642b39;--line:#ef577d;--glass:#fcbacbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #c4083740;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=fuchsia][data-theme]{--bg:#f39dfb;--bg2:#f085fa;--card:#f9ccfd;--card2:#f6b3fc;--ink:#300934;--muted:#5f2b64;--line:#e357ef;--glass:#f7bafcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #b408c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=purple][data-theme]{--bg:#d49dfb;--bg2:#c985fa;--card:#e8ccfd;--card2:#deb3fc;--ink:#220934;--muted:#4c2b64;--line:#b057ef;--glass:#e1bafcd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #7608c440;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=brown][data-theme]{--bg:#e3cab5;--bg2:#dcbda3;--card:#f0e3d8;--card2:#e9d6c6;--ink:#341d09;--muted:#64452b;--line:#c8a17e;--glass:#ebdacbd9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #94633840;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=slate][data-theme]{--bg:#bac9de;--bg2:#a9bcd6;--card:#dbe3ee;--card2:#cad5e5;--ink:#091b34;--muted:#2b4364;--line:#869ec0;--glass:#cfd9e8d9;--sh:0 1px 2px rgba(15,23,42,.05),0 8px 22px #42608a40;--pri-l:color-mix(in srgb,var(--pri) 16%,transparent);color-scheme:light}
html[data-root=amoled][data-theme]{--bg:#000000;--bg2:#060607;--card:#0f0f11;--card2:#18181b;--ink:#f4f4f5;--muted:#a1a1aa;--line:#27272a;--glass:#000000d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
/* ===== Warna root gelap (dk-*): selalu mode gelap ===== */
html[data-root=dk-blue][data-theme]{--bg:#0a1938;--bg2:#0e224e;--card:#132f6c;--card2:#183d8b;--ink:#edf2fd;--muted:#b5c4e3;--line:#2852af;--glass:#0c1e45d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-violet][data-theme]{--bg:#1c0d36;--bg2:#26114a;--card:#351867;--card2:#441f84;--ink:#f3edfd;--muted:#c6b5e3;--line:#5b2fa7;--glass:#221042d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-pink][data-theme]{--bg:#360d21;--bg2:#4a112e;--card:#671840;--card2:#841f52;--ink:#fdedf5;--muted:#e3b5cc;--line:#a72f6b;--glass:#421029d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-red][data-theme]{--bg:#360d0d;--bg2:#4a1111;--card:#671818;--card2:#841f1f;--ink:#fdeded;--muted:#e3b5b5;--line:#a72f2f;--glass:#421010d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-orange][data-theme]{--bg:#381d0a;--bg2:#4e270e;--card:#6c3713;--card2:#8b4618;--ink:#fdf3ed;--muted:#e3c7b5;--line:#af5e28;--glass:#45230cd9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-green][data-theme]{--bg:#0d3628;--bg2:#114a37;--card:#18674d;--card2:#1f8462;--ink:#edfdf8;--muted:#b5e3d4;--line:#2fa77f;--glass:#104231d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-cyan][data-theme]{--bg:#0a3138;--bg2:#0e434e;--card:#135d6c;--card2:#18788b;--ink:#edfafd;--muted:#b5dbe3;--line:#2898af;--glass:#0c3c45d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-indigo][data-theme]{--bg:#0f0d36;--bg2:#14114a;--card:#1c1867;--card2:#241f84;--ink:#ededfd;--muted:#b7b5e3;--line:#352fa7;--glass:#121042d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-sky][data-theme]{--bg:#0a2938;--bg2:#0e394e;--card:#134f6c;--card2:#18658b;--ink:#edf8fd;--muted:#b5d4e3;--line:#2882af;--glass:#0c3245d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-navy][data-theme]{--bg:#07143b;--bg2:#0a1c52;--card:#0e2771;--card2:#123291;--ink:#edf1fd;--muted:#b5c1e3;--line:#2046b6;--glass:#091949d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-teal][data-theme]{--bg:#0d3632;--bg2:#114a46;--card:#186761;--card2:#1f847c;--ink:#edfdfc;--muted:#b5e3df;--line:#2fa79d;--glass:#10423ed9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-ocean][data-theme]{--bg:#0a2d38;--bg2:#0e3e4e;--card:#13566c;--card2:#186e8b;--ink:#edf9fd;--muted:#b5d7e3;--line:#288daf;--glass:#0c3745d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-lime][data-theme]{--bg:#24330f;--bg2:#324715;--card:#46631d;--card2:#597e25;--ink:#f6fded;--muted:#d0e3b5;--line:#74a036;--glass:#2d3f12d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-amber][data-theme]{--bg:#38270a;--bg2:#4e360e;--card:#6c4c13;--card2:#8b6118;--ink:#fdf7ed;--muted:#e3d2b5;--line:#af7d28;--glass:#45300cd9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-gold][data-theme]{--bg:#372c0c;--bg2:#4c3d10;--card:#695416;--card2:#876c1d;--ink:#fdf9ed;--muted:#e3d7b5;--line:#aa8a2c;--glass:#43360ed9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-sunset][data-theme]{--bg:#380b12;--bg2:#4d0f19;--card:#6b1423;--card2:#891a2d;--ink:#fdedef;--muted:#e3b5bd;--line:#ad2a3f;--glass:#450d16d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-rose][data-theme]{--bg:#360d17;--bg2:#4a1120;--card:#67182c;--card2:#841f38;--ink:#fdedf1;--muted:#e3b5c1;--line:#a72f4d;--glass:#42101cd9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-fuchsia][data-theme]{--bg:#320d36;--bg2:#46114a;--card:#611867;--card2:#7c1f84;--ink:#fcedfd;--muted:#dfb5e3;--line:#9d2fa7;--glass:#3e1042d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-purple][data-theme]{--bg:#250d36;--bg2:#33114a;--card:#461867;--card2:#5a1f84;--ink:#f6edfd;--muted:#d0b5e3;--line:#752fa7;--glass:#2d1042d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-brown][data-theme]{--bg:#2e2015;--bg2:#3f2d1c;--card:#583e28;--card2:#715033;--ink:#fdf4ed;--muted:#e3cab5;--line:#906946;--glass:#382819d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
html[data-root=dk-slate][data-theme]{--bg:#18202a;--bg2:#212c3b;--card:#2e3d52;--card2:#3b4e68;--ink:#edf3fd;--muted:#b5c8e3;--line:#506786;--glass:#1d2734d9;--sh:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--pri-l:color-mix(in srgb,var(--pri) 26%,transparent);color-scheme:dark}
.sw-root[id=swRootD]{margin-top:0}
.cu-g{display:grid;gap:10px}
.cu-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink)}
.cu-x{margin-top:10px;width:100%;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:var(--r-s);padding:9px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* pemilih warna sendiri */
.cp-o{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,12,24,.5)}
.cp-s{width:100%;max-width:440px;max-height:92vh;overflow:auto;padding:16px 18px calc(18px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--card,#fff);color:var(--ink,#0f172a);box-shadow:0 -12px 40px rgba(0,0,0,.3)}
.cp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cp-h b{font-size:16px}
.cp-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--card2,#eef2fb);color:inherit;font-size:22px;line-height:1;cursor:pointer}
.cp-sv{position:relative;height:180px;border-radius:14px;touch-action:none;cursor:crosshair}
.cp-hue{position:relative;height:18px;margin:14px 2px 0;border-radius:9px;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cp-th{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.4);pointer-events:none}
.cp-hue .cp-th{top:50%}
.cp-row{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.cp-pv{flex:none;width:52px;height:46px;border-radius:12px;border:1px solid var(--line,#d7deee);box-shadow:inset 0 0 0 2px var(--card,#fff)}
.cp-hl{flex:1;font-size:12px;font-weight:700;color:var(--muted,#586478);text-transform:uppercase;letter-spacing:.04em}
.cp-hex{display:block;width:100%;margin-top:5px;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line,#d7deee);background:var(--card2,#f6f8fd);color:var(--ink,#0f172a);font:700 16px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:lowercase;box-sizing:border-box}
.cp-hex:focus{outline:0;border-color:var(--pri,#2563eb)}
.cp-pre{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:14px}
.cp-p{aspect-ratio:1;border-radius:50%;border:2px solid var(--card,#fff);box-shadow:0 0 0 1px var(--line,#d7deee);cursor:pointer;padding:0}
.cp-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cp-bt{height:46px;border-radius:13px;border:1.5px solid var(--line,#d7deee);background:none;color:inherit;font:700 15px inherit;cursor:pointer}
.cp-ok{border-color:transparent;color:#fff;background:linear-gradient(to right,var(--pri,#2563eb),var(--pri2,#0ea5e9))}
.cu-b{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 6px;border-radius:11px;border:1px solid var(--line,#d7deee);background:var(--card,#fff);color:var(--ink,#0f172a);cursor:pointer;font:inherit}
.cu-b .cu-sw{width:26px;height:26px;border-radius:8px;box-shadow:0 0 0 1px var(--line,#d7deee) inset}
.cu-b code{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:lowercase}

/* tema custom: gradien latar/card & gambar latar */
html[data-bgx] body{background:var(--bgx) fixed}
html[data-bgi] body{background:var(--bgi) center/cover fixed no-repeat,var(--bg)}
html[data-cardx] .card,html[data-cardx] .game,html[data-cardx] .stp-d,html[data-cardx] .drw-p,html[data-cardx] .set-p{background:var(--cardx)}
html[data-bgi] body::after{display:none}