/* Kasir MonMon — Material Design 3 (Material You), skema "Vibrant" dari seed #7C4DFF + aksen pink & oranye.
   Token warna dibuat dengan material-color-utilities; tipe, bentuk & motion dari /workspace/brand/material. Font Roboto lokal. */
@font-face{font-family:Roboto;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/Roboto-Regular.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/Roboto-Medium.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/Roboto-Bold.woff2) format("woff2")}

/* ---------- Token warna (terang) ---------- */
:root,[data-theme=light]{
  --primary:#6920ff;--on-primary:#fff;--primary-container:#e8deff;--on-primary-container:#4f00d0;
  --secondary:#ba005d;--on-secondary:#fff;--secondary-container:#ffd9e1;--on-secondary-container:#3f001b;
  --tertiary:#914c00;--on-tertiary:#fff;--tertiary-container:#ffdcc4;--on-tertiary-container:#2f1500;
  --error:#ba1a1a;--on-error:#fff;--error-container:#ffdad6;--on-error-container:#93000a;
  --background:#fdf7ff;--surface:#fdf7ff;--on-surface:#1d1a24;--surface-variant:#e7dff2;--on-surface-variant:#494553;
  --outline:#7a7585;--outline-variant:#cac4d5;--inverse-surface:#322f3a;--inverse-on-surface:#f5eefd;--inverse-primary:#cdbdff;
  --surface-dim:#ded7e6;--surface-bright:#fdf7ff;
  --sc-lowest:#fff;--sc-low:#f8f1ff;--sc:#f2ebfa;--sc-high:#ece5f4;--sc-highest:#e6e0ef;
  /* warna kategori (custom colors, harmonis dengan primary) */
  --c-pink:#d1006a;--c-pink-con:#ffd9e1;--c-pink-on:#3f001b;
  --c-orange:#a35600;--c-orange-con:#ffdcc4;--c-orange-on:#2f1500;
  --c-teal:#007967;--c-teal-con:#68fadd;--c-teal-on:#00201a;
  --c-blue:#0063e3;--c-blue-con:#d9e2ff;--c-blue-on:#001945;
  --c-green:#007c26;--c-green-con:#72ff7e;--c-green-on:#002105;
  --c-yellow:#866600;--c-yellow-con:#ffdf99;--c-yellow-on:#251a00;
  --c-violet:#8b39ee;--c-violet-con:#eddcff;--c-violet-on:#290055;
  --c-red:var(--error);--c-red-con:var(--error-container);--c-red-on:var(--on-error-container);
  --c-neutral:var(--outline);--c-neutral-con:var(--sc-highest);--c-neutral-on:var(--on-surface-variant);
  --hero:linear-gradient(125deg,#6920ff 0%,#a12bff 42%,#ff2e88 78%,#ff8a00 115%);
  --ring-a:#7c4dff;--ring-b:#ff2e88;--ring-c:#ff8a00;
  --scrim:rgba(0,0,0,.4);--shadow-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);--shadow-3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  --amt:1;color-scheme:light;
}
/* ---------- Token warna (gelap) ---------- */
[data-theme=dark]{
  --primary:#cdbdff;--on-primary:#370096;--primary-container:#4f00d0;--on-primary-container:#e8deff;
  --secondary:#ffb1c5;--on-secondary:#650030;--secondary-container:#8e0046;--on-secondary-container:#ffd9e1;
  --tertiary:#ffb77f;--on-tertiary:#4e2600;--tertiary-container:#6f3900;--on-tertiary-container:#ffdcc4;
  --error:#ffb4ab;--on-error:#690005;--error-container:#93000a;--on-error-container:#ffdad6;
  --background:#14121c;--surface:#14121c;--on-surface:#e6e0ef;--surface-variant:#494553;--on-surface-variant:#cac4d5;
  --outline:#948e9f;--outline-variant:#494553;--inverse-surface:#e6e0ef;--inverse-on-surface:#322f3a;--inverse-primary:#6920ff;
  --surface-dim:#14121c;--surface-bright:#3b3743;
  --sc-lowest:#0f0d17;--sc-low:#1d1a24;--sc:#211e29;--sc-high:#2b2833;--sc-highest:#36333e;
  --c-pink:#ffb1c5;--c-pink-con:#8e0046;--c-pink-on:#ffd9e1;
  --c-orange:#ffb77f;--c-orange-con:#6f3900;--c-orange-on:#ffdcc4;
  --c-teal:#44ddc1;--c-teal-con:#005145;--c-teal-on:#68fadd;
  --c-blue:#b0c6ff;--c-blue-con:#00429b;--c-blue-on:#d9e2ff;
  --c-green:#54e164;--c-green-con:#005316;--c-green-on:#72ff7e;
  --c-yellow:#f7be00;--c-yellow-con:#5a4300;--c-yellow-on:#ffdf99;
  --c-violet:#d8b9ff;--c-violet-con:#6300bb;--c-violet-on:#eddcff;
  --hero:linear-gradient(125deg,#4f00d0 0%,#7a1fd6 45%,#b0005a 85%,#a35600 120%);
  --ring-a:#cdbdff;--ring-b:#ffb1c5;--ring-c:#ffb77f;
  --scrim:rgba(0,0,0,.6);color-scheme:dark;
}
/* Ukuran angka uang (Pengaturan → Tampilan, per perangkat) */
[data-amount=besar]{--amt:1.22}
[data-amount=sangat]{--amt:1.45}

/* ---------- Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:16px}
body{margin:0;background:var(--background);color:var(--on-surface);font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.875rem;line-height:1.43;letter-spacing:.25px;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
img{max-width:100%;display:block}
a{color:var(--primary)}
h1,h2,h3,h4,p{margin:0}
.num,.amt,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;letter-spacing:0}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.ico{width:1.5rem;height:1.5rem;fill:currentColor;flex:none}
.ico--20{width:1.25rem;height:1.25rem}.ico--32{width:2rem;height:2rem}
.nav-ico .f{display:none}
[aria-current=page] .nav-ico .o{display:none}[aria-current=page] .nav-ico .f{display:inline}
.headline-m{font-size:1.75rem;line-height:2.25rem;font-weight:400}
.headline-s{font-size:1.5rem;line-height:2rem;font-weight:400}
.title-l{font-size:1.375rem;line-height:1.75rem;font-weight:400}
.title-m{font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:.15px}
.label-m{font-size:.75rem;line-height:1rem;font-weight:500;letter-spacing:.5px;color:var(--on-surface-variant)}
.body-s{font-size:.75rem;line-height:1rem;letter-spacing:.4px;color:var(--on-surface-variant)}
.muted{color:var(--on-surface-variant)}.helper{color:var(--on-surface-variant)}
.spacer{flex:1}

/* ---------- Angka uang: besar & tebal secara default, ikut skala --amt ---------- */
.amt{font-weight:700;letter-spacing:-.01em;white-space:nowrap;line-height:1.15}
.amt--s{font-size:calc(1rem*var(--amt))}
.amt--m{font-size:calc(1.25rem*var(--amt))}
.amt--l{font-size:calc(1.625rem*var(--amt))}
.amt--xl{font-size:calc(2.25rem*var(--amt))}
.amt--xxl{font-size:calc(2.75rem*var(--amt))}
.amt--kpi{font-size:calc(1.875rem*var(--amt))}
.amt--hero{font-size:calc(3.5rem*var(--amt));letter-spacing:-.02em}
@media (max-width:599px){.amt--hero{font-size:calc(2.5rem*var(--amt))}.amt--xxl{font-size:calc(2.375rem*var(--amt))}.amt--xl{font-size:calc(2rem*var(--amt))}.amt--kpi{font-size:calc(1.5rem*var(--amt))}}

/* ---------- Top app bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;height:4rem;background:var(--sc);color:var(--on-surface);display:flex;align-items:center;gap:.25rem;padding:0 .5rem;z-index:50;padding-top:env(safe-area-inset-top)}
.topbar__brand{display:flex;align-items:center;gap:.625rem;min-width:0;color:inherit;text-decoration:none;padding:0 .5rem;font-size:1.25rem;letter-spacing:0}
.topbar__brand img{width:2.5rem;height:2.5rem;object-fit:contain;flex:none}
.topbar__name{white-space:nowrap}.topbar__name b{font-weight:700;background:linear-gradient(90deg,var(--primary),var(--c-pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar__event{font-size:.875rem;color:var(--on-surface-variant);background:var(--secondary-container);color:var(--on-secondary-container);padding:.25rem .75rem;border-radius:999px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32vw;font-weight:500}
.topbar__event:empty{display:none}
.topbar__user{display:flex;align-items:center;gap:.5rem;height:2.5rem;padding:0 .75rem 0 .25rem;border:0;border-radius:999px;background:transparent;cursor:pointer;font-weight:500;margin-left:.25rem}
.topbar__user:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.topbar__amt{position:relative}
.amt-badge{position:absolute;right:-2px;top:2px;min-width:1.25rem;height:1rem;padding:0 .25rem;border-radius:999px;background:var(--c-pink);color:#fff;font-size:.625rem;font-weight:700;line-height:1rem;text-align:center}
[data-theme=dark] .amt-badge{color:#3f001b}
.avatar{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-size:.8125rem;font-weight:700;color:#fff;background:var(--primary);flex:none}
@media (max-width:599px){.topbar__event{display:none}.topbar__brand{font-size:1.125rem;padding:0 .25rem}}
.live-dot{width:.5rem;height:.5rem;border-radius:50%;background:#2ec24a;display:inline-block;animation:pulse 2s infinite}
.offline-banner{position:fixed;top:4rem;left:0;right:0;z-index:45;background:var(--c-yellow-con);color:var(--c-yellow-on);font-size:.8125rem;font-weight:500;padding:.375rem 1rem;text-align:center;display:none}
body.is-offline .offline-banner{display:block}

/* ---------- Navigation drawer / rail ---------- */
.side-nav{position:fixed;top:0;bottom:0;left:0;width:min(22.5rem,86vw);background:var(--sc-low);z-index:60;transform:translateX(-105%);transition:transform 300ms cubic-bezier(.05,.7,.1,1);overflow-y:auto;display:flex;flex-direction:column;padding:.75rem .75rem calc(.75rem + env(safe-area-inset-bottom));border-radius:0 1rem 1rem 0}
.side-nav.is-open{transform:none;box-shadow:var(--shadow-3)}
.side-nav__head{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem 1rem;font-size:1.125rem}
.side-nav__head img{width:2.5rem;height:2.5rem;object-fit:contain}
.side-nav__list{list-style:none;margin:0;padding:0}
.side-nav__item a{display:flex;align-items:center;gap:.75rem;height:3.5rem;padding:0 1.5rem 0 1rem;border-radius:999px;color:var(--on-surface-variant);text-decoration:none;font-weight:500;font-size:.875rem;letter-spacing:.1px;position:relative;white-space:nowrap}
.side-nav__item a:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent);color:var(--on-surface)}
.side-nav__item a[aria-current=page]{background:var(--primary-container);color:var(--on-primary-container);font-weight:700}
.side-nav__ind{display:grid;place-items:center}
.side-nav__short{display:none}
.side-nav__divider{height:1px;background:var(--outline-variant);margin:.5rem 1rem}
.side-nav__footer{margin-top:auto;padding:1rem .5rem 0;display:flex;gap:.75rem;align-items:flex-end}
.side-nav__footer img{width:56px;height:56px;object-fit:contain;flex:none}
.side-nav__footer p{font-size:.8125rem;color:var(--on-secondary-container);background:var(--secondary-container);padding:.625rem .875rem;border-radius:1rem 1rem 1rem .25rem}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:55;opacity:0;pointer-events:none;transition:opacity 250ms}
.scrim.is-open{opacity:1;pointer-events:auto}
.content{padding:4rem 0 0;min-height:100vh;outline:none}
/* rail: tablet / laptop kecil */
@media (min-width:840px){
  .topbar__menu.hide-lg{display:none}
  .scrim{display:none}
  .side-nav{top:4rem;width:5.5rem;transform:none;border-radius:0;background:var(--sc);padding:.5rem 0;box-shadow:none!important;overflow-x:hidden}
  .side-nav__head,.side-nav__footer{display:none}
  .side-nav__item a{flex-direction:column;justify-content:center;gap:.25rem;height:3.75rem;padding:0;background:none!important;border-radius:0;font-size:.75rem}
  .side-nav__ind{width:3.5rem;height:2rem;border-radius:999px;transition:background 200ms}
  .side-nav__item a:hover .side-nav__ind{background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
  .side-nav__item a[aria-current=page] .side-nav__ind{background:var(--primary-container);color:var(--on-primary-container)}
  .side-nav__item a[aria-current=page]{color:var(--on-surface)}
  .side-nav__label{display:none}.side-nav__short{display:block}
  .side-nav__divider{margin:.25rem 1rem}
  .content{padding-left:5.5rem}
}
/* drawer tetap: layar lebar */
@media (min-width:1280px){
  .side-nav{width:17.5rem;padding:.75rem;background:var(--sc)}
  .side-nav__footer{display:flex}
  .side-nav__item a{flex-direction:row;justify-content:flex-start;gap:.75rem;height:3.5rem;padding:0 1.5rem 0 1rem;border-radius:999px;font-size:.875rem}
  .side-nav__item a[aria-current=page]{background:var(--primary-container)!important;color:var(--on-primary-container)}
  .side-nav__item a:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent)!important}
  .side-nav__ind{width:auto;height:auto;background:none!important}
  .side-nav__label{display:block}.side-nav__short{display:none}
  .content{padding-left:17.5rem}
}
.page{padding:1rem;max-width:96rem;margin:0 auto}
.view:has(.fab) .page{padding-bottom:7rem}
@media (min-width:600px){.page{padding:1.5rem}}
.page-header{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;margin-bottom:1.25rem}
.page-header__title{flex:1 1 auto;min-width:12rem}
.page-header__title h1{font-size:2rem;line-height:2.5rem;font-weight:400;letter-spacing:0}
.page-header__title p{color:var(--on-surface-variant);margin-top:.25rem;font-size:.9375rem}
.page-header__actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:599px){.page-header__title h1{font-size:1.75rem;line-height:2.25rem}}

/* ---------- Tombol (M3 common buttons) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.5rem;padding:0 1.5rem;border:0;border-radius:999px;font-size:.875rem;font-weight:500;letter-spacing:.1px;line-height:1.25rem;cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;transition:box-shadow 200ms,background 200ms,transform 120ms cubic-bezier(.2,0,0,1)}
.btn .ico{width:1.125rem;height:1.125rem;margin-left:-.5rem}
.btn::before,.icon-btn::before,.chip::before,.seg__btn::before,.fab::before,.product::before,.list-row--btn::before,.pay-method::before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity 150ms;pointer-events:none;border-radius:inherit;z-index:-1}
.btn:hover::before,.icon-btn:hover::before,.chip:hover::before,.seg__btn:hover::before,.fab:hover::before,.product:hover::before,.list-row--btn:hover::before,.pay-method:hover::before{opacity:.08}
.btn:active::before,.icon-btn:active::before,.chip:active::before,.seg__btn:active::before,.fab:active::before,.product:active::before,.list-row--btn:active::before,.pay-method:active::before{opacity:.12}
.btn:active{transform:scale(.98)}
.btn--filled{background:var(--primary);color:var(--on-primary)}
.btn--filled:hover{box-shadow:var(--shadow-1)}
.btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.btn--outlined{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1px var(--outline)}
.btn--text{background:transparent;color:var(--primary);padding:0 .75rem}
.btn--text .ico{margin-left:0}
.btn--danger{background:var(--error);color:var(--on-error)}
.btn--danger-text{background:transparent;color:var(--error);padding:0 .75rem}
.btn--danger-text .ico{margin-left:0}
.btn:disabled,.btn[aria-disabled=true]{background:color-mix(in srgb,var(--on-surface) 12%,transparent);color:color-mix(in srgb,var(--on-surface) 38%,transparent);box-shadow:none;cursor:not-allowed}
.btn--text:disabled,.btn--outlined:disabled,.btn--danger-text:disabled{background:transparent}
.btn:disabled::before{display:none}
.btn--sm{min-height:2rem;padding:0 1rem;font-size:.8125rem}
.btn--sm .ico{width:1rem;height:1rem;margin-left:-.25rem}
.btn--lg{min-height:3rem;padding:0 1.75rem;font-size:1rem}
.btn--xl{min-height:3.75rem;padding:0 2rem;font-size:1.125rem;font-weight:700;border-radius:1.25rem}
.btn--xl .ico{width:1.5rem;height:1.5rem}
.btn--block{width:100%}
.btn--icon{padding:0;width:2.5rem}
.icon-btn{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:transparent;color:var(--on-surface-variant);display:inline-grid;place-items:center;cursor:pointer;flex:none;isolation:isolate;-webkit-tap-highlight-color:transparent}
.icon-btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
.icon-btn--filled{background:var(--primary);color:var(--on-primary)}
.icon-btn--danger{color:var(--error)}
.icon-btn:disabled{opacity:.38;cursor:not-allowed}
.icon-btn:disabled::before{display:none}
.fab{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:35;display:inline-flex;align-items:center;gap:.75rem;height:3.5rem;min-width:3.5rem;padding:0 1.25rem 0 1rem;border:0;border-radius:1rem;background:var(--tertiary-container);color:var(--on-tertiary-container);font-weight:700;font-size:.9375rem;letter-spacing:.1px;cursor:pointer;box-shadow:var(--shadow-3);isolation:isolate;overflow:hidden;transition:transform 200ms cubic-bezier(.2,0,0,1)}
.fab:active{transform:scale(.96)}
@media (min-width:840px){.fab{right:1.5rem;bottom:1.5rem;height:4rem;border-radius:1.25rem;font-size:1rem;padding:0 1.5rem 0 1.25rem}}

/* ---------- Text field ---------- */
.field{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.375rem}
.field__label{font-size:.8125rem;font-weight:500;color:var(--on-surface-variant);letter-spacing:.25px}
.field__input{width:100%;height:3.5rem;padding:0 1rem;background:var(--sc-lowest);border:1px solid var(--outline);border-radius:.75rem;color:var(--on-surface);font-size:1rem;outline:none;transition:border-color 150ms,box-shadow 150ms}
[data-theme=dark] .field__input{background:var(--sc-high)}
.field__input:hover{border-color:var(--on-surface)}
.field__input:focus{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.field__input::placeholder{color:color-mix(in srgb,var(--on-surface-variant) 70%,transparent)}
.field.is-invalid .field__input,.field__input[aria-invalid=true]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.field__input--lg{height:3.75rem;font-size:1.25rem}
.field__input--xl{height:4.25rem;font-size:calc(2rem*var(--amt));font-weight:700;letter-spacing:-.01em}
.field__textarea{height:auto;min-height:4.5rem;padding:.875rem 1rem;resize:vertical;line-height:1.4}
.field__select{appearance:none;padding-right:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%237a7585'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.5rem}
.field__error{font-size:.8125rem;color:var(--error);font-weight:500}
.field__help{font-size:.8125rem;color:var(--on-surface-variant);margin-top:.125rem}
.field__help .ico{width:1rem;height:1rem;vertical-align:-3px}
.field__wrap{position:relative;display:flex;align-items:center}
.field__prefix{position:absolute;left:1rem;color:var(--on-surface-variant);pointer-events:none;font-weight:500}
.field__wrap--prefix .field__input{padding-left:2.75rem}
.field__wrap--prefix .field__input--xl{padding-left:3.5rem}
.field__wrap--prefix:has(.field__input--xl) .field__prefix{font-size:1.25rem}
.field--icon .field__lead{position:absolute;left:.875rem;color:var(--on-surface-variant);pointer-events:none}
.field--icon .field__input{padding-left:3.25rem}
.field--password .field__input{padding-right:3.5rem}
.field__toggle{position:absolute;right:.5rem}
.field__toggle .pw-hide{display:none}.field__toggle[aria-pressed=true] .pw-hide{display:block}.field__toggle[aria-pressed=true] .pw-show{display:none}
.search{position:relative;display:flex;align-items:center;width:100%}
.search>.ico{position:absolute;left:1rem;color:var(--on-surface-variant);pointer-events:none}
.search__input{width:100%;height:3.5rem;border:0;border-radius:999px;background:var(--sc-high);padding:0 3.5rem;font-size:1rem;color:var(--on-surface);outline:none}
.search__input:focus{box-shadow:inset 0 0 0 2px var(--primary)}
.search__input::-webkit-search-cancel-button{display:none}
.search__clear{position:absolute;right:.5rem;width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--on-surface-variant)}
.form-grid{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media (min-width:600px){.form-grid--2{grid-template-columns:1fr 1fr}}

/* Switch */
.switch{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;user-select:none;font-weight:500}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch__track{width:3.25rem;height:2rem;border-radius:999px;background:var(--sc-highest);box-shadow:inset 0 0 0 2px var(--outline);position:relative;transition:background 200ms;flex:none}
.switch__track::after{content:"";position:absolute;top:.5rem;left:.5rem;width:1rem;height:1rem;border-radius:50%;background:var(--outline);transition:all 250ms cubic-bezier(.2,0,0,1)}
.switch input:checked+.switch__track{background:var(--primary);box-shadow:none}
.switch input:checked+.switch__track::after{left:1.5rem;top:.25rem;width:1.5rem;height:1.5rem;background:var(--on-primary)}
.switch input:focus-visible+.switch__track{outline:3px solid var(--primary);outline-offset:2px}

/* Segmented buttons */
.seg{display:flex;width:100%;min-height:2.75rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--outline);overflow:hidden}
.seg__btn{position:relative;flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:0 .75rem;border:0;border-left:1px solid var(--outline);background:transparent;color:var(--on-surface);cursor:pointer;font-weight:500;font-size:.875rem;white-space:nowrap;isolation:isolate}
.seg__btn:first-child{border-left:0}
.seg__btn .ico{width:1.125rem;height:1.125rem}
.seg__btn[aria-pressed=true],.seg__btn[aria-selected=true]{background:var(--secondary-container);color:var(--on-secondary-container);font-weight:700}
@media (max-width:420px){.seg--3 .seg__btn{font-size:.8125rem;padding:0 .375rem}.seg--3 .seg__btn .ico{display:none}}

/* Chips */
.chips{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:.25rem 0}
.chips::-webkit-scrollbar{display:none}
.chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 1rem;border-radius:.75rem;border:0;box-shadow:inset 0 0 0 1px var(--outline-variant);background:var(--sc-lowest);color:var(--on-surface-variant);cursor:pointer;white-space:nowrap;font-weight:500;font-size:.875rem;isolation:isolate;--cc:var(--primary);--ccon:var(--secondary-container);--con:var(--on-secondary-container)}
[data-theme=dark] .chip{background:transparent}
.chip .ico{width:1.125rem;height:1.125rem;margin-left:-.25rem}
.chip__dot{width:.625rem;height:.625rem;border-radius:50%;background:var(--cc);flex:none}
.chip .count{font-size:.75rem;font-weight:700;background:color-mix(in srgb,currentColor 12%,transparent);border-radius:999px;padding:0 .4rem;min-width:1.25rem;text-align:center}
.chip[aria-selected=true],.chip[aria-pressed=true],.chip[aria-checked=true]{background:var(--ccon);color:var(--con);box-shadow:none;font-weight:700}
.chip--pink{--cc:var(--c-pink);--ccon:var(--c-pink-con);--con:var(--c-pink-on)}
.chip--orange{--cc:var(--c-orange);--ccon:var(--c-orange-con);--con:var(--c-orange-on)}
.chip--teal{--cc:var(--c-teal);--ccon:var(--c-teal-con);--con:var(--c-teal-on)}
.chip--blue{--cc:var(--c-blue);--ccon:var(--c-blue-con);--con:var(--c-blue-on)}
.chip--green{--cc:var(--c-green);--ccon:var(--c-green-con);--con:var(--c-green-on)}
.chip--yellow{--cc:var(--c-yellow);--ccon:var(--c-yellow-con);--con:var(--c-yellow-on)}
.chip--violet{--cc:var(--c-violet);--ccon:var(--c-violet-con);--con:var(--c-violet-on)}
.chip--filter[aria-checked=true]{background:var(--primary-container);color:var(--on-primary-container)}
.chip--assist{height:2rem;border-radius:.5rem}

/* ---------- Tag / label kecil ---------- */
.tag{display:inline-flex;align-items:center;gap:.25rem;height:1.5rem;padding:0 .625rem;border-radius:.5rem;font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.3px;white-space:nowrap;background:var(--c-neutral-con);color:var(--c-neutral-on)}
.tag--sm{height:1.375rem;padding:0 .5rem;font-size:.6875rem}
.tag--pink{background:var(--c-pink-con);color:var(--c-pink-on)}.tag--orange{background:var(--c-orange-con);color:var(--c-orange-on)}
.tag--teal{background:var(--c-teal-con);color:var(--c-teal-on)}.tag--blue{background:var(--c-blue-con);color:var(--c-blue-on)}
.tag--green{background:var(--c-green-con);color:var(--c-green-on)}.tag--yellow{background:var(--c-yellow-con);color:var(--c-yellow-on)}
.tag--violet{background:var(--c-violet-con);color:var(--c-violet-on)}.tag--red{background:var(--error-container);color:var(--on-error-container)}
.tag--neutral{background:var(--sc-highest);color:var(--on-surface-variant)}

/* ---------- Kartu & layout ---------- */
.tile{background:var(--sc-low);border-radius:1.5rem;padding:1.25rem;position:relative;min-width:0}
[data-theme=dark] .tile{background:var(--sc)}
.tile--tonal{background:var(--primary-container);color:var(--on-primary-container)}
.tile__title{font-size:1rem;font-weight:700;letter-spacing:.1px;display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.tile__title>.ico{width:2rem;height:2rem;padding:.375rem;border-radius:.75rem;background:var(--primary-container);color:var(--on-primary-container)}
.dash-grid>.tile:nth-child(6n+2) .tile__title>.ico{background:var(--c-pink-con);color:var(--c-pink-on)}
.dash-grid>.tile:nth-child(6n+3) .tile__title>.ico{background:var(--c-orange-con);color:var(--c-orange-on)}
.dash-grid>.tile:nth-child(6n+4) .tile__title>.ico{background:var(--c-teal-con);color:var(--c-teal-on)}
.dash-grid>.tile:nth-child(6n+5) .tile__title>.ico{background:var(--c-blue-con);color:var(--c-blue-on)}
.dash-grid>.tile:nth-child(6n) .tile__title>.ico{background:var(--c-green-con);color:var(--c-green-on)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1rem 0}
@media (min-width:1100px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{--k:var(--c-violet);--kc:var(--c-violet-con);--ko:var(--c-violet-on);background:var(--kc);color:var(--ko);border-radius:1.5rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:.375rem;min-width:0;position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-1.5rem;top:-1.5rem;width:5rem;height:5rem;border-radius:50%;background:var(--k);opacity:.14}
.kpi--pink{--k:var(--c-pink);--kc:var(--c-pink-con);--ko:var(--c-pink-on)}.kpi--orange{--k:var(--c-orange);--kc:var(--c-orange-con);--ko:var(--c-orange-on)}
.kpi--teal{--k:var(--c-teal);--kc:var(--c-teal-con);--ko:var(--c-teal-on)}.kpi--green{--k:var(--c-green);--kc:var(--c-green-con);--ko:var(--c-green-on)}
.kpi--red{--k:var(--error);--kc:var(--error-container);--ko:var(--on-error-container)}.kpi--blue{--k:var(--c-blue);--kc:var(--c-blue-con);--ko:var(--c-blue-on)}
.kpi__label{font-size:.8125rem;font-weight:500;display:flex;align-items:center;gap:.5rem}
.kpi__ico{width:2rem;height:2rem;border-radius:.75rem;display:grid;place-items:center;background:var(--k);color:#fff;flex:none}
[data-theme=dark] .kpi__ico{color:var(--kc)}
.kpi__ico .ico{width:1.25rem;height:1.25rem}
.kpi__value{font-size:1.875rem;line-height:1.15;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__sub{font-size:.75rem;opacity:.85}
.dash-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:840px){.dash-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1400px){.dash-grid{grid-template-columns:repeat(3,1fr)}}
.span-all{grid-column:1/-1}

/* ---------- Hero target dana ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:var(--hero);border-radius:1.75rem;padding:1.5rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;min-height:12rem;isolation:isolate;--ring-a:#fff59d;--ring-b:#ffd600;--ring-c:#ff9100}
.hero::before{content:"";position:absolute;left:-3rem;bottom:-5rem;width:14rem;height:14rem;border-radius:50%;background:rgba(255,255,255,.1);z-index:-1}
.hero::after{content:"";position:absolute;right:20%;top:-4rem;width:9rem;height:9rem;border-radius:2.5rem;transform:rotate(25deg);background:rgba(255,214,0,.22);z-index:-1}
.hero a{color:#fff}
.hero__eyebrow{font-size:.875rem;font-weight:500;opacity:.95;display:flex;align-items:center;gap:.375rem}
.hero__eyebrow .ico{width:1.25rem;height:1.25rem;color:#ffd600}
.hero__amount{margin:.25rem 0 .375rem;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.hero__target{font-size:.9375rem;opacity:.95}
.hero__note{margin-top:.75rem;font-size:.8125rem;display:flex;align-items:center;gap:.375rem;background:rgba(255,255,255,.16);border-radius:.75rem;padding:.5rem .75rem}
.hero__note .ico{width:1.125rem;height:1.125rem}
.hero__ms{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:1rem}
.ms-chip{display:inline-flex;align-items:center;gap:.25rem;height:1.75rem;padding:0 .625rem 0 .375rem;border-radius:999px;background:rgba(255,255,255,.16);font-size:.75rem;font-weight:700}
.ms-chip .ico{width:1.125rem;height:1.125rem}
.ms-chip.is-reached{background:#ffd600;color:#3f2e00}
.hero__mascot{width:9rem;height:9rem;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.hero__body{min-width:0}
.hero--report{display:block;min-height:0}
.hero .ring__track{stroke:rgba(255,255,255,.22)}
.hero .ring__center{background:rgba(255,255,255,.14)}
.hero .ring__pct{color:#fff}
@media (max-width:599px){.hero{grid-template-columns:1fr;padding:1.25rem;text-align:left}.hero .ring{justify-self:center;order:-1;--ring:150px!important}.hero__mascot{width:7rem;height:7rem;justify-self:end;order:-1;margin-bottom:-1rem}}

/* Ring progres target */
.ring{position:relative;width:var(--ring);height:var(--ring);flex:none}
.ring svg{width:100%;height:100%;display:block;overflow:visible}
.ring__track{fill:none;stroke:var(--sc-highest);stroke-width:10}
.ring__bar{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dasharray 900ms cubic-bezier(.05,.7,.1,1)}
.ring__dot{fill:var(--sc-lowest);stroke:var(--outline-variant);stroke-width:1.2}
.ring__dot.is-reached{fill:#ffd600;stroke:#fff;stroke-width:1.4}
.ring__center{position:absolute;inset:16%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--primary-container)}
.ring__center .mm{width:62%;height:62%;object-fit:contain}
.ring__pct{font-size:calc(var(--ring) * .12);font-weight:700;line-height:1;margin-top:-.25rem;color:var(--on-primary-container)}
.goal-card{display:flex;gap:1.25rem;align-items:center;background:var(--primary-container);color:var(--on-primary-container);border-radius:1.5rem;padding:1rem 1.25rem;margin-bottom:1rem}
.goal-card .ring__center{background:var(--sc-lowest)}
.goal-card .muted,.goal-card .label-m{color:inherit;opacity:.85}
.goal-card>div:last-child{flex:1;min-width:0}
@media (max-width:480px){.goal-card{flex-direction:column;text-align:center}}

/* Progress linear */
.progress{position:relative;margin-top:.75rem}
.progress__track{position:relative;height:.625rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent)}
.progress__bar{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--ring-a),var(--ring-b),var(--ring-c));transition:width 700ms cubic-bezier(.05,.7,.1,1)}
.progress__tick{position:absolute;top:50%;width:.375rem;height:.375rem;margin-left:-.1875rem;transform:translateY(-50%);border-radius:50%;background:var(--sc-lowest)}
.progress__labels{position:relative;height:1.25rem;margin-top:.375rem;font-size:.75rem;opacity:.85}
.progress__labels span{position:absolute;transform:translateX(-50%)}
.progress__labels span:last-child{transform:translateX(-100%)}
.progress__labels .is-reached{font-weight:700;opacity:1}
.progress__rider{position:absolute;top:50%;width:2.25rem;height:2.25rem;transform:translate(-50%,-62%);pointer-events:none}

/* ---------- Kasir (POS) ---------- */
.pos{display:grid;grid-template-columns:1fr;min-height:calc(100vh - 4rem)}
.pos__main{padding:1rem 1rem 8rem;min-width:0}
.pos__goal{position:relative;width:100%;display:flex;align-items:center;gap:.875rem;border:0;text-align:left;cursor:pointer;color:var(--on-primary-container);background:linear-gradient(110deg,var(--primary-container),var(--c-pink-con) 70%,var(--c-orange-con));padding:.75rem 1rem;border-radius:1.5rem;margin-bottom:.75rem;isolation:isolate;overflow:hidden}
.pos__goal:hover{box-shadow:var(--shadow-1)}
.pos__goal .ring__center{background:var(--sc-lowest)}
.pos__goal .ring__track{stroke:rgba(255,255,255,.55)}
[data-theme=dark] .pos__goal .ring__track{stroke:rgba(0,0,0,.3)}
.pos__goal-mm .mm{width:56px;height:56px}
.pos__goal-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}
.pos__goal-body .label-m,.pos__goal-body .muted{color:inherit;opacity:.85}
.pos__goal-amt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos__goal-pct{font-weight:700}
.pos__goal-me{display:flex;align-items:center;gap:.25rem;font-size:.8125rem;flex-wrap:wrap}
.pos__goal-me .ico{width:1.125rem;height:1.125rem;color:var(--c-orange)}
.pos__goal-go{display:grid;place-items:center}
.pos__tools{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;position:sticky;top:4rem;z-index:5;background:var(--background);padding:.5rem 0 .25rem}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.75rem,1fr));gap:.75rem}
@media (min-width:600px){.products{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem}}
.product{position:relative;background:var(--sc-lowest);border:0;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;min-width:0;border-radius:1.5rem;overflow:hidden;color:inherit;box-shadow:inset 0 0 0 1px var(--outline-variant);isolation:isolate;-webkit-tap-highlight-color:transparent;transition:transform 150ms cubic-bezier(.2,0,0,1),box-shadow 200ms}
[data-theme=dark] .product{background:var(--sc)}
.product:active{transform:scale(.97)}
.product__img,.product__ph{aspect-ratio:4/3;width:100%;object-fit:cover;background:var(--sc-high);border-radius:1.5rem 1.5rem .75rem .75rem}
.product__ph{display:grid;place-items:center;font-size:2.25rem;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.product__body{padding:.625rem .875rem .875rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.product__name{font-size:.9375rem;font-weight:500;line-height:1.25rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5rem}
.product__price{color:var(--primary)}
.product__meta{display:flex;justify-content:space-between;align-items:center;gap:.25rem;margin-top:.25rem;flex-wrap:wrap}
.product__add{position:absolute;top:.625rem;right:.625rem;width:2.5rem;height:2.5rem;border-radius:.875rem;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)}
.product__qty{position:absolute;top:.625rem;right:.625rem;min-width:2.5rem;height:2.5rem;padding:0 .625rem;display:grid;place-items:center;border-radius:.875rem;background:var(--c-pink);color:#fff;font-weight:700;font-size:1.125rem;box-shadow:var(--shadow-1)}
[data-theme=dark] .product__qty{color:#3f001b}
.product.is-in-cart{box-shadow:inset 0 0 0 3px var(--c-pink)}
.product.is-in-cart .product__add,.product.is-out .product__add{display:none}
.product.is-out{cursor:not-allowed}
.product.is-out .product__img,.product.is-out .product__ph{filter:grayscale(1);opacity:.45}
.product.is-out .product__name,.product.is-out .product__price{color:var(--on-surface-variant)}
.pop{animation:pop 260ms cubic-bezier(.2,0,0,1)}
.cart{background:var(--sc-low);display:flex;flex-direction:column;min-height:0;border-radius:1.75rem;overflow:hidden}
[data-theme=dark] .cart{background:var(--sc)}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.25rem .75rem}
.cart__head h2{font-size:1.375rem;font-weight:500;display:flex;align-items:baseline;gap:.5rem}
.cart__lines{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0 .75rem}
.cart-line{display:grid;grid-template-columns:3rem 1fr auto;gap:.75rem;align-items:center;padding:.625rem .5rem;border-radius:1rem}
.cart-line+.cart-line{border-top:1px solid var(--outline-variant)}
.cart-line img,.cart-line .ph{width:3rem;height:3rem;object-fit:cover;border-radius:.875rem;background:var(--sc-high)}
.cart-line .ph{display:grid;place-items:center;color:#fff;font-weight:700}
.cart-line__name{font-weight:500;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-line__sub{font-size:.8125rem;color:var(--on-surface-variant)}
.cart-line__sub b{color:var(--on-surface)}
.stepper{display:flex;align-items:center;gap:.25rem;background:var(--secondary-container);color:var(--on-secondary-container);border-radius:999px;padding:.125rem}
.stepper button{width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center;color:inherit}
.stepper button:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.stepper span{min-width:1.75rem;text-align:center;font-weight:700;font-size:1.0625rem}
.stepper .ico{width:1.25rem;height:1.25rem}
.cart__foot{padding:1rem 1.25rem 1.25rem;background:var(--sc);border-top:1px solid var(--outline-variant)}
[data-theme=dark] .cart__foot{background:var(--sc-high)}
.dialog .cart__foot{background:transparent;padding:1rem 0 0}
.cart__total{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:1rem;font-weight:500}
.cart__total b{color:var(--primary)}
.cart__empty{padding:2rem 1rem 2.5rem;text-align:center;color:var(--on-surface-variant);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.cart__empty b{color:var(--on-surface);font-size:1rem}
.cart-bar{position:fixed;left:.5rem;right:.5rem;bottom:calc(.5rem + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:.5rem;background:var(--primary);color:var(--on-primary);border-radius:1.75rem;padding:.5rem .5rem .5rem 0;box-shadow:var(--shadow-3)}
.cart-bar__info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:.25rem 1.25rem;background:none;border:0;text-align:left;cursor:pointer;color:inherit}
.cart-bar__info .label-m{color:inherit;opacity:.9;display:flex;align-items:center;gap:.375rem}
.cart-bar__info .label-m .ico{width:1.125rem;height:1.125rem}
.cart-bar .btn{min-height:3.5rem;background:#fff;color:#4f00d0;border-radius:1.25rem;font-weight:700;font-size:1.0625rem}
[data-theme=dark] .cart-bar .btn{background:#370096;color:#e8deff}
.cart-bar .btn:disabled{background:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
.pos__side{display:none}
@media (min-width:900px){
  .pos{grid-template-columns:1fr 23rem}
  .pos__main{padding-bottom:2rem}
  .pos__side{display:flex;position:sticky;top:4rem;height:calc(100vh - 4rem);height:calc(100dvh - 4rem);padding:1rem 1rem 1rem 0}
  .pos__side .cart{flex:1}
  .cart-bar{display:none}
}
@media (min-width:1400px){.pos{grid-template-columns:1fr 27rem}}

/* ---------- Dialog (M3) — bottom sheet di HP ---------- */
.dialog{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(.2,0,0,1),visibility 0s linear 200ms}
.dialog.is-visible{opacity:1;visibility:visible;transition:opacity 250ms cubic-bezier(.05,.7,.1,1),visibility 0s}
.dialog__box{background:var(--sc-high);color:var(--on-surface);width:100%;max-width:40rem;max-height:100%;display:flex;flex-direction:column;border-radius:1.75rem;transform:translateY(1rem) scale(.98);transition:transform 300ms cubic-bezier(.05,.7,.1,1);outline:none;box-shadow:var(--shadow-3);overflow:hidden}
.dialog--sm .dialog__box{max-width:30rem}
.dialog--lg .dialog__box{max-width:56rem}
.dialog.is-visible .dialog__box{transform:none}
.dialog__header{padding:1.5rem 3.75rem .75rem 1.5rem;position:relative}
.dialog__label{font-size:.75rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--primary);margin-bottom:.25rem}
.dialog__title{font-size:1.5rem;line-height:2rem;font-weight:400}
.dialog__close{position:absolute!important;top:1rem;right:1rem}
.dialog__content{padding:.25rem 1.5rem 1.25rem;overflow-y:auto;flex:1;min-height:3rem}
.dialog__footer{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.5rem;padding:.75rem 1.5rem 1.5rem}
.dialog__footer .btn{min-height:3rem;padding:0 1.5rem;font-size:.9375rem}
.dialog__footer .btn--text,.dialog__footer .btn--danger-text{padding:0 1rem}
@media (max-width:599px){
  .dialog{align-items:flex-end;padding:0}
  .dialog__box{max-width:none!important;max-height:94vh;max-height:94dvh;border-radius:1.75rem 1.75rem 0 0;transform:translateY(3rem);padding-bottom:env(safe-area-inset-bottom)}
  .dialog__box::before{content:"";display:block;width:2rem;height:.25rem;border-radius:2px;background:var(--outline);opacity:.5;margin:.75rem auto -.5rem}
  .dialog__header{padding:1rem 3.5rem .5rem 1.25rem}
  .dialog__close{top:.75rem;right:.5rem}
  .dialog__content{padding:.25rem 1.25rem 1rem}
  .dialog__footer{padding:.75rem 1.25rem 1.25rem}
  .dialog__footer .btn{flex:1 1 0;min-height:3.25rem}
}

/* ---------- Banner & snackbar ---------- */
.banner{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:1rem;background:var(--c-blue-con);color:var(--c-blue-on);margin-bottom:1rem;font-size:.875rem}
.banner>.ico{flex:none}
.banner>.mm{width:40px;height:40px;flex:none}
.banner--error{background:var(--error-container);color:var(--on-error-container)}
.banner--success{background:var(--c-green-con);color:var(--c-green-on)}
.banner--warning{background:var(--c-yellow-con);color:var(--c-yellow-on)}
.banner__text{flex:1}
.toasts{position:fixed;top:4.5rem;left:.5rem;right:.5rem;z-index:200;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
@media (min-width:840px){.toasts{left:auto;right:1.5rem;align-items:flex-end}}
.toast{pointer-events:auto;width:100%;max-width:26rem;display:flex;gap:.75rem;align-items:center;padding:.75rem 1rem;border-radius:1rem;background:var(--inverse-surface);color:var(--inverse-on-surface);box-shadow:var(--shadow-3);animation:toast-in 300ms cubic-bezier(.05,.7,.1,1);border-left:6px solid var(--inverse-primary)}
.toast--success{border-left-color:#2ec24a}.toast--error{border-left-color:#ff5449}.toast--warning{border-left-color:#ffc400}
.toast img{width:3rem;height:3rem;object-fit:contain;flex:none}
.toast__body{flex:1;font-size:.875rem}
.toast__body b{display:block;font-weight:700;font-size:.9375rem}
.toast.is-leaving{animation:toast-out 160ms forwards}

/* ---------- MonMon ---------- */
.mm{object-fit:contain;user-select:none;-webkit-user-drag:none}
.mm-bob{animation:bob 3.2s ease-in-out infinite}
.mm-jump{animation:jump 700ms cubic-bezier(.2,0,0,1) 2}
.mm-shake{animation:shake 500ms cubic-bezier(.2,0,0,1)}
.speech{position:relative;background:var(--secondary-container);color:var(--on-secondary-container);padding:.75rem 1rem;border-radius:1.25rem 1.25rem 1.25rem .25rem;font-size:.875rem}
.speech b{display:block;font-size:.75rem;font-weight:700;letter-spacing:.5px;margin-bottom:.125rem}
.mm-row{display:flex;align-items:center;gap:1rem}
.mm-row .mm{width:5rem;height:5rem;flex:none}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:2rem 1rem;color:var(--on-surface-variant)}
.empty img{width:8rem;height:8rem}
.empty h3{font-size:1.125rem;font-weight:700;color:var(--on-surface)}

/* Sukses penjualan */
.success{text-align:center;padding:.25rem 0 0;position:relative}
.success__mm{width:10rem;height:10rem;margin:0 auto}
.success__title{font-size:1.75rem;font-weight:700;margin-top:.5rem;background:linear-gradient(90deg,var(--primary),var(--c-pink),var(--c-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.success__code{color:var(--on-surface-variant);font-size:.875rem;margin-top:.25rem}
.success__total{color:var(--primary);margin-top:.125rem}
.success__change{margin:1rem auto 0;background:var(--c-green-con);color:var(--c-green-on);border-radius:1.5rem;padding:1rem 1.25rem;max-width:24rem}
.success__change span{display:block;font-size:.8125rem;font-weight:500}
.success__change b{display:block;margin:.125rem 0}
.milestone{margin:1rem auto 0;max-width:24rem;background:var(--hero);color:#fff;padding:.875rem 1rem;border-radius:1.25rem;display:flex;align-items:center;gap:.75rem;text-align:left}
.milestone .ico{color:#ffd600;width:2.25rem;height:2.25rem}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:14px;border-radius:2px;opacity:0;animation:confetti 1.6s cubic-bezier(.2,0,0,1) forwards}

/* Pembayaran */
.pay-total{display:flex;flex-direction:column;gap:.125rem;margin-bottom:1rem;padding:1rem 1.25rem;border-radius:1.5rem;background:var(--primary-container);color:var(--on-primary-container)}
.pay-total span{font-size:.875rem;font-weight:500;opacity:.9}
.pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.25rem}
.pay-method{--m:var(--c-green);--mc:var(--c-green-con);--mo:var(--c-green-on);position:relative;border:0;border-radius:1.25rem;background:var(--sc-lowest);box-shadow:inset 0 0 0 1px var(--outline-variant);padding:.875rem;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;cursor:pointer;text-align:left;min-height:5.25rem;color:var(--on-surface);isolation:isolate;font-size:.9375rem}
[data-theme=dark] .pay-method{background:var(--sc)}
.pay-method[data-color=blue]{--m:var(--c-blue);--mc:var(--c-blue-con);--mo:var(--c-blue-on)}
.pay-method[data-color=violet]{--m:var(--c-violet);--mc:var(--c-violet-con);--mo:var(--c-violet-on)}
.pay-method .ico{width:1.75rem;height:1.75rem;color:var(--m)}
.pay-method[aria-checked=true]{background:var(--mc);color:var(--mo);box-shadow:inset 0 0 0 2px var(--m)}
.pay-method[aria-checked=true] .ico{color:var(--mo)}
.pay-method[aria-checked=true]::after{content:"";position:absolute;top:.625rem;right:.625rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--m) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='white'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center/0.9rem no-repeat}
.change-box{display:flex;flex-direction:column;gap:.125rem;padding:1rem 1.25rem;border-radius:1.5rem;background:var(--c-green-con);color:var(--c-green-on);margin:1rem 0 0}
.change-box span{display:flex;align-items:center;gap:.375rem;font-size:.875rem;font-weight:500}
.change-box span .ico{width:1.25rem;height:1.25rem}
.change-box.is-short{background:var(--error-container);color:var(--on-error-container)}
.quick-cash{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.625rem}
@media (min-width:600px){.quick-cash{grid-template-columns:repeat(5,1fr)}}
.quick-cash .btn{padding:0 .5rem;min-height:2.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.qris-box{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem;background:#fff;color:#1d1a24;border-radius:1.5rem}
.qris-box img{max-width:16rem;width:100%}

/* ---------- Tabel / list ---------- */
.table-wrap{overflow-x:auto;border-radius:1rem;background:var(--sc-lowest)}
[data-theme=dark] .table-wrap{background:var(--sc-low)}
.table{width:100%;border-collapse:collapse;font-size:.875rem}
.table th{background:var(--primary-container);color:var(--on-primary-container);text-align:left;font-weight:700;height:2.75rem;padding:0 1rem;white-space:nowrap}
.table th.num,.table td.num{text-align:right;white-space:nowrap}
.table td{height:3rem;padding:.5rem 1rem;border-top:1px solid var(--outline-variant);vertical-align:middle}
.table tbody tr:hover td{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.list{list-style:none;margin:0;padding:0}
.list-row{display:flex;align-items:center;gap:.875rem;padding:.75rem .75rem;border-radius:1rem;min-height:3.5rem}
.list>li+li>.list-row,.list>.list-row+.list-row,.list>li.sale-row+li.sale-row{border-top:1px solid var(--outline-variant)}
.list>li+li>.list-row--btn{border-top:0}
.list-row--btn{position:relative;width:100%;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit;isolation:isolate}
.sale-row{display:flex;align-items:center;gap:.25rem}
.sale-row>.list-row--btn{flex:1;min-width:0}
.list-row__main{flex:1;min-width:0}
.list-row__title{font-weight:500;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.375rem}
.list-row__sub{font-size:.8125rem;color:var(--on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-row__end{text-align:right;white-space:nowrap}
.method-badge{width:2.75rem;height:2.75rem;border-radius:.875rem;display:grid;place-items:center;flex:none;background:var(--c-green-con);color:var(--c-green-on)}
.method-badge--blue{background:var(--c-blue-con);color:var(--c-blue-on)}.method-badge--violet{background:var(--c-violet-con);color:var(--c-violet-on)}
.delta-badge{display:inline-grid;place-items:center;min-width:3rem;height:1.75rem;padding:0 .5rem;border-radius:.625rem;font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;flex:none;background:var(--c-green-con);color:var(--c-green-on)}
.delta-badge--down{background:var(--c-orange-con);color:var(--c-orange-on)}.delta-badge--sale{background:var(--c-blue-con);color:var(--c-blue-on)}
.thumb{width:3rem;height:3rem;object-fit:cover;flex:none;border-radius:.875rem;background:var(--sc-high)}
.thumb.ph{display:grid;place-items:center;color:#fff;font-weight:700}
.rank{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;font-weight:700;flex:none;background:var(--sc-highest)}
.rank--1{background:linear-gradient(135deg,#ffd600,#ff9100);color:#3f2e00}.rank--2{background:linear-gradient(135deg,#e6e0ef,#b0a8c0);color:#1d1a24}.rank--3{background:linear-gradient(135deg,#ffb77f,#d1006a);color:#fff}
.bar-mini{height:.375rem;border-radius:999px;background:var(--sc-highest);margin-top:.375rem;overflow:hidden}
.bar-mini i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ring-a),var(--ring-b))}
.is-me{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.chart{display:flex;align-items:flex-end;gap:4px;height:9rem;padding-top:.5rem}
.chart__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.chart__bar{width:100%;border-radius:.5rem .5rem .25rem .25rem;background:linear-gradient(180deg,var(--c-pink),var(--primary));min-height:1px;transition:height 500ms cubic-bezier(.05,.7,.1,1)}
.chart__lbl{font-size:.6875rem;color:var(--on-surface-variant);margin-top:.25rem}
.row-actions{display:flex;gap:.375rem;flex-wrap:wrap;align-items:center}

/* Log admin */
.log-list{display:flex;flex-direction:column;gap:.625rem}
.log-item{display:flex;gap:.875rem;align-items:flex-start;padding:1rem;border-radius:1.25rem;background:var(--sc-low)}
[data-theme=dark] .log-item{background:var(--sc)}
.log-item .list-row__sub{white-space:normal}
.log-item__ico{width:2.75rem;height:2.75rem;border-radius:.875rem;display:grid;place-items:center;flex:none;background:var(--error-container);color:var(--on-error-container)}
.log-item--up .log-item__ico{background:var(--c-green-con);color:var(--c-green-on)}
.log-item--down .log-item__ico{background:var(--c-orange-con);color:var(--c-orange-on)}
.log-item__by{display:flex;align-items:center;gap:.25rem;margin-top:.375rem;font-size:.75rem;font-weight:500;color:var(--primary)}
.log-item__by .ico{width:1rem;height:1rem}

/* Hapus transaksi & koreksi stok */
.del-head{display:flex;gap:1rem;align-items:center;padding:1rem;border-radius:1.25rem;background:var(--error-container);color:var(--on-error-container)}
.del-head .mm{width:4.5rem;height:4.5rem;flex:none}
.del-head .muted{color:inherit;opacity:.85;font-size:.8125rem}
.del-head__amt{margin:.125rem 0}
.stock-head{display:flex;gap:.875rem;align-items:center;padding:.875rem 1rem;border-radius:1.25rem;background:var(--primary-container);color:var(--on-primary-container);margin-bottom:1rem}
.stock-head>div{flex:1;min-width:0}
.stock-head .muted{color:inherit;opacity:.8;font-size:.8125rem}
.stock-head__now{font-size:2.25rem;font-weight:700;line-height:1}
.stepper--xl{background:none;padding:0;gap:.5rem}
.stepper--xl .icon-btn--tonal{background:var(--secondary-container);color:var(--on-secondary-container)}
#sQuick{grid-template-columns:repeat(4,1fr)}
.stepper--xl .icon-btn{width:3.5rem;height:3.5rem;border-radius:1rem}
.stepper--xl .field__input{text-align:center;flex:1;min-width:0;font-size:2rem}
.stock-row__btns{flex-wrap:nowrap}
.stock-preview{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;min-height:3.25rem;padding:.75rem 1rem;border-radius:1rem;background:var(--sc-highest);margin-top:1rem;font-size:.9375rem}
.stock-preview b{font-size:1.375rem;font-weight:700}
.stock-preview__after{color:var(--primary)}
.stock-preview.is-up{background:var(--c-green-con);color:var(--c-green-on)}.stock-preview.is-up .stock-preview__after{color:inherit}
.stock-preview.is-down{background:var(--c-orange-con);color:var(--c-orange-on)}.stock-preview.is-down .stock-preview__after{color:inherit}
.stock-preview.is-error{background:var(--error-container);color:var(--on-error-container);font-weight:500}
.stock-preview.is-error b{font-size:inherit}
.stock-preview>.ico{width:1.25rem;height:1.25rem}
#sErr:not([hidden]){margin-top:.75rem}
.amt-preview{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.25rem 1rem;margin:1rem 0 .5rem;padding:1rem 1.25rem;border-radius:1.25rem;background:var(--primary-container);color:var(--on-primary-container)}
.amt-preview .muted{color:inherit;opacity:.8}
.amt-preview b{text-align:right}

/* Struk */
.receipt{font-family:Roboto,sans-serif;font-variant-numeric:tabular-nums;font-size:.875rem;background:#fff;color:#1d1a24;padding:1.25rem 1.125rem;max-width:22rem;margin:0 auto;border-radius:1rem 1rem 0 0;position:relative;box-shadow:inset 0 0 0 1px #e7dff2}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 4px,#fff 0) 0 0/8px 8px,linear-gradient(45deg,transparent 4px,#fff 0) 0 0/8px 8px}
.receipt h3{text-align:center;font-size:1.0625rem;font-weight:700;color:#6920ff;margin:.25rem 0}
.receipt .c{text-align:center}.receipt .c img{margin:0 auto}
.receipt hr{border:0;border-top:1px dashed #a9a3b5;margin:.625rem 0}
.receipt .row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.receipt .big{font-weight:700}
.receipt .big .amt{color:#6920ff}
.receipt.is-void .amt{text-decoration:line-through;color:#7a7585}
.receipt .void-stamp{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);border:4px solid #ba1a1a;color:#ba1a1a;border-radius:.75rem;font-size:1.75rem;font-weight:700;letter-spacing:2px;padding:.25rem 1rem;opacity:.85;background:rgba(255,255,255,.7)}

/* Produk editor */
.img-drop{display:flex;gap:1rem;align-items:center;margin-bottom:1.25rem}
.img-drop__preview{width:7rem;height:7rem;overflow:hidden;background:var(--sc-highest);border-radius:1.25rem;flex:none;display:grid;place-items:center;color:var(--on-surface-variant)}
.img-drop__preview img{display:block;width:100%;height:100%;object-fit:cover}
.img-drop__actions{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.admin-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:.75rem}
.admin-product{display:flex;gap:.875rem;padding:.875rem;background:var(--sc-low);border-radius:1.5rem;cursor:pointer;align-items:center;color:inherit;transition:box-shadow 200ms}
[data-theme=dark] .admin-product{background:var(--sc)}
.admin-product:hover{box-shadow:var(--shadow-1)}
.admin-product .thumb{width:4.5rem;height:4.5rem;border-radius:1rem}
.admin-product.is-inactive{opacity:.6}
.admin-product .list-row__main{flex:1;min-width:0}
.admin-product .product__meta{justify-content:flex-start;gap:.375rem;margin-top:.375rem}
.admin-product .amt{color:var(--primary)}

/* Login */
.login-body{background:var(--background)}
.login{display:grid;grid-template-columns:1fr;min-height:100vh;min-height:100dvh}
.login__hero{display:none;background:var(--hero);color:#fff;position:relative;overflow:hidden;border-radius:0 2.5rem 2.5rem 0}
.login__hero::before{content:"";position:absolute;width:30rem;height:30rem;border-radius:50%;background:rgba(255,255,255,.08);right:-10rem;bottom:-12rem}
.login__hero::after{content:"";position:absolute;width:10rem;height:10rem;border-radius:3rem;transform:rotate(20deg);background:rgba(255,214,0,.25);left:55%;top:-3rem}
.login__hero-inner{position:relative;z-index:1;padding:3rem;display:flex;flex-direction:column;height:100%}
.login__eyebrow{font-size:1rem;font-weight:700;opacity:.9}
.login__claim{font-size:2.75rem;line-height:1.15;font-weight:700;max-width:30rem;margin-top:1rem;letter-spacing:-.01em}
.login__stickers{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}
.sticker{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 1rem 0 .75rem;border-radius:999px;font-weight:700;background:#fff;color:#4f00d0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.sticker .ico{width:1.25rem;height:1.25rem}
.sticker--pink{transform:rotate(-4deg);color:#d1006a}.sticker--orange{transform:rotate(3deg);color:#a35600}.sticker--teal{transform:rotate(-2deg);color:#007967}
.login__mascot{width:17rem;height:17rem;object-fit:contain;margin-top:auto;align-self:center;filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))}
.login__panel{display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:radial-gradient(circle at 90% 0%,var(--c-pink-con),transparent 40%),radial-gradient(circle at 0% 100%,var(--c-orange-con),transparent 45%)}
.login__form{width:100%;max-width:27rem;background:var(--sc-lowest);padding:2rem 1.5rem 1.5rem;border-radius:1.75rem;box-shadow:var(--shadow-1)}
[data-theme=dark] .login__form{background:var(--sc)}
.login__brand{display:flex;align-items:center;gap:.625rem;margin-bottom:1.5rem;font-size:1.25rem}
.login__brand b{color:var(--primary)}
.login__brand img{width:3.5rem;height:3.5rem;object-fit:contain}
.login__title{font-size:2rem;line-height:2.5rem;font-weight:700}
.login__sub{color:var(--on-surface-variant);margin:.375rem 0 1.5rem;font-size:.9375rem}
.login__note{color:var(--on-surface-variant);font-size:.8125rem;margin-top:1.25rem;text-align:center}
.login .btn--xl{margin-top:.5rem}
.login .btn .ico{margin-left:0}
@media (min-width:900px){.login{grid-template-columns:1.1fr 1fr}.login__hero{display:block}.login__brand img{display:none}}
@media (max-width:899px){.login__brand img{width:5rem;height:5rem;animation:bob 3.2s ease-in-out infinite}.login__brand{flex-direction:column;align-items:flex-start}}

.skeleton{background:var(--sc-high);border-radius:1.5rem;position:relative;overflow:hidden;min-height:1rem}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 1.2s infinite}
.chip-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.inline-loading{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem}
.spinner{width:1.125rem;height:1.125rem;border:2.5px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;animation:spin 690ms linear infinite}
.updated{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--on-surface-variant)}
.divider{height:1px;background:var(--outline-variant);margin:1rem 0}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes jump{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-18px) scale(1.04,.96)}55%{transform:translateY(0) scale(.96,1.04)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(6px) rotate(4deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,194,74,.6)}70%{box-shadow:0 0 0 6px rgba(46,194,74,0)}100%{box-shadow:0 0 0 0 rgba(46,194,74,0)}}
@keyframes toast-in{from{opacity:0;transform:translateY(-.75rem) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-.5rem)}}
@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(22rem) rotate(540deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .confetti{display:none}
}
@media print{.topbar,.side-nav,.cart-bar,.toasts,.fab{display:none}.content{padding:0}}
@media (max-width:599px){.hide-sm{display:none}}
[hidden]{display:none!important}
.cart .form-grid{align-items:end}
.cart .form-grid .field__input{height:3rem}
.cart .form-grid .field__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:599px){.sale-row .list-row__title .tag{display:none}.sale-row .list-row{padding-right:.25rem}}