/* ======================= 25Dz POS ======================= */
  :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;
    --surface-glass:rgba(255,255,255,.75);
    --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;
    --surface-glass:rgba(24,27,35,.7);
    --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;}

  .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 ---------- */
  .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%;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;}

  #app{
    height:100vh;
    height:100dvh;
    height:calc(var(--vh, 1vh) * 100);
    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),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);
    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);}
  .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;
  }
  .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 20px;
    background:var(--surface);color:var(--ink);
    border:1px solid var(--border-soft);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);flex-shrink:0;
    width:100%;max-width:1100px;align-self:center;
    transition:filter .25s var(--ease-soft);
  }
  #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);}
  #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 FAB + COLLAPSIBLE NAV ROW ---------- */
  .topbar-wrap{position:relative;width:100%;max-width:1100px;align-self:center;}

  .nav-fab{
    background:var(--accent);color:var(--accent-ink);border:1px solid var(--border-soft);
    border-radius:999px;padding:9px 12px;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s var(--ease-soft),transform .2s var(--ease-soft);
  }
  .nav-fab:active{transform:scale(.94);}
  .nav-fab .icon{width:16px;height:16px;}
  .nav-fab-icon-close{display:none;}
  .nav-fab[aria-expanded="true"] .nav-fab-icon-open{display:none;}
  .nav-fab[aria-expanded="true"] .nav-fab-icon-close{display:block;}

  .nav-collapse{
    width:100%;max-width:1100px;align-self:center;
    margin-bottom:0;transition:margin-bottom .32s var(--ease-soft);
  }
  .nav-collapse.open{margin-bottom:2px;}
  .nav-collapse-inner{
    overflow:hidden;max-height:0;display:flex;justify-content:center;
    padding:0 20px;will-change:max-height,padding;
    transition:max-height .32s var(--ease-soft),padding .32s var(--ease-soft);
  }
  .nav-collapse.open .nav-collapse-inner{max-height:160px;padding:6px 20px 26px;}
  #mainApp.nav-menu-open #topbar,#mainApp.nav-menu-open #views{
    filter:blur(6px);pointer-events:none;will-change:filter;
  }

  #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:999px;padding:7px;
    box-shadow:var(--shadow-md);
    max-width:100%;margin-top:2px;
  }
  #nav button{
    flex:0 0 auto;min-width:0;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:11px 16px;border:none;background:transparent;font-size:12px;font-weight:700;
    color:var(--muted);border-radius:999px;white-space:nowrap;transition:background .2s var(--ease-soft),color .2s var(--ease-soft);
  }
  #nav button.active{color:var(--accent-ink);background:var(--accent);}

  #nav button span{display:none;}
  #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;transition:filter .25s var(--ease-soft);}
  .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 ================= */
  @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 ---------- */
  .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);
  }
  .pos-search input:focus{outline:none;border-color:var(--accent);background:var(--surface);}
  .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),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);
  }
  .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;
  }
  .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);
  }
  .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;
  }
  .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 ---------- */
  .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;}

  .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 ---------- */
  .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);}
  .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);
  }
  .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);}
  .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);}
  .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);}
  .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);}

  /* ---------- DROPDOWN CARD ---------- */
  .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:border-color .15s;
  }
  .dd-card.open .dd-card-btn{border-color:var(--accent);}
  .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);}
  .btn-confirm.btn-danger{background:var(--warn);color:var(--warn-ink);}
  .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);}
  .method-tabs button.active{background:var(--accent);color:var(--accent-ink);}
  .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) ---------- */
  #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;
      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;
    }
    #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;}
    #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:46dvh;
      max-height:calc(var(--vh, 1vh) * 46);
      min-height:270px;
      flex-shrink:0;
    }
    .stat-grid{grid-template-columns:1fr 1fr;}
  }

  /* ---------- Small Android phones (≈360dp and below) ---------- */
  @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-fab{padding:7px 9px;}
    .nav-fab .icon{width:14px;height:14px;}
    .nav-collapse.open{margin-bottom:0;}
    .nav-collapse.open .nav-collapse-inner{max-height:120px;padding:4px 12px 18px;}
    #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) ---------- */
  @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) ---------- */
  @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) ---------- */
  @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);}
.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);}