:root {
  --k-ground: #0c0e13;     /* the board behind the paper tickets */
  --k-bar: #14161b;        /* the one bar of chrome, and the strips that match it */
  --k-panel: #14171d;      /* the bridge and the prep strip */
  --k-tile: #171a21;       /* a station or a state button, unpicked */
  --k-control: #1a1d24;    /* a round control: filter, sound, push */
  --k-lane: #101218;       /* a lane column */
  --k-track: #191c23;      /* the scrollbar track */
  --k-oncontrast: #0d0f14; /* ink on a picked state button */
  --k-edge: #2a2e38;       /* the ordinary border */
  --k-edge-2: #23262e;     /* the bar and its strips */
  --k-edge-3: #1e222b;     /* a lane head */
  --k-chipedge: #3a3f4c;   /* an unpicked filter chip */
  --k-thumb: #3a4150;      /* the scrollbar thumb */
  --k-thumb-2: #4a5364;    /* the scrollbar thumb, hovered */
  --k-ink: #c8ceda;        /* ordinary chrome text */
  --k-ink-2: #cdd3dd;      /* chrome text a shade brighter */
  --k-ink-3: #e8eaee;      /* the brightest chrome text */
  --k-muted: #8b93a1;      /* a label beside a control */
  --k-muted-2: #8b90a0;    /* a control that is off */
  --k-dim: #6c7482;        /* an empty lane */
  --k-dim-2: #6b7080;      /* a control that cannot work here */
  --k-nav: #14161c;        /* the bottom nav, shared with the till */
  /* A ticket's own edge. On a near-black board a white card separates itself
     and this is barely visible; on a light board it is the only thing holding
     the card off the ground, which is why it is a token and not a constant. */
  --k-card-edge: #dfe3ea;
  --k-card-shadow: none;
  /* The scaled design stage the KDS and the register both live on, and the
     letterbox around it. Shared with the till, which is why they are tokens
     with the till's own values as the default rather than anything new. */
  --k-stage: #0c0e12;
  --k-stage-ink: #e8eaee;
  --k-letterbox: #000;
}
body[data-kds-theme="light"], .kexample[data-kds-theme="light"] {
  --k-ground: #dfe3e9;     /* the board — grey, so the paper tickets read as paper */
  --k-bar: #ffffff;        /* the one bar of chrome */
  --k-panel: #f4f6f9;      /* the bridge and the prep strip */
  --k-tile: #ffffff;       /* a station or state button, unpicked */
  --k-control: #ffffff;    /* a round control: filter, sound, push */
  --k-lane: #eef1f5;       /* a lane column */
  --k-track: #d7dbe2;      /* the scrollbar track */
  --k-oncontrast: #ffffff; /* ink on a picked state button — the role flips here */
  --k-edge: #ccd2dc;       /* the ordinary border */
  --k-edge-2: #dbe0e8;     /* the bar and its strips */
  --k-edge-3: #e2e6ec;     /* a lane head */
  --k-chipedge: #b9c1cd;   /* an unpicked filter chip */
  --k-thumb: #aeb6c2;      /* the scrollbar thumb */
  --k-thumb-2: #8f98a6;    /* the scrollbar thumb, hovered */
  --k-ink: #3d4351;        /* ordinary chrome text */
  --k-ink-2: #333947;      /* chrome text a shade darker */
  --k-ink-3: #1c2029;      /* the strongest chrome text */
  --k-muted: #5b6472;      /* a label beside a control */
  --k-muted-2: #5f6875;    /* a control that is off */
  --k-dim: #7b8492;        /* an empty lane */
  --k-dim-2: #7f8794;      /* a control that cannot work here */
  --k-nav: #ffffff;        /* the bottom nav */
  /* The card needs a real edge, and a shadow it never needed on the dark board. */
  --k-card-edge: #b9c2cf;
  --k-card-shadow: 0 1px 2px rgba(16, 22, 34, .08), 0 2px 8px rgba(16, 22, 34, .06);
  /* The stage follows the board, or a light board sits in a black picture
     frame — which is what the first cut of this looked like. */
  --k-stage: #dfe3e9;
  --k-stage-ink: #1c2029;
  --k-letterbox: #c9cfd8;
}
:root {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1e222b;
  --border: #2a2f3a;
  --text: #e6e9ef;
  --muted: #9aa3b2;
  --primary: #4f8cff;
  --primary-ink: #101418;   /* picked to read on --primary, not fixed white — see branding.js inkOn() */
  --green: #3ecf8e;
  --amber: #f5a623;
  /* The note pill on a ticket. Dark enough to pass AA on white (6.33) and on
     its own pale ground (5.78) — both measured, not eyeballed. */
  --tk-note-ink: #8f5000;
  --tk-note-bg: #fff3e0;
  --red: #ff5c5c;
  --radius: 10px;
  /* The till: one radius for every box, one for small badges. Pills read as
     a different design language sitting next to square tiles. */
  --pos-r: 10px;
  --pos-r-s: 6px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--primary); }
#app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.brand-name { font-weight: 700; font-size: 16px; }
.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}
.nav-i { flex: 0 0 18px; opacity: .85; }
.nav a.active .nav-i { opacity: 1; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--primary); color: var(--primary-ink); }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px;
  padding-top: 8px; border-top: 1px solid var(--border); }
.side-bottom .ctx-one { margin: 0; }
.side-settings { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; }
.side-settings:hover, .side-settings.active { background: rgba(255,255,255,.06); color: var(--text); }
.sidebar-foot { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; padding: 4px 10px 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--red); }
.content { flex: 1; min-width: 0; padding: 26px 30px; }
.loading { color: var(--muted); padding: 40px; text-align: center; }
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Center the label horizontally too — a button wider than its text (the
     search popup's min-width OK) left-aligned it (QA round 2, finding 37).
     Buttons sized to their content don't move. */
  justify-content: center;
  gap: 6px;
}
.btn:hover { border-color: #3a4150; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.05); }
.btn:disabled:hover { filter: none; border-color: var(--line, #2b3040); }
.btn.danger { color: var(--red); border-color: #4a2b2f; }
.btn.danger:hover { background: #2a1a1c; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 12px; }
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-bottom: 22px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 160px; }
@media (max-width: 640px) {
.toolbar .grow { flex-basis: 100%; min-width: 100%; }
}
.toolbar select { width: auto; min-width: 140px; max-width: 100%; }
select option { color: var(--text); background: var(--surface-2); }
.field-err { color: #c8382f; font-size: 12.5px; margin: 6px 0 0; }
input.invalid, textarea.invalid, select.invalid { border-color: #c8382f; }
label .req { color: #c8382f; }
input, select, textarea, option, optgroup {
  color-scheme: dark;
}
input, select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}
input[type=checkbox], input[type=radio] { width: auto; padding: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; cursor: default; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.muted { color: var(--muted); }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.green { background: rgba(62,207,142,.15); color: var(--green); }
.badge.amber { background: rgba(245,166,35,.15); color: var(--amber); }
.badge.red { background: rgba(255,92,92,.15); color: var(--red); }
.badge.grey { background: rgba(154,163,178,.15); color: var(--muted); }
.badge.blue { background: rgba(79,140,255,.15); color: var(--primary); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 70; overflow: auto; overscroll-behavior: contain; }
html.modal-open, html.modal-open body { overflow: hidden; }
.modal { background: var(--mat-thick, var(--surface)); border: 1px solid var(--border);
  border-radius: 14px; width: 100%; max-width: 560px; box-shadow: var(--mat-shadow, var(--shadow));
  -webkit-backdrop-filter: blur(var(--mat-blur, 20px)) saturate(var(--mat-sat, 180%));
  backdrop-filter: blur(var(--mat-blur, 20px)) saturate(var(--mat-sat, 180%)); }
@supports not (backdrop-filter: blur(1px)) {
.modal { background: var(--surface); }
}
.modal.wide { max-width: 760px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; overscroll-behavior: contain; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.close-x { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 100; }
.toast { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--primary); padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); min-width: 220px; animation: slideIn .18s ease; }
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar > span { display: block; height: 100%; background: var(--primary); }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.mono { font-variant-numeric: tabular-nums; }
.auth-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); z-index: 100; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs button { background: none; border: none; color: var(--muted); padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; letter-spacing: .03em; text-transform: uppercase; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.mobile-nav { display: none; }
@media (max-width: 860px) {
.sidebar { position: fixed; left: -260px; top: 0; bottom: 0; z-index: 60; width: 240px; transition: left .2s ease; }
.sidebar.open { left: 0; box-shadow: 0 0 50px rgba(0,0,0,.65); }
.sidebar.rail { width: 240px; flex-basis: 240px; padding: 18px 14px; }
.sidebar.rail .brand-logo, .sidebar.rail .nav a > span, .sidebar.rail .ctx-one-txt, .sidebar.rail .ctx-code, .sidebar.rail .side-settings > span, .sidebar.rail .sidebar-foot span:not(.dot) { display: revert; }
.content { padding: 16px 14px 84px; }
.mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--surface); border-top: 1px solid var(--border); z-index: 55; padding-bottom: env(safe-area-inset-bottom); }
.mobile-nav a, .mobile-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--muted); text-align: center; padding: 8px 0 9px; font-size: 19px; text-decoration: none; cursor: pointer; }
.mobile-nav span { display: block; font-size: 10px; }
.mobile-nav .active { color: var(--primary); }
.modal { max-width: 96vw; }
.grid {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
    /* Each card is as tall as what is in it, rather than stretching to match
       whichever one in the row has the most to say. */
    align-items: start; }
.grid > * { min-width: 0; }
.card table { display: block; overflow-x: auto; }
}
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.delta { font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 6px; }
.delta.up { color: var(--green); background: rgba(62,207,142,.12); }
.delta.down { color: var(--red); background: rgba(255,92,92,.12); }
@media (max-width: 1100px) {
.grid[style*="2fr 2fr 1fr"] { grid-template-columns: 1fr !important; }
}
.chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--muted); }
.chip strong { color: var(--text); }
.stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.stepper button { background: var(--surface-2); border: none; color: var(--text); width: 34px; height: 32px; font-size: 16px; cursor: pointer; }
.stepper span { min-width: 40px; text-align: center; font-weight: 700; }
.brand-name { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
.chip { background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--primary); color: var(--text); }
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.hub-qty { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.hub-qty:focus { border-color: var(--primary); outline: none; }
.sell-line-name { flex: 1; }
.auth-screen { position: fixed; inset: 0; z-index: 100; overflow: auto; background: #f2f2f3; color: #18181b; display: block; padding: 0; }
.pos-root { position: fixed; inset: 0; z-index: 40; background: var(--k-letterbox); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pos-stage { flex: none; width: 1366px; height: 1000px; background: var(--k-stage); color: var(--k-stage-ink); display: flex; flex-direction: column; transform-origin: center; font-size: 15px; }
.pos-top { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; height: 58px; background: var(--k-nav); border-bottom: 1px solid var(--k-edge-2); flex: 0 0 58px; }
.pos-logout { background: none; border: none; color: #ff5c5c; font-size: 16px; cursor: pointer; }
.pos-top-name { font-weight: 700; font-size: 16px; }
.pos-top-icons button { background: none; border: none; color: var(--k-ink); font-size: 19px; cursor: pointer; margin-left: 14px; }
.pos-main { flex: 1; display: flex; min-height: 0; }
.pos-nav { display: flex; height: 62px; flex: 0 0 62px; background: var(--k-nav); border-top: 1px solid var(--k-edge-2); }
.pos-nav button { flex: 1; background: none; border: none; color: var(--k-muted); font-size: 19px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pos-nav button span { font-size: 12px; }
.pos-nav button.active { color: #4f8cff; }
.pos-left { width: 470px; flex: 0 0 470px; display: flex; flex-direction: column; background: #101218; border-right: 1px solid #23262e; }
.pos-order-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 6px; font-size: 17px; }
.pos-linkbtn { background: none; border: none; color: #4f8cff; font-size: 15px; cursor: pointer; }
.pos-tagrow { display: flex; gap: 8px; padding: 4px 18px 10px; border-bottom: 1px solid #23262e; }
.pos-chip { background: #1a1d24; border: 1px solid #2a2e38; border-radius: var(--pos-r-s); padding: 5px 10px; font-size: 12.5px; color: #aeb4bf; }
.pos-lines { flex: 1; overflow-y: auto; min-height: 0; }
.pos-line { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #1c1f27; font-size: 15px; }
.pos-line-qty { width: 20px; font-weight: 700; }
.pos-line-name { flex: 1; }
.pos-line-note { color: #8b93a1; font-size: 12px; margin-top: 2px; }
.pos-line-price { font-variant-numeric: tabular-nums; }
.pos-course-band { padding: 8px 18px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #8b93a1; }
.pos-course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 0 2px; }
.pos-course-card { padding: 16px 10px; border-radius: var(--pos-r); background: #1f232c;
  color: #e8eaee; border: 1px solid #2a2e38; cursor: pointer; font-size: 16px; font-weight: 600; }
.pos-course-card:active { background: #3b6ff5; border-color: #3b6ff5; color: #fff; }
.pos-empty { color: #6c7482; text-align: center; padding: 40px 12px; }
.pos-upsell { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 18px; border-top: 1px solid #23262e; overflow: hidden; flex-wrap: nowrap; white-space: nowrap; }
.pos-upsell-label { color: #8b93a1; font-size: 12px; flex: none; }
.pos-upsell-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #1c1f27; border: 1px solid #2a2e38; color: #e8eaee; font-size: 12.5px; cursor: pointer; flex: none; }
.pos-upsell-chip em { font-style: normal; color: #8b93a1; font-variant-numeric: tabular-nums; }
.pos-upsell-chip:active { background: #262b36; }
.pos-totals { border-top: 1px solid #23262e; padding: 10px 18px; }
.pos-totals > div { display: flex; justify-content: space-between; font-size: 17px; }
.pos-vatline { color: #8b93a1; font-size: 13px !important; margin-top: 2px; }
.pos-keypad-hint { display: flex; justify-content: space-between; background: #14161c; color: #8b93a1; font-size: 12.5px; padding: 7px 18px; border-top: 1px solid #23262e; }
.pos-keypad-hint strong { color: #4f8cff; }
.pos-keypad { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 7px; padding: 10px 14px 14px; }
.pos-keypad button { height: 56px; border-radius: var(--pos-r); border: none; background: #1a1d24; color: #e8eaee; font-size: 20px; cursor: pointer; }
.pos-keypad button:active { background: #262a34; }
.pos-key-c { color: #ff5c5c !important; }
.pos-side { font-size: 15px !important; background: #1f232c !important; color: #cdd3dd !important; }
.pos-side-blue { background: #3b6ff5 !important; color: #fff !important; }
.pos-side-green { background: #1f9d61 !important; color: #fff !important; font-size: 18px !important; }
.pos-qa-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pos-qa-chip { background: #1a1d24; border: 1px solid #2a2e38; color: #cdd3dd;
  border-radius: 999px; padding: 8px 15px; font-size: 13.5px; cursor: pointer; }
.pos-qa-chip.on { background: #3b6ff5; border-color: #3b6ff5; color: #fff; }
.pos-qa-chip.gone { opacity: .5; cursor: not-allowed; }
.pos-rail { width: 200px; flex: 0 0 200px; overflow-y: auto; background: #0e1015; border-right: 1px solid #23262e; display: flex; flex-direction: column; --pos-sc-bg: #0e1015; }
.pos-cat { border: none; border-left: 5px solid transparent; background: transparent; color: #cdd3dd; min-height: 64px; padding: 8px 10px; font-size: 13.5px; cursor: pointer; text-align: center; border-bottom: 1px solid #1c1f27;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.pos-cat.on { color: #fff; font-weight: 700; }
.pos-cat-img {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px;
  background-size: cover; background-position: center;
}
.pos-right { flex: 1; display: flex; flex-direction: column; background: #07080b; min-width: 0; }
.pos-grid-head { text-align: center; font-weight: 700; padding: 12px; font-size: 16px; background: #000; }
.pos-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; padding: 14px; align-content: start;
  /* A long group scrolls here, and it says so — a themed scrollbar and a
     scroll-shadow at the fold (QA round 2, finding 32; the register scroll
     build #32/#34/#36 gave the same to the rail, Past Orders and the Live
     board — see the shared `.pos-stage .pos-grid …` rule just below). */
  --pos-sc-bg: #07080b; }
.pos-stage .pos-grid, .pos-stage .pos-rail, .pos-stage #tx-rows, .pos-stage .pos-rcpt-paper {
  scrollbar-width: thin;
  scrollbar-color: #4a5262 transparent;
  background-image:
    linear-gradient(var(--pos-sc-bg, #0c0e12) 32%, rgba(0, 0, 0, 0)),
    linear-gradient(rgba(0, 0, 0, 0), var(--pos-sc-bg, #0c0e12) 68%),
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
  background-position: top, bottom, top, bottom;
  background-size: 100% 30px, 100% 30px, 100% 15px, 100% 15px;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.pos-stage .pos-grid::-webkit-scrollbar, .pos-stage .pos-rail::-webkit-scrollbar, .pos-stage #tx-rows::-webkit-scrollbar, .pos-stage .pos-rcpt-paper::-webkit-scrollbar { width: 10px; height: 10px; }
.pos-stage .pos-grid::-webkit-scrollbar-track, .pos-stage .pos-rail::-webkit-scrollbar-track, .pos-stage #tx-rows::-webkit-scrollbar-track, .pos-stage .pos-rcpt-paper::-webkit-scrollbar-track { background: transparent; }
.pos-stage .pos-grid::-webkit-scrollbar-thumb, .pos-stage .pos-rail::-webkit-scrollbar-thumb, .pos-stage #tx-rows::-webkit-scrollbar-thumb, .pos-stage .pos-rcpt-paper::-webkit-scrollbar-thumb {
  background: #4a5262; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box;
}
.pos-stage .pos-grid::-webkit-scrollbar-thumb:hover, .pos-stage .pos-rail::-webkit-scrollbar-thumb:hover, .pos-stage #tx-rows::-webkit-scrollbar-thumb:hover, .pos-stage .pos-rcpt-paper::-webkit-scrollbar-thumb:hover { background: #5a6474; }
.pos-item { height: 140px; background: #191c23; border: none; border-bottom: 5px solid #3b6ff5; border-radius: var(--pos-r); color: #e8eaee; font-size: 16.5px; cursor: pointer; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pos-item:active { background: #232733; }
.pos-item em { color: #8b93a1; font-size: 12px; font-style: normal; }
.pos-paybar { height: 66px; flex: 0 0 66px; margin: 0 12px 12px; border: none; border-radius: var(--pos-r); background: #1f9d61; color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; }
.pos-paybar:disabled { opacity: .45; cursor: default; }
.pos-paywrap { position: absolute; inset: 0; background: #0c0e12; display: flex; flex-direction: column; z-index: 5; }
.pos-root .pos-stage { position: relative; }
.pos-paytop { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 22px; background: #14161c; border-bottom: 1px solid #23262e; }
.pos-paycols { flex: 1; display: flex; gap: 14px; padding: 16px; min-height: 0; }
.pos-paycol { flex: 1; background: #101218; border-radius: var(--pos-r); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pos-paycol h3 { margin: 0; font-size: 18px; }
.pos-paysub { color: #8b93a1; margin: 0 0 8px; font-size: 13px; }
.pos-paycat { color: #8b93a1; font-size: 13px; margin-top: 8px; }
.pos-method { display: flex; align-items: center; gap: 10px; background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r); padding: 15px 14px; font-size: 16px; cursor: pointer; text-align: left; }
.pos-method.on { background: #3b6ff5; border-color: #3b6ff5; color: #fff; }
.pos-method:disabled { opacity: .45; cursor: default; }
.pos-method em { margin-left: auto; font-size: 12px; font-style: normal; color: inherit; opacity: .8; }
.pos-payitems { flex: 1; overflow-y: auto; }
.pos-payline { display: flex; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #1c1f27; }
.pos-payline span:nth-child(2) { flex: 1; }
.pos-paytotal { display: flex; justify-content: space-between; padding-top: 10px; font-size: 17px; }
.pos-paytotal-part { border-top: 1px solid #2a2e38; margin-top: 8px; padding-top: 8px;
  font-size: 15px; color: #4f8cff; }
.pos-paytotal-part strong { color: #4f8cff; }
.pos-payrow { display: flex; justify-content: space-between; align-items: center; background: #1a1d24; border-radius: var(--pos-r); padding: 13px 14px; font-size: 15px; }
.pos-payrow-cards .kset-cards { justify-content: flex-start; margin-top: 10px; }
.pos-payrow-note { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; }
.pos-payrow .pos-toggle[disabled] { opacity: .55; cursor: not-allowed; }
.pos-payrow .pos-setic { flex: none; width: 26px; display: flex; align-items: center; color: var(--muted); align-self: flex-start; margin-top: 2px; }
.pos-payrow .pos-setmain { flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.pos-payrow-t { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; }
.pos-paycard { background: #1a1d24; border-radius: var(--pos-r); padding: 13px 14px; }
.pos-paycard input { width: 100%; background: #10131a; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r); padding: 9px 10px; font-size: 15px; }
.pos-flabel { display: block; color: #8b93a1; font-size: 12.5px; margin: 8px 0 4px; }
.pos-vline { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.pos-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.pos-quick button { background: #262a34; border: none; color: #e8eaee; border-radius: var(--pos-r); padding: 14px 0; font-size: 16px; cursor: pointer; }
.pos-quick button.on { background: #3b6ff5; color: #fff; }
.pos-toggle { width: 46px; height: 26px; border-radius: var(--pos-r); background: #2a2e38; border: none; position: relative; cursor: pointer; }
.pos-toggle i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.pos-toggle.on { background: #3b6ff5; }
.pos-toggle.on i { left: 23px; }
.pos-paygo { height: 62px; border: none; border-radius: var(--pos-r); background: #1f9d61; color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; margin-top: auto; }
.pos-paygo:disabled { opacity: .45; }
.pos-paid { text-align: center; padding: 6px 0 4px; }
.pos-paid-tick { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; background: #16a34a; color: #fff;
  animation: pos-paid-pop .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pos-paid-pop { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
.pos-paid-tick { animation: none }
}
.pos-paid-said { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pos-paid-sub { font-size: 14px; color: var(--muted, #6b7280); margin-top: 5px; }
.pos-paid-change { margin: 18px auto 0; padding: 14px 22px; border-radius: 14px;
  background: rgba(22,163,74,.12); display: inline-flex; flex-direction: column; gap: 2px; }
.pos-paid-change span { font-size: 13px; font-weight: 600; color: var(--muted, #6b7280);
  text-transform: uppercase; letter-spacing: .06em; }
.pos-paid-change strong { font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pos-paid.has-change .pos-paid-tick { width: 40px; height: 40px; margin-bottom: 10px; }
.pos-paid.has-change .pos-paid-said { font-size: 17px; }
.pos-paid-voucher { margin-top: 12px; font-size: 13.5px; color: var(--muted, #6b7280); }
.pos-paid-rcpt { margin-top: 16px; }
.pos-paid-rcpt summary { cursor: pointer; font-size: 13.5px; color: var(--muted, #6b7280);
  text-align: center; padding: 6px; }
.pos-paid-rcpt[open] summary { margin-bottom: 8px; }
.pos-receipt { background: #d8d5c8; color: #23241f; border-radius: var(--pos-r); padding: 18px 16px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow-x: auto; margin: 0 auto; max-width: 380px; }
.pos-rcpts { flex: 1; display: flex; gap: 14px; padding: 16px; min-height: 0; width: 100%; }
.pos-rcpt-list { width: 46%; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.pos-rcpt-list input { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r); padding: 12px 14px; font-size: 14px; }
#rl-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.pos-rcpt-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: #171a21; border: 1px solid #23262e; border-left: 4px solid #3b6ff5; border-radius: var(--pos-r); padding: 10px 14px; color: #e8eaee; cursor: pointer; text-align: left; }
.pos-rcpt-row.void { opacity: .55; border-left-color: #ff5c5c; }
.pos-rcpt-ref { font-weight: 700; }
.pos-rcpt-meta { grid-row: 2; color: #8b93a1; font-size: 12px; }
.pos-rcpt-amt { grid-row: 1 / span 2; align-self: center; font-size: 16px; font-weight: 700; }
.pos-rcpt-amt em { color: #ff8a8a; font-size: 11px; font-style: normal; margin-left: 6px; }
.pos-rcpt-paper { flex: 1; overflow-y: auto; background: #101218; border-radius: var(--pos-r); padding: 22px; --pos-sc-bg: #101218; }
.pos-top-icons select { width: auto; background: var(--k-control); border: 1px solid var(--k-edge); color: var(--k-ink-2); border-radius: var(--pos-r); padding: 6px 8px; font-size: 13px; }
.pos-line-edit { background: none; border: none; color: #8b93a1; cursor: pointer; padding: 4px; }
.pos-line-edit:hover { color: #e8eaee; }
.pos-item { color: #e8eaee; position: relative; }
.pos-item:active { background: var(--p) !important; background-image: none !important; }
.pos-combo { flex: 1; display: flex; gap: 14px; padding: 16px; min-height: 0; }
.pos-combo-left { width: 400px; flex: 0 0 400px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.pos-combo-card { background: #101218; border-radius: var(--pos-r); padding: 14px 16px; }
.pos-combo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pos-combo-item { display: flex; justify-content: space-between; font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid #1c1f27; margin-bottom: 8px; }
.pos-slot { display: inline-block; border: none; border-radius: var(--pos-r-s); padding: 6px 12px; margin: 6px 0 2px; font-size: 13px; font-weight: 700; cursor: pointer; background: #b8842a; color: #fff; }
.pos-slot.done { background: #1f9d61; }
.pos-slot.live { outline: 2px solid #4f8cff; outline-offset: 2px; }
.pos-slot-val { color: #8b93a1; font-size: 13.5px; padding: 2px 2px 6px; }
.pos-slot-val em { color: #5f6b7a; font-style: normal; font-size: 12px; margin-left: 6px; }
.pos-combo-total { display: flex; justify-content: space-between; border-top: 1px dashed #2a2e38; padding-top: 8px; font-size: 15px; }
.pos-addmenu { border: 1px dashed #3b6ff5; background: transparent; color: #4f8cff; border-radius: var(--pos-r); padding: 14px; font-size: 15px; cursor: pointer; }
.pos-ticket { margin-top: auto; border: none; border-radius: var(--pos-r); background: #3b6ff5; color: #fff; padding: 18px; font-size: 17px; font-weight: 700; cursor: pointer; }
.pos-ticket:disabled { opacity: .45; }
.pos-combo-right { flex: 1; display: flex; flex-direction: column; background: #07080b; border-radius: var(--pos-r); overflow: hidden; min-width: 0; }
.pos-variant { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--pos-r); padding: 16px; font-size: 16px; cursor: pointer; margin-bottom: 8px; }
.pos-variant:hover { border-color: var(--primary); }
.pos-ic { display: inline-block; vertical-align: -4px; }
.pos-nav .pos-ic { vertical-align: 0; }
.pos-rcpt-tabs { display: flex; gap: 8px; }
.pos-rcpt-tabs button { flex: 1; background: #171a21; border: 1px solid #23262e; color: #8b93a1; border-radius: var(--pos-r); padding: 9px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pos-rcpt-tabs button.on { background: #1e2836; border-color: #3b6ff5; color: #9cbcff; }
.pos-rcpt-row { grid-template-columns: auto 1fr auto; }
.pos-rcpt-pay { grid-row: 1 / span 2; align-self: center; color: #8b93a1; display: flex; gap: 2px; }
.pos-rcpt-meta { grid-column: 2; }
.pos-ract-main { display: block; margin: 18px auto 0; border: none; border-radius: var(--pos-r); background: #3b6ff5; color: #fff; padding: 14px 34px; font-size: 16px; font-weight: 700; cursor: pointer; }
.pos-ract-sheet { display: flex; flex-direction: column; gap: 8px; }
.pos-ract { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--pos-r); padding: 12px 14px; font-size: 14.5px; cursor: pointer; }
.pos-ract:hover:not(:disabled) { border-color: var(--primary); }
.pos-ract:disabled { opacity: .45; cursor: default; }
.pos-ract .pos-ic { margin-top: 1px; flex: 0 0 auto; }
.pos-refline { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pos-refline input { width: 18px; height: 18px; }
.pos-refline span { flex: 1; }
.pos-set { flex: 1; display: flex; min-height: 0; width: 100%; }
.pos-set-rail { width: 250px; flex: 0 0 250px; background: #101218; border-right: 1px solid #1c1f27; overflow-y: auto; padding: 14px 0; }
.pos-set-rail button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; border-left: 3px solid transparent; color: #aab2bf; padding: 12px 18px; font-size: 14.5px; cursor: pointer; }
.pos-set-rail button .pos-ic { flex: none; opacity: .8; }
.pos-set-rail button.on .pos-ic { opacity: 1; }
.pos-set-rail button.on { background: #171d2a; border-left-color: #3b6ff5; color: #fff; font-weight: 600; }
.pos-set-body { flex: 1; overflow-y: auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 10px; max-width: 960px; }
.pos-set-body h3 { margin: 0; }
.pos-set-quick { display: flex; gap: 10px; }
.pos-set-quick button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #171a21; border: 1px solid #23262e; color: #e8eaee; border-radius: var(--pos-r); padding: 16px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pos-set-quick button:hover { border-color: #3b6ff5; }
.pos-status { border-radius: var(--pos-r-s); padding: 4px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pos-status.ok { background: rgba(31,157,97,.18); color: #4fd08a; }
.pos-status.off { background: rgba(139,147,161,.15); color: #8b93a1; }
.pos-support-phone { background: #101218; border: 1px solid #23262e; border-radius: var(--pos-r); padding: 16px 18px; text-align: center; }
.pos-support-phone a { display: block; color: #4f8cff; font-size: 26px; font-weight: 700; text-decoration: none; margin-top: 4px; }
.pos-qa { background: #101218; border: 1px solid #23262e; border-radius: var(--pos-r); padding: 0 14px; }
.pos-qa summary { padding: 12px 0; font-weight: 600; cursor: pointer; }
.pos-qa p { color: #aab2bf; margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }
[data-drag] { cursor: grab; }
[data-drag].dragging { opacity: .4; }
.mi-name { min-width: 0; overflow-wrap: anywhere; }
.mi-name .hint { margin: 2px 0 0; }
.pos-pace-say {
  margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #8b93a1;
  background: #14171d; border: 1px solid #23262e; border-left: 3px solid var(--green);
  border-radius: 8px; padding: 8px 10px;
}
.pos-pace-say b { color: #e8eaee; font-size: 15px; }
.kds-card { background: var(--k-lane); border: 1px solid var(--k-edge-2); border-left: 4px solid #f5a623; border-radius: 8px; max-width: 300px; margin: 0 auto; padding: 12px 14px; }
.kds-head { display: flex; justify-content: space-between; color: var(--k-muted); font-size: 12.5px; margin-bottom: 6px; }
.kds-line { font-size: 16px; font-weight: 700; }
.kds-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kds-chip { background: rgba(79,140,255,.18); color: #9cbcff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.pos-root.posm { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: #0b0d12; color: #e8eaee; font-size: 15px; }
.posm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: #101218; border-bottom: 1px solid #1c1f27; flex: 0 0 auto; }
.posm-link { background: none; border: none; color: #4f8cff; font-size: 15.5px; cursor: pointer; padding: 4px 0; min-width: 60px; text-align: left; }
.posm-title { font-weight: 700; font-size: 16px; color: #fff; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posm-topicons { display: flex; gap: 14px; min-width: 60px; justify-content: flex-end; }
.posm-topicons button { background: none; border: none; color: #cdd3dd; cursor: pointer; padding: 2px; }
.posm-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; -webkit-overflow-scrolling: touch; }
.posm-body.owns-scroll { overflow: hidden; }
.posm-nav { display: flex; height: calc(58px + env(safe-area-inset-bottom)); flex: 0 0 auto; background: var(--k-nav); border-top: 1px solid var(--k-edge-2); padding-bottom: env(safe-area-inset-bottom); }
.posm-nav button { flex: 1; background: none; border: none; color: var(--k-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.posm-nav button span { font-size: 11.5px; }
.posm-nav button.active { color: #4f8cff; }
.posm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
.posm-head .posm-link { min-width: 0; text-align: right; }
.posm-chips { display: flex; gap: 8px; padding: 6px 16px 10px; flex-wrap: wrap; }
.posm-lines { flex: 1; overflow-y: auto; padding: 0 16px; }
.posm-swipe { position: relative; margin-bottom: 8px; border-radius: var(--pos-r); overflow: hidden; }
.posm-swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 108px;
  border: none; background: #e5484d; color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.posm-line { display: flex; align-items: flex-start; gap: 10px; background: #171a21; border: 1px solid #23262e; border-radius: var(--pos-r); padding: 12px 14px; position: relative; touch-action: pan-y; transition: transform 180ms ease;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.posm-swipe.open .posm-line { transform: translateX(-108px); }
.posm-swipe.arming .posm-swipe-del { width: 100%; }
.posm-swipe-del { transition: width 140ms cubic-bezier(.32,.72,0,1); }
.posm-swipe[data-going="1"] { pointer-events: none; }
.posm-swipe[data-going="1"] .posm-line { will-change: transform, opacity; }
.posm-line-qty { font-weight: 700; min-width: 18px; }
.posm-line-name { flex: 1; }
.posm-pencil { background: none; border: none; color: #8b93a1; cursor: pointer; padding: 0 0 0 8px; vertical-align: middle; }
.posm-line-price { font-weight: 700; }
.posm-totals { padding: 10px 16px 4px; border-top: 1px solid #1c1f27; flex: 0 0 auto; }
.posm-total { display: flex; justify-content: space-between; font-size: 18px; margin-top: 4px; }
.posm-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 14px; flex: 0 0 auto; }
.posm-btn-add { border: none; border-radius: var(--pos-r); background: #2b3a55; color: #9cbcff; font-size: 16px; font-weight: 700; padding: 16px 10px; cursor: pointer; }
.posm-btn-pay { border: none; border-radius: var(--pos-r); background: #1f9d61; color: #fff; font-size: 16px; font-weight: 700; padding: 16px 10px; cursor: pointer; }
.posm-btn-pay:disabled { opacity: .45; }
.posm-items { flex: 1; overflow-y: auto; padding: 0 10px; }
.posm-item-name em { display: block; color: #8b93a1; font-style: normal; font-size: 12.5px; margin-top: 2px; }
.posm-price { background: #fff; color: #14161d; border-radius: var(--pos-r); padding: 6px 10px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.posm-quick { grid-template-columns: repeat(3, 1fr); }
.posm-payscreen { z-index: 6; }
.posm-rcpts { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 8px; flex: 1; min-height: 0; }
.posm-rcpts input { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r); padding: 12px 14px; font-size: 14px; }
.posm-paper { padding: 16px 12px 24px; overflow-y: auto; }
.posm-setlist { display: flex; flex-direction: column; padding: 10px 12px; }
.posm-setlist button { display: flex; align-items: center; justify-content: space-between; background: #14161d; border: none; border-bottom: 1px solid #1f232c; color: #e8eaee; padding: 16px 14px; font-size: 15.5px; cursor: pointer; text-align: left; }
.posm-setlist button:first-child { border-radius: var(--pos-r) 10px 0 0; }
.posm-setlist button em { color: #5f6b7a; font-style: normal; font-size: 18px; }
.posm-setlist .posm-exit { margin-top: 14px; border-radius: var(--pos-r); color: #ff8a8a; }
.posm-pane { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 24px; }
.posm .pos-combo { flex-direction: column; padding: 10px; gap: 10px; overflow-y: auto; }
.posm .pos-combo-left { width: auto; flex: 0 0 auto; overflow: visible; }
.posm .pos-combo-right { flex: 0 0 auto; }
.posm .pos-combo-right .pos-grid { grid-template-columns: repeat(2, 1fr) !important; }
.posm .pos-paytop { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: #101218; }
.posm .pos-ticket { position: sticky; bottom: 0; }
body.pos-open .mobile-nav { display: none !important; }
.posm-totals .pos-vatline { display: flex; justify-content: space-between; }
.posm-crumb { padding: 12px 16px 4px; color: #8b93a1; font-size: 12.5px; flex: 0 0 auto; }
.posm-crumb strong { display: block; color: #e8eaee; font-size: 15.5px; margin-top: 1px; }
.posm-gridwrap { flex: 1; overflow-y: auto; padding: 10px 12px 16px; -webkit-overflow-scrolling: touch; }
.posm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.posm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; background: #1a1f2c; border: none; border-bottom: 4px solid #3b6ff5; border-radius: var(--pos-r); color: #e8eaee; font-size: 14.5px; font-weight: 600; padding: 12px 10px; cursor: pointer; text-align: center; }
.posm-tile:active { filter: brightness(1.25); }
.posm-grid.fit .posm-tile { min-height: var(--pm-tile, 76px); height: var(--pm-tile, auto); padding: 6px 8px; }
.posm-tile em { color: #9aa3b2; font-style: normal; font-size: 12px; font-weight: 500; }
.posm-tile.has-img {
  min-height: 104px;
  color: #fff; font-weight: 800; font-size: 15.5px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .85);
}
.posm-paylist { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.posm-paylist .posm-paycat, .posm-paycat { color: #8b93a1; font-size: 12.5px; text-transform: none; margin: 8px 2px 0; }
.posm-mrow { display: flex; align-items: center; gap: 12px; width: 100%; background: #171a21; border: 1px solid #23262e; color: #e8eaee; border-radius: var(--pos-r); padding: 15px 14px; font-size: 15.5px; cursor: pointer; text-align: left; }
.posm-mrow.on { background: #2f6bdf; border-color: #2f6bdf; color: #fff; }
.posm-mrow.on .pos-ic { color: #fff; }
.posm-mrow:disabled { opacity: .5; }
.posm-mrow em { margin-left: auto; color: #8b93a1; font-style: normal; font-size: 12px; }
.posm-mrow.on em { color: #cfe0ff; }
.posm-cancel { color: #ff6b6b; }
.pos-badge { position: absolute; top: 6px; right: calc(50% - 26px); background: #f5a623; color: #14161c;
  border-radius: var(--pos-r); min-width: 18px; height: 18px; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.pos-nav button, .posm-nav button { position: relative; }
.pos-pend-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.pos-pend-table { display: inline-block; background: #f5a623; color: #14161c; border-radius: var(--pos-r);
  padding: 6px 12px; font-size: 16px; font-weight: 800; }
.pos-pend-note { background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.4);
  border-radius: var(--pos-r); padding: 10px 12px; margin-bottom: 10px; font-size: 13.5px; }
.pos-pend-lines { background: #101218; border-radius: var(--pos-r); padding: 8px 14px; margin-bottom: 14px; }
.posm .pos-pend-lines { background: #171a21; }
.pos-pend-btns { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pos-pend-btns .btn.danger { padding: 12px; }
.pos-root, .pos-root * { touch-action: manipulation; }
body.pos-open #toast-root { top: calc(10px + env(safe-area-inset-top)); bottom: auto;
  left: 50%; right: auto; transform: translateX(-50%); align-items: center; }
body.pos-open .toast { animation: dropIn .18s ease; }
@keyframes dropIn { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.posm-tender { display: grid; gap: 10px; padding: 0 14px 12px; }
.posm-tender button { border: none; border-radius: var(--pos-r); font-size: 15.5px; font-weight: 700;
  padding: 16px 8px; cursor: pointer; }
.posm-tender .t-cash { background: #1f9d61; color: #fff; }
.posm-tender .t-card { background: #3b6ff5; color: #fff; }
.posm-tender .t-charge { background: #2b3a55; color: #9cbcff; }
.posm-tender button:disabled { opacity: .45; }
.posm-flow { z-index: 7; display: flex; flex-direction: column; }
.posm-flowsteps { display: flex; gap: 8px; overflow-x: auto; padding: 12px 14px 10px; flex: 0 0 auto; scrollbar-width: none; }
.posm-flowsteps::-webkit-scrollbar { display: none; }
.posm-body, .posm-lines, .posm-items, .posm-gridwrap, .posm-paper, .posm .pos-combo {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.posm-body::-webkit-scrollbar, .posm-lines::-webkit-scrollbar, .posm-items::-webkit-scrollbar, .posm-gridwrap::-webkit-scrollbar, .posm-paper::-webkit-scrollbar, .posm .pos-combo::-webkit-scrollbar { width: 0; height: 0; display: none; }
.posm-flowsteps button { flex: 0 0 auto; border: none; border-radius: var(--pos-r); padding: 10px 16px;
  font-size: 13.5px; font-weight: 700; cursor: pointer; background: #23262e; color: #8b93a1; white-space: nowrap; }
.posm-flowsteps button.live { background: #b8842a; color: #fff; outline: 2px solid #4f8cff; outline-offset: 2px; }
.posm-flowsteps button.done { background: #1f9d61; color: #fff; }
.posm-flowgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 4px 14px 10px; grid-template-rows: repeat(var(--fl-rows, 1), 1fr); }
.posm-flowhead { flex: 0 0 auto; text-align: center; font-weight: 700; font-size: 15px;
  color: #e8eaee; background: #05070b; padding: 12px 14px; }
.posm-flowtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 0; background: #1a1f2c; border: 2px solid transparent; border-bottom: 4px solid #3f8f5f;
  border-radius: var(--pos-r); color: #e8eaee; font-size: 15.5px; font-weight: 650; padding: 8px; cursor: pointer; text-align: center; }
.posm-flowtile em { color: #9aa3b2; font-style: normal; font-size: 13px; font-weight: 500; }
.posm-flowtile.sel { border-color: #4f8cff; background: #1e2836; }
.posm-flowtile.off { border-bottom-color: #E8863B; }
.posm-flowtile.off.sel { border-color: #E8863B; background: #2a2016; }
.posm-flowtile:active { filter: brightness(1.3); }
.posm-flowfoot { display: flex; align-items: center; gap: 14px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid #1c1f27; flex: 0 0 auto; }
.posm-flowfoot .stepper { display: flex; align-items: center; gap: 10px; }
.posm-flowfoot .stepper button { width: 38px; height: 38px; border-radius: var(--pos-r); border: 1px solid #2a2e38;
  background: #171a21; color: #e8eaee; font-size: 18px; line-height: 1; cursor: pointer; }
.posm-flowfoot .stepper button:disabled { opacity: .35; }
.posm-flowfoot .stepper b { min-width: 18px; text-align: center; font-size: 16px; }
.posm-flowfoot .posm-btn-pay { padding: 15px 8px; }
.posm-flowdel { width: 38px; height: 38px; border-radius: var(--pos-r); border: 1px solid #4a2b2f; background: #171a21; color: #ff6b6b; font-size: 20px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.posm-flownote { padding: 0 14px 4px; flex: 0 0 auto; }
.posm-flownote input { width: 100%; background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r); padding: 11px 12px; font-size: 14px; }
#po-rows { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pos-kds-wrap { flex: 1; display: flex; flex-direction: column; padding: 14px; min-height: 0; width: 100%; }
.pos-ticket-card { background: #14161d; border: 1px solid #23262e; border-top: 4px solid #4f8cff; border-radius: var(--pos-r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.pos-ticket-card.warm { border-top-color: #f5a623; }
.pos-ticket-card.late { border-top-color: #ff5c5c; }
.pos-ticket-card.ready { border-top-color: #1f9d61; background: #12201a; }
.f-label { display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.f-input { width: 100%; }
.f-input.bad, input.bad, select.bad, textarea.bad { border-color: #c8382f; }
.hp-skel { display: inline-block; height: 14px; min-width: 40px; border-radius: 7px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: hp-skel-shift 1.3s ease infinite;
  vertical-align: middle; }
@keyframes hp-skel-shift { 0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
.hp-skel { animation: none; }
}
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: var(--bg-soft, rgba(127,127,127,.12)); color: var(--muted);
  border: 1px solid var(--border); vertical-align: 1px; }
.auth-screen { position: fixed; inset: 0; z-index: 100; display: flex; padding: 0; overflow: auto;
  background: #FBF4EA; color: #132C22; align-items: stretch; justify-content: flex-start; }
.au-logo { display: flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 800; font-size: 30px; letter-spacing: -.03em; color: #0B3B2E; }
.au-err { color: #B3261E; font-size: 13px; min-height: 18px; margin-top: 14px; }
.st-name { display: flex; align-items: center; gap: 10px; }
.till-site .sidebar, .till-site .mobile-nav { display: none !important; }
.till-site .content { margin: 0; }
.till-entry { min-height: 100vh; min-height: 100dvh; width: 100%; background: #0c0e12;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; }
.till-sub { color: #9aa3b2; font-size: 16px; margin: 2px 0 0; }
.till-note { color: #6b7484; font-size: 13px; margin: 4px 0 0; }
.till-dots { min-height: 30px; font-size: 22px; letter-spacing: 10px; color: #e8eaee; }
.till-dots .till-hint { font-size: 14px; letter-spacing: normal; color: #4c5566; }
.till-pad { display: grid; grid-template-columns: repeat(3, 84px); gap: 12px; }
.till-pad button { height: 74px; border-radius: 16px; border: 1px solid #262b36; background: #171a21;
  color: #e8eaee; font-size: 26px; font-weight: 700; cursor: pointer; }
.till-pad button:active { background: #232836; }
.till-go { width: 276px; padding: 16px; border: none; border-radius: 14px; background: #3b6ff5;
  color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.till-owner { color: #6b7280; font-size: 13.5px; text-decoration: underline; }
.till-entry .au-err:empty { display: none; }
.till-vlogo { background: #fff; border-radius: 18px; padding: 12px; width: 128px; height: 128px;
  display: flex; align-items: center; justify-content: center; }
.till-vlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.till-cog { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px;
  width: 40px; height: 40px; border-radius: 10px; border: none; background: rgba(255,255,255,.06);
  color: #9aa3b2; font-size: 22px; line-height: 1; cursor: pointer; }
.till-entry { position: relative; }
.till-dev-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14.5px; }
.till-dev-row:last-child { border-bottom: 0; }
.till-dev-row span { color: var(--text-2, #6b7280); }
.kt.keysel { outline: 3px solid #3b82f6; outline-offset: 2px; }
.till-dev-name { width: 180px; padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; text-align: right; }
@media (max-height: 760px) {
.till-entry { gap: clamp(6px, 1.4vh, 14px); padding: clamp(10px, 2.2vh, 24px) 20px; }
.till-sub { font-size: clamp(14px, 2vh, 16px); }
.till-note { font-size: clamp(12px, 1.7vh, 13px); }
.till-dots { min-height: clamp(20px, 3.2vh, 30px); font-size: clamp(18px, 2.6vh, 22px); }
.till-dots .till-hint { font-size: clamp(12px, 1.7vh, 14px); }
.till-pad { grid-template-columns: repeat(3, clamp(62px, 21vw, 84px));
    gap: clamp(6px, 1.2vh, 12px); }
.till-pad button { height: clamp(46px, 7.4vh, 74px); font-size: clamp(19px, 2.9vh, 26px); }
.till-go { width: min(276px, 100%); padding: clamp(10px, 1.7vh, 16px);
    font-size: clamp(15px, 2.1vh, 17px); }
.till-owner { font-size: clamp(12px, 1.8vh, 13.5px); }
.till-entry .au-logo .hp-logo, .till-entry .au-logo .hp-logo-img { height: clamp(40px, 7.2vh, 86px) !important; }
}
.till-shake { animation: till-shake .35s; }
@keyframes till-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); } }
.till-phone { width: 276px; background: #171a21; border: 1px solid #262b36; border-radius: 14px;
  padding: 16px; color: #e8eaee; font-size: 20px; text-align: center; }
.pos-combo-note { display: block; width: 100%; margin-top: 10px; background: none; color: #9aa3b2;
  border: 1px dashed #3a4150; border-radius: var(--pos-r); padding: 9px; font-size: 13px; cursor: pointer; }
.pos-combo-note.has { color: #e8eaee; border-style: solid; border-color: #4a5262; font-style: italic; }
.pos-combo-note:hover { border-color: #5a6376; color: #e8eaee; }
.pos-qtyrow { display: inline-flex; align-items: center; gap: 12px; }
.pos-qbtn { width: 34px; height: 34px; border-radius: var(--pos-r); border: 1px solid #333a47;
  background: #232836; color: #e8eaee; font-size: 18px; line-height: 1; cursor: pointer; }
.pos-item-price { display: block; margin-top: 4px; opacity: .75; font-size: 14px; }
.hp-logo { display: inline-block; width: 100%; max-width: 260px; background-color: currentColor;
  -webkit-mask-image: var(--logo); mask-image: var(--logo);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center; }
.hp-logo-img { display: block; max-width: 100%; object-fit: contain; }
.brand-logo { color: var(--text); display: flex; align-items: center; min-height: 48px;
  flex: 1 1 auto; width: 100%; min-width: 0; }
.brand-logo .hp-logo { max-width: 180px; }
.au-logo { width: 100%; }
.au-logo .hp-logo { width: 100%; max-width: 300px; -webkit-mask-position: center; mask-position: center; }
.au-logo .hp-logo-img { margin: 0 auto; }
.till-entry .au-logo { color: #e8eaee; }
.vs-note { margin: 6px 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.pill.ok { background: rgba(62,207,142,.14); color: var(--green); }
.pill.bad { background: rgba(255,92,92,.14); color: var(--red); }
.pill.lock { background: rgba(245,166,35,.14); color: var(--amber); }
.pill.warn { background: rgba(245,166,35,.14); color: var(--amber); }
.sw { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1.5px solid transparent; border-radius: 999px; padding: 7px 14px 7px 8px;
  color: var(--text); font-size: 13.5px; font-weight: 600; }
.sw.on { border-color: var(--primary); }
.pos-tx-list { gap: 0; }
.pos-tx-search { display: flex; align-items: center; gap: 10px; background: #1a1d24;
  border: 1px solid #2a2e38; border-radius: var(--pos-r); padding: 0 12px; margin-bottom: 10px; color: #6c7482; }
.pos-tx-search input { flex: 1; background: none; border: none; padding: 12px 0; font-size: 15px;
  color: #e8eaee; }
.pos-tx-search input:focus { outline: none; box-shadow: none; }
.pos-tx-day { color: #8b93a1; font-size: 13px; font-weight: 700; padding: 14px 2px 6px;
  position: sticky; top: 0; background: #0f1116; z-index: 1; }
.pos-tx-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid #23262e; padding: 12px 6px;
  color: #e8eaee; cursor: pointer; }
.pos-txchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 6px 4px; }
.pos-txchips-label { color: #6c7482; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.pos-txchip { background: #1a1d24; border: 1px solid #2a2e38; color: #8b93a1;
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap; }
.pos-txchip:hover { color: #e8eaee; border-color: #3a3f4b; }
.pos-txchip.on { background: rgba(59,111,245,.18); border-color: #3b6ff5; color: #cfdcff; }
.pos-txbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 2px 8px 8px; }
.pos-txwhat { color: #8b93a1; font-size: 12.5px; }
.pos-txtick { background: none; border: 1px solid #2a2e38; color: #8b93a1; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.pos-txtick.on { border-color: #3ec98a; color: #3ec98a; background: rgba(62,201,138,.12); }
.pos-tx-line { display: flex; align-items: stretch; }
.pos-tx-line .pos-tx-row { border-bottom: none; width: auto; flex: 1 1 auto; min-width: 0; }
.pos-tx-line { border-bottom: 1px solid #23262e; }
.pos-tx-tick { flex: none; width: 54px; background: none; border: none; cursor: pointer;
  color: #565d6b; display: grid; place-items: center; }
.pos-tx-tick:hover { color: #8b93a1; background: #171a21; }
.pos-tx-tick.on { color: #3ec98a; }
.pos-tx-row:hover, .pos-tx-row.on { background: #171a21; }
.pos-tx-row.void { opacity: .55; }
.pos-tx-ico { display: flex; gap: 3px; color: #8b93a1; flex: none; }
.pos-tx-main { flex: 1; min-width: 0; }
.pos-tx-main strong { display: block; font-size: 15px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-tx-sub { display: block; color: #8b93a1; font-size: 12.5px; margin-top: 2px; }
.pos-tx-amt { flex: none; text-align: right; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.pos-tx-time { display: block; color: #8b93a1; font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.pos-tx-chev { flex: none; color: #4b5260; display: flex; }
.pos-tx-detail { display: flex; flex-direction: column; gap: 0; }
.pos-tx-split { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 18px; align-items: start; }
.pos-tx-split .pos-tx-side { order: -1; position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.pos-tx-split .pos-tx-main { min-width: 0; display: flex; flex-direction: column; }
.pos-tx-all { display: flex; flex-direction: column; gap: 6px; }
.pos-ract-slim { display: flex; align-items: center; gap: 10px; text-align: left;
  background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r);
  padding: 9px 12px; cursor: pointer; font-size: 13.5px; }
.pos-ract-slim:hover { border-color: #3b6ff5; }
.pos-ract-slim svg { color: #8b93a1; flex: none; }
.pos-ract-slim span { min-width: 0; }
.pos-ract-slim .pos-tx-sub { display: block; color: #8b93a1; font-size: 11.5px; margin-top: 1px; font-weight: 400; }
.posm-paper:has(.pos-tx-split) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 10px; }
.posm-paper .pos-tx-split { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; }
.posm-paper .pos-tx-split .pos-tx-main { order: -1; flex: 1 1 52%; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.posm-paper .pos-tx-split .pos-tx-main::-webkit-scrollbar { display: none; }
.posm-paper .pos-tx-split .pos-tx-side { order: 0; position: static; flex: 1 1 48%; min-height: 0; overflow-y: auto; }
.posm-paper .pos-tx-split .pos-tx-acts { flex-direction: row; }
.posm-paper .pos-tx-split .pos-tx-act { flex: 1; padding: 12px; font-size: 14px; }
.posm-paper .pos-tx-split .pos-tx-all { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.posm-paper .pos-tx-split .pos-ract-slim { padding: 8px 10px; font-size: 12.5px; }
.posm-paper .pos-tx-split .pos-ract-slim .pos-tx-sub { display: none; }
.pos-tx-acts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.pos-tx-act { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r);
  padding: 16px; font-size: 15px; font-weight: 650; cursor: pointer; }
.pos-tx-act:hover:not(:disabled) { border-color: #3b6ff5; }
.pos-tx-act:disabled { opacity: .4; cursor: default; }
.pos-tx-sect { display: flex; align-items: baseline; justify-content: space-between;
  margin: 18px 0 2px; color: #8b93a1; font-size: 13px; }
.pos-tx-sect h4 { margin: 0; color: #e8eaee; font-size: 16px; font-weight: 700; }
.pos-tx-lines { display: flex; flex-direction: column; }
.pos-tx-line { display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-bottom: 1px solid #23262e; font-size: 14.5px; color: #e8eaee; }
.pos-tx-line svg { color: #8b93a1; flex: none; }
.pos-tx-line span { flex: 1; min-width: 0; }
.pos-tx-line b { font-variant-numeric: tabular-nums; }
.pos-tx-none { color: #6c7482; font-size: 13px; padding: 12px 2px; }
.pos-money, .pos-notif, .pos-more { flex: 1; overflow-y: auto; padding: 4px 2px 20px; }
.posm .pos-money, .posm .pos-notif, .posm .pos-more { padding: 4px 14px 20px; }
.pos-money-hero { background: #171a21; border: 1px solid #23262e; border-radius: var(--pos-r);
  padding: 22px; text-align: center; color: #8b93a1; font-size: 13.5px; }
.pos-money-hero strong { display: block; color: #e8eaee; font-size: 40px; font-weight: 800;
  margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.pos-money-for { display: block; margin-top: 6px; color: #6c7482; font-size: 12.5px; }
.pos-money-next { display: flex; align-items: center; gap: 12px; margin-top: 10px;
  background: #171a21; border: 1px solid #23262e; border-left: 3px solid var(--green);
  border-radius: var(--pos-r); padding: 13px 15px; color: #8b93a1; }
.pos-money-next.none { border-left-color: #2a2e38; }
.pos-money-next svg { flex: 0 0 auto; color: #8b93a1; }
.pos-money-next-t { min-width: 0; }
.pos-money-next-t b { display: block; color: #e8eaee; font-size: 15px; font-weight: 700; }
.pos-money-next-t em { display: block; font-style: normal; font-size: 12.5px; margin-top: 2px;
  line-height: 1.45; }
.pos-money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.pos-money-card { background: #171a21; border: 1px solid #23262e; border-radius: var(--pos-r); padding: 14px;
  color: #8b93a1; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.pos-money-card strong { color: #e8eaee; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.pos-money-card.tap { cursor: pointer; text-align: left; font-family: inherit;
  border-color: #2c3140; transition: background .12s ease, border-color .12s ease; }
.pos-money-card.tap:hover { background: #1c2029; border-color: #3a4152; }
.pos-money-card.tap:active { transform: scale(.985); }
.pos-money-n { color: #6f7787; font-size: 12px; font-style: normal; }
.pos-tender-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.pos-tender-row { display: grid; grid-template-columns: 90px 60px 1fr auto; align-items: center;
  gap: 10px; width: 100%; padding: 11px 12px; background: #171a21; border: 1px solid #23262e;
  border-radius: var(--pos-r); color: #c9cfda; font: inherit; font-size: 14px;
  text-align: left; cursor: pointer; }
.pos-tender-row:hover { background: #1c2029; }
.pos-tender-no { font-weight: 700; color: #e8eaee; font-variant-numeric: tabular-nums; }
.pos-tender-when, .pos-tender-who { color: #8b93a1; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-tender-amt { font-weight: 700; color: #e8eaee; font-variant-numeric: tabular-nums;
  text-align: right; }
.pos-tender-amt i { display: block; color: #8b93a1; font-size: 12px; font-weight: 500;
  font-style: normal; }
.pos-money-note { background: #171a21; border: 1px solid #23262e; border-radius: var(--pos-r); padding: 16px;
  color: #8b93a1; font-size: 13.5px; line-height: 1.5; }
.pos-money-note strong { display: block; color: #e8eaee; margin-bottom: 4px; }
.pos-money-note p { margin: 0; }
.pos-money-bad { border: 1px solid #ff5c5c; border-radius: var(--pos-r); padding: 0 10px 6px; }
.pos-notif-bad strong { color: #ff5c5c; }
.pos-notif-bad svg { color: #ff5c5c; }
.pos-money-list { max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pos-pwrap { position: relative; display: block; }
.pos-pwrap input { width: 100%; padding-right: 44px; }
.pos-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none;
  border: none; color: var(--k-ink-2, #9aa3b2); cursor: pointer; padding: 6px; line-height: 0; }
.pos-eye:hover { color: var(--text, #e6e9ef); }
.pos-money-sect .pos-notif-row .pos-tx-sub { white-space: normal; }
.pos-money-cta svg { vertical-align: -3px; margin-right: 6px; }
.pos-notif-row, .pos-more-row { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: none; border: none; border-bottom: 1px solid #23262e;
  padding: 14px 6px; color: #e8eaee; cursor: pointer; }
.pos-notif-row:hover:not(:disabled), .pos-more-row:hover { background: #171a21; }
.pos-notif-row:disabled { cursor: default; }
.pos-notif-row svg, .pos-more-row svg { color: #8b93a1; flex: none; }
.pos-notif-row > span, .pos-more-row > span { flex: 1; min-width: 0; }
.pos-notif-row strong, .pos-more-row strong { display: block; font-size: 15px; font-weight: 650; }
.pos-split-note { background: #1a1d24; border: 1px solid #2a2e38; border-radius: var(--pos-r);
  padding: 12px 14px; color: #b9c0cc; font-size: 13.5px; line-height: 1.45; }
.pos-splitlink { background: none; border: none; color: #6f9dff; font-size: 14px; font-weight: 650;
  text-decoration: underline; padding: 2px 0 10px; cursor: pointer; }
.pos-split-amt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #1a1d24; border: 1px solid #2a2e38; border-radius: var(--pos-r); padding: 6px 14px; }
.pos-split-amt span { font-weight: 650; }
.pos-split-amt input { width: 120px; text-align: right; background: none; border: none;
  color: #e8eaee; font-size: 18px; font-weight: 700; padding: 10px 0; }
.pos-split-amt input:focus { outline: none; box-shadow: none; }
.pos-splitways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 8px; margin-bottom: 14px; }
.pos-splitway { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--pos-r); border: 1px solid #2a2e38;
  background: #171a21; color: #8b93a1; font-family: inherit; text-align: left; cursor: pointer; }
.pos-splitway strong { font-size: 14px; color: #e8eaee; }
.pos-splitway em { font-style: normal; font-size: 11.5px; line-height: 1.3; }
.pos-splitway.on { border-color: #4f8cff; background: #131b2b; }
.pos-splitway.on strong { color: #4f8cff; }
.pos-splitpane { min-height: 150px; }
.pos-split-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 10px; }
.pos-split-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #0d0f14; background: #8b93a1; border: none; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.pos-split-chip b { font-weight: 800; opacity: .55; }
.pos-split-more { padding: 3px 10px; border-radius: 999px; border: 1px dashed #3a4050;
  background: none; color: #8b93a1; font-family: inherit; font-size: 12px; cursor: pointer; }
.pos-split-more[disabled] { opacity: .4; cursor: default; }
.pos-split-chip.p2 { background: #d9a441; }
.pos-split-items { display: flex; flex-direction: column; gap: 6px;
  max-height: 42vh; overflow-y: auto; }
.pos-split-item { display: grid; grid-template-columns: 26px 1fr auto 34px; align-items: center;
  gap: 10px; padding: 9px 11px; border-radius: var(--pos-r);
  border: 1px solid #2a2e38; background: #171a21; color: #c8ceda;
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pos-split-item .q { font-weight: 800; color: #8b93a1; font-variant-numeric: tabular-nums; }
.pos-split-item .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-split-item .a { font-variant-numeric: tabular-nums; color: #8b93a1; }
.pos-split-item .w { text-align: right; font-weight: 800; font-size: 12px; color: #565d6b; }
.pos-split-item.taken { border-color: currentColor; }
.pos-split-item.taken .w { color: inherit; }
.pos-split-item.taken.p2 { color: #d9a441; }
.pos-split-item.taken .n, .pos-split-item.taken .a { color: #e8eaee; }
.pos-split-eq { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pos-split-eq button { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee;
  border-radius: var(--pos-r); padding: 18px 6px; font-size: 16px; font-weight: 700; cursor: pointer; }
.pos-split-eq button.on { border-color: #3b6ff5; background: rgba(59,111,245,.16); }
.pos-money-cta { width: 100%; margin-top: 16px; background: #23262e; border: none;
  color: #8b93a1; border-radius: 999px; padding: 16px; font-size: 16px; font-weight: 750; }
.pos-money-alert {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin: 2px 0 12px; padding: 14px 16px; border-radius: var(--pos-r);
  border: 1px solid #b8860b; cursor: pointer;
  background: linear-gradient(135deg, #7a5a08, #4a3706); color: #ffe9b0;
}
.pos-money-alert svg { flex: none; color: #ffd76a; }
.pos-money-alert span { flex: 1; min-width: 0; }
.pos-money-alert strong { display: block; font-size: 16px; font-weight: 800; color: #fff; }
.pos-money-alert em { display: block; font-style: normal; font-size: 13px;
  color: #ffe9b0; margin-top: 3px; line-height: 1.45; }
.pos-money-alert b { flex: none; font-size: 15px; font-weight: 800; color: #ffd76a; }
.pos-field { display: block; margin-bottom: 12px; }
.pos-field span { display: block; font-size: 13px; font-weight: 650; color: #8b93a1;
  margin-bottom: 5px; }
.pos-field input { width: 100%; box-sizing: border-box; background: #14161c;
  border: 1px solid #2a2e38; border-radius: 9px; color: #e8eaee; font-size: 16px;
  padding: 11px 12px; }
.pos-field input:focus { outline: none; border-color: #4f8cff; }
.pos-money-sect { margin-top: 14px; background: #171a21; border: 1px solid #23262e;
  border-radius: var(--pos-r); padding: 16px 16px 8px; }
.pos-money-sect h4 { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #e8eaee; }
.pos-money-sect .pos-notif-row { border-bottom: none; padding: 12px 0; }
.pos-money-ic { flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #23262e; color: #e8eaee; }
.pos-money-sect .pos-splitlink { display: block; width: 100%; text-align: center;
  text-decoration: underline; color: #e8eaee; font-size: 16px; font-weight: 700;
  padding: 12px 0 10px; }
.pos-money-sect.pos-money-bad { border-color: #ff5c5c; }
.pos-skel { display: flex; flex-direction: column; gap: 12px; padding: 6px 2px; }
.pos-skel-b { display: block; background: #1d2027;
  animation: pos-skel-breathe 1.3s ease-in-out infinite; }
.pos-skel-row { display: flex; gap: 12px; align-items: center; }
.pos-skel-row > span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.pos-skel-sq { width: 42px; height: 42px; border-radius: 11px; flex: none; }
.pos-skel-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pos-skel-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px; align-content: start; width: 100%; }
@keyframes pos-skel-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.pos-skel-b { animation: none; opacity: .65; }
}
.pos-money-top { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.pos-money-cog { margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: #1a1d24; border: 1px solid #2a2e38; color: #cdd3dd;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  align-self: center; margin-bottom: 6px; }
.pos-money-sect .pos-notif-row b { font-variant-numeric: tabular-nums; }
.pos-reason-list { display: flex; flex-direction: column; }
.pos-reason { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid #23262e;
  padding: 15px 2px; color: #e8eaee; font-size: 15px; font-weight: 650; cursor: pointer; }
.pos-reason:hover { background: #171a21; }
.pos-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3a3f4b; }
.pos-reason.on .pos-radio { border-color: #3b6ff5; box-shadow: inset 0 0 0 4px #0f1116, inset 0 0 0 22px #3b6ff5; }
.stk-row { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--pos-r);
  background: transparent; color: var(--pos-ink, #e8ebf2); text-align: left;
  font: inherit; cursor: pointer; }
.stk-row:hover { background: #171a21; }
.stk-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-row.off .stk-name { color: var(--muted); font-weight: 500; }
.stk-sheet .modal-body { padding-top: 0; }
.stk-sheet .stk-pin { padding-top: 14px; }
.stk-pin {
  position: sticky; top: 0; z-index: 4;
  /* Fully opaque, and wide enough. The old version used the surface variable
     (which the material theme can resolve translucent) and reached only 2px
     past its own box — so a row sliding underneath peeked out through the
     modal body's 20px side padding and under the last child's margin. Jamal's
     screenshot: a toggle poking out beside the search box. A solid colour,
     stretched across the body's full width, with its own bottom padding so no
     child margin leaves a see-through band. */
  background: #14161b;
  margin: 0 -20px; padding: 2px 20px 8px;
  box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .6);
}
.stk-pin > :last-child { margin-bottom: 0; }
.stk-tabs { display: flex; gap: 6px; margin: 14px 0 6px; }
.stk-tab {
  flex: 1; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer;
}
.stk-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.stk-uses { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.stk-row.byshortage { opacity: .72; cursor: not-allowed; }
.stk-why { display: block; font-size: 11.5px; font-weight: 700; color: var(--amber); margin-top: 2px; }
.stk-shared { margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.stk-state { flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); }
.stk-row.on .stk-state { color: var(--green, #3ecf8e); }
.stk-sw { flex: none; position: relative; width: 50px; height: 29px; border-radius: 999px;
  background: transparent; border: 2px solid #fff;
  transition: background .16s ease, border-color .16s ease; }
.stk-sw i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; transition: left .16s ease; }
.stk-row.on .stk-sw { background: var(--green, #3ecf8e); border-color: var(--green, #3ecf8e); }
.stk-row.on .stk-sw i { left: 24px; }
.stk-gcount { margin-left: 8px; color: var(--amber, #f5a623); }
.stk-sum { color: #fff; }
.stk-rule { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--border, #262b35); border-radius: var(--pos-r);
  background: #14171d; color: var(--pos-ink, #e8ebf2); text-align: left; font: inherit;
  cursor: pointer; }
.stk-rule:hover { background: #171a21; }
.stk-rule-what { flex: 1 1 auto; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.stk-rule-go { flex: none; font-size: 13px; font-weight: 700; color: var(--primary, #4f8cff); }
.stk-mode { display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px; border: 0; border-radius: var(--pos-r); background: transparent;
  color: var(--pos-ink, #e8ebf2); text-align: left; font: inherit; cursor: pointer; }
.stk-mode:hover { background: #171a21; }
.stk-mode.on { background: #171a21; }
.stk-mode-box { flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--border, #3a4150); border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; }
.stk-mode-box.on { background: var(--green, #3ecf8e); border-color: var(--green, #3ecf8e); }
.stk-mode-ico { flex: none; width: 26px; padding-top: 1px; color: var(--muted); }
.stk-mode.on .stk-mode-ico { color: var(--pos-ink, #e8ebf2); }
.stk-mode b { display: block; font-size: 15px; font-weight: 600; }
.stk-mode i { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px;
  line-height: 1.4; color: var(--muted); }
.stk-time { width: 100%; padding: 10px 12px; border-radius: var(--pos-r);
  border: 1px solid var(--border, #262b35); background: #14171d;
  color: var(--pos-ink, #e8ebf2); font: inherit; }
.stk-ask { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  margin-top: 14px; padding: 8px 12px; border: 0; border-radius: var(--pos-r);
  background: transparent; color: var(--pos-ink, #e8ebf2); text-align: left;
  font: inherit; font-size: 14.5px; cursor: pointer; }
.stk-ask span:first-child { flex: 1 1 auto; }
.stk-ask.on .stk-sw { background: var(--green, #3ecf8e); border-color: var(--green, #3ecf8e); }
.stk-ask.on .stk-sw i { left: 24px; }
.pos-kds-tool { position: relative; }
.stk-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--amber, #f5a623); color: #14171d;
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; }
.pos-kds-tool.has-off { border-color: var(--amber, #f5a623); }
.kt-told { padding: 5px 12px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; }
.kt-told.idle { color: var(--muted); }
.kt-told.sent { color: var(--green, #3ecf8e); }
.kt-told.failed { color: var(--red, #ff5c5c); }
.kt-told.sending { color: var(--amber, #f5a623); animation: kt-told-pulse 1s ease-in-out infinite; }
@keyframes kt-told-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
.kt-told.sending { animation: none; }
}
.kt-alert .modal-head .close-x { display: none; }
.kt-alert .modal {
  border: 2px solid var(--red, #ff5a5a);
  box-shadow: 0 0 0 1px rgba(255, 90, 90, .35), 0 18px 60px rgba(255, 60, 60, .28);
  background: linear-gradient(180deg, #2a1416 0%, #1a1013 42%, var(--surface, #171a21) 100%);
}
.kt-alert .modal-head { background: rgba(255, 70, 70, .16); border-bottom: 1px solid rgba(255, 90, 90, .38); }
.kt-alert .modal-head h3, .kt-alert .modal-head strong { color: #ffd7d7; }
.kt-alert .ntf-text { color: #ffeaea; font-weight: 600; }
.kt-alert .ntf-facts div { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 120, 120, .18); }
.kt-alert .ntf-facts b { color: #fff; }
.kt-alert.tone-failed .modal { border-color: #ff3b3b; }
.kt-alert.tone-failed .modal-head { background: rgba(255, 45, 45, .24); }
@keyframes kt-alert-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 90, 90, .35), 0 18px 60px rgba(255, 60, 60, .22); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 90, 90, .55), 0 18px 70px rgba(255, 60, 60, .45); }
}
.kt-alert .modal { animation: kt-alert-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.kt-alert .modal { animation: none; }
}
.ntf-text { margin: 0 0 14px; font-size: 16px; line-height: 1.45; }
.ntf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; }
.ntf-facts div { padding: 10px 12px; border-radius: var(--pos-r); background: #14171d; }
.ntf-facts em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.ntf-facts b { display: block; margin-top: 3px; font-size: 15.5px; }
@media (max-width: 419px) {
.stk-state { display: none; }
.stk-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.stk-row { padding-top: 10px; padding-bottom: 10px; }
}
.pos-tx-ico { position: relative; }
.pos-tx-undo { position: absolute; right: -6px; bottom: -5px; width: 15px; height: 15px;
  border-radius: 50%; background: #f5a623; color: #14161b; display: flex;
  align-items: center; justify-content: center; }
.pos-tx-ico.undone > svg:first-of-type { opacity: .55; }
.pos-done { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 10px 10px; text-align: center; }
.pos-done-tick { color: #3ec98a; display: flex; }
.pos-done strong { font-size: 19px; font-weight: 700; margin-top: 6px; }
.pos-done span:last-child { color: var(--muted); font-size: 14px; }
.posm-chargebar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #23262e; background: #14161b; }
.posm-charge { flex: 1; background: #1a1d24; border: 1px solid #2a2e38; color: #6c7482;
  border-radius: var(--pos-r); padding: 14px; font-size: 16px; font-weight: 700; }
.posm-charge.on { background: #e8eaee; border-color: #e8eaee; color: #14161b; }
.posm-charge span { display: block; font-size: 12.5px; font-weight: 500; margin-top: 2px; opacity: .75; }
.posm-chargenow { flex: 0 0 40%; background: #3b6ff5; border: none; color: #fff; border-radius: var(--pos-r);
  padding: 14px 10px; font-size: 16px; font-weight: 700; }
.posm-chargenow span { display: block; font-size: 12.5px; font-weight: 500; margin-top: 2px; opacity: .85; }
.posm-tile.added { border-color: #2f9e6b; box-shadow: inset 0 0 0 999px rgba(47,158,107,.22); }
.posm-tile.added em { color: #6fe0ac; font-weight: 700; }
.posm-tile em, .posm-tile.added em { transition: color .25s ease; }
.modal-backdrop.pos-fit { padding: 10px 12px; align-items: center;
  /* Both ends of the phone are spoken for: the home indicator below and — the
     one this rule forgot — the clock and battery above. In the add-to-home-
     screen app the viewport starts at the physical top of the screen, so a
     sheet tall enough to fill it put its title bar under the status bar.
     Jamal, on a photograph of the Availability sheet: *"The top bar is
     missing."* env() is 0 in a normal browser tab, where max() keeps the
     10px, so only the standalone app moves. */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.modal.pos-fit { display: flex; flex-direction: column; max-height: 100%;
  /* dvh where it exists: iOS sizes a fixed backdrop against the layout
     viewport, which runs on behind Safari's bottom bar — Jamal's ticket sheet
     had its blue button half-buried under it. The dynamic viewport unit stops
     at the bar.

     The safe areas come off this height too, and come back as margins. The
     backdrop's padding cannot do this job alone: a sheet at this max-height
     is TALLER than the backdrop's padded content box, so it overflows and
     centres itself, splitting the spare 20px evenly — which in the add-to-
     home-screen app put the title bar under the iPhone's clock (Jamal, on a
     photograph of the Availability sheet: *"The top bar is missing"*). The
     margins are asymmetric on purpose, because the notch (~59px) and the home
     indicator (~34px) are; in a normal browser tab env() is 0 and nothing
     here changes. */
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin-top: env(safe-area-inset-top, 0px);
  margin-bottom: env(safe-area-inset-bottom, 0px); }
.modal.pos-fit .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; }
.modal.pos-fit .modal-head, .modal.pos-fit .modal-foot { flex: 0 0 auto; }
@media (min-height: 820px) {
.modal-backdrop.pos-fit { padding: 40px 16px;
  padding-top: max(40px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}
@media (max-height: 760px) {
.modal.pos-fit .modal-head { padding: 13px 18px; }
.modal.pos-fit .modal-body { padding: 14px 18px; }
.modal.pos-fit .modal-foot { padding: 11px 18px; }
.modal.pos-fit .pos-split-note { padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
.modal.pos-fit .pos-wait-auto { padding: 11px 14px; margin-bottom: 10px; }
.modal.pos-fit .pos-wait-auto strong { font-size: 15.5px; }
.modal.pos-fit .pos-disc { padding: 10px 11px; }
.modal.pos-fit .pos-disc-grid { gap: 7px; }
}
.modal.pos-fit .pos-disc-grid { align-content: start; }
.modal.pos-pick { display: flex; flex-direction: column; max-height: calc(100dvh - 120px); }
.modal.pos-pick .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto;
  overscroll-behavior: contain; }
.modal.pos-pick .modal-foot { flex: 0 0 auto; }
.pos-kds-bar { display: flex; align-items: center; gap: 12px; padding: 6px 4px 10px;
  flex-wrap: nowrap; max-width: 100%; }
.pos-kds-bar > * { min-width: 0; }
.pos-kds-bar.compact { gap: 8px; }
.pos-kds-bar.tiny { gap: 6px; }
.pos-kds-bar.tiny .pos-kds-wait strong { font-size: 26px; }
.pos-kds-bar.tiny { gap: 6px; padding: 8px 6px; }
.pos-kds-bar.tiny .pos-kds-filter { display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 9px; }
.pos-kds-bar.tiny .pos-kds-filter b { font-size: 12px; font-weight: 800; }
.pos-kds-todo { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.pos-kds-todo strong { font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.pos-kds-todo span { color: var(--k-muted); font-size: 13px; }
.pos-kds-todo.clear strong { color: var(--k-muted); }
.pos-kds-bar.tiny .pos-kds-todo strong { font-size: 26px; }
.pos-kds-wait { display: flex; align-items: baseline; gap: 8px; }
.pos-kds-wait strong { font-size: 34px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.pos-kds-wait strong em { font-size: 18px; font-style: normal; font-weight: 700; margin-left: 1px; }
.pos-kds-wait span { color: var(--k-muted); font-size: 13px; }
.pos-kds-wait.manual strong { color: var(--amber); }
.pos-kds-bridge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding: 5px 10px;
  border: 1px solid var(--k-edge);
  border-radius: 999px;
  background: var(--k-panel);
  color: var(--k-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.pos-kds-bridge[hidden] { display: none; }
.pos-kds-bridge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pos-kds-bridge.ok { color: var(--green); border-color: rgba(62,207,142,.35); }
.pos-kds-bridge.bad { color: var(--amber); border-color: rgba(245,166,35,.4); }
.pos-kds-filter[hidden] { display: none !important; }
.pos-kds-filter { margin-left: auto; background: var(--k-control); border: 1px solid var(--k-edge);
  color: var(--k-ink-3); border-radius: var(--pos-r); padding: 9px 12px; font-size: 14px;
  font-weight: 650; cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-kds-filter.on { border-color: #4f8cff; color: #9cbcff; }
.pos-kds-sound { flex: 0 0 auto; background: var(--k-control); border: 1px solid var(--k-edge);
  color: var(--k-muted-2); border-radius: var(--pos-r); padding: 0; cursor: pointer;
  width: 44px; height: 40px; display: inline-flex; align-items: center;
  justify-content: center; }
.pos-kds-sound[data-tone="on"] { border-color: #2f6b3f; color: #3ec98a; background: #12241a; }
.pos-kds-sound[data-tone="warn"] { border-color: #6b5a2f; color: #e8c37d; background: #221f12; }
.pos-kds-sound[data-tone="off"] { border-color: #ff6b60; color: #fff; background: #b4231a; }
.pos-kds-push { flex: 0 0 auto; background: var(--k-control); border: 1px solid var(--k-edge);
  color: var(--k-muted-2); border-radius: var(--pos-r); padding: 9px 12px; font-size: 13px;
  font-weight: 650; cursor: pointer; white-space: nowrap; }
.pos-kds-push.on { border-color: #2f6b3f; color: #7ddc9a; }
.pos-kds-push.ask { border-color: #7a4a1e; color: #ffb15c; }
.pos-kds-push.needs-install { border-color: #2f4f7a; color: #8fb8ff; }
.pos-kds-push.blocked { border-color: #6b2f2f; color: #ff9c9c; }
.pos-kds-push.unsupported { border-color: var(--k-edge); color: var(--k-dim-2); }
.push-steps { margin: 12px 0 0; padding-left: 22px; line-height: 1.7; color: var(--text); }
.push-steps li { margin-bottom: 4px; }
.kfilt-row {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  padding: 11px 14px; text-align: left;
}
.kfilt-txt { flex: 1; min-width: 0; font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kfilt-ic { flex: 0 0 auto; display: flex; align-items: center; color: var(--muted); }
.kfilt-row.on .kfilt-ic { color: var(--text); }
.kfilt-box { flex: 0 0 20px; height: 20px; display: flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--k-chipedge); border-radius: 5px;
  color: #fff; background: transparent; }
.kfilt-row.on .kfilt-box { border-color: #4f8cff; background: #4f8cff; }
.kfilt-row.on { border-color: #4f8cff; background: rgba(79,140,255,.10); }
.kfilt-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kfilt-apps .kfilt-row { padding: 11px 12px; }
.kfilt-apps .kfilt-txt { font-size: 14px; }
.pos-disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.pos-disc { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee; border-radius: var(--pos-r);
  padding: 14px 12px; text-align: left; cursor: pointer; }
.pos-disc.on { border-color: #3b6ff5; background: rgba(59,111,245,.16); }
.pos-paydisc { color: #6f9dff; }
.pos-disc strong { display: block; font-size: 14.5px; }
.pos-disc span { color: #8b93a1; font-size: 12.5px; }
.pos-wait-auto { display: block; width: 100%; text-align: left; margin-bottom: 12px;
  background: #1a1d24; border: 1.5px solid #2a2e38; color: #e8eaee;
  border-radius: var(--pos-r); padding: 16px 18px; cursor: pointer; font-family: inherit; }
.pos-wait-auto strong { display: block; font-size: 17px; }
.pos-wait-auto span { color: #8b93a1; font-size: 13.5px; }
.pos-wait-auto.on { border-color: #3ec98a; background: rgba(62,201,138,.14); }
.pos-wait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pos-wait-key { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 76px; background: #1a1d24; border: 1.5px solid #2a2e38;
  color: #e8eaee; border-radius: var(--pos-r); cursor: pointer; font-family: inherit; }
.pos-wait-key b { font-size: 26px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.pos-wait-key span { font-size: 12px; color: #8b93a1; text-transform: uppercase;
  letter-spacing: .06em; }
.pos-wait-key.on { border-color: #3b6ff5; background: rgba(59,111,245,.18); }
.pos-wait-key.on span { color: #b9cbff; }
@media (max-width: 560px) {
.pos-wait-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pos-wait-key { min-height: 68px; }
}
.pos-term { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 0 4px; text-align: center; }
.pos-term-note { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; max-width: 340px;
  line-height: 1.45; }
.btn.primary.pos-term-go { background: #1f9d61; border-color: #1f9d61; color: #fff; }
.pos-stages { width: 100%; max-width: 360px; text-align: left; }
.pos-stage-bar { height: 4px; border-radius: 999px; background: var(--line, #23262e);
  overflow: hidden; margin-bottom: 12px; }
.pos-stage-bar i { display: block; height: 100%; border-radius: 999px;
  background: #1f9d61; transition: width .32s cubic-bezier(.32,.72,0,1); }
.pos-stages.failed .pos-stage-bar i { background: #ff6b6b; }
.pos-stages ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pos-stages li { display: flex; align-items: flex-start; gap: 9px; }
.pos-stages li span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.pos-stages li strong { font-size: 14px; font-weight: 600; }
.pos-stages li em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 1px; }
.pos-stage-dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  border: 1.5px solid var(--line, #2a2e37); color: #fff; font-size: 11px; font-weight: 700; }
.pos-stages li.done .pos-stage-dot { background: #1f9d61; border-color: #1f9d61; }
.pos-stages li.now .pos-stage-dot { border-color: #1f9d61; box-shadow: 0 0 0 3px rgba(31,157,97,.22);
  animation: pos-stage-pulse 1.5s ease-in-out infinite; }
.pos-stages li.now strong { color: var(--text, #fff); }
.pos-stages li.failed .pos-stage-dot { background: #ff6b6b; border-color: #ff6b6b; }
.pos-stages li.failed strong { color: #ff6b6b; }
.pos-stages li.ahead strong, .pos-stages li.ahead em { color: var(--muted); opacity: .65; }
@keyframes pos-stage-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(31,157,97,.22); }
  50% { box-shadow: 0 0 0 6px rgba(31,157,97,.08); } }
@media (prefers-reduced-motion: reduce) {
.pos-stages li.now .pos-stage-dot { animation: none; }
.pos-stage-bar i { transition: none; }
}
.pos-stage-totals { width: 100%; max-width: 360px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line, #23262e); display: grid; gap: 5px; }
.pos-stage-totals > div { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--muted); }
.pos-stage-totals > div.big { font-size: 22px; color: var(--text, #fff); font-weight: 700;
  letter-spacing: -.01em; }
.pos-stage-totals > div.big span { font-size: 13px; font-weight: 500; color: var(--muted); }
@media print {
.sidebar, .topbar, .mobile-nav { display: none !important; }
body, .app, .view { background: #fff !important; margin: 0; padding: 0; }
@page { margin: 14mm; }
}
.pos-kds-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px;
  border-bottom: 1px solid var(--k-edge-2); background: var(--k-bar);
  color: var(--k-ink-3); flex: 0 0 auto; }
.pos-kds-bar .grow { flex: 1; }
.pos-kds-bar .pos-kds-filter { flex: 0 0 auto; width: auto; max-width: 220px; }
.pos-kds-wait { white-space: nowrap; }
.posm .pos-kds-wrap { padding: 0; }
.posm .pos-kds-bar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px;
  flex: 0 0 auto; overflow: hidden; }
.posm .pos-kds-bar .grow { display: none; }
.posm .pos-kds-bar > * { flex: 0 0 auto; min-width: max-content; }
.posm .pos-kds-bar .pos-kds-tool { font-size: 11px; padding: 5px 8px; }
.posm .pos-kds-bar .pos-kds-filter { max-width: none;
  font-size: 12px; padding: 6px 4px 6px 8px; }
.kds-unsaved { display: none; }
.kds-unsaved.on {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(230, 160, 40, .16);
  color: #e6a028;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.kds-unsaved.on.bad {
  background: rgba(220, 60, 60, .16);
  color: #e05252;
}
.ksync-verdict {
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
  background: rgba(120, 200, 130, .14);
  color: #48b45c;
}
.ksync-verdict.differs { background: rgba(220, 60, 60, .14); color: #e05252; }
.ksync-verdict.sending, .ksync-verdict.settling { background: rgba(230, 160, 40, .14); color: #e6a028; }
.ksync-verdict.unknown { background: rgba(140, 140, 150, .16); color: var(--muted); }
.ksync-inc { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; }
.ksync-list { display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto; }
.ksync-row {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}
.ksync-row.ok { border-left-color: rgba(120, 200, 130, .55); }
.ksync-row.wait { border-left-color: #e6a028; }
.ksync-row.bad { border-left-color: #e05252; }
.ksync-head { display: flex; align-items: baseline; gap: 8px; }
.ksync-head strong { font-size: 15px; }
.ksync-call { font-size: 12px; color: var(--muted); }
.ksync-state { font-size: 12px; font-weight: 700; color: var(--muted); }
.ksync-prog { margin-left: auto; font-size: 12px; color: var(--muted); }
.ksync-note { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ksync-row.bad .ksync-note { color: #e05252; }
.ksync-empty { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.ksync-says { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.posm .pos-kds-live { font-size: 13px; }
.posm .pos-kds-live strong { display: none; }
.posm .pos-kds-wait strong { font-size: 24px; }
.posm .pos-kds-wait span { font-size: 11px; }
.posm .pos-kds-todo strong { font-size: 24px; }
.posm .pos-kds-todo span { font-size: 11px; }
.pos-kds-live { display: flex; align-items: center; gap: 8px; font-size: 15px;
  font-weight: 800; letter-spacing: .08em; }
.pos-kds-live i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.pos-kds-live.on { color: #3ec98a; }
.pos-kds-live.on i { background: #3ec98a; animation: kds-pulse 1.4s ease-in-out infinite; }
.pos-kds-live.off { color: #ff6b6b; }
.pos-kds-live.off i { background: #ff6b6b; animation: kds-pulse .6s steps(1, end) infinite; }
@keyframes kds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) {
.pos-kds-live i { animation: none !important; }
}
.pos-kds-cog { background: none; border: 1px solid var(--k-edge); color: var(--k-ink-2);
  border-radius: var(--pos-r); padding: 7px 9px; display: flex; cursor: pointer; }
.pos-kds-cog:hover { border-color: #3b6ff5; }
.pos-ticket-card { transition: transform .12s ease; touch-action: pan-y; }
.pos-ticket-card.swiping { transition: none; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.pos-ticket-card.app { border-top-color: var(--tk-app, #4f8cff); }
.pos-ticket-card.app.warm { border-top-color: #f5a623; }
.pos-ticket-card.app.late { border-top-color: #ff5c5c; }
.pos-ticket-card.cancelled { border-color: #ff5c5c; background: #241315; opacity: .85; }
.posm-buzzer { width: 100%; background: rgba(59,111,245,.12); border: 1px solid #2b4a8f;
  color: #8fb4ff; border-radius: var(--pos-r); padding: 12px; font-size: 14.5px;
  font-weight: 650; margin: 4px 0 2px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 10px; }
.posm-buzzer:hover { border-color: #3b6ff5; }
.posm-buzzer.set { background: rgba(31,157,97,.14); border-color: #226b48; color: #6fe0ac; }
.posm-buzzer strong { font-size: 19px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pos-bill-chips { display: flex; gap: 8px; }
.pos-bill-chips .posm-buzzer { flex: 1; min-width: 0; }
.pos-cov-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pos-cov { min-height: 52px; border-radius: 12px; border: 1px solid #2a3550;
  background: #161d2e; color: #e7ecf7; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer; }
.pos-cov:hover { border-color: #3b6ff5; }
.pos-cov.seats { border-color: #5a6a8f; }
.pos-cov.on { background: #3b6ff5; border-color: #3b6ff5; color: #fff; }
.pos-move-on { background: rgba(59,111,245,.14); border: 1px solid #2b4a8f;
  border-radius: 10px; padding: 8px 10px; }
.pos-bz-read { text-align: center; font-size: 46px; font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; padding: 6px 0 2px; }
.pos-bz-read em { color: #4a5160; font-style: normal; }
.pos-bz-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.pos-bz-key { background: #1a1d24; border: 1px solid #2a2e38; color: #e8eaee;
  border-radius: var(--pos-r); padding: 16px 0; font-size: 21px; font-weight: 600;
  cursor: pointer; }
.pos-bz-key:hover { border-color: #3b6ff5; }
.pos-bz-key.wide { grid-column: span 5; font-size: 17px; }
.pos-lay-list { display: flex; flex-direction: column; gap: 8px; }
.pos-lay-row { display: flex; align-items: center; gap: 10px; background: #171a21;
  border: 1px solid #23262e; border-radius: var(--pos-r); padding: 10px 12px; }
.pos-lay-row.dragging { border-color: #3b6ff5; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.pos-lay-grip { cursor: grab; color: #6c7482; font-size: 17px; touch-action: none;
  padding: 4px 2px; user-select: none; }
.pos-lay-row.dragging .pos-lay-grip { cursor: grabbing; }
.pos-lay-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pos-lay-main strong { font-size: 14.5px; }
.pos-lay-main em { font-style: normal; color: #8b93a1; font-size: 12.5px; }
.pos-lay-slots { width: auto; background: #1a1d24; border: 1px solid #2a2e38;
  color: #e8eaee; border-radius: var(--pos-r); padding: 7px 9px; font-size: 13px; }
.pos-lay-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pos-lay-add select.pos-lay-slots { flex: 1 1 200px; max-width: none !important; }
.pos-view-col { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pos-view-col .pos-notif { flex: 1; min-height: 0; }
.pos-view-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 4px; flex: 0 0 auto; }
.pos-view-head .pos-link { background: none; border: 0; color: #4f8cff;
  font: inherit; font-weight: 600; cursor: pointer; padding: 4px 0; }
.pos-lay-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.pos-lay-warn { background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.4);
  border-radius: var(--pos-r); padding: 10px 13px; font-size: 13px; margin-bottom: 12px; }
.pos-lay-preview { background: #07080b; border: 1px solid #23262e; border-radius: var(--pos-r);
  padding: 12px; max-width: 420px; }
.pos-lay-preview .posm-grid { display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr); }
.pos-lay-preview .posm-tile { pointer-events: none; }
.chip.warn { background: rgba(245,166,35,.15); color: #d9962a; }
.chip.ok { background: rgba(61,190,122,.15); color: #3dbe7a; }
.hint.warn { color: #d9962a; }
.hint.good { color: var(--green); font-weight: 600; }
.hint.bad { color: var(--red); font-weight: 600; }
.table.sm td, .table.sm th { padding: 5px 8px; font-size: 12.5px; }
.input.sm { padding: 4px 8px; font-size: 12.5px; }
.kset { display: flex; flex-direction: column; gap: 2px; }
.kset h4 {
  margin: 18px 0 6px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kset h4:first-child { margin-top: 0; }
.kset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Wrap rather than push. A long label beside a wide select is the shape that
     made this row wider than the dialog holding it; given the choice between
     stacking and forcing everything sideways, stacking is the one somebody can
     still read. */
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.kset-row > div { min-width: 0; flex: 1 1 180px; }
.kset-ic {
  flex: none;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  /* Aligned with the label rather than centred in a two-line row — a row whose
     hint runs to three lines would otherwise float its icon into the middle of
     the paragraph. */
  align-self: flex-start;
  margin-top: 1px;
}
.kset-row .kset-ic svg { display: block; }
.kset-said {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  transition: color .15s ease;
}
.kset-said.saving { color: var(--muted); }
.kset-said.saved { color: var(--green); font-weight: 600; }
.kset-said.error { color: var(--red); font-weight: 600; }
.kt-pic {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  flex: none;
  align-self: flex-start;
  background: var(--surface-2);
}
.kt-price { flex: none; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--muted); }
.kt-chip .kt-pic { width: 28px; height: 28px; border-radius: 5px; }
.kt-chip .kt-price { font-size: 12px; }
.kexample {
  margin: 2px 0 6px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  /* The board's cards size themselves to a lane; in a dialog there is no lane,
     so the example is given one. */
  --kt-w: 100%;
}
.kexample .kt { width: 100%; max-width: 100%; margin: 0; cursor: default; }
.kexample.text-small { font-size: 13px; }
.kexample.text-large { font-size: 18px; }
.kexample, .kexample * { pointer-events: none; }
.pp { width: 100%; border-collapse: collapse; min-width: 520px; }
.pp th, .pp td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 560px) {
.pp { min-width: 396px; }
.pp th, .pp td { padding: 8px 4px; }
}
.pprn { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.pprn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pprn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.pprn-row.ok .pprn-dot { background: #22c55e; }
.pprn-row.warn .pprn-dot { background: #f59e0b; }
.pprn-row.bad .pprn-dot { background: #ef4444; }
.pprn-what { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.pprn-what strong { display: block; font-size: 13.5px; font-weight: 600; }
.pprn-what em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pprn-wait {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(79, 140, 255, .15);
  padding: 3px 7px;
  border-radius: 999px;
}
.pprn-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-all;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  user-select: all;
}
.kview { margin: 4px 0 2px; }
.kview-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kview-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  /* The border thickens on selection, so reserving it here stops the box
     jumping a pixel as you press along the row. */
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.kview-opt:hover { border-color: var(--muted); }
.kview-opt.on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-2));
  color: var(--text);
}
.kview-art { display: block; width: 100%; height: auto; opacity: .75; }
.kview-opt.on .kview-art { opacity: 1; color: var(--primary); }
.kview-what {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 1.2em;     /* the line never collapses, so nothing below it moves */
}
.kset-row strong { display: block; font-size: 13.5px; font-weight: 600; }
.kset-row span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.kset-row select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  /* Wide enough that the chosen value is never clipped by the arrow — "12 min"
     was rendering as "12 mir" on a phone, which is the sort of thing that
     makes somebody doubt the number they just set. */
  min-width: 104px;
  max-width: 190px;
}
.kset-row select, .kset-row .btn.sm { max-width: 100%; }
.kset-row > select + select { margin-left: 6px; }
.kset-row .btn.sm { flex: none; margin-left: 6px; }
.kset-toggle {
  flex: none;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 2px;
  cursor: pointer;
  transition: background .15s ease;
}
.kset-toggle i {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .15s ease, background .15s ease;
}
.kset-toggle.on { background: var(--primary); border-color: var(--primary); }
.kset-toggle.on i { transform: translateX(19px); background: #fff; }
.pos-ticket-card.pending { opacity: .72; }
.pos-kds-wait .dlv { margin-left: 12px; opacity: .85; }
.chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.pos-kds-board { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pos-kds-flow {
  height: 100%;
  /* **No horizontal padding.** Measured at five widths, the sliver of ticket
     showing past the right edge was 12px every time — exactly this padding.
     `scroll-snap-type: x` pulls a card's left edge to the scrollport start,
     swallowing the left padding, and the width it swallows reappears at the
     other end as a strip of the next column. The breathing space now comes
     from the gutters the arrows sit in, outside the scroller. */
  padding: 12px 0;
  /* The whole layout, in three declarations. Multi-column fills downwards then
     wraps to the next column, and a fixed height with horizontal overflow
     turns that wrap into a sideways scroll. */
  column-width: 260px;
  column-gap: 12px;
  column-fill: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pos-kds-flow::-webkit-scrollbar { display: none; }
.pos-kds-flow.view-grid { column-width: 200px; }
.pos-kds-flow.text-small { font-size: 13px; }
.pos-kds-flow.text-large { font-size: 18px; }
.pos-kds-flow.phone {
  columns: auto;
  column-width: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  /* The wall board snaps on x (see `.pos-kds-flow` above); this was resetting
     that to none because the axis turns on a phone, and then never turning it
     back on for the new one. So a finger came to rest wherever it stopped —
     and since `plan()` sizes a chip so that two or three rows fill the screen
     *exactly*, stopping a quarter of a row out means a sliver of a card at the
     top and the matching sliver at the bottom. Jamal: "half the bottom tickets
     hide." `proximity` rather than `mandatory`: a deliberate nudge to see the
     row below should not be dragged back. The chips already carry
     `scroll-snap-align: start`. */
  scroll-snap-type: y proximity;
  /* Snap to 8px BELOW the top edge — the container's own padding — not to the
     edge itself. Snapping to the edge rested the board at scrollTop 8, which
     scrolled the first row's status rings out of view: the parked green and
     the RUSH red are box-shadows painted OUTSIDE the card, and Jamal's photo
     showed the red line across the top of a rush ticket "hidden on first
     glance" until he pulled the board down. With the padding kept in the
     scrollport, the top row rests at the same height with its rings whole. */
  scroll-padding-top: 8px;
  /* Both of these, and both for the same reason. A grid with a definite height
     and `auto` rows stretches them to fill it — and because a chip clips its
     own overflow, its min-height resolves to zero, so a board of thirty
     tickets shares 690px thirty ways and every chip becomes a 15px sliver.
     `start` stops the distribution; `max-content` sizes each row to the
     tallest chip in it. */
  align-content: start;
  /* **And each chip is its own height inside its row.** `max-content` sizes the
     *row* to its tallest card; without this the shorter card stretches to match
     and carries a block of empty dark under its own button — a three-line
     ticket next to a nine-line one grew six lines of nothing. Seen in the
     screenshot, not in any assertion. */
  /* Stop at the ends rather than handing the gesture to whatever is behind:
     belt to `.posm-body.owns-scroll`'s braces, and it also kills the rubber
     band that made the board feel like it had stuck. */
  overscroll-behavior: contain;
}
.pos-kds-flow.phone .kt-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pos-kds-flow.phone .kt-chip {
  /* **A floor, not a ceiling** (Jamal, 2026-08-23). This was `max-height`, and
     everything the card did to cope with that — hiding lines past the fold,
     counting them, drawing "+4 more items", opening again on a tap — is gone
     with it. *"It should never say see more. It should be completely
     expanded."* A nine-line order is nine lines tall and the board scrolls;
     the minimum is only there so a two-line ticket still reads as a card
     rather than a stripe.
     **And not padded out to it, either.** The first cut of this made
     `--kt-chip` a `min-height`, which put a hundred pixels of black under every
     one-line ticket — the same dead space the height cap was originally there
     to reclaim, arrived at from the other direction. A ticket is the height of
     its order and nothing else; `--kt-chip` survives only as the floor the grid
     row uses when the board is nearly empty. */
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* The phone ticket shares the `.kt-chip` class with the little pill
     component, whose base rule sets `white-space: nowrap` — and that
     inherits, so "Waiting for customer to collect" ran straight off the
     card and under its neighbour (Jamal's screenshot, 2026-08-27). The
     ticket wraps; the pills inside it set nowrap for themselves. */
  white-space: normal;
  margin: 0;
  /* The pill's own `padding: 2px 7px` inherits too, and it is why the
     red/green header stopped short of the card's edges — invisible while the
     card behind it was dark, a white sliver down both sides the day the card
     went paper (Jamal's screenshots, 2026-08-28). The ticket is a card, not a
     pill: no padding, and the wall card's radius. */
  padding: 0;
  border-radius: 10px;
}
.pos-kds-flow.phone .kt-chip .kt-head { padding: 5px 8px; gap: 6px;
  /* The band is square and the card is rounded; with the chip's overflow kept
     visible for the rings, the band's top corners have to round themselves. */
  border-radius: 9px 9px 0 0; }
.pos-kds-flow.phone .kt-chip .kt-ref b { font-size: 15px; }
.pos-kds-flow.phone .kt-chip .kt-ref em { font-size: 8.5px; }
.pos-kds-flow.phone .kt-chip .kt-clock { font-size: 12px; }
.pos-kds-flow.phone .kt-chip .kt-lines {
  flex: 0 1 auto; min-height: 0; overflow: hidden; padding: 4px 6px 5px; gap: 0;
}
.pos-kds-flow.phone .kt-chip .kt-line {
  padding: 1px 2px; gap: 6px; align-items: baseline;
  /* The wall board's 44px touch target is most of a phone chip. 34 is still a
     thumb-sized thing to hit and is what `LINE_PX` in kdsphone.js is set to —
     if this changes, that changes with it or the count goes wrong again. */
  min-height: 34px;
}
.pos-kds-flow.phone .kt-chip .kt-line:has(.kt-tick) { align-items: flex-start; }
.pos-kds-flow.phone .kt-chip 
.kt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px;
  padding: 6px 10px 0; }
.kt-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px;
  padding: 2px 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  line-height: 1.5; white-space: nowrap; }
.kt-chip.kiosk { background: #16a34a; color: #fff; }
.kt-chip.qr { background: #2563eb; color: #fff; }
.kt-chip.platform { background: #7c3aed; color: #fff; }
.kt-chip.counter { background: rgba(127,127,127,.25); color: var(--text, #111); }
.kt-chip.dine { background: #111827; color: #fff; }
.kt-chip.away { background: #111827; color: #fff; }
.kt-chip.wait { background: #b45309; color: #fff; }
.kt-chip.later { background: #0e7490; color: #fff; }
.kt-chip.warn { background: #b45309; color: #fff; }
.kt-chip.bad { background: #b91c1c; color: #fff; }
.kt-chip.allergen { background: #dc2626; color: #fff; }
.kt-chip.allergen svg { flex: 0 0 auto; }
.kt-ago, .kt-placed { display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; }
.kt-ago b { font-weight: 700; color: var(--text, #111); }
.kt-ago svg, .kt-placed svg { opacity: .65; }
.kt-placed { margin-left: auto; }
.kt-tick {
  width: 16px; height: 16px; border-width: 1.5px; border-radius: 4px;
  /* Optically on the first line rather than mathematically at its top: a 16px
     box against a ~19px line box wants a couple of pixels to look level with
     the letters instead of level with the line box. */
  margin-top: 2px;
}
.pos-kds-flow.phone .kt-chip .kt-line .kt-qty { margin-top: 0; }
.pos-kds-flow.phone .kt-chip .kt-line.done { box-shadow: inset 2px 0 0 var(--green); }
.pos-kds-flow.phone .kt-chip .kt-band {
  display: block; width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.pos-kds-flow.phone .kt-chip .kt-band:hover { filter: brightness(1.08); }
.pos-kds-flow.phone .kt-chip .kt-band:active { transform: scale(.995); }
.pos-kds-flow.phone .kt-chip .kt-band .kt-state { display: flex; white-space: normal; }
.pos-kds-flow.phone .kt-chip .kt-name {
  font-size: 12.5px; line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere; display: block;
}
.pos-kds-flow.phone .kt-chip .kt-qty { font-size: 12.5px; min-width: 13px; }
.pos-kds-flow.phone .kt-chip .kt-pic { display: none; }
.ksheet-note {
  margin: 0 0 8px; padding: 7px 10px; border-radius: 7px;
  background: rgba(240, 173, 78, .16);
  border-left: 3px solid var(--amber, #f0ad4e);
  color: #ffd79a; font-weight: 700; font-size: 13.5px; white-space: normal;
}
.pos-kds-flow.phone .kt-chip .kt-cnote {
  flex: none;
  margin: 0 6px 3px; padding: 3px 6px;
  border-radius: 5px;
  background: rgba(240, 173, 78, .16);
  border-left: 3px solid var(--amber, #f0ad4e);
  color: #ffd79a; font-size: 11.5px; font-weight: 700; line-height: 1.25;
  white-space: normal;
}
.pos-kds-flow.phone .kt-chip .kt-mods.kt-off { color: #E03131; font-weight: 800;
  font-size: .95em; white-space: normal; }
.pos-kds-flow.phone .kt-chip .kt-mods {
  display: block; font-style: normal; font-size: 11px; line-height: 1.25;
  color: #9aa3b2; white-space: normal;
}
.kt-line.done .kt-mods { text-decoration: line-through; }
.kt-size {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(120, 160, 255, .18);
  color: #9dbcff;
  font-size: .8em;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: 1px;
}
.kt-line.done .kt-size { opacity: .55; }
.pos-kds-flow.phone .kt-chip .kt-modmark {
  flex: none; margin-left: auto;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #06101f; background: var(--amber, #f0ad4e);
  border-radius: 4px; padding: 0 4px; line-height: 15px;
}
.pos-kds-flow.phone .kt-chip .kt-btn {
  flex: 0 0 auto; min-height: 44px; padding: 10px 8px; font-size: 13px;
  font-weight: 800;
  /* The wall board's button is inset 8px with 9px corners; this override
     used to zero the margin and the radius while the wall's shortened
     `width: calc(100% - 16px)` still applied — a square button with all of
     its gap on one side (Jamal: "too square at the bottom with weird
     gaps"). Same inset look as the wall, at chip scale. */
  width: calc(100% - 12px); margin: 2px 6px 6px; border-radius: 8px;
}
.pos-kds-flow.phone .kt-chip .kt-hold .kt-btn.cancel {
  width: auto; margin: 0; flex: 0 0 auto;
}
.pos-kds-flow.phone .kt-chip .kt-hold { border-radius: 0 0 9px 9px; }
.pos-kds-flow.phone .kt-chip .kt-rush, .pos-kds-flow.phone .kt-chip .kt-recalled, .pos-kds-flow.phone .kt-chip .kt-cancel { font-size: 10px; padding: 1px 6px; }
.kt-app-dot {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.pos-kds-board { display: flex; align-items: stretch; min-height: 0; }
.pos-kds-view { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.pos-kds-arrow {
  flex: 0 0 auto; width: 46px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--k-muted); cursor: pointer; padding: 0;
}
.pos-kds-arrow { color: var(--k-ink); }
.pos-kds-arrow:hover:not([disabled]) { color: #fff; background: var(--k-bar); }
.pos-kds-arrow:active:not([disabled]) { background: var(--k-control); }
.pos-kds-arrow[disabled] { opacity: .18; cursor: default; }
.posm .pos-kds-arrow { display: none; }
.pos-kds-sbar { flex: 0 0 auto; padding: 6px 46px 10px; }
.pos-kds-sbar[hidden] { display: none; }
.pos-kds-strack {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--k-track); cursor: pointer;
}
.pos-kds-sthumb {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--k-thumb); min-width: 48px;
}
.pos-kds-strack:hover .pos-kds-sthumb { background: var(--k-thumb-2); }
.pos-kds-sthumb.dragging { background: #4f8cff; }
.posm .pos-kds-sbar { display: none; }
.posm .pos-kds-edge { display: none; }
.pos-kds-edge {
  /* The gutter, whose width the arrow sets. Absolute against .pos-kds-board,
     not .pos-kds-view — that one-word change is the whole fix. */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  border: 0;
  /* Behind the chevron. The arrow is the control and has to stay readable; the
     fade is scenery. */
  z-index: 0;
}
.pos-kds-arrow { position: relative; z-index: 1; }
.pos-kds-edge.on { opacity: 1; }
.pos-kds-edge.left { left: 0;
  background: linear-gradient(to right,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 55%, rgba(255,255,255,0) 100%); }
.pos-kds-edge.right { right: 0;
  background: linear-gradient(to left,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 55%, rgba(255,255,255,0) 100%); }
.kt-dstage { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding: 6px 10px 2px; font-size: 14px; }
.kt-dstage b { font-weight: 800; }
.kt-dage { font-size: 12.5px; opacity: .6; }
.kt-dage.old { opacity: 1; font-weight: 700; color: #ffb020; }
.kt-dwarn { flex: 1 1 100%; font-size: 12.5px; line-height: 1.35; color: #ff6b6b;
  font-weight: 600; }
.kt-dwait { flex: 1 1 100%; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.kds-empty { color: var(--muted); padding: 60px 20px; text-align: center; }
.kds-idle {
  position: relative;
  /* **`column-span: all`, because the board is a multi-column layout.** The
     lanes container fills a 260px column downwards and wraps rightwards, so a
     plain block child is laid into one column and the backdrop came out as a
     narrow strip down the left-hand side. Spanning every column is the one
     declaration that makes a multicol child fill the width. Found by looking
     at the screenshot, not by reading the rule. */
  column-span: all;
  width: 100%;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.kds-idle.has-media {
  margin: 10px 12px;
  width: calc(100% - 24px);
  height: calc(100% - 20px);
  min-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--k-edge);
  background: #0a0c10;
}
.kds-idle-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* object-fit is set inline from the venue's own choice — cover crops, contain
     shows all of it. */
  display: block;
  border-radius: 14px;
}
.kds-idle.has-media .kds-empty {
  position: relative;
  padding: 12px 20px;
  border-radius: 999px;
  color: var(--k-ink-3);
  background: rgba(8, 10, 14, .72);
  backdrop-filter: blur(3px);
}
.kt {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  scroll-snap-align: start;
}
.kt.dine { outline: 4px solid var(--tk-dine); outline-offset: -4px; }
.kt-head {
  /* Layout is set below with the grid rule — this block owns the look. */
  width: 100%;
  padding: 8px 10px 8px 12px;
  background: var(--surface-2);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: var(--text);
  font: inherit;
  font-size: 1.05em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}
.kt-head:hover { filter: brightness(1.12); }
.kt-head:active { transform: scale(.995); }
.kt-clock { justify-self: end; }
.kt-more {
  display: grid;
  place-items: center;
  /* Same stage-scale reasoning as .kt-btn.go: 26px rendered at 21px. The
     header itself is the touch target, so this only has to be *seen* — but it
     has to be seen from across a kitchen. */
  width: 30px; height: 30px;
  margin-left: 2px;
  /* Round, not a rounded square — the chip beside it is a pill and the two were
     speaking different shapes. */
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  opacity: .9;
}
.kt-head:hover .kt-more { background: rgba(255, 255, 255, .22); opacity: 1; }
.kt-app.inhead {
  grid-area: 2 / 3;
  justify-self: start;
  margin: 0;
  padding: 2px 5px;
  border-radius: 5px;
  max-height: 20px;
}
.kt-app.inhead img { max-height: 14px; width: auto; }
.kt-pick {
  justify-self: start;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  font-size: .92em;
  letter-spacing: .05em;
}
.kt-pick.buzzer {
  background: var(--amber, #f5a623);
  color: #14171d;
  font-weight: 800;
  letter-spacing: .02em;
}
.kt.ok .kt-head { background: #2b6c46; color: #fff; }
.kt.warn .kt-head { background: #b9781a; color: #fff; }
.kt.late .kt-head { background: var(--red); color: #fff; }
.kt.cancelled .kt-head { background: #6b1418; color: #fff; }
.kt.parked .kt-head { background: #12794b; color: #fff; }
.kt.parked {
  /* 3px, same as the rush ring — two ringed cards side by side at the top of
     the board paint their top edges at the same height. At 2px the parked
     card's visible top sat a pixel lower than its rushed neighbour's, which
     is exactly the kind of misalignment a top row makes obvious. */
  box-shadow: 0 0 0 3px #1f9d61;
  border-color: #1f9d61;
}
.kt.parked .kt-state { background: #10261c; color: #6fd6a4; border-bottom-color: #1b4132; }
.kt.parked .kt-state i { background: #3ecf8e; }
.kt.parked .kt-dstrip { background: #10261c; }
.kt.parked .kt-btn { background: #1f9d61; color: #04150d; }
.kt.parked .kt-btn:hover { background: #26b672; }
.kt.src .kt-head { background: var(--tk-src); color: var(--tk-srcink); }
.kt.src { box-shadow: inset 5px 0 0 0 var(--tk-srcedge, var(--tk-src)); }
.kt.srcbody { background: var(--tk-srcbody); color: var(--tk-srcbodyink); }
.kt.srcbody .kt-line, .kt.srcbody .kt-note { color: var(--tk-srcbodyink); }
.kt .ktpass { pointer-events: none; }
.kt .ktpass:active { transform: none; filter: none; }
.kt.srcbody .kt-note { background: transparent; border-left-color: currentColor; }
.kt.srcbtn .kt-btn { background: var(--tk-srcbtn); color: var(--tk-srcbtnink); border-top-color: transparent; }
.kt.srcbtn .kt-btn:hover { filter: brightness(1.12); background: var(--tk-srcbtn); color: var(--tk-srcbtnink); }
.kt.parked.src .kt-head { background: #12794b; color: #fff; }
.kt.cancelled.src .kt-head { background: #6b1418; color: #fff; }
.kt-clock.pill {
  background: var(--pb, #e6483d); color: var(--pi, #fff);
  border-radius: 999px; padding: 2px 8px; font-weight: 900;
}
.pos-kds-flow.phone .kt-chip .kt-clock.pill { padding: 1px 7px; }
.kt-app-plain { display: inline-grid; place-items: center; opacity: .9; }
.kt-app-plain svg { display: block; }
.kt.rush {
  box-shadow: 0 0 0 3px var(--red);
  animation: kt-rush-ring 1.1s steps(1, end) infinite;
}
.kt-state {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  font-size: .74em; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase;
  /* The strip carries a sentence now rather than a two-word chip, so it may
     take two lines on a narrow card. Tightened, or the second line floats. */
  line-height: 1.28;
  background: #171a21; color: #8b93a1;
  border-bottom: 1px solid #23262e;
}
.kt-state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pos-hall {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 46px 9px;
  background: #14161b;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pos-hall-views { display: flex; gap: 6px; flex: 0 0 auto; }
.pos-hall-view {
  min-height: 40px;
  padding: 0 14px;
  background: #1d2129;
  border: 1px solid #3a4150;
  border-radius: 999px;
  color: #cdd6e6;
  font-weight: 800;
  font-size: .9em;
  cursor: pointer;
}
.pos-hall-view.on { background: #16233a; border-color: #4f8cff; color: #cfe0ff; }
.pos-hall-kitchens { flex: 1 1 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pos-hall-k {
  min-height: 40px;
  padding: 0 12px;
  background: none;
  border: 1px solid #2a3040;
  border-radius: 999px;
  color: #9aa4b6;
  font-weight: 700;
  font-size: .88em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pos-hall-k.on { background: #1d2129; border-color: #4f8cff; color: #e7ecf5; }
.pos-hall-k em {
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #6d7789;
}
.pos-hall-k.on em { color: #4f8cff; }
.pos-hall-x {
  min-height: 40px;
  padding: 0 14px;
  background: none;
  border: 1px solid #3a4150;
  border-radius: 9px;
  color: #9aa4b6;
  font-weight: 800;
  cursor: pointer;
}
.kt-kitchen {
  padding: 5px 10px 5px 12px;
  background: #1b2130;
  border-top: 2px solid #6d7789;
  color: #cdd6e6;
  font-size: .84em;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.posm .pos-hall { padding: 8px 10px 9px; }
.kt.picking { cursor: pointer; }
.kt.picking:hover { border-color: #4a5364; }
.kt.picked {
  border-color: #4f8cff;
  box-shadow: 0 0 0 2px rgba(79, 140, 255, .45);
}
.kt.picked .kt-head { background: #16233a; }
.kt.nopick { opacity: .45; cursor: not-allowed; }
.kt-nopick {
  padding: 5px 10px 5px 12px;
  background: #2a1c1c;
  border-top: 2px solid #b4523f;
  color: #f0b3a6;
  font-size: .8em;
  font-weight: 800;
}
.pos-push {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 46px 10px;
  background: #14161b;
  border-top: 1px solid var(--border);
}
.pos-push-n {
  flex: 0 0 auto;
  color: #cdd6e6;
  font-weight: 800;
  font-size: .92em;
}
.pos-push-steps { flex: 1 1 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.pos-push-step {
  min-height: 44px;
  padding: 0 18px;
  background: #1d2129;
  border: 1px solid #3a4150;
  border-radius: 9px;
  color: #e7ecf5;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pos-push-step:hover:not([disabled]) { background: #262c36; border-color: #4f8cff; }
.pos-push-step[disabled] { opacity: .35; cursor: default; }
.pos-push-x {
  min-height: 44px;
  padding: 0 16px;
  background: none;
  border: 1px solid #3a4150;
  border-radius: 9px;
  color: #9aa4b6;
  font-weight: 800;
  cursor: pointer;
}
.posm .pos-push { padding: 8px 10px 10px; flex-wrap: wrap; }
.pushlist { max-height: 40vh; overflow: auto; margin: 8px 0; }
.pushrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.pushrow b { flex: 0 0 auto; min-width: 72px; color: #e7ecf5; }
.pushrow span { color: #9aa4b6; font-size: .92em; }
.pushrow.quiet span { color: #6d7789; font-style: italic; }
.pushrow.blocked { opacity: .6; }
.pushrow.blocked b { text-decoration: line-through; }
.pos-note.quote { color: #9fe7c1; font-style: italic; margin-top: 10px; }
.kt.holding {
  border-color: #2f8f5b;
  box-shadow: 0 0 0 2px rgba(62, 201, 138, .35);
}
.kt.holding .kt-head, .kt.holding .kt-state, .kt.holding .kt-dband, .kt.holding .kt-dstrip { background: #123021; }
.kt.holding .kt-lines { opacity: .5; }
.kt.holding .kt-line { pointer-events: none; }
@keyframes kt-hold-flash {
  0%, 100% { background: #123021; }
  50% { background: #1d5c3a; }
}
.kt.holding.flashing { animation: kt-hold-flash 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.kt.holding.flashing { animation: none; background: #1d5c3a; }
}
.kt-hold {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 9px 12px;
  background: #123021;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.kt-holdtext {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  /* **Both halves whole, on two lines if that is what it takes** (v5.201.0).
     The countdown answers "have I still got time to press Cancel"; the label
     answers "what did I just say happened to this order". Trimming either to
     fit one line answers one of those questions with nothing — a card caught
     mid-window read **"At th… leaving in 13s"**, which is a state nobody can
     act on. The card is fifteen seconds from leaving the board, so a second
     line costs nothing anybody will still be looking at. */
  flex-wrap: wrap;
  gap: 2px 6px;
  color: #9fe7c1;
  font-size: .9em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kt-holdtext em {
  font-style: normal;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.kt-holdtext b {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #cdf3de;
}
.kt-btn.cancel {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  background: #23282f;
  border: 1px solid #3a4150;
  border-radius: 9px;
  color: #e7ecf5;
  font-weight: 800;
  cursor: pointer;
}
.kt-btn.cancel:hover { background: #2c323b; }
.kt-btn.cancel:active { transform: scale(.97); }
.pos-kds-flow.phone .kt-chip .kt-hold { padding: 4px 8px 5px; gap: 6px; }
.pos-kds-flow.phone .kt-chip .kt-holdtext { font-size: 11px; }
.pos-kds-flow.phone .kt-chip .kt-btn.cancel {
  min-height: 26px; padding: 0 10px; font-size: 11px; border-radius: 7px;
}
.kt-dband {
  background: #131b2b;
  border-top: 2px solid var(--dc, #4f8cff);
  padding: 7px 10px 8px 12px;
}
.kt-dtop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.kt-dmark {
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--dm, #7a8699);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}
.kt-dwhat {
  color: var(--dc, #4f8cff);
  font-weight: 900;
  font-size: .82em;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.kt-dwho { color: #9aa4b6; font-size: .82em; font-weight: 700; }
.kt-drider {
  margin-left: auto;
  color: #cdd6e6;
  font-size: .82em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kt-drider.unknown { color: #6d7789; font-weight: 600; font-style: italic; }
.kt-dfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 10px;
  margin-top: 6px;
}
.kt-dfact { display: flex; flex-direction: column; min-width: 0; }
.kt-dfact em {
  font-style: normal;
  color: #6d7789;
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kt-dfact b {
  color: #e7ecf5;
  font-size: .88em;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-dfact.unknown b {
  color: #6d7789;
  font-weight: 600;
  font-style: italic;
  font-size: .8em;
  white-space: normal;
}
.kt-dstrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #131b2b;
  border-top: 2px solid var(--dc, #4f8cff);
  color: var(--dc, #4f8cff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  /* Wraps rather than trailing off. "Deliveroo · Marek K. · £3.49 c…" hid the
     word *collection* — the rider's name and the fee are two of the three
     things the strip exists to say, and clipping the third is the same
     "see more" the fold went out for (Jamal, 2026-08-23). */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.kt-state.making { color: #8b93a1; }
.kt-state.driver, .kt-state.customer, .kt-state.waiter { color: #04150d; background: #2fbf6b; }
.kt-state.done { color: #565d6b; }
.kt-state.driver i, .kt-state.customer i, .kt-state.waiter i { display: none; }
.kt-chip.wait-driver, .kt-chip.wait-customer, .kt-chip.wait-waiter { box-shadow: inset 0 0 0 2px #2fbf6b; }
.kt-state.plated.making { color: #f5c26b; background: #241c0f; }
.pos-kds-stations {
  display: flex; gap: 0; align-items: stretch;
  padding: 8px 14px 0; flex: 0 0 auto;
  background: var(--k-bar);
}
.pos-kds-stations[hidden] { display: none; }
.pos-kds-station {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--k-edge); background: var(--k-tile); color: var(--k-ink);
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.pos-kds-station:first-child { border-radius: 9px 0 0 9px; }
.pos-kds-station:last-child { border-radius: 0 9px 9px 0; border-left-width: 0; }
.pos-kds-station em {
  font-style: normal; font-weight: 800; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.pos-kds-station.on {
  background: #2fbf6b; border-color: #2fbf6b; color: #04150d;
}
.pos-kds-station.on em { opacity: .75; }
.posm .pos-kds-stations { padding: 6px 10px 0; }
.posm .pos-kds-station { padding: 7px 13px; font-size: 12px; }
.pos-kds-states {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px; flex: 0 0 auto;
  background: var(--k-bar); border-bottom: 1px solid var(--k-edge-2);
}
.pos-kds-states[hidden] { display: none; }
.pos-kds-state {
  --tone: var(--k-muted);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--k-edge); background: var(--k-tile);
  color: var(--tone); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.pos-kds-state em { font-style: normal; font-weight: 800; opacity: .7;
  font-variant-numeric: tabular-nums; }
.pos-kds-state.driver, .pos-kds-state.customer, .pos-kds-state.waiter { --tone: #2fbf6b; }
.pos-kds-state.all, .pos-kds-state.making { --tone: var(--k-ink); }
.pos-kds-state.back { --tone: #f5a623; }
.pos-kds-state.on { background: var(--tone); border-color: var(--tone); color: var(--k-oncontrast); }
.pos-kds-state.on em { color: var(--k-oncontrast); opacity: .8; }
.posm .pos-kds-states { padding: 6px 10px; gap: 5px; }
.posm .pos-kds-state { padding: 4px 9px; font-size: 11px; }
.kt.pending { opacity: .72; }
.kt.app { border-left: 4px solid var(--tk-app, var(--primary)); }
.kt-cancel, .kt-rush, .kt-pending {
  padding: 5px 12px;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .07em;
}
.kt-cancel { background: var(--red); color: #fff; }
@keyframes kt-rush-flash {
  0%, 44%   { background-color: var(--red); color: #fff; }
  50%, 94%  { background-color: #fff; color: #b00020; }
  100%      { background-color: var(--red); color: #fff; }
}
.kt-rush {
  background: var(--red); color: #fff;
  animation: kt-rush-flash 1.1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
.kt-rush, .kt.rush { animation: none; }
.kt-rush { background: var(--red); color: #fff; }
.kt.rush { box-shadow: 0 0 0 3px var(--red); }
}
@keyframes kt-rush-ring {
  0%, 44%  { box-shadow: 0 0 0 3px var(--red); }
  50%, 94% { box-shadow: 0 0 0 3px #fff; }
  100%     { box-shadow: 0 0 0 3px var(--red); }
}
.kt-pending { color: var(--amber); }
.kt-where {
  text-align: center;
  font-size: 1.15em;
  font-weight: 800;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.kt-who { padding: 4px 12px; color: var(--muted); font-size: .86em; }
.kt-note {
  margin: 5px 10px;
  padding: 6px 10px;
  color: var(--tk-note-ink);
  background: var(--tk-note-bg);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  font-size: .92em;
  font-weight: 700;
}
.kt-cutlery { padding: 6px 12px 0; color: var(--muted); font-size: .82em;
  text-transform: uppercase; letter-spacing: .04em; }
.kt-code { padding: 6px 12px 0; font-size: .86em; color: var(--muted); }
.kt-code b { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.kt-course {
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
  font-size: .68em;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
}
.kt-lines { padding: 4px 0; }
.kt-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  /* 11px, not 7px. The line — not the box inside it — is what a finger hits,
     and on the register's scaled stage (~0.82) 7px of padding rendered a 30px
     row. Sized for the glass. */
  padding: 11px 12px;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kt-line:hover { background: var(--surface-2); }
.kt-line.done .kt-name { color: var(--muted); text-decoration: line-through; }
.kt-line.done .kt-qty { color: var(--muted); }
.kt-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid #4a5060;
  border-radius: 5px;
  color: #fff;
}
.kt-line.done .kt-tick {
  background: var(--green);
  border-color: var(--green);
}
.kt-line.done {
  background: rgba(46, 160, 87, .10);
  box-shadow: inset 3px 0 0 var(--green);
}
.kt-line { transition: background .12s ease-out; }
.kt-line:hover .kt-tick { border-color: var(--green); }
.kt-qty { flex: none; min-width: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kt-name { flex: 1; min-width: 0; line-height: 1.3; }
.kt-name em { display: block; font-style: normal; font-size: .82em; color: var(--muted); }
.kt-name em.note { color: var(--amber); }
.kt-name em.kt-off { color: #E03131; font-weight: 800; font-size: .95em;
  letter-spacing: .01em; white-space: normal; }
.kt-line.done .kt-name em.kt-off { color: var(--muted); }
.kt-name em.alg { color: var(--amber); }
.kt-warn { padding: 6px 12px; color: var(--amber); font-size: .8em; }
.kt-part { padding: 6px 12px; color: var(--muted); font-size: .78em; font-weight: 700; }
.kt-btn {
  display: block;
  width: 100%;
  padding: 11px;
  background: var(--surface-2);
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.kt-btn:hover { background: var(--primary); color: var(--primary-ink); }
.kt-btn.go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 16px);
  margin: 8px;
  /* 16px, not 12px. The kitchen view sits on the register's scaled design
     stage — about 0.82 — so 12px of padding rendered a 38px button, under the
     44px a wet finger needs. Sized for the glass, not for the stylesheet. */
  padding: 16px 10px;
  border-radius: 9px;
  border-top: 0;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.kt-btn.go:hover { filter: brightness(1.08); }
.kt-btn.go:active { transform: translateY(1px); box-shadow: none; }
.kt-btn.go svg { flex: none; opacity: .9; }
.pos-kds-tool {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  padding: 7px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}
.pos-kds-tool:hover { color: var(--text); border-color: var(--primary); }
.ksheet-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.ksheet-where {
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.ksheet-due { font-size: 13px; font-weight: 700; color: var(--text); }
.ksheet-count { font-size: 12.5px; color: var(--muted); }
.kshtool {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.kshtool:hover { color: var(--text); }
.kshtool.on { border-color: var(--red); color: var(--red); }
.ksheet-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.ksheet-lines {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); overflow: hidden;
}
.kshl {
  display: grid;
  grid-template-columns: 22px 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: none; border: 0; border-top: 1px solid var(--border);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.kshl:first-child { border-top: 0; }
.kshl:hover { background: var(--surface-2); }
.kshl-tick {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--border); border-radius: 6px; color: transparent;
}
.kshl.on .kshl-tick, .kshl.done .kshl-tick {
  background: var(--green, #3ecf8e); border-color: var(--green, #3ecf8e); color: #04150d;
}
.kshl.on { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.kshl-qty {
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  text-align: right; margin-top: 1px;
}
.kshl-main { min-width: 0; }
.kshl-dish { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.kshl.done .kshl-dish { color: var(--muted); text-decoration: line-through; }
.kshl.done .kshl-qty { color: var(--muted); }
.kshl-choices { display: block; margin-top: 3px; }
.kshl-choice {
  display: block; padding-left: 11px; position: relative;
  font-size: 13px; line-height: 1.45; color: #9aa3b2;
}
.kshl-choice::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7;
}
.kshl-choice.off { color: #ff8686; font-weight: 700; }
.kshl-note {
  display: block; margin-top: 4px; font-size: 13px; line-height: 1.4;
  color: #ffd79a; font-style: italic;
}
.kshl-alg {
  display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(230, 72, 61, .18); color: #ff9c93;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.recent-row span { display: block; color: var(--muted); font-size: 12px; }
.allday { display: flex; flex-direction: column; }
.allday-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.allday-row b {
  min-width: 34px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.allday-row span { flex: 1; font-size: 15px; }
.allday-row em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kt-recalled {
  padding: 6px 12px;
  text-align: center;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--red);
  background: rgba(255,92,92,.1);
}
.kt.flash { animation: ktflash 1.1s ease 2; }
@keyframes ktflash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,140,255,0); }
  50% { box-shadow: 0 0 0 3px var(--primary); }
}
.ctx-code {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
}
.ctx-code-val {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ctx-code-val .unset { color: var(--muted); font-size: 13px; letter-spacing: 0; font-weight: 500; }
.ctx-eye { color: var(--muted); display: grid; place-items: center; letter-spacing: 0; }
.ctx-code-val:hover .ctx-eye { color: var(--text); }
.allday-row .from { color: var(--primary); font-size: 11.5px; }
.pos-wait {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin: 0 0 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pos-wait:hover { border-color: var(--primary); }
.pos-wait.manual { border-color: var(--amber); }
.pos-wait-n { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-wait-n em { font-size: 13px; font-style: normal; font-weight: 700; margin-left: 1px; }
.pos-wait-l { font-size: 12px; color: var(--muted); }
.pos-wait.manual .pos-wait-l { color: var(--amber); }
.posm-waitwrap { padding: 4px 16px 0; }
.pos-kds-prep {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 10px 14px;
  border-top: 1px solid var(--k-edge);
  background: var(--k-panel);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.pos-kds-prep::-webkit-scrollbar { display: none; }
.pos-kds-prep[hidden] { display: none; }
.pos-prep-item { display: inline-flex; align-items: baseline; gap: 6px; }
.pos-prep-item strong { font-size: 14px; font-weight: 650; color: #c9ced8; }
.pos-prep-item em {
  font-style: normal;
  font-size: 19px;
  font-weight: 800;
  color: #e8eaee;
  font-variant-numeric: tabular-nums;
}
.pos-prep-item.miss strong { color: var(--amber); font-size: 12.5px; }
.pos-pend-kitchen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.pos-pend-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-right: auto;
}
.pos-pend-state.ready { color: var(--amber); border-color: rgba(245,166,35,.4); }
.pos-pend-state.done { color: var(--green); border-color: rgba(62,207,142,.4); }
.kset-row.blocked { opacity: .65; }
#hp-lang-offer { position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 9000; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 10px 8px 18px; box-shadow: 0 18px 50px rgba(0,0,0,.45); max-width: calc(100vw - 24px); }
.hp-lang-txt { font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
#hp-lang-offer button { border-radius: 999px; padding: 7px 15px; font-size: 13.5px;
  font-weight: 700; font-family: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); white-space: nowrap; }
#hp-lang-offer .hp-lang-yes { background: var(--primary); border-color: var(--primary);
  color: var(--primary-ink); }
.pnl-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.pnl-name strong { font-size: 18px; letter-spacing: -.01em; }
.pnl-line-name { font-size: 14px; color: var(--muted); font-weight: 600; }
.seg { background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; }
.seg.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.gp-row-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.gp-row-name i { width: 12px; height: 4px; border-radius: 2px; display: inline-block; }
.gp-row-name small { color: var(--muted); font-size: 11px; width: 100%; padding-left: 19px; }
[hidden] { display: none !important; }
.brand { position: relative; }
.side-hide { display: flex; align-items: center; justify-content: center; width: 30px;
  height: 30px; margin-left: auto; border: none; background: none; color: var(--muted);
  cursor: pointer; border-radius: 8px; flex: 0 0 auto; }
.side-hide:hover { background: var(--surface-2); color: var(--text); }
.sidebar.rail { width: 64px; flex: 0 0 64px; padding: 18px 8px; }
.sidebar.rail .brand { padding: 6px 0 14px; justify-content: center; }
.sidebar.rail .brand-logo, .sidebar.rail .brand-name, .sidebar.rail .nav a > span, .sidebar.rail .ctx-one-txt, .sidebar.rail .ctx-one-caret, .sidebar.rail .ctx-code, .sidebar.rail .sidebar-foot span:not(.dot), .sidebar.rail .side-settings > span { display: none; }
.sidebar.rail .side-hide { margin: 0 auto; }
.sidebar.rail .nav a, .sidebar.rail .side-settings {
  justify-content: center; padding: 10px 0; }
.sidebar.rail .ctx-one { justify-content: center; padding: 8px 0; }
.sidebar.rail .sidebar-foot { justify-content: center; padding: 6px 0; }
.sidebar.rail .nav a .badge, .sidebar.rail .nav a .pill { display: none; }
.ctx-one { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  margin-bottom: 10px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); cursor: pointer;
  color: var(--text); }
.ctx-one:hover { border-color: var(--primary); }
.ctx-one-mark { flex: 0 0 28px; height: 28px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(150deg, #ff9a56, #ff5f6d); color: #fff; }
.ctx-one-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ctx-one-name { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ctx-one-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ctx-one-sub:empty { display: none; }
.ctx-one-caret { flex: 0 0 auto; color: var(--muted); display: flex; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  margin: -26px -30px 18px; padding: 10px 30px; min-height: 56px;
  border-bottom: 1px solid var(--border); }
.topbar::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px); }
@supports not (backdrop-filter: blur(1px)) {
.topbar::before { background: var(--bg); }
}
.tb-burger { display: none; }
.tb-title { font-size: 15px; font-weight: 650; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tb-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center;
  justify-content: center; }
.tb-icon:hover { background: var(--surface-2); color: var(--text); }
.tb-avatar { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 12px;
  font-weight: 700; letter-spacing: .02em; color: #fff; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(150deg, #7f8cff, #4f8cff);
  border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--primary); }
.tb-avatar:hover { box-shadow: 0 0 0 3px var(--primary); }
@media (max-width: 860px) {
.topbar { position: fixed; top: 0; left: 0; right: 0; margin: 0;
    padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
.content { padding-top: calc(68px + env(safe-area-inset-top)); }
body.pos-open .content, .till-site .content { padding-top: 16px; }
.tb-burger { display: flex; align-items: center; justify-content: center; width: 36px;
    height: 36px; border: none; background: none; color: var(--text); cursor: pointer;
    border-radius: 10px; }
.side-hide { display: flex; align-items: center; justify-content: center; width: 32px;
    height: 32px; border: none; background: none; color: var(--muted); cursor: pointer; }
}
body.pos-open .topbar, .till-site .topbar { display: none !important; }
.pack-name { font-size: 17px; margin-right: 8px; }
.pos-item { position: relative; }
.pos-tile-n { position: absolute; top: 4px; right: 6px; min-width: 20px; height: 20px;
  border-radius: 10px; background: rgba(255,255,255,.92); color: #14171d;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; padding: 0 5px; }
.pos-tile-stock { position: absolute; bottom: 4px; right: 6px; font-style: normal;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.pos-stock-low { background: #f5a623; color: #21160a; }
.pos-tile-free { background: #2b3140; color: #cfd6e4; }
.pos-root.pos-natural { align-items: stretch; justify-content: stretch; }
.pos-root.pos-natural .pos-stage { transform: none; font-size: 15px; }
.pos-stock-out { background: #ff5c5c; color: #2a0c0c; }
.pos-item-out { outline: 2px solid #ff5c5c; outline-offset: -2px; position: relative; }
.pos-item-out::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(13,15,19,.55); pointer-events: none; }
.pos-item-out > * { position: relative; z-index: 1; }
.rp-prn-name { flex: 1; min-width: 0; }
.rp-prn-name input { width: 100%; max-width: 320px; font-weight: 600; }
.pa-name { font-weight: 600; }
.kt-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
}
.kt-ref { display: contents; }
.kt-ref em { grid-area: 1 / 1; align-self: end;
  font-style: normal; font-size: 10px; letter-spacing: .1em; line-height: 1.15;
  text-transform: uppercase; opacity: .55; }
.kt-ref b { grid-area: 2 / 1; align-self: center;
  font-size: 19px; line-height: 1.05; letter-spacing: -.01em; }
.kt-call b { min-width: 0; overflow-wrap: anywhere; }
.kt-call.table b, .kt-call.code b { font-size: 17px; }
.kt-pick { grid-area: 2 / 2; }
.kt-clock { grid-area: 2 / 4; }
.kt-more { grid-area: 1 / 5 / 3 / 6; }
.kt-app { display: flex; align-items: center; justify-content: center; border-radius: 6px;
  padding: 5px 10px; margin: 6px 0 2px; font-weight: 800; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; }
.kt-app.logo { padding: 6px 12px; }
.kt-app img { display: block; max-width: 100%; height: 20px; width: auto; object-fit: contain; }
.kt-app-mark { height: 13px; width: auto; max-width: 74px; object-fit: contain;
  display: block; flex: 0 0 auto;
  background: #fff; padding: 3px 6px; border-radius: 4px; box-sizing: content-box; }
.ksheet-tools {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px;
}
.ksheet-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 16px 10px; background: #1a1d24; border: 1px solid #2a2e38;
  border-radius: 12px; color: #e8eaee; font-size: 13px; font-weight: 600; cursor: pointer;
}
.modal.pos-fit .modal-body { scrollbar-width: thin; scrollbar-color: #3a4150 transparent; }
.modal.pos-fit .modal-body::-webkit-scrollbar { width: 10px; }
.modal.pos-fit .modal-body::-webkit-scrollbar-thumb {
  background: #3a4150; border-radius: 999px; border: 3px solid transparent;
  background-clip: content-box;
}
@media (max-height: 460px) {
.ksheet-tool { padding: 10px 8px; gap: 4px; font-size: 12.5px; }
}
.ksheet-tool:hover { border-color: var(--primary); }
select, input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
.pos-term-wait { display: flex; align-items: center; gap: 12px; padding: 14px 4px 4px; }
.pos-term-wait strong { font-size: 15px; }
.pos-term-spin { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  border: 3px solid rgba(61,190,122,.25); border-top-color: #3dbe7a;
  animation: pos-term-spin .8s linear infinite; }
@keyframes pos-term-spin { to { transform: rotate(360deg); } }
.pos-term-count { margin: 3px 0 0; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
button .pos-term-count { display: inline; margin: 0; color: inherit; opacity: .85; }
.pos-term-reader { border: 1px solid #2a2e38; border-radius: 12px; padding: 12px 14px;
  margin-top: 14px; background: #14161c; }
.pos-term-reader strong { display: block; font-size: 14px; color: #e8eaee; margin-bottom: 5px; }
.pos-term-reader p { margin: 0; font-size: 13px; line-height: 1.5; color: #8b93a1; }
.pos-term-reader em { display: block; font-style: normal; font-size: 12px;
  color: #6c7482; margin-top: 8px; }
.pos-term-reader.on { border-color: rgba(62,201,138,.4); }
.pos-term-reader.on strong { color: #3ec98a; }
.pos-rcpt-list #tx-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; --pos-sc-bg: #0c0e12; }
@media (min-width: 740px) {
.posm-flow {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 16px;
    padding-right: 16px;
  }
.posm-flow .posm-top { grid-column: 1 / -1; grid-row: 1; }
.posm-flow .posm-flowsteps { grid-column: 1; grid-row: 2; flex-direction: column;
    overflow-x: visible; overflow-y: auto; }
.posm-flow .posm-flowsteps button { text-align: left; }
.posm-flow .posm-flownote { grid-column: 1; grid-row: 3; align-self: end; }
.posm-flow .posm-flowfoot { grid-column: 1; grid-row: 4; }
.posm-flow .posm-flowhead { grid-column: 2; grid-row: 2; border-radius: 12px 12px 0 0;
    align-self: start; }
.posm-flow .posm-flowgrid {
    grid-column: 2; grid-row: 3 / span 2;
    /* Content-sized rows, aligned to the top. `1fr` rows in a panel this tall
       gave two options a tile each the height of the screen. */
    grid-template-rows: none;
    grid-auto-rows: minmax(92px, 132px);
    align-content: start;
    overflow-y: auto;
    padding: 12px 0 14px;
  }
}
.pos-splitbtn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: rgba(79,140,255,.10); border: 1px solid rgba(79,140,255,.45);
  border-radius: var(--pos-r); padding: 13px 15px; margin-bottom: 14px;
  color: #cfdcff; font-family: inherit; text-align: left; cursor: pointer;
}
.pos-splitbtn:hover { background: rgba(79,140,255,.18); border-color: #4f8cff; }
.pos-splitbtn svg { flex: 0 0 auto; }
.pos-splitbtn span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pos-splitbtn strong { font-size: 15px; font-weight: 700; color: #e8eaee; }
.pos-splitbtn em { font-style: normal; font-size: 12.5px; color: #8b93a1; }
.pos-splitrun {
  background: #14161c; border: 1px solid #2a2e38; border-radius: var(--pos-r);
  padding: 12px 14px; margin-bottom: 14px;
}
.pos-splitrun-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pos-splitrun-top strong { font-size: 15px; color: #e8eaee; }
.pos-splitrun-x {
  background: none; border: none; color: #8b93a1; font-family: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0;
}
.pos-splitrun-x:hover { color: #ff6b6b; }
.pos-splitrun-x.muted { color: #565d6b; cursor: default; }
.pos-splitrun-x.muted:hover { color: #565d6b; }
.pos-splitrun-dots { display: flex; gap: 5px; margin: 9px 0 8px; }
.pos-splitrun-dots i { flex: 1; height: 4px; border-radius: 2px; background: #2a2e38; }
.pos-splitrun-dots i.done { background: #3ec98a; }
.pos-splitrun-dots i.now { background: #4f8cff; }
.pos-splitrun-sum { display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: #8b93a1; }
.pos-splitrun-sum b { color: #e8eaee; font-weight: 700; }
.posm-paylist .pos-splitbtn, .posm-paylist .pos-splitrun { margin: 0 0 12px; }
.fc-qty { width: 78px; height: 32px; text-align: right; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; color: inherit; font: inherit;
  font-variant-numeric: tabular-nums; padding: 0 8px; }
.grn-name { max-width: 320px; }
.grn-name > span { display: block; }
.kexample { display: flex; justify-content: center; }
.kexample .kt { width: 100%; max-width: 310px; margin: 0; }
.ksrc-row {
  display: grid; gap: 10px; padding: 12px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name pick' 'swatches swatches' 'prev prev';
  align-items: start;
}
@media (min-width: 900px) {
.ksrc-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(240px, 300px);
    grid-template-areas: 'name pick prev' 'swatches swatches prev';
  }
}
.ksrc-row.edited { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.ksrc-name { grid-area: name; }
.ksheet-id {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 14px;
  background: var(--surface-2); border-radius: 12px;
}
.ksheet-id-main { min-width: 0; }
.ksheet-id-lab {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.ksheet-id-val {
  display: block; margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 28px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--text);
  user-select: all;   /* one tap selects the whole thing, not a word of it */
}
.ksheet-id-how { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.ksheet-id-rows { display: grid; gap: 8px; margin: 0; text-align: right; }
.ksheet-id-rows div { margin: 0; }
.ksheet-id-rows dt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.ksheet-id-rows dd {
  margin: 1px 0 0; font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
.ksheet-id { gap: 12px; }
.ksheet-id-rows { text-align: left; grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 20px; }
}
.tm-top { fill: var(--surface-2); stroke: var(--muted); stroke-width: .1; }
.tm-chair { fill: var(--border); }
.tm-num { font-size: .95px; font-weight: 700; fill: var(--text); text-anchor: middle;
  pointer-events: none; font-variant-numeric: tabular-nums; }
.ao-qty { color: var(--muted); }
.ta-name { font-size: 13.5px; }
.paper {
  background: #fdfdf9; color: #222; width: min(320px, 100%);
  padding: 18px 16px 0; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.45;
}
.hub-venue-name { font-weight: 700; font-size: 17px; }
.posm-flowtile { position: relative; }
.posm-flowtile .fl-x {
  position: absolute; top: 4px; right: 6px; font-style: normal;
  width: 22px; height: 22px; line-height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; font-size: 15px;
  text-align: center; z-index: 1;
}
#kds-board .kt, .kexample .kt {
  --text: #16181d;
  --muted: #6d7686;
  --surface: #fff;
  --surface-2: #f2f4f7;
  --border: #e4e7ee;
  background: #fff;
  border-color: var(--k-card-edge);
  box-shadow: var(--k-card-shadow);
  color: #16181d;
}
#kds-board .kt .kt-head, .kexample .kt .kt-head {
  background: #fff;
  color: #16181d;
  border-bottom: 1px solid #eef0f4;
}
#kds-board .kt.ok .kt-head, .kexample .kt.ok .kt-head { background: #fff; color: #16181d; }
#kds-board .kt.warn .kt-head, .kexample .kt.warn .kt-head { background: #fff; color: #16181d; }
#kds-board .kt.warn .kt-more { background: rgba(0, 0, 0, .07); }
#kds-board .kt.warn .kt-head:hover { filter: none; background: #fafbfc; }
#kds-board .kt.late .kt-head, .kexample .kt.late .kt-head { background: var(--red); color: #fff; }
#kds-board .kt.parked .kt-head, .kexample .kt.parked .kt-head { background: #12794b; color: #fff; }
#kds-board .kt.cancelled .kt-head, .kexample .kt.cancelled .kt-head { background: #6b1418; color: #fff; }
#kds-board .kt .kt-more, .kexample .kt .kt-more { background: rgba(0, 0, 0, .07); }
#kds-board .kt .kt-head:hover .kt-more { background: rgba(0, 0, 0, .13); }
#kds-board .kt.warn .kt-more, #kds-board .kt.late .kt-more, #kds-board .kt.parked .kt-more, #kds-board .kt.cancelled .kt-more {
  background: rgba(255, 255, 255, .18);
}
#kds-board .kt .kt-head:hover, .kexample .kt .kt-head:hover { filter: none; background: #fafbfc; }
#kds-board .kt.warn .kt-head:hover, #kds-board .kt.late .kt-head:hover, #kds-board .kt.parked .kt-head:hover { filter: brightness(1.08); }
#kds-board .kt .kt-pick, .kexample .kt .kt-pick { background: rgba(0, 0, 0, .08); }
#kds-board .kt .kt-pick.buzzer, .kexample .kt .kt-pick.buzzer {
  background: var(--amber, #f5a623); color: #14171d;
}
#kds-board .kt .kt-state, .kexample .kt .kt-state {
  background: #f2f4f7; color: #57606f; border-bottom: 1px solid #e9ebf1;
}
#kds-board .kt.parked .kt-state, .kexample .kt.parked .kt-state {
  background: #e7f6ee; color: #12794b; border-bottom-color: #cdebdb;
}
#kds-board .kt .kt-line em, .kexample .kt .kt-line em { color: #7a8494; font-style: normal; }
#kds-board .kt .kt-line em.note, .kexample .kt .kt-line em.note { color: var(--amber); }
#kds-board .kt .kt-line em.alg, .kexample .kt .kt-line em.alg { color: #b91c1c; font-weight: 700; }
.kt-who { display: flex; align-items: center; gap: 6px; }
.kt-who svg { flex: 0 0 auto; opacity: .65; }
.pos-kds-board { background: var(--k-ground); }
.kset-cards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kset-card { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 12px; min-width: 70px; min-height: 52px; border-radius: 10px;
  cursor: pointer; border: 1.5px solid var(--line, #2a2f38); background: transparent;
  color: inherit; font: inherit; font-size: 12.5px; line-height: 1.25; opacity: .72; }
.kset-card svg { display: block; }
.kset-card.on { border-color: #3b82f6; color: #3b82f6; opacity: 1;
  background: rgba(59, 130, 246, .09); font-weight: 700; }
.pos-tabs { display: flex; flex-direction: column; gap: 8px; }
.pos-tab-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line, #2a2f38); background: transparent; color: inherit; font: inherit; }
.pos-tab-row:hover { border-color: #3b82f6; }
.pos-tab-name { font-weight: 800; font-size: 15px; }
.pos-tab-age { grid-row: 1 / 3; align-self: center; font-size: 12.5px; opacity: .8; }
.pos-tab-age.stale { color: #e5484d; font-weight: 700; opacity: 1; }
.pos-tab-sub { font-size: 12px; opacity: .65; }
.pos-tbl-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
.pos-tbl-tab {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12.5px;
  border: 1px solid var(--line, #2a2f38); background: transparent; color: inherit; font-weight: 600;
}
.pos-tbl-tab span { opacity: .55; font-weight: 700; }
.pos-tbl-tab.on { border-color: #3b82f6; background: #1a2537; }
.pos-tbl-tab.on span { opacity: .85; }
.pos-tm-wrap { width: 100%; }
.pos-tm-svg { display: block; width: 100%; height: auto; }
.pos-tm { cursor: pointer; }
.pos-tm .tm-num { pointer-events: none; }
.pos-tm-sub { font-size: .8px; font-weight: 600; fill: var(--muted); text-anchor: middle; }
.pos-tm:hover .tm-top { stroke: #3b82f6; }
.pos-tm.seated .tm-top { fill: #12241a; stroke: #1f8f4e; }
.pos-tm.seated .tm-chair { fill: #1f8f4e; }
.pos-tm.seated .pos-tm-sub { fill: #7bdca4; }
.pos-tm.stale .tm-top { fill: #2a1618; stroke: #e5484d; }
.pos-tm.stale .tm-chair { fill: #e5484d; }
.pos-tm.stale .pos-tm-sub { fill: #ff9ea1; }
.pos-tm.off .tm-top { opacity: .45; }
.pos-tm.off .tm-num { opacity: .5; }
.snd-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.snd-row .kset-ic { width: 22px; align-self: center; margin-top: 0; }
.snd-what {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.snd-pick {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  max-width: 46vw; padding: 6px 6px 6px 8px; border-radius: 9px;
  border: 1px solid var(--line, #2a2f38); background: transparent;
  color: inherit; font: inherit; font-size: 12.5px; cursor: pointer;
}
.snd-pick:hover { border-color: #3b82f6; }
.snd-pick > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.snd-pick svg { flex: none; }
.snd-pick svg:last-child { opacity: .5; transform: rotate(90deg); }
.snd-play {
  flex: none; width: 30px; height: 30px; display: flex;
  align-items: center; justify-content: center; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line, #2a2f38); background: transparent; color: inherit;
}
.snd-play:hover { border-color: #3b82f6; }
.snd-play svg { margin-left: 1px; }
.snd-list { display: flex; flex-direction: column; }
.snd-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 4px; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: inherit; font: inherit;
}
.snd-opt:last-child { border-bottom: 0; }
.snd-opt:hover { background: rgba(255,255,255,.04); }
.snd-opt-ic { flex: none; width: 26px; display: flex; justify-content: center; color: var(--muted); }
.snd-opt.on .snd-opt-ic { color: #4ade80; }
.snd-opt-txt { flex: 1 1 auto; min-width: 0; }
.snd-opt-txt strong { display: block; font-size: 14px; font-weight: 700; }
.snd-opt-txt em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.snd-opt-tick { flex: none; width: 18px; color: #4ade80; }
.pos-tbl-area { margin: 14px 0 8px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .6; font-weight: 800; }
.pos-tbl-area:first-child { margin-top: 4px; }
.pos-tbl-grid { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.pos-tbl { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; aspect-ratio: 1 / 1; min-height: 78px; padding: 6px;
  border-radius: 12px; cursor: pointer; text-align: center;
  border: 1px solid var(--line, #2a2f38); background: transparent; color: inherit; font: inherit; }
.pos-tbl:hover { border-color: #3b82f6; }
.pos-tbl b { font-size: 21px; font-weight: 800; line-height: 1.1; }
.pos-tbl span { font-size: 11.5px; opacity: .6; }
.pos-tbl em { font-size: 11.5px; font-style: normal; opacity: .85; font-weight: 700; }
.pos-tbl.on { border-color: #1f8f4e; background: #12241a; }
.pos-tbl.on span, .pos-tbl.on em { opacity: .9; }
.pos-tbl.on.stale { border-color: #e5484d; background: #2a1618; }
.pos-tbl.on.stale em { color: #ff9ea1; }
.pos-tbl.snoozed b { opacity: .55; }
.pos-tbl.snoozed::after { content: 'snoozed'; font-size: 10px; opacity: .5;
  letter-spacing: .04em; }
.pos-tbl.lost { aspect-ratio: auto; min-height: 62px; border-color: #b8860b; background: #241f12; }
.pos-tbl.lost b { font-size: 15px; }
.pos-kds-tool.has-stale, .pos-kds-filter.has-stale { position: relative; }
.pos-kds-tool.has-stale::after, .pos-kds-filter.has-stale::after {
  content: attr(data-stale);
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #f0ad4e; color: #1b1300;
  font-size: 11px; font-weight: 800; line-height: 17px; text-align: center;
}
.recent-head { margin: 2px 0 4px; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--k-muted); }
@media (hover: none) {
.kt-line:hover { background: none; }
.kt-line:hover .kt-tick { border-color: #4a5060; }
.kt-line.done:hover { background: rgba(46, 160, 87, .10); }
.kt-line.done:hover .kt-tick { border-color: var(--green); }
.kt-head:hover { filter: none; }
.kt-head:hover .kt-more { background: rgba(255, 255, 255, .12); opacity: .6; }
.kt-btn:hover { background: inherit; color: inherit; }
.kt-btn.go:hover { filter: none; }
.kt-btn.cancel:hover { background: #232830; }
.kt.parked .kt-btn:hover { background: #1f9d61; }
.kt.srcbtn .kt-btn:hover { filter: none; }
.kt.picking:hover { border-color: transparent; }
.kt:active { filter: brightness(1.06); }
}
.pos-paid-ask { margin: 14px 0 10px; padding: 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); }
.pos-paid-askq { font-weight: 700; font-size: 15px; text-align: center; margin-bottom: 10px; }
.pos-paid-askrow { display: flex; gap: 8px; }
.pos-paid-askrow .btn { flex: 1; justify-content: center; min-height: 44px; }
.pos-paid-askmail { width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 44px; }
.kset-steps { margin: 8px 0 2px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); }
.kset-steps-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kset-step { display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--border); }
.kset-step:first-of-type { border-top: 0; }
.kset-step em { font-style: normal; font-size: 12px; color: var(--muted); flex: 1 1 auto; }
.kset-step strong { font-size: 13.5px; text-align: right; flex: 0 0 auto; }
.roop-name { font-weight: 600; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }