: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 */
.topbar{display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow)}
.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)}

/* 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 */
.pos{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:14px; padding:16px; height:calc(100vh - 58px)}
@media (max-width:900px){.pos{grid-template-columns:1fr; height:auto} .side .sess-list{max-height:260px}}
.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 */
.scr-grid{display:grid; gap:10px}
.scr{display:flex; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); cursor:pointer}
.scr:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.scr .t{font-weight:700; font-size:14.5px}
.scr .m{font-size:12px; color:var(--muted)}
.scr .price{font-family:var(--mono); font-weight:700; font-size:13px}
.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) */
.seatmap{overflow-x:auto; padding:2px 2px 6px}
.smap{display:grid; gap:7px; justify-content:center; margin:0 auto; width:max-content}
.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}
.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}
.cf-card .pr{font-size:13px; font-weight:800; color:var(--accent)}
.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-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)}
.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}
@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}