:root{--accent:#ab2834;--page-bg:#f8f8f6;--header-bg:#ffffff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#25292d;background:var(--page-bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}.hidden{display:none!important}.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(18px,4vw,60px);background:var(--header-bg);border-bottom:1px solid #e6e6e2}.identity{display:flex;align-items:center;gap:12px}.identity strong{font-size:24px;color:var(--accent);font-family:Georgia,serif}.identity small{display:block;font-size:10px;letter-spacing:1.7px;color:#737a7a;margin-top:2px}.brand-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--accent);color:white;font:27px Georgia,serif;border-radius:12px}.top-actions{display:flex;gap:20px;align-items:center}.status{color:#73807a;font-size:12px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;max-width:1560px;margin:0 auto;padding:36px clamp(18px,4vw,60px)}.register,.sidebar{background:white;border:1px solid #e8e8e4;border-radius:16px;box-shadow:0 7px 22px #23232306}.register{padding:30px}.sidebar{padding:24px;align-self:start}.section-title,.side-title,.between,.dialog-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:1.7px}.section-title h1{margin:5px 0 5px;font-size:30px;letter-spacing:-1.2px}.section-title p,.side-note,.muted{color:#7f8587;font-size:13px}.side-title h2{margin:5px 0;font-size:22px}.side-note{line-height:1.6;margin:10px 0 20px}.btn{border:0;border-radius:9px;font-weight:650;font-size:13px;padding:11px 16px;white-space:nowrap}.btn.accent{background:var(--accent);color:#fff}.btn.accent:hover{background:#8e202a}.btn.outline{border:1px solid #dbdedc;background:#fff;color:#343a3c}.btn.subtle{background:#f3f4f2;color:#5e6666}.btn.big{padding:14px 22px}.add-panel{border:1px solid #e9eae7;border-radius:12px;background:#fbfbfa;padding:18px;margin:25px 0 22px;position:relative}.field{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#565e60;font-weight:700}.field input,.field textarea,.full-input{border:1px solid #dde0df;border-radius:9px;padding:12px;background:white;outline:none;width:100%;color:#242929}.field input:focus,.field textarea:focus,.full-input:focus{border-color:#ad5960;box-shadow:0 0 0 3px #ab283410}.between{margin-top:13px}.between .muted{font-size:12px}.matches{position:absolute;top:90px;left:18px;right:18px;background:white;box-shadow:0 14px 32px #16161624;z-index:3;border-radius:10px;border:1px solid #e5e5e5;max-height:240px;overflow:auto}.match{display:flex;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;border:0;border-bottom:1px solid #f2f2f2;background:white;text-align:left}.match:hover{background:#fbf1f1}.match small{display:block;color:#8b9091;margin-top:4px}.table-wrap{border:1px solid #ececea;border-radius:12px;overflow-x:auto;min-height:270px}table{border-collapse:collapse;width:100%;min-width:720px}th{font-size:10px;color:#8a9193;letter-spacing:1px;text-align:left;background:#fafafa;padding:14px 12px;border-bottom:1px solid #ebebeb}td{border-bottom:1px solid #f0f0ef;padding:13px 12px;font-size:13px}td:first-child{color:#81898a}td:nth-child(2){font-weight:700}td:nth-child(6){font-weight:800}.table-action{background:none;border:0;color:#a92c37;font-size:12px;text-decoration:underline;padding:3px 5px}.empty{text-align:center;padding:48px 20px}.empty-symbol{display:inline-grid;place-items:center;width:54px;height:54px;background:#f9edef;border-radius:50%;color:#a52c35;font-size:29px}.empty h3{font-size:17px;margin:15px 0 5px}.empty p{color:#8b9090;font-size:13px}.sum-row{border-radius:12px;background:#faf3f3;display:flex;align-items:center;justify-content:space-between;padding:25px;margin-top:18px}.sum-row div{display:flex;flex-direction:column;gap:6px}.sum-row strong{color:var(--accent);font-size:37px;letter-spacing:-1.6px}.finish{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px}.side-title .btn{padding:9px 12px}.full-input{margin-bottom:14px}.products{max-height:540px;overflow:auto}.product{padding:14px 0;border-bottom:1px solid #eeeeeb}.product-main{display:flex;justify-content:space-between;gap:8px}.product-name{font-size:13px;font-weight:750}.product-sub{margin-top:5px;font-size:12px;color:#888f91}.product-price{font-weight:750;font-size:13px}.product-actions{display:flex;gap:8px;margin-top:10px}.product-actions .btn{padding:7px 10px;font-size:11px}.history{width:100%;margin-top:18px}.overlay{position:fixed;inset:0;background:#1a22287d;display:grid;place-items:center;padding:16px;z-index:10}.dialog{width:min(520px,100%);background:#fff;border-radius:16px;padding:25px;box-shadow:0 22px 70px #0003;max-height:90vh;overflow:auto}.dialog-title h2{margin:0 0 20px}.close{border:0;background:#f3f3f3;border-radius:8px;font-size:26px;padding:0 11px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.span-2{grid-column:span 2}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}.check{display:flex;align-items:center;gap:9px;font-size:13px;color:#596163;margin-top:14px}.check input{width:16px;height:16px}.error{color:#a6222c;font-size:13px;margin-top:14px}.login{min-height:75vh;display:grid;place-items:center;padding:20px}.login-card{background:#fff;border:1px solid #ecece9;border-radius:16px;padding:36px;width:min(410px,100%)}.login-card h1{font-size:30px;margin:9px 0}.login-card p{color:#81898a;font-size:14px;margin-bottom:25px}.login-card .btn{width:100%;margin-top:20px}.toast{position:fixed;bottom:24px;right:24px;background:#29312f;color:white;border-radius:9px;padding:13px 20px;box-shadow:0 8px 24px #0002;z-index:20}.receipt{padding:12px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.receipt small{color:#888;display:block;margin-top:3px}.history-lines{max-height:260px;overflow:auto;margin-top:10px}.danger{color:#ae2b34}@media(max-width:1050px){.layout{grid-template-columns:1fr}.sidebar{order:2}}@media(max-width:650px){.layout{padding:16px;gap:16px}.register,.sidebar{padding:20px}.section-title{align-items:start}.section-title h1{font-size:24px}.section-title p{max-width:250px;line-height:1.5}.finish{flex-direction:column;align-items:stretch}.sum-row strong{font-size:30px}.status{display:none}.fields{grid-template-columns:1fr}.span-2{grid-column:span 1}.dialog{padding:19px}}

.product-heading{display:flex;gap:12px;align-items:center}.product-thumb{width:50px;height:50px;flex-shrink:0;object-fit:cover;border-radius:9px;border:1px solid #e1e2df}.product-thumb.empty-thumb{display:grid;place-items:center;background:#f1f2ef;color:#a8acab;font-size:21px}.match-left{display:flex;align-items:center;gap:10px}.match .product-thumb{width:35px;height:35px}.photo-preview{display:flex;align-items:center;gap:12px;margin-top:10px}.photo-preview img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid #ddd}.photo-help{font-size:12px;color:#798183;margin-top:5px}.admin-panel{display:grid;grid-template-columns:1fr 1fr;gap:15px}.color-picker{height:45px!important;padding:4px!important}.admin-panel .span-2{grid-column:span 2}@media(max-width:650px){.admin-panel{grid-template-columns:1fr}.admin-panel .span-2{grid-column:span 1}.topbar{gap:9px}.top-actions{gap:8px}#admin{font-size:11px;padding:8px}.identity strong{font-size:20px}}

/* Appearance actions remain accessible on mobile and distinguish the reset control. */
.dialog-actions{flex-wrap:wrap}
.dialog-actions .btn.outline.danger{color:#a32530;border-color:#e2b7bc}
.dialog-actions .btn.outline.danger:hover{background:#fff3f4}
@media(max-width:650px){.dialog-actions .btn{flex:1 1 auto;white-space:normal}}

/* v1.2.0: tap-friendly photo upload with desktop drag/drop */
.photo-field{margin-top:18px}.photo-label{display:block;color:#565e60;font-size:12px;font-weight:700;margin-bottom:9px}
.photo-dropzone{position:relative;display:grid;place-items:center;border:2px dashed #c7ceca;border-radius:13px;min-height:150px;background:#fafbf9;cursor:pointer;text-align:center;transition:background .15s,border-color .15s;overflow:hidden}
.photo-dropzone:hover,.photo-dropzone:focus-visible,.photo-dropzone.drag-over{background:#fff1f2;border-color:var(--accent);outline:none}
.photo-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone-placeholder{display:flex;flex-direction:column;align-items:center;gap:5px;padding:18px;color:#757e7a;font-size:13px;pointer-events:none}
.dropzone-placeholder strong{font-size:15px;color:#323b38}.dropzone-icon{height:40px;width:40px;display:grid;place-items:center;background:#f8e8e9;color:var(--accent);font-size:27px;border-radius:50%;margin-bottom:5px}
.dropzone-selected{display:flex;align-items:center;gap:15px;padding:12px;width:100%;pointer-events:none;text-align:left}.dropzone-selected img{width:92px;height:92px;object-fit:cover;border-radius:10px}.dropzone-selected div{display:grid;gap:6px;min-width:0}.dropzone-selected strong{overflow-wrap:anywhere}.dropzone-selected span{color:#6f7774;font-size:12px}.photo-preview>div{display:flex;flex-direction:column;align-items:start;gap:2px;font-size:12px;color:#68716d}
/* Mobile: single-column cards, no horizontal table scrolling, thumb-sized controls. */
@media (max-width:760px){
  .topbar{padding:12px 14px;align-items:flex-start;gap:12px}.identity{min-width:0;flex:1}.identity strong{font-size:20px}.identity small{font-size:9px;letter-spacing:.6px;line-height:1.3}.brand-icon{width:36px;height:36px;font-size:23px;flex:none}
  .top-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:48%}.top-actions .btn{min-height:40px;white-space:normal;padding:7px 10px;font-size:11px}
  .layout{display:flex;flex-direction:column;padding:12px;gap:14px}.register,.sidebar{padding:16px;border-radius:13px}.sidebar{order:2}
  .section-title{flex-direction:column;align-items:stretch;gap:10px}.section-title h1{font-size:25px}.section-title p{max-width:none}.section-title #new-sale{align-self:flex-start}
  .add-panel{margin:18px 0;padding:13px}.between{align-items:stretch;gap:12px;flex-wrap:wrap}.between .btn{min-height:44px}
  .matches{top:83px;left:10px;right:10px}.match{min-height:58px;align-items:center}.match> b{white-space:nowrap}
  .table-wrap{border:0;overflow:visible;min-height:0}table{min-width:0;display:block;width:100%}thead{display:none}tbody{display:block}
  #lines tr{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;margin:0 0 12px;padding:14px;border:1px solid #e5e6e3;border-radius:12px;background:#fff;box-shadow:0 3px 10px #00000008}
  #lines td{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border:0;padding:0;font-size:13px;text-align:right;min-width:0}
  #lines td::before{content:attr(data-label);color:#77807d;font-size:11px;font-weight:600;text-align:left;flex:0 0 auto}
  #lines td:nth-child(2){grid-column:1/-1;text-align:left;justify-content:flex-start;order:-2;align-items:center}
  #lines td:nth-child(2)::before{display:none}#lines td:nth-child(2) .product-heading{min-width:0;overflow-wrap:anywhere}
  #lines td:nth-child(1){grid-column:1/-1;order:-1;justify-content:flex-start;color:#7d8682}
  #lines td:nth-child(3){grid-column:1/-1;text-align:left;justify-content:flex-start;overflow-wrap:anywhere}
  #lines td:nth-child(4),#lines td:nth-child(5){grid-column:span 1}
  #lines td:nth-child(6){grid-column:1/-1;border-top:1px solid #f0f0ec;padding-top:9px;font-weight:800}
  #lines td.line-actions{grid-column:1/-1;justify-content:flex-end;gap:12px}.table-action{min-height:40px;padding:8px 12px;border-radius:7px;background:#faf2f2;text-decoration:none;font-size:13px}
  .empty{border:1px solid #ededeb;border-radius:12px}.sum-row{padding:18px}.sum-row strong{font-size:29px}.finish .btn{min-height:48px;width:100%}
  .side-title{align-items:center}.product-actions{flex-wrap:wrap}.product-actions .btn{min-height:42px;padding:9px 12px;font-size:12px;flex:1 1 auto}.product-main{align-items:center}
  .dialog{padding:17px;width:100%;max-height:calc(100dvh - 24px);border-radius:14px}.overlay{padding:12px;align-items:center}.dialog-title h2{font-size:20px;margin-bottom:14px}
  .fields,.admin-panel{grid-template-columns:1fr;gap:12px}.span-2,.admin-panel .span-2{grid-column:1}.field input,.field textarea,.full-input{min-height:44px;font-size:16px}
  .dialog-actions{flex-wrap:wrap}.dialog-actions .btn{flex:1 1 100%;min-height:44px}.photo-dropzone{min-height:135px}.receipt{gap:12px}
}
@media (max-width:380px){.identity small{font-size:8px}.topbar{flex-wrap:wrap}.top-actions{max-width:none;width:100%;justify-content:flex-start}.product-sub{font-size:11px}}

/* v1.4.0: sale receipt printing / reprint controls */
.print-options{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}
.print-options .btn{min-height:42px;flex:1 1 145px}
.history-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.history-actions .btn{padding:8px 10px}
@media(max-width:650px){.history-actions{align-items:flex-end}.receipt{align-items:flex-start}.print-options .btn{flex:1 1 100%}}


/* v1.5.0 — compact transaction rows on narrow screens; desktop unaffected */
#lines td.mobile-line{display:none}
@media(max-width:760px){
  .register{padding:12px}
  .table-wrap{border:0;overflow:visible}
  #lines tr{display:block;margin:0 0 7px;padding:9px 10px;border:1px solid #e5e6e3;border-radius:10px;box-shadow:none;background:#fff}
  #lines tr td:not(.mobile-line){display:none!important}
  #lines tr td.mobile-line{display:block!important;padding:0;border:0;width:100%;text-align:left;font-size:13px}
  #lines td.mobile-line::before{display:none!important}
  .mobile-line-top,.mobile-line-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mobile-line-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
  .mobile-line-title .product-thumb{width:34px;height:34px;min-width:34px;border-radius:6px;flex:none}
  .mobile-line-name-group{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}
  .mobile-line-name-group strong{font-size:13px;line-height:1.25;font-weight:700;overflow-wrap:anywhere}
  .mobile-line-number{font-size:10px;color:#77807d;white-space:nowrap}
  .mobile-line-amount{font-size:15px;color:#25292d;white-space:nowrap;font-weight:800}
  .mobile-line-description{color:#7b8581;font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:2px 0 0 42px}
  .mobile-line-bottom{margin:4px 0 0 42px;min-height:30px}
  .mobile-line-math{font-size:12px;color:#57615e;white-space:nowrap}
  .mobile-line-math b{color:#242929}
  .mobile-line-buttons{display:flex;align-items:center;gap:5px}
  .mobile-line-edit,.mobile-line-remove{background:#f4f4f2;border:1px solid #ececea;border-radius:7px;color:#343a3c;min-height:30px;padding:4px 11px;font-size:12px;font-weight:650}
  .mobile-line-remove{font-size:18px;line-height:1;color:#a52b36;min-width:32px;padding:3px 8px}
  .mobile-line-edit:focus-visible,.mobile-line-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sum-row{padding:12px 14px;margin-top:9px;gap:8px}
  .sum-row strong{font-size:26px;letter-spacing:-.5px}
  .sum-row .eyebrow{font-size:10px}
  .finish{margin-top:10px;gap:7px}
  .finish .muted{font-size:11px}
  .finish .btn{min-height:44px}
}
@media(max-width:390px){
  .mobile-line-bottom{margin-left:0}
  .mobile-line-description{padding-left:0}
  .mobile-line-title .product-thumb{width:30px;height:30px;min-width:30px}
  .mobile-line-name-group strong{font-size:12px}
}

/* Multi-device register sync indicator */
#sync-status[data-mode="online"]{color:#168044}
#sync-status[data-mode="offline"]{color:#b45309}

/* v1.7.0: card fee controls */
.card-fee-panel{border:1px solid var(--border,#ddd);border-radius:12px;padding:12px 15px;margin-top:12px;background:var(--surface,#fff)}
.card-fee-toggle{display:flex;align-items:center;gap:11px;cursor:pointer}
.card-fee-toggle input{width:20px;height:20px;accent-color:var(--accent,#ab2834);flex-shrink:0}
.card-fee-toggle span{display:flex;flex-direction:column;gap:3px}.card-fee-toggle small{color:var(--muted,#666);font-size:12px}
.card-fee-breakdown{margin-top:10px;font-size:13px}.card-fee-breakdown>div,.history-totals>div{display:flex;justify-content:space-between;gap:12px;margin:5px 0}.card-fee-breakdown b{font-variant-numeric:tabular-nums}
.history-totals{margin-top:12px;font-size:13px}
@media(max-width:650px){.card-fee-panel{padding:10px 12px;margin-top:8px}.card-fee-toggle small{font-size:11px}.card-fee-breakdown{margin-top:6px}}