/* ===================================================================
     25Dz POS — SOFT MODERN
     A refined "soft UI" pass over the original flat-minimal system: cards
     are separated with diffused shadow instead of hard 1px lines, corners
     are rounder, spacing is more generous, the accent is a fresher mint-
     emerald, and two screens that used to waste tablet width — Pengaturan
     and Dashboard — now reflow into an organized responsive grid instead
     of one narrow capped column.
     =================================================================== */
  :root{
    --bg-outer:#F2F3FA;
    --ink:#1C1F2C;
    --muted:#878CA1;
    --muted-2:#B6BACB;
    --accent:#129162;
    --accent-dark:#0F7A52;
    --accent-ink:#FFFFFF;
    --accent-glow:rgba(18,145,98,.20);
    --accent-soft:#E1F4EC;
    --warn:#CE443C;
    --warn-dark:#B23A33;
    --warn-ink:#FFFFFF;
    --warn-bg:#FBEAE9;
    --amber:#DFA23D;
    --amber-bg:#FBF1DE;
    --blue:#4C7FE0;
    --surface:#FFFFFF;
    --surface-2:#F4F5FB;
    --surface-3:#EAECF4;
    --border:rgba(28,31,44,.08);
    --border-soft:rgba(28,31,44,.05);
    --shadow-xs:0 1px 2px rgba(20,23,40,.04);
    --shadow-sm:0 3px 14px rgba(20,23,40,.05), 0 1px 3px rgba(20,23,40,.04);
    --shadow-md:0 14px 34px rgba(20,23,40,.07), 0 3px 10px rgba(20,23,40,.035);
    --shadow-lg:0 30px 70px rgba(20,23,40,.12), 0 10px 24px rgba(20,23,40,.05);
    --radius-lg:28px;
    --radius-md:20px;
    --radius-sm:16px;
    --radius-xs:11px;
    --ease:cubic-bezier(.25,.85,.35,1);
    --ease-soft:cubic-bezier(.16,.8,.24,1);
    --change-bg:#E1F4EC;
    --change-neg-bg:#FBEAE9;
    --track-bg:#DDE1EE;
    --thumb:#ffffff;
    --disabled-bg:#EBEDF5;
    --disabled-ink:#B6BACB;
  }
  html[data-theme="dark"]{
    --bg-outer:#0F1116;
    --ink:#EDEFF6;
    --muted:#8D93A8;
    --muted-2:#585E70;
    --accent:#3FCB8E;
    --accent-dark:#2FAE79;
    --accent-ink:#0B2118;
    --accent-glow:rgba(63,203,142,.28);
    --accent-soft:rgba(63,203,142,.14);
    --warn:#E8695F;
    --warn-dark:#DE5A50;
    --warn-ink:#2B0906;
    --warn-bg:rgba(232,105,95,.14);
    --amber:#EBB35E;
    --amber-bg:rgba(235,179,94,.14);
    --blue:#7098EA;
    --surface:#181B23;
    --surface-2:#1F232D;
    --surface-3:#282C38;
    --border:rgba(255,255,255,.07);
    --border-soft:rgba(255,255,255,.045);
    --shadow-xs:0 1px 3px rgba(0,0,0,.3);
    --shadow-sm:0 3px 14px rgba(0,0,0,.3);
    --shadow-md:0 16px 38px rgba(0,0,0,.36), 0 4px 12px rgba(0,0,0,.22);
    --shadow-lg:0 32px 76px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.3);
    --change-bg:rgba(63,203,142,.14);
    --change-neg-bg:rgba(232,105,95,.14);
    --track-bg:#333846;
    --thumb:#f3f1ea;
    --disabled-bg:#242833;
    --disabled-ink:#565C6B;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;overscroll-behavior:none;}
  body{
    margin:0;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg-outer);
    color:var(--ink);
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    transition:background .3s var(--ease),color .3s var(--ease);
  }
  input, textarea{user-select:text;font-family:inherit;}
  button{
    font-family:inherit;cursor:pointer;
    transition:transform .22s var(--ease-soft),box-shadow .22s var(--ease-soft),background-color .18s var(--ease-soft),background .18s var(--ease-soft),color .18s var(--ease-soft),border-color .18s var(--ease-soft),opacity .18s var(--ease-soft);
  }
  button:active{transform:scale(.965);}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

  /* Thin, quiet scrollbars (webkit) on every internally-scrolling panel —
     small detail, but bare default scrollbars are one of the fastest ways
     an interface reads as "un-designed". */
  .panel-scroll, .prod-grid, .cart-items, .held-list, .cat-row, #nav, .dd-card-panel, .modal, .attend-scroll{
    scrollbar-width:thin;
    scrollbar-color:var(--muted-2) transparent;
  }
  .panel-scroll::-webkit-scrollbar, .cart-items::-webkit-scrollbar, .held-list::-webkit-scrollbar, .modal::-webkit-scrollbar{width:7px;height:7px;}
  .prod-grid::-webkit-scrollbar, .cat-row::-webkit-scrollbar, #nav::-webkit-scrollbar, .dd-card-panel::-webkit-scrollbar{width:6px;height:6px;}
  .panel-scroll::-webkit-scrollbar-thumb, .cart-items::-webkit-scrollbar-thumb, .held-list::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .prod-grid::-webkit-scrollbar-thumb, .cat-row::-webkit-scrollbar-thumb, #nav::-webkit-scrollbar-thumb, .dd-card-panel::-webkit-scrollbar-thumb{
    background:var(--muted-2);border-radius:999px;
  }
  .panel-scroll::-webkit-scrollbar-track, .cart-items::-webkit-scrollbar-track, .held-list::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .prod-grid::-webkit-scrollbar-track, .cat-row::-webkit-scrollbar-track, #nav::-webkit-scrollbar-track, .dd-card-panel::-webkit-scrollbar-track{
    background:transparent;
  }

  /* ---------- BACKGROUND (soft ambient blobs) ----------
     Large, softly-blurred color fields behind the flat white surfaces —
     gives the app a softer feel than a plain solid canvas. These used to
     drift continuously via an infinite CSS animation, but filter:blur() on
     elements this large is expensive to keep recompositing every frame,
     and doing that nonstop (even when nothing else is happening) steals
     GPU headroom right when a page-switch animation also needs it, which
     is what was showing up as frame drops when navigating. Static now —
     same soft look, zero ongoing render cost. */
  .glass-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg-outer);transition:background .3s;}
  .glass-bg .blob{
    position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;
  }
  .glass-bg .b1{width:46vmax;height:46vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 70%);}
  .glass-bg .b2{width:38vmax;height:38vmax;right:-12vmax;top:8vmax;background:radial-gradient(circle at 60% 40%, rgba(76,127,224,.14), transparent 70%);}
  .glass-bg .b3{width:42vmax;height:42vmax;left:12vmax;bottom:-20vmax;background:radial-gradient(circle at 50% 50%, rgba(223,162,61,.13), transparent 70%);}
  html[data-theme="dark"] .glass-bg .blob{opacity:.24;}

  /* height cascade: 100vh is the safe fallback, calc(var(--vh)*100) is the
     JS-measured real visible height (js/viewport.js), 100dvh is the native
     answer on browsers that support it — each later rule wins where supported. */
  #app{
    height:100vh;
    height:calc(var(--vh, 1vh) * 100);
    height:100dvh;
    display:flex;flex-direction:column;background:transparent;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }

  /* ---------- LOGIN ---------- */
  .login-wrap{
    flex:1;display:flex;align-items:center;justify-content:center;padding:20px;
    position:relative;
  }
  .login-card{
    width:min(360px,90vw);
    background:var(--surface);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);
    padding:36px 30px;
    box-shadow:var(--shadow-lg);
  }
  .login-card h1{margin:0 0 3px;font-size:25px;letter-spacing:-.4px;font-weight:800;}
  .login-card .tag{color:var(--muted);font-size:12.5px;margin-bottom:26px;letter-spacing:.2px;}
  .login-label{display:block;font-size:11px;color:var(--muted);margin:0 0 6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}

  .name-card-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
  .name-card-row .name-empty{font-size:12px;color:var(--muted);padding:6px 2px;}
  .name-card{
    flex:1 1 calc(50% - 8px);min-width:100px;padding:13px 10px;text-align:center;
    border:1px solid var(--border);background:var(--surface-2);
    border-radius:var(--radius-md);font-size:13px;font-weight:700;color:var(--ink);
    transition:background .2s var(--ease-soft),color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),transform .2s var(--ease-soft),border-color .2s var(--ease-soft);
  }
  .name-card.active{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
    box-shadow:0 8px 18px var(--accent-glow);transform:translateY(-1px);
  }
  .login-card .dd-card{margin-bottom:18px;}
  .lang-switch{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;padding:3px;}
  .lang-switch button{padding:5px 12px;border:none;background:transparent;border-radius:999px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.03em;}
  .lang-switch button.active{background:var(--ink);color:var(--surface);}
  #langSwitchLogin{position:absolute;top:18px;right:18px;}
  .login-card{position:relative;}
  .login-card input,.login-card select{
    width:100%;padding:14px 15px;margin-bottom:13px;border:1.5px solid var(--border);
    border-radius:var(--radius-sm);font-size:15px;background:var(--surface-2);color:var(--ink);
    transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft);
  }
  .login-card input:focus,.login-card select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft);}
  .login-card .btn-main{
    width:100%;padding:16px;border:none;border-radius:var(--radius-sm);
    background:var(--accent);
    color:var(--accent-ink);font-size:15px;font-weight:700;letter-spacing:.2px;
    box-shadow:0 10px 24px var(--accent-glow);
  }
  .login-card .btn-main:active{background:var(--accent-dark);}
  .login-err{color:var(--warn);font-size:12px;margin:-4px 0 10px;min-height:14px;font-weight:600;}

  /* ---------- FOOTER ---------- */
  .app-footer{
    text-align:center;font-size:11px;color:var(--muted);letter-spacing:.2px;
    padding:6px 0 0;flex-shrink:0;user-select:none;
  }
  .app-footer b{color:var(--ink);font-weight:700;}
  .login-wrap .app-footer{position:absolute;left:0;right:0;bottom:8px;padding:6px 20px 0;}
  .app-footer--main{padding-top:8px;}

  /* ---------- TOPBAR ---------- */
  #mainApp{gap:14px;padding:14px 14px 4px;}
  #topbar{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:13px 18px;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--border-soft);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);flex-shrink:0;
  }
  #topbar .brand{font-weight:800;letter-spacing:-.3px;font-size:15.5px;}
  #topbar .topbar-actions{
    margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;
    justify-content:flex-end;gap:8px 12px;
  }
  #topbar .kas-display{
    display:flex;flex-direction:column;align-items:flex-end;gap:1px;
    background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
    padding:7px 13px;line-height:1.25;
  }
  #topbar .kas-display .kas-label{font-size:9.5px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;font-weight:700;}
  #topbar .kas-display #kasAmount{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
  #topbar .kas-display.hidden{display:none;}
  #topbar .who{font-size:11px;color:var(--muted);text-align:right;line-height:1.35;}
  #topbar .who b{color:var(--ink);}
  #topbar .who-store-code{display:block;font-size:10px;color:var(--muted);letter-spacing:.5px;margin-top:1px;}
  #topbar .status-row{display:inline-flex;align-items:center;gap:5px;}
  #topbar .status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;display:inline-block;}
  #topbar .status-dot.online{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  #topbar .status-dot.offline{background:var(--warn);box-shadow:none;}
  #topbar button.icon-btn{
    background:var(--surface-2);border:1px solid var(--border-soft);color:var(--ink);border-radius:999px;
    padding:9px 14px;font-size:13px;font-weight:600;transition:background .2s var(--ease-soft),transform .2s var(--ease-soft);
  }
  #topbar button.icon-btn:active{transform:scale(.94);background:var(--surface-3);}

  /* ---------- NAV ----------
     Buttons hug their own content (icon+label) instead of being stretched to
     equal width — so the emerald active box is always precisely the size of
     its text, short or long. If a role's full tab set doesn't fit on one
     line (e.g. admin's 5 tabs on a narrow phone) the row wraps to a second
     line instead of clipping a button mid-way or hiding it behind a scroll. */
  #nav{
    display:flex;flex-wrap:nowrap;gap:6px;flex-shrink:0;
    justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:var(--surface);
    border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:7px;
    box-shadow:var(--shadow-sm);
  }
  #nav button{
    flex:1 1 0;min-width:0;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:11px 10px;border:none;background:transparent;font-size:12px;font-weight:700;
    color:var(--muted);border-radius:calc(var(--radius-md) - 4px);white-space:nowrap;transition:background .2s var(--ease-soft),color .2s var(--ease-soft);
  }
  #nav button.active{color:var(--accent-ink);background:var(--accent);box-shadow:0 6px 16px var(--accent-glow);}

  /* Below the tablet breakpoint (860px, same one used for the dashboard grid),
     nav collapses to icon-only. This guarantees all 5 tabs always fit in a
     single row without ever needing to scroll — regardless of the exact
     phone width, which varies more between real devices (360-720px CSS px)
     than a single "phone vs tablet" split can safely assume. Labels only
     come back on genuinely wide screens where there's room to spare. */
  #nav button span{display:none;}
  /* navDashboardIcon is the emoji itself (📊/💸), not a text label — unlike
     the other nav buttons where the emoji sits as bare text outside the span
     and the label span is the only thing hidden. Excluded here so the icon
     stays visible below the 860px breakpoint (phones, portrait mode). */
  #nav button span#navDashboardIcon{display:inline;}
  @media (min-width:860px){
    #nav{justify-content:center;gap:10px;padding:8px;}
    #nav button{flex:0 0 auto;padding:13px 26px;font-size:13.5px;gap:6px;}
    #nav button span{display:inline;}
  }

  /* ---------- VIEWS ---------- */
  #views{flex:1;overflow:hidden;position:relative;}
  .view{position:absolute;inset:0;display:none;overflow:auto;}
  .view.active{display:flex;flex-direction:column;animation:viewIn .36s var(--ease-soft);}
  @keyframes viewIn{
    from{opacity:0;transform:translateY(8px);}
    to{opacity:1;transform:translateY(0);}
  }
  @media (prefers-reduced-motion:reduce){ .view.active{animation:none;} }
  @media (prefers-reduced-motion:reduce){
    .pop-in{animation:none !important;opacity:1 !important;transform:none !important;}
  }

  /* ================= POP-IN ENTRANCE ANIMATIONS (lightweight, no library) =================
     Randomly assigned per element at render time (see popMeta() in helpers.js).
     Pure CSS keyframes: plays automatically the instant a fresh element is inserted
     into the DOM, so there's no scroll/viewport detection to get wrong inside the
     app's many independently-scrolling panels. */
  @keyframes popFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes popFadeDown{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes popSlideLeft{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:translateX(0);}}
  @keyframes popSlideRight{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:translateX(0);}}
  @keyframes popFadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes popZoomIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
  .pop-in{animation-duration:.34s;animation-timing-function:cubic-bezier(.22,.61,.36,1);animation-fill-mode:both;}
  .pop-fade-up{animation-name:popFadeUp;}
  .pop-fade-down{animation-name:popFadeDown;}
  .pop-slide-left{animation-name:popSlideLeft;}
  .pop-slide-right{animation-name:popSlideRight;}
  .pop-fade-in{animation-name:popFadeIn;}
  .pop-zoom-in{animation-name:popZoomIn;}

  /* ---------- SCROLL-REVEAL "pending" state ----------
     List items start in .pop-pending (invisible, parked at their animation's
     starting position) until popObserve() in helpers.js sees them enter their
     own scroll container's viewport, then swaps in .pop-in to play the
     animation — so cards/rows animate in as you scroll down OR back up
     through prod-grid, cart, history, reports, etc. */
  .pop-pending{opacity:0;}
  .pop-pending.pop-fade-up{transform:translateY(16px);}
  .pop-pending.pop-fade-down{transform:translateY(-16px);}
  .pop-pending.pop-slide-left{transform:translateX(30px);}
  .pop-pending.pop-slide-right{transform:translateX(-30px);}
  .pop-pending.pop-zoom-in{transform:scale(.95);}
  @media (prefers-reduced-motion:reduce){
    .pop-pending{opacity:1 !important;transform:none !important;}
  }

  /* ---------- POS VIEW ---------- */
  #view-pos{flex-direction:row !important;gap:14px;}
  .pos-left{
    flex:1.3;display:flex;flex-direction:column;min-width:0;
    background:var(--surface);
    border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  }
  .pos-search{padding:14px 14px 6px;display:flex;gap:8px;flex-shrink:0;}
  .pos-search input{
    flex:1;padding:13px 18px;border:1.5px solid var(--border);border-radius:999px;font-size:14px;
    background:var(--surface-2);color:var(--ink);transition:border-color .2s var(--ease-soft),background .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
  }
  .pos-search input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft);}
  .cat-row{display:flex;gap:8px;padding:11px 14px 13px;overflow-x:auto;overflow-y:visible;flex-shrink:0;}
  .cat-chip{
    padding:9px 18px;border:1px solid var(--border);border-radius:var(--radius-md);
    font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--ink);white-space:nowrap;
    transition:background .2s var(--ease-soft),color .2s var(--ease-soft),box-shadow .2s var(--ease-soft),transform .2s var(--ease-soft),border-color .2s var(--ease-soft);
  }
  .cat-chip.active{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
    box-shadow:0 6px 16px var(--accent-glow);
  }
  .cat-heading{padding:2px 16px 9px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);flex-shrink:0;}
  .cat-row-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 16px 9px;flex-shrink:0;}
  .cat-row-wrap .cat-heading{padding:0;flex:1;min-width:0;}
  .cat-row-wrap .dd-card{flex-shrink:0;}
  .cat-row-wrap .dd-card .dd-card-btn{padding:6px 10px;font-size:10.5px;}

  /* ---------- Filter tanggal (Riwayat & Laporan) ---------- */
  .date-filter-row{display:flex;align-items:center;gap:8px;margin:0 0 16px;flex-wrap:wrap;flex-shrink:0;}
  .month-label{font-size:13px;font-weight:800;color:var(--ink);min-width:120px;text-align:center;}
  .date-input{
    padding:9px 13px;border:1px solid var(--border);border-radius:999px;font-size:12.5px;
    background:var(--surface-2);color:var(--ink);font-family:inherit;
    flex:0 0 auto;width:auto;
    font-variant-numeric:tabular-nums;
  }
  /* WebKit/Blink (Chrome, most Android WebViews) reserve extra internal
     padding around the date segments and picker icon by default — tight
     enough on a phone-width flex row that the year segment gets visually
     clipped. Trimming that internal chrome, instead of just the outer
     input, is what lets the box hug the date text instead of being either
     clipped or artificially wide. */
  .date-input::-webkit-datetime-edit{padding:0;display:flex;align-items:center;}
  .date-input::-webkit-datetime-edit-fields-wrapper{display:flex;}
  .date-input::-webkit-datetime-edit-text{padding:0 1px;}
  .date-input::-webkit-datetime-edit-year-field,
  .date-input::-webkit-datetime-edit-month-field,
  .date-input::-webkit-datetime-edit-day-field{padding:0;}
  .date-input::-webkit-calendar-picker-indicator{margin-left:5px;padding:2px;flex-shrink:0;}
  .date-input::-webkit-inner-spin-button{display:none;}
  .prod-grid{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;padding:0 14px 14px;align-content:start;}
  .prod-card{
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 13px;text-align:left;
    display:flex;flex-direction:column;gap:6px;min-height:88px;color:var(--ink);
    box-shadow:var(--shadow-xs);
    transition:box-shadow .24s var(--ease-soft),transform .22s var(--ease-soft),background .2s var(--ease-soft),border-color .2s var(--ease-soft);
  }
  .prod-card:active{transform:scale(.96);background:var(--surface-2);}
  .prod-card:not(:disabled):hover{border-color:var(--accent);box-shadow:var(--shadow-md);}
  @media (hover:hover) and (pointer:fine){
    .prod-card:not(:disabled):hover{transform:translateY(-3px);}
  }
  .prod-card .pname{font-size:12.5px;font-weight:700;line-height:1.25;}
  .prod-card .pprice{font-size:11.5px;color:var(--accent-dark);font-weight:800;}
  .prod-card .pstock{font-size:9.5px;color:var(--muted);}
  .custom-card{background:var(--surface-2);border-style:dashed;border-color:var(--muted-2);justify-content:center;align-items:center;text-align:center;box-shadow:none;}
  .custom-card .pname{font-size:20px;color:var(--muted);}
  .pvariant-badge{display:inline-block;font-size:8.5px;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);border:1px solid transparent;border-radius:999px;padding:1px 6px;vertical-align:middle;margin-left:2px;}

  /* ---------- Kelola Kategori ---------- */
  .cat-manage-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .cat-manage-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 7px 7px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink);cursor:pointer;}
  .cat-manage-chip button{border:none;background:var(--surface);color:var(--muted);width:18px;height:18px;border-radius:50%;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-xs);}

  /* ---------- Pilih Varian Hot/Ice (POS) ---------- */
  .variant-options{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
  .variant-opt-btn{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);color:var(--ink);font-size:13.5px;font-weight:700;width:100%;transition:background .14s,border-color .14s;}
  .variant-opt-btn:active{background:var(--accent-soft);border-color:var(--accent);}
  .variant-opt-btn .vo-price{color:var(--accent-dark);font-weight:800;}

  .pos-right{
    flex:1;display:flex;flex-direction:column;min-width:0;
    background:var(--surface);
    border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  }
  .cart-head{padding:15px 16px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
  .cart-head b{font-size:13.5px;}
  .cart-head .hold-btn{font-size:10.5px;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:7px 12px;color:var(--ink);font-weight:700;}
  .cart-head .hold-btn:disabled{opacity:.4;}
  .cart-head-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
  .cart-head .btn-clear-cart{color:var(--warn);background:var(--warn-bg);border-color:transparent;}
  .cart-head .btn-clear-cart:disabled{opacity:.4;}
  .cart-items{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px;}
  .cart-row{display:flex;gap:8px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border-soft);}
  .cart-row .ci-name{flex:1;font-size:12px;font-weight:500;}
  .cart-row .ci-name small{display:block;color:var(--muted);font-size:10px;}
  .qty-ctrl{display:flex;align-items:center;gap:7px;}
  .qty-ctrl button{width:26px;height:26px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:50%;font-size:13px;line-height:1;font-weight:700;}
  .qty-ctrl span{min-width:16px;text-align:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
  .ci-total{width:72px;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
  .ci-del{color:var(--warn);font-size:15px;border:none;background:transparent;padding:0 0 0 4px;}
  .cart-empty{padding:36px 10px;text-align:center;color:var(--muted);font-size:12px;}

  .cart-summary{border-top:1px solid var(--border-soft);padding:15px 16px;flex-shrink:0;background:var(--surface-2);}
  .sum-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;color:var(--muted);}
  .sum-row.total{font-size:19px;color:var(--ink);font-weight:800;margin-top:7px;font-variant-numeric:tabular-nums;}
  .disc-row{display:flex;gap:6px;align-items:center;margin:9px 0;flex-wrap:wrap;}
  .disc-row input{width:92px;padding:8px 8px;border:1px solid var(--border);border-radius:10px;font-size:11px;background:var(--surface);color:var(--ink);}
  .disc-row label{font-size:10px;color:var(--muted);}
  .pct-input-wrap{position:relative;display:inline-block;}
  .pct-input-wrap input{width:70px;padding-right:22px !important;}
  .pct-input-wrap .pct-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);pointer-events:none;}
  .split-result{margin-top:8px;padding:12px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;text-align:center;color:var(--ink);}
  .split-result small{display:block;font-weight:500;color:var(--muted);font-size:10.5px;margin-top:2px;}
  .split-mode-tabs{display:flex;gap:8px;margin:10px 0 12px;}
  .split-mode-btn{
    flex:1;padding:11px 6px;border:1px solid var(--border);background:var(--surface-2);
    border-radius:var(--radius-sm);font-size:11.5px;font-weight:700;color:var(--muted);
  }
  .split-mode-btn.active{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
    box-shadow:0 6px 14px var(--accent-glow);
  }
  .split-item-row{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:10px 12px;margin-bottom:6px;
  }
  .split-item-row .si-name{font-size:12.5px;font-weight:600;color:var(--ink);}
  .split-item-row .si-name small{display:block;color:var(--muted);font-size:10.5px;font-weight:500;margin-top:1px;}
  .btn-pay{
    width:100%;margin-top:9px;padding:17px;border:none;border-radius:var(--radius-sm);
    background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:800;
    box-shadow:0 12px 26px var(--accent-glow);
  }
  .btn-pay:active{background:var(--accent-dark);}
  .btn-pay:disabled{background:var(--disabled-bg);color:var(--disabled-ink);box-shadow:none;}

  /* ---------- HELD ORDERS ---------- */
  .held-frame{
    flex:1;display:flex;overflow:hidden;
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  }
  .held-list{flex:1;padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .held-item{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;transition:box-shadow .2s var(--ease-soft),transform .2s var(--ease-soft);}
  @media (hover:hover) and (pointer:fine){
    .held-item:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
  }
  .held-item .h-info b{font-size:13px;}
  .held-item .h-info div{font-size:11px;color:var(--muted);margin-top:2px;}
  .held-item .h-actions{display:flex;gap:6px;}
  .held-item button{padding:9px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:11px;font-weight:700;}
  .held-item .resume{background:var(--accent);color:var(--accent-ink);border:none;}

  /* ---------- PRODUCTS (admin) / GENERIC PANEL ---------- */
  .panel{
    flex:1;display:flex;flex-direction:column;padding:20px 20px 0;overflow:hidden;
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  }
  .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-shrink:0;}
  .panel-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;}
  .panel-head h2{font-size:15.5px;margin:0;font-weight:800;letter-spacing:-.2px;}
  .btn-add{padding:11px 17px;border:none;border-radius:999px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:700;box-shadow:var(--shadow-xs);}

  /* ---------- DASHBOARD (Ringkasan + Kelola Produk digabung) ---------- */
  .dash-tabs{display:flex;gap:8px;margin-bottom:16px;flex-shrink:0;background:var(--surface-2);border-radius:var(--radius-md);padding:4px;}
  .dash-tab{
    flex:1;padding:10px 0;border:none;background:transparent;
    border-radius:calc(var(--radius-md) - 4px);font-size:12.5px;font-weight:700;color:var(--muted);
    transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
  }
  .dash-tab.active{
    background:var(--surface);color:var(--ink);
    box-shadow:var(--shadow-sm);
  }
  .dash-pane{display:none;}
  .dash-pane.active{display:flex;flex-direction:column;flex:1;min-height:0;animation:viewIn .28s var(--ease);}
  .dash-report-heading{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:12px;flex-shrink:0;}
  .dash-pane-actions{display:flex;gap:8px;margin-bottom:14px;flex-shrink:0;flex-wrap:wrap;}
  .btn-reset-data{margin-left:auto;}

  /* Reports pane splits into two side-by-side groups once there's room:
     KPIs + payment chart on the left, the transaction feed on the right —
     instead of one long column that left tablets mostly empty. Each side
     is its own soft recessed "group card" so the split reads as two
     related widgets, not an arbitrary column break. */
  .dash-report-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
  .dash-report-col{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:16px;}
  .dash-subheading{font-size:12px;font-weight:800;color:var(--ink);margin:2px 0 12px;display:flex;align-items:center;gap:6px;}
  .dash-subheading:not(:first-child){margin-top:18px;}
  @media (min-width:860px){
    .dash-report-grid{grid-template-columns:1.25fr 1fr;}
  }

  /* ---------- SETTINGS ----------
     Each settings group is its own soft "card" instead of a bare heading
     with a hairline underneath, and the cards reflow into a responsive
     grid — one column on a phone, a neat two-column arrangement once
     there's tablet-width to use. List-heavy groups (accounts, shift
     history, void log) span the full row via .wide. */
  /* Masonry "photo grid" layout: cards keep their natural height (sized
     to whatever content they hold — a short toggle list vs. a long
     account list) but are packed into tidy, balanced columns instead of
     a rigid row grid with dead space. .wide sections (long lists like
     Kelola Akun, Riwayat, Log Void) span every column via column-span. */
  .settings-grid{column-count:1;column-gap:16px;margin-bottom:16px;}
  @media (min-width:760px){ .settings-grid{column-count:2;} }
  @media (min-width:1180px){ .settings-grid{column-count:3;} }
  .settings-section{
    max-width:none;margin:0 0 16px;break-inside:avoid;
    background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
    padding:18px 20px 22px;
  }
  .settings-section.wide{column-span:all;margin-top:8px;}
  .settings-scroll-area{max-height:340px;overflow-y:auto;}
  .settings-section h3{
    display:flex;align-items:center;gap:10px;
    font-size:14px;letter-spacing:-.1px;color:var(--ink);margin:0 0 14px;border-bottom:1px solid var(--border);padding-bottom:13px;font-weight:800;
  }
  .settings-section h3 .set-ico{
    flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
    font-size:15px;background:var(--surface);border-radius:10px;box-shadow:var(--shadow-xs);
  }
  .settings-section .panel-head{margin:0 0 15px;padding-bottom:13px;border-bottom:1px solid var(--border);align-items:center;}
  .settings-section .panel-head h3{margin:0;padding:0;border:none;}
  .settings-form label{display:block;font-size:11px;color:var(--muted);margin:11px 0 5px;font-weight:700;}
  .settings-form input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--surface);color:var(--ink);}
  .settings-form input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft);}
  .settings-actions{max-width:none;}
  .settings-actions .btn-add{width:100%;padding:14px;font-size:13px;}
  .settings-note{max-width:none;margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.65;}
  .danger-zone{border-color:var(--warn);background:var(--warn-bg);}
  .danger-zone h3{border-bottom-color:rgba(206,68,60,.25);color:var(--warn-dark);}
  .danger-zone .settings-note{margin-top:0;margin-bottom:16px;color:var(--warn-dark);}
  .danger-actions{display:flex;flex-wrap:wrap;gap:10px;}
  .btn-danger-outline, .btn-danger-solid{
    padding:11px 17px;border-radius:999px;font-size:12px;font-weight:700;box-shadow:var(--shadow-xs);
    transition:background .2s var(--ease-soft),color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
  }
  .btn-danger-outline{background:var(--surface);border:1.5px solid var(--warn);color:var(--warn-dark);}
  .btn-danger-outline:hover{background:var(--warn);color:var(--warn-ink);}
  .btn-danger-solid{background:var(--warn);border:none;color:var(--warn-ink);box-shadow:0 8px 18px rgba(206,68,60,.28);}
  .btn-danger-solid:hover{background:var(--warn-dark);}
  .table-row{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 15px;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;transition:box-shadow .2s var(--ease-soft),transform .2s var(--ease-soft);}
  .settings-section .table-row{background:var(--surface);box-shadow:var(--shadow-xs);}
  .table-row .tr-main{flex:1;min-width:140px;cursor:pointer;border-radius:var(--radius-sm);padding:2px 6px;margin:-2px -6px;transition:background .18s var(--ease-soft),transform .18s var(--ease-soft);}
  .table-row .tr-main:active{transform:scale(.98);background:var(--surface-3);}
  .table-row .tr-main b{font-size:13px;}
  .table-row .tr-main div{font-size:11px;color:var(--muted);margin-top:2px;}
  .table-row .tr-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
  .table-row button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:8px 13px;font-size:11px;color:var(--ink);font-weight:700;}
  .settings-section .table-row button{background:var(--surface-2);}
  .table-row .del{color:var(--warn);}
  @media (hover:hover) and (pointer:fine){
    .table-row:hover{box-shadow:var(--shadow-sm);}
  }

  /* ---------- SWITCH TOGGLE ---------- */
  .switch-row{display:flex;align-items:center;justify-content:space-between;max-width:none;padding:12px 0;font-size:12.5px;border-bottom:1px solid var(--border-soft);gap:12px;}
  .switch-row:last-of-type{border-bottom:none;}
  .switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;}
  .switch input{opacity:0;width:0;height:0;}
  .switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--track-bg);border-radius:999px;transition:background .24s var(--ease-soft),box-shadow .24s var(--ease-soft);}
  .switch .slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:var(--thumb);border-radius:50%;transition:transform .24s var(--ease-soft);box-shadow:0 1px 4px rgba(0,0,0,.2);}
  .switch input:checked + .slider{background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow);}
  .switch input:checked + .slider::before{transform:translateX(18px);}

  /* ---------- REPORTS ---------- */
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-bottom:4px;}
  .stat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 15px;box-shadow:var(--shadow-xs);transition:box-shadow .2s var(--ease-soft),transform .2s var(--ease-soft);}
  .stat-card .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
  .stat-card .val{font-size:19px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;}
  .tx-row{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:7px;display:flex;justify-content:space-between;font-size:12px;box-shadow:var(--shadow-xs);}
  .tx-row .muted{color:var(--muted);font-size:10.5px;}

  /* ---------- PAYMENT METHOD CHART ---------- */
  .pay-chart{margin:2px 0 4px;}
  .pay-chart-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .pay-chart-label{width:74px;flex-shrink:0;font-size:11px;font-weight:700;color:var(--muted);}
  .pay-chart-bar-wrap{flex:1;height:11px;border-radius:999px;background:var(--surface);border:1px solid var(--border-soft);overflow:hidden;}
  .pay-chart-bar{height:100%;border-radius:999px;min-width:4px;transition:width .5s cubic-bezier(.22,1,.36,1);}
  .pay-chart-bar.pm-cash{background:var(--accent);}
  .pay-chart-bar.pm-qris{background:var(--blue);}
  .pay-chart-bar.pm-debit{background:var(--amber);}
  .pay-chart-val{width:100px;flex-shrink:0;text-align:right;font-size:12px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}

  /* ---------- VOID / REFUND ---------- */
  .void-badge{display:inline-block;background:var(--warn);color:var(--warn-ink);font-size:9px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;}
  .void-meta{font-size:10.5px;color:var(--muted);margin-top:2px;}
  .voided-row{opacity:.55;}
  .void-self-tag{font-style:italic;opacity:.85;}

  /* ---------- OVERVIEW EXTRAS (weekly trend, top/slow sellers, attendance) ---------- */
  .dash-overview-extra{margin-top:20px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;}
  .week-chart{margin-bottom:4px;}
  .week-line-svg{width:100%;height:96px;display:block;overflow:visible;}
  .week-line-area{stroke:none;}
  .week-line-stroke{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
  .week-line-dot{fill:var(--surface-2);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;}
  .week-line-dot.is-today{fill:var(--accent);stroke:var(--accent);}
  .week-line-peak-val{font-size:10px;font-weight:800;fill:var(--ink);text-anchor:middle;}
  .week-line-labels{display:flex;justify-content:space-between;padding:4px 2px 0;}
  .week-line-labels span{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;}
  .week-line-labels span.is-today{color:var(--accent);}
  .overview-2col{display:grid;grid-template-columns:1fr;gap:16px;margin-top:14px;}
  .overview-2col.overview-2col-chart{margin-top:0;}
  @media (min-width:600px){ .overview-2col{grid-template-columns:1fr 1fr;} }
  .attend-scroll{max-height:170px;overflow-y:auto;}
  .seller-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:9px 12px;margin-bottom:7px;box-shadow:var(--shadow-xs);}
  .seller-rank{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--muted);}
  .seller-info{flex:1;min-width:0;}
  .seller-info b{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .seller-info span{font-size:10.5px;color:var(--muted);}
  .seller-qty{flex-shrink:0;font-size:12px;font-weight:800;color:var(--accent);}
  .slow-seller .seller-qty{color:var(--warn);}
  .attend-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 13px;margin-bottom:7px;box-shadow:var(--shadow-xs);flex-wrap:wrap;}
  .attend-row b{font-size:12px;}
  .attend-row .attend-time{font-size:10.5px;color:var(--muted);}
  .attend-badge{font-size:9px;font-weight:800;letter-spacing:.4px;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);flex-shrink:0;}
  .attend-badge.on-duty{background:var(--warn-bg);color:var(--warn-dark);}

  /* ---------- MODAL ---------- */
  .modal-bg{
    position:fixed;inset:0;background:rgba(16,18,26,.44);
    -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    display:none;align-items:center;justify-content:center;z-index:50;padding:22px;
    opacity:0;transition:opacity .26s var(--ease-soft);
  }
  .modal-bg.open{display:flex;}
  .modal-bg.show{opacity:1;}
  .modal{
    width:100%;max-width:430px;
    background:var(--surface);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-lg);padding:26px 24px;max-height:86vh;overflow-y:auto;
    box-shadow:var(--shadow-lg);
    transform:scale(.94) translateY(14px);opacity:0;
    transition:transform .32s var(--ease-soft),opacity .24s var(--ease-soft);
  }
  .modal-bg.show .modal{transform:scale(1) translateY(0);opacity:1;}
  .modal h3{margin:0 0 16px;font-size:15.5px;font-weight:800;}
  .modal label{display:block;font-size:11px;color:var(--muted);margin:11px 0 5px;font-weight:700;}
  .modal input,.modal select{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--surface-2);color:var(--ink);}
  .modal input:focus,.modal select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft);}

  /* ---------- DROPDOWN CARD (custom select) ---------- */
  .dd-native-select{position:absolute !important;width:0 !important;height:0 !important;padding:0 !important;margin:0 !important;border:none !important;opacity:0 !important;pointer-events:none !important;}
  .dd-card{position:relative;}
  .dd-card-btn{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    font-size:14px;font-weight:600;background:var(--surface-2);color:var(--ink);
    transition:box-shadow .15s,border-color .15s;
  }
  .dd-card.open .dd-card-btn{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
  .dd-card-chevron{font-size:10px;color:var(--muted);transition:transform .18s;flex-shrink:0;}
  .dd-card.open .dd-card-chevron{transform:rotate(180deg);color:var(--accent-dark);}
  .dd-card-panel{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
    display:flex;flex-direction:column;gap:6px;padding:8px;
    background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);max-height:220px;overflow-y:auto;
    opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;visibility:hidden;
    transition:opacity .2s var(--ease-soft),transform .2s var(--ease-soft),visibility 0s linear .2s;
  }
  .dd-card.open .dd-card-panel{
    opacity:1;transform:translateY(0) scale(1);pointer-events:auto;visibility:visible;
    transition:opacity .2s var(--ease-soft),transform .2s var(--ease-soft),visibility 0s;
  }
  .dd-card-option{
    text-align:left;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid transparent;
    background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:600;
    transition:background .14s,color .14s,transform .14s;
  }
  .dd-card-option.active{
    background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  }
  .modal-actions{display:flex;gap:8px;margin-top:18px;}
  .modal-actions button{flex:1;padding:14px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;}
  .btn-cancel{border:1px solid var(--border);background:var(--surface-2);color:var(--ink);}
  .btn-confirm{border:none;background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 22px var(--accent-glow);}
  .btn-confirm.btn-danger{background:var(--warn);color:var(--warn-ink);box-shadow:0 10px 22px rgba(206,68,60,.3);}
  .confirm-msg{font-size:13px;color:var(--muted);line-height:1.55;}
  .method-tabs{display:flex;gap:6px;margin-top:6px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:999px;padding:4px;}
  .method-tabs button{flex:1;padding:11px 4px;border:none;background:transparent;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;transition:background .2s var(--ease-soft),color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);}
  .method-tabs button.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 12px var(--accent-glow);}
  .quick-cash{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
  .quick-cash button{padding:9px 12px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:999px;font-size:11px;font-weight:700;}
  .change-box{margin-top:10px;padding:12px 14px;background:var(--change-bg);border-radius:var(--radius-sm);font-size:13px;display:flex;justify-content:space-between;font-weight:700;}
  .change-box.neg{background:var(--change-neg-bg);color:var(--warn);}

  .toast{
    position:fixed;bottom:22px;left:50%;
    background:var(--ink);color:var(--surface);border:none;
    padding:13px 24px;border-radius:999px;font-size:12px;font-weight:600;z-index:80;opacity:0;pointer-events:none;
    transform:translateX(-50%) translateY(14px) scale(.94);
    transition:opacity .28s var(--ease),transform .28s var(--ease);box-shadow:var(--shadow-lg);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}

  /* ---------- RECEIPT (thermal print) — dijaga apa adanya, ga kena tema ---------- */
  #receipt{display:none;}
  @page{ size:58mm auto; margin:0; }
  @media print{
    html,body{width:58mm;height:auto;background:#fff;}
    .glass-bg, #app, .modal-bg, #toast{display:none !important;}
    #receipt{
      display:block !important;
      width:58mm;
      margin:0;
      padding:2.5mm 2.5mm 4mm 2.5mm;
      /* Same type family as the rest of the app (already loaded at 500/600/700/800,
         so every weight below renders as a real cut, not a synthesized fake-bold)
         instead of a system monospace — cleaner letterforms print noticeably
         crisper on a thermal head than Courier's typewriter-style strokes. */
      font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      font-weight:600;
      font-size:11px;
      line-height:1.42;
      color:#000;
      -webkit-font-smoothing:antialiased;
      font-smooth:always;
      text-rendering:optimizeLegibility;
      -webkit-print-color-adjust:exact;
      print-color-adjust:exact;
      font-variant-numeric:tabular-nums;
      page-break-after:avoid;
      page-break-inside:avoid;
      break-inside:avoid;
    }
    /* Thermal printers render thin strokes faintly; a hairline stroke on every
       element thickens the glyphs so text stays dark and legible instead of
       coming out blurry/washed out. Lighter than before since real bold cuts
       (600-800) already carry more of that weight themselves now. */
    #receipt, #receipt *{
      -webkit-text-stroke:.2px currentColor;
      text-stroke:.2px currentColor;
    }
    #receipt .r-foot{page-break-inside:avoid;break-inside:avoid;}
    #receipt .r-store{text-align:center;font-size:15.5px;font-weight:800;letter-spacing:.3px;margin-bottom:2px;-webkit-text-stroke:.3px currentColor;}
    #receipt .r-addr{text-align:center;font-size:10px;font-weight:500;line-height:1.4;}
    #receipt hr{border:none;border-top:1.4px dashed #000;margin:4px 0;}
    #receipt .r-info{margin-bottom:3px;}
    #receipt .r-info-row{display:flex;justify-content:space-between;gap:6px;font-size:10px;font-weight:600;line-height:1.55;}
    #receipt .r-info-row span:first-child{color:#000;}
    #receipt .r-info-row span:last-child{text-align:right;font-weight:700;}
    #receipt .r-item{margin-bottom:3px;}
    #receipt .r-line{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;font-weight:600;line-height:1.42;}
    /* Summary labels (Subtotal/Diskon/Tunai/…) stay at the row's normal weight —
       item names below are the ones that get the bold treatment, so the eye
       lands on "what was bought" first and totals second, like a receipt from
       a proper POS rather than a flat wall of same-weight text. */
    #receipt .r-line span:first-child{max-width:36mm;word-break:break-word;font-weight:600;}
    #receipt .r-line span:last-child{text-align:right;white-space:nowrap;}
    #receipt .r-item .r-line span:first-child{font-weight:700;}
    #receipt .r-item small{display:block;padding-left:4px;margin-top:0;font-size:9.5px;font-weight:500;color:#000;}
    #receipt .r-total{font-size:13.5px;font-weight:800;letter-spacing:.2px;margin-top:2px;-webkit-text-stroke:.3px currentColor;}
    #receipt .r-total span:first-child,#receipt .r-total span:last-child{font-size:13.5px;font-weight:800;}
    #receipt .r-foot{text-align:center;margin-top:8px;padding-bottom:2mm;}
    #receipt .r-foot hr{margin:6px 0;}
    #receipt .r-thanks{font-size:11px;font-weight:700;margin-bottom:6px;letter-spacing:.2px;}
    #receipt .r-brand{font-size:9px;font-weight:500;letter-spacing:.1px;color:#000;margin-bottom:2px;}
  }

  @media (max-width:720px){
    #view-pos{flex-direction:column !important;}
    .pos-left{min-height:180px;}
    .pos-right{
      max-height:46vh;
      max-height:calc(var(--vh, 1vh) * 46);
      max-height:46dvh;
      min-height:270px;
      flex-shrink:0;
    }
    .stat-grid{grid-template-columns:1fr 1fr;}
  }

  /* ---------- Small Android phones (≈360dp and below) ----------
     Tighter paddings/gaps and a smaller minimum card width so the
     product grid always keeps its full columns visible instead of
     the last column getting squeezed or clipped at the edge. */
  @media (max-width:480px){
    #mainApp{gap:8px;padding:8px 8px 4px;}
    #topbar{padding:9px 11px;gap:5px 8px;}
    #topbar .brand{font-size:13px;}
    #topbar .kas-display .kas-label{font-size:8.5px;}
    #topbar .kas-display #kasAmount{font-size:11.5px;}
    #topbar .who{font-size:10px;}
    #nav{gap:4px;padding:5px;}
    #nav button{padding:7px 9px;font-size:10.5px;gap:4px;}
    .pos-search{padding:9px 9px 5px;}
    .pos-search input{padding:10px 14px;font-size:12.5px;}
    .cat-row{padding:7px 9px 9px;gap:6px;}
    .prod-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px;padding:0 9px 9px;}
    .prod-card{padding:8px 7px;min-height:64px;}
    .prod-card .pname{font-size:11px;}
    .prod-card .pprice{font-size:10px;}
    .prod-card .pstock{font-size:8.5px;}
    .cart-head{padding:9px 10px;}
    .cart-head b{font-size:12px;}
    .cart-head-actions{gap:4px;}
    .cart-head .hold-btn{padding:5px 8px;font-size:9px;}
    .cart-row{padding:7px 0;gap:6px;}
    .cart-row .ci-name{font-size:11px;}
    .cart-row .ci-name small{font-size:9px;}
    .qty-ctrl{gap:5px;}
    .qty-ctrl button{width:21px;height:21px;font-size:11px;}
    .qty-ctrl span{font-size:11px;}
    .ci-total{width:58px;font-size:11px;}
    .ci-del{font-size:13px;}
    .cart-summary{padding:8px 10px;}
    .sum-row{font-size:10.5px;margin-bottom:3px;}
    .sum-row.total{font-size:15px;margin-top:4px;}
    .disc-row{margin:5px 0;gap:5px;}
    .disc-row input{padding:5px 6px;font-size:10px;}
    .disc-row label{font-size:9px;}
    .btn-pay{padding:11px;margin-top:5px;font-size:13px;}
  }

  /* ---------- Tablets (≈600dp and up, portrait & landscape) ----------
     Roomier grid cards and a touch more breathing room now that the
     side-by-side POS layout (grid + cart) has real width to work with. */
  @media (min-width:760px){
    .prod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
    .pos-search{padding:16px 16px 8px;}
    .pos-search input{padding:14px 20px;font-size:14.5px;}
    .prod-card{padding:16px 15px;min-height:96px;}
    .prod-card .pname{font-size:13.5px;}
  }

  /* ---------- Small phones held sideways (landscape) ----------
     Below ~720px wide the layout normally stacks grid-over-cart, but a
     phone in landscape is short, not narrow — stacking there leaves
     almost no vertical room for either panel. Keep them side-by-side. */
  @media (max-width:720px) and (max-height:440px) and (orientation:landscape){
    #view-pos{flex-direction:row !important;}
    .pos-left{min-height:0;}
    .pos-right{max-height:none;min-height:0;}
  }

  /* ---------- Large tablets (≈1024dp and up) ----------
     Keeps the POS grid+cart from stretching edge-to-edge into
     uncomfortably wide cards/rows on big screens. */
  @media (min-width:1180px){
    #mainApp{max-width:1400px;margin:0 auto;width:100%;}
  }

/* ---------- Cloud Sync (Sinkronisasi Cloud) ---------- */
.cloud-status-row{
  display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;
}
.cloud-status-item{
  display:flex;flex-direction:column;gap:4px;
}
.cloud-status-label{
  font-size:.78em;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
}
.cloud-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#1fa971;margin-right:6px;vertical-align:middle;
}
.cloud-dot.offline{ background:#e0455a; }
.cloud-dot.pending{ background:#e0a91f; }
.cloud-copy-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg,#F2F3FA);border-radius:12px;padding:10px 14px;margin:10px 0;
}
.cloud-copy-val{
  font-size:1.2em;letter-spacing:2px;display:block;margin-top:2px;
}

/* ======================= LICENSE LOCK OVERLAY ======================= */
.dz25-lock-overlay{
  position:fixed;inset:0;z-index:999999;background:var(--bg-outer);
  display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.dz25-lock-overlay[hidden]{display:none;}
.dz25-lock-card{
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:36px 30px;max-width:380px;width:100%;text-align:center;
}
.dz25-lock-icon{font-size:40px;margin-bottom:8px;}
.dz25-lock-card h2{margin:0 0 8px;font-size:20px;color:var(--ink);}
.dz25-lock-sub{margin:0 0 20px;font-size:13.5px;color:var(--muted);line-height:1.5;}
.dz25-lock-card input{
  width:100%;box-sizing:border-box;padding:13px 16px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);font-size:16px;text-align:center;letter-spacing:1px;
  text-transform:uppercase;margin-bottom:12px;font-family:inherit;
}
.dz25-lock-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.dz25-lock-card button{
  width:100%;padding:13px;border:none;border-radius:var(--radius-sm);background:var(--accent);
  color:var(--accent-ink);font-size:15px;font-weight:700;cursor:pointer;
  transition:background .2s var(--ease);font-family:inherit;
}
.dz25-lock-card button:hover{background:var(--accent-dark);}
.dz25-lock-card button:disabled{opacity:.6;cursor:not-allowed;}
.dz25-lock-msg{margin-top:14px;font-size:13px;min-height:18px;color:var(--muted);}
.dz25-lock-msg.error{color:var(--warn-dark);}
.dz25-lock-foot{margin:16px 0 0;font-size:11.5px;color:var(--muted-2);}