:root{--header-h:132px;--ink:#1F3A2E;--ink-light:#2C503D;--paper:#FAF6ED;--paper-dark:#F0E8D4;--rust:#C1502E;--rust-dark:#A23F22;--mustard:#E0A63D;--charcoal:#2B2620;--success:#4F7942;--danger:#B33A3A;--border:#DED2B0;--shadow: 0 2px 10px rgba(31,58,46,0.08);
    --card-bg:#fff;--surface:#FAF6ED;--muted:#6E675B;--muted2:#6E675A;--text-secondary:#544f43;--label-color:#5c5548;--cart-empty-color:#6C665A;--disabled:#c9c1ae;--low-stock-bg:#FBEFE6;--badge-ok-bg:#E4EFDD;--ink-text:#1F3A2E;--ink-light-text:#2C503D;--overlay-bg:rgba(31,26,20,0.5);
    --retur-color:#a05a2c;--retur-bg:#fdf3ec;--void-bg:#fdecea;--void-text:#7a1f14;--badge-neutral-bg:#eee;}
  [data-theme="dark"]{--paper-dark:#141210;--card-bg:#211E19;--surface:#1B1815;--border:#3A342A;--charcoal:#ECE6D9;--muted:#A89C88;--muted2:#9C907C;--text-secondary:#C9C1AE;--label-color:#C9C1AE;--cart-empty-color:#8f8574;--disabled:#5c5548;--low-stock-bg:#3B2A22;--badge-ok-bg:#22331F;--ink-text:#8FD9AE;--ink-light-text:#79CE9B;--success:#7FCB88;--danger:#E36464;--rust:#E2703F;--rust-dark:#C25936;--overlay-bg:rgba(0,0,0,0.65);--shadow: 0 2px 10px rgba(0,0,0,0.5);
    --retur-color:#E2925C;--retur-bg:#3A2A1D;--void-bg:#3A1E1B;--void-text:#F2A399;--badge-neutral-bg:#332F27;}
  :root{--ease-out:cubic-bezier(.25,.8,.35,1);--ease-standard:cubic-bezier(.4,0,.2,1);--ease-sheet:cubic-bezier(.32,.72,0,1);}
  *{box-sizing:border-box;}html{overflow-x:hidden;}body{margin:0;max-width:100%;font-family:'Public Sans',sans-serif;background:var(--paper-dark);color:var(--charcoal);transition:background .25s var(--ease-standard),color .25s var(--ease-standard);}
  @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}}
  .num{font-family:'JetBrains Mono',monospace;}h1,h2,h3,.display{font-family:'Fraunces',serif;}
  header{background:var(--ink);color:var(--paper);padding:18px 24px 0;position:sticky;top:0;z-index:33;box-shadow:var(--shadow);}
  .header-top{display:grid;grid-template-rows:1fr;max-width:1200px;margin:0 auto;contain:layout style;}
  .header-top-inner{display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0;}
  .header-row1{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .header-row2{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap;}
  .header-top-inner h1{font-size:28px;font-weight:700;margin:0;letter-spacing:0.5px;}
  .pill-row{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;min-width:0;flex:1 1 auto;overflow:hidden;}
  .status-pill{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:700;letter-spacing:0.3px;border:none;cursor:default;font-family:'Public Sans',sans-serif;white-space:nowrap;flex-shrink:0;}
  .status-pill.online{background:#2f5940;color:#B9E6C9;}
  .status-pill.offline{background:var(--danger);color:#fff;}
  .status-pill.loading{background:var(--mustard);color:#3d2c0a;}
  .status-pill.kasir{background:var(--mustard);color:#3d2c0a;cursor:pointer;min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;display:inline-block;}
  .status-pill.kasir.guest{background:rgba(250,246,237,0.15);color:var(--paper);cursor:pointer;}
  .clock{font-family:'JetBrains Mono',monospace;font-size:13px;opacity:0.85;text-align:right;white-space:nowrap;flex-shrink:0;}
  .theme-toggle{background:rgba(250,246,237,0.12);border:1.5px solid rgba(250,246,237,0.25);color:var(--paper);width:34px;height:34px;border-radius:50%;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s var(--ease-standard),transform .2s var(--ease-out);}
  .theme-toggle:active{background:rgba(250,246,237,0.22);transform:scale(0.92);}
  @media (hover:hover) and (pointer:fine){.theme-toggle:hover{background:rgba(250,246,237,0.22);transform:scale(1.06);}}
  nav{max-width:1200px;margin:14px auto 0;display:flex;gap:4px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;position:relative;}
  nav button{background:none;border:none;color:var(--paper);opacity:0.65;padding:10px 16px;font-size:14.5px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;font-family:'Public Sans',sans-serif;transition:opacity .2s var(--ease-standard),border-color .2s var(--ease-standard);flex-shrink:0;}
  nav button:hover{opacity:0.9;}nav button.active{opacity:1;border-bottom-color:var(--rust);}
  .nav-more{position:relative;flex-shrink:0;padding-bottom:3px;}
  .nav-more>button{background:none;border:none;color:var(--paper);opacity:0.65;padding:10px 16px;font-size:14.5px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;font-family:'Public Sans',sans-serif;transition:opacity .2s var(--ease-standard),border-color .2s var(--ease-standard);}
  .nav-more>button:hover{opacity:0.9;}
  .nav-more.has-active>button{opacity:1;border-bottom-color:var(--rust);}
  .nav-more-menu{position:fixed;top:0;left:0;background:var(--ink);border:1.5px solid rgba(250,246,237,0.18);border-radius:10px;padding:6px;display:none;flex-direction:column;min-width:175px;box-shadow:var(--shadow);z-index:32;}
  .nav-more-menu.open{display:flex;}
  .nav-more-menu button{background:none;border:none;color:var(--paper);opacity:0.75;padding:10px 12px;font-size:14px;font-weight:600;cursor:pointer;text-align:left;border-radius:6px;white-space:nowrap;font-family:'Public Sans',sans-serif;transition:opacity .2s var(--ease-standard),background .2s var(--ease-standard);}
  .nav-more-menu button:hover{opacity:1;background:rgba(250,246,237,0.08);}
  .nav-more-menu button.active{opacity:1;background:rgba(250,246,237,0.14);}
  main{max-width:1200px;margin:0 auto;padding:22px 24px 60px;}
  @media (max-width:480px){
    header{padding-left:14px;padding-right:14px;}
    main{padding-left:14px;padding-right:14px;}
    nav{gap:2px;}
    nav button{padding:8px 7px;font-size:12.5px;}
    .nav-more>button{padding:8px 7px;font-size:12.5px;}
    .header-top-inner h1{font-size:22px;}
    .clock{font-size:12px;}
  }
  .view{display:none;}.view.active{display:block;animation:viewIn .16s linear;}
  @keyframes viewIn{from{opacity:0;}to{opacity:1;}}
  .pos-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start;}
  .pos-grid > div{min-width:0;}
  @media (max-width:860px){.pos-grid{grid-template-columns:1fr;}}
  .toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  input[type=text],input[type=number],input[type=password],select{font-family:'Public Sans',sans-serif;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--card-bg);font-size:14.5px;color:var(--charcoal);}
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--charcoal) !important;
    -webkit-box-shadow:0 0 0 30px var(--card-bg) inset !important;
    box-shadow:0 0 0 30px var(--card-bg) inset !important;
    caret-color:var(--charcoal);
    transition:background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
  }
  .password-field{position:relative;display:flex;}
  .password-field input[type=password],.password-field input[type=text]{width:100%;padding-right:42px;}
  .password-toggle{position:absolute;top:0;right:0;height:100%;width:38px;background:none;border:none;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;padding:0;}
  .password-toggle:hover{color:var(--charcoal);}
  input:focus,select:focus{outline:none;border-color:var(--ink-light);}
  .search-box{flex:1;min-width:180px;}
  .chip-row{display:flex;gap:6px;margin-bottom:16px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip{padding:6px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--card-bg);font-size:13px;cursor:pointer;font-weight:600;color:var(--ink-light-text);flex-shrink:0;white-space:nowrap;}
  .chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .chip-row.sub{margin-bottom:16px;margin-top:-8px;}
  .chip-row.sub .chip{padding:4px 12px;font-size:12px;font-weight:500;background:transparent;border-color:transparent;color:var(--muted);}
  .chip-row.sub .chip.active{background:var(--rust);color:#fff;border-color:var(--rust);}
  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-items:start;}
  .card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;}
  .card .card-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;background:var(--paper-dark);margin-bottom:2px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  .card .cat{font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--rust);font-weight:700;}
  .card .name{font-weight:600;font-size:14.5px;line-height:1.25;min-height:36px;}
  .card .price{font-size:16px;font-weight:700;color:var(--ink-text);}
  .card .stock{font-size:12px;color:var(--muted2);}.card .stock.low{color:var(--rust-dark);font-weight:700;}.card .stock.out{color:var(--danger);font-weight:700;}
  .card button{margin-top:4px;background:var(--rust);color:#fff;border:none;border-radius:7px;padding:8px;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .2s var(--ease-standard),transform .1s var(--ease-out);}
  .card button:hover{background:var(--rust-dark);}.card button:active{transform:scale(0.97);}.card button:disabled{background:var(--disabled);cursor:not-allowed;}
  button.tier-add{margin-top:0;background:var(--card-bg);color:var(--rust);border:1.5px solid var(--rust);font-size:11px;font-weight:700;padding:5px 7px;border-radius:6px;flex:1 1 auto;cursor:pointer;transition:background .2s var(--ease-standard),color .2s var(--ease-standard);}
  button.tier-add:hover{background:var(--rust);color:#fff;}
  button.tier-add:disabled{background:var(--card-bg);color:var(--disabled);border-color:var(--disabled);cursor:not-allowed;}

  #variantPickerBody button.v-add-1{background:var(--rust);color:#fff;border:none;border-radius:7px;padding:8px 14px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease-standard),transform .1s var(--ease-out);}
  #variantPickerBody button.v-add-1:hover{background:var(--rust-dark);}
  #variantPickerBody button.v-add-1:active{transform:scale(0.96);}
  #variantPickerBody button.v-add-1:disabled{background:var(--disabled);cursor:not-allowed;}
  .card .tier-info{font-size:10.5px;color:var(--muted);line-height:1.45;}
  .mobile-cart-bar{display:none;}
  .cart-backdrop{display:none;opacity:0;pointer-events:none;}
  .receipt-sheet-handle{display:none;}
  @media (max-width:860px){
    .mobile-cart-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;background:var(--ink);color:var(--paper);border:none;border-radius:12px;padding:12px 16px;box-shadow:0 4px 18px rgba(31,26,20,0.35);font-family:'Public Sans',sans-serif;cursor:pointer;}
    .mobile-cart-bar .mcb-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;font-size:13px;font-weight:700;text-align:left;}
    .mobile-cart-bar .mcb-info .num{font-size:15px;color:var(--mustard);}
    .mobile-cart-bar .mcb-action{background:var(--rust);padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:700;white-space:nowrap;}
    .cart-backdrop{display:block;position:fixed;inset:0;background:var(--overlay-bg);z-index:39;visibility:hidden;transition:opacity .25s var(--ease-standard),visibility 0s linear .25s;}
    .cart-backdrop.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s var(--ease-standard),visibility 0s linear;}
    .pos-grid .receipt{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:41;max-height:88vh;overflow-y:auto;border-radius:16px 16px 0 0;transform:translateY(105%);visibility:hidden;transition:transform .32s var(--ease-sheet),visibility 0s linear .32s;}
    .pos-grid .receipt.sheet-open{transform:translateY(0);visibility:visible;transition:transform .32s var(--ease-sheet),visibility 0s linear;}
    .pos-grid .receipt .receipt-inner{padding-bottom:90px;}
    .receipt-sheet-handle{display:block;width:100%;position:sticky;top:0;background:var(--surface);border:none;border-bottom:1px solid var(--border);padding:10px;font-weight:700;font-size:12.5px;color:var(--muted);cursor:pointer;border-radius:16px 16px 0 0;}
  }
  .receipt{background:var(--surface);border:1.5px solid var(--border);border-radius:10px 10px 0 0;box-shadow:var(--shadow);position:sticky;top:calc(var(--header-h, 132px) + 10px);}
  .receipt-inner{padding:18px 18px 6px;}
  .receipt h2{text-align:center;font-size:17px;letter-spacing:2px;text-transform:uppercase;margin:0 0 2px;}
  .receipt .sub{text-align:center;font-size:11.5px;color:var(--muted);margin-bottom:12px;}
  .cart-items{max-height:240px;overflow-y:auto;margin-bottom:8px;}
  .cart-items::-webkit-scrollbar{width:6px;}
  .cart-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
  .cart-line{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13.5px;}
  .cart-line .cl-name{flex:1;}.cart-line .cl-name small{display:block;color:var(--muted);font-size:11px;}
  .cart-line .cl-qty{display:flex;align-items:center;gap:4px;}.cart-line .cl-qty button{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--card-bg);color:var(--charcoal);cursor:pointer;font-weight:700;line-height:1;}
  .cart-empty{text-align:center;color:var(--cart-empty-color);padding:30px 0;font-size:13.5px;}
  .receipt-totals{border-top:1.5px dashed var(--charcoal);padding-top:10px;margin-top:4px;}
  .row-between{display:flex;justify-content:space-between;font-size:14px;margin:5px 0;}
  .row-between.total{font-weight:700;font-size:17px;}.row-between.debt{color:var(--rust);font-weight:700;}
  .receipt-inner input,.receipt-inner select{width:100%;margin-top:4px;}.receipt-inner input[type=number]{text-align:right;}
  .pay-btn{width:100%;background:var(--ink);color:var(--paper);border:none;padding:13px;border-radius:8px;font-weight:700;font-size:15px;cursor:pointer;margin-top:12px;}
  .pay-btn:hover{background:var(--ink-light);}.pay-btn:disabled{background:var(--disabled);cursor:not-allowed;}
  .clear-btn{width:100%;background:none;border:none;color:var(--danger);font-size:12.5px;padding:8px;cursor:pointer;font-weight:600;}
  .torn{height:16px;background-image:linear-gradient(-45deg, var(--paper-dark) 8px, transparent 0),linear-gradient(45deg, var(--paper-dark) 8px, transparent 0);background-size:16px 16px;background-position:bottom;background-repeat:repeat-x;background-color:var(--surface);border-radius:0 0 10px 10px;}
  .scan-btn{background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:10px 14px;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;}
  .scan-btn:hover{background:var(--ink-light);}
  .section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
  .btn{background:var(--rust);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;}
  .btn:hover{background:var(--rust-dark);}.btn.secondary{background:var(--ink);}.btn.secondary:hover{background:var(--ink-light);}.btn.ghost{background:none;border:1.5px solid var(--border);color:var(--charcoal);}.btn:disabled{opacity:0.5;cursor:not-allowed;}
  table{width:100%;border-collapse:collapse;background:var(--card-bg);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);}
  th,td{padding:10px 12px;text-align:left;font-size:13.5px;border-bottom:1px solid var(--border);}
  th{background:var(--surface);font-size:11.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted2);}
  tr.low-stock td{background:var(--low-stock-bg);}
  .badge{padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;white-space:nowrap;}.badge.low{background:var(--mustard);color:#1a1a1a;}.badge.ok{background:var(--badge-ok-bg);color:var(--success);}.badge.out{background:var(--danger);color:#fff;}
  .icon-btn{background:none;border:1px solid var(--border);width:26px;height:26px;border-radius:6px;cursor:pointer;font-weight:700;color:var(--charcoal);display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;flex-shrink:0;}.icon-btn:disabled{opacity:0.4;cursor:not-allowed;}
  .manage-table-wrap{overflow-x:auto;}
  table.manage-table td[data-label="Nama"]{min-width:150px;}
  table.manage-table td[data-label="Stok"]{min-width:150px;}
  .manage-total-count{font-size:12.5px;color:var(--muted2);font-weight:600;margin:-6px 0 12px 2px;}
  td.variant-dash{color:var(--muted);}
  td.variant-name{color:var(--label-color);}
  @media (max-width:760px){
    .manage-table-wrap{overflow-x:visible;}
    table.manage-table{background:transparent;box-shadow:none;border-radius:0;}
    table.manage-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
    table.manage-table, table.manage-table tbody{display:block;width:100%;}
    table.manage-table tr{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:dense;column-gap:0;background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;box-shadow:var(--shadow);margin-bottom:10px;padding:12px 14px;content-visibility:auto;contain-intrinsic-size:auto 300px;}
    table.manage-table tr.low-stock{background:var(--low-stock-bg);}
    table.manage-table td{padding:7px 0;}
    table.manage-table td:not(:first-child){border-top:1px solid var(--border);}
    table.manage-table td[data-label="Nama"]{grid-column:1/-1;font-weight:700;font-size:15.5px;padding-bottom:9px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
    table.manage-table td[data-label="Kategori"],table.manage-table td[data-label="Harga Jual"],table.manage-table td[data-label="Modal"],table.manage-table td[data-label="Satuan"]{display:flex;flex-direction:column;gap:2px;text-align:left;padding-right:14px;}
    table.manage-table td[data-label="Kategori"]::before,table.manage-table td[data-label="Harga Jual"]::before,table.manage-table td[data-label="Modal"]::before,table.manage-table td[data-label="Satuan"]::before{content:attr(data-label);font-size:10px;text-transform:uppercase;letter-spacing:0.4px;color:var(--muted2);font-weight:700;}
    table.manage-table td[data-label="Kategori"]{grid-column:1/2;}
    table.manage-table td[data-label="Harga Jual"]{grid-column:2/3;align-items:flex-end;text-align:right;padding-left:14px;padding-right:0;border-left:1px solid var(--border);}
    table.manage-table td[data-label="Modal"]{grid-column:1/2;}
    table.manage-table td[data-label="Satuan"]{grid-column:2/3;align-items:flex-end;text-align:right;padding-left:14px;padding-right:0;border-left:1px solid var(--border);}
    table.manage-table td[data-label="Stok"],table.manage-table td[data-label="Barcode"],table.manage-table td[data-label="Aksi"]{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
    table.manage-table td[data-label="Stok"]::before,table.manage-table td[data-label="Barcode"]::before,table.manage-table td[data-label="Aksi"]::before{content:attr(data-label);font-size:11px;text-transform:uppercase;letter-spacing:0.4px;color:var(--muted2);font-weight:700;flex-shrink:0;}
    table.manage-table tr.variant-row{padding:8px 10px 8px 14px;margin-left:10px;margin-top:-4px;margin-bottom:6px;width:calc(100% - 10px);background:var(--card-bg);box-shadow:none;border-top:none;border-left:3px solid var(--border);contain-intrinsic-size:auto 70px;}
    table.manage-table tr.variant-row.low-stock{background:var(--low-stock-bg);}
    table.manage-table tr.variant-row td[data-label="Nama"]{font-size:14px;}
    table.manage-table tr.variant-parent td[data-label="Barcode"]{display:none;}
    table.manage-table tr.variant-row td[data-label="Kategori"],
    table.manage-table tr.variant-row td[data-label="Modal"],
    table.manage-table tr.variant-row td[data-label="Satuan"]{display:none;}
    table.manage-table tr.variant-row td[data-label="Harga Jual"]{grid-column:1/-1;align-items:flex-start;text-align:left;padding-left:0;padding-right:0;border-left:none;}
  }
  .custom-select{position:relative;min-width:0;}
  .custom-select-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--card-bg);border:1.5px solid var(--border);border-radius:8px;padding:10px 12px;font-size:14.5px;font-weight:600;color:var(--charcoal);cursor:pointer;font-family:'Public Sans',sans-serif;box-sizing:border-box;min-width:0;overflow:hidden;}
  .custom-select-btn-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .custom-select-btn:hover{border-color:var(--ink-light);}
  .custom-select.open .custom-select-btn{border-color:var(--ink-light);}
  .custom-select-caret{color:var(--muted);transition:transform .2s var(--ease-standard);font-size:12px;flex-shrink:0;}
  .custom-select.open .custom-select-caret{transform:rotate(180deg);}
  .custom-select-list{display:block;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card-bg);border:1.5px solid var(--border);border-radius:8px;box-shadow:var(--shadow);z-index:30;overflow:hidden;overflow-y:auto;max-height:280px;opacity:0;transform:translateY(-4px) scaleY(.96);transform-origin:top;visibility:hidden;pointer-events:none;transition:opacity .16s var(--ease-standard),transform .16s var(--ease-out),visibility 0s linear .16s;}
  .custom-select.open .custom-select-list{opacity:1;transform:translateY(0) scaleY(1);visibility:visible;pointer-events:auto;transition:opacity .16s var(--ease-standard),transform .16s var(--ease-out),visibility 0s linear;}
  .custom-select-opt{padding:10px 12px;font-size:14.5px;font-weight:600;color:var(--charcoal);cursor:pointer;}
  .custom-select-opt:hover{background:var(--paper-dark);}
  .custom-select-opt.selected{background:var(--ink);color:var(--paper);}
  .custom-select-opt + .custom-select-opt{border-top:1px solid var(--border);}
  .native-select-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .custom-select.disabled .custom-select-btn{opacity:0.5;cursor:not-allowed;}
  .actions-cell{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
  .icon-btn.edit{color:var(--ink-light-text);}.icon-btn.del{color:var(--danger);}
  .hist-card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;cursor:pointer;}
  .hist-card:hover{border-color:var(--ink-light);}.hist-card .h-date{font-size:12.5px;color:var(--muted);}.hist-card .h-total{font-weight:700;font-size:15px;color:var(--ink-text);}
  .overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease-standard),visibility 0s linear .2s;}
  .overlay.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s var(--ease-standard),visibility 0s linear;}
  .modal{background:var(--card-bg);border-radius:12px;max-width:420px;width:100%;max-height:calc(var(--app-vh, 1vh) * 85);display:flex;flex-direction:column;overflow:hidden;transform:scale(.95) translateY(10px);transition:transform .22s var(--ease-out);}
  .overlay.active .modal{transform:none;}
  .modal-scroll{overflow-y:auto;overscroll-behavior:contain;padding:24px;flex:1;min-height:0;}
  .modal h3{margin-top:0;}.field{margin-bottom:12px;display:flex;flex-direction:column;gap:5px;}.field label{font-size:12.5px;font-weight:700;color:var(--label-color);}.field input,.field select{width:100%;}
  .modal-actions{display:flex;gap:8px;margin-top:18px;}.modal-actions button{flex:1;padding:11px;border-radius:8px;border:none;font-weight:700;cursor:pointer;}
  .modal-actions .save{background:var(--rust);color:#fff;}.modal-actions .save:disabled{background:var(--disabled);cursor:not-allowed;}.modal-actions .cancel{background:var(--paper-dark);color:var(--charcoal);}
  .form-error{color:var(--danger);font-size:13px;margin-top:6px;min-height:16px;}
  .empty-state{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);}
  .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,0.2);z-index:100;opacity:0;pointer-events:none;transition:opacity .28s var(--ease-out), transform .28s var(--ease-out);max-width:90vw;text-align:center;}
  .toast.error{background:var(--danger);}.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
  .setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start;}
  .setup-box{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:22px;box-shadow:var(--shadow);margin-bottom:0;}
  .setup-box p{font-size:14px;line-height:1.6;color:var(--text-secondary);}.setup-box code{background:var(--paper-dark);padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12.5px;}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
  .stat-card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:16px;box-shadow:var(--shadow);}
  .stat-card .stat-label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);font-weight:700;}
  .stat-card .stat-value{font-size:22px;font-weight:700;color:var(--ink-text);margin-top:4px;}
  .bar-row{margin-bottom:10px;}.bar-row .bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}.bar-track{background:var(--paper-dark);border-radius:6px;height:10px;overflow:hidden;}.bar-fill{background:var(--rust);height:100%;border-radius:6px;}
  .range-tabs{display:flex;gap:6px;margin-bottom:16px;}.range-tabs button{padding:7px 16px;border-radius:8px;border:1.5px solid var(--border);background:var(--card-bg);color:var(--ink-light-text);font-weight:700;font-size:13px;cursor:pointer;}.range-tabs button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .report-panel{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px;}.report-panel h3{margin-top:0;font-size:15px;}
  .customer-card{background:var(--card-bg);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;}
  .customer-card:hover{border-color:var(--ink-light);}.customer-card .c-name{font-weight:600;}.customer-card .c-phone{font-size:12px;color:var(--muted);}.customer-card .c-balance{font-weight:700;font-family:'JetBrains Mono',monospace;}
  .customer-card .c-balance.zero{color:var(--success);}.customer-card .c-balance.debt{color:var(--danger);}
  .history-entry{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--border);}.history-entry.utang{color:var(--danger);}.history-entry.bayar{color:var(--success);}
    .quick-cash{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
    .quick-cash button{flex:1 1 calc(25% - 6px);min-width:60px;padding:8px 4px;font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace;background:var(--paper-dark);border:1.5px solid var(--border);border-radius:6px;cursor:pointer;color:var(--charcoal);transition:background .2s var(--ease-standard),border-color .2s var(--ease-standard),color .2s var(--ease-standard);}
    .quick-cash button:hover{border-color:var(--rust);color:var(--rust);}
    .quick-cash button[data-cash="pas"]{background:var(--rust);color:#fff;border-color:var(--rust);}
    .quick-cash button[data-cash="clear"]{color:var(--danger);}
    .omzet-chart{display:flex;align-items:flex-end;gap:6px;height:160px;padding:8px 0 0;overflow-x:auto;}
    .omzet-chart .chart-col{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:34px;height:100%;justify-content:flex-end;}
    .omzet-chart .chart-bar{width:100%;background:var(--rust);border-radius:4px 4px 0 0;min-height:3px;transition:height .4s var(--ease-out);}
    .omzet-chart .chart-val{font-size:9px;color:var(--muted);white-space:nowrap;}
    .omzet-chart .chart-label{font-size:10px;color:var(--muted);white-space:nowrap;}
    #scannerViewport{width:100%;height:300px;background:#000;border-radius:10px;overflow:hidden;position:relative;}#scannerViewport video,#scannerViewport canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
  .scan-hint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:10px;}

  .payment-methods-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

  .calc-modal{max-width:320px;}
  .calc-display{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px;text-align:right;overflow:hidden;}
  .calc-expr{font-size:13px;color:var(--muted);min-height:18px;word-break:break-all;}
  .calc-result{font-size:28px;font-weight:700;color:var(--ink-text);word-break:break-all;line-height:1.2;}
  .calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .calc-grid button{padding:14px 0;border:1.5px solid var(--border);border-radius:8px;background:var(--card-bg);font-size:17px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--charcoal);cursor:pointer;transition:background .15s var(--ease-standard),border-color .15s var(--ease-standard),transform .1s var(--ease-out);}
  .calc-grid button:hover{border-color:var(--ink-light);}
  .calc-grid button:active{background:var(--paper-dark);transform:scale(0.95);}
  .calc-grid .calc-op{background:var(--paper-dark);color:var(--ink-text);}
  .calc-grid .calc-fn{background:var(--paper-dark);color:var(--rust);}
  .calc-grid .calc-eq{background:var(--rust);color:#fff;border-color:var(--rust);}
  .calc-grid .calc-eq:hover{background:var(--rust-dark);border-color:var(--rust-dark);}

  #labelModal .modal{background:#FAF6ED;color:#1F1A14;}
  #labelModal .modal h3, #labelModal .modal label{color:#1F1A14;}
  #labelModal #labelCopies{background:#fff;color:#1F1A14;border-color:#DED2B0;}