/* ===== ds-responsive ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;overflow-wrap:break-word;-webkit-tap-highlight-color:transparent;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
button,select,label{touch-action:manipulation}
html,body{touch-action:pan-x pan-y}
img,svg,canvas,video{max-width:100%}
.min-h-screen{min-height:calc(100vh / var(--ds-zoom,1));min-height:calc(100dvh / var(--ds-zoom,1))}
.fixed.inset-0.z-50>div{max-height:calc(92vh / var(--ds-zoom,1));max-height:calc(92dvh / var(--ds-zoom,1));overflow-y:auto;overscroll-behavior:contain}
.overflow-auto,.overflow-x-auto{-webkit-overflow-scrolling:touch}
.text-\[28px\]{font-size:clamp(20px,7.4vw,28px)}
.text-\[22px\]{font-size:clamp(17px,5.8vw,22px)}
.text-\[20px\]{font-size:clamp(16px,5.3vw,20px)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:768px){
input,select,textarea{font-size:16px!important}
input[type=date]{min-width:0;max-width:100%}
table td,table th{padding:10px 12px!important}
}
@media(max-width:640px){
.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)}
header>div:first-child{height:auto!important;min-height:56px;flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
header .shrink-0{flex-wrap:wrap;justify-content:flex-end;gap:6px}
main{padding-bottom:24px!important}
body footer{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
main>*{max-width:100%}
body .pin-dock{top:calc(env(safe-area-inset-top) + 8px);bottom:auto;right:12px;flex-direction:row-reverse;align-items:center;gap:6px}
body .pin-lock{width:40px;height:40px}
body .pin-lock svg{width:18px;height:18px}
body .pin-change{padding:7px 10px;font-size:10.5px}
header>div:first-child{padding-right:calc(12px + 128px)!important}
.fixed.bottom-5{bottom:calc(84px + env(safe-area-inset-bottom))}
/* tab jadi bottom navigation */
body>#root>div>div.max-w-\[1280px\]{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;padding:0}
body>#root>div>div.max-w-\[1280px\]>div{display:flex;width:100%;max-width:100%;border-radius:18px 18px 0 0;border-width:1px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:2px;box-shadow:0 -6px 24px rgba(0,0,0,.08);overflow:hidden}
body>#root>div>div.max-w-\[1280px\]>div::-webkit-scrollbar{display:none}
body>#root>div>div.max-w-\[1280px\]>div>button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:1px!important;height:auto!important;min-height:48px;padding:6px 1px!important;font-size:9.5px!important;line-height:1.1;letter-spacing:-.01em}
body>#root>div>div.max-w-\[1280px\]>div>button>span:first-child{font-size:18px}
}
@media(max-width:480px){
.text-\[9px\]{font-size:10px}.text-\[10px\]{font-size:11px}.text-\[11px\]{font-size:12px}
.p-6{padding:16px}.p-5{padding:14px}.px-4{padding-left:12px;padding-right:12px}
.gap-4{gap:10px}.gap-6{gap:14px}
.h-\[52px\]{height:auto;min-height:52px}
}
@media(max-width:340px){
.grid-cols-2.lg\:grid-cols-4{grid-template-columns:1fr}
.px-4{padding-left:10px;padding-right:10px}
}
@media(max-height:480px) and (orientation:landscape){
body>#root>div>div.max-w-\[1280px\]{position:static}
main{padding-bottom:24px!important}body footer{padding-bottom:0}body .pin-dock{top:auto;bottom:14px;right:14px;flex-direction:column;align-items:flex-end}
header>div:first-child{padding-right:12px!important}
}
/* tinggi kartu seragam, teks panjang dipotong satu baris */

button.text-left.rounded-\[18px\] p.text-\[11px\]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rounded-2xl.p-3.bg-\[\#FFFBEB\] div{min-width:0}
.rounded-2xl.p-3.bg-\[\#FFFBEB\] p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* teks tidak muat: berjalan otomatis, kalau muat tetap diam */
.ds-mq-on{text-overflow:clip!important}
.ds-mq-on::after{content:attr(data-mq);padding-left:48px}
/* kartu dalam grid tidak boleh melebar melewati layar akibat teks panjang */
.grid>*{min-width:0}
.grid:not([class*="grid-cols"]){grid-template-columns:minmax(0,1fr)}
/* judul header: D-STORE <-> nama toko, ganti tiap 3 detik dengan fade singkat */
.ds-brand{display:inline-grid;vertical-align:bottom;max-width:min(58vw,230px)}
.ds-brand>span{grid-area:1/1;display:block;white-space:nowrap;overflow:hidden;animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.ds-brand-a{animation-name:ds-brand-a}.ds-brand-b{animation-name:ds-brand-b}
@keyframes ds-brand-a{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes ds-brand-b{0%,44%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
/* sinkron server */
#dsCloud{position:fixed;inset:0;z-index:999997;display:none;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.5)}
#dsCloud .dsc-card{width:100%;max-width:420px;background:#fff;border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.25);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#111827}
#dsCloud h3{font-size:17px;font-weight:800;margin:0 0 6px}#dsCloud p{font-size:12px;color:#6B7280;margin:0 0 12px;line-height:1.5}
#dsCloud input{width:100%;height:46px;margin-bottom:8px;border:1px solid #E5E7EB;border-radius:14px;padding:0 14px;font-size:16px;font-family:inherit;outline:none;box-sizing:border-box}
#dsCloud input:focus{border-color:var(--dp)}
#dsCloud button{width:100%;height:46px;margin-top:8px;border:none;border-radius:14px;background:var(--dp);color:#fff;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer}
#dsCloud button.alt{background:#fff;color:var(--dp);border:1px solid var(--dp)}#dsCloud button.ghost{background:transparent;color:#6B7280;font-weight:700;height:38px}
#dsCloud .dsc-m{min-height:16px;font-size:12px;font-weight:700;color:#DC2626}


.ds-acct{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--dp) 25%,#fff);background:color-mix(in srgb,var(--dp) 8%,#fff);color:var(--dp);font-size:11px;font-weight:700;cursor:pointer}
.ds-acct i{width:8px;height:8px;border-radius:50%;background:#9CA3AF;flex:none}
.ds-acct span{display:block;max-width:58px}
#dsCloud button.dsc-red{background:#DC2626}#dsCloud button.dsc-redo{color:#DC2626;border-color:#DC2626}
#dsAuth .dsa-ver{display:inline-block;vertical-align:middle;margin-left:4px;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--dp) 30%,#fff);background:color-mix(in srgb,var(--dp) 10%,#fff);color:var(--dp);font-size:10px;font-weight:700;letter-spacing:.04em}
#dsRemind{display:none;position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:999996;max-width:420px;margin:0 auto;background:#fff;border:1px solid color-mix(in srgb,var(--dp) 30%,#fff);border-radius:18px;padding:14px 16px;box-shadow:0 12px 32px rgba(0,0,0,.22);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
#dsRemind b{display:block;font-size:14px;font-weight:800;color:#111827}#dsRemind span{display:block;margin:4px 0 10px;font-size:12px;color:#6B7280;line-height:1.5}
#dsRemind div{display:flex;gap:8px}#dsRemind button{flex:1;height:40px;border:none;border-radius:12px;background:var(--dp);color:#fff;font-weight:800;font-size:13px;font-family:inherit;cursor:pointer}#dsRemind button.g{background:#F3F4F6;color:#6B7280}

/* ===== ds-clean ===== */
/* ===== D-Store Clean: satu bahasa visual ===== */
:root{--cl-p:var(--ds-p,#EA580C);--cl-bg:color-mix(in srgb,var(--cl-p) 5%,#fff);--cl-card:#fff;--cl-line:color-mix(in srgb,var(--cl-p) 17%,#fff);--cl-fill:color-mix(in srgb,var(--cl-p) 7%,#fff);--cl-dark:color-mix(in srgb,var(--cl-p) 22%,#0F172A);--cl-r:18px;--cl-sh:0 1px 2px color-mix(in srgb,var(--cl-p) 10%,transparent),0 6px 18px -10px color-mix(in srgb,var(--cl-p) 22%,transparent)}
html,body,#root>div.min-h-screen{background:var(--cl-bg)!important}
#root [style*="background-color: rgb(220, 252, 231)"],
#root [style*="background-color: rgb(239, 246, 255)"],
#root [style*="background-color: rgb(240, 253, 244)"],
#root [style*="background-color: rgb(243, 244, 246)"],
#root [style*="background-color: rgb(245, 243, 255)"],
#root [style*="background-color: rgb(248, 250, 255)"],
#root [style*="background-color: rgb(249, 250, 251)"],
#root [style*="background-color: rgb(250, 245, 255)"],
#root [style*="background-color: rgb(252, 231, 243)"],
#root [style*="background-color: rgb(253, 242, 248)"],
#root [style*="background-color: rgb(253, 248, 243)"],
#root [style*="background-color: rgb(254, 242, 242)"],
#root [style*="background-color: rgb(254, 249, 195)"],
#root [style*="background-color: rgb(254, 252, 232)"],
#root [style*="background-color: rgb(255, 245, 245)"],
#root [style*="background-color: rgb(255, 247, 237)"],
#root [style*="background-color: rgb(255, 251, 235)"]{background-color:var(--cl-fill)!important}
#root [style*="border-color: rgb(187, 247, 208)"],
#root [style*="border-color: rgb(191, 219, 254)"],
#root [style*="border-color: rgb(221, 214, 254)"],
#root [style*="border-color: rgb(229, 231, 235)"],
#root [style*="border-color: rgb(231, 223, 213)"],
#root [style*="border-color: rgb(251, 207, 232)"],
#root [style*="border-color: rgb(254, 202, 202)"],
#root [style*="border-color: rgb(254, 215, 170)"],
#root [style*="border-color: rgb(254, 240, 138)"],#root [style*="1px solid rgb(187, 247, 208)"],
#root [style*="1px solid rgb(191, 219, 254)"],
#root [style*="1px solid rgb(221, 214, 254)"],
#root [style*="1px solid rgb(229, 231, 235)"],
#root [style*="1px solid rgb(231, 223, 213)"],
#root [style*="1px solid rgb(251, 207, 232)"],
#root [style*="1px solid rgb(254, 202, 202)"],
#root [style*="1px solid rgb(254, 215, 170)"],
#root [style*="1px solid rgb(254, 240, 138)"]{border-color:var(--cl-line)!important}
#root [style*="border-color: rgba(187, 247, 208,"],
#root [style*="border-color: rgba(191, 219, 254,"],
#root [style*="border-color: rgba(221, 214, 254,"],
#root [style*="border-color: rgba(229, 231, 235,"],
#root [style*="border-color: rgba(231, 223, 213,"],
#root [style*="border-color: rgba(251, 207, 232,"],
#root [style*="border-color: rgba(254, 202, 202,"],
#root [style*="border-color: rgba(254, 215, 170,"],
#root [style*="border-color: rgba(254, 240, 138,"]{border-color:var(--cl-line)!important}
#root .rounded-\[24px\],#root .rounded-3xl{border-radius:var(--cl-r)!important}
#root .shadow-soft,#root .hover\:shadow-hover:hover{box-shadow:var(--cl-sh)!important}
#root [style*="box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 30px"]{box-shadow:var(--cl-sh)!important}
#root .bg-white{background-color:var(--cl-card)}
#root .border-slate-200{border-color:var(--cl-line)!important}
/* header */
#root header.glass{background:rgba(255,255,255,.88)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--cl-line)!important;box-shadow:none!important}
#root header button.h-9{border-radius:10px!important;background:#fff!important;box-shadow:none!important}
/* nav */
#root .ds-seg.inline-flex.p-1.rounded-2xl{background:color-mix(in srgb,var(--cl-p) 10%,#fff)!important;border-color:transparent!important;box-shadow:none!important;border-radius:14px!important}
#root .ds-seg.inline-flex.p-1.rounded-2xl>button{border-radius:10px!important;box-shadow:none!important}
/* input */
#root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),#root select,#root textarea{background-color:#fff!important;box-shadow:none!important}
#root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(:focus),#root select:not(:focus),#root textarea:not(:focus){border-color:var(--cl-line)!important}
#root input:focus,#root select:focus,#root textarea:focus{border-color:var(--ds-p,#7C3AED)!important;outline:none}
/* footer */
#root footer{background:transparent!important;border-top:1px solid var(--cl-line)!important}
#root footer span.rounded-full{background:#fff!important;border-color:var(--cl-line)!important}
#root [style*="background-color: rgb(187, 247, 208)"],
#root [style*="background-color: rgb(191, 219, 254)"],
#root [style*="background-color: rgb(221, 214, 254)"],
#root [style*="background-color: rgb(229, 231, 235)"],
#root [style*="background-color: rgb(231, 223, 213)"],
#root [style*="background-color: rgb(251, 207, 232)"],
#root [style*="background-color: rgb(254, 202, 202)"],
#root [style*="background-color: rgb(254, 215, 170)"],
#root [style*="background-color: rgb(254, 240, 138)"]{background-color:var(--cl-line)!important}
#root [stroke="#BBF7D0" i],
#root [stroke="#BFDBFE" i],
#root [stroke="#DDD6FE" i],
#root [stroke="#E5E7EB" i],
#root [stroke="#E7DFD5" i],
#root [stroke="#FBCFE8" i],
#root [stroke="#FECACA" i],
#root [stroke="#FED7AA" i],
#root [stroke="#FEF08A" i]{stroke:var(--cl-line)!important}
#root .ds-acct,#root header .rounded-full.border{background:var(--cl-fill)!important;border-color:var(--cl-line)!important}
/* sheet & dialog: satu gaya */
.dsf-sh,.f2s{--ds-b:var(--cl-line);--ds-l:var(--cl-fill);--ds-l2:#fff;border-color:var(--cl-line)!important;border-radius:20px;box-shadow:0 12px 40px rgba(20,22,30,.14)}
.dsf-sh .dsf-hd{border-bottom:0;padding:20px 20px 0}
.dsf-sh .dsf-hi{width:auto;height:auto;background:none;color:var(--ds-p,#7C3AED);border-radius:0}
.dsf-sh .dsf-hd b{font-size:18px;font-weight:800}
.dsf-sh .dsf-x{height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--cl-line);background:#fff;font-weight:700;font-size:12px}
.dsf-sh .dsf-bd{padding:12px 20px 22px;gap:12px}
.dsf-sh .dsf-l{font-size:11px;font-weight:700;text-transform:uppercase;color:#1F2937}
.dsf-sh .dsf-in{height:44px;border-radius:12px;border:1px solid var(--cl-line);background:#fff;padding:0 16px;font-size:13px}
.dsf-sh .dsf-in:focus{border-color:var(--ds-p,#7C3AED)}
.dsf-sh .dsf-bt{min-height:44px;height:44px;border-radius:12px;font-size:13px;font-weight:700;box-shadow:none}
.dsf-sh .dsf-bt.ghost:not(.warn){background:var(--cl-fill);border:1px solid var(--cl-line);box-shadow:none}
.dsf-sh .dsf-box{border-radius:14px;border:1px solid var(--cl-line);background:var(--cl-fill)}

/* seragam tema */
#root .bg-\[\#1F2937\]{background-color:var(--cl-dark)!important}
#root .bg-amber-50,#root .bg-amber-100{background-color:var(--cl-fill)!important}
#root .border-amber-100,#root .border-amber-200{border-color:var(--cl-line)!important}
#root .text-amber-700,#root .text-amber-800,#root .text-amber-900,#root .text-amber-600{color:var(--cl-p)!important}
#root .ds-seg.inline-flex.p-1.rounded-2xl>button:not([style*="background-color: rgb"]):hover{color:var(--cl-p)}
#root header .text-\[\#1F2937\],#root h1,#root h2{color:#1b2230}
#root .bg-lime-100,#root .bg-cyan-100,#root .bg-pink-100,#root .bg-sky-100,#root .bg-violet-100{background-color:color-mix(in srgb,var(--cl-p) 11%,#fff)!important}
#root .text-lime-700,#root .text-cyan-700,#root .text-violet-700,#root .text-pink-700,#root .text-sky-700{color:var(--cl-p)!important}
#root .border-lime-200,#root .border-cyan-200,#root .border-pink-200,#root .border-sky-200,#root .border-violet-200{border-color:var(--cl-line)!important}
/* peringatan stok menipis: warna dikunci amber, tidak ikut tema */
#root div.w-10.h-10:has(>svg>path[d^="M10.3 3.9L2.4"]){background-color:#FEF3C7!important;color:#D97706!important}
#root p.text-\[28px\].text-amber-600{color:#D97706!important}
#root .rounded-\[24px\].bg-amber-50{background-color:#FFFBEB!important}
#root .rounded-\[24px\].border-amber-200{border-color:#FDE68A!important}

/* ===== Gerak seragam & halus ===== */
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.4,0,.2,1)}
/* scrim: gelap + blur masuk/keluar bersamaan, tidak lompat */
.fixed.inset-0.z-50{animation-duration:.36s;animation-timing-function:var(--ease-out)}
.fixed.inset-0.z-50>div{animation-duration:.46s;animation-timing-function:var(--ease)}
@media(max-width:767.98px){.fixed.inset-0.z-50.items-end>div{animation-duration:.5s}}
.fixed.inset-0.z-50.ds-leaving{animation-duration:.26s}
.fixed.inset-0.z-50.ds-leaving>div{animation-duration:.24s}
[style*="dsDdIn"]{animation-duration:.38s!important}
[style*="dsDdOut"]{animation-duration:.24s!important}
/* opsi dropdown muncul berurutan */
[style*="dsDdIn"]>*{animation:dsItemIn .34s var(--ease) backwards}
[style*="dsDdIn"]>*:nth-child(2){animation-delay:.025s}[style*="dsDdIn"]>*:nth-child(3){animation-delay:.05s}[style*="dsDdIn"]>*:nth-child(4){animation-delay:.075s}[style*="dsDdIn"]>*:nth-child(5){animation-delay:.1s}[style*="dsDdIn"]>*:nth-child(n+6){animation-delay:.12s}
/* transisi interaktif seragam */
#root button,#root input,#root select,#root textarea,#root a{transition-property:color,background-color,border-color,box-shadow,transform,opacity,filter;transition-duration:.24s;transition-timing-function:var(--ease)}
#root .rounded-\[24px\],#root .rounded-2xl{transition:box-shadow .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover){
 #root button.group[data-q]:not(:active):hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--cl-p) 40%,transparent)}
 #root .rounded-\[24px\].hover\:shadow-hover:hover{transform:translateY(-2px)}
}
/* bar progres & angka */
#root div[style*="width"]:not(.ds-ind):not([class*="max-w"]){transition:width .7s var(--ease),background-color .3s ease}
main>div .grid.grid-cols-2.lg\:grid-cols-4>div{animation:dsItemIn .5s var(--ease) backwards}
main>div .grid.grid-cols-2.lg\:grid-cols-4>div:nth-child(2){animation-delay:.05s}
main>div .grid.grid-cols-2.lg\:grid-cols-4>div:nth-child(3){animation-delay:.1s}
main>div .grid.grid-cols-2.lg\:grid-cols-4>div:nth-child(4){animation-delay:.15s}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ikon bohlam (kotak info) ikut tema */
#root .rounded-xl.bg-amber-50 svg,#root .rounded-xl.bg-amber-50 svg *{stroke:var(--cl-p)!important;color:var(--cl-p)!important}


/* chip kategori: semua warna palet ikut tema */
.bg-orange-100.text-orange-700.border-orange-200,
.bg-emerald-100.text-emerald-700.border-emerald-200,
.bg-amber-100.text-amber-700.border-amber-200,
.bg-rose-100.text-rose-700.border-rose-200,
.bg-indigo-100.text-indigo-700.border-indigo-200,
.bg-slate-100.text-slate-700.border-slate-200,
.bg-lime-100.text-lime-700.border-lime-200,
.bg-cyan-100.text-cyan-700.border-cyan-200,
.bg-pink-100.text-pink-700.border-pink-200,
.bg-sky-100.text-sky-700.border-sky-200,
.bg-violet-100.text-violet-700.border-violet-200{background-color:color-mix(in srgb,var(--cl-p) 11%,#fff)!important;color:var(--cl-p)!important;border-color:var(--cl-line)!important}

/* ===== ds-dcloud-fix ===== */
.dsf-sh [data-b].dis{pointer-events:auto}.dcm{padding:4px 2px 2px}.dcm-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}.dcm-t b{font-weight:800}.dcm-t span{font-size:12px;font-weight:700;opacity:.55}.dcm-b{height:8px;border-radius:99px;background:var(--cl-line,#E5E7EB);overflow:hidden;margin-top:9px}.dcm-b i{display:block;height:100%;width:0;border-radius:99px;background:var(--ds-p,#7C3AED);transition:width .9s var(--ease-out,cubic-bezier(.22,1,.36,1)),background-color .3s}.dcm.w .dcm-b i{background:#F59E0B}.dcm.f .dcm-b i{background:#DC2626}.dcl{display:flex;flex-direction:column;gap:10px}.dcl-e{text-align:center;font-size:13px;opacity:.6;padding:22px 0}.dcr{border:1px solid var(--cl-line,#E5E7EB);border-radius:16px;padding:14px;background:#fff;animation:dsItemIn .45s var(--ease-out,cubic-bezier(.22,1,.36,1)) backwards;animation-delay:calc(var(--i)*70ms)}.dcr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.dcr-h b{font-size:20px;font-weight:800}.dcr-h span{font-size:12px;font-weight:700;opacity:.6}.dcr-s{font-size:12px;opacity:.65;margin-top:3px}.dcr-a{display:flex;gap:8px;margin-top:12px}.dcr-a .dsf-bt{flex:1;height:38px;min-height:38px}.dcr-x{color:#DC2626}#dsCB2{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:44;width:calc(100% - 28px);max-width:420px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:18px;background:var(--dp,#6D28D9);color:#fff;border:0;box-shadow:0 10px 28px rgba(0,0,0,.28);font-family:inherit;cursor:pointer;visibility:visible;opacity:1;transform:translate(-50%,0);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .45s ease,visibility 0s}#dsCB2.off{visibility:hidden;pointer-events:none;opacity:0;transform:translate(-50%,60px);transition:transform .2s cubic-bezier(.4,0,1,1),opacity .2s ease,visibility 0s .2s}#dsCB2 .dscb-l{display:flex;align-items:center;gap:8px;flex:none}#dsCB2 .dscb-ico{display:inline-flex;align-items:center;line-height:1}#dsCB2 .dscb-n{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.22);white-space:nowrap;animation:dsCartBump .35s ease}#dsCB2 .dscb-t{flex:1 1 auto;min-width:0;text-align:right;font-size:15px;font-weight:800;white-space:nowrap}#dsCB2 .dscb-go{flex:none;font-size:12px;font-weight:800;white-space:nowrap;padding:6px 10px;border-radius:12px;background:#fff;color:var(--dp,#6D28D9)}@media(max-width:640px){#dsCB2{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}@media(min-width:1024px){#dsCB2{display:none}}

/* ===== dasar ===== */
    :root{--dp:#7C3AED}
    #pinOverlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--dp) 7%,#fff) 100%);-webkit-tap-highlight-color:transparent}
    #pinOverlay *{box-sizing:border-box}
    .pin-card{width:100%;max-width:340px;background:#fff;border-radius:28px;padding:26px 22px 20px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.12)}
    .pin-badge{width:60px;height:60px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--dp) 12%,#fff);border:1px solid color-mix(in srgb,var(--dp) 25%,#fff)}
    .pin-brand{font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--dp);text-transform:uppercase}
    .pin-title{margin-top:6px;font-weight:800;font-size:18px;color:#111827;letter-spacing:-.01em}
    .pin-sub{margin-top:4px;font-size:12px;line-height:1.45;color:#6B7280;min-height:17px}
    .pin-dots{display:flex;justify-content:center;gap:14px;margin:20px 0 6px}
    .pin-dot{width:14px;height:14px;border-radius:999px;border:2px solid #D1D5DB;background:transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease}
    .pin-dot.on{background:var(--dp);border-color:var(--dp);transform:scale(1.15)}
    .pin-dots.err .pin-dot{border-color:#DC2626}
    .pin-dots.err .pin-dot.on{background:#DC2626}
    .pin-dots.shake{animation:pinShake .42s ease}
    .pin-msg{min-height:18px;margin-bottom:10px;font-size:11.5px;font-weight:700;color:#DC2626}
    .pin-msg.ok{color:#059669}
    .pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .pin-key{height:56px;border:none;border-radius:18px;background:#F3F4F6;color:#111827;font-family:inherit;font-size:22px;font-weight:700;cursor:pointer;transition:transform .08s ease,background .12s ease;user-select:none;-webkit-user-select:none;touch-action:manipulation}
    .pin-key:hover{background:color-mix(in srgb,var(--dp) 10%,#F3F4F6)}
    .pin-key:active{transform:scale(.94);background:color-mix(in srgb,var(--dp) 20%,#F3F4F6)}
    .pin-key.ghost{background:transparent;cursor:default;pointer-events:none}
    .pin-key.del{font-size:18px;color:#6B7280}
    .pin-submit{width:100%;height:48px;margin-top:14px;border:none;border-radius:16px;background:var(--dp);color:#fff;font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:opacity .15s ease,filter .15s ease;box-shadow:0 8px 20px color-mix(in srgb,var(--dp) 35%,transparent)}
    .pin-submit:hover:not(:disabled){filter:brightness(1.08)}
    .pin-submit:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
    .pin-cancel{margin-top:10px;border:none;background:transparent;color:#6B7280;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:6px 12px;border-radius:10px}
    .pin-cancel:hover{background:#F3F4F6}
    .pin-dock{position:fixed;bottom:14px;right:14px;z-index:999998;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
    .pin-lock{width:46px;height:46px;border-radius:999px;border:none;background:var(--dp);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px color-mix(in srgb,var(--dp) 40%,transparent);cursor:pointer;transition:transform .12s ease}
    .pin-lock:active{transform:scale(.92)}
    .pin-change{border:1px solid color-mix(in srgb,var(--dp) 25%,#fff);background:#fff;color:var(--dp);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:10.5px;font-weight:800;padding:7px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:pointer}
    
    @keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
    @media (max-height:640px){.pin-card{padding:18px 18px 14px}.pin-key{height:48px;font-size:20px}.pin-dots{margin-top:14px}.pin-badge{width:48px;height:48px;margin-bottom:8px}}
  

/* ===== ds-auth-css ===== */
#dsCloud .dsc-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#dsCloud .dsc-head h3{margin:0}
#dsCloud .dsc-ava{width:34px;height:34px;border-radius:50%;background:var(--dp);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;flex:none;text-transform:uppercase}
#dsAuth{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000000;display:none;justify-content:center;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--dp) 7%,#fff) 100%)}
#dsAuth *{box-sizing:border-box}
#dsAuth .dsa-card{width:100%;max-width:380px;margin:auto;background:#fff;border-radius:28px;padding:24px 20px 16px;box-shadow:0 24px 60px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.12);color:#111827}
#dsAuth .dsa-logo{text-align:center;font-weight:800;font-size:26px;letter-spacing:.22em;padding-left:.22em;color:var(--dp);line-height:1.1;margin-top:2px}
#dsAuth .dsa-shop{margin-top:6px;text-align:center;font-size:14px;font-weight:700;color:#374151;overflow-wrap:anywhere}
#dsAuth .dsa-shop:empty{display:none}
#dsAuth .dsa-title{margin-top:6px;font-weight:800;font-size:18px;text-align:center;letter-spacing:-.01em}
#dsAuth .dsa-sub{margin:4px 0 14px;font-size:12px;line-height:1.45;color:#6B7280;text-align:center}
#dsAuth .dsa-lbl{display:block;margin:10px 0 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#374151}
#dsAuth input{display:block;width:100%;height:46px;border:1px solid #E5E7EB;border-radius:14px;padding:0 14px;font-size:16px!important;font-family:inherit;outline:none;background:#fff;color:#111827}
#dsAuth input:focus{border-color:var(--dp)}
#dsAuth .dsa-sec{margin-top:16px;padding-top:12px;border-top:1px dashed #E5E7EB;font-size:11px;font-weight:800;color:var(--dp);text-transform:uppercase;letter-spacing:.08em}
#dsAuth .dsa-m{min-height:16px;margin-top:10px;font-size:12px;font-weight:700;color:#DC2626;text-align:center}
#dsAuth .dsa-m.ok{color:#6B7280}
#dsAuth .dsa-btn{display:block;width:100%;height:48px;margin-top:10px;border:none;border-radius:16px;background:var(--dp);color:#fff;font-weight:800;font-size:14px;font-family:inherit;cursor:pointer}
#dsAuth .dsa-btn.alt{background:#fff;color:var(--dp);border:1.5px solid var(--dp)}
#dsAuth .dsa-btn.ghost{background:transparent;color:#6B7280;height:38px;font-weight:700;font-size:12px}
#dsAuth .dsa-btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-height:640px){#dsAuth .dsa-card{padding:16px 16px 12px}#dsAuth .dsa-badge{width:44px;height:44px;font-size:22px;margin-bottom:6px}#dsAuth .dsa-sub{margin-bottom:8px}}
#dsCloud .dsc-card{max-height:calc(90dvh / var(--ds-zoom,1));overflow-y:auto;overscroll-behavior:contain}
#dsCloud .dsc-dev{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid #E5E7EB;border-radius:14px}
#dsCloud .dsc-di{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#dsCloud .dsc-di b{font-size:13px;font-weight:800;overflow-wrap:anywhere;white-space:normal}
#dsCloud .dsc-di em{font-style:normal;font-size:10px;font-weight:800;color:var(--dp)}
#dsCloud .dsc-di span{font-size:11px;color:#6B7280}
#dsCloud button.dsc-sm{width:auto;height:32px;margin:0;padding:0 12px;font-size:12px;border-radius:10px;flex:none}
#dsToast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:999996;max-width:88vw;background:#111827;color:#fff;font:700 12px 'Plus Jakarta Sans',system-ui,sans-serif;padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center}

/* ===== ds-mobile-v2 ===== */
/* tombol melayang (Ganti PIN + gembok): sembunyi saat scroll ke bawah, muncul lagi saat scroll ke atas, supaya tidak menutupi isi halaman */
.pin-dock{transition:transform .2s ease,opacity .2s ease}
body.ds-dock-hide .pin-dock{transform:translateY(-160%);opacity:0;pointer-events:none}
@media(max-height:480px) and (orientation:landscape){body.ds-dock-hide .pin-dock{transform:translateY(160%)}}
/* HP yang mematikan animasi: marquee tidak jalan, jadi teks panjang turun ke baris berikutnya (bukan "...") */
@media(prefers-reduced-motion:reduce){
main .truncate,[class*="z-50"] .truncate,main button.text-left p[class*="text-[11px]"],div[class*="bg-[#FFFBEB]"] p{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
/* judul header: tanpa animasi ganti-gantian, nama toko tampil di bawah D-STORE */
.ds-brand{display:inline-flex;flex-direction:column;max-width:100%}
.ds-brand>span{animation:none!important;opacity:1!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere}
.ds-brand-b{font-size:.62em;letter-spacing:.06em;font-weight:700}
}
/* kartu produk di Kasir: isi rata atas walau tinggi kartu beda karena nama panjang turun ke bawah */
button.text-left.rounded-\[18px\].group{display:grid;align-content:start;justify-items:start}
button.text-left.rounded-\[18px\].group>div:first-child{justify-self:stretch}
/* kartu Riwayat: baris metode/bon/sisa utang tidak boleh dipotong atau berjalan */
button.text-left.rounded-\[18px\] p.hist-pay{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
/* menu bawah di layar sempit */
@media(max-width:340px){
body>#root>div>div.max-w-\[1280px\]>div>button{font-size:9px!important;letter-spacing:-.03em;padding:6px 0!important}
}
@media(max-width:300px){
body>#root>div>div.max-w-\[1280px\]>div>button{font-size:0!important}
body>#root>div>div.max-w-\[1280px\]>div>button.shadow-soft{font-size:9px!important}
body>#root>div>div.max-w-\[1280px\]>div>button>span:first-child{font-size:20px!important}
}
/* popup dengan header & tombol bawah tetap: hanya isi tengah yang scroll */
.fixed.inset-0.z-50>div.ds-sheet{display:flex;flex-direction:column;overflow:hidden;max-height:calc(92vh / var(--ds-zoom,1));max-height:calc(92dvh / var(--ds-zoom,1))}
.fixed.inset-0.z-50>div.ds-sheet>*{flex:none}
.fixed.inset-0.z-50>div.ds-sheet>.ds-scroll{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fixed.inset-0.z-50>div.ds-struk .ds-nocap{max-height:none!important;overflow:visible}
.fixed.inset-0.z-50>div.ds-struk .ds-stickyfoot{position:sticky;bottom:0;z-index:2}
.fixed.inset-0.z-50>div::-webkit-scrollbar-track{margin-top:30px;margin-bottom:30px;background:transparent}
.fixed.inset-0.z-50>div::-webkit-scrollbar-thumb{border-radius:999px}
.fixed.inset-0.z-50>div.ds-struk{scrollbar-width:none}
.fixed.inset-0.z-50>div.ds-struk::-webkit-scrollbar{display:none}

/* ===== ds-motion-css ===== */
/* ===== Animasi popup (React): scrim fade + sheet naik dari bawah / dialog pop ===== */
@keyframes dsScrimIn{from{background-color:rgba(0,0,0,0)}}
@keyframes dsScrimOut{to{background-color:rgba(0,0,0,0)}}
@keyframes dsSheetIn{from{transform:translateY(100%)}}
@keyframes dsSheetOut{to{transform:translateY(100%)}}
@keyframes dsPopIn{from{opacity:0;transform:translateY(22px) scale(.94)}}
@keyframes dsPopOut{to{opacity:0;transform:translateY(14px) scale(.95)}}
@keyframes dsFadeIn{from{opacity:0}}
@keyframes dsFadeOut{to{opacity:0}}
@keyframes dsCardIn{from{opacity:0;transform:translateY(34px) scale(.95)}}
@keyframes dsCardOut{to{opacity:0;transform:translateY(20px) scale(.96)}}
@keyframes dsBgIn{from{background-color:rgba(0,0,0,0)}}
@keyframes dsBgOut{to{background-color:rgba(0,0,0,0)}}
@keyframes dsRemIn{from{opacity:0;transform:translateY(40px)}}
@keyframes dsRemOut{to{opacity:0;transform:translateY(40px)}}
@keyframes dsToastIn{from{opacity:0;transform:translateY(26px) scale(.95)}}
@keyframes dsToastOut{to{opacity:0;transform:translateY(14px) scale(.95)}}
@keyframes dsTabIn{from{opacity:.4}}
@keyframes dsItemIn{from{opacity:0;transform:translateY(10px) scale(.97)}}

.fixed.inset-0.z-50{animation:dsScrimIn .5s ease backwards}
.fixed.inset-0.z-50>div{animation:dsPopIn .5s cubic-bezier(.22,1,.36,1) backwards}
@media(max-width:767.98px){
 .fixed.inset-0.z-50.items-end>div{animation:dsSheetIn .5s cubic-bezier(.22,1,.36,1) backwards}
}
.fixed.inset-0.z-50.ds-leaving{animation:dsScrimOut .35s ease forwards;pointer-events:none}
.fixed.inset-0.z-50.ds-leaving>div{animation:dsPopOut .35s cubic-bezier(.4,0,1,1) forwards}
@media(max-width:767.98px){
 .fixed.inset-0.z-50.ds-leaving.items-end>div{animation:dsSheetOut .35s cubic-bezier(.5,0,.9,.4) forwards}
}

.ds-wait,.ds-wait *{animation-play-state:paused!important}
.ds-wait{pointer-events:none!important}
/* ===== Toast ===== */
.fixed.bottom-5>div{animation:dsToastIn .32s cubic-bezier(.22,1,.36,1) backwards}
.fixed.bottom-5>div.ds-leaving-toast{animation:dsToastOut .21s ease forwards;pointer-events:none}
#dsToast{transform:translateX(-50%) translateY(16px) scale(.96);transition:opacity .22s ease,transform .30s cubic-bezier(.22,1,.36,1)}
#dsToast[style*="opacity: 1"]{transform:translateX(-50%) translateY(0) scale(1)}

/* ===== Pindah tab & keranjang ===== */
main>div{animation:dsTabIn .26s ease-out backwards}
.space-y-2.max-h-\[300px\]>div{animation:dsItemIn .22s cubic-bezier(.22,1,.36,1) backwards}
button:not(.pin-key):not(.pin-lock):not(:disabled):active{transform:scale(.97)}
button{transition:transform .14s ease,filter .15s ease,background-color .15s ease,opacity .15s ease}

/* ===== PIN & Login: latar putih (tanpa gelap / blur) + animasi ===== */
#pinOverlay,#dsAuth{background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--dp) 7%,#fff) 100%);-webkit-backdrop-filter:none;backdrop-filter:none}
#pinOverlay{animation:dsFadeIn .5s ease backwards}
#dsAuth{animation:dsFadeIn .5s ease backwards}
.pin-card,#dsAuth .dsa-card{border:1px solid color-mix(in srgb,var(--dp) 14%,#fff);box-shadow:0 18px 48px color-mix(in srgb,var(--dp) 16%,transparent),0 2px 10px rgba(0,0,0,.06)}
.pin-card{animation:dsCardIn .5s cubic-bezier(.22,1,.36,1) backwards}
#dsAuth .dsa-card{animation:dsCardIn .5s cubic-bezier(.22,1,.36,1) backwards}
#dsAuth .dsa-card>*{animation:dsFadeIn .5s ease backwards}
#pinOverlay.ds-out{animation:dsFadeOut .35s ease forwards;pointer-events:none}
#pinOverlay.ds-out .pin-card{animation:dsCardOut .35s cubic-bezier(.4,0,1,1) forwards}
#dsAuth.ds-out{animation:dsFadeOut .35s ease forwards;pointer-events:none}
#dsAuth.ds-out .dsa-card{animation:dsCardOut .35s cubic-bezier(.4,0,1,1) forwards}

/* ===== Popup akun / sinkron (sheet dari bawah) & pengingat backup ===== */
#dsCloud{background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:dsBgIn .5s ease backwards}
#dsCloud .dsc-card{animation:dsSheetIn .5s cubic-bezier(.22,1,.36,1) backwards}
#dsCloud.ds-out{animation:dsBgOut .35s ease forwards;pointer-events:none}
#dsCloud.ds-out .dsc-card{animation:dsSheetOut .35s cubic-bezier(.5,0,.9,.4) forwards}
#dsRemind{animation:dsRemIn .5s cubic-bezier(.22,1,.36,1) backwards}
#dsRemind.ds-out{animation:dsRemOut .35s ease forwards;pointer-events:none}

/* ===== ds-ui-extra ===== */
.ds-swap{animation:dsItemIn .28s cubic-bezier(.22,1,.36,1) backwards}
#dsAsk.ds-out{animation:dsBgOut .35s ease forwards;pointer-events:none}
#dsAsk.ds-out .dsk-card{animation:dsPopOut .35s cubic-bezier(.4,0,1,1) forwards}
@keyframes dsDdIn{from{opacity:0;transform:translateY(-10px) scale(.95)}}@keyframes dsDateIn{from{opacity:0;max-height:0}to{opacity:1;max-height:56px}}@keyframes dsDateOut{from{opacity:1;max-height:56px}to{opacity:0;max-height:0}}@keyframes dsDdInUp{from{opacity:0;transform:translateY(10px) scale(.95)}}@keyframes dsDdOutUp{to{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes dsDdOut{to{opacity:0;transform:translateY(-8px) scale(.96)}}
#dsAsk{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000002;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:dsBgIn .5s ease backwards}
#dsAsk .dsk-card{width:100%;max-width:340px;background:#fff;border-radius:24px;padding:24px 20px 18px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#111827;animation:dsPopIn .5s cubic-bezier(.22,1,.36,1) backwards}
#dsAsk .dsk-ico{width:48px;height:48px;margin:0 auto;border-radius:16px;background:#FEF2F2;color:#DC2626;display:grid;place-items:center;font-size:22px;font-weight:800}
#dsAsk h3{margin:14px 0 0;font-size:16px;font-weight:800}
#dsAsk p{margin:6px 0 0;font-size:12px;line-height:1.5;color:#6B7280}
#dsAsk .dsk-row{display:flex;gap:10px;margin-top:20px}
#dsAsk button{flex:1;height:44px;border-radius:12px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer}
#dsAsk .dsk-no{background:#fff;color:#374151;border:1px solid #E5E7EB}
#dsAsk .dsk-ok{background:#DC2626;color:#fff;border:none}

/* ===== ds-cartbar-css ===== */
#dsCartPanel{scroll-margin-top:10px}@keyframes dsCartBump{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ===== ds-addfx-css ===== */
.dscq{position:absolute;top:-9px;right:-9px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--dp,#6D28D9);color:#fff;font-size:11px;font-weight:800;line-height:1;display:grid;place-items:center;border:2px solid #fff;box-sizing:border-box;animation:dsCartBump .35s ease}
.dsfly{position:fixed;left:0;top:0;z-index:1000001;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:999px;background:var(--dp,#6D28D9);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.3);pointer-events:none}

.ds-pop{display:inline-block;animation:dsCartBump .32s cubic-bezier(.22,1,.36,1)}
.ds-num{animation:dsNumIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes dsNumIn{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
button.group[data-q]{transition:border-color .25s ease,box-shadow .25s ease,transform .14s ease,background-color .2s ease}

/* ===== ds-icon-fix ===== */
/* toast: putih 50% transparan, tidak menangkap sentuhan */
.bg-white\/50{background-color:rgba(255,255,255,.5)!important}
/* anti-copy: teks UI tidak bisa diblok/ditahan, kolom input tetap normal */
html,body,#root,#root *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#root input,#root textarea,#root select,#root [contenteditable="true"],#root [contenteditable="true"] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg{-webkit-user-drag:none;user-drag:none}
.inline-flex>svg+*{min-width:0}
@media(max-width:300px){
body>#root>div>div.max-w-\[1280px\]>div>button.shadow-soft{font-size:8px!important;letter-spacing:-.06em;padding:6px 0!important}
}

/* ===== ds-feat-css ===== */
@media(min-width:768px){.dsf-sh{max-width:440px}}
.dsf-sh{border-color:color-mix(in srgb,var(--dp,#6D28D9) 14%,#fff);padding-bottom:env(safe-area-inset-bottom,0px);color:#111827}
.dsf-hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid #E5E7EB;font-size:15px}
.dsf-hd b{flex:1;min-width:0;font-weight:800;word-break:break-word}
.dsf-hi{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--dp,#6D28D9);color:#fff;flex:none}
.dsf-x{flex:none;height:32px;padding:0 12px;border-radius:10px;border:1px solid #E5E7EB;background:#fff;font-weight:700;font-size:12px;font-family:inherit}
.dsf-bd{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.dsf-l{font-size:12px;font-weight:700;color:#6B7280}
.dsf-h,.dsf-p{font-size:12px;color:#6B7280;line-height:1.55;margin:0;word-break:break-word}
.dsf-in{width:100%;box-sizing:border-box;border:1px solid #E5E7EB;border-radius:14px;padding:11px 13px;font:inherit;font-size:14px;background:#fff;color:#111827;outline:0}
.dsf-msg{border:1px solid #E5E7EB;border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.5;background:#fff;color:#111827;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;max-height:46vh}
.dsf-sh.dsf-fx{display:flex;flex-direction:column;overflow:hidden}.dsf-fx .dsf-bd{flex:1 1 auto;min-height:0;overflow:hidden}.dsf-fx .dsf-bd>*{flex:none}.dsf-fx .dsf-bd>.dsf-paper{flex:1 1 auto;min-height:0;overflow:auto}.dsf-fx .dsf-hd,.dsf-fx .dsf-ft{flex:none}.dsf-ft{padding:8px 20px 22px}
.dsf-paper canvas{flex:none;display:block;margin:0 auto;width:100%;height:auto;background:#fff;border:1px solid #E5E7EB;border-radius:14px}
.dsf-in:focus{border-color:var(--dp,#6D28D9)}
.dsf-ph{display:flex;gap:8px}.dsf-ph .dsf-in{flex:1;min-width:0}.dsf-ph .dsf-ct{width:44px;flex:none;padding:0}
.dsf-bt{width:100%;min-height:46px;border:0;border-radius:14px;background:var(--dp,#6D28D9);color:#fff;font:inherit;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;text-align:center}
.dsf-bt.wa{background:#059669}
.dsf-bt.ghost{background:#fff;color:var(--dp,#6D28D9);border:1px solid var(--dp,#6D28D9)}
.dsf-bt.dis{opacity:.4;pointer-events:none}
.dsf-bt.warn{background:#DC2626;color:#fff;border-color:#DC2626}
.dsf-box{border:1px solid #E5E7EB;border-radius:16px;background:#F9FAFB;padding:6px 12px}
.dsf-box>div{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;font-size:12px;border-bottom:1px dashed #E5E7EB}
.dsf-box>div:last-child{border-bottom:0}
.dsf-box span{color:#6B7280;min-width:0;word-break:break-word}
.dsf-box b{flex:none;text-align:right;font-weight:800}
.dsf-bt.danger{background:#DC2626}

/* ===== ds-feat2-css ===== */
.f2s{border-color:var(--ds-b,#E5E7EB)!important}
.f2s .dsf-hd{border-bottom:0;padding:20px 20px 0}
.f2s .dsf-hi{width:auto;height:auto;background:none;color:var(--ds-p,#7C3AED);border-radius:0}
.f2s .dsf-hd b{font-size:18px;font-weight:800}
.f2s .dsf-x{height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--ds-b,#E5E7EB);background:#fff;font-weight:700;font-size:12px}
.f2s .dsf-bd{padding:12px 20px 22px;gap:12px}
.f2s .dsf-l{font-size:11px;font-weight:700;text-transform:uppercase;color:#1F2937}
.f2s .dsf-in{height:44px;border-radius:12px;border:1px solid var(--ds-b,#E5E7EB);background:var(--ds-l2,#fff);padding:0 16px;font-size:13px}
.f2s .dsf-bt{min-height:44px;height:44px;border-radius:12px;background:var(--ds-p,#7C3AED);font-size:13px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.f2s .dsf-bt.ghost{background:var(--ds-l,#F5F3FF);color:var(--ds-p,#7C3AED);border:1px solid var(--ds-b,#E5E7EB);box-shadow:none}
.f2s .dsf-bt.warn{background:#DC2626;color:#fff;border-color:#DC2626}
.f2s .dsf-box{border-radius:16px;border:1px solid var(--ds-b,#E5E7EB);background:var(--ds-l,#F5F3FF)}
.f2s .f2-cnt{width:84px;padding:0 8px;height:40px}
.f2-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.f2-row,.f2-due{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--ds-b,#E5E7EB);border-radius:16px;background:#fff}
.f2-row{justify-content:space-between;align-items:center}
.f2-due{flex-direction:column}
.f2-m{min-width:0;flex:1}
.f2-m b{display:block;font-size:13px;word-break:break-word}
.f2-m small,.f2-r small{display:block;font-size:11px;color:#6B7280;line-height:1.4;word-break:break-word}
.f2-r{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.f2-r b{font-size:13px}
.f2-red{color:#DC2626}.f2-grn{color:#059669}
.f2-chips{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:12px;border:1px solid var(--ds-b,#E5E7EB);background:var(--ds-l,#F5F3FF);align-self:flex-start}
.f2-ch{height:32px;padding:0 12px;border-radius:8px;border:0;background:transparent;font:inherit;font-size:12px;font-weight:600;color:#6B7280}
.f2-ch.on{background:#fff;color:var(--ds-p,#7C3AED);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.f2-sm{height:32px;padding:0 12px;border-radius:12px;border:1px solid var(--ds-b,#E5E7EB);background:#fff;color:#059669;font-weight:700;font-size:12px;font-family:inherit}
.f2-rk{justify-content:flex-start}
.f2-no{flex:none;width:24px;height:24px;border-radius:8px;background:var(--ds-l,#F5F3FF);color:var(--ds-p,#7C3AED);display:grid;place-items:center;font-size:12px;font-weight:800}
.f2-bar{display:block;height:6px;border-radius:99px;background:var(--ds-l,#F3F4F6);margin-top:6px;overflow:hidden}
.f2-bar u{display:block;height:100%;background:var(--ds-p,#7C3AED);border-radius:99px;text-decoration:none}

/* ===== ds-custom-ui ===== */
.dsd{position:relative;display:flex;flex-direction:column}
.dsd-b{width:100%;height:44px;border-radius:12px;border:1px solid var(--ds-b,#E5E7EB);background:#fff;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font:inherit;font-size:13px;font-weight:500;color:#1F2937;text-align:left;transition:border-color .22s ease,box-shadow .22s ease}
.dsd.open .dsd-b{border-color:var(--ds-p,#7C3AED);box-shadow:0 0 0 3px var(--ds-l,#F5F3FF)}
.dsd-b i{font-style:normal;font-size:9px;color:var(--ds-p,#7C3AED);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.dsd.open .dsd-b i{transform:rotate(180deg)}
.dsd-m{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;max-height:260px;overflow:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--ds-b,#E5E7EB);border-radius:16px;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);transform-origin:top right;pointer-events:none}
.dsd.up .dsd-m{top:auto;bottom:calc(100% + 6px);transform-origin:bottom right}
.dsd.open .dsd-m,.dsd.closing .dsd-m{display:block}
.dsd.open .dsd-m{pointer-events:auto;animation:dsDdIn .3s cubic-bezier(.22,1,.36,1) backwards}
.dsd.up.open .dsd-m{animation-name:dsDdInUp}
.dsd.closing .dsd-m{animation:dsDdOut .2s cubic-bezier(.4,0,1,1) forwards}
.dsd.up.closing .dsd-m{animation-name:dsDdOutUp}
.dsd-i{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 12px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#1F2937;text-align:left;transition:background-color .15s ease}
.dsd-i.on{background:var(--ds-l,#F5F3FF);color:var(--ds-p,#7C3AED)}
.dsd-ck{opacity:0}
.dsd-i.on .dsd-ck{opacity:1}
.dsd.open .dsd-i{animation:dsItemIn .3s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*25ms)}

/* ===== ds-fontlock ===== */
/* kunci ukuran font: tidak ikut pengaturan ukuran font bawaan browser/HP */
html{font-size:16px!important;-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
body,button,input,select,textarea{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}

/* ===== ds-polish ===== */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{transition:border-color .24s var(--ease)}
@media(max-width:480px){
main .flex-wrap.items-center.gap-2>button[type=button][style*="min-width"]{flex:1 1 calc(100% - 62px);min-width:0!important}
}

/* ===== ds-fx-css ===== */
/* ===== indikator geser ===== */
.ds-rel{position:relative}
.ds-seg>button{position:relative;z-index:1;transition:color .28s ease,transform .16s ease,flex-grow .28s cubic-bezier(.22,1,.36,1)!important}
.ds-seg>button:active{transform:scale(.94)}
.ds-seg>.ds-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;will-change:transform,width;transition:transform .42s cubic-bezier(.34,1.38,.64,1),width .42s cubic-bezier(.34,1.38,.64,1),height .2s ease,background-color .3s ease,opacity .2s ease,scale .2s ease}
.ds-seg>.ds-ind.ds-off{opacity:0;scale:.55}
.ds-seg>.ds-ind.ds-ipop{animation:dsIndPop .42s cubic-bezier(.34,1.5,.64,1) backwards}
@keyframes dsIndPop{from{opacity:0;scale:.55}}
.ds-seg>.ds-ind.ds-go{animation:dsIndStretch .42s ease}
@keyframes dsIndStretch{35%{scale:1.07 .93}}
.ds-seg>button.shadow-soft:not([data-ds-probe]),.ds-seg>button.on:not([data-ds-probe]),.ds-seg>button[style*="background-color"]:not([style*="background-color: transparent"]):not([data-ds-probe]){background:transparent!important;box-shadow:none!important;border-color:transparent!important}
/* ===== perpindahan menu ===== */
html[data-ds-dir] main>div{transform-origin:50% var(--ds-oy,50vh);will-change:transform,opacity}
main>div{animation-name:dsEnter}
html[data-ds-dir] main>div{animation-duration:.46s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html[data-ds-dir] main>div.ds-out-n{animation:dsOutN .13s cubic-bezier(.4,0,1,1) forwards}
html[data-ds-dir] main>div.ds-out-p{animation:dsOutP .13s cubic-bezier(.4,0,1,1) forwards}
@keyframes dsEnter{from{opacity:var(--ds-o,.4);transform:var(--ds-t,none)}}
@keyframes dsOutN{to{opacity:.15;transform:translate3d(calc(var(--ds-dx,56px)*-.7),0,0) scale(.95)}}
@keyframes dsOutP{to{opacity:.15;transform:translate3d(calc(var(--ds-dx,56px)*.7),0,0) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.ds-seg>.ds-ind{transition:none}}

/* ===== penyesuaian ukuran layar ===== */
/* HP: label menu bawah ("Dashboard") tidak meluber dari pilnya */
@media(min-width:341px) and (max-width:539px){
body>#root>div>div.max-w-\[1280px\]>div>button{font-size:clamp(7.4px,2.3vw,9.2px)!important;letter-spacing:-.03em!important}
}
/* HP sangat sempit: tab aktif melebar secukupnya agar labelnya muat */
@media(max-width:340px){
body>#root>div>div.max-w-\[1280px\]>div>button.shadow-soft{flex-grow:1.45}
}
/* tablet kecil / landscape: semua 7 tab (termasuk Toko) muat di dalam menu */
@media(min-width:768px) and (max-width:870px){
body>#root>div>div.max-w-\[1280px\]>div>button{flex:1 1 auto;min-width:0;padding-left:clamp(6px,1.2vw,14px)!important;padding-right:clamp(6px,1.2vw,14px)!important;gap:clamp(3px,.6vw,8px)!important;font-size:clamp(12px,1.55vw,14px)!important;justify-content:center}
}
@media(min-width:301px) and (max-width:340px){
body>#root>div>div.max-w-\[1280px\]>div>button{font-size:clamp(7.1px,2.4vw,8.2px)!important;letter-spacing:-.03em!important}
}

/* ===== ds-hist ===== */
.ds-hdates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ds-hdates button[type=button][style*="min-width"]{width:100%;min-width:0!important}
@media(max-width:300px){.ds-hdates{grid-template-columns:1fr}}

/* ===== ds-scan-css ===== */
#root input[placeholder^="Cari produk cepat"]{padding-right:56px}
.dss-open{position:absolute;right:6px;top:50%;width:36px;height:36px;margin-top:-18px;border:0;border-radius:11px;background:var(--dp,#7C3AED);color:#fff;display:grid;place-items:center;cursor:pointer;animation:dsItemIn .28s cubic-bezier(.22,1,.36,1) backwards}
.dss-open:hover{filter:brightness(1.08)}
.dss-vf{position:relative;width:100%;aspect-ratio:4/3;max-height:42vh;border-radius:18px;background:#0B0F14;overflow:hidden;display:grid;place-items:center}
.dss-vf video,.dss-vf img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.dss-vf img{object-fit:contain;background:#0B0F14}
.dss-ph{position:relative;color:#9CA3AF;font-size:12px;text-align:center;padding:0 28px;line-height:1.55}
.dss-c{position:absolute;width:26px;height:26px;border:3px solid rgba(255,255,255,.92);transition:border-color .25s ease,transform .32s cubic-bezier(.22,1,.36,1)}
.dss-c.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:9px}
.dss-c.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-top-right-radius:9px}
.dss-c.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-bottom-left-radius:9px}
.dss-c.br{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:9px}
.dss-vf.ok .dss-c{border-color:#34D399}
.dss-vf.ok .dss-c.tl{transform:translate(8px,8px)}
.dss-vf.ok .dss-c.tr{transform:translate(-8px,8px)}
.dss-vf.ok .dss-c.bl{transform:translate(8px,-8px)}
.dss-vf.ok .dss-c.br{transform:translate(-8px,-8px)}
.dss-line{position:absolute;left:14%;right:14%;top:18%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--dp,#7C3AED),transparent);box-shadow:0 0 12px var(--dp,#7C3AED);display:none;animation:dssSweep 1.9s ease-in-out infinite}
.dss-vf.live:not(.ok) .dss-line,.dss-vf.busy .dss-line{display:block}
@keyframes dssSweep{0%,100%{top:18%}50%{top:80%}}
.dss-st{font-size:12px;color:#6B7280;text-align:center;min-height:18px;margin:0;word-break:break-word}
.dss-st.err{color:#DC2626}
.dss-row{display:flex;gap:8px}
.dss-row>.dsf-bt{flex:1;min-width:0;min-height:44px;font-size:12.5px;padding:8px 6px;gap:6px;cursor:pointer}
.dss-res{display:grid;grid-template-rows:0fr;margin-top:-10px;transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1),margin-top .34s cubic-bezier(.22,1,.36,1)}
.dss-res.on{grid-template-rows:1fr;margin-top:0}
.dss-res>div{min-height:0;overflow:hidden}
.dss-card{border:1px solid color-mix(in srgb,var(--dp,#7C3AED) 22%,#fff);background:color-mix(in srgb,var(--dp,#7C3AED) 6%,#fff);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;animation:dsItemIn .28s cubic-bezier(.22,1,.36,1) backwards}
.dss-card.nf{border-color:#FECACA;background:#FEF2F2}
.dss-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dss-top>div{min-width:0}
.dss-nm{font-weight:800;font-size:14px;line-height:1.3;word-break:break-word}
.dss-sk{font-size:11px;color:#6B7280;margin-top:2px;word-break:break-word}
.dss-pr{flex:none;font-weight:800;font-size:14px;color:var(--dp,#7C3AED)}
.dss-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid}
.dss-tag.ok{background:#ECFDF5;color:#047857;border-color:#A7F3D0}
.dss-tag.no{background:#FEF2F2;color:#DC2626;border-color:#FECACA}
.dss-raw{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#374151;word-break:break-all;-webkit-user-select:text;user-select:text}
.dss-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dss-tag{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.dss-inc{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--dp,#7C3AED) 28%,#fff);background:#fff;color:var(--dp,#7C3AED)}
.dss-inc[hidden]{display:none}
@keyframes dssTap{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.035)}100%{transform:none}}
.dsf-bt.dss-ok{animation:dssTap .45s cubic-bezier(.22,1,.36,1)}
.dss-cart{display:flex;align-items:center;gap:10px;width:100%;border:1px solid color-mix(in srgb,var(--dp,#7C3AED) 22%,#fff);background:#fff;border-radius:14px;padding:10px 14px;font:inherit;font-size:12.5px;font-weight:700;color:#111827;cursor:pointer;text-align:left;animation:dsItemIn .28s cubic-bezier(.22,1,.36,1) backwards}
.dss-cart[hidden]{display:none}
.dss-cart .dss-ci{color:var(--dp,#7C3AED);display:inline-flex}
.dss-cart .dss-cn{color:#6B7280;min-width:0}
.dss-cart .dss-ct{margin-left:auto;color:var(--dp,#7C3AED);font-weight:800}
.dss-cart .dss-go{color:#6B7280;flex:none}
:root,html{color-scheme:only light!important}
html{background-color:#fff}
@media (prefers-reduced-motion:reduce){.dss-line{animation:none}.dss-res,.dss-c{transition:none}}

/* ===== ds-noscrollbar ===== */
/* tanpa garis penanda scroll; scroll tetap bisa digeser */
*{scrollbar-width:none!important;-ms-overflow-style:none!important}
*::-webkit-scrollbar,*::-webkit-scrollbar-track,*::-webkit-scrollbar-thumb{display:none!important;width:0!important;height:0!important;background:transparent!important}
/* ruang cadangan untuk scrollbar dihilangkan agar kartu simetris kiri-kanan */
.overflow-auto.pr-1,.overflow-y-auto.pr-1{padding-right:0!important}

/* ===== ds-veil ===== */
.fixed.inset-0.z-50[class*="bg-black/"],#dsCloud,#dsAsk{background-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fixed.inset-0.z-50[class*="bg-black/"]::before,#dsCloud::before,#dsAsk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .5s var(--ease-out);animation:dsVeilIn .5s var(--ease-out) backwards}
.ds-under::before{opacity:0}
.fixed.inset-0.z-50.ds-leaving[class*="bg-black/"]::before,#dsCloud.ds-out::before,#dsAsk.ds-out::before{animation:dsVeilOut .35s ease forwards}
.fixed.inset-0.z-50.ds-wait[class*="bg-black/"]::before{animation-play-state:paused!important}
@keyframes dsVeilIn{from{background-color:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}@keyframes dsVeilOut{to{background-color:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}