:root{
  --bg:#0E1116; --panel:#161B22; --panel2:#1B212B; --line:#28303B;
  --text:#E7EBF1; --muted:#8A94A4; --faint:#5A6472;
  --accent:#F5B33C; --accent-soft:rgba(245,179,60,.14);
  --ok:#3ECf8e; --info:#5B9CFF; --bad:#F26D6D;
  --track:rgba(255,255,255,.07);
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --mono:"SF Mono","Cascadia Code",ui-monospace,monospace;
  --sans:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Inter,sans-serif;
}
@media (prefers-color-scheme:light){:root{
  --bg:#F5F4F0; --panel:#FFFFFF; --panel2:#FAF9F5; --line:#E5E2DA;
  --text:#1B2027; --muted:#5E6673; --faint:#98A0AC;
  --accent:#B9770A; --accent-soft:rgba(185,119,10,.10);
  --ok:#1F9D6A; --info:#2E6FE0; --bad:#C0392B;
  --track:rgba(0,0,0,.07);
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(20,24,32,.10);
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans); color:var(--text);
  background:radial-gradient(1200px 500px at 85% -10%, var(--accent-soft), transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45}
.hidden{display:none !important}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* top bar */
/* D-158.1: the bar WRAPS instead of pushing buttons off-screen — nothing ever sticks out. */
.topbar{display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow)}
.topbar .btn{white-space:nowrap}
.brand{display:flex; flex-direction:column; line-height:1.1}
.brand .k{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700}
.brand .n{font-size:16px; font-weight:800; letter-spacing:-.01em}
.spacer{flex:1}
.loc select, .f{appearance:none; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-family:var(--sans); font-size:13.5px; padding:8px 11px; border-radius:10px}
.who{font-size:12px; color:var(--muted); white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis}
/* D-158.1: the ☰ dropdown with the rare actions */
.menu-wrap{position:relative}
.top-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:45; min-width:220px; padding:6px;
  display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow)}
.top-menu .btn{width:100%; text-align:left; justify-content:flex-start; white-space:nowrap}

/* buttons */
.btn{appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--text); font-family:var(--sans); font-size:13.5px; font-weight:650; padding:9px 16px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.btn.primary{background:var(--accent); color:#1a1305; border-color:transparent}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* login */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login{width:min(380px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.login h1{margin:0 0 2px; font-size:20px; font-weight:800; letter-spacing:-.02em}
.login .sub{font-size:12.5px; color:var(--muted); margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:5px}
.field input{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-family:var(--sans); font-size:14px; padding:10px 12px; border-radius:10px}
.field input:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.login .row{display:flex; gap:8px; align-items:center; margin-top:6px}
.err{color:var(--bad); font-size:12.5px; margin-top:10px; min-height:16px}
.hint{font-size:11px; color:var(--faint); margin-top:8px}
.hint code{font-family:var(--mono); background:var(--track); padding:1px 5px; border-radius:5px}

/* POS layout */
/* D-159: the app is a flex column of the viewport — the content always gets EXACTLY the space
   below the top bar (however many rows it wraps into), so the page itself never scrolls. */
#app-view{display:flex; flex-direction:column; height:100vh}
/* D-159.2: back to two tracks — the switcher is a compact segmented control in the bar */
.pos{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:14px; padding:16px; flex:1 1 auto; min-height:0}
@media (max-width:900px){#app-view{height:auto} .pos{grid-template-columns:1fr} .side .sess-list{max-height:260px}}
/* D-159.2: on narrow screens the mode labels collapse to icons — near-zero bar footprint */
@media (max-width:1350px){.modes .lbl{display:none} .modes .mode-btn{padding:8px 11px}}
.col{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; overflow:auto}
.col h2{margin:0 0 3px; font-size:15px; font-weight:750}
.col .h-sub{font-size:12px; color:var(--muted); margin-bottom:12px}

/* screening cards */
.pill{font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:20px; text-transform:uppercase}
.p-open{background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok)}
.p-mut{background:var(--track); color:var(--muted)}

/* shared column header */
.col-head{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.col-head h2{margin:0}
.btn.sm{padding:5px 10px; font-size:13px}

/* seat-map header strip: film · time · hall + occupancy counters (à la box-office) */
.mhead{display:flex; align-items:center; gap:12px; margin-bottom:12px; padding-bottom:11px; border-bottom:1px solid var(--line)}
.mfilm{font-size:16px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msub{font-size:12px; color:var(--muted)}
.mstats{display:flex; gap:6px; flex-wrap:wrap}
.mstats .st{font-size:10.5px; color:var(--muted); background:var(--panel2); border:1px solid var(--line);
  border-radius:7px; padding:3px 8px; white-space:nowrap}
.mstats .st b{font-family:var(--mono); color:var(--text); font-weight:700}

/* screen indicator */
.screen{margin:2px auto 20px; max-width:78%; height:26px; color:var(--muted);
  font-size:10px; letter-spacing:.4em; text-align:center; line-height:26px;
  border-top:2px solid color-mix(in srgb,var(--accent) 60%,var(--line));
  border-radius:0 0 48% 48% / 0 0 26px 26px;
  background:linear-gradient(var(--accent-soft), transparent 75%)}

/* seat map grid — seats are solid category-coloured squares (box-office style) */
/* D-159: the map area is the flexible middle of the column; the grid SCALES to fit it —
   no scrollbars for any hall size at any resolution. */
.seatmap{flex:1 1 auto; min-height:120px; overflow:hidden; padding:2px; display:flex; justify-content:center; align-items:flex-start}
.smap{display:grid; gap:7px; justify-content:center; width:max-content; transform-origin:top center; flex:0 0 auto}
.rowlab{display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--faint); min-width:18px}
.cell-empty{width:31px; height:31px}
.seat{--cat:#7C8698; width:31px; height:31px; padding:0; border:1px solid rgba(0,0,0,.28);
  border-radius:7px 7px 5px 5px; background:var(--cat); color:#fff;
  font-family:var(--mono); font-size:11.5px; font-weight:700; display:grid; place-items:center;
  position:relative; cursor:default; appearance:none; text-shadow:0 1px 1px rgba(0,0,0,.3)}
.seat.is-available{cursor:pointer}
.seat.is-available:hover{transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.3); filter:brightness(1.12)}
/* selected = white with a green ring + ✓: unmistakable next to ANY category colour */
.seat.is-selected{background:#fff; border:2px solid var(--ok); color:#0B7A4B; text-shadow:none; cursor:pointer;
  outline:2px solid color-mix(in srgb,var(--ok) 45%, transparent); outline-offset:1px; font-size:13px}
.seat.is-held{background:repeating-linear-gradient(45deg,#C9930F 0 5px,#A87A0C 5px 10px); color:#fff; cursor:not-allowed}
.seat.is-sold{background:var(--track); border-color:var(--line); color:var(--faint); text-shadow:none; cursor:not-allowed}
/* D-143: a BOOKED seat (unpaid order for a guest) — solid amber vs the striped short-term hold */
.seat.is-booked{background:#C9930F; border-color:#A87A0C; color:#fff; cursor:not-allowed}
.seat:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.seat[disabled]{opacity:.92}
.smap.readonly .seat{cursor:default}

/* price chips under the map — the price on the category's colour, like a box-office legend */
.price-legend{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px}
.pchip{--cat:#7C8698; display:inline-flex; align-items:center; gap:7px; background:var(--cat); color:#fff;
  border:1px solid rgba(0,0,0,.28); border-radius:8px; padding:4px 11px; font-size:11.5px; font-weight:650;
  text-shadow:0 1px 1px rgba(0,0,0,.3)}
.pchip .pv{font-family:var(--mono); font-weight:800}

/* state legend */
.legend{display:flex; justify-content:center; flex-wrap:wrap; gap:9px 16px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line); font-size:11.5px; color:var(--muted)}
.legend .lg{display:inline-flex; align-items:center; gap:7px}
.legend .sw{width:15px; height:15px; border-radius:5px; border:1px solid var(--line); flex:0 0 auto;
  display:grid; place-items:center; font-size:9px; color:#fff}

/* session list (right rail, always visible) */
.side{display:flex; flex-direction:column; min-height:0}
.sess-filter{display:flex; align-items:center; gap:6px; margin:0 0 8px}
.sess-filter .f{padding:6px 8px; font-size:12.5px; min-width:0}
.sess-filter select{flex:1}
.sess-list{overflow-y:auto; flex:0 1 auto; max-height:44%; display:flex; flex-direction:column; gap:6px; padding-right:2px}
.sess{display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel2); cursor:pointer; min-width:0}
.sess:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.sess.active{border-color:var(--accent); background:linear-gradient(90deg,var(--accent-soft),var(--panel2))}
.sess .tm{font-family:var(--mono); font-size:12.5px; font-weight:800; white-space:nowrap}
.sess .fi{font-size:12.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.sess .hall{font-size:10px; color:var(--muted); background:var(--track); border-radius:6px; padding:2px 7px; white-space:nowrap}
.sess .pill{flex:0 0 auto}

/* cart section under the sessions */
.cart-sec{display:flex; flex-direction:column; flex:1; min-height:0; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}

/* mode tabs in the topbar */
.modes{display:flex; gap:4px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:3px}
.mode-btn{appearance:none; border:none; background:transparent; color:var(--muted); font-family:var(--sans);
  font-size:13px; font-weight:650; padding:6px 14px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.mode-btn .ico{font-size:15px; line-height:1}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--accent); color:#1a1305}

/* segmented filter */
.seg{display:flex; gap:3px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:2px}
.seg-btn{appearance:none; border:none; background:transparent; color:var(--muted); font-size:11.5px; font-weight:650;
  padding:4px 10px; border-radius:7px; cursor:pointer}
.seg-btn.active{background:var(--track); color:var(--text)}

/* orders list (refund + cafe orders) */
.ro-list{display:flex; flex-direction:column; gap:6px; overflow-y:auto}
.ro-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel2); cursor:pointer; min-width:0}
.ro-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.ro-row.active{border-color:var(--accent); background:linear-gradient(90deg,var(--accent-soft),var(--panel2))}
.ro-row .tm{font-size:11.5px; color:var(--muted); white-space:nowrap}
.ro-row .fi{font-size:12.5px; font-weight:650; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ro-row .pr{font-size:12.5px; font-weight:700; white-space:nowrap}
.p-bad{background:color-mix(in srgb,var(--bad) 16%,transparent); color:var(--bad)}

/* approvals queue */
.ap-row{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--panel2); margin-bottom:6px; font-size:12.5px}

/* cafe menu grid */
.cf-menu{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.cf-card{appearance:none; text-align:left; display:flex; flex-direction:column; gap:6px; padding:13px 13px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--text);
  font-family:var(--sans); cursor:pointer}
.cf-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); transform:translateY(-1px)}
.cf-card .nm{font-size:13.5px; font-weight:650}
/* K-3: ingredients ran out — the card stays visible (the guest asks for it) but cannot be sold. */
.cf-card.cf-out{opacity:.45; border-style:dashed; cursor:not-allowed}
/* K-4: the one-tap stop corner + «в залі / з собою» switch. Touch-first: 34px targets. */
.cf-card{position:relative}
.cf-stop{position:absolute; top:4px; right:4px; width:26px; height:26px; display:flex; align-items:center;
  justify-content:center; border-radius:7px; font-size:12px; opacity:.35; background:var(--panel,#141A22)}
.cf-card:hover .cf-stop,.cf-card[data-stopped] .cf-stop{opacity:.95}
.cf-serv{display:flex; gap:6px; margin-bottom:8px}
.cf-serv .cf-serv-btn{flex:1; min-height:34px}
.cf-card.cf-out:hover{transform:none; border-color:var(--line)}
.cf-card .pr{font-size:13px; font-weight:800; color:var(--accent)}

/* K-6: режим бариста — той самий екран, але під палець і під одну руку. Вмикається кнопкою «✋ Тач»
   і живе в браузері конкретної каси: на планшеті біля кавомашини він потрібен, на десктопі
   адміністратора — ні. Нічого не ховаємо і не перейменовуємо: тільки розміри цілей та фільтр
   категорій, тому всі сценарії й смоуки працюють в обох режимах. */
.cf-catbar{display:none; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.cf-catbar .btn{min-height:46px; font-size:15px; padding:0 16px}
#mode-cafe.touch .cf-catbar{display:flex}
#mode-cafe.touch .cf-menu{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}
#mode-cafe.touch .cf-card{min-height:106px; padding:16px; gap:8px; justify-content:center}
/* Кут «стоп» більший за класичний, тому назві потрібен свій жолоб — інакше довга назва
   («Начос із сиром») підлазить під кнопку і бариста тицяє не туди. */
#mode-cafe.touch .cf-card .nm{font-size:18px; line-height:1.25; padding-right:46px}
#mode-cafe.touch .cf-card .pr{font-size:17px}
#mode-cafe.touch .cf-stop{width:44px; height:44px; font-size:19px; opacity:.55; border-radius:10px}
#mode-cafe.touch .cf-cat{font-size:13px !important}
#mode-cafe.touch .cf-serv .cf-serv-btn{min-height:54px; font-size:15px}
#mode-cafe.touch .cart-line{padding:13px 2px; font-size:15px}
#mode-cafe.touch .qty .x{font-size:20px; min-width:44px; min-height:44px; padding:0 10px}
#mode-cafe.touch #cf-total{font-size:22px}
#mode-cafe.touch #cf-pay{min-height:64px; font-size:19px; font-weight:800}
#mode-cafe.touch #cf-orders{max-height:220px; overflow-y:auto}   /* історія не з'їдає екран продажу */
.qty{display:inline-flex; align-items:center; gap:7px}
.qty .x{font-size:15px; padding:0 6px; border:1px solid var(--line); border-radius:6px; background:var(--panel)}

/* cart */
.cart-sec .empty{color:var(--faint); font-size:13px; text-align:center; padding:22px 10px}
.cart-lines{overflow-y:auto; min-height:0}
.cart-lines{display:flex; flex-direction:column}
.cart-line{display:flex; align-items:center; gap:9px; padding:9px 2px; border-bottom:1px solid var(--line)}
/* D-109: a selectable seat row while the per-seat refund panel is open */
.cart-line.pick{cursor:pointer; border-radius:6px; padding-left:6px}
.cart-line.pick:hover{background:var(--panel-2, rgba(127,127,127,.12))}
.cart-line.done{opacity:.5; text-decoration:line-through}
.cart-line .lab{font-family:var(--mono); font-weight:700; font-size:13px; min-width:34px}
.cart-line .cat{font-size:11px; color:var(--muted)}
.cart-line .cat .chip{display:inline-block; width:8px; height:8px; border-radius:3px; background:var(--cat); margin-right:5px; vertical-align:middle}
.cart-line .pr{margin-left:auto; font-family:var(--mono); font-weight:700; font-size:13px}
.cart-line .x{border:none; background:transparent; color:var(--faint); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px}
.cart-line .x:hover{color:var(--bad)}
.cart-foot{margin-top:auto; padding-top:14px}
.cart-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; font-size:14px}
.cart-total .mono{font-size:19px; font-weight:800}
.cart-done{margin-top:auto; padding-top:14px; font-size:13px; overflow-y:auto; min-height:0}
.tickets{display:flex; flex-direction:column; gap:8px; margin:12px 0}
.ticket{display:flex; align-items:center; gap:11px; border:1px dashed var(--line); border-radius:10px; padding:8px 10px; background:var(--panel2)}
.ticket .tqr{width:74px; height:74px; border-radius:6px; background:#fff; flex:0 0 auto}
.ticket .tseat{font-family:var(--mono); font-weight:800; font-size:15px}
.ticket .tcode{font-size:10.5px; color:var(--muted)}
.ticket .tstate{font-size:11px; color:var(--ok); min-height:14px}
.cart-done .ok{color:var(--ok); font-weight:700}
.cart-done .mono{font-family:var(--mono)}
.cart-done .row{display:flex; gap:8px; margin-top:12px}
.timer{font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:20px}
.timer.warn{color:var(--bad); background:color-mix(in srgb,var(--bad) 14%, transparent)}

.loading{color:var(--muted); font-size:13px; padding:20px 4px}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:11px 16px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-4px)}

/* ===== Cash shift (D-058) ===== */
.shift-chip{font-family:var(--mono); font-size:12px; color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent); border-radius:999px; padding:3px 11px; white-space:nowrap}
.modal-back{position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; z-index:50; padding:20px}
/* D-158: the operator cart is a fixed-height window — content scrolls inside it */
.cart-body{height:228px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:6px 8px; margin-bottom:8px}
.cart-body .empty{border:none; padding:14px 0}
/* D-157: quantity window for add-on products */
.qty-row{display:flex; gap:10px; align-items:center; justify-content:center; margin:14px 0}
.qty-row .qbtn{font-size:22px; font-weight:800; width:52px; height:48px; padding:0}
.qty-row #qty-input{width:80px; text-align:center; font-size:20px; font-weight:800; height:48px}
/* D-155: «Покупка | Бронь» switcher on top of the checkout modal */
.pm-modes{display:flex; gap:6px; margin-bottom:12px}
.pm-modes .pmt{flex:1; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:none;
  color:var(--muted); font:inherit; font-weight:700; cursor:pointer}
.pm-modes .pmt.active{background:var(--accent); border-color:transparent; color:#1a1305}
.modal{width:min(420px,94vw); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px}
.modal h3{margin:0 0 14px; font-size:16px; font-weight:800}
.modal .actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.modal .zrow{display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.modal .zrow b{font-family:var(--mono)}
.modal .zrow .z-neg{color:var(--bad)} .modal .zrow .z-pos{color:var(--ok)}

/* ===== Tender selection (D-060) ===== */
.tender{display:flex; gap:12px; align-items:center; font-size:12.5px; color:var(--muted); margin:8px 0 2px}
.tender label{display:inline-flex; gap:5px; align-items:center; cursor:pointer}
.tender input{accent-color:var(--accent)}

/* ===== Loyalty customer panel (D-093) — the strip right below the hall scheme ===== */
.cust-panel{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel2)}
/* D-158.1: the map column is a flex column and the client strip PINS to its bottom —
   with a short hall the strip no longer floats mid-screen. */
#map-col{display:flex; flex-direction:column}
#map-col .cust-panel{margin-top:auto}
.cust-title{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.cust-form{display:flex; gap:6px; align-items:center; flex:1; min-width:220px}
.cust-form .inp{flex:1; min-width:150px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:13.5px; padding:8px 11px; border-radius:9px}
.cust-form .inp:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.cust-chip{display:inline-flex; align-items:center; gap:8px; font-size:13px; border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--text); border-radius:999px; padding:5px 12px; white-space:nowrap}
.cust-chip .bal{font-family:var(--mono); font-weight:800; color:var(--ok)}
.cust-chip .x{cursor:pointer; color:var(--muted); font-weight:800; padding:0 2px}
.cust-chip .x:hover{color:var(--bad)}
.cust-rows{display:flex; flex-direction:column; gap:6px; max-height:280px; overflow:auto}
.cust-row{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 11px; cursor:pointer; font-size:13.5px}
.cust-row:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.cust-row .code{font-family:var(--mono); color:var(--muted); font-size:12px}
.cust-row .bal{margin-left:auto; font-family:var(--mono); font-weight:800; color:var(--ok)}
.cust-field{margin-bottom:10px}
.cust-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
.cust-field input{width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--text); font-size:14px; padding:9px 11px; border-radius:9px}
.cust-field input:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}

/* ===== Bonus split tender (D-094) ===== */
.bonus-row{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:9px 0 2px; font-size:12.5px; color:var(--muted)}
.bonus-row label{white-space:nowrap; font-weight:600}
.bonus-row .inp{width:90px; background:var(--panel); border:1px solid var(--line); color:var(--text); font-family:var(--mono); font-size:13.5px; padding:7px 9px; border-radius:8px}
.bonus-row .inp:focus{outline:none; border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}

/* ===== Escort seats (D-097) ===== */
.cart-line .esc{border:1px solid var(--line); background:none; border-radius:7px; cursor:pointer; font-size:12px; padding:2px 5px; opacity:.55}
.cart-line .esc:hover{opacity:1}
.cart-line .esc.on{opacity:1; border-color:color-mix(in srgb,var(--ok) 55%,transparent); background:color-mix(in srgb,var(--ok) 12%,transparent)}
.cart-line.is-escort .pr{color:var(--ok); font-weight:700}

/* D-114: an inline checkbox row inside the shift dialogs */
.chk{display:flex; align-items:center; gap:8px; margin:10px 0 2px; cursor:pointer}
.chk input{width:auto; margin:0}

/* D-115: ПРРО status chip in the till header. Three states the cashier must tell apart at a glance:
   selling is fiscalized, selling is NOT fiscalized, and the register is unreachable. */
.fisc{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
      font-size:12px; font-weight:600; white-space:nowrap; border:1px solid transparent}
.fisc::before{content:''; width:8px; height:8px; border-radius:50%; background:currentColor}
.fisc.ok{color:#15803d; background:#dcfce7; border-color:#86efac}
.fisc.warn{color:#a16207; background:#fef9c3; border-color:#fde047}
.fisc.bad{color:#b91c1c; background:#fee2e2; border-color:#fca5a5}
.fisc.off{color:#64748b; background:#f1f5f9; border-color:#cbd5e1}

/* D-122: customer display health on the till header button — green = alive, blinking red = the
   window is gone and needs one click to restore (the human-factor guard). */
#cds-btn.cds-live{border-color:color-mix(in srgb,var(--ok) 55%,var(--line)); color:var(--ok)}
#cds-btn.cds-dead{border-color:var(--bad); color:var(--bad); animation:cds-blink 1.2s ease-in-out infinite}
/* D-158.2: the ☰ button carries the guest-screen alert while 🖥 hides inside the menu */
#top-menu-btn.cds-dead{border-color:var(--bad); color:var(--bad); animation:cds-blink 1.2s ease-in-out infinite}
@keyframes cds-blink{50%{opacity:.4}}

/* D-119: per-sale fiscalization choice. Quiet by default — it is checked almost always; unchecking it
   is what deserves attention, so the label turns warning-coloured when off. */
.fisc-opt{display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13px; cursor:pointer}
.fisc-opt input{width:auto; margin:0}
.fisc-opt:has(input:not(:checked)){color:#a16207; font-weight:600}