:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#f3f1ec;--card:#fff;--tx:#1f1d1a;--mut:#6d675d;--pri:#1a73c8;--bd:#e2ded5;--ok:#1e9e5a;--warn:#d99a00;--bad:#d64545}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10161e;--card:#1a222d;--tx:#e8edf3;--mut:#8f9bab;--pri:#5aa9f0;--bd:#2a3442}}
:root[data-theme="dark"]{--bg:#10161e;--card:#1a222d;--tx:#e8edf3;--mut:#8f9bab;--pri:#5aa9f0;--bd:#2a3442}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.5 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
#app{max-width:1120px;margin:0 auto;padding:14px}
h1{font-size:22px;margin:4px 0}h2{font-size:16px;margin:0 0 8px}p{margin:4px 0}
.mut{color:var(--mut);font-size:13px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin:10px 0}
label{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
input,select{width:100%;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}
.b{display:inline-block;border:0;border-radius:8px;background:var(--pri);color:#fff;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;margin:8px 6px 0 0}
.b.g{background:transparent;color:var(--pri);border:1px solid var(--pri)}
.tabs{display:flex;gap:6px;margin:10px 0}.tabs button{flex:1;padding:9px 4px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer}
.tabs button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.tl{margin:8px 0}.st{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--mut)}.st i{width:16px;height:16px;border-radius:50%;border:2px solid var(--bd)}
.st.on{color:var(--tx);font-weight:600}.st.on i{background:var(--ok);border-color:var(--ok)}
.lnk{color:var(--pri);text-align:center;margin-top:24px;cursor:pointer;font-size:13px}
.ban{background:var(--pri);color:#fff;border-radius:14px;padding:10px 14px;margin:8px 0;font-size:13px;line-height:1.45}.ban b{font-size:13px}.ban .b{background:#fff;color:var(--pri);padding:6px 14px;font-size:12.5px;margin:6px 8px 0 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:20px;opacity:0;transition:opacity .2s;pointer-events:none;font-size:14px}
.tabs button{font-size:12.5px;padding:9px 1px}
.pg{animation:in .45s ease}@keyframes in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero{text-align:center;padding:8px 0}.hero p{margin:4px 0}.cd{color:var(--pri);font-weight:600;min-height:22px}
.bar{height:10px;background:var(--bd);border-radius:6px;overflow:hidden;margin:14px 0 6px}.bar i{display:block;height:100%;background:var(--ok);border-radius:6px;animation:gr 1.2s ease}@keyframes gr{from{width:0}}
.steps{display:flex;justify-content:space-between;font-size:12px;color:var(--mut)}.steps .on{color:var(--tx);font-weight:600}
.spin{animation:sp 1.4s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.pop{transform-origin:60px 60px;animation:pop .6s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pg,.bar i,.spin,.pop{animation:none}}
.foot{text-align:center;margin-top:18px}.foot p{margin:3px 0;font-size:14px}
#app{padding-bottom:90px}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25a35a;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:10;animation:pls 2.4s ease-in-out infinite}
@keyframes pls{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 0 rgba(37,163,90,.5)}50%{box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 12px rgba(37,163,90,0)}}
@media (prefers-reduced-motion:reduce){.fab{animation:none}}
.ft{margin-top:30px;padding:22px 8px 6px;border-top:1px solid var(--bd);text-align:center}
.mono{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--pri),#6cc1ff);color:#fff;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.fn{font-weight:700;letter-spacing:.2px}.fo{font-size:12px;color:var(--mut);margin-top:2px}
.fi{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:7px;align-items:center;font-size:13px;color:var(--mut)}
.fi li{display:flex;gap:7px;align-items:center}
.fi svg{width:15px;height:15px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fcp{margin-top:16px;font-size:11px;color:var(--mut);opacity:.8}
textarea{width:100%;min-height:96px;padding:10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font:inherit}
.ann{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--pri) 14%,transparent);border:1px solid color-mix(in srgb,var(--pri) 35%,transparent);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:14px;animation:in .5s ease}
.ann svg{flex:none;width:20px;height:20px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg{width:84px;height:84px;border-radius:20px;object-fit:contain;background:#fff;display:block;margin:0 auto 8px;box-shadow:0 4px 14px rgba(0,0,0,.18)}.lg.lgs{width:56px;height:56px;border-radius:14px;margin-bottom:10px;box-shadow:none}
.cfw{position:relative;height:0;width:100%}.cf{position:absolute;top:-6px;width:8px;height:12px;border-radius:2px;opacity:0;animation:fall 2.6s ease-in 1}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(240px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.cf{display:none}.ann{animation:none}}
#lst,.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:0 14px;align-items:start}
.gr.two{grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr))}
.full,#lst>.card.mut{grid-column:1/-1}
#qs{margin-bottom:10px}.tabs{max-width:760px}
.fm{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:0 18px}.fm .full{grid-column:1/-1}.fmw{max-width:860px}
.pg{max-width:560px;margin:0 auto}
@media (min-width:700px){
 body{font-size:16px}.b{padding:11px 18px}input,select,textarea{padding:12px;font-size:16px}
 .tabs button{font-size:14px;padding:12px 4px}.card{padding:18px}#app{padding:22px 24px 100px}
 .pg.wd{max-width:640px}.hero svg{width:150px;height:150px}.hero h1{font-size:28px}#qs{max-width:460px}
}
@media (min-width:900px){.pg.wd{max-width:980px}.pg.wd .cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}}
@media (max-height:500px){.hero svg{width:80px;height:80px}}

.fab{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
body:has(.nv) #app{padding-bottom:120px}
.nv{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;justify-content:space-around;max-width:520px;margin:0 auto;padding:6px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--bd);border-radius:24px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.nv button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--mut);padding:8px 2px;border-radius:18px;font:inherit;font-size:11.5px;cursor:pointer;transition:background .25s,color .25s}
.nv svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv button.on{background:color-mix(in srgb,var(--pri) 16%,transparent);color:var(--pri);font-weight:700}
.top{display:flex;align-items:center;gap:12px;margin:2px 0 6px}.top .mono{margin:0;flex:none}.top .lg{margin:0;width:48px;height:48px;flex:none}.top small{color:var(--mut);display:block;font-size:12.5px}.top b{font-size:19px}
.carw{margin:12px 0 18px}.car{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;scrollbar-width:none;box-shadow:0 6px 20px rgba(0,0,0,.14)}.car::-webkit-scrollbar{display:none}
.sl{flex:0 0 100%;scroll-snap-align:center}.sl img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.dt{display:flex;justify-content:center;gap:6px;margin-top:8px}.dt i{width:7px;height:7px;border-radius:50%;background:var(--bd);transition:all .3s}.dt i.on{width:20px;border-radius:4px;background:var(--pri)}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:6px}
.mi{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;text-decoration:none;color:var(--tx);background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:16px;font:inherit;cursor:pointer;transition:transform .15s}.mi:active{transform:scale(.97)}
.mi .ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pri) 14%,transparent)}
.mi svg{width:24px;height:24px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mi b{font-size:15px;display:block}.mi small{color:var(--mut);font-size:12.5px;line-height:1.3}
.mi.big{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#6cc1ff));color:#fff;border:0;padding:18px;box-shadow:0 10px 24px color-mix(in srgb,var(--pri) 38%,transparent)}
.mi.big .ic{background:rgba(255,255,255,.22);width:52px;height:52px}.mi.big svg{stroke:#fff;width:28px;height:28px}.mi.big small{color:rgba(255,255,255,.88)}.mi.big .ar{margin-left:auto;font-size:24px}
.pr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--bd)}.pr:first-child{border-top:0}
.thm{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}.thm div{width:130px}.thm img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:8px;display:block}.thm .b{width:100%;margin:6px 0 0;padding:6px}
@media (min-width:700px){
 .nv{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;max-width:640px;padding:6px 8px}
 .nv button{flex-direction:row;justify-content:center;gap:8px;font-size:14px;padding:11px 6px}
 body:has(.nv) #app{padding:96px 24px 50px}.fab{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
 .pg.home{max-width:760px}.mi.big{padding:22px}
}

.ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.md{background:var(--card);border-radius:20px;padding:22px;text-align:center;max-width:360px;width:100%;animation:in .3s}
.chp{display:inline-block;padding:8px 12px;border-radius:20px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font:inherit;cursor:pointer;margin:0 6px 6px 0}.chp.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.bd2{display:inline-flex;gap:8px;align-items:center;font-size:13px;padding:6px 12px;border-radius:20px;background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);margin:4px 0 8px}.bd2.on{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}.bd2 i{width:8px;height:8px;border-radius:50%;background:currentColor}
details{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;margin:8px 0}summary{cursor:pointer;font-weight:600}details p{margin:8px 0 0;color:var(--mut)}

#toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
.sl{position:relative;display:block}.cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-weight:700;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.pp{position:relative;max-width:420px;width:100%;animation:in .35s}.pp .carw{margin:0}.pp p{color:#fff;text-align:center;margin:12px 0 0;font-size:13px}
.pp .x{position:absolute;top:-16px;right:-6px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.stars{display:flex;justify-content:center;gap:6px;font-size:38px}.stars a{color:#f5b301;text-decoration:none;transition:transform .15s}.stars a:active{transform:scale(1.25)}
.thm div{width:160px}
.nv.adm button{font-size:10.5px;padding:8px 0}
.nv button.plus{flex:0 0 auto;width:54px;height:54px;margin-top:-24px;align-self:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#6cc1ff));color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--pri) 40%,transparent)}
.nv button.plus span{display:none}.nv button.plus svg{width:26px;height:26px}
.hd{display:flex;justify-content:space-between;align-items:center;margin:2px 0 14px}.hd small{color:var(--mut);display:block}.hd b{font-size:22px}
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.st2{background:var(--card);border:1px solid var(--bd);border-top:4px solid var(--c);border-radius:18px;padding:14px;cursor:pointer;transition:transform .15s}.st2:active{transform:scale(.97)}
.st2 small{color:var(--mut);display:block;font-size:12.5px}.st2 b{font-size:22px;display:block;margin-top:4px;color:var(--tx)}
.qa{display:flex;flex-wrap:wrap;margin-bottom:6px}
.seg{display:flex;background:var(--bd);border-radius:14px;padding:4px;margin:0 0 12px;max-width:360px}
.seg button{flex:1;border:0;background:transparent;color:var(--mut);padding:9px;border-radius:11px;font:inherit;font-weight:600;cursor:pointer}.seg button.on{background:var(--card);color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,.12)}
@media (min-width:700px){.nv button.plus{margin-top:0;width:auto;height:auto;border-radius:18px;flex:1}.nv button.plus span{display:inline}.nv button.plus svg{width:22px;height:22px}.nv.adm{max-width:760px}.nv.adm button{font-size:13px}}
@media (min-width:900px){.sg{grid-template-columns:repeat(4,1fr)}}

.pp2{position:relative;max-width:380px;width:100%;background:var(--card);border-radius:24px;overflow:hidden;animation:pop2 .4s cubic-bezier(.2,1.2,.4,1);box-shadow:0 20px 50px rgba(0,0,0,.45)}
@keyframes pop2{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.pp2 .x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.pimg{display:block;width:100%;max-height:280px;object-fit:cover}
.pbg{height:150px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 45%,#c084fc))}
.pk{color:#fff;font-weight:800;letter-spacing:6px;font-size:28px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.pbd{padding:18px 20px 20px;text-align:center}.pbd h2{font-size:21px;margin:0 0 6px}.pbd p{color:var(--mut);margin:0}.pt{border:0!important;color:var(--mut)!important}
.sh{display:flex;justify-content:space-between;align-items:center;margin:16px 0 8px}.sh a{color:var(--pri);font-weight:600;cursor:pointer;font-size:14px}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tl{background:var(--bg);border:1px solid var(--bd);border-radius:20px;padding:16px 6px;text-align:center;cursor:pointer;transition:transform .15s}.tl:active{transform:scale(.96)}
.tl .ic{width:48px;height:48px;border-radius:16px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 15%,transparent)}
.tl svg{width:26px;height:26px;stroke:var(--c);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tl b{display:block;font-size:24px}.tl small{color:var(--mut);font-size:13px}
@media (min-width:900px){.sg{grid-template-columns:repeat(2,1fr)}}

#toast{z-index:100}
.sheet{position:fixed;inset:0;background:var(--bg);z-index:60;overflow:auto;padding:14px 14px 130px;animation:in .3s}
.sin{max-width:720px;margin:0 auto}
.hd2{display:flex;align-items:center;gap:12px;margin-bottom:12px}.bk{width:40px;height:40px;border-radius:50%;border:1px solid var(--bd);background:var(--card);font-size:20px;cursor:pointer;color:var(--tx)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt2{border:2px solid var(--bd);background:var(--card);color:var(--tx);border-radius:16px;padding:16px 8px;font:inherit;font-weight:600;cursor:pointer}
.pt2.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.mt{display:flex;gap:8px;flex-wrap:wrap}.mt button{padding:10px 18px;border-radius:24px;border:2px solid transparent;background:var(--bd);color:var(--tx);font:inherit;cursor:pointer}
.mt button.on{border-color:var(--pri);color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,transparent);font-weight:700}
.cta{position:fixed;left:0;right:0;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--bd);z-index:61}
.cta .b{display:block;width:100%;margin:0;text-align:center;padding:15px;font-size:16px}
.tgl{flex:none;width:52px;height:30px;border-radius:15px;border:0;background:var(--bd);position:relative;cursor:pointer}
.tgl::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}.tgl.on{background:var(--ok)}.tgl.on::after{left:25px}
.ov.hi{z-index:70}

.lgb{margin-left:auto;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font:inherit;font-size:13px;cursor:pointer}.lgb svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lnk2{color:var(--pri);cursor:pointer;font-weight:600}
.ppw{position:relative;width:100%;animation:pop2 .4s cubic-bezier(.2,1.2,.4,1)}.ppw img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ppw .x{position:absolute;top:-14px;right:-8px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.ts{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}.ts::-webkit-scrollbar{display:none}
.tc{flex:0 0 82%;max-width:320px;scroll-snap-align:start;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 50%,#c084fc));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.stars a{cursor:pointer}
.tw{overflow:auto;border:1px solid var(--bd);border-radius:12px;margin-bottom:10px}.dt2{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}.dt2 th,.dt2 td{padding:8px 10px;border-bottom:1px solid var(--bd);text-align:left}.dt2 th{background:var(--card);position:sticky;top:0}
.acl{display:block;max-width:760px}.ac{padding:0!important;margin:10px 0}
.ac summary{list-style:none;padding:16px 18px;font-weight:700;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.ac summary::-webkit-details-marker{display:none}
.ac summary::after{content:'›';font-size:22px;color:var(--mut);transform:rotate(90deg);transition:transform .2s}.ac[open] summary::after{transform:rotate(-90deg)}
.ac>*:not(summary){margin-left:18px;margin-right:18px}.ac[open]{padding-bottom:16px!important}.ac>p.mut{margin-top:0}

.ppw{width:auto!important;display:inline-block}.ppw img{max-height:none!important;width:300px}.ppw a{display:block}
.chip{font-size:12px;padding:2px 9px;border-radius:12px;background:var(--bd);color:var(--mut);white-space:nowrap}
.chip.s0{background:color-mix(in srgb,var(--pri) 15%,transparent);color:var(--pri)}.chip.s1{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.chip.s2{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.oa{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.oa .b{margin:0;flex:1 1 auto}.oa .ic{flex:0 0 46px;padding:9px 0}
.of{padding-bottom:96px}
.svg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.svt{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:12px;border-radius:16px;border:2px solid var(--bd);background:var(--card);color:var(--tx);font:inherit;cursor:pointer;text-align:left}
.svt .svi{font-size:26px;line-height:1.2}.svt b{font-size:14px}.svt small{color:var(--mut)}.svt.on{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 10%,transparent)}
.stp{display:flex;align-items:center;gap:8px}.stp button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:var(--card);color:var(--pri);font-size:22px;cursor:pointer}
.stp input{text-align:center;font-weight:700;width:90px}.stp span{color:var(--mut)}
.sech{display:flex;align-items:center;gap:10px;margin-bottom:8px}.sech h2{margin:0}
.sic{flex:none;width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--pri) 14%,transparent);display:flex;align-items:center;justify-content:center}
.sic svg{width:20px;height:20px;stroke:var(--pri);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trow{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd);border-radius:14px;margin:8px 0}.trow>div{flex:1}
.rsm{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#6cc1ff));color:#fff;border-radius:22px;padding:18px;margin:12px 0;box-shadow:0 10px 24px color-mix(in srgb,var(--pri) 35%,transparent)}
.rsm h2{margin:0 0 10px}.rg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.rg2>div{background:rgba(255,255,255,.18);border-radius:14px;padding:10px 12px}.rg2 small{display:block;opacity:.85}.rg2 b{font-size:18px}
.rr{display:flex;justify-content:space-between;padding:6px 0}.rr.tot{border-top:1px solid rgba(255,255,255,.3);margin-top:6px;padding-top:12px;font-size:20px}
.cta.ab{bottom:calc(88px + env(safe-area-inset-bottom,0px));background:transparent;border:0;padding:0 14px}.cta.ab .b{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.b:disabled{opacity:.45;cursor:not-allowed}
.okc{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 0 0 10px color-mix(in srgb,var(--ok) 15%,transparent)}
.chipb{display:inline-block;padding:6px 16px;border-radius:14px;background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri);font-weight:700}
@media (min-width:700px){.cta.ab{bottom:0;background:var(--bg);border-top:1px solid var(--bd);padding:12px 14px}}

html{-webkit-tap-highlight-color:transparent}body{overscroll-behavior-y:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}input,textarea,select,.tkc{-webkit-user-select:text;user-select:text}
#spl{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#6cc1ff));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s}#spl img{width:84px;height:84px;border-radius:24px;object-fit:cover}#spl b{font-size:26px}
.tbr{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.ov .md p{white-space:pre-line}
.emp{text-align:center;padding:22px 10px;border:2px dashed var(--bd);border-radius:16px}.emp small{display:block;color:var(--mut);margin:4px 0 12px}
.ln{border:1px solid var(--bd);border-radius:16px;padding:12px;margin:10px 0;background:var(--bg)}.ln .svi{font-size:22px}
.pkr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border:1px solid var(--bd);border-radius:16px;background:var(--card);color:var(--tx);font:inherit;margin:8px 0;cursor:pointer}.pkr .svi{font-size:26px}
.trk{max-width:640px}
.trh{display:flex;align-items:center;justify-content:center;gap:10px;margin:-14px -14px 0;padding:24px 14px 62px;background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#1e3a8a));color:#fff;border-radius:0 0 30px 30px}.trh img{width:40px;height:40px;border-radius:12px;object-fit:cover}.trh b{font-size:22px}
.tcd{position:relative;background:var(--card);border:1px solid var(--bd);border-top:4px solid var(--ok);border-radius:22px;padding:18px;margin:-40px 0 12px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.tk{display:block;text-align:center;color:var(--mut);letter-spacing:2px;margin-top:6px;font-size:12px}.tkc{text-align:center;font-size:38px;font-weight:800;letter-spacing:8px;font-family:ui-monospace,Menlo,monospace;margin:2px 0}
.stp2{display:flex;justify-content:space-between;position:relative;margin:18px 0 8px}.stp2::before{content:'';position:absolute;top:15px;left:12%;right:12%;height:3px;background:var(--bd)}
.sp{position:relative;flex:1;text-align:center;font-size:11px;letter-spacing:.5px;color:var(--mut);text-transform:uppercase}.sp i{display:flex;width:32px;height:32px;border-radius:50%;background:var(--card);border:3px solid var(--bd);margin:0 auto 6px;align-items:center;justify-content:center;font-style:normal;color:#fff;font-size:16px}.sp.on i{background:var(--pri);border-color:var(--pri)}.sp.on{color:var(--tx);font-weight:700}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--bd);padding-top:12px;margin-top:10px}.dd small{display:block;color:var(--mut);font-size:11px;letter-spacing:1px}.dd b{font-size:14px}
.tc2{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px;margin:8px 0}.tc2.col{flex-direction:column;align-items:stretch;gap:0}.tc2 small{display:block;color:var(--mut);font-size:11px;letter-spacing:1px}.sh3{font-size:12px;letter-spacing:2px;color:var(--mut);margin:18px 4px 6px;font-weight:700}
.dk{background:#111a2b;color:#fff;border-radius:22px;padding:18px;margin:8px 0}.pr2{display:flex;justify-content:space-between;align-items:center;background:#ffffff14;border-radius:14px;padding:10px 12px;margin:6px 0}.pr2 small{display:block;opacity:.6;font-size:12px}
.tl2{padding:14px}.ac2{display:flex;gap:12px;padding:8px 0}.ac2 i{flex:none;width:12px;height:12px;border-radius:50%;margin-top:6px}.ac2 small{color:var(--mut);display:block}
.chip.s4{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.spin2{width:38px;height:38px;border:4px solid var(--bd);border-top-color:var(--pri);border-radius:50%;margin:0 auto;animation:sp 1s linear infinite}
.nv{transition:transform .28s ease}.fab{transition:bottom .28s ease}body.nvh .nv{transform:translateY(150%)}body.nvh .fab{bottom:calc(20px + env(safe-area-inset-bottom,0px))}@media (min-width:700px){body.nvh .nv{transform:translateY(-170%)}}
#svg{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:300;background:var(--tx);color:var(--bg);padding:9px 16px;border-radius:22px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,.3);pointer-events:none;white-space:nowrap}
.spin3{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
.ov.mr{align-items:flex-end;padding:0}.bs{background:var(--card);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .25s ease}
@keyframes up{from{transform:translateY(100%)}}
.grip{width:44px;height:5px;border-radius:3px;background:var(--bd);margin:0 auto}
.mrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 8px;border:0;background:transparent;color:var(--tx);font:inherit;font-size:16px;cursor:pointer;text-align:left;border-radius:14px}.mrow:active{background:var(--bd)}
@media (max-width:699px){.nv .pc{display:none}}@media (min-width:700px){.nv .ph{display:none}}
.ac summary .ai{flex:none;width:40px;height:40px;border-radius:13px;background:color-mix(in srgb,var(--pri) 12%,transparent);display:flex;align-items:center;justify-content:center;font-size:20px;margin-right:12px}
.ac summary .at{flex:1;min-width:0}.ac summary .at small{display:block;color:var(--mut);font-weight:400;font-size:12.5px;margin-top:1px}
.sbar{position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:19;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:520px;margin:0 auto;background:var(--tx);color:var(--bg);padding:10px 14px;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.28);transition:bottom .28s ease}.sbar .b{margin:0;padding:8px 16px;background:var(--bg);color:var(--tx)}
body.nvh .sbar{bottom:calc(16px + env(safe-area-inset-bottom,0px))}@media (min-width:700px){.sbar{bottom:16px}}

textarea{resize:none;min-height:88px;max-height:240px;field-sizing:content;overflow:auto;line-height:1.5}
h1{letter-spacing:-.3px}h2{letter-spacing:-.1px}
.card{box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px rgba(15,23,42,.045)}
input,select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}
.b{box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .12s,filter .15s}.b:active{transform:scale(.97)}.b:not(.g):hover{filter:brightness(1.06)}
.oc{border-left:4px solid var(--bd)}.os0{border-left-color:#3b82f6}.os1{border-left-color:#f59e0b}.os2{border-left-color:#10b981}.os3{border-left-color:#8b5cf6}.os4{border-left-color:#ef4444}
.chip{font-weight:600}
@media (min-width:1000px){
 .nv.adm{top:50%;bottom:auto;left:16px;right:auto;transform:translateY(-50%);flex-direction:column;width:96px;max-width:none;padding:10px 6px;gap:4px;margin:0;border-radius:28px}
 .nv.adm button{flex:none;flex-direction:column;font-size:11.5px;padding:11px 4px;gap:5px;width:100%;justify-content:center}
 .nv.adm button.plus{margin:0 0 6px;width:100%;height:auto;border-radius:20px;padding:13px 4px;flex:none}
 .nv.adm button.plus span{display:inline}.nv.adm button.plus svg{width:24px;height:24px}
 body:has(.nv.adm) #app{padding:26px 26px 60px 138px;max-width:1360px}
 body.nvh .nv.adm{transform:translate(-170%,-50%)}
 body:has(.nv.adm) .sbar{left:138px;right:26px;bottom:18px}
 .acl{max-width:none;columns:2;column-gap:16px}.acl>.ac{break-inside:avoid}.acl>.card:last-child{column-span:all}
 .seg{max-width:520px}
}
.ac>input,.ac>select,.ac>textarea{width:calc(100% - 36px)}.ac .fm,.ac .thm,.ac .mt{max-width:calc(100% - 0px)}
.kth{font-weight:700;font-size:12px;letter-spacing:1px;color:var(--mut);margin:16px 4px 4px}.mrow .sic{flex:none}.mrow>span:nth-child(2){flex:1;min-width:0}
.ck{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--bd);border-radius:14px;margin:6px 0;background:var(--card);cursor:pointer}.ck input{width:20px;height:20px;flex:none;margin:0}.ck>div{flex:1}
.dtb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:var(--tx);font:inherit;font-size:22px;cursor:pointer;padding:6px 0}.dtb span{font-size:13px;font-weight:600}.dtb+.dtb{border-left:1px solid var(--bd)}
.fgrid{display:block}.fcol{min-width:0}.dgrid>div{min-width:0}@media(min-width:1000px){.fgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:0 16px;align-items:start}}@media(min-width:760px){.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}}
.bs{overscroll-behavior:contain;touch-action:pan-y}.grip{position:relative;cursor:grab}.grip::after{content:'';position:absolute;left:-48px;right:-48px;top:-10px;bottom:-14px}

#pd .stp{display:flex;align-items:center;gap:8px}#pd .stp input{min-width:0;flex:1;width:auto!important;text-align:center}#pd .stp button{flex:none;width:44px;height:44px}#pd .stp span{flex:none}
a.mrow,a.mrow:visited{text-decoration:none;color:var(--tx)}a.mrow *{text-decoration:none}

/* ===== gaya tenang: datar, tanpa efek berat ===== */
body{background:var(--bg)}
.card{border-radius:14px;box-shadow:none;border:1px solid var(--bd)}
.b:not(.g){background:var(--pri);border:0;border-radius:11px;box-shadow:none}
.b:not(.g):active{filter:brightness(.92)}
.b.g{border-radius:11px;background:var(--card)}
.nv{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.10);border-radius:20px}
.nv button.plus{background:var(--pri);box-shadow:none}
h1{font-weight:700;letter-spacing:-.2px}
.chip{border-radius:6px;font-weight:600}
.av,.mono{background:color-mix(in srgb,var(--pri) 14%,var(--card))!important;color:var(--pri)!important;box-shadow:none}
.lg{box-shadow:none;border:1px solid var(--bd)}
.oc{content-visibility:auto;contain-intrinsic-size:auto 170px}
.kdr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0}.kdr:empty{display:none}
.kdc{display:inline-block;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;padding:3px 6px;border-radius:5px;color:var(--mut);border:1px solid var(--bd);background:transparent}
.kdt{font-size:12px;color:var(--mut)}
.st2{border-radius:12px;border-top:1px solid var(--bd);border-left:4px solid var(--c);padding:12px 14px}
.st2 b{font-size:24px;font-variant-numeric:tabular-nums}
.tg{gap:8px}
.tl{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i n" "i l";column-gap:12px;row-gap:0;align-items:center;text-align:left;padding:12px 14px;border-radius:12px;border-left:4px solid var(--c)}
.tl .ic{grid-area:i;width:auto;height:auto;margin:0;background:none;color:var(--c)}.tl .ic svg{width:26px;height:26px}
.tl b{grid-area:n;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}.tl small{grid-area:l}
.hdr{display:flex;align-items:center;gap:10px}
input,select,textarea{border-radius:10px}
@media(min-width:700px){.sg{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.tg{grid-template-columns:repeat(6,1fr)}.tl{grid-template-columns:1fr;grid-template-areas:"i" "n" "l";text-align:center;justify-items:center;row-gap:2px;border-left:1px solid var(--bd);border-top:4px solid var(--c)}}
.ban .b,.ban .b:not(.g){background:#fff!important;color:var(--pri)!important;box-shadow:none}
@media(max-width:699px){.tl{grid-template-columns:1fr;grid-template-areas:"i" "n" "l";text-align:center;justify-items:center;row-gap:2px;border-left:1px solid var(--bd);border-top:4px solid var(--c);padding:10px 4px}.tl .ic svg{width:22px;height:22px}.hdr .lg{display:none}.hdr{flex:none}.hd>div:first-child{min-width:0}.hd b{font-size:20px}}

.ov.pcw{align-items:center;justify-content:center;padding:16px}
.ov.pcw .bs{max-width:min(880px,100%);border-radius:28px;padding:22px 24px 22px;animation:none;max-height:90%;overflow:auto}
.ov.pcw .grip{display:none}
@media(max-width:699px){.ov.pcw{align-items:flex-end;padding:0}.ov.pcw .bs{border-radius:24px 24px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));animation:up .25s ease}.ov.pcw .grip{display:block}}
.pch{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}.pch b{font-size:22px;font-weight:700}
.pcx{width:44px;height:44px;border-radius:50%;border:0;background:var(--bd);color:var(--tx);font-size:24px;line-height:1;cursor:pointer}
.pcq{position:relative;margin-bottom:14px}.pcq svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:22px;height:22px;stroke:var(--tx);fill:none;stroke-width:2;stroke-linecap:round}
.pcq input{width:100%;height:52px;padding:0 18px 0 52px;border-radius:26px;border:1px solid var(--bd);background:var(--bg);font:inherit;font-size:15px;margin:0}
#pcl{max-height:44vh;overflow:auto;overscroll-behavior:contain;margin:0 -4px 12px;padding:0 4px}
.pcr{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;margin:0 0 10px;border:1px solid var(--bd);border-radius:18px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer}.pcr:active{background:var(--bg)}
.pca{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pri) 14%,var(--card));color:var(--pri);font-weight:700;font-size:20px}
.pcn{flex:1;min-width:0}.pcn b{display:block;font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcn small{display:block;font-size:15px;color:var(--mut);margin-top:2px}
.pcb{font-style:normal;font-size:11px;font-weight:700;color:var(--bad);border:1px solid var(--bad);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.pcs{flex:none;padding:6px 12px;border-radius:10px;background:color-mix(in srgb,var(--ok) 14%,var(--card));color:var(--ok);font-weight:700;font-size:14px}
.pcc{flex:none;width:20px;height:20px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcnew{width:100%;height:54px;margin-top:6px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--pri) 55%,var(--card));background:color-mix(in srgb,var(--pri) 6%,var(--card));color:var(--pri);font:inherit;font-weight:700;font-size:17px;cursor:pointer}
/* ulasan berjalan */
.ts{scroll-snap-type:none!important}.ts .tc{scroll-snap-align:none}

.dh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 16px}.dl,.dr{display:flex;align-items:center;gap:12px}.dn{margin:0;font-size:22px}
.ks{display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden}
.kc{padding:14px 16px;cursor:pointer;border-left:1px solid var(--bd)}.kc:first-child{border-left:0}.kc:active{background:var(--bg)}
.kc small{display:block;color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px}.kc b{display:block;font-size:22px;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.25}
.ks.c6{--n:6}.ks.c6 .kc b{font-size:24px}
@media(max-width:699px){.ks{grid-template-columns:repeat(2,1fr)}.ks .kc{border-left:1px solid var(--bd)}.ks .kc:nth-child(2n+1){border-left:0}.ks .kc:nth-child(n+3){border-top:1px solid var(--bd)}.ks.c6{grid-template-columns:repeat(3,1fr)}.ks.c6 .kc{border-left:1px solid var(--bd);border-top:0}.ks.c6 .kc:nth-child(3n+1){border-left:0}.ks.c6 .kc:nth-child(n+4){border-top:1px solid var(--bd)}.kc{padding:12px 14px}.dr .b{padding:9px 14px}}
.ft2{display:flex;gap:18px;justify-content:center;margin:20px 0 6px}.ft2 a{color:var(--mut);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.tsw{position:relative;width:58px;height:30px;border-radius:15px;border:1px solid var(--bd);background:var(--bg);padding:0;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 7px}
.tsw svg{width:15px;height:15px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.tsw i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .2s ease}
.tsw[aria-checked=true] i{transform:translateX(28px);background:var(--pri)}.tsw[aria-checked=true] svg:nth-child(2){stroke:#fff}.tsw[aria-checked=false] svg:nth-child(1){stroke:var(--tx)}
.ikr{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--bd);cursor:pointer}.ikr.off{opacity:.5;cursor:default}.ikr input{width:22px;height:22px;margin:0;flex:none}
.b,.lgb{white-space:nowrap}

.hero2{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;background:color-mix(in srgb,var(--pri) 10%,var(--card));border:1px solid color-mix(in srgb,var(--pri) 24%,var(--bd));margin-bottom:12px}
.hero2 b{font-size:19px}.hero2 p{margin:2px 0 0;color:var(--mut)}
.hp{flex:1;min-width:210px;max-width:340px}.hpl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.hpl span{color:var(--mut)}
.bar2{height:9px;background:color-mix(in srgb,var(--pri) 18%,var(--bd));border-radius:6px;overflow:hidden}.bar2 i{display:block;height:100%;background:var(--pri);border-radius:6px;transition:width .5s ease}
.st2{border-radius:16px}.st2.hi{background:var(--pri);border-color:var(--pri)}.st2.hi small{color:rgba(255,255,255,.82)}.st2.hi b{color:#fff}
.pipe{display:flex;gap:3px;height:10px;margin:2px 0 14px;border-radius:6px;overflow:hidden}.pipe i{display:block;min-width:8px}
.tl{background:color-mix(in srgb,var(--c) 9%,var(--card))!important;border-color:color-mix(in srgb,var(--c) 30%,var(--bd))!important;border-radius:16px!important}
.tl b{color:var(--c)!important;font-size:28px!important}.tl small{color:var(--tx)!important;opacity:.75}
.tl:active{transform:scale(.97)}

/* ===== landscape: lebih kecil dan sederhana ===== */
@media(min-width:1000px){
 body{font-size:13.5px}
 #app{max-width:1080px;padding:10px 18px}
 h1{font-size:18px;margin:2px 0 6px}h2{font-size:14px;margin:0 0 6px}.mut{font-size:12px}
 .card{padding:11px 14px;margin-bottom:10px;border-radius:12px}
 .b{padding:7px 14px;font-size:13px;border-radius:9px}.lgb{padding:6px 12px;font-size:12px}
 input,select,textarea{padding:7px 10px;font-size:13.5px;border-radius:8px}label{font-size:12px;margin-top:8px}
 .dn,.hd b{font-size:18px}.hd{margin:0 0 10px}
 .hero2{padding:10px 14px;margin-bottom:10px;border-radius:12px}.hero2 b{font-size:15px}.hero2 p{font-size:13px}.bar2{height:7px}
 .sg{gap:10px;margin-bottom:10px}.st2{padding:9px 12px;border-radius:12px}.st2 small{font-size:11.5px}.st2 b{font-size:19px;margin-top:2px}
 .sh{margin:10px 0 6px}.pipe{height:8px;margin:0 0 10px}
 .tg{gap:8px}.tl{padding:8px 6px!important;border-radius:12px!important}.tl b{font-size:20px!important}.tl small{font-size:11.5px}.tl .ic{margin-bottom:2px}.tl .ic svg{width:20px;height:20px}
 .chip{font-size:11px;padding:1px 8px}
 .nv button{font-size:10.5px}.pc{font-size:13px}
 .pcn b{font-size:15px}.pcn small{font-size:13px}.pca{width:42px;height:42px;font-size:16px}.pcr{padding:9px 14px;margin-bottom:8px;border-radius:14px}.pch b{font-size:18px}.pcx{width:36px;height:36px;font-size:20px}.pcq input{height:42px;font-size:14px}.pcnew{height:44px;font-size:15px;border-radius:14px}
 .ov.pcw .bs{max-width:min(620px,100%);padding:16px 18px;border-radius:20px}
 .pkr{padding:10px 12px;margin:6px 0;border-radius:12px}
 .oc{padding:10px 12px}
}

/* ===== rasa aplikasi ===== */
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,.card[onclick],.kc,.tl,.st2,.mrow,.pcr,.nv,.abar,.tsw,.lgb{-webkit-user-select:none;user-select:none;touch-action:manipulation}
button:active,.kc:active,.tl:active,.st2:active,.pcr:active{transition:transform .08s ease}
.card.oc:active{transform:scale(.995)}
.abar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-14px -14px 12px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 96%,transparent);border-bottom:1px solid var(--bd)}
.abar b{font-size:19px;font-weight:700;letter-spacing:-.2px;display:block;line-height:1.2}.abar small{color:var(--mut);font-size:12px}
.abr{display:flex;align-items:center;gap:10px}
@keyframes pgin{from{opacity:0;transform:translateY(6px)}}
#app.pgin>*:not(.nv):not(.fab){animation:pgin .16s ease-out backwards}
@media(min-width:1000px){.abar{margin:-10px -18px 10px;padding:9px 18px}.abar b{font-size:16px}}
@media(prefers-reduced-motion:reduce){#app.pgin>*{animation:none}}
.qa.full{display:flex;gap:8px;grid-column:1/-1}.qa.full .b{flex:1;margin:0}

.hdl{display:flex;align-items:center;gap:10px;min-width:0}.hdl>div{min-width:0}
.ibtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--bd);background:var(--card);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none}.ibtn svg{width:18px;height:18px;stroke:var(--tx);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gc{display:flex;gap:8px;flex-wrap:wrap}.gs{display:inline-flex;background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:2px}.gs button{border:0;background:transparent;color:var(--mut);font:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer}.gs button.on{background:var(--pri);color:#fff}
.gd{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid var(--bd);font-size:13px}.gd span{color:var(--mut);font-size:12.5px}
.hutbar{display:flex;align-items:center;justify-content:space-between;cursor:pointer;grid-column:1/-1}
@media(max-width:699px){
 .hd{margin:0 0 8px}.hd b{font-size:16px}.hd small{font-size:11.5px}.hdr{gap:6px}.hdr .lgb{padding:6px 10px;font-size:12px}.ibtn{width:30px;height:30px}.ibtn svg{width:16px;height:16px}
 .tsw{width:48px;height:26px;padding:0 6px}.tsw i{width:20px;height:20px}.tsw[aria-checked=true] i{transform:translateX(22px)}.tsw svg{width:13px;height:13px}
 .hero2{padding:9px 12px;margin-bottom:8px;border-radius:12px;gap:6px 16px}.hero2 b{font-size:14.5px}.hero2 p{font-size:12px}.hp{min-width:0;max-width:none}.hpl{font-size:12px;margin-bottom:4px}.bar2{height:6px}
 .sg{gap:8px;margin-bottom:8px}.st2{padding:8px 10px;border-radius:12px}.st2 small{font-size:10.5px}.st2 b{font-size:17px;margin-top:1px}
 .sh{margin:8px 0 6px}.pipe{height:6px;margin:0 0 8px}
 .tg{gap:6px}.tl{padding:7px 4px!important;border-radius:11px!important}.tl b{font-size:19px!important}.tl small{font-size:10.5px}.tl .ic svg{width:18px;height:18px}
 .card{padding:11px 12px;border-radius:12px;margin-bottom:8px}.card h2{font-size:14px}
 .nv button{font-size:10px}
}

.fsr{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}.fsr input{flex:1;min-width:0;margin:0}.fb{margin:0!important;white-space:nowrap;position:relative}.fb i{font-style:normal;background:var(--pri);color:#fff;border-radius:9px;font-size:11px;font-weight:700;padding:1px 6px;margin-left:6px}
.fcs{display:flex;flex-wrap:wrap;gap:8px}.fc{border:1px solid var(--bd);background:var(--card);color:var(--tx);font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;cursor:pointer}.fc.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}

/* ===== beranda pelanggan ala GoPay + toko ===== */
.gp{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px;margin:16px 0 4px}
.gi{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;color:var(--tx);font:inherit;font-size:12px;font-weight:500;text-decoration:none;cursor:pointer;padding:0;text-align:center}
.gic{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 13%,var(--card));border:1px solid color-mix(in srgb,var(--c) 24%,var(--bd));transition:transform .1s}
.gic svg{width:26px;height:26px;stroke:var(--c);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.gi:active .gic{transform:scale(.93)}
@media(min-width:700px){.gp{grid-template-columns:repeat(8,1fr)}}
.sjg{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}@media(min-width:700px){.sjg{grid-template-columns:repeat(4,1fr)}}
.sjc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px}.sjc b{font-size:14.5px;margin-top:8px}.sjp{color:var(--pri);font-weight:700;margin:2px 0}
.sji{width:100%;aspect-ratio:1.6;max-height:84px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:hsl(var(--h) 45% 38%);background:hsl(var(--h) 60% 92%)}.sjm .sji{width:44px;height:44px;aspect-ratio:auto;font-size:20px;border-radius:12px}
.sjs{display:flex;align-items:center;justify-content:space-between;margin-top:8px;background:var(--bg);border:1px solid var(--bd);border-radius:11px;padding:3px}.sjs button{width:34px;height:32px;border:0;border-radius:9px;background:var(--card);color:var(--pri);font-size:20px;line-height:1;cursor:pointer}.sjs b{margin:0;font-size:15px}
.sjrow{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}.sjrow::-webkit-scrollbar{display:none}.sjm{flex:none;width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:10px;font:inherit;color:var(--tx);cursor:pointer}.sjm b{font-size:13.5px}
.cbar{position:fixed;left:14px;right:14px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:19;max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;background:var(--card);border:1px solid var(--pri);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.16);cursor:pointer}

/* ===== gaya aplikasi umum: header berwarna + kartu ringkasan + ikon menu ===== */
.ah{margin:-14px -14px 0;padding:14px 16px 44px;background:var(--pri);color:#fff;border-radius:0 0 24px 24px}
.ahr{display:flex;justify-content:space-between;align-items:center;gap:10px}.ah .hdl{min-width:0}
.ah small{color:rgba(255,255,255,.82)!important}.ah .hdl b{color:#fff;font-size:17px}.ahs{margin-top:10px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.95)}
.ah .lg{background:#fff;border-radius:12px;padding:2px}.ah .lgb{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
.ah .tsw{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}.ah .tsw svg{stroke:#fff!important}.ah .tsw i,.ah .tsw[aria-checked=true] i{background:#fff}
.sm{position:relative;z-index:1;margin:-28px 0 14px;display:grid;grid-template-columns:repeat(var(--n,3),1fr);background:var(--card);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.07)}
.smc{padding:12px 14px;border-left:1px solid var(--bd);cursor:pointer;min-width:0}.smc:first-child{border-left:0}.smc:active{background:var(--bg)}
.smc small{display:block;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px}.smc b{display:block;font-size:17px;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.smp{grid-column:1/-1;padding:10px 14px 12px;border-top:1px solid var(--bd)}
.gic{position:relative}.bdg{position:absolute;top:-5px;right:-5px;background:var(--bad);color:#fff;font-style:normal;font-size:10.5px;font-weight:700;min-width:18px;height:18px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.gp.ag{margin:4px 0 8px;gap:14px 4px}
.chs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}.chs::-webkit-scrollbar{display:none}
.ch2{flex:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--card);color:var(--tx);border-radius:999px;padding:7px 8px 7px 11px;font:inherit;font-size:13px;cursor:pointer}.ch2 i{width:8px;height:8px;border-radius:50%;background:var(--c)}.ch2 b{background:color-mix(in srgb,var(--c) 15%,var(--card));color:var(--c);border-radius:9px;padding:1px 8px;font-size:12px}.ch2.z{opacity:.6}.ch2:active{background:var(--bg)}
@media(min-width:700px){.ah{margin:0;border-radius:20px;padding:16px 20px 46px}.sm{margin:-30px 16px 14px}.chs{flex-wrap:wrap}}
@media(min-width:1000px){.ah{padding:12px 18px 40px}.sm{margin:-26px 14px 12px}.smc b{font-size:19px}}
.chd{margin:-14px -14px 14px;padding:14px 16px 18px;background:var(--pri);color:#fff;border-radius:0 0 24px 24px}
.chd .top{margin:0 0 14px}.chd .top small{color:rgba(255,255,255,.85)}.chd .top b{color:#fff}.chd .mono{background:#fff;color:var(--pri)}.chd .lg{background:#fff;border-radius:14px;padding:2px}
.chd .lgb{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38);color:#fff}
.srch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:5px 5px 5px 13px}.srch svg{width:18px;height:18px;stroke:#777;fill:none;stroke-width:2;stroke-linecap:round;flex:none}
.srch input{flex:1;min-width:0;border:0!important;background:transparent!important;margin:0;padding:9px 4px;font-size:15px;color:#1f1d1a;text-transform:uppercase;box-shadow:none!important}.srch input::placeholder{text-transform:none;color:#8a8a8a}
.srch button{border:0;background:var(--pri);color:#fff;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
@media(min-width:700px){.chd{margin:0 0 14px;border-radius:22px;padding:16px 20px 20px}}
.ah small{display:block}.ah .ban{margin:0}

/* foto produk */
.sji.im{padding:0;overflow:hidden;background:var(--bg)}.sji.im img{width:100%;height:100%;object-fit:cover;display:block}
.sjc .sji.im{aspect-ratio:1;max-height:none}.sjm .sji.im{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
.pthm{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg);border:1px solid var(--bd)}.pthm.ph{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--mut)}.pthm.t40{width:40px;height:40px;margin-right:10px}.pthm.sm44{width:44px;height:44px}
.pfr{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.pfb{margin:0;cursor:pointer}
.sjc .sji{aspect-ratio:1;max-height:none}

/* ===== Toko gaya marketplace ===== */
.pg.shpw{max-width:900px}
.shpbar{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;padding:10px 0;background:var(--bg)}
.shpsr{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--pri);border-radius:12px;padding:0 12px;height:44px;margin:0}
.shpsr svg,.shpcart svg{width:20px;height:20px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.shpsr input{flex:1;min-width:0;width:auto;height:auto;border:0;background:transparent;color:var(--tx);font:inherit;font-size:14.5px;outline:0;margin:0;padding:0;box-shadow:none}
.shpcart{position:relative;flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0}
.shpcart svg{stroke:var(--tx)}
.shpcart b{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#f97316;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
.shph{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px;margin:6px 0 10px}
.shph img,.shpl{width:46px;height:46px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--bd);flex:none}
.shpl{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--pri);background:var(--bg)}
.shpch{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.shpch::-webkit-scrollbar{display:none}
.shpch button{flex:none;border:1px solid var(--bd);background:var(--card);color:var(--tx);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin:0;width:auto}
.shpch button.on{background:var(--pri);border-color:var(--pri);color:var(--card)}
.shpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:700px){.shpgrid{grid-template-columns:repeat(4,1fr);gap:14px}}
.shpc{background:var(--card);border:1px solid var(--bd);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.shpimg,.shpbig{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:700;color:hsl(var(--h) 45% 38%);background:linear-gradient(135deg,hsl(var(--h) 65% 93%),hsl(var(--h) 60% 85%));overflow:hidden}
.shpimg{cursor:pointer}.shpimg img,.shpbig img{width:100%;height:100%;object-fit:cover;display:block}
.shpbig{max-width:340px;margin:0 auto;border-radius:16px;font-size:72px}
.shpov{position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;font-weight:700;letter-spacing:.5px}
.shpbd{position:absolute;left:8px;top:8px;background:#f97316;color:#fff;font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.shpb{padding:10px 10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.shpnm{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;cursor:pointer}
.shpprc{font-size:16px;font-weight:800;color:var(--pri)}
.shpft{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;min-height:34px}
.shpst{font-size:11.5px;color:var(--mut)}
.shpadd{width:34px;height:34px;border-radius:50%;border:0;background:var(--pri);color:var(--card);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0;flex:none}
.shpstp{display:flex;align-items:center;gap:8px}.shpstp b{min-width:18px;text-align:center}
.shpstp button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--pri);background:transparent;color:var(--pri);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:0}
.shpov{background:rgba(20,24,30,.78)}.shpimg:has(.shpov){color:transparent}

/* ===== pesanan online ===== */
.psn{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--warn);border-radius:14px;padding:10px 12px;margin:6px 0}
.psn.diterima{border-left-color:var(--ok)}.psn.ditolak{border-left-color:var(--bad)}.psi{font-size:22px}
.psk{display:inline-block;font-family:"Courier New",monospace;font-size:28px;font-weight:800;letter-spacing:3px;background:var(--bg);border:2px dashed var(--pri);border-radius:14px;padding:8px 20px;color:var(--pri)}

.po{border:1.5px solid var(--pri)}.po h2{margin:0 0 4px}.pop{padding:10px 0;border-top:1px solid var(--bd)}.po h2+.pop{border-top:0}
label.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.35;cursor:pointer;margin:10px 0 0}label.chk input{width:20px;height:20px;flex:none;margin:0}
.full{grid-column:1/-1}

/* ===== laporan visual ===== */
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kpi>div{background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--c,var(--pri));border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi small{color:var(--mut);font-size:12px}.kpi b{font-size:18px;font-weight:800;overflow-wrap:anywhere}
.dn{display:flex;align-items:center;gap:14px}.dnl{flex:1;min-width:0}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.hb{margin:10px 0}.hbt{display:flex;justify-content:space-between;gap:8px;font-size:14px}.hbt b{font-size:13px;font-weight:600;color:var(--mut);text-align:right}
.hbb{height:9px;background:var(--bg);border-radius:99px;margin-top:5px;overflow:hidden}.hbb i{display:block;height:100%;border-radius:99px}
.lgr{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:5px 0}.lgr b{font-size:14px;white-space:nowrap}.lgr .mut{font-size:12px}
.sjm .sji{width:100%;height:auto;aspect-ratio:1;font-size:34px;border-radius:12px}.sjm b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== v1.1 POLES TAMPILAN (tambahan di akhir; aman dihapus jika tidak cocok) ===== */
body{background:radial-gradient(900px 420px at 50% -140px,color-mix(in srgb,var(--pri) 15%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
h1{font-weight:800;letter-spacing:-.3px}h2{font-weight:700;letter-spacing:-.1px}
.card{border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.05);transition:box-shadow .2s,transform .2s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 26px rgba(0,0,0,.28)}}
:root[data-theme="dark"] .card{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 26px rgba(0,0,0,.28)}
.b:not(.g){background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 62%,#7c5cff));box-shadow:0 6px 16px color-mix(in srgb,var(--pri) 32%,transparent);border-radius:12px}
.b:not(.g):hover{filter:brightness(1.07);transform:translateY(-1px)}
.b.g{border-radius:12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}
input,select,textarea{border-radius:12px;transition:border-color .15s,box-shadow .15s}
.tabs button{border-radius:12px;transition:background .15s,color .15s,transform .1s}.tabs button:active{transform:scale(.97)}
.tabs button.on{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 62%,#7c5cff));box-shadow:0 4px 12px color-mix(in srgb,var(--pri) 30%,transparent)}
.nv{box-shadow:0 10px 30px rgba(16,24,40,.16);border-radius:22px}
.pg{animation:none}
@keyframes pgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
details.ac{overflow:hidden}details.ac>summary{transition:background .15s}
::selection{background:color-mix(in srgb,var(--pri) 30%,transparent)}
@media (prefers-reduced-motion:reduce){.pg{animation:none}.card,.b{transition:none}}

/* ===== v1.1.5: ulasan di halaman lacak, menu Pengaturan/Kelola ===== */
.rvs{margin:6px 0 2px;display:flex;justify-content:center;gap:6px}
.rvs a{font-size:38px;line-height:1;cursor:pointer;opacity:1;color:color-mix(in srgb,var(--mut) 45%,transparent);transition:transform .12s,color .12s}
.rvs a.on{color:#f5b301}.rvs a:active{transform:scale(1.2)}
.rvl{min-height:20px;font-size:13px;font-weight:600;color:var(--mut);margin:2px 0 10px}
.rv textarea{min-height:84px;text-align:left}
.rvk{display:block;text-align:center;margin:12px 0 0;font-size:13.5px;font-weight:600;color:var(--pri);text-decoration:none}
.rvk:hover{text-decoration:underline}
.ath{padding:2px 4px 4px}.ath b{display:block;font-size:20px;font-weight:800;letter-spacing:-.2px}.ath small{color:var(--mut);font-size:13px}
.atg{font-size:27px;line-height:1}
.atgrid{margin:10px 0 14px}

/* ===== v1.1.6: kotak menu lebih besar dan rapi (beranda + pengaturan) ===== */
.gp{gap:20px 6px;margin:18px 0 8px}
.gi{font-size:12.5px;font-weight:600;gap:8px}
.gic{width:64px;height:64px;border-radius:21px;background:color-mix(in srgb,var(--c) 16%,var(--card));border-color:color-mix(in srgb,var(--c) 26%,var(--bd));box-shadow:0 6px 14px color-mix(in srgb,var(--c) 14%,transparent)}
.gic.atg{font-size:31px;line-height:1}
.ath{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px;margin:0 0 6px}
.ath b{display:block;font-size:17px;font-weight:800}.ath small{color:var(--mut);font-size:12.5px}
.athl{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--pri) 14%,var(--card));font-size:26px;overflow:hidden}
.athl img{width:100%;height:100%;object-fit:cover}
.gc>.gs:first-child{flex:1 0 100%}.gc>.gs:first-child button{flex:1}
.gc .gs button{padding:6px 10px}

/* ===== v1.1.8: layar Stok (tambah/kurang) ===== */
.skr{display:flex;align-items:center;gap:12px;padding:12px 0 6px;border-top:1px solid var(--bd)}
.skr.off{opacity:.55}
.skr .pthm{width:46px;height:46px;flex:0 0 46px;border-radius:12px}
.skn{flex:1;min-width:0}.skn b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skn small{color:var(--mut);font-size:12.5px}
.sklow{color:var(--bad);font-size:12px;font-weight:600}
.skc{display:flex;align-items:center;gap:6px}
.skb{width:42px;height:42px;border-radius:13px;border:1px solid var(--bd);background:var(--card);color:var(--tx);font-size:24px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.skb:active{transform:scale(.94)}.skb.pl{background:var(--pri);border-color:transparent;color:#fff}
.skq{width:62px;text-align:center;font-size:17px;font-weight:700;padding:10px 4px;margin:0}
.skadd{display:flex;gap:6px;justify-content:flex-end;padding-bottom:10px}
.skchip{border:1px solid var(--bd);background:transparent;color:var(--mut);border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.skchip:active{background:var(--bd)}
.skr .pthm.ph{font-size:22px}

/* ===== v1.1.9: Toko ala marketplace ===== */
.shpord{font-size:19px;line-height:1}
.shpm{font-size:11.5px;color:var(--mut);margin:2px 0 4px}
.rvi{border-top:1px solid var(--bd);padding:10px 0}.rvi p{margin:4px 0 0;font-size:14px}
.psr{margin:10px 0}
.pstl{display:flex;margin:10px 0 6px}
.pst{flex:1;text-align:center;position:relative;font-size:11px;color:var(--mut)}
.pst .psd{display:block;width:14px;height:14px;border-radius:50%;margin:0 auto 5px;background:var(--bd);position:relative;z-index:1}
.pst::before{content:'';position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--bd)}
.pst:first-child::before{display:none}
.pst.on .psd,.pst.on::before{background:var(--pri)}.pst.on{color:var(--tx);font-weight:600}
.pst.bad .psd{background:var(--bad)}
.psst{font-size:14px;font-weight:600;margin:4px 0 8px}.psst.bad{color:var(--bad)}
.psbt{display:flex;gap:8px;flex-wrap:wrap}.psbt .b{margin:0;padding:9px 16px}
.ulp{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.ulp button{border:1px solid var(--bd);background:transparent;color:var(--tx);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.ulp button.on{background:var(--pri);color:#fff;border-color:transparent}

.mtr{border-top:1px solid var(--bd);padding:10px 0}

/* ===== v1.3.0: pembayaran QRIS berbatas waktu ===== */
.psb.ok{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}

/* ===== v1.3.3: profil gaya baru (pelanggan, kasir, owner) ===== */
.pkh{text-align:center;padding:6px 0 18px}
.pkh h1{margin:14px 0 0;font-size:27px;line-height:1.2;font-weight:800;letter-spacing:-.3px;overflow-wrap:anywhere}
.pkh .mut{margin:5px 0 0;font-size:14.5px;overflow-wrap:anywhere}
.pka{width:108px;height:108px;margin:0 auto;border-radius:50%;padding:5px;box-sizing:border-box;display:flex;background:conic-gradient(from 0deg,var(--pri) calc(var(--p)*1%),color-mix(in srgb,var(--pri) 14%,var(--bd)) 0)}
.pkai{flex:1;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:700;color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,var(--card));border:5px solid var(--card)}
.pkai svg{width:44px;height:44px;stroke:var(--pri);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pkst{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:18px 4px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.04)}
.pkst>div{text-align:center;padding:0 6px;min-width:0;border-left:1px solid var(--bd)}.pkst>div:first-child{border-left:0}
.pkst b{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkst small{display:block;margin-top:3px;font-size:12.5px;color:var(--mut)}
.pkk{cursor:pointer}.pkk:active{opacity:.6}
.pkcap{text-align:center;margin:10px 0 0;font-size:13px}
.pkl{margin:24px 6px 9px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
.pkg{background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:4px 16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(15,23,42,.04)}
.pkch{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px}
.pkch span{padding:8px 14px;border-radius:999px;border:1px solid var(--bd);background:color-mix(in srgb,var(--pri) 5%,var(--card));font-size:13.5px;font-weight:500}
.pkw{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:14px 0;border:0;border-radius:0;background:transparent;color:var(--tx);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pkw+.pkw{border-top:1px solid var(--bd)}
div.pkw{cursor:default}.pkw:active:not(div){opacity:.65}
.pki{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;background:color-mix(in srgb,var(--c,var(--pri)) 14%,var(--card));border:1px solid color-mix(in srgb,var(--c,var(--pri)) 22%,var(--bd))}
.pkt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pkt b{font-size:15.5px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pkt .sub{font-size:13px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkv{flex:none;font-size:14px;font-weight:700}
.pkc{flex:none;width:18px;height:18px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pks{flex:none;position:relative;width:54px;height:32px;border-radius:99px;background:color-mix(in srgb,var(--mut) 30%,var(--bd));transition:background .2s}
.pks i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;transition:left .2s;font-style:normal;font-size:14px;font-weight:800;color:var(--pri)}
.pks.on{background:var(--pri)}.pks.on i{left:25px}.pks.on i::after{content:"✓"}
.pkw.bad .pkt b{color:var(--bad)}
.pzbar{height:8px;border-radius:99px;background:var(--bd);overflow:hidden;margin-top:10px}.pzbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#fbbf24);transition:width .4s}
.pav{flex:none;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--pri);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px color-mix(in srgb,var(--pri) 28%,transparent)}
.pav:active{transform:scale(.94)}
.ah .pav{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);box-shadow:none}
@media(min-width:700px){.pkh h1{font-size:30px}.pka{width:124px;height:124px}.pkai{font-size:48px}}
@media(max-height:500px){.pka{width:76px;height:76px}.pkai{font-size:30px}.pkh{padding-bottom:10px}}

/* ===== v1.3.4: set ikon pastel ===== */
.ikt{--s:56px;--w:rgba(255,255,255,.8);flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--s);height:var(--s);border-radius:30%;background:linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),var(--bg);border:1.5px solid var(--bd);box-shadow:0 5px 12px color-mix(in srgb,var(--d) 12%,transparent);vertical-align:middle}
.ikt .ik{width:68%;height:68%;display:block;stroke:none;fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.gic.ikw,.gic.atg.ikw{width:auto;height:auto;background:none;border:0;box-shadow:none;border-radius:0;font-size:0}
.ac summary .ai.ikw{background:none;width:auto;height:auto;border-radius:0;margin-right:12px}
.svi .ikt,.kth .ikt{vertical-align:middle}
.ik-blue{--d:#0f5aa8;--m:#4b9be0;--bg:#d6e6fb;--bd:#b4cdf4}
.ik-green{--d:#0a8a55;--m:#34b57c;--bg:#d3f6e3;--bd:#9fe0bf}
.ik-orange{--d:#b2571a;--m:#f59a23;--bg:#ffe5cf;--bd:#f5c9a0}
.ik-cyan{--d:#0f6a9a;--m:#2f9fd0;--bg:#d3f3fb;--bd:#a5e0f0}
.ik-purple{--d:#6a3bb0;--m:#a066dc;--bg:#e8dcfb;--bd:#cfb8f2}
.ik-pink{--d:#d63a66;--m:#f2799a;--bg:#fde0ea;--bd:#f6b8cc}
.ik-yellow{--d:#d98a00;--m:#fdc93b;--bg:#fff0bf;--bd:#f8dc82}
.ik-slate{--d:#3d5a8a;--m:#7b93bd;--bg:#e5e9f4;--bd:#c6cfe3}
.ik-red{--d:#c93636;--m:#ef6b6b;--bg:#fde1e1;--bd:#f5b5b5}
.ik-teal{--d:#0b7f80;--m:#2cbcb6;--bg:#d2f4f2;--bd:#9fe0dc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ikt{--w:rgba(255,255,255,.1);background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),var(--bg);box-shadow:none}:root:not([data-theme="light"]) .ik-blue{--d:#8cc2fa;--bg:#1b2d46;--bd:#2b4668}:root:not([data-theme="light"]) .ik-green{--d:#6fdca6;--bg:#16352a;--bd:#25523f}:root:not([data-theme="light"]) .ik-orange{--d:#ffb877;--bg:#3d2a18;--bd:#5e4129}:root:not([data-theme="light"]) .ik-cyan{--d:#7fd3f2;--bg:#143543;--bd:#1f5368}:root:not([data-theme="light"]) .ik-purple{--d:#c4a3f5;--bg:#2b2146;--bd:#42336a}:root:not([data-theme="light"]) .ik-pink{--d:#ff9bb8;--bg:#40202e;--bd:#613048}:root:not([data-theme="light"]) .ik-yellow{--d:#ffd75e;--bg:#3b3214;--bd:#5a4c1d}:root:not([data-theme="light"]) .ik-slate{--d:#a9bde2;--bg:#222b3c;--bd:#34415a}:root:not([data-theme="light"]) .ik-red{--d:#ff9a9a;--bg:#411f22;--bd:#653035}:root:not([data-theme="light"]) .ik-teal{--d:#6fe0da;--bg:#12383a;--bd:#1f5a5b}}
:root[data-theme="dark"] .ikt{--w:rgba(255,255,255,.1);background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),var(--bg);box-shadow:none}
:root[data-theme="dark"] .ik-blue{--d:#8cc2fa;--bg:#1b2d46;--bd:#2b4668}
:root[data-theme="dark"] .ik-green{--d:#6fdca6;--bg:#16352a;--bd:#25523f}
:root[data-theme="dark"] .ik-orange{--d:#ffb877;--bg:#3d2a18;--bd:#5e4129}
:root[data-theme="dark"] .ik-cyan{--d:#7fd3f2;--bg:#143543;--bd:#1f5368}
:root[data-theme="dark"] .ik-purple{--d:#c4a3f5;--bg:#2b2146;--bd:#42336a}
:root[data-theme="dark"] .ik-pink{--d:#ff9bb8;--bg:#40202e;--bd:#613048}
:root[data-theme="dark"] .ik-yellow{--d:#ffd75e;--bg:#3b3214;--bd:#5a4c1d}
:root[data-theme="dark"] .ik-slate{--d:#a9bde2;--bg:#222b3c;--bd:#34415a}
:root[data-theme="dark"] .ik-red{--d:#ff9a9a;--bg:#411f22;--bd:#653035}
:root[data-theme="dark"] .ik-teal{--d:#6fe0da;--bg:#12383a;--bd:#1f5a5b}

/* ===== v1.3.13: tile ikon bergaya baru (gradien + cahaya), terang dan gelap ===== */
.ikt{border-radius:32%;border-width:1px;background:radial-gradient(120% 120% at 18% 8%,color-mix(in srgb,var(--m) 24%,transparent),transparent 62%),linear-gradient(155deg,rgba(255,255,255,.8),rgba(255,255,255,0) 58%),var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px -8px color-mix(in srgb,var(--m) 55%,transparent)}
.ikt .ik{filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--m) 35%,transparent))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ikt{background:radial-gradient(120% 120% at 18% 8%,color-mix(in srgb,var(--d) 26%,transparent),transparent 62%),linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%),var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 22px -10px color-mix(in srgb,var(--d) 62%,transparent)}:root:not([data-theme="light"]) .ikt .ik{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--d) 45%,transparent))}}
:root[data-theme="dark"] .ikt{background:radial-gradient(120% 120% at 18% 8%,color-mix(in srgb,var(--d) 26%,transparent),transparent 62%),linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,0) 55%),var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 22px -10px color-mix(in srgb,var(--d) 62%,transparent)}
:root[data-theme="dark"] .ikt .ik{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--d) 45%,transparent))}