/* POS engine base styles. Neutral defaults; a venue's skin/skin.css overrides the custom properties. */
:root{
  --bg:#141414; --bg-2:#1f1f1f; --fg:#f4f4f2; --fg-dim:rgba(244,244,242,.72);
  --panel:#f2f0ea; --panel-fg:#151515; --panel-dim:rgba(21,21,21,.7);
  --accent:#3d6fd9; --accent-strong:#5b86e3; --accent-on-panel:#284f9e; --on-accent:#ffffff;
  --cash:#2f6b45; --cdc:#2f6b45; --danger:#b3261e; --good:#2f6b45;
  --card:#3f4756;   /* 1.3.0: the Card button; white text on it is above 4.5:1 */
  --line:rgba(244,244,242,.18); --line-panel:rgba(21,21,21,.14);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font);
  --font-alt:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
body.till{overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- unsent banner: full width, red, while anything waits to be sent ---------- */
.banner{flex:0 0 auto;z-index:50;width:100%;padding:12px 16px;padding-top:calc(12px + var(--safe-t));
  background:var(--danger);color:#fff;font-weight:700;font-size:15px;line-height:1.4;text-align:center}

/* ---------- shell ---------- */
body.till{display:flex;flex-direction:column;height:100dvh}
.app{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--safe-r) var(--safe-b) var(--safe-l)}
.bar{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + var(--safe-t));border-bottom:1px solid var(--line);min-width:0}
.banner:not([hidden]) + .app .bar{padding-top:10px}
.mark{width:30px;height:30px;flex:0 0 auto}
.brand{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap;overflow:hidden}
.brand .alt{font-family:var(--font-alt);font-size:18px;color:var(--accent-strong)}
.brand .name{font-family:var(--font-display);font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ref{font:600 12px/1 var(--mono);color:var(--fg-dim);padding:7px 9px;border:1px solid var(--line);border-radius:8px}
.hspace{flex:1}
.hbtn{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:650}
.sync{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.sync .dot{width:10px;height:10px;border-radius:50%;background:#8a8a8a}
.sync.ok .dot{background:#7fbf7f}
.sync.wait .dot{background:#e0b341}
.sync.bad{border-color:#e8786e}
.sync.bad .dot{background:#e8786e}
main{display:grid;grid-template-columns:1fr 360px;min-height:0}

/* ---------- catalog ---------- */
.catalog{display:flex;flex-direction:column;min-height:0;min-width:0;padding:12px 14px 0}
.multi{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 11px}
.multi .ml{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-right:2px}
.mchip{min-width:56px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:15px;font-weight:750;color:var(--fg)}
.mchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cards{flex:1;min-height:0;overflow-y:auto;padding-bottom:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(220px,1fr);gap:12px}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);display:flex;flex-direction:column;min-height:210px}
.card .hit{flex:1;display:flex;flex-direction:column;text-align:left;padding:0;min-height:0}
.card .ph{flex:1;min-height:90px;background:var(--bg) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--fg-dim)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .txt{padding:10px 14px 4px}
.card .alt{display:block;font-family:var(--font-alt);font-size:13px;color:var(--accent-strong);line-height:1.25}
.card .nm{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.22}
.card .pr{display:block;margin-top:4px;font-size:15px;font-weight:650;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.card .step{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 10px}
.card .step button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);font-size:24px;font-weight:700}
.card .step button:disabled{opacity:.35}
.card .step .n{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.card.open .ph{font-size:52px}
.card.off{opacity:.45}
.cards-empty{grid-column:1 / -1;margin:0;padding:28px 10px;text-align:center;color:var(--fg-dim);line-height:1.5}

/* ---------- order ---------- */
.order{background:var(--panel);color:var(--panel-fg);display:flex;flex-direction:column;min-height:0}
.order h2{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px;font-size:18px;border-bottom:1px solid var(--line-panel)}
.order .count{font-size:13px;font-weight:600;color:var(--panel-dim)}
.oclose{display:none;margin-left:auto;min-height:44px;padding:0 12px;border:1px solid var(--line-panel);border-radius:10px;font-size:14px}
.lines{flex:1;overflow-y:auto;min-height:0;padding:6px 12px}
.line{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line-panel)}
.line .ln{font-weight:650;overflow-wrap:anywhere}
.line .la{font-variant-numeric:tabular-nums;font-weight:700;min-width:70px;text-align:right}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line-panel);font-size:20px;font-weight:700}
.stepper .n{min-width:28px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.emptyline{padding:28px 10px;text-align:center;color:var(--panel-dim);line-height:1.5}
.totals{padding:10px 16px;border-top:1px solid var(--line-panel)}
.trow{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.trow.disc{color:var(--accent-on-panel)}
.trow.grand{font-size:22px;font-weight:800;padding-top:6px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(12px + var(--safe-b))}
.btn{min-height:52px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.btn.wide{grid-column:1 / -1}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-pay{background:var(--accent);color:var(--on-accent)}
.btn-cash{background:var(--cash);color:#fff}
.btn-cdc{background:var(--cdc);color:#fff}
.btn-card{background:var(--card);color:#fff}
.btn-ghost{border:1px solid currentColor;color:inherit;background:transparent}
.btn-danger{background:var(--danger);color:#fff}
.obar{display:none}

/* ---------- dialogs ---------- */
dialog{border:0;padding:0;border-radius:18px;background:var(--panel);color:var(--panel-fg);width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
dialog.wide{width:min(860px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog > header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-panel);position:sticky;top:0;background:var(--panel);z-index:1}
dialog h3{margin:0;font-size:19px;flex:1}
.x{width:44px;height:44px;border-radius:10px;font-size:26px;line-height:1}
.sbody{padding:14px 16px}
.sfoot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 16px}
.sfoot.one{grid-template-columns:1fr}
.lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-dim);margin-top:8px}
.big{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.note{color:var(--panel-dim);text-align:center;line-height:1.55}
.change{min-height:26px;font-size:18px;font-weight:750;color:var(--good)}
.change.short{color:var(--danger)}
.field{width:100%;min-height:48px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-panel);background:#fff;color:#111;user-select:text;-webkit-user-select:text}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pad button{min-height:56px;border-radius:12px;border:1px solid var(--line-panel);font-size:22px;font-weight:700}
.quick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.quick button{min-height:48px;border-radius:12px;border:1px solid var(--line-panel);font-weight:700}
.pay{text-align:center}
.pay .amt{font-size:38px;font-weight:850;font-variant-numeric:tabular-nums}
.pay .meta{font:600 13px/1.4 var(--mono);color:var(--panel-dim)}
.qrwrap{display:flex;justify-content:center;margin:12px auto;max-width:100%}
.qrwrap canvas{max-width:min(320px,100%);height:auto!important;background:#fff;border-radius:8px;padding:6px}
.qrwrap.small canvas{max-width:min(240px,100%)}
.paylogo{font-weight:750}
.paysub{font-size:14px;color:var(--panel-dim);line-height:1.5}
.changebar{margin:8px auto;padding:10px 14px;border-radius:12px;background:var(--good);color:#fff;font-size:20px;font-weight:800;display:inline-block}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.stat{padding:12px;border-radius:12px;border:1px solid var(--line-panel)}
.stat .sv{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.stat .sl{font-size:12px;color:var(--panel-dim);font-weight:700}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
table.t th,table.t td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-panel);vertical-align:middle}
table.t .n{text-align:right}
table.t tr.void td{text-decoration:line-through;color:var(--panel-dim)}
table.t button{min-height:44px;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line-panel);font-weight:650;font-size:13px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line-panel)}
.tag.wait{background:#fff2c7;color:#5c4400}
.tag.bad{background:#ffd9d4;color:#7a1610}
.dtitle{font-weight:800;margin:14px 0 6px}
.credit{margin:0;padding:0 16px 14px;font-size:12.5px;color:var(--panel-dim);text-align:center}
.setrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.setrow label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line-panel);border-radius:10px}
fieldset{border:0;padding:0;margin:10px 0}
legend{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-dim);padding:0}
.pinview{font:800 30px/1 var(--mono);letter-spacing:.3em;text-align:center;min-height:40px;margin:8px 0}
.err{color:var(--danger);font-weight:700;min-height:22px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:12px;font-weight:650;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:calc(100vw - 32px)}
.toast.on{opacity:1}

/* ---------- 1.1.0: Cash first, the lock screen, the Today sheet's periods ---------- */
.actions .btn-cash.first{min-height:64px;font-size:18px}
/* 1.3.0: the venue's non-cash methods follow Cash in its list order (pm1 to pm3, set by till.js); with three on,
   the third takes its own full row in portrait and on phones. */
.actions.m3 .pm3{grid-column:1 / -1}
.lockscr{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + var(--safe-t));background:var(--bg);color:var(--fg);overflow-y:auto}
.lbox{width:min(420px,100%);text-align:center}
.lbox .mark{width:56px;height:56px;margin:0 auto 10px;display:block}
.lbox h2{margin:0 0 10px;font-size:22px}
.lbox p{margin:0 0 12px;line-height:1.5;color:var(--fg-dim)}
.lbox .btn{width:100%;margin-top:10px;border:1px solid var(--line)}
.lbox .field.pin{width:100%;min-height:56px;font-size:28px;letter-spacing:.5em;text-align:center;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg)}
.lbox .lbl{color:var(--fg-dim);text-align:left}
.lbox .lmsg{min-height:24px;margin:8px 0 0;font-weight:700;color:var(--fg)}
.lbox .lmsg.bad,.lbox .lnote{color:#ff9b91}
.dper{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0}
.dper button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-panel);font-size:14px;font-weight:700}
.dper button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pasof{margin:0 0 12px;font-weight:700}
.pasof.bad{color:var(--danger)}
.dmath{margin:0 0 10px;color:var(--panel-dim);line-height:1.5}
.ptag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid var(--line-panel);color:var(--panel-dim)}
.rekey{margin-top:6px}

@media (max-width:1100px){ main{grid-template-columns:1fr 330px} }
@media (max-width:760px){
  main{grid-template-columns:1fr}
  .ref,.brand .name{display:none}
  .bar{gap:8px;padding-left:10px;padding-right:10px}
  .hbtn{padding:0 12px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:10px}
  .card .nm{font-size:16px}
  .order{position:fixed;inset:0;z-index:30;transform:translateY(100%);transition:transform .22s ease;padding-top:var(--safe-t)}
  .order.open{transform:none}
  .oclose{display:inline-flex;align-items:center}
  .obar{display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + var(--safe-b));background:var(--panel);color:var(--panel-fg);border-top:1px solid var(--line-panel)}
  .obar b{margin-left:auto;font-size:19px;font-variant-numeric:tabular-nums}
  .obar button{min-height:48px;padding:0 20px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:800}
  .quick{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* ---------- receipt page ---------- */
body.receipt{background:var(--panel);color:var(--panel-fg);user-select:text}
.r{max-width:440px;margin:0 auto;padding:28px 20px 40px}
.r .top{text-align:center;padding-bottom:14px;border-bottom:1px dashed var(--line-panel)}
.r .top img{width:56px;height:56px}
.r .top .alt{font-family:var(--font-alt);font-size:22px;color:var(--accent-on-panel)}
.r .top .name{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:.04em}
.r .top .where{font-size:13.5px;color:var(--panel-dim);margin-top:6px;line-height:1.5}
.r .meta{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line-panel)}
.r .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--panel-dim)}
.r .v{font-weight:700;font-variant-numeric:tabular-nums}
.r .right{text-align:right}
.r .it{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-panel)}
.r .it .nm b{display:block}
.r .it .nm i{display:block;font-style:normal;font-family:var(--font-alt);color:var(--panel-dim)}
.r .it .nm s{display:block;text-decoration:none;font-size:13px;color:var(--panel-dim)}
.r .amt,.r .qty{font-variant-numeric:tabular-nums;font-weight:700}
.r .sums{padding:10px 0}
.r .sum,.r .grand{display:flex;justify-content:space-between;padding:3px 0;font-variant-numeric:tabular-nums}
.r .grand{font-size:22px;font-weight:850}
.r .paid{display:flex;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--line-panel);font-weight:700}
.r .foot{text-align:center;color:var(--panel-dim);font-size:14px;line-height:1.6;margin-top:14px}
.r .thanks{font-weight:800;color:var(--panel-fg);margin-bottom:6px}
.r .fine{margin-top:10px;font-size:12.5px}
.r .bad h1{font-size:20px}

/* ---------- owner screen ---------- */
body.owner{background:var(--panel);color:var(--panel-fg)}
.owner .wrap{max-width:1100px;margin:0 auto;padding:16px}
.owner .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-panel)}
.owner .top h1{margin:0;font-size:20px;flex:1}
.owner nav{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.owner nav button{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line-panel);font-weight:700}
.owner nav button[aria-current="page"]{background:var(--panel-fg);color:var(--panel)}
.owner .card2{border:1px solid var(--line-panel);border-radius:14px;padding:14px;margin-bottom:14px;background:rgba(255,255,255,.5)}
.owner .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.owner input[type=date],.owner select,.owner input.money,.owner input.txt{min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--line-panel);background:#fff;color:#111}
.owner input.money{width:110px}
.owner .login{max-width:380px;margin:40px auto}

/* ---------- 1.2.0: CDC vouchers, the Today day picker, the PIN void sheet ---------- */
.vouchers{display:grid;gap:8px;margin:8px 0}
.vrow{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px}
.vrow button{min-height:56px;border-radius:12px;border:1px solid var(--line-panel);font-size:20px;font-weight:800}
.vrow .vadd{padding:0 18px;background:var(--cdc);color:#fff;border-color:var(--cdc)}
.vrow button:disabled{opacity:.35}
.vrow .vn{font-weight:750;font-variant-numeric:tabular-nums}
.dayswitch{display:flex;align-items:center;gap:10px;padding:10px 16px 0}
.dayswitch .lbl{margin:0}
.dayswitch input{min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid var(--line-panel);background:#fff;color:#111}
.tscroll{overflow-x:auto;max-width:100%}
.ptag.bad{color:var(--danger);border-color:var(--danger)}
#dayFoot{grid-template-columns:1fr 1fr}
#dayFoot:has(#dayPrint[hidden]){grid-template-columns:1fr}
.pad.four{grid-template-columns:repeat(4,1fr)}
.pad.four button{min-height:64px}
.pad .w2{grid-column:span 2}
.btn.short{background:var(--danger)!important;color:#fff;opacity:1}
@media (max-width:600px){
  table.t.sales thead{display:none}
  table.t.sales tr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;padding:8px 0;border-bottom:1px solid var(--line-panel)}
  table.t.sales td{border:0;padding:2px 4px}
  table.t.sales td:nth-child(6),table.t.sales td:nth-child(7){grid-column:span 1}
  table.t.sales td button{width:100%}
}

/* ---------- 1.2.0: layout option B (landscape, at least 1000 px wide) ----------
   One primary slot: Cash's 420 x 84 rectangle, centred, 10 px from the bottom. Complete sale, Payment
   received, the CDC button, Apply, New order, Void (PIN) and Unlock take exactly that spot in turn. The
   busy sheets rise from the bar with their keys right above the slot. Portrait and phones are unchanged. */
@media (min-width:1000px) and (orientation:landscape){
  :root{--slot-w:420px;--slot-h:84px;--slot-b:10px;--bar-h:104px}
  .app{padding-bottom:calc(var(--bar-h) + var(--safe-b))}
  .actions{position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--bar-h) + var(--safe-b));padding:10px 16px calc(10px + var(--safe-b));
    display:grid;grid-template-columns:1fr 1fr calc(var(--slot-w) + 24px) 1fr 1fr;gap:10px;align-items:center;background:var(--panel);border-top:1px solid var(--line-panel)}
  .actions .btn{min-height:64px;grid-row:1}
  .actions #btnDisc{grid-column:1}
  .actions #btnClear{grid-column:2}
  /* 1.3.0: the non-cash methods right of the slot in the venue's list order; with three on, a sixth column and the
     left pair widened (1.5fr each) so the bar stays symmetric and the slot column stays centred under Cash. */
  .actions .pm1{grid-column:4}
  .actions .pm2{grid-column:5}
  .actions.m3{grid-template-columns:1.5fr 1.5fr calc(var(--slot-w) + 24px) 1fr 1fr 1fr}
  .actions.m3 .pm3{grid-column:6}
  .actions .btn-cash.first,.slot{position:fixed!important;left:50%!important;bottom:calc(var(--slot-b) + var(--safe-b))!important;transform:translateX(-50%);
    width:var(--slot-w)!important;height:var(--slot-h)!important;min-height:var(--slot-h)!important;margin:0!important;font-size:21px;z-index:25;grid-column:auto}
  dialog:not(.wide):not(#dSetup){margin:auto auto 0;max-height:100dvh;border-radius:18px 18px 0 0;width:min(560px,100vw);padding-bottom:calc(var(--bar-h) + var(--safe-b))}
  dialog:not(.wide):not(#dSetup) .sfoot{grid-template-columns:1fr}
  dialog:not(.wide):not(#dSetup) .sfoot:has(> :nth-child(2)){grid-template-columns:1fr}
  #dPay .qrwrap canvas{max-width:300px}
  #dDone .qrwrap.small canvas{max-width:200px}
  .toast{left:16px;top:calc(12px + var(--safe-t));bottom:auto;transform:none}
  .lockscr{padding-bottom:calc(var(--bar-h) + 12px)}
  .lockpad{margin-top:10px}
  .lockpad button{background:var(--bg-2);color:var(--fg);border-color:var(--line)}
}
@media (min-width:1000px) and (orientation:landscape) and (max-height:640px){
  dialog:not(.wide):not(#dSetup){width:min(900px,100vw);height:100dvh}
  #dCash .sbody,#dCdc .sbody{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  #dCash .sbody .pad,#dCash .sbody .quick{grid-column:2}
  #dCash .sbody .pad{grid-row:1 / span 6}
  #dPay .qrwrap canvas{max-width:256px}
}