/* =====================================================================
   MAITRI CAFE — ONE STYLESHEET
   Design direction: "Saffron & Espresso" — warm, appetising, modern.

   Contents
   1. Design tokens (colour, type scale, spacing grid, radius, elevation, motion)
   2. Base & accessibility
   3. Components (buttons, inputs, steppers, badges, cards, sheets, toasts)
   4. Splash screen
   5. Customer screens (welcome, menu, cart, tracking)
   6. Staff screens (shell, dashboard, orders, tables, menu, manual order, QR, invoice settings, login)
   7. Invoice & print
   8. Motion (micro-interactions, page transitions)
   9. Responsive breakpoints & reduced motion
   10. Background imagery (menu photos + café doodle pattern)

   UX principles applied
   - Visual hierarchy: one primary action per screen (filled brand button); secondary actions are outlined.
   - Semantic colour: brand orange = action; green/amber/blue/red = status only (never decoration).
   - Contrast: all text meets WCAG AA (body 15.8:1, white on brand 5.2:1).
   - Touch targets ≥ 44 px; primary actions sit in the thumb zone on phones.
   - 4-pt spacing grid and a 1.25 type scale keep rhythm consistent.
   - Feedback: every tap gets a press state; every state change is animated, never instant.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS — change the brand colour in one place.
   --------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand: #C2410C;            /* saffron — primary actions, links, active states */
  --brand-hover: #9A3412;
  --brand-soft: #FFF1E8;       /* tinted backgrounds */
  --brand-line: #FBD5BE;
  --espresso: #1C1512;         /* dark surfaces: splash, staff sidebar, headers */
  --espresso-2: #2A211C;
  --on-dark: #F5EFE9;
  --on-dark-muted: #A8A29E;
  --accent-on-dark: #FB923C;

  /* Neutrals */
  --canvas: #F7F5F2;           /* page background */
  --surface: #FFFFFF;          /* cards, sheets */
  --surface-2: #F1EEEA;        /* subtle fills, table headers */
  --line: #E7E2DC;             /* dividers, card borders */
  --line-strong: #D6CFC7;      /* input borders */
  --ink: #1F1A17;              /* primary text */
  --ink-2: #5E5650;            /* secondary text */
  --ink-3: #766D66;            /* hints, captions */

  /* Semantic (status only) */
  --success: #15803D;  --success-soft: #ECFDF3;
  --warning: #B45309;  --warning-soft: #FFF7E6;
  --info: #1D4ED8;     --info-soft: #EFF6FF;
  --danger: #B91C1C;   --danger-soft: #FEF2F2;
  --veg: #16A34A;

  /* Typography — one family for UI, one for the logo */
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-logo: "Caveat Brush", "Bradley Hand", "Segoe Print", cursive;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 31px; --t-3xl: 39px;

  /* Spacing — 4-pt grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Shape & elevation */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --e-1: 0 1px 2px rgba(28, 21, 18, .06);
  --e-2: 0 2px 4px rgba(28, 21, 18, .04), 0 8px 24px -8px rgba(28, 21, 18, .14);
  --e-3: 0 24px 64px -16px rgba(28, 21, 18, .35);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

  /* Motion */
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 360ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.15);

  --tap: 44px;                 /* minimum touch target */
  color-scheme: light;

  /* Aliases kept for older markup */
  --muted: var(--ink-3);
  --f-display: var(--font);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #FB923C; --brand-hover: #FDBA74; --brand-soft: #2B1A10; --brand-line: #5A3218;
    --canvas: #141110; --surface: #1D1917; --surface-2: #26211E; --line: #332C28; --line-strong: #463D37;
    --ink: #F3EEE9; --ink-2: #C9C0B8; --ink-3: #9C928A;
    --success: #4ADE80; --success-soft: #0F2A1A; --warning: #FBBF24; --warning-soft: #2E2208;
    --info: #93B4FF; --info-soft: #14203D; --danger: #F87171; --danger-soft: #331414;
    --e-2: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #FB923C; --brand-hover: #FDBA74; --brand-soft: #2B1A10; --brand-line: #5A3218;
  --canvas: #141110; --surface: #1D1917; --surface-2: #26211E; --line: #332C28; --line-strong: #463D37;
  --ink: #F3EEE9; --ink-2: #C9C0B8; --ink-3: #9C928A;
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. BASE & ACCESSIBILITY
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 120px); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 500 var(--t-md)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { font-family: var(--font-logo); font-weight: 400; line-height: .9; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); font-weight: 500; }
.fineprint { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.err { margin: 0; min-height: 1.2em; font-size: var(--t-sm); font-weight: 700; color: var(--danger); }

/* ---------------------------------------------------------------------
   3. COMPONENTS
   --------------------------------------------------------------------- */

/* Buttons — hierarchy: primary (filled brand) > secondary (dark) > ghost (outline) > link */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border: 1.5px solid transparent; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; white-space: nowrap;
  transition: transform var(--d-fast) var(--spring), background var(--d-base), border-color var(--d-base), box-shadow var(--d-base), color var(--d-base);
}
.btn:active:not([disabled]) { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-saffron { background: var(--brand); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-saffron:hover:not([disabled]) { background: var(--brand-hover); }
.btn-primary { background: var(--espresso); color: var(--on-dark); }
.btn-primary:hover:not([disabled]) { background: var(--espresso-2); }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover:not([disabled]) { border-color: var(--ink-3); background: var(--surface-2); }
.btn-danger { background: var(--surface); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.btn-danger:hover:not([disabled]) { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; font-size: var(--t-md); border-radius: var(--r-lg); }
.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: 13px; border-radius: var(--r-sm); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn-ghost.is-loading::after { border-color: var(--line); border-top-color: var(--brand); }
.link-btn { border: 0; background: none; padding: var(--s-1) 2px; font-weight: 700; font-size: var(--t-sm); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.link-btn.danger { color: var(--danger); }
.icon-btn { position: relative; overflow: hidden; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; transition: transform var(--d-fast) var(--spring); }
.icon-btn:active { transform: scale(.94); }

/* Form fields — label above input, inline error below */
.field { display: grid; gap: 6px; }
.field label, .flabel { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.input {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--t-md); font-weight: 600;
  transition: border-color var(--d-base), box-shadow var(--d-base);
}
.input::placeholder { color: var(--ink-3); font-weight: 500; }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.input-prefix { display: flex; }
.input-prefix span { display: grid; place-items: center; padding: 0 var(--s-3); border: 1.5px solid var(--line-strong); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--surface-2); font-weight: 700; color: var(--ink-2); }
.input-prefix .input { border-radius: 0 var(--r-md) var(--r-md) 0; }
.note-input { min-height: 44px; resize: vertical; font-size: 15px; }
.form-grid { display: grid; gap: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Quantity stepper & ADD button */
.stepper { position: relative; display: inline-flex; align-items: center; height: 38px; border-radius: var(--r-md); background: var(--brand); color: #fff; overflow: hidden; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
.stepper button { position: relative; overflow: hidden; width: 38px; height: 38px; border: 0; background: transparent; color: inherit; font-size: 20px; font-weight: 700; display: grid; place-items: center; }
.stepper button:hover { background: rgba(255,255,255,.14); }
.stepper output { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.add-btn { position: relative; overflow: hidden; height: 38px; min-width: 92px; padding: 0 var(--s-4); border: 1.5px solid var(--brand-line); border-radius: var(--r-md); background: var(--surface); color: var(--brand); font-weight: 800; font-size: 14px; letter-spacing: .04em; box-shadow: var(--e-2); transition: transform var(--d-fast) var(--spring), background var(--d-base); }
.add-btn:hover { background: var(--brand-soft); }
.add-btn span { margin-left: 4px; font-size: 16px; position: relative; top: -1px; }

/* Status badges & tags — semantic colour only */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-saffron { background: var(--warning-soft); color: var(--warning); }   /* pending */
.tone-leaf { background: var(--info-soft); color: var(--info); }            /* approved */
.tone-amber { background: var(--brand-soft); color: var(--brand); }         /* preparing */
.tone-green { background: var(--success-soft); color: var(--success); }     /* ready */
.tone-muted { background: var(--surface-2); color: var(--ink-2); }          /* served */
.tone-chilli { background: var(--danger-soft); color: var(--danger); }      /* rejected */
.tone-free { background: var(--success-soft); color: var(--success); }      /* table free */
.tone-occupied { background: var(--surface-2); color: var(--ink-2); }       /* guest seated */
.tag { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tag-qr { background: var(--info-soft); color: var(--info); }
.tag-manual { background: var(--warning-soft); color: var(--warning); }
.veg { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-right: 6px; border: 1.5px solid var(--veg); border-radius: 3px; vertical-align: -1px; }
.veg::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--veg); }
.pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 0 var(--warning); animation: pulse 1.6s infinite; }

/* Cards & panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 17px; }
.empty { padding: var(--s-12) var(--s-4); text-align: center; color: var(--ink-3); }
.empty h2 { margin-bottom: 6px; font-size: var(--t-lg); color: var(--ink); }
.scroll-x { overflow-x: auto; }

/* Segmented controls, chips, switches */
.tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); }
.tabs button { border: 0; background: transparent; padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); transition: background var(--d-base), color var(--d-base); }
.tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.chip { position: relative; overflow: hidden; padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background var(--d-base), color var(--d-base), border-color var(--d-base); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-sm); font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line-strong); transition: background var(--d-base); }
.track-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--d-slow) var(--spring); }
.switch input:checked + .track-sw { background: var(--success); }
.switch input:checked + .track-sw::after { transform: translateX(18px); }
.switch input:focus-visible + .track-sw { box-shadow: var(--focus); }
.switch .on { color: var(--success); } .switch .off { color: var(--danger); }

/* Toasts — top-centre feedback messages */
#toasts { position: fixed; z-index: 100; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 50%; transform: translateX(-50%); display: grid; gap: var(--s-2); width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; padding: 12px 16px; border-radius: var(--r-md); background: var(--espresso); color: var(--on-dark); font-weight: 700; font-size: 15px; box-shadow: var(--e-3); animation: toastIn .45s var(--spring); }
.toast-chilli { background: var(--danger); color: #fff; }
.toast-leaf { background: var(--success); color: #fff; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: .3s; }

/* Bottom sheets & side drawers */
.scrim { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(28, 21, 18, .5); animation: fade .25s ease-out; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; background: var(--canvas); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e-3); padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheetUp .45s var(--spring); transition: transform .3s var(--ease-out); will-change: transform; }
.grab { flex: none; width: 40px; height: 5px; margin: 10px auto -4px; border-radius: 3px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); }
.sheet-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.scrim.closing { animation: fadeOut .24s ease-in forwards; }
.scrim.closing .sheet { animation: sheetDown .24s ease-in forwards; }
.scrim.still .sheet { animation: none; }

/* Footer credit */
.credit { padding: 18px 16px 6px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.credit a { color: var(--brand); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.credit a:hover { color: var(--brand-hover); }

/* Loading skeleton */
.sk { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.2s linear infinite; }
.sk-line { height: 30px; margin: 6px 0 4px; }
.sk-tile { aspect-ratio: 4 / 4.4; }

/* Ripple (touch feedback) */
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); pointer-events: none; animation: ripple .55s var(--ease-out) forwards; }

/* ---------------------------------------------------------------------
   4. SPLASH SCREEN (first paint)
   --------------------------------------------------------------------- */
#splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; background: var(--espresso); color: var(--on-dark); transition: opacity .55s var(--ease-out), visibility .55s; }
#splash::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90vmax; height: 90vmax; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(251, 146, 60, .22), transparent 60%); animation: spGlow 3s ease-in-out infinite alternate; }
#splash.out { opacity: 0; visibility: hidden; }
#splash.out .sp-in { transform: scale(1.08); }
.sp-in { position: relative; display: grid; justify-items: center; padding: var(--s-6); text-align: center; transition: transform .55s var(--ease-out); }
.sp-cup { width: 72px; height: 72px; margin-bottom: var(--s-2); opacity: 0; animation: spPop .6s var(--spring) .05s forwards; }
.sp-cup .st { fill: none; stroke: var(--on-dark); stroke-width: 3; stroke-linecap: round; opacity: 0; animation: spSteam 1.8s ease-in-out .5s infinite; }
.sp-cup .st2 { animation-delay: .8s; } .sp-cup .st3 { animation-delay: 1.1s; }
.sp-cup .cup { fill: var(--on-dark); } .sp-cup .handle { fill: none; stroke: var(--on-dark); stroke-width: 4; stroke-linecap: round; } .sp-cup .saucer { stroke: var(--accent-on-dark); stroke-width: 4; stroke-linecap: round; }
.sp-word { display: flex; font-family: var(--font-logo); font-size: clamp(72px, 22vw, 120px); line-height: .9; color: #FFF8F0; }
.sp-word span { display: inline-block; opacity: 0; transform: translateY(28px) rotate(-8deg); animation: spLetter .65s var(--spring) forwards; animation-delay: calc(var(--i) * 75ms + .2s); }
.sp-cafe { margin: 6px 0 0 .45em; font: 800 14px/1 var(--font); letter-spacing: .45em; color: var(--accent-on-dark); opacity: 0; animation: spFade .5s .75s forwards; }
.sp-tag { margin: var(--s-4) 0 0; font: 600 15px/1.4 var(--font); color: var(--on-dark-muted); opacity: 0; animation: spRise .6s .95s forwards; }
.sp-sub { margin: 6px 0 0; font: 700 12px/1 var(--font); letter-spacing: .08em; color: #8C837D; opacity: 0; animation: spRise .6s 1.05s forwards; }
.sp-bar { width: 132px; height: 3px; margin-top: 26px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.12); opacity: 0; animation: spFade .4s 1.1s forwards; }
.sp-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--accent-on-dark); animation: spLoad 1.1s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   5. CUSTOMER SCREENS
   --------------------------------------------------------------------- */
.c-shell { min-height: 100vh; padding-bottom: 110px; }

/* App bar (top) */
.c-hero { position: relative; overflow: hidden; background: var(--espresso); color: var(--on-dark); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.c-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(251, 146, 60, .25), transparent 65%); animation: glow 9s ease-in-out infinite alternate; pointer-events: none; }
.c-hero-in { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-6); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--s-4); }
.c-word { font-size: clamp(46px, 13vw, 72px); color: #FFF8F0; }
.c-word small { display: block; margin: 4px 0 0 4px; font: 800 12px/1 var(--font); letter-spacing: .34em; color: var(--accent-on-dark); }
.c-tagline { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--on-dark-muted); }
.c-greet { margin: var(--s-3) 0 0; font-size: 15px; color: var(--on-dark); }
.c-greet b { color: #fff; }
.not-me { border: 0; background: none; padding: 0; font-size: var(--t-sm); color: var(--on-dark-muted); text-decoration: underline; }
/* Table ticket — the signature element */
.tent { min-width: 88px; padding: 10px 14px 12px; border-radius: var(--r-lg); background: var(--brand); color: #fff; text-align: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); transform: rotate(-3deg); }
.tent span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; opacity: .85; }
.tent strong { display: block; font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* Sticky search + category bar */
.c-bar { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow var(--d-base); view-transition-name: cbar; }
.c-bar.stuck { box-shadow: 0 8px 24px -16px rgba(28, 21, 18, .45); border-bottom: 1px solid var(--line); }
.c-bar-in { max-width: 1160px; margin: 0 auto; padding: var(--s-3) var(--s-5) 0; }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.search .input { padding-left: 42px; min-height: 46px; border-radius: var(--r-pill); border-color: var(--line); box-shadow: var(--e-1); }
.c-bar.stuck .search .input { padding-right: 60px; }
.mini-tbl { position: absolute; right: 8px; top: 50%; padding: 6px 10px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; opacity: 0; transform: translateY(-50%) scale(.5); transition: transform .35s var(--spring), opacity var(--d-base); pointer-events: none; }
.c-bar.stuck .mini-tbl { opacity: 1; transform: translateY(-50%) scale(1); }
.cats { display: flex; gap: var(--s-2); padding: var(--s-3) 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-behavior: smooth; }
.cats::-webkit-scrollbar { display: none; }
.cat { position: relative; overflow: hidden; flex: none; display: flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 14px 0 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); scroll-snap-align: start; transition: background var(--d-base), color var(--d-base), border-color var(--d-base), transform var(--d-fast) var(--spring); }
.cat img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; transition: transform .3s var(--spring); }
.cat-all { padding: 0 16px; }
.cat[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.cat[aria-current="true"] img { transform: scale(1.08) rotate(-6deg); }

.strip-host { max-width: 1160px; margin: var(--s-4) auto 0; padding: 0 var(--s-5); }
.strip-host:empty { display: none; }
.order-strip { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); text-align: left; transition: transform var(--d-fast) var(--spring); }
.order-strip .grow { flex: 1; min-width: 0; }
.order-strip b { display: block; }
.order-strip small { color: var(--ink-3); font-weight: 600; }
.strip-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--success); color: #fff; font-size: 13px; font-weight: 800; }

/* Menu layout */
.c-main { max-width: 1160px; margin: 0 auto; padding: var(--s-2) var(--s-5) var(--s-6); display: grid; gap: var(--s-8); }
.c-menu { min-width: 0; display: grid; gap: var(--s-8); view-transition-name: menu-area; }
.types-head h2 { font-size: clamp(24px, 6vw, 30px); }
.types-head p { margin: 4px 0 0; color: var(--ink-3); }
.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.type-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: left; box-shadow: var(--e-1); transition: transform var(--d-fast) var(--spring), box-shadow var(--d-base); }
.tt-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.tt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.tt-body { display: grid; gap: 2px; padding: 10px 44px 12px 12px; }
.tt-body b { font-size: 17px; font-weight: 800; line-height: 1.2; }
.tt-body small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tt-go { position: absolute; right: 10px; bottom: 12px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; transition: transform .3s var(--spring), background var(--d-base), color var(--d-base); }
.back-link { border: 0; background: none; padding: 4px 0 12px; font-weight: 800; font-size: 15px; color: var(--brand); }
.back-link span { display: inline-block; transition: transform var(--d-base) var(--spring); }
.c-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 44%; align-items: center; min-height: 128px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.c-banner h2 { padding: var(--s-4) 0 0 var(--s-5); font-size: clamp(24px, 6vw, 32px); }
.c-banner p { margin: 4px 0 0 var(--s-5); padding-bottom: var(--s-4); font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.c-banner img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.items { display: grid; margin-top: var(--s-2); }
.item { display: grid; grid-template-columns: 1fr 108px; gap: var(--s-4); padding: 18px 0 24px; border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 140px; }
.item h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.item .price { margin-top: 4px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.item-pic { position: relative; }
.item-pic img { width: 108px; height: 96px; border-radius: var(--r-md); object-fit: cover; transition: transform .4s var(--ease-out), filter .3s; }
.item-pic .add-btn, .item-pic .stepper { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); }
.item-pic .add-btn { min-width: 88px; padding: 0 12px; }
.variants { display: inline-flex; margin-top: 10px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); }
.variants button { border: 0; background: transparent; padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--ink-2); transition: background var(--d-base), color var(--d-base); }
.variants button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e-1); }
.variants button small { margin-left: 4px; font-weight: 600; opacity: .8; }
.item.off { opacity: .55; }
.item.off img { filter: grayscale(1); }
.off-label { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font-size: 11px; font-weight: 800; color: var(--danger); white-space: nowrap; }
.in-cart-note { margin-top: var(--s-2); font-size: 13px; font-weight: 700; color: var(--brand); animation: mIn .3s var(--ease-out); }
.credit-menu { max-width: 1160px; margin: 0 auto; padding: var(--s-2) var(--s-5) 0; }

/* Floating cart button (thumb zone) */
.cart-fab { position: fixed; z-index: 40; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%); width: min(calc(100% - 28px), 540px); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 10px 10px 12px; overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--espresso); color: var(--on-dark); text-align: left; box-shadow: var(--e-3); animation: fabIn .45s var(--spring) both; view-transition-name: fab; }
.cart-fab.m-out { animation: fabOut .22s ease-in forwards; }
.cart-fab:active { transform: translateX(-50%) scale(.98); }
.fab-ic { position: relative; flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(255,255,255,.1); }
.fab-ic i { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-on-dark); color: var(--espresso); font-style: normal; font-size: 12px; font-weight: 800; }
.fab-txt { flex: 1; min-width: 0; }
.cart-fab b { font-size: 16px; }
.cart-fab small { display: block; font-size: 12.5px; font-weight: 600; color: var(--on-dark-muted); }
.cart-fab .go { padding: 12px 16px; border-radius: var(--r-md); background: var(--brand); color: #fff; font-weight: 800; }
.cart-panel { display: none; }

/* Cart lines & totals */
.line { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); animation: mIn .3s var(--ease-out) both; }
.line:last-child { border-bottom: 0; }
.line .name { font-weight: 700; }
.line .each { font-size: 13px; color: var(--ink-3); }
.line .amt { grid-column: 2; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.line .stepper { height: 34px; } .line .stepper button { width: 34px; height: 34px; font-size: 18px; }
.totals { display: grid; gap: 6px; padding-top: 6px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { margin-top: 6px; padding-top: var(--s-2); border-top: 1px dashed var(--line-strong); font-size: var(--t-lg); font-weight: 800; }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 14px 0; }
.meta div { min-width: 0; padding: var(--s-2) 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.meta span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-empty .empty-ic { width: 64px; height: 64px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); animation: floaty 3s ease-in-out infinite; }

/* Welcome & "table taken" */
.welcome { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--espresso); color: var(--on-dark); }
.welcome-top { position: relative; width: 100%; max-width: 520px; margin: 0 auto; padding: var(--s-10) var(--s-6) var(--s-6); }
.welcome-top .c-word { font-size: clamp(64px, 20vw, 96px); }
.welcome-top p { margin: var(--s-3) 0 0; color: var(--on-dark-muted); }
.welcome-steam { position: absolute; right: 30px; top: 40px; display: flex; gap: 10px; opacity: .45; }
.welcome-steam i { width: 6px; height: 40px; border-radius: 6px; background: linear-gradient(to top, transparent, var(--on-dark)); animation: steam 2.8s ease-in-out infinite; }
.welcome-steam i:nth-child(2) { height: 54px; animation-delay: .5s; } .welcome-steam i:nth-child(3) { animation-delay: 1s; }
.welcome-card { padding: 26px var(--s-6) var(--s-8); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--canvas); color: var(--ink); }
.welcome-card > div { max-width: 472px; margin: 0 auto; display: grid; gap: var(--s-4); }
.seat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--brand-soft); }
.seat strong { font-size: 34px; font-weight: 800; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; }
.seat p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.seat p b { display: block; font-size: 16px; color: var(--ink); }
.seat-busy { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); }
.seat-busy strong { color: var(--danger); }

/* Order tracking */
.c-topnav { max-width: 560px; margin: 0 auto; padding: 14px var(--s-5) 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c-topnav .brand { flex: 1; font-size: 34px; color: var(--ink); }
.track { max-width: 560px; margin: 0 auto; padding: 18px var(--s-5) 120px; display: grid; gap: 18px; view-transition-name: menu-area; }
.track-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
.track-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.track-head h1 { font-size: var(--t-xl); }
.track-head p { margin: 4px 0 0; color: var(--ink-3); }
.ordno { padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-hero { margin-top: var(--s-4); padding: 14px; display: flex; align-items: center; gap: 14px; border-radius: var(--r-md); transition: background .3s; }
.status-hero.wait { background: var(--warning-soft); } .status-hero.good { background: var(--success-soft); } .status-hero.bad { background: var(--danger-soft); }
.status-hero b { display: block; font-size: 16px; }
.status-hero p { margin: 2px 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.steps { list-style: none; margin: var(--s-5) 0 4px; padding: 0; display: grid; }
.steps li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); padding-bottom: var(--s-5); font-weight: 700; color: var(--ink-3); }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.steps li:last-child::before { display: none; }
.steps .dot { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.steps .dot svg { display: block; }
.steps small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.steps li.done { color: var(--ink); }
.steps li.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.steps li.done::before { background: var(--success); }
.steps li.now { color: var(--ink); font-weight: 800; }
.steps li.now .dot { border-color: var(--brand); }
.steps li.now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 var(--brand); animation: pulse 1.6s infinite; }
.o-note { padding: 6px 10px; border-radius: var(--r-sm); background: var(--warning-soft); font-size: 13px; color: var(--ink); }
.success { display: grid; place-items: center; padding-top: 6px; }
.success-mark circle { fill: var(--success); transform-origin: center; animation: mPop .5s var(--spring) both; }
.success-mark path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .45s .35s var(--ease-out) forwards; }

/* Simple message screens */
.screen-msg { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: var(--s-6); text-align: center; }
.screen-msg > div:first-child { max-width: 380px; display: grid; gap: var(--s-3); justify-items: center; }
.screen-msg .brand { font-size: 56px; color: var(--ink); }
.credit-screen { align-self: end; }

/* ---------------------------------------------------------------------
   6. STAFF SCREENS
   --------------------------------------------------------------------- */
.a-shell { min-height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
.a-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-6) 14px; background: var(--espresso); color: var(--on-dark); }
.a-logo { padding: 0 10px; }
.a-logo .brand { font-size: 44px; color: #FFF8F0; }
.a-logo small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--on-dark-muted); }
.a-nav { display: grid; gap: 4px; }
.a-nav a { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: 11px 12px; border-radius: var(--r-md); color: var(--on-dark-muted); text-decoration: none; font-size: 15px; font-weight: 700; transition: background var(--d-base), color var(--d-base), transform var(--d-fast) var(--spring); }
.a-nav a:hover { background: rgba(255,255,255,.06); color: var(--on-dark); }
.a-nav a:active { transform: scale(.97); }
.a-nav a[aria-current="page"] { background: var(--brand); color: #fff; }
.a-nav svg { flex: none; }
.a-nav .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-on-dark); color: var(--espresso); font-size: 12px; font-weight: 800; animation: mPop .4s var(--spring); }
.a-nav a[aria-current="page"] .count { background: #fff; color: var(--brand); }
.a-side-foot { margin-top: auto; display: grid; gap: 10px; padding: 0 6px; font-size: 13px; color: var(--on-dark-muted); }
.a-side-foot button { padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-md); background: transparent; color: var(--on-dark); font-weight: 700; }
.live { display: inline-flex; align-items: center; gap: var(--s-2); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.live.off i { background: #F87171; }
.a-main { min-width: 0; padding: 28px 32px 60px; view-transition-name: a-main; }
.a-mobile-top { display: none; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.a-mobile-top .brand { font-size: 34px; color: var(--ink); }
.a-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: 22px; }
.a-head h1 { font-size: var(--t-2xl); }
.a-head p { margin: 4px 0 0; color: var(--ink-3); }
.a-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.credit-admin { margin-top: var(--s-8); padding-bottom: 0; }

/* Table strip (dashboard) */
.t-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-6); }
.t-chip { position: relative; overflow: hidden; min-width: 0; display: grid; gap: 2px; padding: 10px 10px 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: background .3s, border-color .3s, transform var(--d-fast) var(--spring); }
.t-chip b { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.t-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.t-chip::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.t-chip[data-s="OCCUPIED"]::after { background: var(--ink-3); }
.t-chip[data-s="ORDER_PENDING"] { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: var(--warning-soft); }
.t-chip[data-s="ORDER_PENDING"]::after { background: var(--warning); box-shadow: 0 0 0 0 var(--warning); animation: pulse 1.6s infinite; }
.t-chip[data-s="APPROVED"]::after { background: var(--info); }
.t-chip[data-s="PREPARING"]::after { background: var(--brand); }
.t-chip[data-s="READY"] { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.t-chip[data-s="READY"]::after { background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: pulse 1.6s infinite; }

/* Order board (kanban) */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { min-width: 0; min-height: 160px; padding: 10px; border-radius: var(--r-lg); background: var(--surface-2); }
.col.pending { background: var(--warning-soft); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; }
.col-head h2 { font-size: 15px; }
.col-head span { min-width: 26px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface); font-size: 13px; font-weight: 800; }
.col-list { display: grid; gap: 10px; }
.col-empty { padding: 18px var(--s-2); text-align: center; font-size: var(--t-sm); color: var(--ink-3); }

/* Order card */
.o-card { min-width: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); transition: box-shadow var(--d-base), transform var(--d-base) var(--spring); }
.o-card.fresh { animation: flash 1.6s ease-out 2; }
.o-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.o-top .ono { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tbl, .tbl-badge { padding: 4px 10px; border-radius: var(--r-sm); background: var(--espresso); color: var(--on-dark); font-size: 14px; font-weight: 800; white-space: nowrap; }
.o-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ink-3); }
.o-cust { font-size: var(--t-sm); }
.o-cust b { font-weight: 800; }
.o-cust a { color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.o-items { list-style: none; margin: 0; padding: var(--s-2) 0; display: grid; gap: 4px; border-top: 1px dashed var(--line-strong); border-bottom: 1px dashed var(--line-strong); font-size: var(--t-sm); }
.o-items li { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; }
.o-items .q { font-weight: 800; }
.o-items .p { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.o-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; }
.o-actions { display: grid; gap: var(--s-2); }
.o-actions.two { display: flex; flex-wrap: wrap; }
.o-actions.two .btn { flex: 1 1 auto; padding: 0 14px; }
.o-actions.two .btn-danger { flex: 0 1 auto; }
.o-actions .btn { min-height: 42px; }
.o-foot { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.o-foot .link-btn { margin-left: auto; }

/* Lists & grids */
.o-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.t-card { position: relative; overflow: hidden; min-height: 150px; display: grid; align-content: start; gap: 10px; padding: var(--s-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform var(--d-fast) var(--spring), box-shadow var(--d-base); }
.t-card .n { display: flex; align-items: center; justify-content: space-between; }
.t-card .n b { font-size: 30px; font-weight: 800; line-height: 1; }
.t-card .n small { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.t-card p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.t-card.wait { border-left-color: var(--warning); }
.t-card.busy { border-left-color: var(--brand); }
.t-card.ready { border-left-color: var(--success); }
.detail-row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.detail-row span { color: var(--ink-3); }
.detail-row a { color: var(--brand); font-weight: 700; }

/* History */
.hist-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: 14px; }
.hist-bar .input { width: auto; min-height: 40px; }
.day-sum { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; margin-bottom: var(--s-4); }
.day-sum > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.day-sum > div:last-child { border-right: 0; }
.day-sum span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.day-sum b { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Menu editor */
.m-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.m-cat { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.m-cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px var(--s-4); border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2); }
.m-cat-head .grow { flex: 1; min-width: 120px; }
.m-cat-head h2 { font-size: 18px; }
.m-cat-head p { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.m-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.m-photo { position: relative; flex: none; display: block; overflow: hidden; border-radius: 10px; cursor: pointer; }
.m-photo img { width: 64px; height: 48px; object-fit: cover; display: block; }
.m-photo span { position: absolute; inset: auto 0 0 0; padding: 2px 0; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 700; text-align: center; }
.m-photo.sm img { width: 44px; height: 34px; }
.m-photo:hover img, .m-photo:focus-within img { outline: 2px solid var(--brand); outline-offset: -2px; }
.m-photo.busy { opacity: .4; pointer-events: none; }
.menu-table { width: 100%; border-collapse: collapse; }
.menu-table td { padding: 10px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.menu-table tr:last-child td { border-bottom: 0; }
.menu-table .thumb { width: 44px; height: 34px; border-radius: var(--r-sm); object-fit: cover; }
.price-in { width: 96px; min-height: 38px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.m-row-acts { white-space: nowrap; text-align: right; }
.m-row-acts .link-btn + .link-btn { margin-left: 10px; }
.photo-pick { display: flex; align-items: center; gap: 14px; }
.photo-pick img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.photo-pick .btn { cursor: pointer; }

/* Manual order */
.mo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); align-items: start; }
.mo-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.mo-tables button { height: 46px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font-size: 17px; font-weight: 800; transition: background var(--d-base), color var(--d-base), border-color var(--d-base); }
.mo-tables button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.mo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.mo-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-2); }
.mo-item { position: relative; overflow: hidden; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; transition: border-color var(--d-base), transform var(--d-fast) var(--spring); }
.mo-item:hover:not([disabled]) { border-color: var(--brand); }
.mo-item[disabled] { opacity: .45; cursor: not-allowed; }
.mo-item .nm { font-size: var(--t-sm); font-weight: 700; line-height: 1.25; }
.mo-item .pr { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mo-item .plus { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 18px; font-weight: 800; }
.mo-item .qty { background: var(--brand); color: #fff; font-size: 14px; }
.mo-summary { position: sticky; top: 20px; }
.rm { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 700; color: var(--danger); }

/* QR codes */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.qr-card { display: grid; gap: var(--s-3); padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.qr-print { display: grid; justify-items: center; gap: var(--s-2); padding: 18px 16px 16px; border-radius: var(--r-lg); background: #FFFFFF; color: #1C1512; text-align: center; border: 2px solid #1C1512; }
.qr-print .brand { font-size: 40px; color: #1C1512; }
.qr-print .qr-tbl { font-size: 24px; font-weight: 800; line-height: 1; color: #C2410C; }
.qr-print .qr-box { padding: 10px; border-radius: 10px; background: #fff; }
.qr-print .qr-box img, .qr-print .qr-box canvas { width: 150px; height: 150px; image-rendering: pixelated; }
.qr-print p { margin: 0; font-size: 13px; font-weight: 700; color: #5E5650; }
.qr-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qr-actions .btn { min-height: 36px; padding: 0 var(--s-2); font-size: 13px; }
.qr-url { margin: 0; font-size: 12px; color: var(--ink-3); word-break: break-all; }
.print-area { display: none; }

/* Invoice settings */
.set-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); align-items: start; }

/* Staff login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-art { display: flex; flex-direction: column; justify-content: space-between; padding: var(--s-12); background: var(--espresso); color: var(--on-dark); }
.login-art .brand { font-size: 96px; color: #FFF8F0; }
.login-art p { max-width: 32ch; color: var(--on-dark-muted); }
.login-form { display: grid; place-items: center; padding: var(--s-8) var(--s-6); }
.login-form form { width: min(100%, 380px); display: grid; gap: var(--s-4); }
.login-form h1 { font-size: var(--t-2xl); }
.hint { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   7. INVOICE & PRINT (receipt layout: 80 mm printers and A4)
   --------------------------------------------------------------------- */
.invoice { max-width: 360px; margin: 0 auto; padding: 18px 16px; border: 1px dashed #CFC6BC; border-radius: 6px; background: #fff; color: #111; font-family: var(--font); font-size: 13px; line-height: 1.45; }
.inv-head { display: grid; gap: 1px; padding-bottom: 10px; border-bottom: 1px dashed #999; text-align: center; }
.inv-brand { font-size: 38px; line-height: 1; color: #1C1512; }
.inv-sub { font-size: 14px; font-weight: 800; }
.inv-title { padding: var(--s-2) 0; border-bottom: 1px dashed #999; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--s-3); margin: 10px 0; }
.inv-meta div { min-width: 0; }
.inv-meta dt { font-size: 11px; color: #666; }
.inv-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.inv-items { width: 100%; border-collapse: collapse; border-top: 1px dashed #999; border-bottom: 1px dashed #999; }
.inv-items th { padding: 6px 0; border-bottom: 1px solid #ddd; text-align: left; font-size: 11px; font-weight: 700; color: #555; }
.inv-items td { padding: 4px 0; vertical-align: top; }
.inv-items .r { padding-left: var(--s-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-totals { display: grid; gap: 2px; padding: var(--s-2) 0; }
.inv-totals div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.inv-grand { margin-top: 4px; padding-top: 6px; border-top: 1px solid #111; font-size: 17px; font-weight: 800; }
.inv-totals .inv-words { display: block; font-size: 11px; font-style: italic; color: #555; }
.inv-note { margin: 4px 0; font-size: 12px; }
.inv-foot { padding-top: 10px; border-top: 1px dashed #999; text-align: center; font-weight: 700; }
.inv-foot small { font-size: 10px; font-weight: 400; color: #777; }
#invoice-print { display: none; }

@media print {
  body.printing-invoice * { visibility: hidden !important; }
  body.printing-invoice #invoice-print, body.printing-invoice #invoice-print * { visibility: visible !important; }
  body.printing-invoice #invoice-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%; }
  body.printing-invoice #invoice-print .invoice { max-width: 76mm; margin: 0 auto; padding: 0; border: 0; }
  body:not(.printing-invoice) * { visibility: hidden !important; }
  body:not(.printing-invoice) .print-on, body:not(.printing-invoice) .print-on * { visibility: visible !important; }
  .print-on { position: absolute; inset: 0; display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14mm; padding: 10mm; background: #fff; }
  .print-on .qr-print { break-inside: avoid; padding: 10mm 6mm; }
  .print-on .qr-print .qr-box img { width: 55mm; height: 55mm; }
  .print-on .qr-print .brand { font-size: 44pt; }
  .print-on .qr-print .qr-tbl { font-size: 26pt; }
  #splash, #toasts { display: none !important; }
  @page { margin: 8mm; }
}

/* ---------------------------------------------------------------------
   8. MOTION — micro-interactions and page transitions
   --------------------------------------------------------------------- */
.m-in { animation: mIn .5s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 70ms); }
.m-rise { animation: mRise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.m-sheet { animation: mSheet .6s var(--ease-out) both; animation-delay: 80ms; }
.m-drop { animation: mDrop .8s var(--spring) both; animation-delay: .15s; }
.m-pop { animation: mPop .38s var(--spring) both; }
.m-num, .m-bump { display: inline-block; animation: mNum .32s var(--spring); }
.m-shake { animation: mShake .42s ease-in-out; }
.cart-fab.m-land { animation: mLand .45s var(--spring); }
.item-pic .add-btn.m-pop, .item-pic .stepper.m-pop { animation-name: mPopCenter; }
.type-tile:active, .cat:active, .t-card:active, .t-chip:active, .mo-item:active:not([disabled]), .chip:active, .order-strip:active { transform: scale(.97); }
.item-pic .add-btn:active, .item-pic .stepper:active { transform: translateX(-50%) scale(.94); }
@media (hover: hover) {
  .type-tile:hover { transform: translateY(-4px); box-shadow: var(--e-2); }
  .type-tile:hover .tt-img img { transform: scale(1.07); }
  .type-tile:hover .tt-go { transform: translateX(3px); background: var(--brand); color: #fff; }
  .item:hover .item-pic img { transform: scale(1.04); }
  .back-link:hover span { transform: translateX(-4px); }
  .o-card:hover { box-shadow: var(--e-2); }
  .t-card:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
}

/* View Transitions: content slides, bars stay put, photos morph */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
::view-transition-group(*) { animation-timing-function: var(--ease-out); }
::view-transition-group(menu-area) { animation-duration: .38s; }
::view-transition-old(menu-area) { animation: vtFadeOut .2s ease-in both; }
::view-transition-new(menu-area) { animation: vtFadeIn .32s var(--ease-out) both; }
.vt-forward::view-transition-old(menu-area) { animation: vtOutLeft .26s ease-in both; }
.vt-forward::view-transition-new(menu-area) { animation: vtInRight .38s var(--ease-out) both; }
.vt-back::view-transition-old(menu-area) { animation: vtOutRight .26s ease-in both; }
.vt-back::view-transition-new(menu-area) { animation: vtInLeft .38s var(--ease-out) both; }
::view-transition-group(hero-img) { z-index: 5; animation-duration: .5s; animation-timing-function: cubic-bezier(.3, .9, .25, 1); }
::view-transition-old(hero-img), ::view-transition-new(hero-img) { width: 100%; height: 100%; object-fit: cover; animation-duration: .5s; }
::view-transition-group(status-hero) { animation-duration: .45s; }
::view-transition-old(a-main) { animation: vtFadeOut .15s ease-in both; }
::view-transition-new(a-main) { animation: aIn .3s var(--ease-out) both; }

@keyframes mIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes mRise { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); } }
@keyframes mSheet { from { opacity: 0; transform: translate3d(0, 60px, 0); } }
@keyframes mDrop { 0% { opacity: 0; transform: translate3d(0, -60px, 0) rotate(-14deg); } 60% { opacity: 1; transform: translate3d(0, 4px, 0) rotate(1deg); } 100% { transform: rotate(-3deg); } }
@keyframes mPop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mPopCenter { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes mNum { 40% { transform: scale(1.35); } }
@keyframes mShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes mLand { 35% { transform: translateX(-50%) scale(1.05, .95); } 70% { transform: translateX(-50%) scale(.98, 1.02); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes fabIn { from { opacity: 0; transform: translate(-50%, 120%); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fabOut { to { opacity: 0; transform: translate(-50%, 120%); } }
@keyframes sheetUp { from { transform: translate3d(0, 100%, 0); } }
@keyframes sheetDown { to { transform: translate3d(0, 100%, 0); } }
@keyframes sheetPop { from { opacity: 0; transform: scale(.94) translateY(16px); } }
@keyframes sheetFade { to { opacity: 0; transform: scale(.96); } }
@keyframes slide { from { opacity: 0; transform: translateX(40px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.95); } }
@keyframes ripple { to { opacity: 0; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes flash { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 30%, transparent); } }
@keyframes floaty { 50% { transform: translateY(-6px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glow { to { transform: translate3d(-12vmin, 8vmin, 0) scale(1.15); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(14px) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scaleY(1.1) skewX(10deg); } }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }
@keyframes vtOutLeft { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vtInRight { from { opacity: 0; transform: translateX(50px); } }
@keyframes vtOutRight { to { opacity: 0; transform: translateX(40px); } }
@keyframes vtInLeft { from { opacity: 0; transform: translateX(-50px); } }
@keyframes aIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes spLetter { to { opacity: 1; transform: none; } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes spSteam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .85; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes spLoad { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes spGlow { to { transform: translate(-45%, -55%) scale(1.1); } }

/* ---------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS & REDUCED MOTION
   --------------------------------------------------------------------- */
@media (min-width: 640px) { .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .items { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
@media (min-width: 760px) {
  .scrim { align-items: center; }
  .sheet { border-radius: var(--r-xl); max-height: 86vh; animation: sheetPop .35s var(--spring); }
  .scrim.right { justify-content: flex-end; align-items: stretch; }
  .scrim.right .sheet { height: 100%; max-height: none; max-width: 460px; border-radius: 0; animation: slide .35s var(--ease-out); }
  .scrim.closing .sheet { animation: sheetFade .2s ease-in forwards; }
  .grab { display: none; }
}
@media (min-width: 1024px) {
  .c-shell { padding-bottom: var(--s-6); }
  .c-main.with-cart { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .cart-fab.has-panel { display: none; }
  .cart-panel { display: block; position: sticky; top: 140px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); }
  .cart-panel .sheet-body { max-height: calc(100vh - 380px); }
}
@media (min-width: 1240px) { .type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .set-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .a-shell { grid-template-columns: 1fr; }
  .a-side { position: fixed; z-index: 50; inset: auto 0 0 0; height: auto; flex-direction: row; gap: 0; padding: 6px 6px calc(env(safe-area-inset-bottom, 0px) + 6px); }
  .a-logo, .a-side-foot { display: none; }
  .a-nav { width: 100%; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
  .a-nav a { flex-direction: column; gap: 3px; padding: 8px 2px; font-size: 10.5px; text-align: center; }
  .a-nav .count { position: absolute; top: 2px; right: 50%; margin-right: -24px; }
  .a-main { padding: 18px var(--s-4) 110px; }
  .a-mobile-top { display: flex; }
  .mo { grid-template-columns: 1fr; }
  .mo-summary { position: static; }
  .login { grid-template-columns: 1fr; }
  .login-art { padding: 28px var(--s-6); }
  .login-art .brand { font-size: 64px; }
  .login-art p.big { display: none; }
}
@media (max-width: 760px) {
  .day-sum { grid-template-columns: 1fr 1fr; }
  .day-sum > div:nth-child(2) { border-right: 0; }
  .day-sum > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
  .t-strip { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
  .t-chip span { display: none; }
  .t-chip { padding: 10px 6px; }
  .a-head h1 { font-size: var(--t-xl); }
  .a-head .actions { width: 100%; }
  .a-head .actions #menu-q { flex: 1 1 100%; width: auto !important; }
  .mo-row { grid-template-columns: 1fr; }
  .menu-table td { padding: 10px; }
  .menu-table .price-in { width: 76px; }
}
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .welcome-steam, .c-hero::before, #splash::before { display: none; }
  .sp-cup .st { opacity: .7; }
}


/* ---------------------------------------------------------------------
   10. BACKGROUND IMAGERY — real menu photos + café doodle pattern
   (Contrast rule: every photo sits under a dark overlay so text stays ≥ AA.)
   --------------------------------------------------------------------- */
:root {
  --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23C2410C' stroke-opacity='0.07' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40h26v10a13 13 0 0 1-13 13h0a13 13 0 0 1-13-13z'/%3E%3Cpath d='M48 44h4a5 5 0 0 1 0 10h-4'/%3E%3Cpath d='M28 32c-2-3 2-5 0-8M36 32c-2-3 2-5 0-8'/%3E%3Cellipse cx='128' cy='34' rx='9' ry='13' transform='rotate%2835 128 34%29'/%3E%3Cpath d='M122 26c5 4 7 10 6 17' /%3E%3Cpath d='M140 112c10-14 30-12 30-12s-2 20-16 27c-8 4-14 0-14-15z'/%3E%3Cpath d='M140 127c6-8 14-14 22-19'/%3E%3Cpath d='M60 128l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='96' cy='82' r='2.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3Ccircle cx='166' cy='64' r='2'/%3E%3Cpath d='M84 160c6-6 12 6 18 0'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23F5EFE9' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40h26v10a13 13 0 0 1-13 13h0a13 13 0 0 1-13-13z'/%3E%3Cpath d='M48 44h4a5 5 0 0 1 0 10h-4'/%3E%3Cpath d='M28 32c-2-3 2-5 0-8M36 32c-2-3 2-5 0-8'/%3E%3Cellipse cx='128' cy='34' rx='9' ry='13' transform='rotate%2835 128 34%29'/%3E%3Cpath d='M122 26c5 4 7 10 6 17' /%3E%3Cpath d='M140 112c10-14 30-12 30-12s-2 20-16 27c-8 4-14 0-14-15z'/%3E%3Cpath d='M140 127c6-8 14-14 22-19'/%3E%3Cpath d='M60 128l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='96' cy='82' r='2.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3Ccircle cx='166' cy='64' r='2'/%3E%3Cpath d='M84 160c6-6 12 6 18 0'/%3E%3C/g%3E%3C/svg%3E");
  --photo-wide: url("/menu-images/hero-wide.jpg");
  --photo-tall: url("/menu-images/hero-tall.jpg");
  --photo-overlay: linear-gradient(180deg, rgba(28, 21, 18, .72) 0%, rgba(28, 21, 18, .86) 60%, rgba(28, 21, 18, .96) 100%);
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  :root {
    --photo-wide: image-set(url("/menu-images/hero-wide.webp") type("image/webp"), url("/menu-images/hero-wide.jpg") type("image/jpeg"));
    --photo-tall: image-set(url("/menu-images/hero-tall.webp") type("image/webp"), url("/menu-images/hero-tall.jpg") type("image/jpeg"));
  }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23FB923C' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40h26v10a13 13 0 0 1-13 13h0a13 13 0 0 1-13-13z'/%3E%3Cpath d='M48 44h4a5 5 0 0 1 0 10h-4'/%3E%3Cpath d='M28 32c-2-3 2-5 0-8M36 32c-2-3 2-5 0-8'/%3E%3Cellipse cx='128' cy='34' rx='9' ry='13' transform='rotate%2835 128 34%29'/%3E%3Cpath d='M122 26c5 4 7 10 6 17' /%3E%3Cpath d='M140 112c10-14 30-12 30-12s-2 20-16 27c-8 4-14 0-14-15z'/%3E%3Cpath d='M140 127c6-8 14-14 22-19'/%3E%3Cpath d='M60 128l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='96' cy='82' r='2.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3Ccircle cx='166' cy='64' r='2'/%3E%3Cpath d='M84 160c6-6 12 6 18 0'/%3E%3C/g%3E%3C/svg%3E"); } }
:root[data-theme="dark"] { --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23FB923C' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40h26v10a13 13 0 0 1-13 13h0a13 13 0 0 1-13-13z'/%3E%3Cpath d='M48 44h4a5 5 0 0 1 0 10h-4'/%3E%3Cpath d='M28 32c-2-3 2-5 0-8M36 32c-2-3 2-5 0-8'/%3E%3Cellipse cx='128' cy='34' rx='9' ry='13' transform='rotate%2835 128 34%29'/%3E%3Cpath d='M122 26c5 4 7 10 6 17' /%3E%3Cpath d='M140 112c10-14 30-12 30-12s-2 20-16 27c-8 4-14 0-14-15z'/%3E%3Cpath d='M140 127c6-8 14-14 22-19'/%3E%3Cpath d='M60 128l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='96' cy='82' r='2.5'/%3E%3Ccircle cx='20' cy='150' r='2'/%3E%3Ccircle cx='166' cy='64' r='2'/%3E%3Cpath d='M84 160c6-6 12 6 18 0'/%3E%3C/g%3E%3C/svg%3E"); }

/* Page canvas: subtle hand-drawn café doodles (cups, beans, leaves) */
body { background-color: var(--canvas); background-image: var(--pattern-light); background-size: 180px 180px; }

/* Customer header: food photo collage with slow zoom (Ken Burns) */
.c-hero { isolation: isolate; }
.c-hero::after {
  content: ""; position: absolute; inset: -6%; z-index: -1;
  background: var(--photo-overlay), var(--photo-tall) center 35% / cover no-repeat;
  animation: kenburns 24s ease-in-out infinite alternate; will-change: transform;
}
.c-hero::before { z-index: 0; }
.c-hero-in { z-index: 1; }
@media (min-width: 720px) { .c-hero::after { background: var(--photo-overlay), var(--photo-wide) center / cover no-repeat; } }

/* Welcome screen: photo behind the logo, fading into the espresso background */
.welcome { background: var(--espresso) var(--pattern-dark); background-size: 180px 180px; }
.welcome-top { max-width: none; padding-bottom: var(--s-10); isolation: isolate; overflow: hidden; }
.welcome-top::before {
  content: ""; position: absolute; inset: -4%; z-index: -1;
  background: linear-gradient(180deg, rgba(28,21,18,.55) 0%, rgba(28,21,18,.8) 55%, var(--espresso) 100%), var(--photo-tall) center 30% / cover no-repeat;
  animation: kenburns 24s ease-in-out infinite alternate;
}
.welcome-top > .c-word, .welcome-top > p { max-width: 472px; margin-left: auto; margin-right: auto; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.welcome-top > p { margin-top: var(--s-3); }
@media (min-width: 720px) { .welcome-top::before { background: linear-gradient(180deg, rgba(28,21,18,.5) 0%, rgba(28,21,18,.8) 60%, var(--espresso) 100%), var(--photo-wide) center / cover no-repeat; } }

/* Splash and staff sidebar: light doodle texture on espresso */
#splash { background-image: var(--pattern-dark); background-size: 180px 180px; }
.a-side { background-image: var(--pattern-dark); background-size: 180px 180px; }

/* Staff login: photo panel */
.login-art { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(28,21,18,.86), rgba(28,21,18,.95)), var(--photo-tall) center / cover no-repeat; }
@media (min-width: 901px) { .login-art { background: linear-gradient(180deg, rgba(28,21,18,.86) 0%, rgba(28,21,18,.82) 45%, rgba(28,21,18,.95) 100%), var(--photo-tall) center / cover no-repeat; } }
.login-art .brand, .login-art p { text-shadow: 0 2px 18px rgba(0,0,0,.5); }

/* "Thank you" / message screens: photo strip at the top */
.screen-msg { position: relative; isolation: isolate; }
.screen-msg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38vh; z-index: -1; background: linear-gradient(180deg, rgba(247,245,242,.2), var(--canvas)), var(--photo-wide) center / cover no-repeat; opacity: .35; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

@keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .c-hero::after, .welcome-top::before { animation: none; } }