:root{
    --bg: #EFF1EB;
    --paper: #FFFFFF;
    --ink: #1B2620;
    --ink-soft: #5B665F;
    --ink-faint: #8B958E;
    --primary: #1F4B3F;
    --primary-light: #2F6B57;
    --primary-dark: #123128;
    --accent: #C98A2C;
    --accent-soft: #F1DDB0;
    --accent-deep: #9C6A1C;
    --danger: #B23A2E;
    --danger-soft: #F5DAD5;
    --success: #2F8F5B;
    --success-soft: #DCEFE2;
    --line: #DCDFD5;
    --sticky-bg: #16332A;
    --font-display: Georgia, 'Segoe UI', sans-serif;
    --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Courier New', Consolas, monospace;
    --radius: 10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  #root{min-height:100vh;}
  h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.01em;}
  .mono{font-family:var(--font-mono);}
  button{font-family:var(--font-body);cursor:pointer;}
  input,select{font-family:var(--font-body);}
  ::selection{background:var(--accent-soft);}

  .shell{display:flex;min-height:100vh;}
  .sidebar{
    width:230px;flex-shrink:0;background:var(--primary-dark);color:#EAF1EC;
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
    box-shadow:2px 0 10px rgba(18,30,25,0.08);z-index:30;
  }
  .brand{padding:22px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.1);}
  .brand-mark{display:flex;align-items:center;gap:9px;}
  .brand-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  .brand h1{font-size:16px;color:#fff;line-height:1.25;}
  .brand span{display:block;font-size:11px;color:#9FB3A8;font-family:var(--font-mono);margin-top:3px;letter-spacing:0.03em;}
  .nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
  .nav-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
    color:#C7D6CC;background:transparent;border:none;text-align:left;font-size:13.5px;font-weight:500;
    transition:background .12s;width:100%;
  }
  .nav-item svg{width:17px;height:17px;flex-shrink:0;}
  .nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
  .nav-item.active{background:var(--accent);color:#25190A;font-weight:600;}
  .nav-group-label{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
    color:#6E8478;padding:14px 12px 6px;
  }
  .nav-group-label:first-child{padding-top:6px;}
  .sidebar-foot{padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,0.1);font-size:11px;color:#7F9389;font-family:var(--font-mono);}

  .main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:14px 26px;background:var(--paper);border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:20;box-shadow:0 2px 6px rgba(18,30,25,0.03);
  }
  .topbar-title h2{font-size:19px;}
  .topbar-title p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}
  .role-picker{display:flex;align-items:center;gap:10px;}
  .role-picker label{font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);}
  .role-picker select{
    padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);
    font-size:13px;font-weight:600;color:var(--primary-dark);
  }
  .content{padding:24px 26px 60px;flex:1;max-width:1320px;margin:0 auto;width:100%;}
  .app-footer{
    position:fixed;left:230px;right:0;bottom:0;z-index:45;
    background:var(--primary-dark);color:#9FB3A8;font-family:var(--font-mono);
    font-size:10.5px;text-align:center;padding:6px 10px;letter-spacing:0.02em;
  }

  .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(18,30,25,0.04), 0 1px 0 rgba(18,30,25,0.02);}
  .grid{display:grid;gap:16px;}
  .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;font-family:var(--font-mono);letter-spacing:0.02em;}
  .badge.ok{background:var(--success-soft);color:var(--success);}
  .badge.warn{background:var(--accent-soft);color:var(--accent-deep);}
  .badge.danger{background:var(--danger-soft);color:var(--danger);}
  .badge.muted{background:#ECEDE7;color:var(--ink-soft);}
  .btn{
    border:none;border-radius:8px;padding:10px 16px;font-size:13.5px;font-weight:600;
    display:inline-flex;align-items:center;gap:7px;transition:filter .12s, transform .05s;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--primary);color:#fff;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-accent{background:var(--accent);color:#25190A;}
  .btn-accent:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--line);}
  .btn-ghost:hover{background:#F3F5F0;}
  .btn-danger{background:var(--danger-soft);color:var(--danger);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn-sm{padding:6px 11px;font-size:12px;border-radius:7px;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;color:var(--ink-faint);font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);}
  td{padding:10px 12px;border-bottom:1px solid #EEF0EA;vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
  .section-head h3{font-size:16px;}
  .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;}
  .empty-state{padding:34px 20px;text-align:center;color:var(--ink-faint);font-size:13px;}

  .scallop-top{position:relative;}
  .scallop-top::before{
    content:"";position:absolute;top:-9px;left:0;right:0;height:10px;
    background-image:radial-gradient(circle at 10px 10px, var(--bg) 8px, transparent 8.5px);
    background-size:20px 20px;background-repeat:repeat-x;background-position:top left;
  }

  .stat-grid{grid-template-columns:repeat(4,1fr);}
  .stat-card{padding:18px 18px 16px;position:relative;overflow:hidden;}
  .stat-card .eyebrow{margin-bottom:8px;}
  .stat-card .value{font-family:var(--font-display);font-size:26px;font-weight:600;}
  .stat-card .delta{font-size:11.5px;color:var(--ink-faint);margin-top:6px;}
  .dash-grid{grid-template-columns:1.4fr 1fr;margin-top:18px;align-items:start;}
  .two-col-grid{grid-template-columns:1fr 1fr;}
  .feed-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #EEF0EA;}
  .feed-item:last-child{border-bottom:none;}
  .feed-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:6px;flex-shrink:0;}
  .feed-item .t{font-size:12.5px;color:var(--ink-soft);font-family:var(--font-mono);}

  /* ---- POS layout ---- */
  .pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:22px;align-items:start;}
  .pos-search{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:stretch;}
  .pos-search input{flex:1;min-width:200px;padding:11px 14px;border-radius:9px;border:1px solid var(--line);font-size:14px;background:var(--paper);}
  .chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
  .pos-cat-select{
    padding:10px 14px;border-radius:9px;border:1px solid var(--line);background:var(--paper);
    font-size:13px;font-weight:600;color:var(--primary-dark);min-width:190px;flex-shrink:0;
  }
  .mb-filter-bar{
    position:sticky;top:78px;z-index:15;background:var(--paper);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;margin-bottom:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
    box-shadow:0 4px 10px rgba(18,30,25,0.05);
  }
  .mb-search-input{flex:1;min-width:200px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);font-size:13.5px;}
  .mb-filter-select{padding:9px 12px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--primary-dark);background:var(--paper);}
  .mb-filter-count{font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);white-space:nowrap;margin-left:auto;}
  .mb-table-wrap{overflow:auto;max-height:calc(100vh - 320px);min-height:240px;}
  .mb-table-wrap table thead th{position:sticky;top:0;background:var(--paper);z-index:2;box-shadow:0 1px 0 var(--line);}
  .total-badge{
    background:#DCEEFA;border:2px solid #8FC7EA;border-radius:16px;padding:20px 20px 18px;text-align:center;
  }
  .total-badge .tb-amount{font-size:28px;font-weight:700;color:var(--ink);font-family:var(--font-display);letter-spacing:-0.01em;}
  .total-badge .tb-caption{font-size:12.5px;font-weight:700;color:var(--primary-dark);margin-top:4px;}
  .chip{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--paper);font-size:12px;color:var(--ink-soft);font-weight:500;}
  .chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:12px;}
  .product-card{
    background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:13px 14px;text-align:left;
    display:flex;flex-direction:column;gap:6px;transition:border-color .12s, transform .1s, box-shadow .1s;width:100%;
    box-shadow:0 1px 2px rgba(18,30,25,0.03);
  }
  .product-card:hover{border-color:var(--primary-light);transform:translateY(-2px);box-shadow:0 6px 14px rgba(18,30,25,0.09);}
  .product-card:active{transform:translateY(0) scale(.98);}
  .product-card .pname{font-size:13px;font-weight:600;line-height:1.3;min-height:34px;}
  .product-card .ploc{font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono);}
  .product-card .pprice{font-family:var(--font-mono);font-size:13.5px;color:var(--primary);font-weight:600;margin-top:2px;}
  .product-card .pstock{font-size:10.5px;color:var(--ink-faint);}
  .product-card .pstock.low{color:var(--danger);font-weight:600;}

  /* Cart table — box "2": fixed-height scroll, lives under the product grid */
  .product-scroll-card{padding:14px 14px 10px;margin-bottom:18px;}
  .product-scroll{max-height:284px;overflow-y:auto;padding-right:6px;}
  .cart-table-card{margin-top:0;overflow:hidden;}
  .cth{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;}
  .cart-table-card .cth h4{font-size:14px;}
  .cart-table-card .cth .cnt{font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);}
  .cart-table-wrap{max-height:296px;overflow-y:auto;}
  .cart-table-wrap table thead th{position:sticky;top:0;background:var(--paper);z-index:2;}
  .cart-table-wrap .qty-ctrl{justify-content:center;}
  .cart-table-wrap tbody tr:nth-child(even) td{background:#FAFBF8;}

  .qty-ctrl{display:flex;align-items:center;gap:6px;}
  .qty-ctrl button{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--bg);font-size:13px;line-height:1;}
  .qty-ctrl span{width:20px;text-align:center;font-family:var(--font-mono);font-size:12.5px;}

  /* Right column — box "4" (member info) stacked above box "3" (sticky payment panel) */
  .cart-panel{position:sticky;top:86px;display:flex;flex-direction:column;gap:14px;}
  .member-info-card{padding:16px 18px;max-height:280px;overflow-y:auto;}
  .member-info-card .mi-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed #EEF0EA;}
  .member-info-card .mi-row:last-child{border-bottom:none;}
  .member-info-card .mi-row .k{color:var(--ink-faint);}
  .member-info-card .mi-row .v{font-weight:600;text-align:right;}
  .member-info-card .mi-balance{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
  .member-info-card .mi-balance .val{font-family:var(--font-mono);font-size:19px;font-weight:700;margin-top:4px;}

  .sticky-panel{
    background:var(--sticky-bg);color:#fff;border-radius:10px;padding:16px 16px 18px;
    border:1px solid var(--primary-dark);box-shadow:0 10px 24px rgba(18,30,25,0.16);
  }
  .cart-panel-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;padding-left:2px;}
  .sticky-panel .row{display:flex;justify-content:space-between;font-size:12.5px;color:#B9CAC0;padding:3px 0;}
  .sticky-panel .row.total{font-size:16px;font-weight:700;color:#fff;font-family:var(--font-display);border-top:1px dashed rgba(255,255,255,0.2);margin-top:8px;padding-top:10px;}
  .member-pick{margin:12px 0 10px;}
  .member-pick select{width:100%;padding:9px 10px;border-radius:7px;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff;font-size:12.5px;}
  .member-pick select option{color:var(--ink);background:#fff;}
  .paymethods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:6px;}
  .pm-btn{
    padding:10px 6px;border-radius:8px;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.05);
    color:#DCE7E0;font-size:11px;font-weight:600;text-align:center;line-height:1.3;
  }
  .pm-btn.active{background:var(--accent);color:#25190A;border-color:var(--accent);}
  .pay-btn{width:100%;margin-top:12px;padding:13px;border-radius:9px;background:var(--accent);color:#25190A;font-family:var(--font-display);font-size:14.5px;font-weight:700;border:none;}
  .pay-btn:disabled{background:#3B463F;color:#7C887F;}

  .session-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .session-card{padding:16px;cursor:pointer;transition:border-color .12s;width:100%;text-align:left;background:var(--paper);}
  .session-card:hover{border-color:var(--primary-light);}
  .session-card h4{font-size:14.5px;margin-bottom:5px;}
  .session-card .loc{font-size:11.5px;color:var(--ink-faint);font-family:var(--font-mono);margin-bottom:10px;}
  .progress-bar{height:5px;border-radius:99px;background:#EAECE4;overflow:hidden;margin:8px 0 10px;}
  .progress-bar > div{height:100%;background:var(--accent);}
  .count-input{width:64px;padding:6px 8px;border-radius:6px;border:1px solid var(--line);font-family:var(--font-mono);text-align:right;font-size:13px;}
  .line-price-input{width:84px;padding:6px 8px;border-radius:6px;border:1px solid var(--accent-deep);background:var(--accent-soft);font-family:var(--font-mono);text-align:right;font-size:12.5px;font-weight:600;color:var(--accent-deep);}
  .variance-pos{color:var(--success);font-weight:600;}
  .variance-neg{color:var(--danger);font-weight:600;}
  .variance-zero{color:var(--ink-faint);}
  .timeline{border-left:2px solid var(--line);margin-left:6px;padding-left:16px;}
  .timeline-item{padding-bottom:14px;position:relative;}
  .timeline-item::before{content:"";position:absolute;left:-20.5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--accent);}
  .timeline-item .tt{font-size:12.5px;font-weight:600;}
  .timeline-item .ts{font-size:11px;color:var(--ink-faint);font-family:var(--font-mono);}

  .modal-backdrop{position:fixed;inset:0;background:rgba(18,30,25,0.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
  .modal{background:var(--paper);border-radius:12px;width:100%;max-width:460px;padding:22px;max-height:88vh;overflow-y:auto;}
  .modal h3{margin-bottom:16px;}
  .field{margin-bottom:13px;}
  .field label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:5px;font-weight:600;}
  .field input, .field select{width:100%;padding:9px 11px;border-radius:7px;border:1px solid var(--line);font-size:13.5px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}

  .settings-form{padding:20px 22px;max-width:520px;}

  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
    background:var(--primary-dark);color:#fff;padding:13px 20px;border-radius:9px;font-size:13px;
    display:flex;align-items:center;gap:10px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,0.2);
    max-width:90vw;
  }
  .toast .wa-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0;}

  .receipt-paper{background:#FCFCF9;border:1px dashed var(--line);border-radius:8px;padding:16px 18px;font-family:var(--font-mono);font-size:12px;color:var(--ink);}
  .receipt-paper .rc-center{text-align:center;}
  .receipt-paper .rc-bold{font-weight:700;}
  .receipt-paper .rc-row{display:flex;justify-content:space-between;gap:10px;padding:2px 0;}
  .receipt-paper .rc-item{padding:2px 0;}
  .receipt-paper .rc-item .rc-row{padding:0;}
  .receipt-paper .rc-sub{font-size:10.5px;color:var(--ink-faint);}
  .receipt-paper .rc-dash{border-top:1px dashed var(--line);margin:8px 0;}
  .wa-bubble-wrap{background:#E9EDE7;border-radius:10px;padding:12px;}
  .wa-bubble{
    background:#DCF8C6;border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.5;
    font-family:var(--font-mono);white-space:pre-line;max-width:100%;box-shadow:0 1px 1px rgba(0,0,0,0.08);
  }

  .label-preview-wrap{padding:14px;display:flex;flex-wrap:wrap;gap:8px;max-height:560px;overflow-y:auto;background:#EDEFE9;}
  .price-label{
    background:#fff;border:1px solid var(--ink);border-radius:3px;padding:6px 8px;
    display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;box-sizing:border-box;
  }
  .price-label .pl-sku{font-size:9px;color:var(--ink-faint);line-height:1.2;}
  .price-label .pl-name{font-size:11.5px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .price-label .pl-price{font-size:15px;font-weight:700;color:var(--primary);margin-top:2px;}
  .price-label .pl-exp{font-size:9px;color:var(--danger);margin-top:1px;}
  .price-label .pl-barcode{margin-top:auto;padding-top:3px;}

  .member-card{
    width:85.6mm;height:53.98mm;border-radius:8px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
    color:#fff;padding:10px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
  }
  .member-card .mc-head{font-size:9px;letter-spacing:0.04em;text-transform:uppercase;color:#BFD3C7;}
  .member-card .mc-title{font-size:10px;font-weight:700;color:var(--accent-soft);margin-top:1px;}
  .member-card .mc-name{font-size:15px;font-weight:700;margin-top:8px;}
  .member-card .mc-code{font-size:11px;color:#DCE7E0;margin-top:2px;}
  .member-card .mc-join{font-size:9.5px;color:#BFD3C7;margin-top:3px;}
  .member-card .mc-barcode{background:#fff;border-radius:4px;padding:5px 6px 3px;margin-top:6px;}
  .member-card .mc-barcode-text{font-size:8px;color:#333;text-align:center;margin-top:2px;letter-spacing:0.05em;}

  #print-receipt-area, #print-label-area, #print-card-area{display:none;}
  @media print{
    body *{visibility:hidden;}
    #print-receipt-area, #print-receipt-area *,
    #print-label-area, #print-label-area *,
    #print-card-area, #print-card-area *{visibility:visible;}
    #print-receipt-area{display:block !important;position:absolute;left:0;top:0;width:300px;padding:12px;}
    #print-label-area{display:block !important;position:absolute;left:0;top:0;width:100%;padding:6mm;}
    #print-card-area{display:block !important;position:absolute;left:0;top:0;width:100%;padding:6mm;}
    .label-sheet{display:flex;flex-wrap:wrap;gap:3mm;}
  }

  @media (max-width: 980px){
    .pos-wrap{grid-template-columns:1fr;}
    .cart-panel{position:static;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .dash-grid{grid-template-columns:1fr;}
    .two-col-grid{grid-template-columns:1fr;}
  }
  @media (max-width: 760px){
    .sidebar{position:fixed;left:0;bottom:0;top:auto;width:100%;height:auto;flex-direction:row;z-index:50;}
    .brand,.sidebar-foot,.nav-group-label{display:none;}
    .nav{flex-direction:row;overflow-x:auto;padding:8px;}
    .nav-item{flex-direction:column;font-size:10px;gap:3px;padding:7px 10px;white-space:nowrap;}
    .main{padding-bottom:88px;}
    .content{padding:16px;}
    .topbar{padding:12px 16px;flex-wrap:wrap;}
    .app-footer{left:0;bottom:56px;font-size:9.5px;padding:4px 8px;z-index:44;}
    .stat-grid{grid-template-columns:1fr 1fr;}
    .pos-cat-select{min-width:100%;}
    .mb-filter-bar{position:static;flex-direction:column;align-items:stretch;}
    .mb-filter-count{margin-left:0;text-align:right;}
    .mb-table-wrap{max-height:60vh;}
  }

/* ================= LOGIN PAGE ================= */
.shell-login{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg,#f3f4f6); }
.login-screen{ width:100%; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ width:100%; max-width:380px; background:#fff; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,0.08); padding:32px 28px; }
.login-sub{ text-align:center; color:#6b7280; font-size:13px; margin:0 0 20px; }
.login-label{ display:block; font-size:12px; font-weight:600; color:#374151; margin:12px 0 4px; }
.login-input{ width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; box-sizing:border-box; }
.login-input:focus{ outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.15); }
.login-btn{ width:100%; margin-top:18px; padding:11px; border:none; border-radius:8px; background:#4f46e5; color:#fff; font-weight:600; font-size:14px; cursor:pointer; }
.login-btn:hover{ background:#4338ca; }
.login-btn:disabled{ opacity:0.6; cursor:not-allowed; }
.login-error{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:8px 12px; border-radius:8px; font-size:12.5px; margin-bottom:12px; text-align:center; }
.login-demo{ margin-top:22px; padding-top:16px; border-top:1px dashed #e5e7eb; font-size:11.5px; color:#6b7280; }
.login-demo p{ margin:0 0 6px; font-weight:600; color:#4b5563; }
.login-demo ul{ margin:0; padding-left:16px; }
.login-demo li{ margin-bottom:2px; }
.user-badge{ display:flex; align-items:center; gap:10px; }
.user-badge-info{ display:flex; flex-direction:column; text-align:right; line-height:1.25; }
.user-badge-info strong{ font-size:13px; color:#111827; }
.user-badge-info span{ font-size:11px; color:#6b7280; }

.login-password-wrap{ position:relative; }
.login-password-wrap .login-input{ padding-right:40px; }
.login-password-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; cursor:pointer; color:#6b7280; border-radius:6px; padding:0;
}
.login-password-toggle:hover{ background:#f3f4f6; color:#374151; }
.login-password-toggle svg{ width:18px; height:18px; }

  /* ===== Jendela pembayaran (uang diterima, kembalian, voucher) ===== */
  .pay-backdrop{align-items:flex-start;padding-top:4vh;}
  .pay-modal{max-width:560px;padding:0;overflow:hidden;border-radius:14px;display:flex;flex-direction:column;max-height:92vh;}
  .pay-head{background:var(--sticky-bg);color:#fff;padding:18px 24px 16px;text-align:center;}
  .pay-head-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);font-family:var(--font-mono);}
  .pay-head-sub{font-size:12px;color:#B9C8C0;margin-top:10px;}
  .pay-head-amount{font-size:40px;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
  .pay-head-words{font-size:12px;color:#B9C8C0;margin-top:2px;font-style:italic;}
  .pay-body{padding:16px 24px 4px;overflow-y:auto;}
  .pay-sum{border:1px solid var(--line);border-radius:10px;padding:4px 14px;margin-bottom:14px;background:#FAFBF8;}
  .pay-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px;border-bottom:1px dashed var(--line);}
  .pay-row:last-child{border-bottom:0;}
  .pay-row span{color:var(--ink-soft);}
  .pay-row-hl{background:var(--accent-soft);margin:4px -14px -4px;padding:9px 14px;border-radius:0 0 10px 10px;font-size:15px;}
  .pay-row-hl span{color:var(--ink);font-weight:600;}
  .pay-block{margin-bottom:14px;}
  .pay-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  .pay-input-wrap{display:flex;align-items:center;border:2px solid var(--primary-light);border-radius:12px;background:#fff;padding:0 14px;}
  .pay-input-wrap:focus-within{box-shadow:0 0 0 4px rgba(47,107,87,.18);}
  .pay-rp{font-size:20px;font-weight:700;color:var(--ink-soft);margin-right:8px;}
  .pay-input{flex:1;border:0;outline:0;background:transparent;font-size:34px;font-weight:700;padding:8px 0;text-align:right;min-width:0;color:var(--ink);}
  .pay-words{font-size:12.5px;color:var(--ink-soft);text-align:right;margin-top:5px;font-style:italic;}
  .pay-quick-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
  .pay-quick{flex:1 1 90px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:inherit;}
  .pay-quick small{font-size:10.5px;color:var(--ink-faint);min-height:13px;}
  .pay-quick b{font-size:15px;}
  .pay-quick:hover{border-color:var(--primary-light);background:#F3F8F5;}
  .pay-result{border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;}
  .pay-result span{font-weight:700;letter-spacing:.1em;font-size:12px;}
  .pay-result b{font-size:28px;}
  .pay-result.ok{background:var(--success-soft);color:#1B5E3A;border:2px solid var(--success);}
  .pay-result.bad{background:var(--danger-soft);color:var(--danger);border:2px solid var(--danger);}
  .pay-result.exact{background:#E8F0EC;color:var(--primary);border:2px solid var(--primary-light);}
  .pay-result.exact b{font-size:18px;}
  .pay-result.idle{background:#F2F3EE;color:var(--ink-faint);justify-content:center;font-size:13px;}
  .pay-warn{background:#FFF4D6;border:1px solid var(--accent);color:#6B4A0F;border-radius:9px;padding:8px 12px;font-size:12.5px;margin-bottom:10px;}
  .pay-info,.pay-voucher-end{border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center;background:#F8FAF7;}
  .pay-voucher-end{background:#FFF7E8;border-color:var(--accent);text-align:left;}
  .pay-info-title{font-weight:700;font-size:14px;margin-bottom:4px;}
  .pay-info-amount{font-size:30px;font-weight:700;margin:2px 0 6px;}
  .pay-info-text{font-size:13px;color:var(--ink-soft);line-height:1.55;}
  .pay-choice{display:flex;gap:10px;}
  .pay-choice-btn{flex:1;padding:12px 8px;border:2px solid var(--line);background:#fff;border-radius:11px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);}
  .pay-choice-btn.active{background:var(--accent);border-color:var(--accent);color:#25190A;}
  .pay-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 24px 18px;border-top:1px solid var(--line);background:#fff;}
  .pay-foot .btn{padding:12px 22px;font-size:15px;}
  .pay-confirm{min-width:220px;}
  .pay-confirm:disabled{opacity:.45;cursor:not-allowed;}