:root {
    --amber:       #F97316;
    --amber-dark:  #EA580C;
    --amber-pale:  rgba(249,115,22,.10);
    --amber-ring:  rgba(249,115,22,.25);
    --black:       #0A0A0A;
    --charcoal:    #1A1A1A;
    --graphite:    #2D2D2D;
    --graph2:      #383838;
    --border:      rgba(255,255,255,.08);
    --border2:     rgba(255,255,255,.12);
    --subtle:      rgba(255,255,255,.06);
    --muted:       rgba(255,255,255,.4);
    --dim:         rgba(255,255,255,.22);
    --white:       #FFFFFF;
    --green:       #4ade80;
    --green-pale:  rgba(74,222,128,.10);
    --red:         #f87171;
    --red-pale:    rgba(248,113,113,.10);
    --yellow:      #facc15;
    --sidebar:     220px;
  }

  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%;  }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--black);
    color: var(--white);
    display: flex;
    height: 100vh;
  }

  
  /* ══════════════════════════════════════════════════════════════════
     POS SHELL
  ══════════════════════════════════════════════════════════════════ */
  .pos-shell {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; min-width: 0;
  }

  body.pos-page .app-body {
    flex: 1; min-height: 0;
  }
  body.pos-page main.container {
    display: flex; flex-direction: column;
    min-height: 0;
  }
  body.pos-page .site-footer {
    display: none !important;
  }

  /* TOPBAR */
  .topbar {
    background: var(--charcoal); border-bottom: 1px solid var(--subtle);
    padding: 13px 28px; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0;
  }
  .topbar h1 {
    font-family: 'Syne', sans-serif;
    font-weight: 700; font-size: 17px; letter-spacing: -.4px;
  }
  .topbar-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .topbar-right { display: flex; align-items: center; gap: 10px; }
  .tb-pill {
    font-size: 12px; font-weight: 700;
    background: var(--amber); color: var(--black);
    border-radius: 100px; padding: 5px 14px; letter-spacing: -.3px;
  }

  /* POS BODY */
  .pos-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

  /* ══════════════════════════════════════════════════════════════════
     LEFT PANEL — Add-item form (pos-v2 exact) + Quick Products below
  ══════════════════════════════════════════════════════════════════ */
  .entry-panel {
    flex: 1; display: flex; flex-direction: column;
    border-right: 1px solid var(--border); overflow: hidden; min-width: 0;
  }

  /* ── Add-item form  (pos-v2 exact styles) ──────────────────────── */
  .add-form {
    background: var(--charcoal);
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .add-form-title {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 2px;
  }
  .add-row-1 {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 10px;
  }
  .add-row-2 {
    display: grid;
    grid-template-columns: 1fr 70px 100px 100px auto;
    gap: 8px;
    align-items: end;
  }
  .field-label {
    display: block; font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 5px;
  }
  .f-select,
  .f-input {
    width: 100%;
    background: var(--graphite);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 7px 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; color: var(--white); outline: none;
    transition: border-color .18s, box-shadow .18s;
    -moz-appearance: textfield;
  }
  .f-select { cursor: pointer; }
  .f-input::-webkit-inner-spin-button { -webkit-appearance: none; }
  .f-input::placeholder { color: var(--dim); }
  .f-select:focus,
  .f-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-ring); }
  .f-input.readonly {
    color: var(--muted); border-color: rgba(255,255,255,.05);
    background: rgba(255,255,255,.03); cursor: default;
  }
  .f-input.readonly:focus { border-color: rgba(255,255,255,.05); box-shadow: none; }
  .price-preview {
    font-size: 11px; color: var(--dim); min-height: 14px; line-height: 1.4;
  }
  .price-preview .net  { color: var(--amber); font-weight: 700; }
  .price-preview .disc { color: var(--red); margin-left: 4px; }
  .add-btn {
    background: var(--amber); color: var(--black); border: none;
    border-radius: 8px; padding: 7px 16px;
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, transform .1s; align-self: end; height: 34px;
  }
  .add-btn:hover  { background: var(--amber-dark); color: var(--white); }
  .add-btn:active { transform: scale(.97); }
  .add-btn:disabled { opacity: .4; pointer-events: none; }

  /* ── Quick Products panel ──────────────────────────────────────── */
  .quick-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .qp-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.06) transparent;
  }

  .qp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-bottom: 1px solid var(--subtle);
    flex-shrink: 0;
  }
  .qp-toolbar-left {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--dim);
  }
  .qp-tabs {
    display: flex; gap: 2px;
    background: var(--graphite);
    border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden;
  }
  .qp-tab {
    padding: 5px 12px; font-size: 12px; font-weight: 600;
    color: var(--muted); cursor: pointer; border: none;
    background: transparent; font-family: 'DM Sans', sans-serif;
    transition: all .15s;
  }
  .qp-tab.active { background: var(--amber); color: var(--black); }

  /* Product rows */
  .qp-list {
    flex: 1;
    padding: 8px 0;
  }

  .qp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px 9px 24px;
    border-bottom: 1px solid rgba(255,255,255,.035);
    transition: background .12s;
    cursor: default;
  }
  .qp-row:last-child { border-bottom: none; }
  .qp-row:hover { background: rgba(255,255,255,.025); }
  .qp-row.out-of-stock { opacity: .38; }

  .qp-rank {
    font-size: 11px; font-weight: 700; color: var(--dim);
    width: 18px; text-align: center; flex-shrink: 0;
  }
  .qp-star {
    background: none; border: none; cursor: pointer;
    font-size: 15px; color: var(--dim); flex-shrink: 0;
    line-height: 1; padding: 2px; transition: color .15s, transform .15s;
  }
  .qp-star:hover   { color: var(--yellow); transform: scale(1.2); }
  .qp-star.starred { color: var(--yellow); }

  .qp-info { flex: 1; min-width: 0; }
  .qp-name {
    font-size: 13.5px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qp-meta {
    font-size: 11px; color: var(--muted); margin-top: 2px;
    display: flex; align-items: center; gap: 8px;
  }
  .qp-price  { font-weight: 600; color: var(--white); }
  .qp-stock  { color: var(--dim); }
  .qp-stock.low { color: var(--yellow); }
  .qp-stock.out { color: var(--red); }

  /* Quick-add icon button */
  .qp-add {
    width: 28px; height: 28px;
    background: var(--graphite);
    border: 1px solid var(--border2);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--muted);
    font-size: 16px; font-weight: 300;
    transition: all .15s; flex-shrink: 0;
  }
  .qp-add:hover { background: var(--amber-pale); border-color: var(--amber); color: var(--amber); }
  .qp-add:active { transform: scale(.92); }

  .qp-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 48px 24px; text-align: center;
    color: var(--dim); font-size: 13px;
  }
  .qp-empty-icon { font-size: 28px; margin-bottom: 10px; opacity: .5; }

  /* ══════════════════════════════════════════════════════════════════
     RIGHT PANEL — EXACT pos.html CART
  ══════════════════════════════════════════════════════════════════ */
  .cart-panel {
    width: 400px; flex-shrink: 0; display: flex;
    flex-direction: column; background: var(--charcoal);
    height: 100%; overflow: hidden;
  }

  /* Cart header */
  .cart-header {
    padding: 12px 16px; border-bottom: 1px solid var(--subtle);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }
  .cart-title {
    font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px;
  }
  .cart-count {
    background: var(--amber); color: var(--black);
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px;
  }
  .cart-clear-btn {
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 10px; color: rgba(255,255,255,.35);
    font-family: 'DM Sans', sans-serif; font-size: 11px;
    cursor: pointer; transition: all .15s;
  }
  .cart-clear-btn:hover { border-color: var(--red); color: var(--red); }

  /* Cart items */
  .cart-items {
    flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
  }
  .cart-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .12s;
  }
  .cart-item:hover { background: rgba(255,255,255,.02); }
  .cart-item:last-child { border-bottom: none; }

  .ci-emoji { font-size: 20px; flex-shrink: 0; }
  .ci-info  { flex: 1; min-width: 0; }
  .ci-name  { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ci-meta  { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 1px; }
  .ci-meta .badge {
    display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 4px; text-transform: uppercase; margin-left: 4px; vertical-align: middle;
  }
  .ci-meta .badge.retail    { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
  .ci-meta .badge.wholesale { background: var(--amber-pale); color: var(--amber); }

  .ci-qty-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .ci-qty-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: var(--white);
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; line-height: 1; padding: 0;
  }
  .ci-qty-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--black); }
  .ci-qty { font-size: 12px; font-weight: 700; min-width: 16px; text-align: center; }

  .ci-total { font-size: 12px; font-weight: 700; color: var(--white); flex-shrink: 0; min-width: 50px; text-align: right; }
  .ci-remove {
    width: 20px; height: 20px; border-radius: 50%;
    background: transparent; border: 1px solid transparent;
    color: rgba(255,255,255,.2); cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s; flex-shrink: 0;
  }
  .ci-remove:hover { background: var(--red-pale); border-color: var(--red); color: var(--red); }

  /* Cart empty */
  .cart-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,.2); padding: 40px 20px;
  }
  .cart-empty-icon { font-size: 44px; margin-bottom: 12px; opacity: .5; }
  .cart-empty-text { font-size: 13px; text-align: center; }

  /* Cart footer — totals */
  .cart-footer { border-top: 1px solid var(--subtle); flex-shrink: 0; }
  .cart-totals { padding: 10px 16px 8px; display: flex; flex-direction: column; gap: 4px; }
  .total-row  { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
  .total-row-label { color: rgba(255,255,255,.5); }
  .total-row-value { font-weight: 600; }
  .total-row.grand {
    margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08);
    font-size: 18px; font-family: 'Syne', sans-serif; font-weight: 800; letter-spacing: -.5px;
  }
  .total-row.grand .total-row-value { color: var(--amber); }

  /* Payment section */
  .payment-section { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
  .payment-modes   { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .pay-mode-btn {
    padding: 7px 4px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--graphite); color: rgba(255,255,255,.5);
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
    cursor: pointer; text-align: center; transition: all .15s;
  }
  .pay-mode-btn:hover { border-color: rgba(255,255,255,.2); }
  .pay-mode-btn.active { background: var(--amber-pale); border-color: var(--amber); color: var(--amber); }

  .payment-amounts { display: flex; gap: 8px; }
  .pay-input-wrap  { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .pay-input-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.35); }
  .pay-input-inner { position: relative; }
  .pay-input-prefix {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,.3); pointer-events: none;
  }
  .pay-amount-input {
    width: 100%; background: var(--graphite); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 8px 7px 32px;
    font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--white); outline: none; text-align: right;
    transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield;
  }
  .pay-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }
  .pay-amount-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-ring); }
  .pay-amount-input:read-only { color: rgba(255,255,255,.45); cursor: default; }
  .pay-amount-input:read-only:focus { border-color: var(--border); box-shadow: none; }

  .paid-row    { display: flex; align-items: center; gap: 10px; }
  .paid-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-shrink: 0; }
  .paid-checkbox { width: 18px; height: 18px; accent-color: var(--amber); cursor: pointer; }
  .paid-label  { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7); }
  .customer-input {
    flex: 1; background: var(--graphite); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 12px;
    font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--white); outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .customer-input::placeholder { color: rgba(255,255,255,.2); }
  .customer-input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-ring); }

  .charge-btn {
    width: 100%; background: var(--amber); color: var(--black); border: none;
    border-radius: 12px; padding: 18px;
    font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800;
    cursor: pointer; letter-spacing: -.3px;
    transition: background .18s, transform .12s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .charge-btn:hover  { background: var(--amber-dark); color: var(--white); }
  .charge-btn:active { transform: scale(.98); }
  .charge-btn:disabled { opacity: .4; pointer-events: none; }

  /* Toast */
  #toastRack {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 999; pointer-events: none;
  }
  .toast {
    background: var(--graphite); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; padding: 12px 18px; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    animation: toastIn .22s ease; pointer-events: auto; max-width: 280px;
  }
  .toast.error   { border-color: var(--red);   color: var(--red); }
  .toast.success { border-color: var(--green); color: var(--green); }
  @keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }