.ez-flip {
  display: inline-flex;
  position: relative;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ez-flip__char {
  display: inline-block;
  position: relative;
}

.ez-flip__char--leaving {
  animation: ez-flip-out 500ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
  position: absolute;
  inset: 0;
}

.ez-flip__char--entering {
  animation: ez-flip-in 500ms cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

@keyframes ez-flip-in {
  0%   { transform: translateY(60%); filter: blur(2px); opacity: 0; }
  100% { transform: translateY(0);   filter: blur(0);   opacity: 1; }
}

@keyframes ez-flip-out {
  0%   { transform: translateY(0);    filter: blur(0);   opacity: 1; }
  100% { transform: translateY(-60%); filter: blur(2px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ez-flip__char--entering,
  .ez-flip__char--leaving {
    animation: none;
  }
  .ez-flip__char--leaving { display: none; }
}
.ez-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--ez-bg-2) 0%, var(--ez-bg) 60%, var(--ez-bg-3) 100%);
  pointer-events: none;
  transition: background 0.4s ease;
}
[data-theme="light"] .ez-mesh__blob { mix-blend-mode: multiply; opacity: 0.35; }
[data-theme="light"] .ez-mesh__noise { opacity: 0.04; }

.ez-mesh__blob {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: ez-mesh-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

.ez-mesh__blob--a {
  top: -25vmax;
  left: -15vmax;
  background: radial-gradient(circle at 30% 30%, #F4A574, transparent 60%);
}

.ez-mesh__blob--b {
  bottom: -30vmax;
  right: -20vmax;
  background: radial-gradient(circle at 60% 60%, #D4693F, transparent 60%);
  animation-delay: -7s;
}

.ez-mesh__blob--c {
  top: 30vmax;
  left: 30vmax;
  background: radial-gradient(circle at 50% 50%, #B8502A, transparent 65%);
  animation-delay: -14s;
  opacity: 0.35;
}

.ez-mesh__noise {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 240px 240px;
}

@keyframes ez-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4vmax, -3vmax, 0) scale(1.08); }
}

@media (max-width: 640px) {
  .ez-mesh__blob--c { display: none; }
  .ez-mesh__blob { animation-duration: 32s; }
}

body.is-touch .ez-mesh__blob {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ez-mesh__blob { animation: none; }
}
.ez-cblob {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  background: radial-gradient(circle at center, rgba(244, 165, 116, 0.18), rgba(244, 165, 116, 0) 65%);
  mix-blend-mode: screen;
  filter: blur(56px);
  opacity: 0.7;
  transition: opacity 0.3s ease;
  will-change: transform;
}
[data-theme="light"] .ez-cblob {
  /* On cream, screen blend produces nothing visible. Switch to multiply
     and use a deeper peach so the glow registers — kept subtle. */
  background: radial-gradient(circle at center, rgba(212, 105, 63, 0.22), rgba(212, 105, 63, 0) 65%);
  mix-blend-mode: multiply;
  opacity: 0.72;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .ez-cblob { display: none; }
}

body.is-touch .ez-cblob,
body.kiosk-mode .ez-cblob {
  display: none;
}
.ez-glass-halo {
  position: relative;
}

.ez-glass-halo::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at 60% 40%, rgba(244, 165, 116, 0.55), transparent 65%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}
/* Fonts are loaded via <link> in index.html (Google Fonts: Inter, Space Grotesk, JetBrains Mono).
   This file exists as a hook for future self-hosted @font-face declarations
   (drop woff2 files into /public/fonts and add the rules here). */

/* === Reset === */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root { height: 100%; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--ez-peach-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* === Design Tokens (dark aurora — single theme) === */

:root {
  /* Backgrounds */
  --ez-bg:    #1a0d04;
  --ez-bg-2:  #2a1808;
  --ez-bg-3:  #0f0702;

  /* Peach ramp — brand */
  --ez-peach-50:  #FFF8F4;
  --ez-peach-100: #FEEDE3;
  --ez-peach-200: #FDDCC8;
  --ez-peach-300: #F9C4A3;
  --ez-peach-400: #F4A574;
  --ez-peach-500: #E8825C;
  --ez-peach-600: #D4693F;
  --ez-peach-700: #B8502A;
  --ez-peach-800: #8C3B1E;
  --ez-peach-900: #612812;

  /* Text + ink scale (dark-only, no inversion). 950 = lightest text, 50 = darkest. */
  --ez-cream:    #FFF8F4;
  --ez-ink:      #1a0d04;
  --ez-ink-950:  #FFF8F4;
  --ez-ink-900:  #F2EAE2;
  --ez-ink-800:  #E2D5C9;
  --ez-ink-700:  #C9B7A4;
  --ez-ink-600:  #A89481;
  --ez-ink-500:  #8B7766;
  --ez-ink-400:  #6E5C4D;
  --ez-ink-300:  #4F4036;
  --ez-ink-200:  #3A2D24;
  --ez-ink-100:  #2A1F18;
  --ez-ink-50:   #1F160F;

  /* Lines / dividers */
  --ez-line:        rgba(255, 248, 244, 0.12);
  --ez-line-strong: rgba(255, 248, 244, 0.22);

  /* Surfaces */
  --ez-surface:        var(--ez-bg-2);
  --ez-surface-raised: rgba(255, 255, 255, 0.04);
  --ez-tab-card-bg:    rgba(255, 248, 244, 0.07);
  --ez-surface-sunken: var(--ez-bg-3);
  --ez-surface-glass:  linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));

  /* Semantic — tuned for dark canvas */
  --ez-success: #6ABFA0;
  --ez-warning: #E8C468;
  --ez-error:   #E55454;
  --ez-info:    #7BADD4;
  --ez-danger:  #E55454;
  --ez-danger-bg: rgba(229, 84, 84, 0.18);
  /* Corner controls (drag handle / remove) overlaid on product photos — a scrim
     that stays legible over any image in either theme. */
  --ez-photo-control-bg: rgba(20, 12, 4, 0.58);
  --ez-photo-control-bg-hover: rgba(20, 12, 4, 0.80);
  --ez-photo-control-fg: #FFF8F4;
  --ez-primary: var(--ez-peach-500);
  --ez-primary-hover: var(--ez-peach-400);

  /* Gradients */
  --ez-grad-btn:  linear-gradient(135deg, var(--ez-peach-400), var(--ez-peach-500));
  --ez-grad-fire: linear-gradient(180deg, #FFE7B3 0%, #FFB347 32%, #F25C1E 70%, #9B1B0E 100%);
  --ez-grad-text: linear-gradient(180deg, #FFF8F4 0%, #F9C4A3 50%, #F4A574 100%);
  --ez-grad-danger: linear-gradient(135deg, #F08585, #D44A4A);
  /* Aliases for legacy consumers */
  --ez-gradient:        var(--ez-grad-btn);
  --ez-gradient-subtle: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));

  /* Shadows */
  --ez-fire-glow:    0 0 32px rgba(244, 165, 116, 0.55), 0 0 80px rgba(212, 105, 63, 0.35);
  --ez-glow-soft:    0 0 24px rgba(244, 165, 116, 0.22), 0 0 48px rgba(232, 130, 92, 0.12);
  --ez-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 30px 80px rgba(0, 0, 0, 0.30);
  --ez-shadow-btn:   0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 18px 50px rgba(232, 130, 92, 0.45);
  --ez-shadow-block: 18px 18px 0 0 var(--ez-peach-500);
  /* Aliases for legacy consumers — stepped intensities on dark */
  --ez-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --ez-shadow-md:    0 6px 18px rgba(0, 0, 0, 0.40);
  --ez-shadow-lg:    0 14px 40px rgba(0, 0, 0, 0.45);
  --ez-shadow-xl:    0 30px 80px rgba(0, 0, 0, 0.50);
  --ez-shadow-brand: 0 14px 40px rgba(232, 130, 92, 0.40);

  /* Border radius */
  --ez-r-sm:   12px;
  --ez-r-md:   18px;
  --ez-r-lg:   28px;
  --ez-r-xl:   28px;
  --ez-r-pill: 999px;
  /* Aliases for legacy radius names */
  --ez-radius-sm: var(--ez-r-sm);
  --ez-radius-md: var(--ez-r-md);
  --ez-radius-lg: var(--ez-r-lg);
  --ez-radius-xl: var(--ez-r-xl);
  /* Color aliases (legacy chart tokens) */
  --ez-peach: var(--ez-peach-400);
  --ez-green: #6ABFA0;
  --ez-red:   #E55454;

  /* Layout */
  --ez-container: 1280px;
  --ez-gutter:    28px;
  --ez-nav-h:     72px;

  /* Spacing scale */
  --ez-space-xs:  4px;
  --ez-space-sm:  8px;
  --ez-space-md:  16px;
  --ez-space-lg:  24px;
  --ez-space-xl:  32px;
  --ez-space-2xl: 48px;
  --ez-space-3xl: 64px;

  /* Motion */
  --ez-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ez-ease-in-out: cubic-bezier(.4, .0, .2, 1);

  /* Fonts */
  --ez-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ez-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ez-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ez-font:         var(--ez-font-body);

  /* Semantic text tokens — same as cream/ink in dark, dark ink in light */
  --ez-text:         var(--ez-cream);
  --ez-text-muted:   var(--ez-ink-700);
  --ez-text-dim:     var(--ez-ink-600);
  /* Button text on peach gradient */
  --ez-on-peach:     var(--ez-bg);

  /* Theme-aware tints (used for borders, pill backgrounds, "subtle on surface" tones) */
  --ez-glass-border:        rgba(255, 255, 255, 0.16);
  --ez-glass-border-strong: rgba(255, 255, 255, 0.22);
  --ez-pill-bg:             rgba(255, 255, 255, 0.06);
  --ez-pill-bg-strong:      rgba(255, 255, 255, 0.08);
  --ez-pill-border:         rgba(255, 255, 255, 0.14);
  --ez-pill-border-strong:  rgba(255, 255, 255, 0.18);
  --ez-tint-soft:           rgba(255, 255, 255, 0.04);
  --ez-tint-text-muted:     rgba(255, 255, 255, 0.78);
  --ez-tint-text-dim:       rgba(255, 255, 255, 0.55);
  --ez-tint-text-faint:     rgba(255, 255, 255, 0.32);

  /* Data grid: row tints, accent tints, skeleton, danger text */
  --ez-row-alt:              rgba(255, 255, 255, 0.015);
  --ez-row-hover:            rgba(244, 165, 116, 0.06);
  --ez-accent-soft:          rgba(244, 165, 116, 0.14);
  --ez-accent-soft-strong:   rgba(244, 165, 116, 0.18);
  --ez-accent-border:        rgba(244, 165, 116, 0.30);
  --ez-accent-border-strong: rgba(244, 165, 116, 0.45);
  --ez-accent-ring:          rgba(244, 165, 116, 0.18);
  --ez-skeleton:             rgba(255, 255, 255, 0.08);
  --ez-danger-text:          #F0A5A5;
  --ez-success-soft:         rgba(106, 191, 160, 0.16);
  --ez-success-border:       rgba(106, 191, 160, 0.30);
  --ez-qr-bg:                #ffffff;
  --ez-success-text:         #8FD9BC;
  --ez-warning-soft:         rgba(232, 196, 104, 0.16);
  --ez-warning-border:       rgba(232, 196, 104, 0.30);
  --ez-warning-text:         #F0D78F;
  --ez-lightbox-scrim:       rgba(15, 7, 2, 0.86);

  /* Nav-link palette */
  --ez-link-nav:            var(--ez-peach-200);
  --ez-link-nav-hover-bg:   rgba(255, 255, 255, 0.06);
  --ez-link-nav-active-bg:  rgba(244, 165, 116, 0.18);

  /* Btn-outline (theme-aware) */
  --ez-btn-outline-bg:      linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  --ez-btn-outline-border:  rgba(255, 255, 255, 0.22);

  /* Landing nav surface */
  --ez-nav-bg:          linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  --ez-nav-bg-scrolled: linear-gradient(135deg, rgba(26, 13, 4, 0.78), rgba(26, 13, 4, 0.62));
  --ez-nav-shadow:      0 18px 50px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.25) inset;

  /* Phone screen mockup (theme-locked: always dark device) */
  --ez-phone-screen-bg:        #1a0d04;
  --ez-phone-screen-fg:        #FFF8F4;
  --ez-phone-screen-fg-muted:  rgba(255, 248, 244, 0.78);
  --ez-phone-screen-fg-dim:    rgba(255, 248, 244, 0.55);
  --ez-phone-screen-pill-bg:   rgba(255, 255, 255, 0.06);
  --ez-phone-screen-line:      rgba(255, 255, 255, 0.12);

  /* FeatureLock overlay — semi-transparent veil on top of disabled gated content */
  --ez-feature-lock-overlay-bg:           rgba(26, 13, 4, 0.10);
  --ez-feature-lock-overlay-bg-hover:     rgba(26, 13, 4, 0.55);
  --ez-feature-lock-overlay-border:       rgba(244, 165, 116, 0.35);
  --ez-feature-lock-overlay-border-hover: rgba(244, 165, 116, 0.65);
}

/* === Light theme overrides ============================================== */

[data-theme="light"] {
  /* Surfaces — cream/peach base instead of deep brown */
  --ez-bg:     #FFF8F2;
  --ez-bg-2:   #FFEFE2;
  --ez-bg-3:   #FFFAF5;

  /* Text + ink — flip the scale so 950 = darkest text, 50 = lightest */
  --ez-cream:    #2A1808;
  --ez-ink:      #FFF8F4;
  --ez-ink-950:  #2A1808;
  --ez-ink-900:  #3A2418;
  --ez-ink-800:  #4F3326;
  --ez-ink-700:  #614036;
  --ez-ink-600:  #7A584C;
  --ez-ink-500:  #9A7A6A;
  --ez-ink-400:  #B89A8A;
  --ez-ink-300:  #D5BBA8;
  --ez-ink-200:  #E5D2C2;
  --ez-ink-100:  #F2E4D6;
  --ez-ink-50:   #FFF8F4;

  /* Lines — dark on cream */
  --ez-line:        rgba(42, 24, 8, 0.10);
  --ez-line-strong: rgba(42, 24, 8, 0.22);

  --ez-row-alt:              rgba(42, 24, 8, 0.03);
  --ez-row-hover:            rgba(232, 130, 92, 0.10);
  --ez-accent-soft:          rgba(232, 130, 92, 0.14);
  --ez-accent-soft-strong:   rgba(232, 130, 92, 0.20);
  --ez-accent-border:        rgba(212, 105, 63, 0.35);
  --ez-accent-border-strong: rgba(212, 105, 63, 0.55);
  --ez-accent-ring:          rgba(232, 130, 92, 0.22);
  --ez-skeleton:             rgba(42, 24, 8, 0.08);
  --ez-danger-text:          #B03030;
  --ez-success-soft:         rgba(45, 140, 100, 0.14);
  --ez-success-border:       rgba(45, 140, 100, 0.40);
  --ez-qr-bg:                #ffffff;
  --ez-success-text:         #1F6B4C;
  --ez-warning-soft:         rgba(180, 130, 20, 0.14);
  --ez-warning-border:       rgba(180, 130, 20, 0.40);
  --ez-warning-text:         #7A5200;
  --ez-lightbox-scrim:       rgba(42, 24, 8, 0.78);

  /* Surfaces */
  --ez-surface:        var(--ez-bg-2);
  --ez-surface-raised: rgba(255, 255, 255, 0.55);
  --ez-tab-card-bg:    rgba(42, 24, 8, 0.05);
  --ez-surface-sunken: var(--ez-bg-3);
  --ez-surface-glass:  linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.55));

  /* Aliases */
  --ez-gradient-subtle: linear-gradient(135deg, rgba(42, 24, 8, 0.04), rgba(42, 24, 8, 0.01));

  /* Gradients — keep peach brand, only flip the cream→peach text gradient */
  --ez-grad-text: linear-gradient(180deg, #2A1808 0%, #B8502A 50%, #E8825C 100%);

  /* Shadows — softer, warm ambient instead of black */
  --ez-fire-glow:    0 0 32px rgba(244, 165, 116, 0.55), 0 0 80px rgba(212, 105, 63, 0.32);
  --ez-glow-soft:    0 0 24px rgba(244, 165, 116, 0.32), 0 0 48px rgba(232, 130, 92, 0.18);
  --ez-shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 22px 60px rgba(140, 59, 30, 0.16);
  --ez-shadow-btn:   0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 14px 38px rgba(232, 130, 92, 0.42);
  --ez-shadow-sm:    0 1px 2px rgba(140, 59, 30, 0.14);
  --ez-shadow-md:    0 6px 18px rgba(140, 59, 30, 0.16);
  --ez-shadow-lg:    0 14px 40px rgba(140, 59, 30, 0.20);
  --ez-shadow-xl:    0 30px 80px rgba(140, 59, 30, 0.18);
  --ez-shadow-brand: 0 14px 40px rgba(232, 130, 92, 0.32);

  /* Semantic remapped */
  --ez-text:       var(--ez-cream);   /* cream now maps to dark — same alias */
  --ez-text-muted: var(--ez-ink-700);
  --ez-text-dim:   var(--ez-ink-500);
  --ez-on-peach:   #FFFFFF;            /* button text on peach gradient — white in light */

  /* Light-theme tints */
  --ez-glass-border:        rgba(42, 24, 8, 0.12);
  --ez-glass-border-strong: rgba(42, 24, 8, 0.22);
  --ez-pill-bg:             rgba(255, 255, 255, 0.55);
  --ez-pill-bg-strong:      rgba(255, 255, 255, 0.70);
  --ez-pill-border:         rgba(42, 24, 8, 0.12);
  --ez-pill-border-strong:  rgba(42, 24, 8, 0.18);
  --ez-tint-soft:           rgba(42, 24, 8, 0.04);
  --ez-tint-text-muted:     rgba(42, 24, 8, 0.74);
  --ez-tint-text-dim:       rgba(42, 24, 8, 0.55);
  --ez-tint-text-faint:     rgba(42, 24, 8, 0.30);

  --ez-link-nav:            var(--ez-peach-700);
  --ez-link-nav-hover-bg:   rgba(232, 130, 92, 0.14);
  --ez-link-nav-active-bg:  rgba(232, 130, 92, 0.20);

  --ez-btn-outline-bg:      linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.40));
  --ez-btn-outline-border:  rgba(42, 24, 8, 0.18);

  --ez-nav-bg:          linear-gradient(135deg, rgba(248, 222, 198, 0.62), rgba(254, 237, 227, 0.48));
  --ez-nav-bg-scrolled: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 244, 0.90));
  --ez-nav-shadow:      0 18px 50px rgba(140, 59, 30, 0.18), 0 1px 0 rgba(255, 255, 255, 0.85) inset;

  /* Light glass = MORE transparent so you can see through. */
  --ez-surface-glass:   linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.22));

  /* Modal scrim — peach-tinted instead of near-black so it doesn't muddy the light theme. */
  --ez-modal-scrim: rgba(140, 59, 30, 0.18);

  /* FeatureLock overlay — peach veil on cream */
  --ez-feature-lock-overlay-bg:           rgba(232, 130, 92, 0.10);
  --ez-feature-lock-overlay-bg-hover:     rgba(232, 130, 92, 0.28);
  --ez-feature-lock-overlay-border:       rgba(184, 80, 42, 0.40);
  --ez-feature-lock-overlay-border-hover: rgba(184, 80, 42, 0.65);

  /* Danger wash — softer on cream so the red border still reads but the surface stays light */
  --ez-danger-bg: rgba(229, 84, 84, 0.12);
  --ez-photo-control-bg: rgba(20, 12, 4, 0.55);
  --ez-photo-control-bg-hover: rgba(20, 12, 4, 0.78);
  --ez-photo-control-fg: #FFF8F4;
}

:root {
  --ez-modal-scrim: rgba(15, 7, 2, 0.70);
}

:root {
  --ez-cal-1:  #F4A574;
  --ez-cal-2:  #7BADD4;
  --ez-cal-3:  #6ABFA0;
  --ez-cal-4:  #E8C468;
  --ez-cal-5:  #C792EA;
  --ez-cal-6:  #F07F94;
  --ez-cal-7:  #5FC4D4;
  --ez-cal-8:  #B5CC6A;
  --ez-cal-9:  #E89A5C;
  --ez-cal-10: #9AA5F2;
  --ez-cal-11: #D4A5C9;
  --ez-cal-12: #A8A29E;
  --ez-cal-on: #1a0d04;
  --ez-cal-establishment:      #6ABFA0;
  --ez-cal-reservation:        #7BADD4;
  --ez-cal-holiday:            #E55454;
  --ez-cal-establishment-soft: rgba(106, 191, 160, 0.14);
  --ez-cal-reservation-soft:   rgba(123, 173, 212, 0.16);
  --ez-cal-holiday-soft:       rgba(229, 84, 84, 0.16);
  --ez-info-soft:              rgba(123, 173, 212, 0.14);
  --ez-info-border:            rgba(123, 173, 212, 0.35);
  --ez-danger-border:          rgba(229, 84, 84, 0.40);
  --ez-paper:                  #FFFFFF;
  --ez-paper-border:           rgba(255, 248, 244, 0.22);
}

[data-theme="light"] {
  --ez-cal-1:  #D4693F;
  --ez-cal-2:  #2F6FA8;
  --ez-cal-3:  #2D8C64;
  --ez-cal-4:  #A67C00;
  --ez-cal-5:  #8A4FB8;
  --ez-cal-6:  #C23B5A;
  --ez-cal-7:  #1F8A99;
  --ez-cal-8:  #6B8A1F;
  --ez-cal-9:  #C4661E;
  --ez-cal-10: #4A55C2;
  --ez-cal-11: #A0508F;
  --ez-cal-12: #6E6560;
  --ez-cal-on: #FFFFFF;
  --ez-cal-establishment:      #2D8C64;
  --ez-cal-reservation:        #2F6FA8;
  --ez-cal-holiday:            #C23B5A;
  --ez-cal-establishment-soft: rgba(45, 140, 100, 0.12);
  --ez-cal-reservation-soft:   rgba(47, 111, 168, 0.12);
  --ez-cal-holiday-soft:       rgba(194, 59, 90, 0.12);
  --ez-info-soft:              rgba(47, 111, 168, 0.10);
  --ez-info-border:            rgba(47, 111, 168, 0.35);
  --ez-danger-border:          rgba(194, 59, 90, 0.40);
  --ez-paper:                  #FFFFFF;
  --ez-paper-border:           rgba(42, 24, 8, 0.14);
}

/* === Base === */

html {
  font-family: var(--ez-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ez-cream);
  background: var(--ez-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--ez-nav-h);
}

html { overflow-x: clip; transition: background-color 0.4s ease, color 0.4s ease; }

body {
  background: transparent;
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  min-height: 100vh;
  overflow-x: clip;
  max-width: 100vw;
  transition: background-color 0.4s ease, color 0.4s ease;
}

#top { scroll-margin-top: 0; }

/* === Typography === */

h1, .h1 {
  font-family: var(--ez-font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
  color: var(--ez-cream);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--ez-font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ez-cream);
}

h3, .h3 {
  font-family: var(--ez-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ez-cream);
}

.body-text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ez-ink-700);
}

.caption {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ez-ink-600);
}

.caption-lg {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ez-ink-600);
}

.overline,
.eyebrow,
.meta {
  font-family: var(--ez-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--ez-peach-300);
  text-transform: uppercase;
}

.meta--lg { font-size: 13px; letter-spacing: 0.18em; }

.display {
  font-family: var(--ez-font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.outline-text {
  -webkit-text-stroke: 1.5px var(--ez-peach-400);
  color: transparent;
}

.gradient-text {
  background: var(--ez-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fire-text {
  background: var(--ez-grad-fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(242, 92, 30, 0.45));
}

.tabular {
  font-variant-numeric: tabular-nums;
  font-family: var(--ez-font-mono);
}

a {
  color: var(--ez-link, var(--ez-peach-300));
  text-decoration: none;
  transition: color 0.2s var(--ez-ease-out);
}

a:hover {
  color: var(--ez-link-hover, var(--ez-peach-200));
}

[data-theme="light"] {
  --ez-link: var(--ez-peach-700);
  --ez-link-hover: #8C3B1E;
}

/* === Container === */

.container {
  width: min(100% - var(--ez-gutter) * 2, var(--ez-container));
  margin-inline: auto;
}

/* === Glass utility (used widely) === */

.glass {
  position: relative;
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--ez-shadow-glass);
  border-radius: var(--ez-r-lg);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(42, 24, 8, 0.85);
  }
}

.divider {
  height: 1px;
  background: var(--ez-line);
  border: 0;
  width: 100%;
}

/* === Reveal (used by useReveal hook) === */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ez-ease-out), transform .9s var(--ez-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Accessibility === */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Legal footer === */

.ez-footer {
  padding: var(--ez-space-lg) var(--ez-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ez-space-sm);
  color: var(--ez-text-muted);
  font-size: 0.875rem;
  background: transparent;
}

.ez-footer__site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ez-space-sm) var(--ez-space-md);
  max-width: 900px;
}

.ez-footer__site-title {
  color: var(--ez-text);
  font-weight: 600;
}

.ez-footer__site a {
  color: var(--ez-text-muted);
  text-decoration: none;
}

.ez-footer__site a:hover {
  color: var(--ez-text);
  text-decoration: underline;
}

.ez-footer__site a:focus-visible {
  outline: 2px solid var(--ez-primary);
  outline-offset: 2px;
  border-radius: var(--ez-r-sm);
}

.ez-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ez-space-md);
}

.ez-footer__links a,
.ez-footer__cookie-btn {
  color: var(--ez-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.ez-footer__links a:hover,
.ez-footer__cookie-btn:hover {
  color: var(--ez-text);
  text-decoration: underline;
}

.ez-footer__cookie-btn:focus-visible,
.ez-footer__links a:focus-visible {
  outline: 2px solid var(--ez-primary);
  outline-offset: 2px;
  border-radius: var(--ez-r-sm);
}

.ez-footer__copyright {
  color: var(--ez-text-dim);
  font-family: var(--ez-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.ez-footer__copyright a:not(.ez-footer__brand) {
  color: var(--ez-cream);
  text-decoration: none;
}

.ez-footer__copyright a:not(.ez-footer__brand):hover {
  text-decoration: underline;
}

.ez-footer__copyright a:focus-visible {
  outline: 2px solid var(--ez-primary);
  outline-offset: 2px;
  border-radius: var(--ez-r-sm);
}

.ez-footer__brand {
  color: var(--ez-cream);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s var(--ez-ease-out);
}

.ez-footer__brand:hover {
  opacity: 0.85;
}

/* === Cookie consent modal === */

.cookie-consent__body {
  margin: 0 0 var(--ez-space-md);
  color: var(--ez-text);
  line-height: 1.5;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ez-space-sm);
  justify-content: center;
}

.cookie-consent__actions .btn {
  flex: 1 1 0;
  min-width: 8rem;
}

.cookie-consent__categories {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
}

.cookie-consent__category {
  display: flex;
  align-items: flex-start;
  gap: var(--ez-space-sm);
  padding: var(--ez-space-sm);
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-sm);
  cursor: pointer;
}

.cookie-consent__category input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.cookie-consent__category-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cookie-consent__category-label {
  font-weight: 600;
  color: var(--ez-text);
}

.cookie-consent__category-description {
  color: var(--ez-text-muted);
  font-size: 0.875rem;
}
/* === Keyframes shared across components & pages === */

@keyframes ez-hero-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ez-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ez-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ez-pulse-fire {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 165, 116, 0.55), 0 0 0 0 rgba(212, 105, 63, 0.0);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(244, 165, 116, 0.0), 0 0 40px 4px rgba(212, 105, 63, 0.45);
  }
}

@keyframes ez-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ez-modal-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes ez-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hero entrance helper class */
.ez-hero-up {
  animation: ez-hero-up 1s var(--ez-ease-out) both;
  animation-delay: var(--ez-anim-delay, 0ms);
}

/* Pulse-fire helper for "you're up" / "now serving" treatments */
.ez-pulse-fire {
  animation: ez-pulse-fire 2.6s var(--ez-ease-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ez-hero-up,
  .ez-pulse-fire {
    animation: none !important;
  }
}
.btn{font-family:var(--ez-font-body);border-radius:var(--ez-r-pill);cursor:pointer;min-height:44px;transition:transform .18s var(--ez-ease-out), box-shadow .18s var(--ez-ease-out), background .2s var(--ez-ease-out), color .2s var(--ez-ease-out), border-color .2s var(--ez-ease-out), filter .18s var(--ez-ease-out);white-space:nowrap;letter-spacing:.01em;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 26px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none!important;filter:none!important;transform:none!important}.btn:active:not(:disabled){transition-duration:50ms;filter:brightness(.82)saturate(.92)!important;transform:translateY(3px)scale(.96)!important;box-shadow:inset 0 2px 6px #00000073,inset 0 -1px 2px #ffffff0a!important}.btn-primary:active:not(:disabled){box-shadow:inset 0 0 0 1px #0000004d,0 3px 8px #d4693f33,inset 0 4px 10px #00000073!important}.btn-outline:active:not(:disabled){background:linear-gradient(135deg,#0000002e,#00000014);border-color:#ffffff4d}.btn-dark:active:not(:disabled){background:var(--ez-bg-3)}.btn-ghost:active:not(:disabled){background:#f4a57438}.btn-danger:active:not(:disabled){box-shadow:inset 0 0 0 1px #0000004d,0 3px 8px #d44a4a33,inset 0 4px 10px #00000073!important}.btn-sm{min-height:36px;padding:8px 16px;font-size:13px}.btn-lg{padding:16px 32px;font-size:16px}.btn-block{width:100%}.btn-icon{border-radius:50%;padding:10px}.btn-primary{background:var(--ez-grad-btn);color:var(--ez-on-peach);box-shadow:var(--ez-shadow-btn)}.btn-primary:hover:not(:disabled){box-shadow:var(--ez-shadow-btn), var(--ez-fire-glow);filter:brightness(1.06)saturate(1.05);transform:translateY(-2px)}.btn-outline{background:var(--ez-btn-outline-bg);color:var(--ez-text);border-color:var(--ez-btn-outline-border);-webkit-backdrop-filter:blur(18px)saturate(160%)}.btn-outline:hover:not(:disabled){border-color:var(--ez-peach-400);color:var(--ez-peach-400);transform:translateY(-1px)}.btn-dark{background:var(--ez-bg-2);color:var(--ez-cream);border-color:var(--ez-line)}.btn-dark:hover:not(:disabled){background:var(--ez-bg-3);border-color:var(--ez-line-strong);transform:translateY(-1px)}.btn-ghost{color:var(--ez-peach-300);background:0 0}.btn-ghost:hover:not(:disabled){color:var(--ez-peach-200);background:#f4a5741a}.btn-danger{background:var(--ez-grad-danger);color:#fff;box-shadow:inset 0 1px #ffffff40,0 12px 32px #d44a4a66}.btn-danger:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px)}.btn-success{background:var(--ez-success);color:var(--ez-on-peach);border-color:#0000;box-shadow:inset 0 1px #ffffff40,0 12px 32px #6abfa059}.btn-success:hover:not(:disabled){filter:brightness(1.06)saturate(1.05);transform:translateY(-2px)}.btn-muted{color:var(--ez-ink-700);border-color:var(--ez-line);background:#ffffff0a}.btn-muted:hover:not(:disabled){color:var(--ez-ink-800);border-color:var(--ez-line-strong);background:#ffffff14;transform:translateY(-1px)}.card{background:var(--ez-surface-glass);-webkit-backdrop-filter:blur(28px)saturate(180%);border:1px solid var(--ez-glass-border);border-radius:var(--ez-r-lg);box-shadow:var(--ez-shadow-glass);color:var(--ez-cream);padding:28px;position:relative}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.card{background:#2a1808d9}}.card-hover{transform-origin:50%;will-change:transform;transition:transform .25s var(--ez-ease-out), box-shadow .25s var(--ez-ease-out)}.card-hover:hover{box-shadow:0 0 0 1px #f4a57480,0 30px 80px #0000004d,0 0 28px #f4a57452,0 0 64px #e8825c29!important}.card-raised{background:var(--ez-bg-2);box-shadow:var(--ez-shadow-md);border:1px solid var(--ez-line)}.card-header{justify-content:space-between;align-items:center;gap:var(--ez-space-md);margin-bottom:var(--ez-space-xl);color:var(--ez-cream);display:flex}.card-header h3{font-family:var(--ez-font-display);color:var(--ez-cream);font-size:18px;font-weight:600}.card-footer{margin-top:var(--ez-space-xl);padding-top:var(--ez-space-md);border-top:1px solid var(--ez-line)}.form-field{gap:var(--ez-space-sm);margin-bottom:var(--ez-space-md);flex-direction:column;display:flex}.form-field:last-child{margin-bottom:0}.badge{border-radius:var(--ez-r-pill);font-size:11px;font-weight:600;font-family:var(--ez-font-mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid #0000;padding:4px 12px;display:inline-block}.badge-queue{color:var(--ez-peach-300);background:#f4a57424;border-color:#f4a57438}.badge-active{background:var(--ez-grad-btn);color:var(--ez-on-peach);border-color:#0000}.badge-waiting{color:var(--ez-ink-700);border-color:var(--ez-line);background:#fff8f40d}.badge-done{color:#8fd9bc;background:#6abfa029;border-color:#6abfa04d}.badge-error{color:#f0a5a5;background:#e5545429;border-color:#e554544d}.badge-info{color:#b5d3ea;background:#7badd429;border-color:#7badd44d}[data-theme=light] .badge-info{color:#1f4d75;background:#3f79a824;border-color:#3f79a866}[data-theme=light] .queue-entry-time{color:var(--ez-ink-500);opacity:1}.input{font-family:var(--ez-font-body);border:1px solid var(--ez-pill-border);border-radius:var(--ez-r-md);background:var(--ez-tint-soft);color:var(--ez-cream);transition:border-color .2s var(--ez-ease-out), box-shadow .2s var(--ez-ease-out), background .2s var(--ez-ease-out);width:100%;padding:12px 16px;font-size:15px}.input::placeholder{color:var(--ez-ink-500)}.input--textarea{resize:vertical;min-height:132px;line-height:1.55;font-family:var(--ez-font-body)}.input:focus{border-color:var(--ez-peach-300);background:#ffffff12;outline:none;box-shadow:0 0 0 3px #f4a5742e}.input-error,.input-error:focus{border-color:var(--ez-error);background:#e554540f}.input-error:focus{box-shadow:0 0 0 3px #e5545433}.input-password-wrap{display:block;position:relative}.input-has-reveal{width:100%;padding-right:44px}.input-reveal-btn{cursor:pointer;color:var(--ez-text-muted);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:color .15s;display:inline-flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.input-reveal-btn:hover{color:var(--ez-text)}.input-reveal-btn:focus-visible{outline:2px solid var(--ez-text-dim);outline-offset:1px}.form-group{gap:var(--ez-space-sm);flex-direction:column;display:flex}.form-label{font-family:var(--ez-font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ez-form-label,var(--ez-peach-300));font-size:11px;font-weight:500}[data-theme=light]{--ez-form-label:var(--ez-peach-700)}.form-required{color:var(--ez-error);margin-left:4px;font-weight:600;display:inline-block}.link-button{cursor:pointer;color:var(--ez-link,var(--ez-peach-300));font:inherit;transition:color .2s var(--ez-ease-out);background:0 0;border:0;padding:0}.link-button:hover{color:var(--ez-link-hover,var(--ez-peach-200))}.auth-modal{gap:var(--ez-space-md);flex-direction:column;display:flex}.auth-modal .auth-logo{margin-bottom:var(--ez-space-md);justify-content:center;display:flex}.auth-modal .auth-subtitle{text-align:center;color:var(--ez-text-muted);margin-bottom:var(--ez-space-md)}.auth-modal .auth-form{gap:var(--ez-space-md);flex-direction:column;display:flex}.auth-modal .auth-footer{text-align:center;margin-top:var(--ez-space-md);color:var(--ez-text-muted);font-size:13px}.form-error{color:#f0a5a5;font-size:12px}.form-hint{color:var(--ez-ink-600);font-size:12px}.select{font-family:var(--ez-font-body);border:1px solid var(--ez-pill-border);border-radius:var(--ez-r-md);background:var(--ez-tint-soft);color:var(--ez-cream);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F9C4A3'%3E%3Cpath d='M4.5 6L8 9.5 11.5 6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;width:100%;padding:12px 40px 12px 16px;font-size:15px;transition:border-color .2s,box-shadow .2s}.select:focus{border-color:var(--ez-peach-300);outline:none;box-shadow:0 0 0 3px #f4a5742e}.select option{background:var(--ez-bg-2);color:var(--ez-cream)}.select.input-error,.select.input-error:focus{border-color:var(--ez-error);background:#e554540f}.select.input-error:focus{box-shadow:0 0 0 3px #e5545433}.notif-type-desc{margin:var(--ez-space-xs) 0 0}.toggle-wrapper{align-items:center;gap:var(--ez-space-sm);display:inline-flex}.toggle-label{line-height:1}.toggle-field{flex-direction:column;gap:4px;display:flex}.toggle-hint{margin:0 0 0 56px}.toggle{border-radius:var(--ez-r-pill);cursor:pointer;border:1px solid var(--ez-line);background:#ffffff1a;width:44px;height:24px;transition:background .2s;position:relative}.toggle.active{background:var(--ez-grad-btn);border-color:#0000}.toggle-knob{background:var(--ez-cream);width:20px;height:20px;transition:transform .2s var(--ez-ease-out);border-radius:50%;position:absolute;top:1px;left:1px;box-shadow:0 2px 6px #0006}.toggle.active .toggle-knob{transform:translate(20px)}.progress-track{background:var(--ez-pill-bg-strong);border-radius:var(--ez-r-pill);height:6px;overflow:hidden}.progress-fill{background:var(--ez-grad-btn);border-radius:var(--ez-r-pill);height:100%;transition:width .4s var(--ez-ease-out);box-shadow:0 0 16px #f4a57466}.table-scroll{-webkit-overflow-scrolling:touch;border-radius:var(--ez-r-md);width:100%;overflow-x:auto}.table-scroll .table{min-width:560px}.table{border-collapse:collapse;width:100%;font-family:var(--ez-font-body)}.table th{font-family:var(--ez-font-mono);color:var(--ez-peach-300);text-align:left;border-bottom:1px solid var(--ez-line);text-transform:uppercase;letter-spacing:.18em;padding:14px 16px;font-size:11px;font-weight:500}.table td{color:var(--ez-ink-800);border-bottom:1px solid var(--ez-line);padding:14px 16px;font-size:14px}.table tr:hover td{color:var(--ez-cream);background:#f4a5740a}.table .table-actions-td{text-align:right;white-space:nowrap;width:1%}.modal-overlay{background:var(--ez-modal-scrim);z-index:1000;-webkit-backdrop-filter:blur(16px);animation:ez-fade-in .18s var(--ez-ease-out);padding:var(--ez-space-md);box-sizing:border-box;overscroll-behavior:contain;justify-content:center;align-items:safe center;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{background:var(--ez-modal-bg,var(--ez-surface-glass));-webkit-backdrop-filter:var(--ez-modal-backdrop,blur(28px) saturate(180%));border:1px solid var(--ez-modal-border,var(--ez-pill-border-strong));box-shadow:var(--ez-modal-shadow,var(--ez-shadow-glass));border-radius:var(--ez-r-lg);width:90%;max-width:520px;max-height:min(90dvh,90vh);color:var(--ez-cream);animation:ez-modal-in .24s var(--ez-ease-out);padding:32px;overflow-y:auto}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.modal{background:var(--ez-modal-bg-fallback,#2a1808eb)}}:root{--ez-modal-bg:linear-gradient(135deg, #2a1808f5, #1c1006f0);--ez-modal-bg-fallback:#2a1808f5;--ez-modal-backdrop:blur(28px) saturate(180%);--ez-modal-border:#ffffff1a;--ez-modal-shadow:var(--ez-shadow-glass)}[data-theme=light]{--ez-modal-bg:#fff;--ez-modal-bg-fallback:#fff;--ez-modal-backdrop:none;--ez-modal-border:#2a18081a;--ez-modal-shadow:0 1px 0 #fffffff2 inset, 0 24px 60px #8c3b1e38, 0 8px 24px #8c3b1e24}.modal-fullscreen{flex-direction:column;width:96vw;max-width:96vw;max-height:min(94dvh,94vh);padding:0;display:flex}@media (width<=640px){.modal-overlay{-webkit-backdrop-filter:blur(10px);align-items:flex-end;padding:12px}.modal{width:100%;max-width:none;max-height:calc(100dvh - 24px);padding:var(--ez-space-lg);border-radius:var(--ez-r-lg)}.modal-fullscreen{border-radius:0;width:100%;max-width:none;height:100dvh;max-height:100dvh}.modal-footer{margin-top:var(--ez-space-lg);flex-direction:column-reverse;align-items:stretch}.modal-footer .btn{justify-content:center;width:100%}}.modal-fullscreen .modal-header{border-bottom:1px solid var(--ez-line);flex-shrink:0;margin-bottom:0;padding:12px 18px}.modal-fullscreen .modal-body{flex:1;padding:0;overflow:hidden}.modal-header{justify-content:space-between;align-items:center;gap:var(--ez-space-md);padding-bottom:var(--ez-space-md);margin-bottom:var(--ez-space-lg);border-bottom:1px solid var(--ez-line);color:var(--ez-cream);display:flex}.modal-header h3{font-family:var(--ez-font-display);letter-spacing:-.01em;color:var(--ez-cream);font-size:20px;font-weight:600}.modal-body{gap:var(--ez-space-md);flex-direction:column;display:flex}.modal-footer{gap:var(--ez-space-md);margin-top:var(--ez-space-xl);padding-top:var(--ez-space-md);border-top:1px solid var(--ez-line);justify-content:flex-end;display:flex}.toast-container{top:var(--ez-space-lg);right:var(--ez-space-lg);z-index:2000;gap:var(--ez-space-sm);flex-direction:column;display:flex;position:fixed}.toast{border-radius:var(--ez-r-md);background:var(--ez-surface-glass);-webkit-backdrop-filter:blur(28px)saturate(180%);border:1px solid var(--ez-glass-border);box-shadow:var(--ez-shadow-glass);align-items:center;gap:var(--ez-space-sm);color:var(--ez-cream);animation:ez-toast-in .22s var(--ez-ease-out);padding:14px 20px 14px 24px;font-size:14px;font-weight:500;display:flex;position:relative;overflow:hidden}.toast:before{content:"";background:var(--ez-grad-btn);width:4px;position:absolute;top:0;bottom:0;left:0}.toast-success:before{background:linear-gradient(#6abfa0,#3d8b6d)}.toast-error:before{background:var(--ez-grad-danger)}.toast-warning:before{background:linear-gradient(#e8c468,#b5953a)}.toast-info:before{background:linear-gradient(#7badd4,#4f86a8)}.spinner{background:conic-gradient(from 0deg, transparent 0deg, var(--ez-peach-400) 90deg, var(--ez-peach-300) 270deg, transparent 360deg);border-radius:50%;width:24px;height:24px;animation:.9s linear infinite ez-spin;-webkit-mask:radial-gradient(9px,#0000 99%,#000 100%);mask:radial-gradient(9px,#0000 99%,#000 100%)}.spinner-lg{width:40px;height:40px;-webkit-mask:radial-gradient(15px,#0000 99%,#000 100%);mask:radial-gradient(15px,#0000 99%,#000 100%)}.datagrid{border-radius:var(--ez-r-lg);border:1px solid var(--ez-glass-border);background:var(--ez-surface-glass);box-shadow:var(--ez-shadow-glass);color:var(--ez-cream);flex-direction:column;display:flex;overflow:hidden}.card .datagrid,.modal-body .datagrid{box-shadow:none;background:0 0;border:0;border-radius:0}.datagrid-toolbar{border-bottom:1px solid var(--ez-line);background:var(--ez-surface-raised);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px;padding:14px 20px;display:flex}.datagrid-search{border-radius:var(--ez-r-md);border:1px solid var(--ez-pill-border);background:var(--ez-tint-soft);min-width:200px;max-width:420px;height:44px;color:var(--ez-ink-600);transition:border-color .2s var(--ez-ease-out), box-shadow .2s var(--ez-ease-out);flex:220px;align-items:center;gap:10px;padding:0 16px;display:flex}.datagrid-search:focus-within{border-color:var(--ez-peach-300);box-shadow:0 0 0 3px var(--ez-accent-ring)}.datagrid-search input{min-width:0;color:var(--ez-cream);font-family:var(--ez-font-body);background:0 0;border:0;outline:0;flex:1;font-size:15px}.datagrid-search input::placeholder{color:var(--ez-ink-600)}.datagrid-search input::-webkit-search-cancel-button{filter:grayscale();opacity:.6}.datagrid-filters-toggle{border-radius:var(--ez-r-pill);background:var(--ez-btn-outline-bg);height:44px;color:var(--ez-text);border:1px solid var(--ez-btn-outline-border);font-family:var(--ez-font-body);white-space:nowrap;transition:border-color .2s var(--ez-ease-out), color .2s var(--ez-ease-out), background .2s var(--ez-ease-out);align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:600;display:inline-flex}.datagrid-filters-toggle:hover{border-color:var(--ez-peach-400);color:var(--ez-peach-400)}.datagrid-filters-toggle.is-active{background:var(--ez-accent-soft-strong);color:var(--ez-peach-200);border-color:var(--ez-accent-border-strong)}.datagrid-filters-count{border-radius:var(--ez-r-pill);background:var(--ez-grad-btn);min-width:22px;height:22px;color:var(--ez-on-peach);font-family:var(--ez-font-mono);justify-content:center;align-items:center;padding:0 6px;font-size:12px;font-weight:600;display:inline-flex}.datagrid-chip{border-radius:var(--ez-r-pill);background:var(--ez-accent-soft);border:1px solid var(--ez-accent-border);height:44px;color:var(--ez-peach-200);white-space:nowrap;align-items:center;gap:8px;padding:0 4px 0 16px;font-size:14px;display:inline-flex}.datagrid-chip strong{font-weight:600}.datagrid-chip-label{color:var(--ez-text-muted)}.datagrid-chip-x{background:var(--ez-pill-bg-strong);width:36px;height:36px;color:inherit;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.datagrid-chip-x:hover{background:var(--ez-accent-border)}.datagrid-clear{border-radius:var(--ez-r-pill);height:44px;color:var(--ez-peach-300);font-family:var(--ez-font-body);white-space:nowrap;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex}.datagrid-clear:hover{background:var(--ez-accent-soft);color:var(--ez-peach-200)}.datagrid-total{font-family:var(--ez-font-mono);letter-spacing:.04em;color:var(--ez-text-muted);white-space:nowrap;margin-left:auto;font-size:13px}.datagrid-body{position:relative;overflow-x:auto}.datagrid-progress{z-index:3;background:linear-gradient(90deg, transparent, var(--ez-peach-400), transparent);background-repeat:no-repeat;background-size:50% 100%;height:3px;animation:1.1s linear infinite datagrid-progress;position:absolute;top:0;left:0;right:0}@keyframes datagrid-progress{0%{background-position:-50% 0}to{background-position:150% 0}}.datagrid-table{border-collapse:collapse;width:100%;font-size:15px}.datagrid-th{text-align:left;white-space:nowrap;border-bottom:1px solid var(--ez-line-strong);height:48px;font-family:var(--ez-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ez-peach-300);-webkit-user-select:none;user-select:none;background:var(--ez-bg-2);z-index:1;padding:0 16px;font-size:12px;font-weight:500;position:sticky;top:0}.datagrid-th-inner{align-items:center;gap:6px;display:inline-flex}.datagrid-th--sortable{cursor:pointer}.datagrid-th--sortable:hover,.datagrid-th--active{color:var(--ez-peach-200)}.datagrid-filter-row th{background:var(--ez-bg-2);z-index:1;position:sticky;top:48px}.datagrid-filter-cell{border-bottom:1px solid var(--ez-line-strong);padding:8px 12px}.datagrid-filter-input{border:1px solid var(--ez-pill-border);background:var(--ez-tint-soft);width:100%;min-width:88px;height:44px;color:var(--ez-cream);font-size:14px;font-family:var(--ez-font-body);border-radius:14px;padding:0 14px}.datagrid-filter-input:focus{border-color:var(--ez-peach-300);box-shadow:0 0 0 2px var(--ez-accent-ring);outline:none}.datagrid-filter-input option{background:var(--ez-bg-2);color:var(--ez-cream)}.datagrid-filter-range{gap:6px;display:flex}.datagrid-filter-range .datagrid-filter-input{min-width:0}.datagrid-row{border-bottom:1px solid var(--ez-line);height:60px;transition:background .15s var(--ez-ease-out)}.datagrid-row:hover{background:var(--ez-row-hover)}.datagrid-row--alt{background:var(--ez-row-alt)}.datagrid-row--clickable{cursor:pointer}.datagrid-td{color:var(--ez-ink-800);vertical-align:middle;padding:8px 16px;line-height:1.4}.datagrid-primary{color:var(--ez-cream);font-weight:600}.datagrid-subline{color:var(--ez-ink-600);font-size:13px;font-weight:400;display:none}.datagrid-allergens{color:var(--ez-ink-600);margin-top:2px;font-size:12px;font-weight:400;line-height:1.35;display:block}.datagrid-mono{font-family:var(--ez-font-mono);color:var(--ez-cream);white-space:nowrap;font-weight:600}.product-code{min-width:3ch;font-family:var(--ez-font-mono);color:var(--ez-ink-700);white-space:nowrap;margin-right:6px;font-size:12px;font-weight:600;display:inline-block}.datagrid-flag{background:var(--ez-accent-soft);width:32px;height:32px;color:var(--ez-peach-400);vertical-align:middle;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.datagrid-flag svg{display:inline-block}.datagrid-actions-td{text-align:right;white-space:nowrap;width:1%}.datagrid-actions{justify-content:flex-end;align-items:center;gap:8px;display:inline-flex}.datagrid-iconbtn{background:var(--ez-btn-outline-bg);width:44px;height:44px;color:var(--ez-text);border:1px solid var(--ez-btn-outline-border);transition:border-color .2s var(--ez-ease-out), color .2s var(--ez-ease-out), background .2s var(--ez-ease-out);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.datagrid-iconbtn:hover:not(:disabled){border-color:var(--ez-peach-400);color:var(--ez-peach-400)}.datagrid-iconbtn:disabled{opacity:.45;cursor:not-allowed}.datagrid-iconbtn.is-active{background:var(--ez-accent-soft-strong);color:var(--ez-peach-200);border-color:var(--ez-accent-border-strong)}.datagrid-iconbtn--danger:hover:not(:disabled){background:var(--ez-danger-bg);color:var(--ez-danger-text);border-color:var(--ez-danger)}.datagrid-menu{z-index:1000;border-radius:var(--ez-r-md);background:var(--ez-bg-2);border:1px solid var(--ez-glass-border);width:232px;box-shadow:var(--ez-shadow-lg);padding:8px;position:fixed}.datagrid-menu-item{width:100%;height:48px;color:var(--ez-cream);font-family:var(--ez-font-body);text-align:left;border-radius:14px;align-items:center;gap:12px;padding:0 16px;font-size:15px;font-weight:500;display:flex}.datagrid-menu-item:hover:not(:disabled){background:var(--ez-accent-soft)}.datagrid-menu-item:disabled{opacity:.45;cursor:not-allowed}.datagrid-menu-item--danger{color:var(--ez-danger-text)}.datagrid-menu-item--danger:hover:not(:disabled){background:var(--ez-danger-bg)}.datagrid-menu-sep{background:var(--ez-line);height:1px;margin:6px 8px}.datagrid-empty{text-align:center;padding:44px 24px}.datagrid-empty-state{color:var(--ez-ink-600);flex-direction:column;align-items:center;gap:12px;display:flex}.datagrid-empty-icon{background:var(--ez-accent-soft);width:56px;height:56px;color:var(--ez-peach-300);border-radius:18px;justify-content:center;align-items:center;display:flex}.datagrid-empty-title{font-family:var(--ez-font-display);color:var(--ez-cream);font-size:18px;font-weight:600}.datagrid-chips{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.datagrid-skeleton-row{border-bottom:1px solid var(--ez-line);height:60px}.datagrid-skeleton{background:var(--ez-skeleton);border-radius:7px;height:14px;animation:1.4s ease-in-out infinite datagrid-pulse;display:block}.datagrid-skeleton--pill{border-radius:var(--ez-r-pill);width:96px;height:36px;margin-left:auto}@keyframes datagrid-pulse{0%,to{opacity:1}50%{opacity:.45}}.datagrid-pager{border-top:1px solid var(--ez-line);background:var(--ez-surface-raised);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.datagrid-pager-left{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.datagrid-pagesize{color:var(--ez-text-muted);white-space:nowrap;align-items:center;gap:10px;font-size:14px;display:inline-flex}.datagrid-pagesize-select{border-radius:var(--ez-r-pill);border:1px solid var(--ez-pill-border);background:var(--ez-tint-soft);height:44px;color:var(--ez-cream);font-family:var(--ez-font-mono);appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F9C4A3'%3E%3Cpath d='M4.5 6L8 9.5 11.5 6'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding:0 38px 0 18px;font-size:14px;font-weight:600}.datagrid-pagesize-select:focus{border-color:var(--ez-peach-300);box-shadow:0 0 0 3px var(--ez-accent-ring);outline:none}.datagrid-pagesize-select option{background:var(--ez-bg-2);color:var(--ez-cream)}.datagrid-range{font-family:var(--ez-font-mono);color:var(--ez-text-muted);letter-spacing:.02em;white-space:nowrap;font-size:14px}.datagrid-pager-nav{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.datagrid-pages{align-items:center;gap:2px;display:flex}.datagrid-page{border-radius:var(--ez-r-pill);min-width:44px;height:44px;font-family:var(--ez-font-mono);color:var(--ez-ink-800);border:1px solid #0000;justify-content:center;align-items:center;padding:0 10px;font-size:14px;font-weight:600;display:inline-flex}.datagrid-page:hover{background:var(--ez-accent-soft);color:var(--ez-peach-200)}.datagrid-page.is-active{background:var(--ez-grad-btn);color:var(--ez-on-peach);box-shadow:var(--ez-shadow-btn)}.datagrid-ellipsis{width:28px;height:44px;color:var(--ez-ink-500);font-family:var(--ez-font-mono);justify-content:center;align-items:center;font-size:14px;display:inline-flex}@media (width<=900px){.datagrid-subline{display:block}.datagrid-pager{flex-direction:column;align-items:stretch}.datagrid-pager-nav{justify-content:space-between}.datagrid-toolbar{padding:12px 16px}.datagrid-th,.datagrid-td{padding-left:12px;padding-right:12px}}.datagrid-modal-input{border:1px solid var(--ez-pill-border);border-radius:var(--ez-r-md);background:var(--ez-tint-soft);width:100%;color:var(--ez-cream);font-size:14px;font-family:var(--ez-font-body);padding:8px 12px}.datagrid-modal-input:focus{border-color:var(--ez-peach-300);box-shadow:0 0 0 3px var(--ez-accent-ring);outline:none}.datagrid-modal-input option{background:var(--ez-bg-2);color:var(--ez-cream)}.datagrid-expanded-row>.datagrid-expanded-cell{background:var(--ez-tint-soft);border-bottom:1px solid var(--ez-line-strong);color:var(--ez-ink-800);padding:12px 16px}.datagrid-row--with-details{border-bottom:0}.datagrid-details-cell{border-bottom:1px solid var(--ez-line-strong);padding:0 16px 16px}@media (width<=900px){.datagrid-details-cell{padding:0 12px 12px}}.empty-state{padding:var(--ez-space-3xl) var(--ez-space-xl);text-align:center;color:var(--ez-ink-700);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{width:64px;height:64px;color:var(--ez-peach-400);margin-bottom:var(--ez-space-lg);opacity:.85;filter:drop-shadow(0 0 24px #f4a57473)}.empty-state-title{font-family:var(--ez-font-display);color:var(--ez-cream);margin-bottom:var(--ez-space-sm);font-size:20px;font-weight:600}.empty-state-desc{color:var(--ez-ink-600);max-width:320px;margin-bottom:var(--ez-space-lg);font-size:14px}.stat-card{background:var(--ez-surface-glass);-webkit-backdrop-filter:blur(28px)saturate(180%);border:1px solid var(--ez-glass-border);border-radius:var(--ez-r-lg);box-shadow:var(--ez-shadow-glass);padding:var(--ez-space-xl);color:var(--ez-cream);gap:var(--ez-space-md);flex-direction:column;display:flex;position:relative;overflow:hidden}.stat-card:after{content:"";aspect-ratio:1;filter:blur(40px);pointer-events:none;background:radial-gradient(circle,#f4a5744d,#0000 60%);width:70%;position:absolute;inset:-50% -30% auto auto}.stat-card-value{font-family:var(--ez-font-display);color:var(--ez-cream);letter-spacing:-.02em;font-size:36px;font-weight:700;line-height:1}.stat-card-label{font-family:var(--ez-font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ez-peach-300);font-size:10px;font-weight:500}.stat-card-change{font-family:var(--ez-font-mono);letter-spacing:.1em;font-size:11px;font-weight:500}.stat-card-change.positive{color:#8fd9bc}.stat-card-change.negative{color:#f0a5a5}@media (width<=640px){.card,.stat-card,.card-raised{min-width:0;max-width:100%;padding:var(--ez-space-lg)}.stat-card-value{overflow-wrap:anywhere;word-break:break-word;font-size:clamp(24px,8vw,32px)}}.chip{border-radius:var(--ez-r-pill);font-size:13px;font-weight:500;font-family:var(--ez-font-body);border:1px solid var(--ez-line);background:var(--ez-tint-soft);color:var(--ez-ink-800);cursor:pointer;transition:all .18s var(--ez-ease-out);align-items:center;padding:8px 16px;display:inline-flex}.chip:hover{border-color:var(--ez-peach-300);color:var(--ez-cream);background:#f4a57414}.chip.selected{background:var(--ez-grad-btn);color:var(--ez-on-peach);box-shadow:var(--ez-shadow-btn);border-color:#0000}.avatar{background:var(--ez-pill-bg);border:1px solid var(--ez-line);width:36px;height:36px;font-family:var(--ez-font-display);color:var(--ez-peach-300);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:500;display:flex;overflow:hidden}.avatar-sm{width:26px;height:26px;font-size:11px}.avatar-lg{width:48px;height:48px;font-size:18px}.tabs{background:var(--ez-surface-sunken);border:1px solid var(--ez-line);border-radius:var(--ez-radius-lg);max-width:100%;margin-bottom:var(--ez-space-lg);flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.tab{border-radius:var(--ez-radius-md);font-family:var(--ez-font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--ez-ink-500);cursor:pointer;transition:color .18s var(--ez-ease-out), background .18s var(--ez-ease-out);background:0 0;border:0;padding:8px 16px;font-size:11px;font-weight:600;position:relative}.tab:hover:not(.tab-active):not(.active){color:var(--ez-cream);background:var(--ez-surface-raised)}.tab.tab-active,.tab.active{color:var(--ez-on-peach);background:var(--ez-grad-btn)}.tab-card{gap:var(--ez-space-md);padding:var(--ez-space-md);background:var(--ez-tab-card-bg);border:1px solid var(--ez-line-strong);border-radius:var(--ez-radius-lg);flex-direction:column;display:flex}.tab-card>.tabs{align-self:flex-start;margin-bottom:0}.tab-card__panel{gap:var(--ez-space-md);flex-direction:column;display:flex}.confirm-dialog .modal-header h3{font-family:var(--ez-font-display);color:var(--ez-cream);font-size:20px;font-weight:600}.confirm-dialog .modal-body{color:var(--ez-ink-700);font-size:14px;line-height:1.6}.badge-primary{background:var(--ez-grad-btn);color:var(--ez-on-peach);border-color:#0000}.badge-success{color:#8fd9bc;background:#6abfa029;border-color:#6abfa04d}.badge-warning{color:#f0d78f;background:#e8c46829;border-color:#e8c4684d}.badge-danger{color:#f0a5a5;background:#e5545429;border-color:#e554544d}.badge-muted{color:var(--ez-ink-700);border-color:var(--ez-line);background:#ffffff0d}.tablet-link{gap:var(--ez-space-md);flex-direction:column;display:flex}.tablet-link__url{padding:var(--ez-space-sm) var(--ez-space-md);border-radius:var(--ez-r-sm);background:var(--ez-pill-bg);border:1px solid var(--ez-pill-border);font-family:var(--ez-font-mono);color:var(--ez-cream);word-break:break-all;font-size:13px;display:block}.tablet-link__qr{padding:var(--ez-space-md);background:var(--ez-qr-bg);border-radius:var(--ez-radius-md);align-self:center}.kiosk-links__pill svg{flex-shrink:0}.kiosk-links__pill-state{letter-spacing:.06em;margin-left:2px;font-weight:800}/* === Kiosk button overrides for fat-finger targets === */.kiosk-layout .btn,
body.kiosk-mode .btn {
  padding: var(--ez-space-md) var(--ez-space-xl);
  font-size: 16px;
  min-height: 56px;
}.kiosk-layout .btn-sm,
body.kiosk-mode .btn-sm {
  padding: var(--ez-space-sm) var(--ez-space-lg);
  font-size: 14px;
  min-height: 44px;
}/* === Queue actions sticky bar === */.queue-actions-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
  padding: var(--ez-space-md) var(--ez-space-lg);
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-lg);
  box-shadow: var(--ez-shadow-glass);
  margin-top: var(--ez-space-lg);
}/* === Wordmark === */.wordmark {
  font-family: var(--ez-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ez-cream);
  display: inline-flex;
  align-items: baseline;
}.wordmark-peach,
.wordmark .peach {
  background: var(--ez-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}/* === SignalR Indicator === */.signalr-indicator {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-pill-bg);
  border: 1px solid var(--ez-line);
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ez-ink-700);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}.signalr-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.3s, box-shadow 0.3s;
}.signalr-dot--connected {
  background: var(--ez-peach-400);
  box-shadow: 0 0 8px var(--ez-peach-400);
}.signalr-dot--connecting,
.signalr-dot--reconnecting {
  background: var(--ez-warning);
  animation: ez-pulse-dot 1s ease-in-out infinite;
}.signalr-dot--disconnected {
  background: var(--ez-error);
  box-shadow: 0 0 6px rgba(229, 84, 84, 0.6);
}@keyframes ez-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}/* === Pricing tier (shared with landing) ===
   These rules used to live in landing.css, but BillingPage and
   SubscribeConfirmDialog reuse the same class names and dashboard pages
   never load landing.css. Hosted here so both contexts get the styling. */.pricing-tier__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}.pricing-tier__name {
  font-family: var(--ez-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ez-cream);
}.pricing-tier__pitch {
  font-size: 14px;
  color: var(--ez-tint-text-dim);
  line-height: 1.5;
  min-height: 3em;
}.pricing-tier__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--ez-space-md) 0;
  border-top: 1px solid var(--ez-line);
  border-bottom: 1px solid var(--ez-line);
  min-height: 104px;
}.pricing-tier__price-note {
  flex-basis: 100%;
  font-family: var(--ez-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ez-tint-text-dim);
  margin-top: 2px;
}.pricing-tier__price-amount {
  font-family: var(--ez-font-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
  background: var(--ez-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}.pricing-tier__price-cadence {
  font-family: var(--ez-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ez-tint-text-dim);
  text-transform: lowercase;
}.pricing-tier__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 220px;
}.pricing-tier__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ez-tint-text-muted);
}.pricing-tier__check {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--ez-peach-300);
  background: rgba(244, 165, 116, 0.16);
  border-radius: 50%;
  padding: 2px;
  width: 18px;
  height: 18px;
}/* === Billing — tier sections + period subcards === */.billing-tier-section {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-lg);
}.billing-trial__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
}.consent-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ez-space-sm);
  margin-top: var(--ez-space-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ez-text-muted);
  cursor: pointer;
}.consent-check input {
  flex-shrink: 0;
  margin-top: 3px;
}.billing-tier-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
}.billing-tier-section__title {
  margin: 0;
  font-family: var(--ez-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}.billing-tier-section__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}.billing-tier-section__features .pricing-tier__feature {
  align-items: flex-start;
}.billing-tier-section__features .pricing-tier__feature span {
  min-width: 0;
  overflow-wrap: anywhere;
}/* Tier-card variant: spread features across up to 3 columns when there's room. */.billing-tier-section__features--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px var(--ez-space-md);
}@media (max-width: 900px) {
  .billing-tier-section__features--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}@media (max-width: 600px) {
  .billing-tier-section__features--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}/* Boxed variant: gives the feature list its own framed container inside the
   parent Card, matching the .subscribe-confirm__options treatment. */.billing-tier-section__features--boxed {
  padding: var(--ez-space-md);
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-md);
  background: var(--ez-tint-soft);
}.billing-period-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ez-space-lg);
  align-items: stretch;
}.billing-period-card {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  min-height: 260px;
  position: relative;
}.billing-period-card__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 2px 10px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-grad-btn, var(--ez-peach-500));
  color: var(--ez-on-peach);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}.billing-period-card__name {
  margin: 0;
  font-family: var(--ez-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ez-cream);
}.billing-period-card__price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-top: 8px;
}.billing-period-card__cadence {
  margin-top: 4px;
}.billing-period-card__cta {
  margin-top: auto;
}/* === Subscribe confirm dialog (wider, two-column on desktop) === */.subscribe-confirm-modal {
  width: clamp(320px, 92vw, 1520px);
  max-width: none;
}.subscribe-confirm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--ez-space-lg);
  align-items: stretch;
}.subscribe-confirm-grid > * { min-width: 0; }@media (max-width: 720px) {
  .subscribe-confirm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}/* === EZ product page: wide modals, price row, allergen chips, photo grid === */.ez-wide-modal {
  width: clamp(320px, 92vw, 860px);
  max-width: none;
}.ez-price-row {
  display: flex;
  gap: var(--ez-space-md);
  align-items: flex-start;
}.ez-price-row > * {
  flex: 1;
  min-width: 0;
}.ez-add-row {
  display: flex;
  gap: var(--ez-space-md);
  align-items: flex-end;
  flex-wrap: wrap;
}.ez-add-row > .form-group {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
}.ez-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ez-space-xs);
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--ez-line-strong);
  border-radius: var(--ez-r-pill);
  background: var(--ez-surface-raised);
  font-size: 0.85rem;
}.ez-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--ez-r-pill);
  background: transparent;
  color: var(--ez-text-muted);
  cursor: pointer;
}.ez-chip__remove:hover {
  background: var(--ez-danger-bg);
  color: var(--ez-danger);
}.ez-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ez-space-md);
}.ez-photo-card {
  position: relative;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-sm);
  overflow: hidden;
  background: var(--ez-surface-sunken);
  cursor: grab;
  transition: outline-color 0.15s var(--ez-ease-out), opacity 0.15s var(--ez-ease-out);
  outline: 2px solid transparent;
  outline-offset: -2px;
}.ez-photo-card:active {
  cursor: grabbing;
}.ez-photo-card--over {
  outline-color: var(--ez-peach-500);
}.ez-photo-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  pointer-events: none;
}.ez-photo-img--loading {
  display: flex;
  align-items: center;
  justify-content: center;
}.ez-photo-drag,
.ez-photo-remove {
  position: absolute;
  top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--ez-r-sm);
  background: var(--ez-photo-control-bg);
  color: var(--ez-photo-control-fg);
  opacity: 0;
  transition: opacity 0.15s var(--ez-ease-out), background 0.15s var(--ez-ease-out);
}.ez-photo-drag {
  left: 6px;
  cursor: grab;
  pointer-events: none;
}.ez-photo-remove {
  right: 6px;
  cursor: pointer;
}.ez-photo-remove:hover {
  background: var(--ez-danger);
  color: var(--ez-photo-control-fg);
}.ez-photo-card:hover .ez-photo-drag,
.ez-photo-card:hover .ez-photo-remove,
.ez-photo-card:focus-within .ez-photo-remove {
  opacity: 1;
}@media (hover: none) {
  .ez-photo-drag,
  .ez-photo-remove {
    opacity: 1;
  }
}@media (max-width: 640px) {
  .ez-price-row,
  .ez-add-row {
    flex-direction: column;
    align-items: stretch;
  }
}.subscribe-confirm__summary {
  /* Lifts the tier summary visually — peach accent strip on top, gradient
     wash on the body, gradient-text price reused from the landing tile. */
  position: relative;
  padding: var(--ez-space-lg);
  padding-top: calc(var(--ez-space-lg) + 4px);
  border: 1px solid var(--ez-glass-border-strong);
  border-radius: var(--ez-r-md);
  background: linear-gradient(135deg, rgba(244, 165, 116, 0.06), rgba(232, 130, 92, 0.02));
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
  overflow: hidden;
}.subscribe-confirm__summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ez-grad-btn, var(--ez-peach-500));
  opacity: 0.9;
}.subscribe-confirm__summary .pricing-tier__name {
  font-size: 22px;
}.subscribe-confirm__summary .pricing-tier__price {
  border-top-color: var(--ez-glass-border);
  border-bottom-color: var(--ez-glass-border);
  gap: var(--ez-space-sm);
  flex-wrap: wrap;
  align-items: baseline;
}.subscribe-confirm__options {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
  padding: var(--ez-space-lg);
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-md);
  background: var(--ez-tint-soft);
}.subscribe-confirm__options-label {
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ez-peach-300);
  margin: 0;
}/* === Feedback list (compact) === */.feedback-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-md);
  overflow: hidden;
  background: var(--ez-tint-soft);
}.feedback-row {
  display: flex;
  align-items: center;
  gap: var(--ez-space-sm);
  padding: 8px 14px;
  border-bottom: 1px solid var(--ez-line);
  font-size: 13px;
  line-height: 1.35;
  min-height: 40px;
}.feedback-row:last-child { border-bottom: 0; }.feedback-row__emoji  { font-size: 18px; flex-shrink: 0; }.feedback-row__rating { font-weight: 600; color: var(--ez-text); flex-shrink: 0; min-width: 30px; }.feedback-row__category { flex-shrink: 0; }.feedback-row__comment {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ez-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.feedback-row__date {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--ez-text-dim);
  font-size: 12px;
  font-family: var(--ez-font-mono);
}@media (max-width: 640px) {
  .feedback-row { flex-wrap: wrap; padding: 8px 12px; }
  .feedback-row__comment { flex-basis: 100%; white-space: normal; }
  .feedback-row__date { margin-left: 0; }
}/* === Emoji Rating === */.emoji-rating {
  display: flex;
  gap: var(--ez-space-lg);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}.emoji-rating-item {
  font-size: 56px;
  cursor: pointer;
  transition: transform 0.18s var(--ez-ease-out), box-shadow 0.18s var(--ez-ease-out), background 0.18s var(--ez-ease-out);
  padding: var(--ez-space-md);
  border-radius: var(--ez-r-lg);
  border: 1px solid var(--ez-line);
  background: var(--ez-tint-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}.emoji-rating-item:hover {
  transform: scale(1.08);
  border-color: var(--ez-peach-300);
}.emoji-rating-item.selected {
  transform: scale(1.15);
  border-color: var(--ez-peach-400);
  background: rgba(244, 165, 116, 0.18);
  box-shadow: var(--ez-fire-glow);
}@media (max-width: 640px) {
  .emoji-rating {
    gap: var(--ez-space-sm);
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .emoji-rating-item {
    font-size: 40px;
    padding: var(--ez-space-sm) var(--ez-space-md);
    flex: 0 0 auto;
    min-width: 0;
    text-align: center;
    line-height: 1;
  }
}/* Every step of the feedback flow (rating, follow-up prompts, thank-you) fills
   the available viewport so its content sits dead-center on the screen instead
   of clinging to the top of the .public-content / kiosk area. */.feedback-screen {
  min-height: calc(100dvh - var(--ez-nav-h, 72px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}/* === Pagination === */.pagination {
  display: flex;
  align-items: center;
  gap: var(--ez-space-xs);
}.pagination-btn {
  padding: 6px 12px;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-pill);
  background: var(--ez-tint-soft);
  color: var(--ez-ink-700);
  font-size: 13px;
  font-family: var(--ez-font-mono);
  cursor: pointer;
  transition: all 0.18s var(--ez-ease-out);
}.pagination-btn:hover {
  border-color: var(--ez-peach-300);
  color: var(--ez-peach-200);
}.pagination-btn.active {
  background: var(--ez-grad-btn);
  color: var(--ez-on-peach);
  border-color: transparent;
  box-shadow: var(--ez-shadow-btn);
}.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}/* === Textarea === */.textarea {
  font-family: var(--ez-font-body);
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid var(--ez-pill-border);
  border-radius: var(--ez-r-md);
  background: var(--ez-tint-soft);
  color: var(--ez-cream);
  resize: vertical;
  min-height: 100px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}.textarea::placeholder { color: var(--ez-ink-500); }.textarea:focus {
  outline: none;
  border-color: var(--ez-peach-300);
  box-shadow: 0 0 0 3px rgba(244, 165, 116, 0.18);
}/* === Language Selector === */.lang-selector { position: relative; }.lang-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--ez-btn-outline-border);
  border-radius: var(--ez-r-pill);
  background: var(--ez-btn-outline-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  cursor: pointer;
  font-family: var(--ez-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ez-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  transition: transform 0.18s var(--ez-ease-out), box-shadow 0.18s var(--ez-ease-out),
              background 0.2s var(--ez-ease-out), color 0.2s var(--ez-ease-out),
              border-color 0.2s var(--ez-ease-out);
}.lang-trigger:hover {
  border-color: var(--ez-peach-300);
  color: var(--ez-peach-200);
  transform: translateY(-1px);
}.lang-flag { display: block; border-radius: 2px; object-fit: cover; }.lang-code { letter-spacing: 0.06em; font-weight: 600; }.lang-dropdown {
  /* Portaled to <body>; coordinates are set inline by LanguageSelector. */
  position: fixed;
  background: linear-gradient(180deg, rgba(36, 22, 10, 0.82), rgba(20, 12, 5, 0.82));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-md);
  box-shadow: var(--ez-shadow-glass), 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 4px;
  list-style: none;
  margin: 0;
  z-index: 2000;
  animation: ez-fade-in 0.15s var(--ez-ease-out);
}[data-theme="light"] .lang-dropdown {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 244, 0.62));
  border-color: var(--ez-glass-border);
  box-shadow: var(--ez-shadow-glass), 0 18px 40px rgba(140, 59, 30, 0.20);
}@supports not (backdrop-filter: blur(1px)) {
  .lang-dropdown {
    background: rgba(26, 13, 4, 0.92);
  }
  [data-theme="light"] .lang-dropdown {
    background: rgba(255, 255, 255, 0.95);
  }
}/* Mobile: drop the see-through glass — opaque surface for legibility on busy backgrounds. */@media (max-width: 640px) {
  .lang-trigger {
    background: var(--ez-bg-2);
    border-color: var(--ez-line-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ez-cream);
  }
  [data-theme="light"] .lang-trigger {
    background: #FFFFFF;
    border-color: rgba(42, 24, 8, 0.18);
    color: var(--ez-cream);
  }
  .lang-dropdown {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 96px);
    overflow-y: auto;
    background: var(--ez-bg-2);
    border-color: var(--ez-line-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }
  [data-theme="light"] .lang-dropdown {
    background: #FFFFFF;
    border-color: rgba(42, 24, 8, 0.16);
    box-shadow: 0 18px 40px rgba(140, 59, 30, 0.22);
  }
}.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--ez-r-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--ez-font-body);
  font-size: 13px;
  color: var(--ez-text-muted);
  transition: background 0.12s var(--ez-ease-out);
}.lang-option:hover { background: rgba(244, 165, 116, 0.14); color: var(--ez-text); }.lang-option-active {
  background: rgba(244, 165, 116, 0.20);
  color: var(--ez-link-nav);
  font-weight: 600;
}.lang-option-active:hover { background: rgba(244, 165, 116, 0.26); }.lang-option-name { flex: 1; text-align: left; }.lang-check { color: var(--ez-peach-400); flex-shrink: 0; }/* === Country select (searchable combobox) === */.country-select { position: relative; }.country-input { padding-right: 38px; }.country-input-has-flag { padding-left: 46px; }.country-input-flag {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  border-radius: 2px;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}.country-input-caret {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--ez-text-muted);
  pointer-events: none;
}.country-dropdown {
  position: fixed;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(36, 22, 10, 0.92), rgba(20, 12, 5, 0.92));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-md);
  box-shadow: var(--ez-shadow-glass), 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 4px;
  list-style: none;
  margin: 0;
  z-index: 2000;
  animation: ez-fade-in 0.15s var(--ez-ease-out);
}[data-theme="light"] .country-dropdown {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 244, 0.86));
  border-color: var(--ez-glass-border);
  box-shadow: var(--ez-shadow-glass), 0 18px 40px rgba(140, 59, 30, 0.20);
}@supports not (backdrop-filter: blur(1px)) {
  .country-dropdown { background: rgba(26, 13, 4, 0.96); }
  [data-theme="light"] .country-dropdown { background: rgba(255, 255, 255, 0.98); }
}.country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--ez-r-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--ez-font-body);
  font-size: 14px;
  color: var(--ez-text-muted);
  transition: background 0.12s var(--ez-ease-out);
}.country-option-active { background: rgba(244, 165, 116, 0.14); color: var(--ez-text); }.country-option-selected { color: var(--ez-link-nav); font-weight: 600; }.country-flag { display: block; border-radius: 2px; object-fit: cover; flex-shrink: 0; }.country-option-name {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.country-option-code {
  font-family: var(--ez-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ez-ink-500);
  flex-shrink: 0;
}.country-check { color: var(--ez-peach-400); flex-shrink: 0; }.country-empty { padding: 10px 12px; font-size: 13px; color: var(--ez-text-muted); text-align: center; }/* === Status pill (queue / signalr-style) === */.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ez-r-pill);
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ez-tint-soft);
  border: 1px solid var(--ez-line);
  color: var(--ez-ink-700);
}.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ez-peach-400);
  box-shadow: 0 0 8px var(--ez-peach-400);
}.status-pill--live { color: var(--ez-link-nav); border-color: rgba(244, 165, 116, 0.30); background: rgba(244, 165, 116, 0.10); }.status-pill--paused { color: var(--ez-ink-700); }.status-pill--paused .status-pill__dot { background: var(--ez-ink-500); box-shadow: none; }/* === Queue entry list/row === */.queue-entry-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}.queue-entry-row {
  display: grid;
  /* 5th column = the undo slot. On desktop it sits at the very end of the
     row so undo aligns with the action buttons; on mobile (≤1024px) the
     grid is rebuilt so undo can sit at the end of the name row instead. */
  grid-template-columns: 56px 1fr 220px minmax(420px, auto) auto;
  align-items: center;
  column-gap: var(--ez-space-md);
  row-gap: 0;
  padding: 14px 18px;
  border-radius: var(--ez-r-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ez-line);
  transition: background 0.18s var(--ez-ease-out), box-shadow 0.18s var(--ez-ease-out), border-color 0.18s var(--ez-ease-out);
}.queue-entry-row .badge {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}.queue-entry-row:hover {
  background: rgba(244, 165, 116, 0.05);
  border-color: rgba(244, 165, 116, 0.18);
  box-shadow: inset 0 0 0 1px rgba(244, 165, 116, 0.10);
}.queue-entry-position {
  font-family: var(--ez-font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--ez-cream);
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}.queue-entry-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}.queue-entry-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ez-cream);
  /* Plain word-boundary wrapping. No nowrap (which made the name vanish via
     ellipsis when the column got squeezed) and no overflow-wrap: anywhere
     (which made narrow viewports break letter-by-letter into a vertical
     column). The default behaviour wraps at spaces and keeps each word
     intact, so the full name is always horizontal and readable. */
  white-space: normal;
}.queue-entry-phone {
  font-family: var(--ez-font-mono);
  font-size: 11px;
  color: var(--ez-ink-700);
  letter-spacing: 0.05em;
}.queue-entry-time {
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ez-peach-300);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.queue-entry-timing {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}.queue-entry-wait {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ez-peach-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}.queue-entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}.queue-entry-actions .btn {
  min-width: 130px;
  justify-content: center;
}.queue-entry-actions-placeholder {
  min-width: 130px;
}.queue-entry-undo-btn {
  /* Direct child of .queue-entry-row — desktop places it in the trailing
     auto column (5th), mobile re-pins it to the end of the name row. */
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line);
  background: transparent;
  color: var(--ez-ink-700);
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.queue-entry-undo-btn:hover {
  background: rgba(244, 165, 116, 0.10);
  border-color: rgba(244, 165, 116, 0.35);
  color: var(--ez-cream);
}.queue-entry-undo-placeholder {
  display: inline-block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}.queue-entry-note-btn {
  grid-column: 1;
  justify-self: center;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line);
  background: transparent;
  color: var(--ez-ink-700);
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.queue-entry-note-btn:hover {
  background: rgba(244, 165, 116, 0.08);
  border-color: rgba(244, 165, 116, 0.30);
  color: var(--ez-cream);
}.queue-entry-note {
  grid-column: 2 / -1;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--ez-r-sm);
  background: rgba(255, 255, 255, 0.09);
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out);
}.queue-entry-note:hover {
  background: rgba(244, 165, 116, 0.12);
  border-color: rgba(244, 165, 116, 0.30);
}.queue-entry-note--empty {
  background: transparent;
  border: 1px dashed var(--ez-line);
  color: var(--ez-ink-700);
  font-weight: 400;
  font-style: italic;
}.queue-entry-note--empty:hover {
  border-color: rgba(244, 165, 116, 0.40);
  color: var(--ez-cream);
  background: rgba(244, 165, 116, 0.06);
}/* Below 1024px the desktop grid (56 + 1fr + 220 + 420 + gaps ≈ 900px) starts
   squeezing the info column to near-zero — the timing chips overflow into the
   badge column and visually overlap the status pill. Switch to the stacked
   mobile layout well before that happens. */@media (max-width: 1024px) {
  /* Mobile layout — 3 columns so undo can sit at the end of the name row:
       col 1 = position
       col 2 = info / badge
       col 3 = undo button (row 1 only)
     Position spans rows 1–2, info row 1 col 2, badge row 2 col 2 / -1 (so
     it can stretch to full row width), then actions / note-btn / note each
     take their own row below. */
  .queue-entry-row {
    grid-template-columns: 48px 1fr auto;
    align-items: start;
    padding: 12px 14px;
  }
  .queue-entry-position {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 24px;
  }
  .queue-entry-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .queue-entry-row > .badge {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding: 6px 12px;
    margin-top: 6px;
  }
  /* Undo pins to the end of the name row (col 3, row 1), centred. The
     placeholder occupies the same cell so the layout is stable when undo
     isn't available. */
  .queue-entry-row > .queue-entry-undo-btn,
  .queue-entry-row > .queue-entry-undo-placeholder {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
  .queue-entry-name { font-size: 13px; }
  .queue-entry-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Allow the join time / wait minutes to wrap so they never push the row
     wider than the viewport. flex-wrap on the row, no-wrap on each chip. */
  .queue-entry-timing {
    flex-wrap: wrap;
    gap: 4px 10px;
    max-width: 100%;
    min-width: 0;
  }
  .queue-entry-wait {
    font-size: 0.95rem;
    min-width: 0;
  }
  .queue-entry-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .queue-entry-actions .btn {
    min-width: 0;
    flex: 1 1 calc(50% - 3px);
  }
  .queue-entry-actions-placeholder { display: none; }
  /* Pin the note button + note text to the same implicit row — column 1
     for the icon, column 2/-1 for the text — so they never wrap onto
     separate rows even at narrow widths. */
  .queue-entry-note-btn { grid-column: 1; }
  .queue-entry-note { grid-column: 2 / -1; min-width: 0; }
}@media (max-width: 480px) {
  .queue-entry-actions .btn { flex: 1 1 100%; }
}/* === Misc card hooks === */.card-title-link { color: var(--ez-cream); text-decoration: none; }.card-title-link:hover h3 { color: var(--ez-peach-200); }/* Whole queue card is a link → keep card styling but reset link defaults. */.queue-card-link {
  display: block;
  color: var(--ez-cream);
  text-decoration: none;
  cursor: pointer;
}.queue-card-link:hover h3 { color: var(--ez-peach-200); }/* === Emoji rating active alias === */.emoji-rating-item-active {
  transform: scale(1.15);
  border-color: var(--ez-peach-400);
  background: rgba(244, 165, 116, 0.18);
  box-shadow: var(--ez-fire-glow);
}/* === Stat card change variants (alt naming) === */.stat-card-change-positive { color: #8FD9BC; }.stat-card-change-negative { color: #F0A5A5; }.stat-card-change.stat-card-change-positive,
.stat-card-change.stat-card-change-negative { display: inline-flex; align-items: center; gap: 4px; }/* === QR Code Display === */.qr-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ez-space-md);
}.qr-code-display svg {
  display: block;
  max-width: 100%;
  height: auto;
}.qr-code-display .body-text {
  font-family: var(--ez-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ez-peach-300);
  word-break: break-all;
  max-width: 320px;
}/* === Auth helpers === */.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--ez-space-md) 0;
  color: var(--ez-ink-700);
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ez-line);
}.ez-link {
  color: var(--ez-peach-300);
  font-weight: 500;
  transition: color 0.15s var(--ez-ease-out);
}.ez-link:hover { color: var(--ez-peach-200); }/* === Glass tooltip (recharts) === */.ez-glass-tooltip {
  background: var(--ez-surface-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-md);
  padding: 10px 14px;
  color: var(--ez-cream);
  font-size: 12px;
  box-shadow: var(--ez-shadow-glass);
}.ez-glass-tooltip__label {
  font-family: var(--ez-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ez-peach-300);
  margin-bottom: 4px;
}.ez-glass-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-family: var(--ez-font-mono);
}/* === Now-serving / big number widget === */.now-serving {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--ez-space-xl);
  border-radius: var(--ez-r-lg);
  background: linear-gradient(135deg, rgba(244, 165, 116, 0.18), rgba(232, 130, 92, 0.08));
  border: 1px solid rgba(244, 165, 116, 0.25);
  box-shadow: var(--ez-shadow-glass), 0 0 60px rgba(244, 165, 116, 0.18);
  color: var(--ez-cream);
}.now-serving__label {
  font-family: var(--ez-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ez-peach-300);
}.now-serving__number {
  font-family: var(--ez-font-display);
  font-size: clamp(64px, 10vw, 140px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  background: var(--ez-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}.now-serving__caption {
  font-size: 14px;
  color: var(--ez-ink-700);
}/* === FeatureLock — generic "this feature is gated by your plan" wrapper === *//*
 * Shape: a relatively-positioned wrapper that keeps the gated content visible
 * but desaturated, with an absolute-positioned overlay that captures clicks
 * and a hint paragraph rendered directly below. The overlay is a real button
 * so keyboard users can reach it; `inert` on the children blocks tab order
 * into the disabled subtree.
 */.feature-lock {
  position: relative;
  display: block;
}.feature-lock-children {
  filter: grayscale(0.7) opacity(0.55);
  pointer-events: none;
  user-select: none;
}.feature-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ez-feature-lock-overlay-bg);
  border: 1px dashed var(--ez-feature-lock-overlay-border);
  border-radius: var(--ez-r-md);
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.feature-lock-overlay:hover,
.feature-lock-overlay:focus-visible {
  background: var(--ez-feature-lock-overlay-bg-hover);
  border-color: var(--ez-feature-lock-overlay-border-hover);
}.feature-lock-icon {
  color: var(--ez-peach-300);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}.feature-lock-block .feature-lock-overlay {
  border-radius: var(--ez-r-lg);
}/* === FeatureLock — upgrade dialog =========================================
 * Editorial / aspirational treatment, not an error modal. Hero strip with a
 * pulsing key orb + sparkles, gradient-text feature name, glass chip carrying
 * the upgrade hint, and a primary CTA with a sliding sheen.
 * ========================================================================= */.feature-lock-dialog {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
  animation: feature-lock-dialog-in 0.32s var(--ez-ease-out) both;
}.feature-lock-dialog .modal-header {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 12px 12px 0 0;
  border-bottom: 0;
  background: transparent;
}.feature-lock-dialog .modal-header h3 { display: none; }.feature-lock-dialog .modal-body {
  padding: 0 32px 8px;
}.feature-lock-dialog .modal-footer {
  padding: 16px 32px 24px;
  border-top: 0;
}@keyframes feature-lock-dialog-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}.feature-lock-hero {
  position: relative;
  height: 168px;
  margin: 0 -32px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(70% 100% at 50% 65%, rgba(244, 165, 116, 0.10), transparent 70%);
  overflow: hidden;
  isolation: isolate;
}.feature-lock-hero-orb {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #FFF8F4, #FDDCC8 60%, #F4A574);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 12px 28px rgba(140, 59, 30, 0.32),
    0 0 24px rgba(255, 200, 150, 0.30);
  animation: feature-lock-orb-pulse 3.6s var(--ez-ease-in-out) infinite;
  z-index: 1;
}.feature-lock-hero-orb::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  animation: feature-lock-orb-spin 18s linear infinite;
}.feature-lock-hero-orb svg {
  color: var(--ez-bg);
}@keyframes feature-lock-orb-pulse {
  0%, 100% { transform: translateY(0)       scale(1); }
  50%      { transform: translateY(-3px)    scale(1.04); }
}@keyframes feature-lock-orb-spin {
  to { transform: rotate(360deg); }
}.feature-lock-title {
  font-family: var(--ez-font-display);
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  background: var(--ez-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}.feature-lock-description {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ez-ink-700);
  margin: 0 0 16px;
}.feature-lock-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-pill-bg);
  border: 1px solid rgba(244, 165, 116, 0.35);
  color: var(--ez-peach-200);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}.feature-lock-chip svg {
  color: var(--ez-peach-400);
  flex-shrink: 0;
}.feature-lock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}.feature-lock-secondary {
  background: none;
  border: 0;
  padding: 8px 4px;
  font-family: var(--ez-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ez-ink-600);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: color 0.15s var(--ez-ease-out);
}.feature-lock-secondary:hover { color: var(--ez-cream); }.feature-lock-secondary:focus-visible { color: var(--ez-cream); }.feature-lock-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--ez-r-pill);
  background: var(--ez-grad-btn);
  color: var(--ez-on-peach);
  font-family: var(--ez-font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--ez-shadow-btn);
  transition: transform 0.18s var(--ez-ease-out), box-shadow 0.18s var(--ez-ease-out);
}.feature-lock-cta:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 22px 60px rgba(232,130,92,0.55); }.feature-lock-cta:active { transform: translateY(0); }.feature-lock-cta-label { position: relative; z-index: 1; }.feature-lock-cta-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%);
  transform: translateX(-110%);
  animation: feature-lock-cta-sheen 2.6s var(--ez-ease-in-out) infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}@keyframes feature-lock-cta-sheen {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}/* Light theme — soften the chip border + body text contrast */[data-theme="light"] .feature-lock-chip {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(184, 80, 42, 0.30);
  color: var(--ez-peach-700);
}[data-theme="light"] .feature-lock-chip svg { color: var(--ez-peach-600); }[data-theme="light"] .feature-lock-description { color: var(--ez-ink-800); }[data-theme="light"] .feature-lock-secondary { color: var(--ez-ink-700); }[data-theme="light"] .feature-lock-secondary:hover { color: var(--ez-ink-950); }/* === Kiosk links (queue detail) === */.kiosk-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}.kiosk-links__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--ez-r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ez-line);
}.kiosk-links__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line);
  background: transparent;
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.kiosk-links__open:hover {
  background: rgba(244, 165, 116, 0.10);
  border-color: rgba(244, 165, 116, 0.35);
}.kiosk-links__name { line-height: 1; }.kiosk-links__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line);
  background: transparent;
  color: var(--ez-ink-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.kiosk-links__icon-btn:hover {
  background: rgba(244, 165, 116, 0.10);
  border-color: rgba(244, 165, 116, 0.35);
  color: var(--ez-cream);
}.kiosk-links__features {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}/* Reuse the global .badge styling (badge-info on / badge-waiting off);
   add a tighter pill geometry and inline icon spacing for this surface. */.kiosk-links__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.4;
}/* === Setup checklist (Essentials view, first-day steps on the queue page) === */.setup-checklist {
  margin-bottom: var(--ez-space-lg);
}.setup-checklist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
  margin-bottom: var(--ez-space-lg);
}.setup-checklist__head h3 {
  margin: 0;
  font-family: var(--ez-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ez-cream);
}.setup-checklist__progress {
  font-family: var(--ez-font-mono);
  font-size: 12px;
  color: var(--ez-peach-300);
  white-space: nowrap;
}.setup-checklist__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-lg);
}.setup-checklist__step {
  display: flex;
  gap: var(--ez-space-md);
  align-items: flex-start;
}.setup-checklist__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ez-ink-600);
}.setup-checklist__icon.is-done {
  color: var(--ez-success);
}.setup-checklist__body {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  min-width: 0;
}.setup-checklist__body strong {
  font-size: 15px;
  color: var(--ez-cream);
}.setup-checklist__body p {
  margin: 0;
  font-size: 14px;
  color: var(--ez-ink-600);
}.setup-checklist__step.is-done .setup-checklist__body strong {
  color: var(--ez-ink-600);
  text-decoration: line-through;
}.setup-checklist__qr {
  align-self: flex-start;
}/* === Queue page "More" menu (Essentials view) === */.queue-more {
  position: relative;
}.queue-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  width: 232px;
  padding: 8px;
  border-radius: var(--ez-r-md);
  background: var(--ez-bg-2);
  border: 1px solid var(--ez-glass-border);
  box-shadow: var(--ez-shadow-lg);
}/* === Stripe Embedded Payment dialog === */.payment-dialog {
  max-width: 760px;
}.payment-dialog__stage {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
  align-items: center;
  text-align: center;
  padding: var(--ez-space-md) 0;
  min-height: 240px;
  justify-content: center;
}.payment-dialog__stage > p {
  margin: 0;
}.payment-dialog__stage .progress-track {
  width: 100%;
}/* Embedded Checkout iframe needs full width and unconstrained height. */.payment-dialog__stage--checkout {
  padding: 0;
  min-height: 540px;
  align-items: stretch;
  text-align: left;
}.payment-dialog__stage--checkout > div {
  width: 100%;
}.payment-dialog__result {
  gap: var(--ez-space-sm);
}.payment-dialog__result h3 {
  margin: 0;
}.payment-dialog__result-icon {
  flex-shrink: 0;
}.payment-dialog__result--success .payment-dialog__result-icon {
  color: var(--ez-success);
}.payment-dialog__result--failed .payment-dialog__result-icon {
  color: var(--ez-danger);
}.payment-dialog__result-reason {
  color: var(--ez-text-secondary, var(--ez-text));
  max-width: 560px;
}/* === Push status banner (customer-facing push-permission warning) ===
   Surfaces every reason push could be off (consent, permission, config) and
   gives a one-click fix path where the user can do something. Self-hides
   when push is fine. Uses token-based colours so light-theme switches work. */.push-status-banner {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  padding: var(--ez-space-md) var(--ez-space-lg);
  margin-bottom: var(--ez-space-md);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-sm);
  background: var(--ez-glass);
  color: var(--ez-text);
  font-size: 1.0625rem;
  line-height: 1.45;
  text-align: left;
}.push-status-banner__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ez-space-sm);
  width: 100%;
}.push-status-banner__icon { flex-shrink: 0; margin-top: 2px; }.push-status-banner__message { flex: 1; min-width: 0; }.push-status-banner__actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}.push-status-banner--info .push-status-banner__icon { color: var(--ez-peach-500); }.push-status-banner--warning .push-status-banner__icon { color: var(--ez-warning); }.push-status-banner--error .push-status-banner__icon { color: var(--ez-danger); }.push-status-banner--error {
  background: var(--ez-danger-bg);
  border-color: var(--ez-danger);
}.push-status-banner--error .push-status-banner__message strong {
  color: var(--ez-danger);
  font-weight: 700;
}.push-status-banner__message strong {
  display: block;
  margin-bottom: var(--ez-space-xs);
  font-size: 1.0625em;
}/* iOS-Safari-tab "add to home screen" steps: imperative instructions with a
 * styled em-dash marker (—) per item. list-style:none kills the default UA
 * bullet; the ::before pseudo paints the dash in the banner's accent colour
 * (red for error variant) so it reads as part of the warning, not generic
 * prose. */.push-status-banner__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
}.push-status-banner__steps li {
  position: relative;
  padding-left: 1.5em;
}.push-status-banner__steps li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
  opacity: 0.7;
  font-weight: 700;
}.push-status-banner--error .push-status-banner__steps li::before {
  color: var(--ez-danger);
  opacity: 1;
}/* ── Pre-service ordering: worker dialog, row chip, customer grid ── */.order-editor { display: flex; flex-direction: column; gap: var(--ez-space-md); }.order-lines { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.order-line {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--ez-space-sm);
  border: 1px solid var(--ez-line); border-radius: var(--ez-r-md);
  background: var(--ez-surface-sunken);
}.order-line-main { display: flex; align-items: center; gap: var(--ez-space-sm); padding: var(--ez-space-md); }.order-line-name { flex: 1 1 auto; font-weight: 600; color: var(--ez-peach-500); overflow-wrap: anywhere; }.order-qty { display: inline-flex; align-items: center; gap: 4px; }.order-qty-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line); background: var(--ez-surface);
  color: var(--ez-ink-700); cursor: pointer;
  transition: border-color 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out);
}.order-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }.order-qty-btn:hover:not(:disabled) { border-color: var(--ez-peach-500); color: var(--ez-peach-500); }.order-qty-val { min-width: 22px; text-align: center; font-weight: 700; color: var(--ez-text); }.order-line-price { min-width: 64px; text-align: right; font-weight: 600; color: var(--ez-text); }.order-line-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line); background: transparent;
  color: var(--ez-ink-600); cursor: pointer;
}.order-line-del:hover:not(:disabled) { border-color: var(--ez-peach-600); color: var(--ez-peach-600); }.order-line-comment { font-size: 13px; }.order-add { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.order-add-row { display: flex; gap: var(--ez-space-sm); align-items: flex-start; }.order-add-search { position: relative; flex: 1 1 auto; }.order-add-amount { width: 84px; flex: 0 0 auto; }.order-suggestions {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  background: var(--ez-surface); border: 1px solid var(--ez-line);
  border-radius: var(--ez-r-md); max-height: 240px; overflow-y: auto;
}.order-suggestions li { margin: 0; }.order-suggestions button {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: none; background: transparent; color: var(--ez-text);
  cursor: pointer; border-radius: var(--ez-r-sm); font-size: 14px;
}.order-suggestions button:hover { background: var(--ez-surface-sunken); color: var(--ez-peach-500); }.order-sum {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--ez-space-sm); border-top: 1px solid var(--ez-line);
  font-weight: 600; color: var(--ez-text);
}.order-sum-val { font-size: 18px; font-weight: 800; color: var(--ez-peach-500); }.order-notes-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ez-ink-700); }.queue-entry-order-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;
  padding: 1px 6px; border-radius: var(--ez-r-sm);
  background: var(--ez-surface-sunken); color: var(--ez-peach-500);
  font-weight: 700; font-size: 13px;
}.order-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ez-space-md);
}.order-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ez-line); border-radius: var(--ez-r-lg);
  background: var(--ez-surface);
}.order-card--active { border-color: var(--ez-peach-500); }.order-card-photo { aspect-ratio: 1 / 1; background: var(--ez-surface-sunken); }.order-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.order-card-nophoto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ez-ink-500); }.order-card-body { display: flex; flex-direction: column; gap: 2px; padding: var(--ez-space-sm); flex: 1 1 auto; }.order-card-name { font-weight: 600; color: var(--ez-text); font-size: 14px; line-height: 1.3; }.order-card-price { font-weight: 700; color: var(--ez-peach-500); font-size: 14px; }.order-card-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 var(--ez-space-sm) var(--ez-space-sm); padding: 8px;
  border-radius: var(--ez-r-md); border: 1px solid var(--ez-peach-500);
  background: transparent; color: var(--ez-peach-500); font-weight: 600; cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.order-card-add:hover:not(:disabled) { background: var(--ez-surface-sunken); border-color: var(--ez-peach-600); }.order-card-add:disabled { opacity: 0.5; cursor: not-allowed; }.order-card-qty { display: flex; align-items: center; justify-content: space-between; margin: 0 var(--ez-space-sm) var(--ez-space-sm); }.order-basket-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--ez-space-md); padding: var(--ez-space-md);
  border-radius: var(--ez-r-lg); background: var(--ez-surface-raised);
  border: 1px solid var(--ez-line); font-weight: 600; color: var(--ez-text);
  position: sticky; bottom: var(--ez-space-md);
}.order-basket-total { font-size: 18px; font-weight: 800; color: var(--ez-peach-500); }.order-basket-bar--button {
  width: 100%; cursor: pointer; text-align: left; font: inherit;
  transition: border-color 0.15s var(--ez-ease-out), background 0.15s var(--ez-ease-out);
}.order-basket-bar--button:hover { border-color: var(--ez-peach-500); background: var(--ez-surface-sunken); }.order-basket-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ez-text); }.basket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ez-space-sm); }.basket-item {
  display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "name name name" "photo main total";
  column-gap: var(--ez-space-md); row-gap: 10px; align-items: center;
  padding: var(--ez-space-md); border: 1px solid var(--ez-line); border-radius: var(--ez-r-lg);
  background: var(--ez-surface);
}.basket-item-name { grid-area: name; }.basket-item-photo { grid-area: photo; }.basket-item-main { grid-area: main; }.basket-item-total { grid-area: total; align-self: end; }.basket-item-photo {
  width: 52px; height: 52px; flex: 0 0 auto; overflow: hidden;
  border-radius: var(--ez-r-md); background: var(--ez-surface-sunken);
  display: flex; align-items: center; justify-content: center; color: var(--ez-ink-500);
}.basket-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.basket-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }.basket-item-name { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ez-text); overflow-wrap: anywhere; }.basket-item-unit { font-size: 12px; color: var(--ez-ink-700); }.basket-item-total { min-width: 68px; text-align: right; font-weight: 700; color: var(--ez-peach-500); font-variant-numeric: tabular-nums; }.basket-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ez-space-sm); padding: var(--ez-space-lg) 0; color: var(--ez-ink-500); }.order-summary { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.order-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ez-space-sm); }.order-summary-item {
  display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "name name name" "photo meta price";
  column-gap: var(--ez-space-md); row-gap: 8px; align-items: center;
  padding: var(--ez-space-md); border: 1px solid var(--ez-line); border-radius: var(--ez-r-lg); background: var(--ez-surface);
}.order-summary-name { grid-area: name; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ez-text); overflow-wrap: anywhere; }.order-summary-photo {
  grid-area: photo; width: 56px; height: 56px; overflow: hidden; border-radius: var(--ez-r-md);
  background: var(--ez-surface-sunken); display: flex; align-items: center; justify-content: center; color: var(--ez-ink-500);
}.order-summary-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.order-summary-meta { grid-area: meta; display: flex; flex-direction: column; gap: 2px; min-width: 0; }.order-summary-qty { font-weight: 700; color: var(--ez-peach-500); font-variant-numeric: tabular-nums; }.order-summary-unit { font-size: 12px; color: var(--ez-ink-700); font-variant-numeric: tabular-nums; }.order-summary-comment { font-size: 12px; color: var(--ez-ink-600); overflow-wrap: anywhere; }.order-summary-price { grid-area: price; align-self: end; font-weight: 800; color: var(--ez-text); font-variant-numeric: tabular-nums; white-space: nowrap; }.order-comments { display: flex; flex-direction: column; gap: var(--ez-space-sm); margin-top: var(--ez-space-md); }.order-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }.order-comment-item {
  padding: 6px var(--ez-space-sm); border-radius: var(--ez-r-md);
  background: var(--ez-surface-sunken); color: var(--ez-text); font-size: 14px; overflow-wrap: anywhere;
}.order-comment-add { display: flex; gap: var(--ez-space-sm); align-items: center; }.order-comment-add .input { flex: 1 1 auto; }.join-actions { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.join-action { display: flex; flex-direction: column; gap: 4px; }.join-action .btn { gap: 8px; }.join-action-label { flex: 0 1 auto; }.join-action-amount {
  margin-left: auto; padding-left: 10px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}.join-action-hint { font-size: 12px; color: var(--ez-ink-700); text-align: center; }.queue-entry-name--editable {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}.queue-entry-name--editable svg { color: var(--ez-ink-500); flex: 0 0 auto; opacity: 0.75; }.queue-entry-name--editable:hover svg { color: var(--ez-peach-500); opacity: 1; }.queue-entry-name-input { max-width: 240px; padding: 4px 8px; font-size: 15px; font-weight: 600; }/* Customer join page (mobile column) */.join-page { display: flex; flex-direction: column; gap: var(--ez-space-lg); }.join-hero { display: flex; flex-direction: column; gap: 6px; }.join-hero-title { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }.join-hero-hint { margin: 0; color: var(--ez-ink-700); font-size: 14px; line-height: 1.5; }.join-section-title {
  margin: 0 0 var(--ez-space-sm); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ez-ink-600);
}.join-menu { display: flex; flex-direction: column; }.join-details {
  padding: var(--ez-space-lg); border: 1px solid var(--ez-line); border-radius: var(--ez-r-lg);
  background: var(--ez-surface);
}.btn.btn-twoline {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px;
  min-height: 72px; padding: 12px 16px; white-space: normal; text-align: left; line-height: 1.25;
}.btn-twoline-label { display: block; width: 100%; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }.btn-twoline-meta { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 20px; font-size: 14px; font-weight: 600; opacity: 0.92; }.btn-twoline-meta svg { flex: 0 0 auto; }.btn-twoline-amount { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }.join-action-label { text-align: left; }.order-groups { display: flex; flex-direction: column; gap: var(--ez-space-lg); }.order-group { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.order-group-title {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--ez-text);
  padding-bottom: 6px; border-bottom: 1px solid var(--ez-line);
}.order-card { position: relative; transition: border-color 0.15s var(--ez-ease-out), box-shadow 0.15s var(--ez-ease-out); }.order-card--active { box-shadow: 0 0 0 2px var(--ez-peach-500) inset; }.order-card-photo { position: relative; }.order-card-badge {
  position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: var(--ez-r-pill); background: var(--ez-grad-btn); color: var(--ez-on-peach);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}.order-card-desc {
  font-size: 12px; line-height: 1.35; color: var(--ez-ink-600);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}.basket-fab {
  position: fixed; z-index: 40;
  left: max(16px, calc(50% - 224px));
  right: max(82px, calc(50% - 224px));
  bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  transform: translateY(50%);
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 12px 16px; border-radius: var(--ez-r-lg);
  background: var(--ez-grad-btn); color: var(--ez-on-peach); border: 0; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  font: inherit; font-weight: 700; text-align: left;
  transition: transform 0.15s var(--ez-ease-out), filter 0.15s var(--ez-ease-out);
}.basket-fab:hover { filter: brightness(1.04); }.basket-fab:active { transform: translateY(50%) scale(0.985); }@media (max-width: 640px) {
  .basket-fab { right: 70px; bottom: calc(36px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px; }
}.basket-fab-icon { position: relative; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.18); flex: 0 0 auto; }.basket-fab-count {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ez-r-pill);
  background: var(--ez-surface); color: var(--ez-peach-600); font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ez-peach-500);
}.basket-fab { opacity: 0.94; }.basket-fab-label { display: block; width: 100%; font-size: 16px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }.basket-fab-meta { display: flex; align-items: center; gap: 10px; width: 100%; }.basket-fab-items { flex: 1 1 auto; font-size: 14px; font-weight: 600; opacity: 0.92; }.basket-fab-total { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }.basket-item-controls { display: flex; align-items: center; gap: var(--ez-space-md); margin-top: 6px; }.basket-actions { display: flex; flex-direction: column; gap: var(--ez-space-sm); width: 100%; }.join-page--has-basket { padding-bottom: 116px; }.basket-sheet .modal-footer { padding: var(--ez-space-md) var(--ez-space-lg) var(--ez-space-lg); }.basket-sheet .modal-body { display: flex; flex-direction: column; gap: var(--ez-space-md); }.position-order { display: flex; flex-direction: column; gap: var(--ez-space-md); margin-top: var(--ez-space-xl); text-align: left; }.position-card {
  padding: var(--ez-space-lg); border: 1px solid var(--ez-line); border-radius: var(--ez-r-lg);
  background: var(--ez-surface); display: flex; flex-direction: column; gap: var(--ez-space-sm);
}.position-card-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ez-ink-600); }.position-card-hint { margin: 0; font-size: 12px; color: var(--ez-ink-600); }.position-card .order-comments { margin-top: 0; }.order-suggestions li.is-highlighted button { background: var(--ez-surface-sunken); color: var(--ez-peach-500); }.queue-entry-comment-lines { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 4px; }.queue-entry-comment-line { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--ez-text); overflow-wrap: anywhere; }.queue-entry-comment-line svg { flex: 0 0 auto; margin-top: 3px; color: var(--ez-ink-600); }.queue-entry-comment-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 2px 8px; border-radius: var(--ez-r-pill); border: 1px solid var(--ez-line);
  font-size: 12px; font-weight: 600; color: var(--ez-ink-700); background: var(--ez-surface-sunken);
}.position-page { display: flex; flex-direction: column; gap: var(--ez-space-lg); }.position-hero {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--ez-space-xl) var(--ez-space-lg); border-radius: var(--ez-r-lg);
  border: 1px solid var(--ez-line); background: var(--ez-surface);
}.position-hero--called { border-color: var(--ez-peach-500); background: var(--ez-surface-raised); }.position-hero-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ez-ink-600); }.position-hero-caption { font-size: 14px; color: var(--ez-ink-700); }.position-hero-number { font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--ez-text); font-variant-numeric: tabular-nums; }.position-hero-soon { margin: 6px 0 0; font-weight: 700; color: var(--ez-peach-500); }.position-hero-title { margin: 4px 0 0; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ez-peach-500); }.position-hero-desc { margin: 0; color: var(--ez-ink-700); }.position-terminal {
  display: flex; flex-direction: column; gap: var(--ez-space-sm); align-items: center;
  padding: var(--ez-space-xl) var(--ez-space-lg); border-radius: var(--ez-r-lg);
  border: 1px solid var(--ez-line); background: var(--ez-surface);
}.position-terminal--done { border-color: var(--ez-peach-500); }.position-terminal-title { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ez-text); }.position-terminal--done .position-terminal-title { color: var(--ez-peach-500); }.position-terminal-desc { margin: 0; color: var(--ez-ink-700); }.position-order { margin-top: 0; }.position-leave { display: flex; justify-content: center; }/* ── Customer order page, rebuilt ────────────────────────────── */.join { display: flex; flex-direction: column; gap: 20px; padding-bottom: 132px; }.join--basket { padding-bottom: 248px; }.join-head { display: flex; flex-direction: column; gap: 6px; }.join-head-title { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }.join-head-hint { margin: 0; color: var(--ez-ink-700); font-size: 14px; line-height: 1.5; }.join-intro { margin: 0; color: var(--ez-ink-700); }.menu-tools {
  position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; gap: 10px;
  margin: 0 calc(-1 * var(--ez-space-lg)); padding: 10px var(--ez-space-lg);
  background: var(--ez-bg); border-bottom: 1px solid var(--ez-line);
}.menu-filter { position: relative; display: flex; align-items: center; }.menu-filter-icon { position: absolute; left: 14px; color: var(--ez-ink-500); pointer-events: none; }.menu-filter-input {
  width: 100%; min-height: 46px; padding: 0 44px 0 42px; border-radius: 14px;
  border: 1.5px solid var(--ez-line-strong); background: var(--ez-surface); color: var(--ez-text);
  font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none;
}.menu-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }.menu-filter-input:focus { outline: none; border-color: var(--ez-peach-500); }.menu-filter-clear {
  position: absolute; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: var(--ez-surface-sunken); color: var(--ez-ink-700); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}.menu-filter-clear:hover { color: var(--ez-peach-500); }.menu-empty { margin: 24px 0; text-align: center; color: var(--ez-ink-600); }.chipbar {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-padding-left: 32px;
  margin: 0 calc(-1 * var(--ez-space-lg)); padding: 0 var(--ez-space-lg) 0 32px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
}.chipbar--picker { margin: 0 0 var(--ez-space-md); padding: 0; scroll-padding-left: 0; }.chipbar::after { content: ''; flex: 0 0 48px; }.chipbar::-webkit-scrollbar { display: none; }.chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--ez-r-pill); border: 1px solid var(--ez-line);
  background: var(--ez-surface); color: var(--ez-ink-700); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.chip--active { background: var(--ez-grad-btn); color: var(--ez-on-peach); border-color: transparent; }.menu { display: flex; flex-direction: column; gap: 24px; }.menu-group { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 130px; }.menu-group-title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ez-text); }.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }.menu-row {
  display: grid; grid-template-columns: 64px 1fr auto; column-gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--ez-line);
}.menu-row:last-child { border-bottom: 0; }.menu-row-photo {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--ez-surface-sunken);
  display: flex; align-items: center; justify-content: center; color: var(--ez-ink-500);
}.menu-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.menu-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.menu-row-name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ez-text); overflow-wrap: anywhere; }.menu-row-desc { font-size: 12px; line-height: 1.4; color: var(--ez-ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }.menu-row-price { font-size: 14px; font-weight: 700; color: var(--ez-peach-500); font-variant-numeric: tabular-nums; }.menu-row-action { display: flex; align-items: center; justify-content: flex-end; }.menu-add {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ez-peach-500); background: transparent; color: var(--ez-peach-500);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out);
}.menu-add:hover { background: var(--ez-peach-500); color: var(--ez-on-peach); }.menu-stepper {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--ez-r-pill);
  background: var(--ez-grad-btn); color: var(--ez-on-peach);
}.menu-stepper-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: inherit;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}.menu-stepper-btn:hover { background: rgba(0, 0, 0, 0.12); }.menu-stepper-val { min-width: 22px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }.menu-row--active .menu-row-name { color: var(--ez-peach-500); }.act {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 0 16px;
  border-radius: 16px; border: 1.5px solid transparent; cursor: pointer; text-align: left; font: inherit;
  transition: transform 0.12s var(--ez-ease-out), filter 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}.act:active:not(:disabled) { transform: scale(0.98); }.act:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }.act--primary { background: var(--ez-grad-btn); color: var(--ez-on-peach); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }.act--primary:hover:not(:disabled) { filter: brightness(1.04); }.act--secondary { background: var(--ez-surface); color: var(--ez-text); border-color: var(--ez-line-strong); }.act--secondary:hover:not(:disabled) { border-color: var(--ez-peach-500); }.act-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 11px 0; }.act-label { font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }.act-meta { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; opacity: 0.85; }.act-meta svg { flex: 0 0 auto; margin-top: 1px; }.act-meta-text { overflow-wrap: anywhere; }.act--secondary .act-meta { color: var(--ez-ink-600); opacity: 1; }.act--compact .act-meta { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: 1; }.act--compact.act--secondary .act-meta { font-size: 13px; font-weight: 600; }.act-amount {
  flex: 0 0 auto; padding: 0 12px; height: 48px; display: inline-flex; align-items: center; border-radius: 12px;
  background: rgba(26, 13, 4, 0.10); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}.act--secondary .act-amount { background: var(--ez-surface-sunken); }.act-chevron { flex: 0 0 auto; opacity: 0.9; }.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none;
  padding: 12px var(--ez-space-lg) calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--ez-bg) 40%);
}.bottombar-inner { pointer-events: auto; max-width: 448px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }.basket-row-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px;
  border-radius: 14px; border: 1.5px solid var(--ez-line-strong); background: var(--ez-surface); color: var(--ez-text);
  font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left;
}.basket-row-btn svg { flex: 0 0 auto; color: var(--ez-peach-500); }.basket-row-btn-label { flex: 1 1 auto; }.basket-row-btn-meta { font-size: 13px; font-weight: 600; color: var(--ez-ink-600); white-space: nowrap; font-variant-numeric: tabular-nums; }.basket-row-btn:hover { border-color: var(--ez-peach-500); }.join-sheet .modal-body, .basket-sheet .modal-body { display: flex; flex-direction: column; gap: 16px; }.join-sheet-summary {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 16px;
  border-radius: 14px; background: var(--ez-surface-sunken); font-weight: 700;
}.join-sheet-summary-total { font-size: 17px; font-weight: 800; color: var(--ez-peach-500); font-variant-numeric: tabular-nums; }.join-sheet-actions { display: flex; flex-direction: column; gap: 12px; }.basket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }.basket-row {
  display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "name name name" "photo main side";
  column-gap: 14px; row-gap: 10px; align-items: center;
  padding: 14px; border: 1px solid var(--ez-line); border-radius: 16px; background: var(--ez-surface);
}.basket-row-name { grid-area: name; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ez-text); overflow-wrap: anywhere; }.basket-row-photo { grid-area: photo; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--ez-surface-sunken); display: flex; align-items: center; justify-content: center; color: var(--ez-ink-500); }.basket-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }.basket-row-main { grid-area: main; display: flex; flex-direction: column; gap: 8px; min-width: 0; align-items: flex-start; }.basket-row-unit { font-size: 12px; color: var(--ez-ink-700); font-variant-numeric: tabular-nums; }.basket-row-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; align-self: stretch; }.basket-row-total { font-size: 15px; font-weight: 800; color: var(--ez-text); font-variant-numeric: tabular-nums; white-space: nowrap; }.basket-row-del {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ez-line); background: transparent; color: var(--ez-ink-600);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}.basket-row-del:hover { border-color: var(--ez-peach-600); color: var(--ez-peach-600); }.basket-note { display: flex; flex-direction: column; gap: 6px; }.basket-note-label { font-size: 13px; font-weight: 600; color: var(--ez-ink-700); }.basket-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 14px; background: var(--ez-surface-sunken); font-weight: 700; }.basket-total-val { font-size: 18px; font-weight: 800; color: var(--ez-peach-500); font-variant-numeric: tabular-nums; }.basket-actions { display: flex; flex-direction: column; gap: 12px; }.basket-clear {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  border: 0; background: transparent; color: var(--ez-ink-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}.basket-clear:hover { color: var(--ez-peach-600); }.basket-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0 8px; color: var(--ez-ink-500); }.basket-empty .act { align-self: stretch; }/* Inline full order list on the top queue-entry rows */.queue-entry-order-lines { display: flex; flex-direction: column; gap: 2px; width: 100%; }.queue-entry-order-lineitem { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }.queue-entry-order-lineitem .oli-qty { font-weight: 700; color: var(--ez-peach-500); min-width: 26px; }.queue-entry-order-lineitem .oli-name { flex: 1 1 auto; color: var(--ez-peach-500); font-weight: 600; overflow-wrap: anywhere; }.queue-entry-order-lineitem .oli-price { color: var(--ez-ink-700); font-variant-numeric: tabular-nums; white-space: nowrap; }.queue-entry-order-linetotal { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ez-text); }/* === Product photo lightbox === */.ez-photo-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  border-radius: inherit;
  cursor: zoom-in;
}.ez-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ez-lightbox-scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
  animation: ez-lightbox-in 0.2s var(--ez-ease-out);
}@keyframes ez-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}.ez-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 94vw;
  max-height: 94vh;
  cursor: default;
}.ez-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: calc(94vh - 40px);
  object-fit: contain;
  border-radius: var(--ez-r-md);
  background: var(--ez-peach-50);
  box-shadow: var(--ez-shadow-xl);
  animation: ez-lightbox-zoom 0.25s var(--ez-ease-out);
}@keyframes ez-lightbox-zoom {
  from { transform: scale(0.96); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}.ez-lightbox__caption {
  font-family: var(--ez-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ez-peach-200);
}.ez-lightbox__close,
.ez-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ez-photo-control-bg);
  color: var(--ez-photo-control-fg);
  border: 1px solid var(--ez-glass-border);
  cursor: pointer;
  transition: background 0.2s var(--ez-ease-out);
}.ez-lightbox__close:hover,
.ez-lightbox__nav:hover { background: var(--ez-photo-control-bg-hover); }.ez-lightbox__close { top: 20px; right: 20px; }.ez-lightbox__nav { top: 50%; transform: translateY(-50%); }.ez-lightbox__nav--prev { left: 20px; }.ez-lightbox__nav--next { right: 20px; }@media (prefers-reduced-motion: reduce) {
  .ez-lightbox, .ez-lightbox__img { animation: none; }
}/* ── Sensor tiles ──────────────────────────────────────────────── */.sensor-gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ez-space-md);
}.sensor-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  min-width: 0;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}.sensor-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ez-text-dim) 10%, transparent), transparent 60%);
}.sensor-tile[data-state="ok"]::before {
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ez-success) 14%, transparent), transparent 60%);
}.sensor-tile[data-state="warning"]::before {
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ez-warning) 16%, transparent), transparent 60%);
}.sensor-tile[data-state="critical"]::before {
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ez-error) 18%, transparent), transparent 60%);
}.sensor-tile:hover {
  transform: translateY(-2px);
}.sensor-tile > * {
  position: relative;
}.sensor-tile-top {
  display: flex;
  align-items: center;
}.sensor-tile-name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ez-text);
  overflow-wrap: anywhere;
  text-wrap: balance;
}.sensor-tile-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ez-on-peach);
}.sensor-tile-pill[data-state="ok"] { background: var(--ez-success); }.sensor-tile-pill[data-state="warning"] { background: var(--ez-warning); }.sensor-tile-pill[data-state="critical"] { background: var(--ez-error); }.sensor-tile-pill[data-state="stale"],
.sensor-tile-pill[data-state="noData"] { background: var(--ez-text-dim); }.sensor-tile-body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--ez-space-md);
  margin-top: var(--ez-space-xs);
}.sensor-thermo {
  width: 64px;
  height: auto;
  display: block;
}.sensor-thermo-glass {
  fill: var(--ez-surface-sunken);
  stroke: var(--ez-line);
  stroke-width: 1;
}.sensor-thermo-zone {
  fill: var(--ez-success);
  fill-opacity: 0.22;
}.sensor-thermo-shine {
  fill: var(--ez-surface-raised);
}.sensor-thermo-tick {
  stroke: var(--ez-text-dim);
  stroke-width: 0.8;
}.sensor-thermo-tick-major {
  stroke: var(--ez-text);
  stroke-width: 1.2;
}.sensor-thermo-label {
  font-size: 7px;
  fill: var(--ez-text-dim);
  font-variant-numeric: tabular-nums;
}.sensor-thermo-label-major {
  fill: var(--ez-text);
  font-weight: 600;
}.sensor-thermo-column {
  transition: y 0.6s ease, height 0.6s ease;
}.sensor-tile-reading {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  min-width: 0;
}.sensor-tile-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}.sensor-tile-number {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ez-text);
}.sensor-tile-unit {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ez-text-muted);
}.sensor-tile-target {
  display: flex;
  flex-direction: column;
  gap: 1px;
}.sensor-tile-target-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ez-text-dim);
}.sensor-tile-target-range {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ez-text);
  font-variant-numeric: tabular-nums;
}.sensor-tile-spark {
  height: 30px;
  min-width: 0;
}.sensor-tile-spark svg {
  width: 100%;
  height: 30px;
  display: block;
}.sensor-tile-spark-area {
  fill-opacity: 0.16;
}.sensor-tile-spark-line {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}.sensor-tile-spark-empty {
  font-size: 0.72rem;
  color: var(--ez-text-dim);
}.sensor-tile-age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ez-text-muted);
  font-variant-numeric: tabular-nums;
}.sensor-tile-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ez-text-dim);
  flex: none;
}.sensor-tile-dot[data-fresh="true"] {
  background: var(--ez-success);
  animation: sensor-tile-pulse 2s ease-out infinite;
}@keyframes sensor-tile-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ez-success) 55%, transparent); }
  100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ez-success) 0%, transparent); }
}.sensor-tile-vitals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ez-space-xs) 14px;
  margin-top: var(--ez-space-xs);
  padding-top: var(--ez-space-sm);
  border-top: 1px solid var(--ez-line);
}.sensor-vital {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ez-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s ease;
}.sensor-vital svg {
  color: var(--ez-text-dim);
  flex: none;
  transition: color 0.2s ease;
}.sensor-vital-unit {
  font-weight: 500;
  color: var(--ez-text-dim);
}.sensor-vital-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--ez-text-dim);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-text-dim) 16%, transparent);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}.sensor-vital[data-state="ok"] .sensor-vital-dot {
  background: var(--ez-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-success) 22%, transparent);
}.sensor-vital[data-state="neutral"] .sensor-vital-dot {
  background: var(--ez-info);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-info) 22%, transparent);
}.sensor-vital[data-state="warning"] .sensor-vital-dot {
  background: var(--ez-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-warning) 28%, transparent);
}.sensor-vital[data-state="critical"] .sensor-vital-dot {
  background: var(--ez-error);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-error) 32%, transparent);
  animation: sensor-vital-pulse 2.4s ease-out infinite;
}.sensor-vital[data-state="warning"],
.sensor-vital[data-state="critical"] {
  color: var(--ez-text);
}.sensor-vital[data-state="warning"] svg { color: var(--ez-warning); }.sensor-vital[data-state="critical"] svg { color: var(--ez-error); }.sensor-vital[data-state="stale"],
.sensor-vital[data-state="noData"] {
  color: var(--ez-text-dim);
}@keyframes sensor-vital-pulse {
  0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ez-error) 45%, transparent); }
  100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ez-error) 0%, transparent); }
}@media (prefers-reduced-motion: reduce) {
  .sensor-tile,
  .sensor-thermo-column,
  .sensor-tile-dot[data-fresh="true"],
  .sensor-vital,
  .sensor-vital svg,
  .sensor-vital-dot {
    transition: none;
    animation: none;
  }
}.sensor-live-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ez-space-xs);
  color: var(--ez-text-muted);
  font-size: 0.85rem;
}.sensor-tile-top {
  justify-content: space-between;
  gap: var(--ez-space-sm);
}.sensor-tile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ez-line);
  background: transparent;
  color: var(--ez-text-dim);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}.sensor-tile-action:hover,
.sensor-tile-action:focus-visible {
  color: var(--ez-primary);
  border-color: var(--ez-primary);
  background: color-mix(in srgb, var(--ez-primary) 12%, transparent);
  outline: none;
}.sensor-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
  height: 100%;
  min-height: 0;
  padding: var(--ez-space-md) var(--ez-space-lg) var(--ez-space-lg);
  box-sizing: border-box;
}.sensor-diagram-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ez-space-sm);
  align-items: flex-end;
  flex-shrink: 0;
}.sensor-diagram-controls .form-group {
  margin: 0;
  min-width: 160px;
}.sensor-diagram-quick {
  display: flex;
  gap: var(--ez-space-xs);
  flex-wrap: wrap;
  padding-bottom: 2px;
}.sensor-diagram-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
  padding: var(--ez-space-sm) var(--ez-space-md);
  border-radius: var(--ez-radius-sm);
  border: 1px solid var(--ez-line);
  background: color-mix(in srgb, var(--ez-text-dim) 8%, transparent);
  flex-shrink: 0;
}.sensor-diagram-readout[data-state="ok"] { background: color-mix(in srgb, var(--ez-success) 12%, transparent); }.sensor-diagram-readout[data-state="warning"] { background: color-mix(in srgb, var(--ez-warning) 14%, transparent); }.sensor-diagram-readout[data-state="critical"] { background: color-mix(in srgb, var(--ez-error) 14%, transparent); }.sensor-diagram-readout-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ez-space-sm) var(--ez-space-md);
}.sensor-diagram-readout-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ez-text-dim);
}.sensor-diagram-readout-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}.sensor-diagram-readout-number {
  font-family: var(--ez-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ez-text);
  font-variant-numeric: tabular-nums;
}.sensor-diagram-readout-unit {
  font-size: 1rem;
  color: var(--ez-text-dim);
}.sensor-diagram-readout-time {
  font-size: 0.9rem;
  color: var(--ez-text-dim);
  font-variant-numeric: tabular-nums;
}.sensor-diagram-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ez-space-md) var(--ez-space-lg);
  margin: 0;
}.sensor-diagram-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}.sensor-diagram-stats dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ez-text-dim);
}.sensor-diagram-stats dd {
  margin: 0;
  font-weight: 600;
  color: var(--ez-text);
  font-variant-numeric: tabular-nums;
}.sensor-diagram-modal .modal-body {
  overflow: auto;
}.sensor-diagram-chart {
  flex: none;
  width: 100%;
  height: clamp(280px, 52vh, 520px);
  border-radius: var(--ez-radius-sm);
  outline: none;
  cursor: col-resize;
  user-select: none;
  touch-action: pan-y;
  overflow: hidden;
}.sensor-diagram-chart:focus-visible {
  box-shadow: 0 0 0 2px var(--ez-primary);
}.sensor-diagram-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}.sensor-diagram-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ez-text-dim);
  flex-shrink: 0;
}@media (max-width: 640px) {
  .sensor-diagram {
    padding: var(--ez-space-sm) var(--ez-space-md) var(--ez-space-md);
  }
  .sensor-diagram-controls .form-group {
    flex: 1 1 45%;
    min-width: 0;
  }
  .sensor-diagram-readout-number {
    font-size: 1.5rem;
  }
}/* === Compliance pages === */.badge-success { background: var(--ez-success-soft); color: var(--ez-success-text); border-color: var(--ez-success-border); }.badge-warning { background: var(--ez-warning-soft); color: var(--ez-warning-text); border-color: var(--ez-warning-border); }.badge-muted   { background: var(--ez-tint-soft); color: var(--ez-ink-700); border-color: var(--ez-line); }.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ez-space-md); }@media (max-width: 640px) { .form-grid-2 { grid-template-columns: minmax(0, 1fr); } }.modal.modal-wide { max-width: 820px; }.search-select { position: relative; }.search-select-input { padding-right: 38px; }.search-select-caret {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--ez-text-muted);
  pointer-events: none;
}.search-select-dropdown {
  position: fixed;
  max-height: 320px;
  overflow-y: auto;
  background: var(--ez-modal-bg, var(--ez-surface-glass));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  border-radius: var(--ez-r-md);
  box-shadow: var(--ez-shadow-glass), var(--ez-shadow-lg);
  padding: 4px;
  list-style: none;
  margin: 0;
  z-index: 2000;
  animation: ez-fade-in 0.15s var(--ez-ease-out);
}.search-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--ez-r-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--ez-font-body);
  font-size: 14px;
  color: var(--ez-text-muted);
  text-align: left;
  transition: background 0.12s var(--ez-ease-out);
}.search-select-option-active { background: var(--ez-accent-soft); color: var(--ez-text); }.search-select-option-selected { color: var(--ez-link-nav); font-weight: 600; }.search-select-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }.search-select-option-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.search-select-option-desc { font-size: 12px; color: var(--ez-ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.search-select-check { color: var(--ez-peach-400); flex-shrink: 0; }.search-select-empty { padding: 10px 12px; font-size: 13px; color: var(--ez-text-muted); text-align: center; }.stat-card--button {
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color 0.2s var(--ez-ease-out), background 0.2s var(--ez-ease-out), transform 0.2s var(--ez-ease-out);
}.stat-card--button:hover { border-color: var(--ez-peach-400); transform: translateY(-1px); }.stat-card.is-selected { border-color: var(--ez-accent-border-strong); background: var(--ez-accent-soft-strong); }.stat-card-value--error { color: var(--ez-danger-text); }.stat-card-value--warning { color: var(--ez-warning-text); }.stat-card-sub { font-size: 13px; color: var(--ez-ink-600); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }.stat-card-sub a, .stat-card-sub .link-button { color: var(--ez-link); font-weight: 600; }.stat-card-sub .link-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }.cmp-sub { display: block; font-size: 13px; font-weight: 400; color: var(--ez-ink-600); }.cmp-dim { color: var(--ez-ink-500); font-size: 13px; }.cmp-muted { color: var(--ez-ink-600); }.cmp-badge-block { display: inline-block; margin-top: 4px; }.cmp-area { display: inline-flex; align-items: center; gap: 8px; color: var(--ez-cream); font-weight: 500; }.cmp-area svg { color: var(--ez-peach-400); flex-shrink: 0; }.cmp-area--link { color: var(--ez-link); }.cmp-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.cmp-chips .chip { padding: 0 14px; height: 36px; font-family: var(--ez-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }.cmp-chips .chip.chip--active { background: var(--ez-accent-soft-strong); border-color: var(--ez-accent-border-strong); color: var(--ez-peach-200); box-shadow: none; }.cmp-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--ez-line); background: var(--ez-surface-raised); }.cmp-toolbar-total { margin-left: auto; font-family: var(--ez-font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ez-text-muted); white-space: nowrap; }.cmp-steps { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; }.cmp-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ez-ink-500); white-space: nowrap; }.cmp-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ez-pill-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ez-font-mono);
  font-size: 11px;
  color: var(--ez-ink-700);
  flex-shrink: 0;
}.cmp-step.is-done { color: var(--ez-success-text); }.cmp-step.is-done .cmp-step-dot { background: var(--ez-success-soft); border-color: var(--ez-success-border); color: var(--ez-success-text); }.cmp-step.is-current { color: var(--ez-peach-200); }.cmp-step.is-current .cmp-step-dot { background: var(--ez-grad-btn); border-color: transparent; color: var(--ez-on-peach); }.cmp-step-line { width: 20px; height: 1px; background: var(--ez-line-strong); margin: 0 8px; flex-shrink: 0; }.cmp-check-list { display: flex; flex-direction: column; gap: 12px; }.cmp-check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ez-cream); flex-wrap: wrap; }.cmp-check-box {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ez-pill-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ez-success-text);
}.cmp-check.is-done .cmp-check-box { background: var(--ez-success-soft); border-color: var(--ez-success-border); }.cmp-check-link { margin-left: auto; color: var(--ez-link); font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; }.cmp-check-link:hover { color: var(--ez-link-hover); }.cmp-note { font-size: 14px; color: var(--ez-ink-700); line-height: 1.55; }.cmp-note a { color: var(--ez-link); font-weight: 600; }.cmp-channel-badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }.cmp-lead-input { width: 96px; }.cmp-lead-input .input { min-height: 40px; padding: 8px 14px; }.cmp-rule-table .datagrid-td { vertical-align: top; }.cmp-cards { display: flex; flex-direction: column; gap: var(--ez-space-lg); }.cmp-card { display: flex; flex-direction: column; gap: var(--ez-space-md); }.cmp-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-space-md); flex-wrap: wrap; }.cmp-card-label { font-family: var(--ez-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ez-peach-300); }.cmp-card h3 { margin: 6px 0 0; font-family: var(--ez-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }.cmp-card-actions { display: flex; gap: 12px; flex-wrap: wrap; }.cmp-year-summary { display: flex; gap: var(--ez-space-xl); align-items: stretch; flex-wrap: wrap; padding: 20px 28px; }.cmp-year-summary-col { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }.cmp-year-summary-sep { width: 1px; background: var(--ez-line); align-self: stretch; }.cmp-expanded { display: flex; flex-direction: column; gap: var(--ez-space-md); padding: 8px 0 8px 40px; }.cmp-expanded-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-space-md); flex-wrap: wrap; }.cmp-inline-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }.cmp-inline-form .form-group { flex: 1 1 140px; min-width: 0; }.cmp-inline-form .form-group--narrow { flex: 0 1 120px; }.cmp-inline-form .form-group--wide { flex: 2 1 200px; }.cmp-inline-form .btn { min-height: 48px; }.cmp-attachment { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }.ez-imagefield { display: flex; align-items: center; gap: var(--ez-space-md); flex-wrap: wrap; }.ez-imagefield__frame {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px dashed var(--ez-line-strong);
  background: var(--ez-tint-soft);
  color: var(--ez-text-dim);
}.ez-imagefield__frame--round { border-radius: 50%; }.ez-imagefield__frame--square { border-radius: var(--ez-r-sm); }.ez-imagefield__frame img { width: 100%; height: 100%; object-fit: cover; }.ez-imagefield__frame:has(img) { border-style: solid; border-color: var(--ez-glass-border); }.ez-imagefield__body { display: flex; flex-direction: column; gap: var(--ez-space-xs); min-width: 0; flex: 1 1 200px; }.ez-imagefield__actions { display: flex; flex-wrap: wrap; gap: var(--ez-space-sm); }.ez-chipselect { display: flex; flex-wrap: wrap; gap: var(--ez-space-sm); }.ez-chipselect__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ez-space-sm);
  min-height: 40px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--ez-r-pill);
  border: 1px solid var(--ez-line);
  background: var(--ez-tint-soft);
  color: var(--ez-text);
  font-size: 14px;
  text-align: left;
  transition: border-color 0.15s var(--ez-ease-out), background 0.15s var(--ez-ease-out);
}.ez-chipselect__chip:hover:not(:disabled) { border-color: var(--ez-accent-border); background: var(--ez-accent-soft); }.ez-chipselect__chip:focus-visible { outline: 2px solid var(--ez-accent-border-strong); outline-offset: 2px; }.ez-chipselect__chip:disabled { opacity: 0.5; cursor: default; }.ez-chipselect__chip.is-on { border-color: var(--ez-accent-border-strong); background: var(--ez-accent-soft-strong); }.ez-chipselect__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ez-line-strong);
  background: var(--ez-surface);
  color: var(--ez-on-peach);
}.ez-chipselect__chip.is-on .ez-chipselect__mark { background: var(--ez-grad-btn); border-color: transparent; }.ez-chipselect__detail { color: var(--ez-text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }.ez-chipselect.has-error .ez-chipselect__chip { border-color: var(--ez-danger-border); }.cmp-found-card { padding: 16px 20px; border-radius: var(--ez-r-md); background: var(--ez-accent-soft); border: 1px solid var(--ez-accent-border); display: flex; flex-direction: column; gap: 4px; }.cmp-trace-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }.cmp-trace-form .form-group { flex: 1 1 260px; max-width: 420px; }.cmp-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }.cmp-page-title { display: flex; flex-direction: column; gap: 6px; }.cmp-crumb { font-family: var(--ez-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ez-ink-500); }.cmp-tab-panel { display: flex; flex-direction: column; gap: var(--ez-space-xl); }.cmp-plain-table { width: 100%; border-collapse: collapse; font-size: 14px; }.cmp-plain-table th { height: 40px; padding: 0 12px; text-align: left; border-bottom: 1px solid var(--ez-line-strong); font-family: var(--ez-font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ez-peach-300); }.cmp-plain-table td { padding: 8px 12px; border-bottom: 1px solid var(--ez-line); color: var(--ez-ink-800); vertical-align: middle; }.cmp-plain-table td.r, .cmp-plain-table th.r { text-align: right; white-space: nowrap; width: 1%; }.stat-card--button { width: 100%; }.cmp-check-link.link-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--ez-link); }.ez-notice {
  margin: 0;
  padding: var(--ez-space-sm) var(--ez-space-md);
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line-strong);
  background: var(--ez-tint-soft);
  color: var(--ez-text);
  font-size: 14px;
  line-height: 1.5;
}.ez-notice--info { background: var(--ez-info-soft); border-color: var(--ez-info-border); }.ez-notice--danger { background: var(--ez-danger-bg); border-color: var(--ez-danger-border); }.ez-issue-list { margin: var(--ez-space-xs) 0 0; padding-left: var(--ez-space-md); list-style: disc; display: flex; flex-direction: column; gap: 2px; }.notif-mandatory { display: inline-flex; align-items: center; gap: 6px; color: var(--ez-text-dim); }.notif-templates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ez-space-xs) var(--ez-space-sm);
  margin-top: var(--ez-space-md);
  padding-top: var(--ez-space-sm);
  border-top: 1px solid var(--ez-line);
}.notif-templates__label { font-size: 13px; color: var(--ez-text-muted); margin-right: var(--ez-space-xs); }.notif-templates .btn { gap: 6px; }.ez-template-editor { display: flex; flex-direction: column; gap: var(--ez-space-md); }.ez-template-editor__meta { display: flex; align-items: center; gap: var(--ez-space-sm); flex-wrap: wrap; }.ez-template-editor__meta .caption-lg { margin: 0; }.ez-placeholder-chips { display: flex; flex-wrap: wrap; gap: var(--ez-space-xs); }.ez-placeholder-chip { font-family: var(--ez-font-mono); font-size: 12px; padding: 6px 10px; }.ez-template-actions { display: flex; flex-wrap: wrap; gap: var(--ez-space-sm); }.ez-template-actions .btn { gap: 6px; }.ez-template-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ez-space-sm); flex-wrap: wrap; width: 100%; }.ez-template-footer .btn { gap: 6px; }.ez-template-preview { display: flex; flex-direction: column; gap: var(--ez-space-sm); }.ez-template-preview__head { display: flex; flex-direction: column; gap: 2px; }.ez-template-preview__subject { font-size: 14px; font-weight: 600; color: var(--ez-text); overflow-wrap: anywhere; }.ez-template-preview__frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--ez-paper-border);
  border-radius: var(--ez-r-sm);
  background: var(--ez-paper);
}.ez-template-preview__sms {
  margin: 0;
  padding: var(--ez-space-md);
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-line-strong);
  background: var(--ez-tint-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
}.product-menu-item--unavailable { color: var(--ez-text-muted); }.product-menu-item--unavailable strong,
.product-menu-item--unavailable .flex > span { font-weight: 400; text-decoration: line-through; }.product-menu-item--unavailable .body-text { color: var(--ez-text-muted); }
/* === Dashboard Layout === */
.dashboard-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: transparent;
  position: relative;
}
.dashboard-layout-main {
  display: grid;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  min-width: 0;
}
.dashboard-layout-content {
  padding: var(--ez-space-lg) var(--ez-space-2xl);
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

/* Per-page wrapper used by DashboardHomePage, QueueDetailPage, etc.
   No max-width — pages fill the dashboard content area; the container's
   padding provides the gutter. */
.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-2xl);
  width: 100%;
}
.dashboard-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-lg);
  flex-wrap: wrap;
}
/* Action-bar pattern used by page headers and inline action rows. On phones
   below 600px the children stack column-wise and any contained .btn fills the
   row width so the bar reads as a clean stack instead of an uneven wrap. */
.responsive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ez-space-sm);
}
@media (max-width: 600px) {
  .responsive-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .responsive-actions > .btn { width: 100%; }
}
.dashboard-page section {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-lg);
}
.dashboard-page section h2.h2,
.dashboard-page section .h2 {
  margin-bottom: 0;
}

/* Two-column wrapper for pages that show a hints sidebar. Main page fills
   available horizontal space; <PageHints/> hugs the right edge. Hints panel
   has a soft min/max range so it stays comfortable across viewport widths.
   Stacks vertically below the @media breakpoint. */
.page-with-hints {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 360px);
  gap: var(--ez-space-2xl);
  align-items: start;
  width: 100%;
  transition: grid-template-columns 0.3s var(--ez-ease-out), gap 0.3s var(--ez-ease-out);
}
.page-with-hints:has(> .page-hints.is-collapsed) {
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: var(--ez-space-lg);
}
.page-with-hints > .dashboard-page {
  min-width: 0;
}
.page-hints {
  position: sticky;
  top: var(--ez-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
  padding: var(--ez-space-lg);
  border-radius: var(--ez-radius-lg);
  background: var(--ez-surface-raised);
  border: 1px solid var(--ez-line);
  animation: page-hints-in 0.28s var(--ez-ease-out);
}
@keyframes page-hints-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
.page-hints.is-collapsed {
  padding: 0;
  background: transparent;
  border: 0;
  align-items: center;
}
.page-hints__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-hints__icon {
  color: var(--ez-peach-500);
  flex-shrink: 0;
}
.page-hints__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ez-ink-700);
}
.page-hints__collapse {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ez-ink-600);
  flex-shrink: 0;
  transition: background 0.2s var(--ez-ease-out), color 0.2s var(--ez-ease-out);
}
.page-hints__collapse:hover {
  background: var(--ez-accent-soft);
  color: var(--ez-peach-200);
}
.page-hints__collapse-mobile { display: none; }
.page-hints__expand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 44px;
  padding: 12px 0 16px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-btn-outline-bg);
  border: 1px solid var(--ez-btn-outline-border);
  color: var(--ez-peach-300);
  transition: border-color 0.2s var(--ez-ease-out), box-shadow 0.2s var(--ez-ease-out), transform 0.2s var(--ez-ease-out);
}
.page-hints__expand:hover {
  border-color: var(--ez-peach-400);
  box-shadow: var(--ez-glow-soft);
  transform: translateY(-1px);
}
.page-hints__expand-label {
  writing-mode: vertical-rl;
  font-family: var(--ez-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ez-ink-600);
  max-height: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-hints__list {
  margin: 0;
  padding-left: var(--ez-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-sm);
  list-style: disc;
}
.page-hints__item {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ez-ink-500);
}
@media (prefers-reduced-motion: reduce) {
  .page-with-hints { transition: none; }
  .page-hints { animation: none; }
}
@media (max-width: 1024px) {
  .page-with-hints,
  .page-with-hints:has(> .page-hints.is-collapsed) {
    grid-template-columns: 1fr;
    gap: var(--ez-space-2xl);
  }
  .page-hints {
    position: static;
    animation: none;
  }
  .page-hints.is-collapsed { align-items: stretch; }
  .page-hints__expand {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
  }
  .page-hints__expand-label {
    writing-mode: horizontal-tb;
    max-height: none;
    font-family: var(--ez-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ez-cream);
  }
  .page-hints__collapse-desktop { display: none; }
  .page-hints__collapse-mobile { display: inline; }
}

.sidebar {
  grid-row: 1 / -1;
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0 var(--ez-space-md) var(--ez-space-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-sm);
  padding: 0 10px;
  height: 64px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-pill-bg);
  border: 1px solid var(--ez-pill-border);
  color: var(--ez-cream);
  flex-shrink: 0;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}
.sidebar-close:hover {
  background: rgba(244, 165, 116, 0.16);
  border-color: rgba(244, 165, 116, 0.45);
}
/* Desktop-only collapse toggle. Sits in the logo bar and flips between the
   PanelLeftClose / PanelLeftOpen icons. Hidden on mobile (the drawer pattern
   doesn't need a collapsed state — it's either open or closed). */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ez-r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ez-ink-700);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out);
}
.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ez-line);
  color: var(--ez-cream);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--ez-space-sm);
  padding: 8px 12px;
  margin: var(--ez-space-sm) 0 0;
  border-radius: var(--ez-r-md);
  background: var(--ez-tint-soft);
  border: 1px solid var(--ez-line);
  min-width: 0;
  flex-shrink: 0;
}
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top: var(--ez-space-md);
}
.sidebar-user-name {
  font-family: var(--ez-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ez-cream);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--ez-space-md);
  padding-top: var(--ez-space-md);
  border-top: 1px solid var(--ez-line);
}
.sidebar-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ez-space-xs) 14px 0;
  font-family: var(--ez-font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--ez-text-dim);
}
.sidebar-attribution a:not(.sidebar-attribution__brand) {
  color: var(--ez-cream);
  text-decoration: none;
}
.sidebar-attribution a:not(.sidebar-attribution__brand):hover {
  text-decoration: underline;
}
.sidebar-attribution__brand {
  color: var(--ez-cream);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s var(--ez-ease-out);
}
.sidebar-attribution__brand:hover {
  opacity: 0.85;
}
.sidebar-link-logout {
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--ez-font-body);
  font-size: 13px;
  color: var(--ez-ink-700);
}
.sidebar-link-logout:hover {
  color: var(--ez-error);
  background: rgba(229, 84, 84, 0.10);
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--ez-r-md);
  color: var(--ez-ink-700);
  font-family: var(--ez-font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s var(--ez-ease-out), background 0.15s var(--ez-ease-out);
}
.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ez-cream);
}
.sidebar-link-active,
.sidebar-link.active {
  background: rgba(244, 165, 116, 0.08);
  color: var(--ez-cream);
  font-weight: 600;
}
.sidebar-link-active::before,
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-grad-btn);
  box-shadow: 0 0 12px rgba(244, 165, 116, 0.55);
}
.sidebar-link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sidebar-link-highlight {
  color: var(--ez-peach-300);
  font-weight: 600;
  text-shadow: 0 0 18px rgba(244, 165, 116, 0.35);
}
.sidebar-link-highlight:hover {
  color: var(--ez-peach-200, #f9c4a3);
}
/* Loud upsell-CTA flavour — applied alongside .sidebar-link-highlight only when
   the org is below Pro. Peach-tinted gradient pill + brand-coloured border +
   subtle glow so the upgrade affordance stands out from the regular nav links.
   Pro+ users get a plain .sidebar-link with no CTA frame. */
.sidebar-link-cta {
  background: linear-gradient(135deg, rgba(244, 165, 116, 0.18), rgba(232, 130, 92, 0.10));
  border: 1px solid rgba(244, 165, 116, 0.42);
  color: var(--ez-peach-200, #f9c4a3);
  box-shadow:
    0 0 0 1px rgba(244, 165, 116, 0.10) inset,
    0 6px 18px rgba(232, 130, 92, 0.18);
}
.sidebar-link-cta:hover {
  background: linear-gradient(135deg, rgba(244, 165, 116, 0.28), rgba(232, 130, 92, 0.18));
  border-color: rgba(244, 165, 116, 0.62);
  color: var(--ez-cream);
}
.sidebar-section-label {
  font-family: var(--ez-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--ez-peach-300);
  text-transform: uppercase;
  padding: var(--ez-space-md) 14px var(--ez-space-xs);
  opacity: 0.75;
}

/* === Collapsed sidebar (desktop only) ===
   When .dashboard-layout has .is-nav-collapsed, the grid track shrinks and
   the sidebar shows just icons. Disabled below 1024px because that
   breakpoint already swaps the sidebar to a fixed-position drawer (see the
   responsive block below). */
@media (min-width: 1025px) {
  .dashboard-layout.is-nav-collapsed { grid-template-columns: 64px 1fr; }
  .is-nav-collapsed .sidebar { padding: 0 8px var(--ez-space-md); }
  .is-nav-collapsed .sidebar-logo { padding: 0; justify-content: center; }
  .is-nav-collapsed .sidebar-toggle { margin-left: 0; }
  .is-nav-collapsed .sidebar-user,
  .is-nav-collapsed .sidebar-section-label,
  .is-nav-collapsed .sidebar-attribution,
  .is-nav-collapsed .sidebar-link > span { display: none; }
  .is-nav-collapsed .sidebar-link {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
  }
  .is-nav-collapsed .sidebar-link-active::before,
  .is-nav-collapsed .sidebar-link.active::before { left: -4px; }
  .is-nav-collapsed .sidebar-link-cta {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .is-nav-collapsed .sidebar-link-logout {
    justify-content: center;
    padding: 10px 0;
  }
  .is-nav-collapsed .sidebar-footer { padding-top: var(--ez-space-sm); }
}
@media (max-width: 1024px) {
  .sidebar-toggle { display: none; }
}

.topbar {
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0 var(--ez-space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
  min-width: 0;
  overflow: hidden;
  z-index: 5;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ez-space-md);
  min-width: 0;
  flex-shrink: 1;
}
.topbar-lead {
  display: flex;
  align-items: center;
  gap: var(--ez-space-md);
  min-width: 0;
  flex: 1 1 auto;
}
.topbar-title {
  margin: 0;
  font-family: var(--ez-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ez-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-pill-bg);
  border: 1px solid var(--ez-pill-border);
  color: var(--ez-cream);
  flex-shrink: 0;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}
.topbar-hamburger:hover {
  background: rgba(244, 165, 116, 0.16);
  border-color: rgba(244, 165, 116, 0.45);
}
.dashboard-nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 4, 1, 0.55);
  border: 0;
  cursor: pointer;
  padding: 0;
  animation: ez-fade-in 0.2s var(--ez-ease-out);
}
.topbar-subscription {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--ez-r-pill);
  background: rgba(244, 165, 116, 0.10);
  border: 1px solid rgba(244, 165, 116, 0.32);
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}
.topbar-subscription:hover {
  background: rgba(244, 165, 116, 0.18);
  border-color: rgba(244, 165, 116, 0.55);
}
.topbar-subscription-icon {
  color: var(--ez-peach-300);
  flex-shrink: 0;
}
.topbar-subscription-tier {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.topbar-subscription-sep {
  opacity: 0.4;
}
.topbar-subscription-meta {
  opacity: 0.85;
}

/* === Top-bar window pill (multi-window member feature) ===
   Read-only display of the operator's window label. Editing happens on the
   Window Assignments page; the topbar is informational only. */
.topbar-window-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--ez-r-pill);
  background: rgba(244, 165, 116, 0.10);
  border: 1px solid rgba(244, 165, 116, 0.32);
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.topbar-window-icon {
  color: var(--ez-peach-300);
  flex-shrink: 0;
}

.topbar-viewmode {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-pill-bg);
  border: 1px solid var(--ez-pill-border);
  flex-shrink: 0;
}
.topbar-viewmode__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--ez-r-pill);
  border: 0;
  background: transparent;
  color: var(--ez-ink-600);
  font-family: var(--ez-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), color 0.15s var(--ez-ease-out);
}
.topbar-viewmode__option:hover:not(:disabled) {
  color: var(--ez-cream);
}
.topbar-viewmode__option.is-active {
  background: var(--ez-accent-soft-strong);
  color: var(--ez-cream);
}
.topbar-viewmode__option:disabled {
  cursor: progress;
  opacity: 0.7;
}
.topbar-viewmode-compact {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-accent-soft);
  border: 1px solid var(--ez-pill-border);
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.topbar-viewmode-compact:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* === Window Assignments page === */
.window-assignments-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--ez-r-sm);
  background: transparent;
  border: 1px dashed transparent;
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s var(--ez-ease-out), border-color 0.15s var(--ez-ease-out);
}
.window-assignments-cell:hover {
  background: var(--ez-surface-2, transparent);
  border-color: var(--ez-border);
}
.window-assignments-cell:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.window-assignments-value {
  font-weight: 600;
}
.window-assignments-empty {
  color: var(--ez-ink-500, var(--ez-ink));
  opacity: 0.6;
}
.window-assignments-pencil {
  opacity: 0.55;
}
.window-assignments-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.window-assignments-input {
  padding: 6px 10px;
  border-radius: var(--ez-r-sm);
  border: 1px solid var(--ez-peach-400);
  background: var(--ez-surface, transparent);
  color: var(--ez-cream);
  font-family: var(--ez-font-body);
  font-size: 14px;
  width: 120px;
}
.window-assignments-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(244, 165, 116, 0.32);
}

.main-content {
  padding: var(--ez-space-xl);
  background: transparent;
  overflow-y: auto;
}

/* === Page Header === */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ez-space-xl);
}
.page-title {
  font-family: var(--ez-font-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: var(--ez-cream);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.page-subtitle {
  font-size: 14px;
  color: var(--ez-ink-700);
  margin-top: 6px;
}

/* === Grid Layouts === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ez-space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ez-space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ez-space-lg); }

/* === Public Layout (Customer PWA) === */
.public-layout {
  min-height: 100vh;
  background: transparent;
  display: flex;
  flex-direction: column;
}
.public-header {
  padding: var(--ez-space-md) var(--ez-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-lg);
  border-bottom: 1px solid var(--ez-line);
}
.public-header__actions {
  display: flex;
  align-items: center;
  gap: var(--ez-space-md);
}
.public-content {
  flex: 1;
  padding: var(--ez-space-xl) var(--ez-space-lg);
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* === Pill Nav (used by PublicLayout / Landing) === */
.pill-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 32px, 980px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ez-space-md);
  padding: 10px 14px 10px 18px;
  border-radius: var(--ez-r-pill);
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--ez-glass-border);
  box-shadow: var(--ez-shadow-glass);
  z-index: 80;
  transition: top 0.25s var(--ez-ease-out), padding 0.25s var(--ez-ease-out);
}
.pill-nav.is-scrolled {
  top: 8px;
  padding: 8px 12px 8px 16px;
}
.pill-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pill-nav__link {
  padding: 6px 12px;
  border-radius: var(--ez-r-pill);
  font-family: var(--ez-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ez-ink-700);
  cursor: pointer;
  transition: color 0.15s var(--ez-ease-out), background 0.15s var(--ez-ease-out);
}
.pill-nav__link:hover { color: var(--ez-cream); background: var(--ez-tint-soft); }
.pill-nav__link.active { color: var(--ez-cream); background: rgba(244, 165, 116, 0.10); }

/* === Kiosk Layout === */
html:has(body.kiosk-mode),
body.kiosk-mode {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.kiosk-layout {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  user-select: none;
  overflow: hidden;
}
.kiosk-toolbar {
  position: absolute;
  top: var(--ez-space-lg);
  right: var(--ez-space-lg);
  display: flex;
  align-items: center;
  gap: var(--ez-space-sm);
  z-index: 10;
}
.kiosk-content {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  min-height: 0;
}

/* === Auth Layout === */
.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: transparent;
  padding: 0;
}
.auth-pitch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ez-space-3xl) var(--ez-space-2xl);
  gap: var(--ez-space-lg);
  color: var(--ez-cream);
}
.auth-pitch__title {
  font-family: var(--ez-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
}
.auth-pitch__lede {
  color: var(--ez-ink-700);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
}
.auth-pitch__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--ez-space-md);
}
.auth-pitch__bullet {
  font-family: var(--ez-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ez-peach-300);
}
.auth-form-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ez-space-2xl);
}
.auth-card {
  position: relative;
  background: var(--ez-surface-glass);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--ez-shadow-glass);
  border-radius: var(--ez-r-lg);
  padding: var(--ez-space-2xl);
  max-width: 460px;
  width: 100%;
  color: var(--ez-cream);
}
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--ez-space-xl);
}
.auth-title {
  font-family: var(--ez-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ez-cream);
  text-align: center;
  margin-bottom: var(--ez-space-xs);
}
.auth-subtitle {
  font-size: 14px;
  color: var(--ez-ink-700);
  text-align: center;
  margin-bottom: var(--ez-space-xl);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--ez-space-md);
}
.auth-footer {
  text-align: center;
  margin-top: var(--ez-space-lg);
  font-size: 13px;
  color: var(--ez-ink-700);
}

/* === Responsive === */
@media (max-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform 0.28s var(--ez-ease-out);
    z-index: 80;
    border-right: 1px solid var(--ez-glass-border);
    background: var(--ez-bg-2);
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--ez-space-md));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ez-space-md));
    overflow: hidden;
  }
  [data-theme="light"] .sidebar { background: var(--ez-bg); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .topbar-hamburger { display: inline-flex; }
  .dashboard-nav-scrim { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-pitch { padding: var(--ez-space-2xl); }
  .topbar { padding: 0 var(--ez-space-md); }
  .topbar-subscription-meta,
  .topbar-subscription-sep { display: none; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .main-content,
  .dashboard-layout-content {
    padding: var(--ez-space-md);
    padding-bottom: calc(var(--ez-space-md) + env(safe-area-inset-bottom, 0px));
  }
  .card {
    padding: var(--ez-space-lg);
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ez-space-md);
  }
  .pill-nav {
    width: calc(100% - 16px);
  }
  .auth-form-pane,
  .auth-pitch {
    padding: var(--ez-space-xl) var(--ez-space-md);
  }
  .auth-card {
    padding: var(--ez-space-lg) var(--ez-space-md);
  }
  .public-content {
    padding: var(--ez-space-xl) var(--ez-space-md);
  }
  .dashboard-page {
    gap: var(--ez-space-xl);
  }
  .topbar-actions {
    gap: 6px;
  }
  .topbar-subscription {
    padding: 4px 10px;
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
  }
  .topbar-subscription-tier {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .lang-trigger { padding: 6px 10px; }
  .topbar .lang-code { display: none; }
  .topbar-viewmode { display: none; }
  .topbar-viewmode-compact { display: inline-flex; }
}
/* === Flexbox === */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* === Gap === */
.gap-xs  { gap: var(--ez-space-xs); }
.gap-sm  { gap: var(--ez-space-sm); }
.gap-md  { gap: var(--ez-space-md); }
.gap-lg  { gap: var(--ez-space-lg); }
.gap-xl  { gap: var(--ez-space-xl); }

/* === Margin === */
.mt-xs  { margin-top: var(--ez-space-xs); }
.mt-sm  { margin-top: var(--ez-space-sm); }
.mt-md  { margin-top: var(--ez-space-md); }
.mt-lg  { margin-top: var(--ez-space-lg); }
.mt-xl  { margin-top: var(--ez-space-xl); }
.mb-xs  { margin-bottom: var(--ez-space-xs); }
.mb-sm  { margin-bottom: var(--ez-space-sm); }
.mb-md  { margin-bottom: var(--ez-space-md); }
.mb-lg  { margin-bottom: var(--ez-space-lg); }
.mb-xl  { margin-bottom: var(--ez-space-xl); }

/* === Padding === */
.p-sm  { padding: var(--ez-space-sm); }
.p-md  { padding: var(--ez-space-md); }
.p-lg  { padding: var(--ez-space-lg); }
.p-xl  { padding: var(--ez-space-xl); }

/* === Text === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-muted { color: var(--ez-ink-500); }
.text-ink { color: var(--ez-ink-950); }
.text-peach { color: var(--ez-peach-500); }
.text-success { color: var(--ez-success); }
.text-error { color: var(--ez-error); }
.text-warning { color: var(--ez-warning); }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Display === */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }

/* === Width === */
.w-full { width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }

/* === Misc === */
.rounded-sm { border-radius: var(--ez-r-sm); }
.rounded-md { border-radius: var(--ez-r-md); }
.rounded-lg { border-radius: var(--ez-r-lg); }
.rounded-xl { border-radius: var(--ez-r-xl); }
.shadow-sm { box-shadow: var(--ez-shadow-sm); }
.shadow-md { box-shadow: var(--ez-shadow-md); }
.shadow-lg { box-shadow: var(--ez-shadow-lg); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-slide-up { animation: slideUp 0.3s ease; }
.animate-fade-in { animation: fadeIn 0.2s ease; }
.animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
/*$vite$:1*/