/* Houselights case study: tokens, type scale and components shared by the page and the product.
   Layout: one 1280px container; calm light sections with hairlines; the live till band is the only dark section. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: semantic colours with a cinema-red brand scale and a neutral near-black gray scale.
   The page is dark-first by design; the tills and back office carry their own light/dark mode via data-mode. ---------- */
:root {
  --img-bg: #EEEEEC;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 2px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03), 0 3px 3px -1.5px rgba(0, 0, 0, 0.04);
  --shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.14), 0 5px 5px -2.5px rgba(0, 0, 0, 0.04);
  --font: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bg-primary: #141414; --bg-primary-alt: #1A1A1A; --bg-primary-hover: #1F1F1F;
  --bg-secondary: #1A1A1A; --bg-secondary-alt: #141414; --bg-secondary-hover: #262626;
  --bg-tertiary: #262626; --bg-quaternary: #333333;
  --bg-brand-solid: #E50914; --bg-brand-solid-hover: #F6121D;
  --bg-error-solid: #D92D20; --bg-overlay: #000000;
  --text-primary: #FFFFFF; --text-secondary: #E5E5E5; --text-tertiary: #B3B3B3; --text-quaternary: #8C8C8C; --text-placeholder: #808080;
  --text-brand-secondary: #FF6168; --text-brand-tertiary: #FA2A33;
  --text-success: #47CD89; --text-warning: #FDB022; --text-error: #F97066;
  --border-primary: #404040; --border-secondary: #2A2A2A; --border-brand: #FA2A33;
  --fg-primary: #FFFFFF; --fg-secondary: #E5E5E5; --fg-tertiary: #B3B3B3; --fg-quaternary: #6D6D6D; --fg-quaternary-hover: #8C8C8C;
  --fg-brand-primary: #E50914; --fg-success-secondary: #17B26A; --fg-warning-secondary: #F79009; --fg-error-secondary: #F04438;
  --focus-ring: #FA2A33;
  --u-gray-50: #1A1A1A; --u-gray-100: #262626; --u-gray-200: #404040; --u-gray-500: #8C8C8C; --u-gray-600: #B3B3B3; --u-gray-700: #E5E5E5;
  --u-brand-50: #2A0709; --u-brand-100: #480205; --u-brand-200: #7A0B11; --u-brand-500: #FA2A33; --u-brand-600: #FF6168; --u-brand-700: #FF9DA1;
  --u-success-50: #053321; --u-success-100: #074D31; --u-success-200: #085D3A; --u-success-500: #17B26A; --u-success-600: #47CD89; --u-success-700: #75E0A7;
  --u-warning-50: #4E1D09; --u-warning-100: #7A2E0E; --u-warning-200: #93370D; --u-warning-500: #F79009; --u-warning-600: #FDB022; --u-warning-700: #FEC84B;
  --u-error-50: #55160C; --u-error-100: #7A271A; --u-error-200: #912018; --u-error-500: #F04438; --u-error-600: #F97066; --u-error-700: #FDA29B;
  --u-blue-50: #102A56; --u-blue-100: #194185; --u-blue-200: #1849A9; --u-blue-500: #2E90FA; --u-blue-600: #53B1FD; --u-blue-700: #84CAFF;
  --u-purple-50: #27115F; --u-purple-100: #3E1C96; --u-purple-200: #4A1FB8; --u-purple-500: #9B8AFB; --u-purple-600: #BDB4FE; --u-purple-700: #D9D6FE;
  --u-orange-50: #511C10; --u-orange-100: #772917; --u-orange-200: #932F19; --u-orange-500: #EF6820; --u-orange-600: #F38744; --u-orange-700: #F7B27A;
  --skeuo: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}
/* The page itself sits close to black; the tills keep their own dark greys so the screens read as lit panels. */
:root {
  --bg-primary: #050505; --bg-primary-alt: #0D0D0D; --bg-primary-hover: #121212;
  --bg-secondary: #0B0B0B; --bg-secondary-alt: #050505; --bg-secondary-hover: #1A1A1A;
  --bg-tertiary: #1A1A1A; --bg-quaternary: #262626;
  --border-primary: #333333; --border-secondary: #1C1C1C;
}
.ui[data-mode="dark"] {
  --bg-primary: #141414; --bg-primary-alt: #1A1A1A; --bg-primary-hover: #1F1F1F;
  --bg-secondary: #1A1A1A; --bg-secondary-alt: #141414; --bg-secondary-hover: #262626;
  --bg-tertiary: #262626; --bg-quaternary: #333333;
  --bg-brand-solid: #E50914; --bg-brand-solid-hover: #F6121D;
  --bg-error-solid: #D92D20; --bg-overlay: #000000;
  --text-primary: #FFFFFF; --text-secondary: #E5E5E5; --text-tertiary: #B3B3B3; --text-quaternary: #8C8C8C; --text-placeholder: #808080;
  --text-brand-secondary: #FF6168; --text-brand-tertiary: #FA2A33;
  --text-success: #47CD89; --text-warning: #FDB022; --text-error: #F97066;
  --border-primary: #404040; --border-secondary: #2A2A2A; --border-brand: #FA2A33;
  --fg-primary: #FFFFFF; --fg-secondary: #E5E5E5; --fg-tertiary: #B3B3B3; --fg-quaternary: #6D6D6D; --fg-quaternary-hover: #8C8C8C;
  --fg-brand-primary: #E50914; --fg-success-secondary: #17B26A; --fg-warning-secondary: #F79009; --fg-error-secondary: #F04438;
  --focus-ring: #FA2A33;
  --u-gray-50: #1A1A1A; --u-gray-100: #262626; --u-gray-200: #404040; --u-gray-500: #8C8C8C; --u-gray-600: #B3B3B3; --u-gray-700: #E5E5E5;
  --u-brand-50: #2A0709; --u-brand-100: #480205; --u-brand-200: #7A0B11; --u-brand-500: #FA2A33; --u-brand-600: #FF6168; --u-brand-700: #FF9DA1;
  --u-success-50: #053321; --u-success-100: #074D31; --u-success-200: #085D3A; --u-success-500: #17B26A; --u-success-600: #47CD89; --u-success-700: #75E0A7;
  --u-warning-50: #4E1D09; --u-warning-100: #7A2E0E; --u-warning-200: #93370D; --u-warning-500: #F79009; --u-warning-600: #FDB022; --u-warning-700: #FEC84B;
  --u-error-50: #55160C; --u-error-100: #7A271A; --u-error-200: #912018; --u-error-500: #F04438; --u-error-600: #F97066; --u-error-700: #FDA29B;
  --u-blue-50: #102A56; --u-blue-100: #194185; --u-blue-200: #1849A9; --u-blue-500: #2E90FA; --u-blue-600: #53B1FD; --u-blue-700: #84CAFF;
  --u-purple-50: #27115F; --u-purple-100: #3E1C96; --u-purple-200: #4A1FB8; --u-purple-500: #9B8AFB; --u-purple-600: #BDB4FE; --u-purple-700: #D9D6FE;
  --u-orange-50: #511C10; --u-orange-100: #772917; --u-orange-200: #932F19; --u-orange-500: #EF6820; --u-orange-600: #F38744; --u-orange-700: #F7B27A;
  --skeuo: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}
.ui[data-mode="light"] {
  --bg-primary: #FFFFFF; --bg-primary-alt: #FFFFFF; --bg-primary-hover: #FAFAFA;
  --bg-secondary: #F5F5F5; --bg-secondary-alt: #F5F5F5; --bg-secondary-hover: #EBEBEB;
  --bg-tertiary: #EBEBEB; --bg-quaternary: #DEDEDE;
  --bg-brand-solid: #E50914; --bg-brand-solid-hover: #C1040E;
  --bg-error-solid: #D92D20; --bg-overlay: #141414;
  --text-primary: #141414; --text-secondary: #333333; --text-tertiary: #595959; --text-quaternary: #6B6B6B; --text-placeholder: #6B6B6B;
  --text-brand-secondary: #C1040E; --text-brand-tertiary: #E50914;
  --text-success: #067647; --text-warning: #B54708; --text-error: #B42318;
  --border-primary: #D4D4D4; --border-secondary: #E8E8E8; --border-brand: #E50914;
  --fg-primary: #141414; --fg-secondary: #333333; --fg-tertiary: #595959; --fg-quaternary: #A3A3A3; --fg-quaternary-hover: #737373;
  --fg-brand-primary: #E50914; --fg-success-secondary: #17B26A; --fg-warning-secondary: #F79009; --fg-error-secondary: #F04438;
  --focus-ring: #E50914;
  --u-gray-50: #FAFAFA; --u-gray-100: #F0F0F0; --u-gray-200: #E0E0E0; --u-gray-500: #737373; --u-gray-600: #595959; --u-gray-700: #333333;
  --u-brand-50: #FFF1F1; --u-brand-100: #FFE0E1; --u-brand-200: #FFC5C7; --u-brand-500: #FA2A33; --u-brand-600: #E50914; --u-brand-700: #C1040E;
  --u-success-50: #ECFDF3; --u-success-100: #DCFAE6; --u-success-200: #ABEFC6; --u-success-500: #17B26A; --u-success-600: #079455; --u-success-700: #067647;
  --u-warning-50: #FFFAEB; --u-warning-100: #FEF0C7; --u-warning-200: #FEDF89; --u-warning-500: #F79009; --u-warning-600: #DC6803; --u-warning-700: #B54708;
  --u-error-50: #FEF3F2; --u-error-100: #FEE4E2; --u-error-200: #FECDCA; --u-error-500: #F04438; --u-error-600: #D92D20; --u-error-700: #B42318;
  --u-blue-50: #EFF8FF; --u-blue-100: #D1E9FF; --u-blue-200: #B2DDFF; --u-blue-500: #2E90FA; --u-blue-600: #1570EF; --u-blue-700: #175CD3;
  --u-purple-50: #F4F3FF; --u-purple-100: #EBE9FE; --u-purple-200: #D9D6FE; --u-purple-500: #7A5AF8; --u-purple-600: #6938EF; --u-purple-700: #5925DC;
  --u-orange-50: #FEF6EE; --u-orange-100: #FDEAD7; --u-orange-200: #F9DBAF; --u-orange-500: #EF6820; --u-orange-600: #E04F16; --u-orange-700: #B93815;
  --skeuo: inset 0 0 0 1px rgba(20, 20, 20, 0.18), inset 0 -2px 0 rgba(20, 20, 20, 0.05);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11" 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ic { display: block; flex: none; }
[data-ic] { display: inline-flex; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bg-primary); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow-lg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
.container.wide { max-width: 1440px; }
.grow { flex: 1; min-width: 0; }
.push { margin-left: auto; }
.push-down { margin-top: auto; }

/* ---------- components (shared by page and product) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.08s ease; font-family: inherit; }
.btn:not(:disabled):active { transform: scale(0.985); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 14px; gap: 4px; }
.btn-md { height: 40px; padding: 0 14px; font-size: 14px; gap: 4px; }
.btn-lg { height: 44px; padding: 0 16px; font-size: 16px; }
.btn-xl { height: 48px; padding: 0 18px; font-size: 16px; }
.btn-2xl { height: 56px; padding: 0 20px; font-size: 17px; gap: 8px; border-radius: 10px; }
.btn-3xl { height: 64px; padding: 0 24px; font-size: 19px; gap: 8px; border-radius: 12px; }
.btn-icon { padding: 0; aspect-ratio: 1; }
.btn-primary { background: var(--bg-brand-solid); color: #fff; box-shadow: var(--skeuo), var(--shadow-xs); }
.btn-primary::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: inherit; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.btn-primary:not(:disabled):hover { background: var(--bg-brand-solid-hover); }
.btn-primary .ic { color: rgba(255, 255, 255, 0.72); }
.btn-secondary { background: var(--bg-primary); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-primary), inset 0 -2px 0 rgba(10, 13, 18, 0.05), var(--shadow-xs); }
.btn-secondary:not(:disabled):hover { background: var(--bg-primary-hover); color: var(--text-primary); }
.btn-secondary .ic, .btn-tertiary .ic { color: var(--fg-quaternary-hover); }
.btn-tertiary { background: transparent; color: var(--text-tertiary); }
.btn-tertiary:not(:disabled):hover { background: var(--bg-primary-hover); color: var(--text-secondary); }
.btn-link { background: none; height: auto; padding: 4px 0; font-size: 14px; color: var(--text-brand-secondary); }
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn.wide { width: 100%; }

.badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 500; line-height: 18px; flex: none; }
.badge-sm { font-size: 12px; padding: 2px 8px; }
.badge-md { font-size: 14px; line-height: 20px; padding: 2px 10px; }
.badge-pill { border-radius: 999px; background: var(--b-50); color: var(--b-700); box-shadow: inset 0 0 0 1px var(--b-200); }
.badge-pill .ic { color: var(--b-500); }
.badge-modern { border-radius: 6px; background: var(--bg-primary); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); }
.badge-modern.badge-sm { padding: 2px 6px; }
.badge-modern.badge-md { padding: 2px 8px; }
.badge-modern .ic { color: var(--fg-quaternary-hover); }
.b-gray { --b-50: var(--u-gray-50); --b-200: var(--u-gray-200); --b-500: var(--u-gray-500); --b-700: var(--u-gray-700); }
.b-brand { --b-50: var(--u-brand-50); --b-200: var(--u-brand-200); --b-500: var(--u-brand-500); --b-700: var(--u-brand-700); }
.b-success { --b-50: var(--u-success-50); --b-200: var(--u-success-200); --b-500: var(--u-success-500); --b-700: var(--u-success-700); }
.b-warning { --b-50: var(--u-warning-50); --b-200: var(--u-warning-200); --b-500: var(--u-warning-500); --b-700: var(--u-warning-700); }
.b-error { --b-50: var(--u-error-50); --b-200: var(--u-error-200); --b-500: var(--u-error-500); --b-700: var(--u-error-700); }
.b-blue { --b-50: var(--u-blue-50); --b-200: var(--u-blue-200); --b-500: var(--u-blue-500); --b-700: var(--u-blue-700); }
.b-purple { --b-50: var(--u-purple-50); --b-200: var(--u-purple-200); --b-500: var(--u-purple-500); --b-700: var(--u-purple-700); }
.b-orange { --b-50: var(--u-orange-50); --b-200: var(--u-orange-200); --b-500: var(--u-orange-500); --b-700: var(--u-orange-700); }

.fi { position: relative; display: inline-grid; place-items: center; flex: none; }
.fi-sm { width: 32px; height: 32px; } .fi-md { width: 40px; height: 40px; } .fi-lg { width: 48px; height: 48px; } .fi-xl { width: 56px; height: 56px; }
.fi-light { border-radius: 50%; background: var(--fi-bg); color: var(--fi-fg); }
.fi-light.ring { box-shadow: 0 0 0 8px var(--fi-ring); }
.fi-modern { background: var(--bg-primary); color: var(--fi-fg); box-shadow: inset 0 0 0 1px var(--border-primary), inset 0 -2px 0 rgba(10, 13, 18, 0.05), var(--shadow-xs); }
.fi-modern.fi-sm { border-radius: 6px; } .fi-modern.fi-md { border-radius: 8px; } .fi-modern.fi-lg { border-radius: 10px; } .fi-modern.fi-xl { border-radius: 12px; }
.fi-brand { --fi-bg: var(--u-brand-100); --fi-fg: var(--u-brand-600); --fi-ring: var(--u-brand-50); }
.fi-gray { --fi-bg: var(--u-gray-100); --fi-fg: var(--u-gray-600); --fi-ring: var(--u-gray-50); }
.fi-success { --fi-bg: var(--u-success-100); --fi-fg: var(--u-success-600); --fi-ring: var(--u-success-50); }
.fi-warning { --fi-bg: var(--u-warning-100); --fi-fg: var(--u-warning-600); --fi-ring: var(--u-warning-50); }
.fi-error { --fi-bg: var(--u-error-100); --fi-fg: var(--u-error-600); --fi-ring: var(--u-error-50); }
.fi-modern.fi-gray { --fi-fg: var(--fg-secondary); }

.card { background: var(--bg-primary); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); }

.tabs { display: flex; gap: 4px; }
.tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-quaternary); white-space: nowrap; }
.tabs-border { padding: 4px; border-radius: 10px; background: var(--bg-secondary-alt); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.tabs-border .tab { height: 36px; padding: 0 12px; border-radius: 6px; }
.tabs-border .tab:hover { color: var(--text-secondary); }
.tabs-border .tab.on { background: var(--bg-primary-alt); color: var(--text-secondary); box-shadow: var(--shadow-sm); }
.tabs-border.full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabs-brand .tab { border-radius: 8px; }
.tabs-brand .tab.on { background: var(--u-brand-50); color: var(--u-brand-700); box-shadow: inset 0 0 0 1px var(--u-brand-200); }

.btn-group { display: inline-flex; border-radius: 8px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); overflow: hidden; }
.btn-group button { border: 0; background: none; cursor: pointer; height: 40px; padding: 0 16px; font-weight: 600; font-size: 14px; color: var(--text-secondary); white-space: nowrap; box-shadow: inset 1px 0 0 var(--border-primary); display: inline-flex; align-items: center; gap: 6px; }
.btn-group button:first-child { box-shadow: none; }
.btn-group button small { font-weight: 500; color: var(--text-quaternary); font-size: 13px; }
.btn-group button:hover { background: var(--bg-primary-hover); }
.btn-group button.on { background: var(--bg-secondary-hover); color: var(--text-primary); }
.btn-group.sm button { height: 36px; padding: 0 12px; }

.toggle-row { display: inline-flex; align-items: center; gap: 10px; height: 44px; white-space: nowrap; flex: none; border: 0; background: none; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--text-secondary); padding: 0; }
.toggle { position: relative; width: 44px; height: 24px; border-radius: 12px; background: var(--bg-tertiary); box-shadow: inset 0 0 0 1px var(--border-secondary); transition: background-color 0.15s; flex: none; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease); }
.toggle.on { background: var(--bg-brand-solid); box-shadow: none; }
.toggle.on i { transform: translateX(20px); }

.input { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 8px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); color: var(--fg-quaternary-hover); font-size: 16px; }
.input-md { height: 40px; font-size: 14px; }
.input-lg { height: 52px; }
.input .val { flex: 1; color: var(--text-primary); font-weight: 500; }
.input .val::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 2px; background: var(--fg-brand-primary); vertical-align: -0.2em; }
.input .ph { flex: 1; color: var(--text-placeholder); }
.input kbd { font: 500 12px/1 var(--font); padding: 4px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border-secondary); color: var(--text-quaternary); white-space: nowrap; }
.sheet .input-lg { box-shadow: inset 0 0 0 2px var(--border-brand), 0 0 0 4px color-mix(in srgb, var(--u-brand-500) 22%, transparent); }

.avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--bg-tertiary); box-shadow: inset 0 0 0 1px rgba(10, 13, 18, 0.08); padding: 0; border: 0; }
.avatar span { font-weight: 600; color: var(--text-tertiary); }
.avatar-md { width: 40px; height: 40px; } .avatar-md span { font-size: 15px; }
.avatar-xl { width: 56px; height: 56px; } .avatar-xl span { font-size: 20px; }
button.avatar { cursor: pointer; }

.alert { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--bg-primary-alt); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); }
.alert > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.alert b { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.alert span { font-size: 14px; color: var(--text-tertiary); }
.alert-brand { background: var(--u-brand-50); box-shadow: inset 0 0 0 1px var(--u-brand-200); }
.alert-brand b { color: var(--u-brand-700); }
.alert-warning { background: var(--u-warning-50); box-shadow: inset 0 0 0 1px var(--u-warning-200); }
.alert-warning b { color: var(--u-warning-700); }
.alert.compact { padding: 10px 12px; }

.stepper { display: inline-flex; align-items: center; flex: none; border-radius: 10px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); overflow: hidden; }
.stepper button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--fg-secondary); }
.stepper button:hover:not(:disabled) { background: var(--bg-primary-hover); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper output { min-width: 32px; text-align: center; font-weight: 600; font-size: 17px; }
.stepper.sm button { width: 40px; height: 44px; }
.stepper.sm output { min-width: 24px; font-size: 15px; }

.mini-h { font-size: 12px; font-weight: 600; color: var(--text-quaternary); letter-spacing: 0.02em; }
.hint { font-size: 13px; color: var(--text-quaternary); }
.empty { color: var(--text-quaternary); display: flex; align-items: center; gap: 8px; padding: 24px 4px; font-size: 14px; }

/* =====================================================================
   Page
   ===================================================================== */
.site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg-primary) 96%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: inset 0 -1px 0 var(--border-secondary); }
.nav-in { position: relative; display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--text-quaternary); font-weight: 500; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; padding: 8px 12px; border-radius: 6px; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--text-primary); }
.nav-line { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--fg-brand-primary); opacity: 0; transition: left 0.4s var(--ease), width 0.4s var(--ease), opacity 0.2s; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; }
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg-primary); padding: calc(env(safe-area-inset-top, 0px) + 16px) 24px 32px; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.menu nav { display: grid; margin-top: 24px; }
.menu nav a { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.menu .btn { margin-top: auto; }

.eyebrow { font-size: 14px; font-weight: 600; color: var(--text-brand-secondary); margin-bottom: 10px; }
.h-display { font-size: clamp(2.6rem, 6.2vw, 5.25rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
.soft { color: var(--text-quaternary); }
.lead { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.6; color: var(--text-tertiary); max-width: 64ch; }

/* hero */
.hero { padding-block: clamp(44px, 6.5vw, 88px) clamp(40px, 5vw, 72px); }
.badge-group { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; margin-bottom: 24px; border-radius: 999px; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--border-primary), inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-xs); transition: box-shadow 0.2s, color 0.2s; }
.badge-group .inner { padding: 2px 10px; border-radius: 999px; background: var(--bg-brand-solid); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.badge-group .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quaternary); }
.badge-group .ic { color: var(--fg-quaternary-hover); transition: transform 0.2s var(--ease), color 0.2s; }
.badge-group:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1px #4D4D4D, inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-xs); }
.badge-group:hover .ic { color: var(--text-primary); transform: translateX(3px); }
.h-display .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.h-display .line > span { display: inline-block; animation: rise 1s var(--ease) both; }
.h-display .line + .line > span { animation-delay: 0.12s; }
@keyframes rise { from { transform: translateY(105%); } }
.hero .lead { margin-top: 20px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero .h-display { font-size: clamp(2.25rem, 3.8vw, 3.4rem); }
.hero-photo { position: relative; margin: 0; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--bg-tertiary); box-shadow: var(--shadow-3xl); }
.hero-card { position: absolute; left: -28px; bottom: 32px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--border-secondary), 0 20px 40px -12px rgba(0, 0, 0, 0.45); max-width: calc(100% - 24px); }
.hero-card div { display: grid; }
.hero-card b { font-size: 15px; font-weight: 600; }
.hero-card div span { font-size: 13px; color: var(--text-tertiary); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.facts { margin: clamp(40px, 5vw, 60px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--border-secondary); }
.facts dt { font-size: 13px; font-weight: 600; color: var(--text-brand-secondary); margin-bottom: 4px; }
.facts dt .fi { display: grid; margin-bottom: 16px; background: var(--bg-secondary); }
.facts dd { margin: 0; font-size: 14px; color: var(--text-tertiary); line-height: 1.5; }

/* live till band: the one dark section; "house lights down" as it enters */
.till { background: #000000; color: #FFFFFF; padding-block: clamp(48px, 6vw, 88px); position: relative; overflow: hidden; }
.till > .container { position: relative; }
.till-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.till .eyebrow { color: #FF6168; }
.till .h2 { color: #FFFFFF; }
.till .h2 .soft { color: #8C8C8C; }
.guide { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: g; }
.guide-steps li { counter-increment: g; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px 0 5px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #B3B3B3; box-shadow: inset 0 0 0 1px #2A2A2A; background: #141414; transition: color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.guide-steps li::before { content: counter(g); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #262626; color: #E5E5E5; font-size: 12px; font-weight: 600; }
.guide-steps li.current { color: #FFFFFF; background: #2A0709; box-shadow: inset 0 0 0 1px #E50914; }
.guide-steps li.current::before { background: #E50914; color: #fff; }
.guide-steps li.done { color: #E5E5E5; }
.guide-steps li.done::before { content: "✓"; background: #079455; color: #fff; }
.guide-count { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #B3B3B3; }
.guide.complete .guide-count { color: #47CD89; }

.device { background: #111111; border-radius: clamp(14px, 2vw, 28px); padding: clamp(6px, 0.9vw, 12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), var(--shadow-3xl); }
.till .device { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.device.browserish { padding: 0; background: transparent; border-radius: 14px; overflow: hidden; }
.frame { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); overflow: hidden; border-radius: clamp(8px, 1.2vw, 16px); background: #000000; }
.device.browserish .frame { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border-secondary); }
.canvas { position: absolute; top: 0; left: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform-origin: 0 0; }
.device:fullscreen { display: grid; place-items: center; background: #000; padding: 0; border-radius: 0; }
.device:fullscreen .frame { width: min(100vw, calc(100vh * var(--w) / var(--h))); border-radius: 0; }
.device-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--text-tertiary); }
.till .device-bar { color: #B3B3B3; }
.device-actions { display: flex; gap: 8px; }
.till .btn-secondary { background: #141414; color: #E5E5E5; box-shadow: inset 0 0 0 1px #404040; }
.till .btn-secondary:hover { background: #262626; color: #fff; }
.swipe-hint { display: none; }

/* sections */
.sec { padding-block: clamp(64px, 8vw, 112px); }
.sec.alt { background: var(--bg-secondary); }
.sec-head { max-width: 700px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head .lead { margin-top: 16px; }

/* problem → principle */
.legacy-fig { margin: 0 0 clamp(32px, 4vw, 52px); }
.legacy-fig .frame { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-lg); background: #008080; }
.legacy-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--text-quaternary); }
.shifts { list-style: none; margin: 0; padding: 0; }
.shifts li { display: grid; grid-template-columns: 48px minmax(0, 1fr) 36px minmax(0, 1fr); gap: 14px 22px; align-items: start; padding-block: 20px; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.shifts li:first-child { box-shadow: inset 0 1px 0 var(--border-secondary), inset 0 -1px 0 var(--border-secondary); }
.shifts .n { font-size: 14px; font-weight: 600; color: var(--text-quaternary); padding-top: 3px; font-variant-numeric: tabular-nums; }
.shifts small { display: block; font-size: 13px; font-weight: 600; color: var(--text-quaternary); margin-bottom: 4px; }
.shifts .after small { color: var(--text-brand-secondary); }
.shifts b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; color: var(--text-primary); }
.shifts .before b { color: var(--text-tertiary); }
.shifts p { font-size: 14px; color: var(--text-tertiary); line-height: 1.55; }
.shifts .to { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--u-brand-50); color: var(--u-brand-600); box-shadow: inset 0 0 0 1px var(--u-brand-200); }

/* people */
.break { margin: 0 0 clamp(48px, 6vw, 72px); border-radius: 20px; overflow: hidden; background: var(--bg-tertiary); }
.break img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 18px; }
.role img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--bg-tertiary); margin-bottom: 16px; }
.role h3 { font-size: 17px; letter-spacing: -0.02em; }
.role .where { font-size: 13px; color: var(--text-quaternary); margin: 2px 0 14px; }
.role dl { margin: 0; display: grid; gap: 10px; }
.role dt { font-size: 12px; font-weight: 600; color: var(--text-brand-secondary); }
.role dd { margin: 0; font-size: 14px; color: var(--text-tertiary); line-height: 1.5; }

/* screens tour */
.tour-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--border-secondary); margin-bottom: clamp(28px, 3.5vw, 40px); }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs [role="tab"] { flex: none; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--text-quaternary); padding: 10px 4px 12px; margin-right: 16px; box-shadow: inset 0 -2px 0 transparent; transition: color 0.15s, box-shadow 0.15s; }
.tour-tabs [role="tab"]:hover { color: var(--text-secondary); }
.tour-tabs [role="tab"][aria-selected="true"] { color: var(--text-brand-secondary); box-shadow: inset 0 -2px 0 var(--fg-brand-primary); }
.panel-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 80px); align-items: start; margin-bottom: 28px; }
.panel-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.15; }
.panel-head p { margin-top: 12px; font-size: 15px; color: var(--text-tertiary); line-height: 1.6; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 14.5px; color: var(--text-tertiary); line-height: 1.5; }
.checks .fi { width: 24px; height: 24px; }
.checks .fi .ic { width: 14px; height: 14px; }
.stage { background: var(--bg-secondary); border-radius: 20px; padding: clamp(12px, 2vw, 26px); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.stage + .stage { margin-top: 20px; }
.try { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.next-link { margin-top: 22px; display: flex; justify-content: flex-end; }
.js .panel.enter { animation: fade 0.5s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* process */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
.steps li { padding-top: 18px; box-shadow: inset 0 2px 0 var(--border-secondary); }
.steps li:first-child { box-shadow: inset 0 2px 0 var(--fg-brand-primary); }
.steps .num { display: block; font-size: 14px; font-weight: 600; color: var(--text-brand-secondary); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 17px; letter-spacing: -0.02em; }
.steps .when { display: block; font-size: 13px; color: var(--text-quaternary); margin-top: 2px; }
.steps p { margin-top: 10px; font-size: 14px; color: var(--text-tertiary); line-height: 1.55; }
.deliver { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }

/* footer */
.foot { background: var(--bg-secondary); padding-block: clamp(56px, 7vw, 88px) 36px; box-shadow: inset 0 1px 0 var(--border-secondary); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.foot h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.035em; }
.foot p { color: var(--text-tertiary); font-size: 15px; margin-top: 10px; max-width: 52ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links a { font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-decoration: none; }
.foot-links a:hover { color: var(--text-primary); }
.foot .note { margin-top: 40px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--border-secondary); font-size: 13px; color: var(--text-quaternary); max-width: none; line-height: 1.6; }

/* motion: reveals only when JS is running */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .till { animation: lights-down linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  .till-head, .till .device-bar { animation: text-up linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  @keyframes lights-down { from { background-color: #0B0B0B; } to { background-color: #000000; } }
  @keyframes text-up { from { opacity: 0.25; } to { opacity: 1; } }
}

/* responsive */
@media (max-width: 1100px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-card { left: 12px; bottom: 12px; }
  .nav-links, .nav-actions .btn-primary { display: none; }
  .menu-btn { display: inline-flex; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head { grid-template-columns: minmax(0, 1fr); }
  .shifts li { grid-template-columns: 40px minmax(0, 1fr); }
  .shifts .to { display: none; }
  .shifts .after { grid-column: 2; }
}
@media (max-width: 760px) {
  .container { padding-inline: 16px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .scroll-x { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: thin; }
  .scroll-x .device { width: 720px; }
  .swipe-hint { display: inline-flex; align-items: center; gap: 6px; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles .role:last-child { grid-column: 1 / -1; }
  .roles .role:last-child img { aspect-ratio: 16 / 10; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .break img { aspect-ratio: 4 / 5; }
  .stage { padding: 12px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Product: till (1366 × 768)
   ===================================================================== */
.ui { color: var(--text-primary); font-family: var(--font); font-variant-numeric: tabular-nums; font-feature-settings: "cv05" 1, "cv08" 1; -webkit-font-smoothing: antialiased; line-height: 1.35; text-align: left; }
.ui button { font-family: inherit; }
.ui .scroll { overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border-primary) transparent; }
.ui h2, .ui h3, .ui h4, .ui p { margin: 0; }
.pos { position: absolute; inset: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr) 392px; background: var(--bg-secondary); font-size: 16px; overflow: hidden; }
.rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0; background: var(--bg-primary); box-shadow: inset -1px 0 0 var(--border-secondary); }
.logo-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bg-brand-solid); color: #fff; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; box-shadow: var(--skeuo), var(--shadow-xs); margin-bottom: 16px; position: relative; }
.logo-mark::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 11px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.logo-mark.sm { width: 32px; height: 32px; font-size: 15px; border-radius: 8px; margin: 0; }
.logo-mark.sm::before { border-radius: 7px; }
.rail-item { width: 72px; min-height: 64px; border-radius: 10px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--fg-quaternary-hover); font-size: 12px; font-weight: 600; line-height: 1.15; text-align: center; }
.rail-item span { color: var(--text-quaternary); }
.rail-item:hover { background: var(--bg-primary-hover); }
.rail-item[aria-current="true"] { background: var(--u-brand-50); color: var(--u-brand-600); box-shadow: inset 0 0 0 1px var(--u-brand-200); }
.rail-item[aria-current="true"] span { color: var(--u-brand-700); }
.rail .avatar { margin-top: 8px; }
.pos-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pos-top { height: 72px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--bg-primary); box-shadow: inset 0 -1px 0 var(--border-secondary); }
.top-film { min-width: 0; flex: 1; }
.top-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { color: var(--text-tertiary); font-size: 14px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-status { display: flex; align-items: center; gap: 8px; }
.clock { font-size: 17px; font-weight: 600; margin-left: 6px; color: var(--text-secondary); }
.party { display: flex; align-items: center; gap: 10px; flex: none; }
.party .label { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.pos-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

/* tickets */
.tk-filters { flex: none; padding: 16px 24px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.days { background: var(--bg-primary); padding: 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); }
.days .tab { flex: 1; height: 52px; flex-direction: column; gap: 0; font-size: 12px; font-weight: 500; }
.days .tab b { font-size: 18px; font-weight: 600; color: var(--text-secondary); line-height: 1.2; }
.days .tab.on b { color: var(--u-brand-700); }
.days .tab:hover:not(.on) { background: var(--bg-primary-hover); }
.tk-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-row .label { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.tk-row .toggle-row { margin-left: auto; }
.pos .btn-group button { height: 44px; padding: 0 14px; }
.films { flex: 1; margin: 0 24px 16px; padding: 0 16px; background: var(--bg-primary); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); }
.film { display: grid; grid-template-columns: 56px 146px minmax(0, 1fr); gap: 16px; padding: 12px 0; align-items: center; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.film:last-of-type { box-shadow: none; }
.film-info { min-width: 0; }
.film h3 { font-size: 16px; font-weight: 600; line-height: 1.25; }
.film-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text-tertiary); font-size: 13px; margin-top: 6px; }
.film-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-quaternary); }
.cert { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; color: #fff; background: #717680; }
.cert[data-c="U"] { background: #079455; } .cert[data-c="PG"] { background: #CA8504; } .cert[data-c="12A"] { background: #B93815; } .cert[data-c="15"] { background: #C11574; } .cert[data-c="18"] { background: #D92D20; }
.times { display: flex; flex-wrap: wrap; gap: 10px; }
.films-foot { display: flex; align-items: center; gap: 8px; color: var(--text-quaternary); font-size: 13px; font-weight: 500; padding: 12px 0 14px; box-shadow: inset 0 1px 0 var(--border-secondary); }
.st { width: 136px; min-height: 82px; border: 0; cursor: pointer; border-radius: 10px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); padding: 9px 12px 8px; display: grid; gap: 3px; align-content: start; text-align: left; }
.st:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--border-brand), var(--shadow-sm); }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.st-time { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.st .badge { padding: 1px 6px; font-size: 11px; line-height: 16px; }
.st-sub { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { display: block; height: 6px; border-radius: 3px; background: var(--bg-quaternary); overflow: hidden; margin-top: 4px; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--lvl); }
.st-left { font-size: 12px; font-weight: 600; color: var(--lvl-t); }
.lvl-ok { --lvl: var(--fg-success-secondary); --lvl-t: var(--text-success); }
.lvl-warn { --lvl: var(--fg-warning-secondary); --lvl-t: var(--text-warning); }
.lvl-bad { --lvl: var(--fg-error-secondary); --lvl-t: var(--text-error); }
.lvl-full { --lvl: var(--fg-quaternary); --lvl-t: var(--text-quaternary); }
.st-trailers { box-shadow: inset 0 0 0 1px var(--u-warning-200), var(--shadow-xs); }
.st-trailers .st-sub { color: var(--text-warning); }
.st.st-past, .st.lvl-full { opacity: 0.5; cursor: not-allowed; }

/* posters and product photos */
.poster { display: block; flex: none; width: 56px; height: 84px; border-radius: 6px; background-color: #0C0E12; background-image: url("../assets/img/posters.jpg"); background-size: 500% 100%; background-position: calc(var(--pi) * 25%) 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-sm); }
.poster.xs { width: 32px; height: 48px; border-radius: 4px; }
.thumb { display: block; flex: none; width: 72px; height: 72px; border-radius: 10px; background-color: var(--img-bg); background-image: url("../assets/img/menu.jpg"); background-size: 600% 400%; box-shadow: inset 0 0 0 1px rgba(10, 13, 18, 0.06); }
.thumb.xs { width: 40px; height: 40px; border-radius: 8px; }
.thumb.sm { width: 48px; height: 48px; border-radius: 8px; }
.thumb.lg { width: 64px; height: 64px; border-radius: 12px; }

/* seats */
.map { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 16px 24px 0; }
.screen-arc { width: 560px; height: 30px; flex: none; position: relative; margin-bottom: 10px; border-top: 3px solid var(--fg-brand-primary); border-radius: 50% 50% 0 0 / 100% 100% 0 0; text-align: center; box-shadow: 0 -12px 28px -16px var(--fg-brand-primary); }
.screen-arc span { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-tertiary); }
.rows { display: grid; gap: 5px; }
.srow { display: flex; align-items: center; gap: 5px; }
.rl { width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
.seat { width: 28px; height: 28px; flex: none; padding: 0; border: 0; cursor: pointer; border-radius: 8px 8px 5px 5px; background: var(--bg-primary); box-shadow: inset 0 0 0 1.5px var(--border-primary), var(--shadow-xs); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
.seat.gap { margin-left: 18px; }
.seat:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--border-brand); }
.seat[data-t="prem"] { box-shadow: inset 0 0 0 1.5px var(--u-purple-500), inset 0 4px 0 var(--u-purple-500), var(--shadow-xs); }
.seat[data-t="sofa"] { box-shadow: inset 0 0 0 1.5px var(--u-purple-500), var(--shadow-xs); }
.seat[data-t="sofa"].l { border-radius: 10px 0 0 6px; margin-right: -5px; width: 30px; }
.seat[data-t="sofa"].r { border-radius: 0 10px 6px 0; width: 30px; }
.seat[data-t="wc"], .seat[data-t="carer"] { box-shadow: inset 0 0 0 1.5px var(--u-blue-500), var(--shadow-xs); color: var(--u-blue-600); }
.seat.is-taken { background: var(--bg-quaternary); box-shadow: none; color: transparent; cursor: not-allowed; }
.seat.is-taken[data-t="wc"], .seat.is-taken[data-t="carer"] { color: var(--fg-quaternary); }
.seat.is-sel { background: var(--bg-brand-solid); box-shadow: var(--skeuo); color: #fff; }
.seat.is-mine { background: var(--u-brand-50); box-shadow: inset 0 0 0 1.5px var(--u-brand-500); outline: 1.5px dashed var(--u-brand-500); outline-offset: -1.5px; cursor: default; }
.seat.is-blocked { background: none; box-shadow: none; outline: 1.5px dashed var(--border-primary); outline-offset: -1.5px; color: var(--fg-quaternary); cursor: not-allowed; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12px; color: var(--text-tertiary); padding: 12px 0 10px; font-weight: 500; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .seat { width: 18px; height: 18px; border-radius: 5px 5px 4px 4px; font-size: 9px; cursor: default; }
.legend .seat[data-t="sofa"] { width: 26px; }
.assign { flex: none; background: var(--bg-primary); box-shadow: inset 0 1px 0 var(--border-secondary); padding: 16px 24px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
.assign-sum { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.as-top { display: flex; align-items: center; justify-content: space-between; }
.as-top .as-title { font-size: 20px; font-weight: 600; white-space: nowrap; }
.as-top { gap: 8px; }
.seat-tags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.assign-sum .btn { width: 100%; }
.tt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt { position: relative; min-height: 62px; padding-block: 8px !important; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); display: flex; align-items: center; padding: 0 8px 0 14px; gap: 8px; }
.tt-hit { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.tt-l { flex: 1; min-width: 0; pointer-events: none; }
.tt-l b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.tt-l b .ic { color: var(--fg-quaternary-hover); }
.tt-l small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--text-tertiary); }
.tt-n { min-width: 30px; height: 30px; border-radius: 15px; background: var(--bg-brand-solid); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; pointer-events: none; }
.tt-minus { position: relative; z-index: 1; width: 44px; height: 44px; border: 0; cursor: pointer; border-radius: 8px; display: grid; place-items: center; background: var(--bg-primary); color: var(--fg-secondary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); }
.tt.on { background: var(--u-brand-50); box-shadow: inset 0 0 0 2px var(--border-brand); }
.tt.pending { box-shadow: inset 0 0 0 1.5px var(--u-warning-500); }
.tt.pending small { color: var(--text-warning); }

/* food */
.cats { flex: none; padding: 16px 24px 0; }
.cats .tabs-border { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-primary); }
.cats .tab { height: 44px; font-size: 15px; }
.cats .tab.on { background: var(--bg-secondary-hover); box-shadow: inset 0 0 0 1px var(--border-secondary); color: var(--text-primary); }
.grid { flex: 1; padding: 16px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
.tile { position: relative; border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); padding: 12px; display: flex; flex-direction: column; gap: 3px; text-align: left; color: inherit; }
.tile:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--border-brand), var(--shadow-md); }
.tile .thumb { margin-bottom: 8px; }
.tile-name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.tile-desc { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.3; }
.tile-why { color: var(--text-error); font-weight: 500; }
.tile-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding-top: 8px; flex-wrap: wrap; }
.tile-foot b { font-size: 16px; font-weight: 600; margin-right: auto; }
.tile-foot small { font-size: 12px; font-weight: 500; color: var(--text-quaternary); }
.tile-count { position: absolute; top: 10px; right: 10px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--bg-brand-solid); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; box-shadow: var(--skeuo); }
.tile.off { cursor: not-allowed; background: var(--bg-secondary); }
.tile.off .thumb { filter: grayscale(1); opacity: 0.55; }
.tile.off .tile-name, .tile.off .tile-foot { opacity: 0.55; }
.avail { margin: 0 24px 16px; flex: none; }

/* sheets and modals */
.scrim { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--bg-overlay) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet { position: absolute; left: 16px; right: 16px; bottom: 0; max-height: calc(100% - 32px); z-index: 6; background: var(--bg-primary); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-xl), inset 0 0 0 1px var(--border-secondary); display: flex; flex-direction: column; }
.sheet.tall { top: 32px; }
.sheet.enter { animation: sheet-in 0.26s var(--ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sh-head { display: flex; align-items: center; gap: 14px; padding: 20px 20px 12px 24px; flex: none; }
.sh-head h3 { font-size: 20px; font-weight: 600; }
.sh-head p { margin-top: 2px; color: var(--text-tertiary); font-size: 14px; }
.sh-body { overflow: auto; padding: 6px 24px 16px; display: grid; gap: 18px; min-height: 0; }
.grp { border: 0; margin: 0; padding: 0; min-width: 0; }
.grp legend { font-weight: 600; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; padding: 0; }
.opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; min-height: 60px; border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); padding: 10px 36px 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; color: inherit; }
.opt span { font-weight: 600; font-size: 15px; color: var(--text-secondary); }
.opt small { font-size: 13px; color: var(--text-tertiary); }
.opt.on { background: var(--u-brand-50); box-shadow: inset 0 0 0 2px var(--border-brand); }
.opt.on span { color: var(--u-brand-700); }
.opt.on small { color: var(--u-brand-600); }
.opt:disabled { opacity: 0.45; cursor: not-allowed; }
.opt-ind { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-primary); display: grid; place-items: center; color: #fff; }
.opt.multi .opt-ind { border-radius: 5px; }
.opt.on .opt-ind, .dest.on .opt-ind { background: var(--bg-brand-solid); box-shadow: none; }
.sh-foot { display: flex; gap: 12px; align-items: center; padding: 16px 24px 20px; box-shadow: inset 0 1px 0 var(--border-secondary); flex: none; }
.cust-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 8px 24px 16px; overflow: hidden; }
.cres-list { display: flex; flex-direction: column; gap: 4px; }
.cres { display: flex; align-items: center; gap: 12px; padding: 10px; min-height: 62px; border: 0; cursor: pointer; border-radius: 12px; background: none; text-align: left; color: var(--fg-brand-primary); }
.cres:hover { background: var(--bg-primary-hover); }
.cres-t { flex: 1; min-width: 0; }
.cres b { display: block; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cres small { font-size: 13px; color: var(--text-tertiary); }
.cres.on { background: var(--u-brand-50); box-shadow: inset 0 0 0 1px var(--u-brand-200); }
.cres.add { margin-top: 6px; box-shadow: inset 0 0 0 1px var(--border-secondary); }
.prof { min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.prof-head { display: flex; align-items: center; gap: 14px; }
.prof-head h3 { font-size: 20px; font-weight: 600; }
.prof-head p { color: var(--text-tertiary); font-size: 14px; margin-top: 2px; }
.prof-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prof-stats div { border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--border-secondary); }
.prof-stats small { display: block; font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.prof-stats b { display: block; font-size: 22px; font-weight: 600; margin: 2px 0; letter-spacing: -0.01em; }
.prof-stats span { font-size: 12px; color: var(--text-quaternary); }
.bens { display: grid; gap: 6px; margin-top: -8px; }
.ben { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 10px; min-height: 56px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary); }
.ben > span:not(.fi) { flex: 1; min-width: 0; }
.ben b { display: block; font-size: 14px; font-weight: 600; }
.ben small { font-size: 12.5px; color: var(--text-tertiary); }
.ben.done { box-shadow: inset 0 0 0 1px var(--u-success-200); background: var(--u-success-50); }
.prof-two { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fine { font-size: 12.5px; color: var(--text-quaternary); margin-top: 8px !important; }
.hist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.hist li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; align-items: baseline; }
.hist span { color: var(--text-quaternary); font-weight: 500; }
.hist b { font-weight: 500; color: var(--text-secondary); }
.hist em { font-style: normal; font-weight: 600; }
.dests { display: grid; gap: 8px; }
.dest { position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 44px 10px 12px; border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); text-align: left; color: inherit; }
.dest b { display: block; font-size: 15px; font-weight: 600; }
.dest small { font-size: 13px; color: var(--text-tertiary); }
.dest .opt-ind { top: 50%; transform: translateY(-50%); right: 14px; }
.dest.on { background: var(--u-brand-50); box-shadow: inset 0 0 0 2px var(--border-brand); }

/* basket */
.basket { display: flex; flex-direction: column; min-height: 0; background: var(--bg-primary); box-shadow: inset 1px 0 0 var(--border-secondary); }
.bk-head { flex: none; padding: 16px 20px; box-shadow: inset 0 -1px 0 var(--border-secondary); display: grid; gap: 14px; }
.bk-row { display: flex; align-items: center; gap: 10px; }
.bk-order { font-size: 18px; font-weight: 600; line-height: 1.25; }
.bk-order small { display: block; font-size: 13px; color: var(--text-tertiary); font-weight: 400; }
.cust-btn { display: flex; align-items: center; gap: 12px; height: 64px; width: 100%; padding: 0 16px 0 12px; border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-xs); color: var(--fg-quaternary-hover); text-align: left; }
.cust-btn:hover { background: var(--bg-primary-hover); }
.cust-btn > span:not(.fi) { flex: 1; min-width: 0; }
.cust-btn b { display: block; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.cust-btn small { display: block; font-size: 13px; color: var(--text-tertiary); }
.cust-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 6px 8px 10px; border-radius: 12px; background: var(--bg-secondary); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.cc-main { flex: 1; min-width: 0; }
.cc-main b { display: block; font-size: 15px; font-weight: 600; }
.cc-badges { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.bk-lines { flex: 1; padding: 4px 12px 10px; }
.bk-sec { font-size: 12px; font-weight: 600; color: var(--text-quaternary); padding: 12px 8px 4px; }
.bl { display: flex; gap: 12px; padding: 10px 8px; align-items: flex-start; }
.bl + .bl { box-shadow: inset 0 1px 0 var(--border-secondary); }
.bl-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bl-top { display: flex; gap: 10px; align-items: baseline; }
.bl-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.bl-amt { font-weight: 600; font-size: 15px; }
.bl-mods { font-size: 13px; color: var(--text-tertiary); line-height: 1.35; }
.bl-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.empty-state { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.empty-state b { font-size: 16px; font-weight: 600; margin-top: 8px; }
.empty-state span { font-size: 14px; color: var(--text-tertiary); max-width: 28ch; }
.bk-foot { flex: none; box-shadow: inset 0 1px 0 var(--border-secondary); padding: 16px 20px 20px; display: grid; gap: 10px; }
.sumrow { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-tertiary); }
.sumrow.disc { color: var(--text-success); }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total span { font-size: 16px; font-weight: 600; }
.total small { font-size: 12px; color: var(--text-quaternary); font-weight: 400; }
.total b { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.bk-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.bk-actions.three { grid-template-columns: repeat(3, 1fr); }
.bk-actions .btn, .bk-foot > .btn { width: 100%; }

/* tables */
.floor-top { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 24px 0; }
.legend2 { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 1; }
.floor { position: relative; flex: 1; min-height: 0; margin: 14px 24px 0; border-radius: 16px; background-color: var(--bg-primary); background-image: radial-gradient(circle, var(--border-secondary) 1.2px, transparent 1.6px); background-size: 24px 24px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); overflow: hidden; }
.tone-gray { --t-50: var(--u-gray-50); --t-200: var(--u-gray-200); --t-500: var(--u-gray-500); --t-700: var(--u-gray-700); }
.tone-blue { --t-50: var(--u-blue-50); --t-200: var(--u-blue-200); --t-500: var(--u-blue-500); --t-700: var(--u-blue-700); }
.tone-purple { --t-50: var(--u-purple-50); --t-200: var(--u-purple-200); --t-500: var(--u-purple-500); --t-700: var(--u-purple-700); }
.tone-success { --t-50: var(--u-success-50); --t-200: var(--u-success-200); --t-500: var(--u-success-500); --t-700: var(--u-success-700); }
.tone-warning { --t-50: var(--u-warning-50); --t-200: var(--u-warning-200); --t-500: var(--u-warning-500); --t-700: var(--u-warning-700); }
.tone-error { --t-50: var(--u-error-50); --t-200: var(--u-error-200); --t-500: var(--u-error-500); --t-700: var(--u-error-700); }
.tbl { position: absolute; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 14px; background: var(--t-50); box-shadow: inset 0 0 0 2px var(--t-500), var(--shadow-xs); color: var(--text-primary); }
.tbl.round { border-radius: 50%; }
.tbl.st-free { background: var(--bg-primary); box-shadow: inset 0 0 0 1.5px var(--border-primary), var(--shadow-xs); }
.tbl.st-reserved { background: var(--bg-primary); box-shadow: none; outline: 2px dashed var(--border-primary); outline-offset: -2px; }
.tbl b { font-size: 20px; font-weight: 600; line-height: 1; }
.tbl small { font-size: 12px; font-weight: 600; color: var(--t-700); display: inline-flex; gap: 4px; align-items: center; }
.tbl.st-free small, .tbl.st-reserved small { color: var(--text-tertiary); }
.tbl.sel { box-shadow: inset 0 0 0 2px var(--t-500), 0 0 0 4px var(--bg-primary), 0 0 0 6px var(--fg-brand-primary), var(--shadow-md); }
.tbl-join { position: absolute; width: 16px; height: 8px; background: var(--u-blue-500); border-radius: 4px; }
.tbl-party { position: absolute; display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.bar-counter { position: absolute; right: 22px; top: 24px; width: 36px; height: 336px; border-radius: 10px; background: var(--bg-tertiary); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.stool { position: absolute; right: 72px; width: 38px; height: 38px; border-radius: 50%; background: var(--t-50); box-shadow: inset 0 0 0 2px var(--t-500); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--t-700); }
.stool.st-free { background: var(--bg-primary); box-shadow: inset 0 0 0 1.5px var(--border-primary); color: var(--text-quaternary); }
.floor-label { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quaternary); }
.floor-label.vert { right: 26px; top: 368px; }
.resv { flex: none; display: flex; gap: 10px; padding: 14px 24px 16px; align-items: stretch; }
.resv-h { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 84px; flex: none; font-size: 13px; font-weight: 600; color: var(--text-tertiary); line-height: 1.25; }
.resv-h .ic { color: var(--fg-quaternary-hover); }
.resv-card { flex: 1; min-width: 0; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; font-size: 13px; }
.resv-card b { font-size: 16px; font-weight: 600; }
.resv-card span { font-weight: 600; align-self: center; color: var(--text-secondary); }
.resv-card small, .resv-card em { grid-column: 1 / -1; color: var(--text-tertiary); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resv-card small { color: var(--text-quaternary); }
.tpanel .tp-head { flex: none; padding: 16px 20px 14px; box-shadow: inset 0 -1px 0 var(--border-secondary); display: grid; gap: 6px; }
.tp-title { font-size: 22px; font-weight: 600; flex: 1; }
.tpanel .alert { margin-top: 8px; }
.guest { padding: 10px 8px; }
.guest + .guest { box-shadow: inset 0 1px 0 var(--border-secondary); }
.g-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.g-head b { font-size: 12px; font-weight: 600; color: var(--text-quaternary); }
.gi { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.gi-n { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.gi-n small { display: block; font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
.gi-p { font-size: 14px; width: 56px; text-align: right; font-weight: 600; }

/* orders */
.orders { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 24px 20px; }
.ocol { display: flex; flex-direction: column; min-height: 0; background: var(--bg-primary); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); }
.ocol h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 14px; }
.ocol h3 .badge { margin-left: auto; }
.ocards { flex: 1; display: grid; gap: 10px; padding: 0 10px 12px; align-content: start; }
.ocard { border-radius: 12px; background: var(--bg-secondary); box-shadow: inset 0 0 0 1px var(--border-secondary); padding: 12px; display: grid; gap: 6px; }
.ocard header { display: flex; align-items: center; gap: 8px; }
.ocard header b { font-size: 17px; font-weight: 600; }
.otime { font-size: 13px; font-weight: 600; color: var(--text-quaternary); }
.osrc { font-size: 13px; color: var(--text-tertiary); font-weight: 500; }
.ocard ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-secondary); }
.onote { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-warning); font-weight: 500; }
.ocard .btn { margin-top: 4px; width: 100%; }

/* payment */
.modal-scrim { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-overlay) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { background: var(--bg-primary); border-radius: 16px; box-shadow: var(--shadow-xl), inset 0 0 0 1px var(--border-secondary); }
.modal.enter { animation: pop 0.22s var(--ease); }
@keyframes pop { from { transform: scale(0.97); opacity: 0; } }
.pay { width: 920px; height: 624px; display: grid; grid-template-columns: 380px minmax(0, 1fr); overflow: hidden; }
.pay-left { background: var(--bg-secondary); padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: inset -1px 0 0 var(--border-secondary); min-height: 0; overflow: auto; }
.pay-for { font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.pay-due small { display: block; font-size: 14px; font-weight: 500; color: var(--text-tertiary); }
.pay-due b { display: block; font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.pay-due span { font-size: 14px; color: var(--text-tertiary); }
.pay-left .tabs-border .tab { height: 40px; }
.ways { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.parts { display: grid; gap: 8px; }
.part { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary); font-weight: 500; font-size: 15px; }
.part b { margin-left: auto; font-weight: 600; }
.pn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-tertiary); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.part.paid { color: var(--text-tertiary); }
.part.paid .pn { background: var(--u-success-100); color: var(--u-success-600); }
.part.now { box-shadow: inset 0 0 0 2px var(--border-brand); background: var(--u-brand-50); }
.plines { display: grid; gap: 6px; }
.pline { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary); font-size: 14px; font-weight: 500; text-align: left; color: inherit; }
.pl-n { flex: 1; min-width: 0; }
.chk { width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--border-primary); display: grid; place-items: center; flex: none; color: #fff; }
.pline.on { box-shadow: inset 0 0 0 2px var(--border-brand); background: var(--u-brand-50); }
.pline.on .chk { background: var(--bg-brand-solid); box-shadow: none; }
.pline.paid { opacity: 0.6; cursor: not-allowed; }
.pline.paid .chk { background: var(--u-success-600); box-shadow: none; }
.pay-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-tertiary); line-height: 1.45; }
.pay-hint .ic { margin-top: 1px; color: var(--fg-quaternary-hover); }
.applied { box-shadow: inset 0 1px 0 var(--border-secondary); padding-top: 12px; margin-top: auto; }
.ap { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; padding: 4px 0; }
.ap small { display: block; font-size: 12px; font-weight: 500; color: var(--text-success); }
.pay-right { padding: 24px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pay-step { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }
.ps-head { display: flex; align-items: center; gap: 12px; }
.ps-head h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.tenders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tender { height: 132px; border: 0; cursor: pointer; border-radius: 14px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 0 20px; text-align: left; color: inherit; }
.tender .fi { margin-bottom: 8px; }
.tender b { font-size: 18px; font-weight: 600; }
.tender small { font-size: 13px; color: var(--text-tertiary); }
.tender:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--border-brand), var(--shadow-md); }
.tender:disabled { opacity: 0.45; cursor: not-allowed; }
.cash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cash { height: 96px; border: 0; cursor: pointer; border-radius: 14px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-secondary), var(--shadow-xs); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; color: inherit; }
.cash b { font-size: 22px; font-weight: 600; }
.cash span { font-size: 13px; color: var(--text-tertiary); font-weight: 500; }
.cash.exact { background: var(--u-brand-50); box-shadow: inset 0 0 0 2px var(--border-brand); }
.cash:hover { box-shadow: inset 0 0 0 2px var(--border-brand); }
.vcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 16px; background: var(--bg-secondary); box-shadow: inset 0 0 0 1px var(--border-secondary); }
.vcard div { display: grid; gap: 2px; }
.vcard small { font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.vcard b { font-size: 22px; font-weight: 600; }
.vcard span { font-size: 13px; color: var(--text-tertiary); }
.vcalc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vcalc div { padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-secondary); }
.vcalc span { display: block; font-size: 13px; color: var(--text-tertiary); font-weight: 500; }
.vcalc b { font-size: 22px; font-weight: 600; }
.pay-step > .btn-3xl { margin-top: auto; }
.pay-wait { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.pay-wait h3 { font-size: 24px; font-weight: 600; }
.pay-wait p { color: var(--text-tertiary); margin-bottom: 12px; }
.pulse { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--u-brand-50); color: var(--u-brand-600); box-shadow: inset 0 0 0 1px var(--u-brand-200); animation: wait 1.2s ease-in-out infinite; }
@keyframes wait { 50% { box-shadow: inset 0 0 0 1px var(--u-brand-200), 0 0 0 16px color-mix(in srgb, var(--u-brand-500) 14%, transparent); } }
.pay.done { width: 560px; height: auto; grid-template-columns: 1fr; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 40px 32px 28px; }
.pay.done h3 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin-top: 12px; }
.done-tenders { color: var(--text-tertiary); font-size: 15px; }
.done-list { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.done-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--text-secondary); }
.done-list .ic { color: var(--fg-quaternary-hover); }
.pay.done .alert { width: 100%; text-align: left; }
.done-actions { display: flex; gap: 10px; margin-top: 8px; width: 100%; }

/* toasts */
.toast { position: absolute; left: 532px; bottom: 24px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 12px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-primary), var(--shadow-lg); font-weight: 600; font-size: 15px; color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.toast.enter { animation: toast-in 0.3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.kds-toast, .bo-toast { left: 50%; }

/* guided demo highlight: a static brand ring, no looping animation */
.guide-target { position: relative; z-index: 2; outline: 3px solid var(--fg-brand-primary) !important; outline-offset: 3px; animation: nudge 0.9s var(--ease) 2; }
@keyframes nudge { 50% { outline-offset: 7px; } }

/* =====================================================================
   Kitchen display (1366 × 768, dark)
   ===================================================================== */
.kds { position: absolute; inset: 0; background: var(--bg-primary); display: flex; flex-direction: column; font-size: 16px; overflow: hidden; }
.kds-top { flex: none; height: 68px; display: flex; align-items: center; gap: 20px; padding: 0 20px; background: var(--bg-secondary); box-shadow: inset 0 -1px 0 var(--border-secondary); }
.kds-brand { display: flex; align-items: center; gap: 10px; }
.kds-brand b { display: block; font-size: 16px; font-weight: 600; }
.kds-brand small { font-size: 12px; color: var(--text-quaternary); }
.kds-top .tab { height: 40px; }
.kds-stats { margin-left: auto; display: flex; gap: 20px; }
.kds-stats span { display: grid; }
.kds-stats small { font-size: 12px; color: var(--text-quaternary); font-weight: 500; }
.kds-stats b { font-size: 18px; font-weight: 600; }
.kds-allday { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 20px; box-shadow: inset 0 -1px 0 var(--border-secondary); overflow: hidden; }
.kds-allday .mini-h { margin-right: 4px; }
.ad { height: 40px; padding: 0 12px 0 6px; border: 0; cursor: pointer; border-radius: 10px; background: var(--bg-secondary); box-shadow: inset 0 0 0 1px var(--border-primary); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; color: var(--text-secondary); }
.ad b { min-width: 28px; height: 28px; border-radius: 7px; background: var(--bg-quaternary); color: var(--text-primary); display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.ad:hover { box-shadow: inset 0 0 0 1px var(--border-brand); }
.kds-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 14px; padding: 14px 20px 20px; align-content: start; overflow: hidden; }
.kt { background: var(--bg-secondary); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--border-secondary); display: flex; flex-direction: column; overflow: hidden; }
.kt-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--t-50); box-shadow: inset 0 -3px 0 var(--t-500); }
.kt-no { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.kt-time { margin-left: auto; font-size: 22px; font-weight: 600; color: var(--t-700); }
.kt-src { padding: 8px 12px 0; font-size: 14px; font-weight: 600; }
.kt-src span { display: block; font-weight: 400; color: var(--text-tertiary); font-size: 13px; }
.kt-deliver { margin: 8px 12px 0; display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--u-brand-50); box-shadow: inset 0 0 0 1px var(--u-brand-200); color: var(--u-brand-700); font-size: 13px; font-weight: 500; }
.kt-items { list-style: none; margin: 0; padding: 4px 6px; display: grid; gap: 2px; }
.kt-items li button { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 5px 6px; border: 0; cursor: pointer; border-radius: 8px; background: none; text-align: left; color: inherit; }
.kt-items li button:hover { background: var(--bg-tertiary); }
.kt-items .q { min-width: 26px; height: 26px; border-radius: 6px; background: var(--bg-tertiary); display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.kt-items .n { flex: 1; font-weight: 600; font-size: 16px; line-height: 1.3; }
.kt-items .n small { display: block; font-weight: 500; font-size: 13px; color: var(--text-warning); }
.kt-items .stn { font-size: 11px; font-weight: 600; color: var(--text-quaternary); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 5px; }
.kt-items li.done .n, .kt-items li.done .q { text-decoration: line-through; opacity: 0.4; }
.kt-allergy { margin: 2px 6px 4px; display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; background: var(--bg-error-solid); color: #fff; font-size: 14px; font-weight: 600; }
.kt-note { margin: 0 12px 8px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-tertiary); }
.kt-bump { margin: auto 8px 8px; }

/* =====================================================================
   Back office (browser, 1440 × 900, light)
   ===================================================================== */
.bo { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-secondary); font-size: 14px; overflow: hidden; }
.browser { flex: none; height: 40px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: #F5F5F5; box-shadow: inset 0 -1px 0 #E9EAEB; }
.browser .dots { display: flex; gap: 7px; }
.browser .dots i { width: 12px; height: 12px; border-radius: 50%; background: #D5D7DA; }
.browser .url { flex: 1; max-width: 520px; margin-inline: auto; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E9EAEB; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #535862; }
.bo-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.bo-side { background: var(--bg-primary); box-shadow: inset -1px 0 0 var(--border-secondary); display: flex; flex-direction: column; padding: 20px 16px; gap: 16px; }
.bo-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.bo-brand b { font-size: 16px; font-weight: 600; }
.bo-side nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; cursor: pointer; border-radius: 6px; background: none; font-weight: 600; font-size: 15px; color: var(--text-secondary); text-align: left; }
.nav-item .ic { color: var(--fg-quaternary-hover); }
.nav-item.on { background: var(--bg-secondary-hover); color: var(--text-primary); }
.nav-item:not(.on):hover { background: var(--bg-primary-hover); }
.bo-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--border-secondary); }
.bo-user b { display: block; font-size: 14px; font-weight: 600; }
.bo-user small { font-size: 13px; color: var(--text-tertiary); }
.bo-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 28px; }
.bo-head { flex: none; display: flex; align-items: center; gap: 12px; height: 84px; }
.bo-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.bo-head p { color: var(--text-tertiary); font-size: 14px; }
.bo-tools { flex: none; display: flex; align-items: center; gap: 16px; padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.bo-views { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bo-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 20px; padding: 16px 0 20px; }
.bo-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; }
.kpi small { display: block; font-size: 13px; font-weight: 500; color: var(--text-tertiary); }
.kpi > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.kpi b { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.kpi.bad b { color: var(--text-error); }
.bo-tl { padding: 8px 0; }
.bo-hours { position: relative; height: 24px; margin-left: 104px; width: 696px; }
.bo-hours span { position: absolute; top: 4px; font-size: 11px; font-weight: 500; color: var(--text-quaternary); transform: translateX(-2px); }
.bo-hours span::before { content: ""; position: absolute; left: 1px; top: 18px; width: 1px; height: 436px; background: var(--border-secondary); }
.bo-row { display: flex; align-items: center; height: 72px; position: relative; }
.bo-row + .bo-row { box-shadow: inset 0 1px 0 var(--border-secondary); }
.bo-rl { width: 104px; flex: none; padding-left: 16px; }
.bo-rl b { display: block; font-size: 13px; font-weight: 600; }
.bo-rl small { font-size: 11.5px; color: var(--text-quaternary); }
.bo-track { position: relative; width: 696px; height: 56px; flex: none; }
.blk { position: absolute; top: 0; height: 56px; border: 0; cursor: pointer; border-radius: 8px; overflow: hidden; background: hsl(var(--h) 52% 46%); color: #fff; padding: 6px 6px 6px 0; display: flex; flex-direction: column; justify-content: center; text-align: left; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.blk:hover { filter: brightness(1.06); }
.blk-ads { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0 4px, transparent 4px 8px); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35); }
.blk-t, .blk-s { position: relative; padding-left: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-t { font-size: 12px; font-weight: 600; }
.blk-s { font-size: 10.5px; opacity: 0.88; font-weight: 500; }
.blk-occ { position: absolute; left: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.85); }
.blk.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--fg-brand-primary); }
.blk.bad { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--fg-error-secondary); }
.blk-chk, .blk-warn { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-brand-solid); display: grid; place-items: center; }
.blk-warn { background: var(--bg-error-solid); }
.blk-chk + .blk-warn { right: 24px; }
.blk-clean { position: absolute; top: 10px; height: 36px; background: repeating-linear-gradient(90deg, var(--border-primary) 0 2px, transparent 2px 5px); }
.bo-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; }
.bo-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bo-legend i { width: 22px; height: 12px; border-radius: 3px; }
.lg-ads { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0 3px, transparent 3px 6px), hsl(220 30% 42%); }
.lg-feat { background: hsl(220 30% 42%); }
.lg-clean { background: repeating-linear-gradient(90deg, var(--border-primary) 0 2px, transparent 2px 5px); }
.lg-occ { height: 4px !important; background: var(--fg-quaternary); }
.bo-insp { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.bo-card { padding: 12px 14px; display: grid; gap: 8px; }
.bo-card p { font-size: 13px; color: var(--text-tertiary); line-height: 1.45; }
.bo-card p b { color: var(--text-primary); }
.bo-card.row { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-weight: 500; font-size: 13px; }
.bo-card.warn { box-shadow: inset 0 0 0 1px var(--u-error-200), var(--shadow-xs); }
.bo-card.sug { box-shadow: inset 0 0 0 1px var(--u-brand-200), var(--shadow-xs); }
.bo-ch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bo-ch b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.bo-ch .fi { width: 28px; height: 28px; }
.bo-sel { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.bo-sel li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.bo-sel li i { width: 10px; height: 10px; border-radius: 3px; background: hsl(var(--h) 52% 46%); }
.bo-sel li span { margin-left: auto; font-weight: 500; color: var(--text-quaternary); font-size: 12px; }
.bo-field { display: grid; gap: 5px; }
.bo-field small { font-size: 12px; font-weight: 600; color: var(--text-quaternary); }
.bo-field .tabs-border .tab { height: 32px; font-size: 13px; }
.bo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bo-two .btn, .bo-three .btn { width: 100%; padding: 0 6px; }
.spark { display: flex; align-items: flex-end; gap: 8px; height: 50px; padding-top: 16px; box-shadow: inset 0 -1px 0 var(--border-secondary); }
.spark span { flex: 1; background: var(--bg-brand-solid); border-radius: 4px 4px 0 0; position: relative; }
.spark em { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }

/* =====================================================================
   Legacy illustration (1024 × 640): deliberately dated, single-look
   ===================================================================== */
.legacy { background: #008080; font-family: Tahoma, Verdana, "MS Sans Serif", Geneva, sans-serif; font-size: 13px; color: #000; font-variant-numeric: tabular-nums; }
.w-win { position: absolute; inset: 22px; background: #C0C0C0; border: 2px solid; border-color: #FFF #404040 #404040 #FFF; box-shadow: 1px 1px 0 #000; display: flex; flex-direction: column; }
.w-title { height: 26px; flex: none; background: linear-gradient(90deg, #000080, #1084D0); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 8px; font-size: 13px; }
.w-btns { display: flex; gap: 2px; }
.w-btns i { width: 20px; height: 18px; background: #C0C0C0; border: 2px solid; border-color: #FFF #404040 #404040 #FFF; color: #000; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.w-menu { height: 24px; flex: none; display: flex; gap: 16px; align-items: center; padding: 0 10px; border-bottom: 1px solid #808080; }
.w-body { flex: 1; display: grid; grid-template-columns: 380px 1fr 290px; gap: 10px; padding: 10px; min-height: 0; }
.w-box { border: 2px groove #FFF; padding: 10px 8px 8px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.w-box legend { padding: 0 4px; font-size: 12.5px; }
.w-list { flex: 1; background: #fff; border: 2px solid; border-color: #404040 #FFF #FFF #404040; font-size: 12px; line-height: 1.55; padding: 2px 0; overflow: hidden; }
.w-list div { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 0 6px; white-space: nowrap; }
.w-list.tx div { grid-template-columns: 1fr auto; }
.w-list .hl { background: #000080; color: #fff; }
.w-btn { background: #C0C0C0; border: 2px solid; border-color: #FFF #404040 #404040 #FFF; font-size: 11.5px; height: 30px; display: grid; place-items: center; padding: 0 4px; text-align: center; }
.w-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.w-note { font-size: 11.5px; color: #800000; }
.w-fkeys { height: 30px; flex: none; display: flex; gap: 3px; padding: 0 10px 6px; }
.w-fkeys span { flex: 1; font-size: 11px; background: #C0C0C0; border: 2px solid; border-color: #FFF #404040 #404040 #FFF; display: grid; place-items: center; white-space: nowrap; }
.w-status { height: 24px; flex: none; display: flex; gap: 2px; padding: 0 4px 4px; }
.w-status span { border: 1px solid; border-color: #808080 #FFF #FFF #808080; padding: 0 8px; font-size: 11.5px; display: flex; align-items: center; }
.w-status span:first-child { flex: 1; }
.w-modal { position: absolute; left: 340px; top: 250px; width: 340px; background: #C0C0C0; border: 2px solid; border-color: #FFF #404040 #404040 #FFF; box-shadow: 2px 2px 0 #000; }
.w-modal .w-title { font-size: 12.5px; }
.w-modal-b { padding: 16px 16px 12px; display: grid; gap: 12px; font-size: 12.5px; }
.w-input { display: inline-block; width: 110px; height: 22px; background: #fff; border: 2px solid; border-color: #404040 #FFF #FFF #404040; vertical-align: middle; margin-left: 6px; padding-left: 4px; line-height: 18px; }
.w-mbtns { display: flex; justify-content: center; gap: 8px; }
.w-mbtns .w-btn { width: 84px; height: 26px; }
.pin { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #E50914; color: #fff; font: 600 20px/1 var(--font); display: grid; place-items: center; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(10, 13, 18, 0.35); z-index: 5; }