/* ============================================================
   Orbit Eats — design system
   Brand: OrbitCore amber (#F5A623) on warm neutral greys,
   Inter throughout, ink #2A2A2A — matched to orbitcoretech.com.
   Two worlds: a light back-office and a permanently dark
   operator surface (POS / floor / kitchen) that works the
   same under either host theme.
   ============================================================ */

/* ---------- tokens: light (complete set lives here) ---------- */
:root {
  color-scheme: light;

  --bg:            #F4F4F4;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAF9;
  --surface-3:     #F0F0EF;
  --line:          #E6E6E6;
  --line-strong:   #D0D0D0;

  --ink:           #2A2A2A;
  --ink-2:         #4A4A4A;
  --muted:         #6E6E6E;
  --faint:         #8A8A8A;

  /* amber is a light hue: --brand paints surfaces, --brand-ink writes on them */
  --brand:         #F5A623;
  --brand-deep:    #D88A0E;
  --brand-bright:  #F5A623;
  --brand-soft:    #FFF9EE;
  --brand-tint:    #FCD9A0;
  --brand-ink:     #8A5606;
  --on-brand:      #2A2A2A;

  --good:          #1B7C3A;
  --good-soft:     #E8F8EE;
  --warn:          #9A5B08;
  --warn-soft:     #FDF0DC;
  --crit:          #A71C2A;
  --crit-soft:     #FDE8EA;
  --info:          #2F6DB5;
  --info-soft:     #EAF1FA;

  /* food-type markers (FSSAI convention) — semantic, not brand */
  --veg:           #1B7C3A;
  --nonveg:        #A71C2A;
  --egg:           #9A5B08;

  /* validated categorical series — light, amber-led */
  --cat-1: #C77B0C;  --cat-2: #3560C4;  --cat-3: #0E9187;
  --cat-4: #96277F;  --cat-5: #5E9410;  --cat-6: #8C4A9E;
  --grid:  #EAEAE9;
  --chart-surface: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(42,42,42,.06), 0 1px 1px rgba(42,42,42,.04);
  --shadow-md: 0 4px 12px rgba(42,42,42,.08), 0 1px 3px rgba(42,42,42,.05);
  --shadow-lg: 0 18px 46px rgba(42,42,42,.16), 0 4px 12px rgba(42,42,42,.08);

  --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-data: 'Inter', system-ui, sans-serif;
  --f-receipt: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rail-w: 236px;
}

/* ---------- tokens: dark (system default, no stamp) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #0F1012;
    --surface:     #17181C;
    --surface-2:   #1D1F24;
    --surface-3:   #26282E;
    --line:        #2E3138;
    --line-strong: #3E424A;

    --ink:         #EDEDEF;
    --ink-2:       #BFC1C6;
    --muted:       #8E9197;
    --faint:       #6E7178;

    --brand:       #F5A623;
    --brand-deep:  #FFC05A;
    --brand-bright:#F5A623;
    --brand-soft:  #2E2311;
    --brand-tint:  #5A4415;
    --brand-ink:   #F8C46B;
    --on-brand:    #2A2A2A;

    --good:        #47B96A;
    --good-soft:   #123021;
    --warn:        #D49A3C;
    --warn-soft:   #33270E;
    --crit:        #E8756B;
    --crit-soft:   #38191B;
    --info:        #6D9BE0;
    --info-soft:   #16233A;

    --veg:         #47B96A;
    --nonveg:      #E8806B;
    --egg:         #D49A3C;

    --cat-1: #BE8226; --cat-2: #5F7FD0; --cat-3: #25A497;
    --cat-4: #A34285; --cat-5: #74A22C; --cat-6: #9A66B0;
    --grid:  #262930;
    --chart-surface: #17181C;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,.45);
    --shadow-lg: 0 18px 46px rgba(0,0,0,.6);
  }
}

/* ---------- tokens: dark (explicit toggle) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #0F1012;
  --surface:     #17181C;
  --surface-2:   #1D1F24;
  --surface-3:   #26282E;
  --line:        #2E3138;
  --line-strong: #3E424A;

  --ink:         #EDEDEF;
  --ink-2:       #BFC1C6;
  --muted:       #8E9197;
  --faint:       #6E7178;

  --brand:       #F5A623;
  --brand-deep:  #FFC05A;
  --brand-bright:#F5A623;
  --brand-soft:  #2E2311;
  --brand-tint:  #5A4415;
  --brand-ink:   #F8C46B;
  --on-brand:    #2A2A2A;

  --good:        #47B96A;
  --good-soft:   #123021;
  --warn:        #D49A3C;
  --warn-soft:   #33270E;
  --crit:        #E8756B;
  --crit-soft:   #38191B;
  --info:        #6D9BE0;
  --info-soft:   #16233A;

  --veg:         #47B96A;
  --nonveg:      #E8806B;
  --egg:         #D49A3C;

  --cat-1: #BE8226; --cat-2: #5F7FD0; --cat-3: #25A497;
  --cat-4: #A34285; --cat-5: #74A22C; --cat-6: #9A66B0;
  --grid:  #262930;
  --chart-surface: #17181C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 46px rgba(0,0,0,.6);
}

/* ============================================================ base */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; text-wrap: balance; letter-spacing: -.015em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-ink); }

:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; border-radius: 3px; }

.num { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================ shell */
.app { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: 100vh; }
.app.rail-collapsed { --rail-w: 68px; }
.app.fullbleed { grid-template-columns: 1fr; }

/* ---------------------------------------------------------- rail */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  z-index: 40;
}
.rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 14px 14px; border-bottom: 1px solid var(--line);
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: linear-gradient(145deg, var(--brand-bright), var(--brand-deep));
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.logo-mark svg { width: 19px; height: 19px; }
.logo-text { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -.03em; white-space: nowrap; }
.logo-text span { color: var(--brand-ink); }
.rail-collapsed .logo-text, .rail-collapsed .nav-label, .rail-collapsed .nav-group-label,
.rail-collapsed .rail-foot-text, .rail-collapsed .nav-badge { display: none; }
.rail-collapsed .rail-head { justify-content: center; padding-inline: 0; }

.rail-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.rail-scroll::-webkit-scrollbar { width: 6px; }
.rail-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.nav-group-label { padding: 14px 8px 5px; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; margin-bottom: 1px;
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: left; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.nav-item svg { width: 17px; height: 17px; flex: none; stroke-width: 1.7; }
.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  font-family: var(--f-data); font-size: 10.5px; font-weight: 600;
  background: var(--crit); color: #fff; border-radius: var(--r-pill);
  padding: 1px 6px; min-width: 19px; text-align: center;
}
.nav-badge.soft { background: var(--surface-3); color: var(--muted); }
.rail-collapsed .nav-item { justify-content: center; padding-inline: 0; }

.rail-foot { border-top: 1px solid var(--line); padding: 10px; }
.rail-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-md); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  font-family: var(--f-data);
}
.rail-foot-text { min-width: 0; }
.rail-foot-text b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-foot-text span { font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------- topbar */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; min-height: 60px; flex-wrap: wrap;
}
.icon-btn {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.8; }

.page-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.page-sub { font-size: 12px; color: var(--muted); margin-top: -1px; }
.topbar-spacer { flex: 1; }

.outlet-pick {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 5px 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; max-width: 172px; flex: none;
}
.outlet-pick:hover { border-color: var(--line-strong); }
.outlet-pick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.outlet-pick select { border: 0; background: none; outline: none; cursor: pointer; max-width: 132px; }

.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--faint); pointer-events: none; }
.search-box input {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 6px 10px 6px 30px; width: 168px; outline: none; font-size: 13px;
}
.search-box input:focus { border-color: var(--brand); background: var(--surface); }

/* ---------------------------------------------------------- page */
.page { padding: 20px; flex: 1; min-width: 0; }
.page-wrap { max-width: 1440px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 24px; letter-spacing: -.03em; }
.page-head .page-head-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ======================================================= controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; stroke-width: 1.9; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: var(--r-sm); }
.btn.lg { padding: 11px 18px; font-size: 14.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: none; padding: 5px 11px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.input, select.input, textarea.input {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 7px 10px; outline: none; font-size: 13.5px; width: 100%;
}
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.switch { position: relative; width: 36px; height: 20px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0; background: var(--line-strong); border-radius: var(--r-pill);
  transition: background .16s;
}
.switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .16s; box-shadow: var(--shadow-sm);
}
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

/* ========================================================= panels */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.panel-head .panel-sub { font-size: 12px; color: var(--muted); }
.panel-head-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* ----------------------------------------------------- stat tiles */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 15px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.stat .k { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.stat .v { font-family: var(--f-display); font-size: 25px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.stat .v small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat .d { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 2px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; font-family: var(--f-data); font-size: 11.5px; }
.delta.up { color: var(--good); } .delta.down { color: var(--crit); } .delta.flat { color: var(--muted); }
.stat .spark { margin-top: 7px; }

/* --------------------------------------------------------- badges */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em; white-space: nowrap;
  background: var(--surface-3); color: var(--ink-2);
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* FSSAI-style food-type marker */
.ft { width: 13px; height: 13px; flex: none; border-radius: 2.5px; border: 1.6px solid; display: grid; place-items: center; }
.ft i { display: block; }
.ft.v { border-color: var(--veg); }
.ft.v i { width: 6px; height: 6px; border-radius: 50%; background: var(--veg); }
.ft.n { border-color: var(--nonveg); }
.ft.n i { width: 0; height: 0; border-left: 3.6px solid transparent; border-right: 3.6px solid transparent; border-bottom: 6.4px solid var(--nonveg); }
.ft.e { border-color: var(--egg); }
.ft.e i { width: 6px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--egg); }

/* --------------------------------------------------------- tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
  padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface-2); position: sticky; top: 0; z-index: 1;
}
table.tbl td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.r, table.tbl th.r { text-align: right; }
table.tbl .strong { font-weight: 600; }
.row-click { cursor: pointer; }

.empty { padding: 46px 20px; text-align: center; color: var(--muted); }
.empty svg { width: 30px; height: 30px; opacity: .4; margin-bottom: 10px; }

/* --------------------------------------------------------- charts */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--f-ui); font-size: 10.5px; fill: var(--muted); }
.chart .axis-line { stroke: var(--line); stroke-width: 1; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .val { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 2.5px; flex: none; }

.chart-tip {
  position: fixed; z-index: 900; pointer-events: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 8px 10px; font-size: 12px; min-width: 118px; transition: opacity .1s;
}
.chart-tip.on { opacity: 1; }
.chart-tip b { display: block; font-size: 12px; margin-bottom: 4px; }
.chart-tip .tr { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.chart-tip .tr i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 6px 0; }
.bar-track { grid-column: 1 / -1; height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--brand-bright); }

/* ========================================================== modal */
.scrim {
  position: fixed; inset: 0; background: rgba(8,16,14,.5); backdrop-filter: blur(3px);
  z-index: 800; display: grid; place-items: center; padding: 18px;
  animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide { width: min(880px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-2); }

.toast-wrap { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--ink); color: var(--surface); padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 550; box-shadow: var(--shadow-lg);
  animation: toastIn .2s cubic-bezier(.2,.9,.3,1.2);
  display: flex; align-items: center; gap: 8px;
}
.toast svg { width: 15px; height: 15px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   OPERATOR SURFACE — POS, floor plan, kitchen display.
   Always dark: it is read across a room, at speed, under
   kitchen lighting. Self-contained tokens so it renders the
   same under either host theme.
   ============================================================ */
.op {
  --o-bg:      #0D0E10;
  --o-surf:    #16171B;
  --o-surf-2:  #1E2026;
  --o-surf-3:  #272A31;
  --o-line:    #2D3037;
  --o-line-2:  #3D414A;
  --o-ink:     #EDEEF0;
  --o-ink-2:   #B4B7BE;
  --o-muted:   #868A92;
  --o-brand:   #F5A623;
  --o-brand-d: #6B4806;
  --o-on-brand:#241A05;
  --o-good:    #4FC57A;
  --o-warn:    #E3AE4B;
  --o-crit:    #F0796A;
  --o-veg:     #4FC57A;
  --o-nonveg:  #F08E72;
  --o-egg:     #E3AE4B;

  position: fixed; inset: 0; z-index: 60;
  background: var(--o-bg); color: var(--o-ink);
  display: flex; flex-direction: column;
}
.op .ft.v { border-color: var(--o-veg); } .op .ft.v i { background: var(--o-veg); }
.op .ft.n { border-color: var(--o-nonveg); } .op .ft.n i { border-bottom-color: var(--o-nonveg); }
.op .ft.e { border-color: var(--o-egg); } .op .ft.e i { background: var(--o-egg); }

.op-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--o-surf); border-bottom: 1px solid var(--o-line); flex: none; flex-wrap: wrap;
}
.op-bar .op-title { font-family: var(--f-display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.op-bar .op-sub { font-size: 12px; color: var(--o-muted); }
.op-tabs { display: flex; gap: 3px; background: var(--o-bg); border-radius: var(--r-md); padding: 3px; }
.op-tabs button {
  border: 0; background: none; color: var(--o-muted); padding: 5px 12px;
  border-radius: 7px; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.op-tabs button.on { background: var(--o-surf-2); color: var(--o-ink); }
.op-exit {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--o-surf-2); border: 1px solid var(--o-line); color: var(--o-ink-2);
  padding: 6px 12px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.op-exit:hover { border-color: var(--o-line-2); color: var(--o-ink); }
.op-clock { font-family: var(--f-data); font-size: 13px; color: var(--o-ink-2); font-variant-numeric: tabular-nums; }

.op-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 388px; }

/* ------------------------------------------------------ POS: menu */
.pos-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pos-cats {
  display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto;
  border-bottom: 1px solid var(--o-line); flex: none; scrollbar-width: thin;
}
.pos-cats::-webkit-scrollbar { height: 5px; }
.pos-cats::-webkit-scrollbar-thumb { background: var(--o-line-2); border-radius: 3px; }
.cat-chip {
  border: 1px solid var(--o-line); background: var(--o-surf); color: var(--o-ink-2);
  padding: 7px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center;
}
.cat-chip:hover { border-color: var(--o-line-2); color: var(--o-ink); }
.cat-chip.on { background: var(--o-brand); border-color: var(--o-brand); color: var(--o-on-brand); }
.cat-chip b { font-family: var(--f-data); font-size: 11px; opacity: .7; font-weight: 600; }

.pos-filters { display: flex; gap: 8px; padding: 9px 14px 0; flex-wrap: wrap; align-items: center; }
.pos-search { position: relative; flex: 1; min-width: 160px; display: flex; align-items: center; }
.pos-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--o-muted); }
.pos-search input {
  width: 100%; background: var(--o-surf); border: 1px solid var(--o-line); color: var(--o-ink);
  border-radius: var(--r-md); padding: 8px 10px 8px 32px; outline: none; font-size: 13px;
}
.pos-search input:focus { border-color: var(--o-brand); }
.tog {
  border: 1px solid var(--o-line); background: var(--o-surf); color: var(--o-ink-2);
  border-radius: var(--r-md); padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
}
.tog svg { width: 14px; height: 14px; }
.tog.on { background: var(--o-surf-3); border-color: var(--o-line-2); color: var(--o-ink); }

.pos-grid {
  flex: 1; overflow-y: auto; padding: 12px 14px 18px;
  display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  align-content: start;
}
.pos-grid::-webkit-scrollbar { width: 8px; }
.pos-grid::-webkit-scrollbar-thumb { background: var(--o-line-2); border-radius: 4px; }
.tile {
  background: var(--o-surf); border: 1px solid var(--o-line); border-radius: var(--r-md);
  padding: 10px; cursor: pointer; text-align: left; position: relative;
  display: flex; flex-direction: column; gap: 6px; min-height: 96px;
  transition: border-color .1s, background .1s, transform .06s;
}
.tile:hover { border-color: var(--o-brand-d); background: var(--o-surf-2); }
.tile:active { transform: scale(.975); }
.tile.out { opacity: .42; cursor: not-allowed; }
.tile.out:hover { border-color: var(--o-line); background: var(--o-surf); }
.tile-top { display: flex; align-items: center; gap: 6px; }
.tile-name { font-size: 13px; font-weight: 600; line-height: 1.3; flex: 1; }
.tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile-price { font-family: var(--f-data); font-size: 14px; font-weight: 600; color: var(--o-brand); }
.tile-flags { display: flex; gap: 4px; }
.flag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; }
.flag.best { background: rgba(227,174,75,.16); color: var(--o-warn); }
.flag.new { background: rgba(245,166,35,.15); color: var(--o-brand); }
.flag.spicy { background: rgba(240,121,106,.15); color: var(--o-crit); }
.tile-qty {
  position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px;
  background: var(--o-brand); color: var(--o-on-brand); border-radius: var(--r-pill);
  font-family: var(--f-data); font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ------------------------------------------------------ POS: cart */
.pos-right {
  background: var(--o-surf); border-left: 1px solid var(--o-line);
  display: flex; flex-direction: column; min-height: 0;
}
.cart-head { padding: 11px 14px; border-bottom: 1px solid var(--o-line); flex: none; }
.otype { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 9px; }
.otype button {
  border: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-muted);
  padding: 7px 4px; border-radius: var(--r-sm); font-size: 11.5px; font-weight: 650; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.otype button svg { width: 15px; height: 15px; stroke-width: 1.8; }
.otype button.on { background: var(--o-brand-d); border-color: var(--o-brand); color: var(--o-ink); }
.cart-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.meta-btn {
  flex: 1; min-width: 0; border: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-ink-2);
  border-radius: var(--r-sm); padding: 6px 9px; font-size: 12px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden;
}
.meta-btn:hover { border-color: var(--o-line-2); color: var(--o-ink); }
.meta-btn svg { width: 14px; height: 14px; flex: none; }
.meta-btn b { font-weight: 650; color: var(--o-ink); }

.cart-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
.cart-list::-webkit-scrollbar { width: 7px; }
.cart-list::-webkit-scrollbar-thumb { background: var(--o-line-2); border-radius: 4px; }
.cart-empty { padding: 54px 18px; text-align: center; color: var(--o-muted); font-size: 13px; }
.cart-empty svg { width: 34px; height: 34px; opacity: .35; margin-bottom: 10px; }
.ci { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 6px; border-bottom: 1px solid var(--o-line); }
.ci:last-child { border-bottom: 0; }
.ci-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ci-sub { grid-column: 1; font-size: 11.5px; color: var(--o-muted); }
.ci-amt { font-family: var(--f-data); font-size: 13px; font-weight: 600; text-align: right; align-self: start; }
.ci-ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.qty { display: inline-flex; align-items: center; background: var(--o-bg); border: 1px solid var(--o-line); border-radius: var(--r-sm); }
.qty button { width: 26px; height: 25px; border: 0; background: none; color: var(--o-ink-2); cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; }
.qty button:hover { color: var(--o-brand); }
.qty span { min-width: 24px; text-align: center; font-family: var(--f-data); font-size: 12.5px; font-weight: 650; }
.ci-act { margin-left: auto; display: flex; gap: 4px; }
.mini {
  border: 1px solid var(--o-line); background: none; color: var(--o-muted);
  border-radius: var(--r-sm); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.mini:hover { color: var(--o-ink); border-color: var(--o-line-2); }
.mini.del:hover { color: var(--o-crit); border-color: var(--o-crit); }
.kot-sent { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--o-good); }

.cart-foot { flex: none; border-top: 1px solid var(--o-line); padding: 11px 14px 13px; background: var(--o-bg); }
.tot-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--o-ink-2); padding: 2px 0; }
.tot-row.grand { font-size: 17px; font-weight: 700; color: var(--o-ink); padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--o-line-2); }
.tot-row .num { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.tot-row.disc { color: var(--o-good); }
.cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.big-btn {
  padding: 12px 10px; border-radius: var(--r-md); border: 1px solid var(--o-line);
  background: var(--o-surf-2); color: var(--o-ink); font-size: 13.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.big-btn:hover { background: var(--o-surf-3); }
.big-btn svg { width: 16px; height: 16px; }
.big-btn.pay { background: var(--o-brand); border-color: var(--o-brand); color: var(--o-on-brand); }
.big-btn.pay:hover { background: #FFBB4D; }
.big-btn:disabled { opacity: .4; cursor: not-allowed; }
.cart-actions.triple { grid-template-columns: 1fr 1fr 1fr; }

/* --------------------------------------------------- floor plan */
.floor { flex: 1; overflow-y: auto; padding: 16px 18px 26px; }
.floor-sec { margin-bottom: 22px; }
.floor-sec h4 { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--o-muted); margin-bottom: 10px; }
.floor-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.tbl-tile {
  border: 1.5px solid var(--o-line); background: var(--o-surf); border-radius: var(--r-md);
  padding: 11px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px;
  min-height: 92px; position: relative; transition: transform .06s, border-color .1s;
}
.tbl-tile:hover { border-color: var(--o-line-2); }
.tbl-tile:active { transform: scale(.97); }
.tbl-tile .tno { font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.tbl-tile .tseat { font-size: 11.5px; color: var(--o-muted); }
.tbl-tile .tfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.tbl-tile .tamt { font-family: var(--f-data); font-weight: 650; }
.tbl-tile.vacant { border-style: dashed; }
.tbl-tile.vacant .tno { color: var(--o-muted); }
.tbl-tile.occupied { border-color: var(--o-brand-d); background: linear-gradient(180deg, rgba(245,166,35,.09), transparent 60%); }
.tbl-tile.occupied .tno { color: var(--o-brand); }
.tbl-tile.billed { border-color: var(--o-warn); background: linear-gradient(180deg, rgba(227,174,75,.09), transparent 60%); }
.tbl-tile.billed .tno { color: var(--o-warn); }
.tbl-tile.reserved { border-color: var(--o-line-2); background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(255,255,255,.022) 6px, rgba(255,255,255,.022) 12px); }
.tbl-tile.cleaning { opacity: .55; }
.floor-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 18px 14px; font-size: 12px; color: var(--o-muted); }
.floor-legend span { display: inline-flex; align-items: center; gap: 6px; }
.floor-legend i { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid; }

/* ------------------------------------------------ kitchen display */
.kds { flex: 1; overflow-x: auto; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.kds-col { flex: 0 0 296px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kds-col > h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--o-muted); display: flex; align-items: center; gap: 8px; padding: 0 2px;
}
.kds-col > h4 b { font-family: var(--f-data); background: var(--o-surf-2); border-radius: var(--r-pill); padding: 1px 7px; font-size: 11px; color: var(--o-ink-2); }
.ticket {
  background: var(--o-surf); border: 1px solid var(--o-line); border-radius: var(--r-md);
  border-left: 3px solid var(--o-line-2); overflow: hidden;
}
.ticket.age-warn { border-left-color: var(--o-warn); }
.ticket.age-late { border-left-color: var(--o-crit); }
.ticket.done { border-left-color: var(--o-good); opacity: .72; }
.tk-head { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--o-line); }
.tk-tok { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.tk-src { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--o-muted); }
.tk-timer { margin-left: auto; font-family: var(--f-data); font-size: 13px; font-weight: 650; }
.tk-timer.warn { color: var(--o-warn); } .tk-timer.late { color: var(--o-crit); }
.tk-items { padding: 7px 11px; display: flex; flex-direction: column; gap: 5px; }
.tk-line { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; }
.tk-line b { font-family: var(--f-data); font-weight: 700; color: var(--o-brand); min-width: 20px; }
.tk-line.ready { color: var(--o-muted); text-decoration: line-through; }
.tk-note { font-size: 11.5px; color: var(--o-warn); padding: 0 11px 7px; }
.tk-foot { display: flex; gap: 6px; padding: 8px 11px; border-top: 1px solid var(--o-line); }
.tk-foot button { flex: 1; border: 1px solid var(--o-line); background: var(--o-surf-2); color: var(--o-ink); border-radius: var(--r-sm); padding: 6px; font-size: 12px; font-weight: 650; cursor: pointer; }
.tk-foot button.go { background: var(--o-brand); border-color: var(--o-brand); color: var(--o-on-brand); }
.tk-foot button:hover { filter: brightness(1.12); }

/* -------------------------------------------------- op modal skin */
.op-modal {
  background: var(--o-surf); border: 1px solid var(--o-line-2); color: var(--o-ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.op-modal .modal-head, .op-modal .modal-foot { border-color: var(--o-line); }
.op-modal .modal-foot { background: var(--o-bg); }
.op-modal .btn { background: var(--o-surf-2); border-color: var(--o-line); color: var(--o-ink); }
.op-modal .btn:hover { background: var(--o-surf-3); }
.op-modal .btn.primary { background: var(--o-brand); border-color: var(--o-brand); color: var(--o-on-brand); }
.op-modal .btn.ghost { background: none; border-color: transparent; color: var(--o-muted); }
.op-modal .input { background: var(--o-bg); border-color: var(--o-line); color: var(--o-ink); }
.op-modal .input:focus { border-color: var(--o-brand); box-shadow: none; }
.op-modal .field label { color: var(--o-ink-2); }

.opt-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--o-line); border-radius: var(--r-md); cursor: pointer; margin-bottom: 7px; background: var(--o-bg); }
.opt-row:hover { border-color: var(--o-line-2); }
.opt-row.on { border-color: var(--o-brand); background: rgba(245,166,35,.09); }
.opt-row .oname { flex: 1; font-size: 13.5px; font-weight: 600; }
.opt-row .oprice { font-family: var(--f-data); font-size: 13px; color: var(--o-ink-2); }
.opt-row input { accent-color: var(--o-brand); width: 16px; height: 16px; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button {
  padding: 14px; border: 1px solid var(--o-line); background: var(--o-bg); color: var(--o-ink);
  border-radius: var(--r-md); font-family: var(--f-data); font-size: 17px; font-weight: 650; cursor: pointer;
}
.keypad button:hover { background: var(--o-surf-2); }
.keypad button.wide { grid-column: span 2; }
.pay-split { display: grid; gap: 8px; }
.pay-mode {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--o-line); border-radius: var(--r-md); background: var(--o-bg); cursor: pointer;
}
.pay-mode.on { border-color: var(--o-brand); background: rgba(245,166,35,.09); }
.pay-mode .pm-name { flex: 1; font-weight: 650; font-size: 13.5px; }
.pay-mode input { width: 108px; text-align: right; }
.amt-display {
  background: var(--o-bg); border: 1px solid var(--o-line); border-radius: var(--r-md);
  padding: 14px 16px; text-align: right; margin-bottom: 12px;
}
.amt-display .lbl { font-size: 11.5px; color: var(--o-muted); }
.amt-display .big { font-family: var(--f-data); font-size: 30px; font-weight: 700; letter-spacing: -.03em; }

/* --------------------------------------------------------- bill */
.bill {
  background: #fff; color: #16211E; font-family: var(--f-receipt); font-size: 11.5px;
  padding: 16px 18px; border-radius: var(--r-sm); max-width: 330px; margin: 0 auto; line-height: 1.55;
}
.bill .c { text-align: center; }
.bill .b { font-weight: 700; }
.bill hr { border: 0; border-top: 1px dashed #9AA8A4; margin: 7px 0; }
.bill table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--f-receipt); }
.bill table td { padding: 1.5px 0; vertical-align: top; }
.bill table td.r { text-align: right; white-space: nowrap; }
.bill .biz { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }

/* ====================================================== QR / menu */
.qr-shell { max-width: 480px; margin: 0 auto; background: var(--surface); min-height: 100%; border-inline: 1px solid var(--line); }
.qr-hero { padding: 22px 18px 16px; background: linear-gradient(155deg, var(--brand-deep), var(--brand)); color: var(--on-brand); }
.qr-hero h2 { font-size: 21px; letter-spacing: -.03em; }
.qr-hero p { font-size: 13px; opacity: .9; margin-top: 3px; }
.qr-hero .qr-meta { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.qr-hero .qr-meta span { background: rgba(255,255,255,.18); border-radius: var(--r-pill); padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.qr-cats { display: flex; gap: 6px; padding: 12px 14px; overflow-x: auto; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 5; }
.qr-cats button { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink-2); }
.qr-cats button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.qr-list { padding: 6px 0 90px; }
.qr-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.qr-item .qi-main { flex: 1; min-width: 0; }
.qr-item .qi-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.qr-item .qi-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qr-item .qi-price { font-family: var(--f-data); font-size: 13.5px; font-weight: 650; margin-top: 5px; }
.qr-add { border: 1px solid var(--brand); background: var(--brand-soft); color: var(--brand-ink); border-radius: var(--r-md); padding: 6px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; flex: none; }
.qr-add:hover { background: var(--brand); color: var(--on-brand); }
.qr-bar {
  position: sticky; bottom: 0; background: var(--brand); color: var(--on-brand); padding: 13px 16px;
  display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 -4px 18px rgba(0,0,0,.14);
}
.qr-bar b { font-family: var(--f-data); }
.qr-bar .qb-go { margin-left: auto; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ======================================================= utilities */
.flex { display: flex; } .ac { align-items: center; } .jb { justify-content: space-between; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }
.wrap { flex-wrap: wrap; } .col { flex-direction: column; } .f1 { flex: 1; min-width: 0; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.scroll-y { overflow-y: auto; }
.list-plain { list-style: none; margin: 0; padding: 0; }

.alert { display: flex; gap: 10px; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid; font-size: 13px; align-items: flex-start; }
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.alert.crit { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 35%, transparent); color: var(--crit); }
.alert.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); color: var(--info); }
.alert b { color: var(--ink); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; align-items: baseline; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 550; text-align: right; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  border: 0; background: none; padding: 9px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--brand-ink); border-bottom-color: var(--brand); }

.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0); }
.ring span { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: grid; place-items: center;
  font-family: var(--f-data); font-size: 11.5px; font-weight: 700; }

/* ===================================================== responsive */
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1000px) {
  .app { grid-template-columns: 68px 1fr; }
  .app .logo-text, .app .nav-label, .app .nav-group-label, .app .rail-foot-text, .app .nav-badge { display: none; }
  .app .rail-head { justify-content: center; padding-inline: 0; }
  .app .nav-item { justify-content: center; padding-inline: 0; }
  .op-body { grid-template-columns: minmax(0,1fr) 330px; }
}
@media (max-width: 860px) {
  .g3, .g2 { grid-template-columns: minmax(0,1fr); }
  .page { padding: 14px; }
  .topbar { padding: 10px 14px; }
  .search-box input { width: 150px; }
}
@media (max-width: 720px) {
  .op-body { grid-template-columns: minmax(0,1fr); grid-template-rows: 1fr auto; }
  .pos-right { border-left: 0; border-top: 1px solid var(--o-line); max-height: 48vh; }
  .g4 { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 520px) {
  .page-head h1 { font-size: 20px; }
  .stat .v { font-size: 21px; }
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .floor-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ============================================================
   Platform tier — role switcher, health bars, pricing,
   and the public product page preview.
   ============================================================ */

.role-pick { background: var(--brand-soft); border-color: var(--brand-tint); }
.role-pick svg { width: 15px; height: 15px; color: var(--brand-ink); flex: none; }
.role-pick select { max-width: 150px; color: var(--brand-ink); font-weight: 600; }

.alert.good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); }

.hbar { width: 46px; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; display: inline-block; flex: none; }
.hbar i { display: block; height: 100%; border-radius: var(--r-pill); }

/* -------------------------------------------------------- pricing */
.price-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  background: linear-gradient(170deg, var(--brand-soft), var(--surface) 62%);
}
.price-card.big { border-color: var(--brand-tint); box-shadow: var(--shadow-md); padding: 24px; }
.price-amt { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.price-amt .num { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.price-amt small { font-size: 13px; color: var(--muted); font-weight: 500; }
.price-tbl { margin-top: 16px; }
.price-tbl td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.price-tbl tr.tot td { border-bottom: 0; border-top: 1.5px solid var(--line-strong); padding-top: 10px; font-size: 15px; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; align-content: start; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.price-list svg { width: 16px; height: 16px; flex: none; color: var(--good); margin-top: 1px; stroke-width: 2.4; }

/* ---------------------------------------------- product page */
.site-frame {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.site-bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.site-bar svg { width: 14px; height: 14px; }
.site-wrap { max-width: 980px; margin: 0 auto; padding-inline: 24px; }

.site-hero {
  padding-block: 56px 48px;
  background: linear-gradient(168deg, var(--brand-soft), var(--surface) 70%);
  border-bottom: 1px solid var(--line);
}
.site-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.site-brand svg { width: 22px; height: 22px; color: var(--brand-ink); }
.site-brand b { color: var(--brand-ink); font-weight: 800; }
.site-brand.small { font-size: 16px; }
.site-by { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-left: 4px; }
.site-hero h1 {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.08; margin-top: 22px; max-width: 16ch;
}
.site-lede { font-size: 16px; color: var(--ink-2); margin-top: 14px; max-width: 54ch; line-height: 1.55; }
.site-cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.site-trust { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.site-trust b { display: block; font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }

.site-sec { padding-block: 48px; border-bottom: 1px solid var(--line); }
.site-sec.alt { background: var(--surface-2); }
.site-sec h2 { font-size: clamp(21px, 2.6vw, 29px); font-weight: 700; letter-spacing: -.035em; margin-top: 8px; }
.site-sub { font-size: 14.5px; color: var(--muted); margin-top: 10px; max-width: 58ch; }

.site-swap { display: grid; gap: 10px; margin-top: 24px; }
.swap-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.site-sec.alt .swap-row { background: var(--surface); }
.swap-row svg { width: 15px; height: 15px; color: var(--brand-ink); flex: none; }
.swap-row .was { color: var(--muted); font-size: 13.5px; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.swap-row .now { font-size: 13.5px; font-weight: 600; }

.site-mods { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-top: 26px; }
.mod { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.mod-ic {
  width: 34px; height: 34px; border-radius: var(--r-md); background: var(--brand-soft);
  display: grid; place-items: center; margin-bottom: 12px; border: 1px solid var(--brand-tint);
}
.mod-ic svg { width: 17px; height: 17px; color: var(--brand-ink); }
.mod h3 { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.mod p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.55; }

.site-price { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; margin-top: 28px; align-items: start; }

.site-faq { display: grid; gap: 8px; margin-top: 24px; }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; }
details.faq summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 14px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; margin-left: auto; color: var(--brand-ink); font-size: 17px; font-weight: 600; }
details.faq[open] summary::after { content: '−'; }
details.faq p { padding: 0 16px 15px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 68ch; }

.site-foot { padding-block: 30px 26px; background: var(--surface-2); }

@media (max-width: 860px) {
  .site-price { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .swap-row { grid-template-columns: 1fr; gap: 6px; }
  .swap-row svg { transform: rotate(90deg); }
  .site-wrap { padding-inline: 16px; }
  .site-hero { padding-block: 36px 32px; }
  .site-sec { padding-block: 34px; }
  .site-trust { gap: 18px; }
}

/* ------------------------------------------------------------- login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px 16px; background: linear-gradient(168deg, var(--brand-soft), var(--bg) 62%);
}
.login-card {
  width: min(400px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-md);
}
.login-card h1 { font-size: 22px; letter-spacing: -.03em; margin-top: 18px; }
.login-card .site-brand svg { width: 20px; height: 20px; }

/* ------------------------------------------------ per-staff permissions
   The grid a restaurant's admin ticks to decide what one person can reach.
   Each row is a real label so the whole tile is a hit target, which matters
   on the tablet most of these are set up on. */
.perm-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.perm {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.perm:hover { border-color: var(--brand); }
.perm.on { border-color: var(--brand); background: var(--brand-tint); }
.perm input { margin-top: 2px; flex: none; accent-color: var(--brand); width: 15px; height: 15px; }
.perm span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.perm b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.perm i { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.35; }
.perm.on b { color: var(--brand-ink); }

@media (max-width: 560px) {
  .perm-grid { grid-template-columns: 1fr; }
}