/* ====================================================================
   HospiEdge POS — Main Stylesheet
   Design: Clean, premium SaaS sidebar layout
   ====================================================================== */

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-primary:       #2563eb;
  --color-primary-dark:  #1d4ed8;
  --color-primary-light: #eff6ff;
  --color-success:       #16a34a;
  --color-success-light: #f0fdf4;
  --color-danger:        #dc2626;
  --color-danger-light:  #fef2f2;
  --color-warning:       #d97706;
  --color-warning-light: #fffbeb;
  --color-info:          #0891b2;
  --color-info-light:    #ecfeff;

  /* Neutrals */
  --color-bg:            #f8fafc;
  --color-surface:       #ffffff;
  --color-border:        #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text:          #0f172a;
  --color-text-muted:    #64748b;
  --color-text-light:    #94a3b8;

  /* Sidebar */
  --sidebar-bg:          #1e293b;
  --sidebar-border:      #334155;
  --sidebar-text:        #cbd5e1;
  --sidebar-text-muted:  #94a3b8;
  --sidebar-hover:       #334155;
  --sidebar-active:      #2563eb;
  --sidebar-active-text: #ffffff;
  --sidebar-width:       240px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Fira Code', 'Cascadia Code', Consolas, monospace;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;

  /* Radius */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Layout */
  --topbar-height: 56px;
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* ── App Shell ───────────────────────────────────────────────────── */
body.has-sidebar {
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
  transition: transform .25s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-md);
  text-decoration: none;
}

.sidebar-brand:hover { text-decoration: none; }

.sidebar-brand-icon {
  width: 32px; height: 32px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: var(--text-md);
  flex-shrink: 0;
}

.sidebar-brand-text { color: #fff; }

/* Location selector */
.sidebar-location {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-location-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sidebar-text-muted);
  margin-bottom: var(--space-2);
}

.sidebar-location-select {
  width: 100%;
  background: var(--sidebar-hover);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: var(--text-sm);
  cursor: pointer;
}

.sidebar-location-select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: var(--space-3) 0;
  overflow-y: auto;
}

.sidebar-nav-section {
  padding: var(--space-2) 0;
}

.sidebar-nav-section-title {
  padding: var(--space-3) var(--space-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sidebar-text-muted);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px var(--space-5);
  color: var(--sidebar-text);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
}

.sidebar-nav-item:hover,
a.sidebar-nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
  text-decoration: none;
}

.sidebar-nav-item.active,
a.sidebar-nav-item.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

.sidebar-nav-item--soon {
  opacity: .5;
  cursor: default;
  user-select: none;
}

.sidebar-nav-item--soon:hover { background: none; color: var(--sidebar-text); }

.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; }

.badge-soon {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255,255,255,.15);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: .04em;
}

/* Sidebar footer */
.sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  gap: var(--space-3);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--sidebar-text);
  text-decoration: none;
  min-width: 0;
  flex: 1;
}

.sidebar-user:hover { text-decoration: none; }

.sidebar-user-avatar {
  width: 32px; height: 32px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--sidebar-text-muted);
}

.sidebar-logout-btn {
  background: none;
  border: none;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  flex-shrink: 0;
}

.sidebar-logout-btn:hover {
  color: var(--color-danger);
  background: rgba(220,38,38,.15);
}

/* ── Page Wrapper ─────────────────────────────────────────────────── */
.page-wrapper {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top Bar ──────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: var(--space-4);
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.breadcrumb { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb-item { color: var(--color-text-muted); font-size: var(--text-sm); }
.breadcrumb-item.active { color: var(--color-text); font-weight: 500; }
.breadcrumb-sep { color: var(--color-text-light); }

.topbar-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 5px var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.topbar-access-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.topbar-access-chip.success {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.24);
}
.topbar-access-chip.info {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.24);
}
.topbar-access-chip.warn {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.24);
}
.topbar-access-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
}
.topbar-access-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}

.sidebar-toggle-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  display: none;
}

/* ── Main Content ─────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: var(--space-6);
  max-width: 1200px;
  width: 100%;
}

/* ── Auth Layout ─────────────────────────────────────────────────── */
.auth-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 30%),
    radial-gradient(circle at bottom right, rgba(15, 23, 42, 0.10), transparent 32%),
    linear-gradient(180deg, #eff6ff 0%, #f8fafc 42%, #eef2ff 100%);
}

.auth-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.auth-shell {
  width: 100%;
  max-width: 1140px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px);
  gap: var(--space-6);
  align-items: stretch;
}

.auth-shell-compact {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
}

.auth-panel {
  border-radius: 28px;
  overflow: hidden;
}

.auth-panel-brand {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  background:
    linear-gradient(155deg, rgba(15, 23, 42, 0.97) 0%, rgba(17, 24, 39, 0.95) 45%, rgba(30, 41, 59, 0.94) 100%);
  color: #e2e8f0;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}

.auth-brand-return {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(226, 232, 240, 0.88);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.auth-brand-return:hover {
  color: #fff;
  text-decoration: none;
}

.auth-brand-lockup {
  display: grid;
  gap: var(--space-6);
}

.auth-brand-image {
  width: min(320px, 100%);
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.30));
}

.auth-brand-copy {
  display: grid;
  gap: var(--space-3);
}

.auth-brand-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-brand-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
}

.auth-brand-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(226, 232, 240, 0.86);
  max-width: 60ch;
}

.auth-brand-points {
  display: grid;
  gap: var(--space-4);
}

.auth-brand-points article {
  display: grid;
  gap: 6px;
  padding: 18px 18px 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.16);
  backdrop-filter: blur(10px);
}

.auth-brand-points strong {
  color: #fff;
  font-size: var(--text-base);
}

.auth-brand-points span {
  color: rgba(226, 232, 240, 0.82);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.auth-setup-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.auth-setup-list article {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.92) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.auth-setup-list strong {
  color: #0f172a;
  font-size: var(--text-sm);
}

.auth-setup-list span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.auth-panel-form,
.auth-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 42px);
  width: 100%;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(16px);
}

.auth-panel-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-panel-form-wide,
.auth-card-wide {
  max-width: none;
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-logo-modern {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.auth-logo-image {
  width: clamp(100px, 22vw, 152px);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.12));
}

.auth-logo-text {
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 800;
  color: #0f172a;
}

.auth-logo-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 0;
}

.auth-form-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-form-header h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  color: #0f172a;
}

.auth-form-header p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-form .form-control {
  border-radius: 14px;
  min-height: 50px;
  border-color: rgba(148, 163, 184, 0.36);
  background: rgba(255, 255, 255, 0.96);
}

.auth-form .form-control:focus {
  border-color: rgba(37, 99, 235, 0.52);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.auth-form .btn {
  min-height: 52px;
  border-radius: 14px;
  font-weight: 700;
}

.auth-footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-footer-tight p {
  margin-bottom: 6px;
}

.auth-footer-tight p:last-child {
  margin-bottom: 0;
}

.auth-panel-form .alert,
.auth-card .alert {
  margin: 0 0 var(--space-5);
}


.auth-shell-login-premium {
  max-width: 1220px;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, 500px);
  gap: clamp(20px, 3vw, 32px);
}

.auth-panel-brand-login {
  overflow: hidden;
}

.auth-panel-brand-login::before,
.auth-panel-brand-login::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.auth-panel-brand-login::before {
  width: 280px;
  height: 280px;
  right: -80px;
  top: -90px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.26) 0%, rgba(96, 165, 250, 0) 70%);
}

.auth-panel-brand-login::after {
  width: 240px;
  height: 240px;
  left: -60px;
  bottom: -80px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 72%);
}

.auth-brand-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
}

.auth-brand-lockup-login {
  gap: var(--space-5);
}

.auth-brand-image-login {
  width: min(290px, 72%);
}

.auth-brand-copy-login h1 {
  max-width: 12ch;
}

.auth-proof-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.auth-proof-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(191, 219, 254, 0.18);
  color: rgba(239, 246, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-brand-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.auth-brand-metrics article {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-brand-metrics strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.35;
}

.auth-brand-metrics span {
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.94rem;
  line-height: 1.65;
}

.auth-brand-footnote {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
}

.auth-panel-form-login {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.auth-form-surface {
  position: relative;
  width: 100%;
  padding: clamp(26px, 4vw, 36px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 100%);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px);
}

.auth-form-surface::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  pointer-events: none;
}

.auth-login-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-login-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.14);
}

.auth-logo-modern-login,
.auth-form-header-login,
.auth-form-login,
.auth-login-meta,
.auth-login-trust {
  position: relative;
  z-index: 1;
}

.auth-logo-image-login {
  width: clamp(108px, 18vw, 148px);
}

.auth-form-header-login {
  margin-bottom: var(--space-5);
}

.auth-form-login {
  gap: var(--space-4);
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.auth-label-note {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.auth-password-wrap .form-control {
  border-radius: 14px 0 0 14px;
}

.auth-password-toggle {
  min-width: 84px;
  justify-content: center;
  border-radius: 0 14px 14px 0;
  border-color: rgba(148, 163, 184, 0.36);
  background: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}

.auth-password-toggle:hover {
  background: #eff6ff;
}

.auth-submit-btn {
  margin-top: 6px;
  min-height: 56px;
  border-radius: 16px;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.20);
}

.auth-login-meta {
  margin-top: var(--space-5);
  display: grid;
  gap: 8px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-login-meta p {
  margin: 0;
}

.auth-login-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-5);
}

.auth-login-trust span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

/* ── Alerts / Flash ───────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  margin: 0 var(--space-6) var(--space-4);
}

.alert-success {
  background: var(--color-success-light);
  border-color: #bbf7d0;
  color: #166534;
}

.alert-danger {
  background: var(--color-danger-light);
  border-color: #fecaca;
  color: #991b1b;
}

.alert-info {
  background: var(--color-info-light);
  border-color: #a5f3fc;
  color: #155e75;
}

.alert-warning {
  background: var(--color-warning-light);
  border-color: #fde68a;
  color: #92400e;
}

.alert-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: .6;
  font-size: 16px;
  padding: 0;
  flex-shrink: 0;
  color: inherit;
}

.alert-close:hover { opacity: 1; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-bg); color: var(--color-text); }

.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }

.btn-sm { padding: 5px 10px; font-size: var(--text-xs); }
.btn-full { width: 100%; justify-content: center; }

/* ── Forms ────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.form-control:disabled {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { cursor: pointer; }

.form-control-sm { padding: 5px 10px; font-size: var(--text-xs); }

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

.form-row .form-group { flex: 1; min-width: 120px; }
.col-2 { flex: 0 0 calc(16.66% - var(--space-3)) !important; }
.col-3 { flex: 0 0 calc(25% - var(--space-4)) !important; }
.col-4 { flex: 0 0 calc(33.33% - var(--space-4)) !important; }
.col-6 { flex: 0 0 calc(50% - var(--space-3)) !important; }
.col-8 { flex: 0 0 calc(66.66% - var(--space-3)) !important; }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.form-section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  padding: var(--space-5) 0 var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.required { color: var(--color-danger); }

.flex-end { justify-content: flex-end; }

.input-with-action {
  position: relative;
  display: flex;
}

.input-with-action .form-control { flex: 1; border-radius: var(--radius) 0 0 var(--radius); }

.input-action-btn {
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  font-size: 14px;
}

.search-form {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.search-input { max-width: 280px; }

.inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.card-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.card-subtitle {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.card-header-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.card-body { padding: var(--space-6); }
.card-footer {
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.card-form .card-header { padding: var(--space-5) var(--space-6); }
.card-form form { padding: var(--space-6); }

.card-danger { border-color: #fecaca; }
.card-danger .card-header {
  background: var(--color-danger-light);
  border-color: #fecaca;
}
.card-danger .card-title { color: var(--color-danger); }

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.danger-zone p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Page Header ──────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.page-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.page-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.page-header-actions { display: flex; gap: var(--space-3); flex-shrink: 0; }


.ops-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.ops-toolbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.ops-toolbar-form .form-control {
  min-width: 180px;
  flex: 1 1 220px;
}

.ops-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ops-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}

.ops-filter-actions {
  display: flex;
  align-items: flex-end;
}

.ops-filter-actions .btn {
  width: 100%;
}

.ops-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.ops-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}

.ops-summary-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}

.ops-summary-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-2);
  line-height: 1.2;
}

.ops-summary-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.review-card {
  margin-bottom: var(--space-4);
}

.review-card .card-header {
  padding-bottom: var(--space-2);
}

.review-card .card-title--compact {
  font-size: 1rem;
  margin-bottom: 4px;
}


.standalone-page {
  max-width: 960px;
  margin: var(--space-8) auto;
  padding: 0 var(--space-4);
}

.standalone-page--narrow {
  max-width: 760px;
}

.billing-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.billing-price-card {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #0f172a, #162033);
  color: #e2e8f0;
}

.billing-price-card-kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}

.billing-price-card-value {
  margin-top: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.2;
}

.billing-price-card-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: #cbd5e1;
}

.billing-note-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.9;
}

.billing-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.billing-footer-link:hover {
  color: var(--color-primary-dark);
}

.inventory-inline-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.recipe-activation-toggle {
  display: flex;
  align-items: flex-end;
}

.recipe-activation-toggle .form-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.recipe-line-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recipe-line-delete {
  margin-top: 8px;
}

.section-header { margin: var(--space-8) 0 var(--space-5); }
.section-title { margin: 0; font-size: var(--text-xl); font-weight: 600; }
.section-subtitle { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  white-space: nowrap;
}

.table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-bg); }

.table-compact th { padding: var(--space-2) var(--space-4); }
.table-compact td { padding: var(--space-3) var(--space-4); }

.table-link {
  font-weight: 500;
  color: var(--color-primary);
}

.row-inactive { opacity: .55; }

.text-right { text-align: right !important; }

/* ── Badges ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 20px;
  white-space: nowrap;
}

.badge-success { background: #dcfce7; color: #166534; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #cffafe; color: #155e75; }
.badge-secondary { background: var(--color-border); color: var(--color-text-muted); }

/* ── Stats Grid ───────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.stat-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon-blue   { background: var(--color-primary-light); color: var(--color-primary); }
.stat-icon-green  { background: var(--color-success-light); color: var(--color-success); }
.stat-icon-purple { background: #f3e8ff; color: #7c3aed; }

.stat-card-value { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); line-height: 1; }
.stat-card-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

.stat-card-link {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 500;
}

.recipe-stats-grid {
  margin-bottom: var(--space-5);
}

.recipe-link-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.recipe-editor-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.recipe-product-list {
  display: flex;
  flex-direction: column;
}

.recipe-product-card {
  display: block;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.recipe-product-card:last-child {
  border-bottom: none;
}

.recipe-product-card:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.recipe-product-card.is-active {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.recipe-product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.recipe-product-card-meta {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.recipe-suggestion-list {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recipe-suggestion-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 140px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.recipe-suggestion-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recipe-suggestion-copy span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.recipe-suggestion-qty .form-label {
  font-size: var(--text-xs);
}

.inventory-quickstart-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.inventory-quickstart-steps {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.inventory-quickstart-steps span {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.inventory-item-form-actions {
  align-self: flex-end;
}

.inventory-library-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.inventory-library-main {
  min-width: 0;
}

.inventory-pack-list,
.inventory-session-list,
.inventory-exception-list {
  display: flex;
  flex-direction: column;
}

.inventory-pack-card,
.inventory-session-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.inventory-pack-card:last-child,
.inventory-session-card:last-child {
  border-bottom: none;
}

.inventory-pack-card:hover,
.inventory-session-card:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.inventory-pack-card span,
.inventory-session-card span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.inventory-pack-card.is-active,
.inventory-session-card.is-active {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.inventory-pack-sections {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.inventory-pack-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.inventory-pack-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.inventory-pack-section-header h4 {
  margin: 0;
  font-size: var(--text-md);
}

.inventory-pack-section-header p {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.inventory-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.inventory-pack-item-list {
  display: flex;
  flex-direction: column;
}

.inventory-pack-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.inventory-pack-item:last-child {
  border-bottom: none;
}

.inventory-pack-item-checkbox {
  padding-top: 2px;
}

.inventory-pack-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.inventory-pack-item-meta,
.inventory-pack-item-note {
  margin-top: 4px;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.inventory-summary-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.inventory-summary-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
}

.inventory-summary-list {
  margin: 0;
  padding-left: 18px;
}

.inventory-summary-list li {
  margin-bottom: 6px;
  font-size: var(--text-sm);
}

.inventory-count-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.inventory-count-sidebar,
.inventory-count-main {
  min-width: 0;
}

.inventory-count-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) minmax(220px, 280px);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.inventory-count-toolbar-search {
  min-width: 0;
}

.inventory-count-helper-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.inventory-count-filters,
.inventory-count-helper-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inventory-count-filters .btn.is-active {
  background: var(--color-primary-light);
  border-color: #bfdbfe;
  color: var(--color-primary-dark);
}

.inventory-count-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.inventory-count-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.inventory-count-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.inventory-count-section-header h4 {
  margin: 0;
  font-size: var(--text-md);
}

.inventory-count-section-header span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.inventory-count-table td {
  vertical-align: middle;
}

.inventory-count-input {
  min-width: 120px;
  text-align: right;
  font-size: var(--text-md);
  font-weight: 700;
}

.inventory-count-row-actions {
  display: inline-flex;
  gap: var(--space-2);
}

.inventory-count-cancel-row {
  display: flex;
  justify-content: flex-end;
}

.inventory-exception-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.inventory-exception-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.inventory-exception-row:last-child {
  border-bottom: none;
}

a.inventory-exception-row:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.variance-positive {
  color: #166534;
  font-weight: 700;
}

.variance-negative {
  color: #991b1b;
  font-weight: 700;
}

/* ── Module Grid (dashboard) ──────────────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.module-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: .7;
}

.module-card--active { opacity: 1; border-color: var(--color-primary); }

.module-card-phase {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
}

.module-card-icon { font-size: 24px; }

.module-card-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.module-card-desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.module-card-status {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.module-card-status--done { color: var(--color-success); }

/* ── Detail layout ────────────────────────────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}

.detail-list { margin: 0; }
.detail-list dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-text); }

/* ── User cells ───────────────────────────────────────────────────── */
.user-cell { display: flex; align-items: center; gap: var(--space-3); }

.user-avatar-sm {
  width: 28px; height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.user-list { list-style: none; margin: 0; padding: 0; }
.user-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.user-list-item:last-child { border-bottom: none; }
.user-name { font-size: var(--text-sm); font-weight: 500; }
.user-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

.simple-list { list-style: none; margin: 0; padding: var(--space-4); }
.simple-list li { padding: var(--space-2) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.simple-list li:last-child { border-bottom: none; }

/* ── Profile ──────────────────────────────────────────────────────── */
.profile-avatar {
  width: 72px; height: 72px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto var(--space-4);
}

.profile-name {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
}

.profile-role {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  margin-top: 2px;
}

.profile-meta {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Pagination ───────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.pagination-info { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Empty States ─────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--color-text-muted);
}

.empty-state-icon { font-size: 40px; margin-bottom: var(--space-4); opacity: .4; }
.empty-state h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-text); }
.empty-state p { margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.empty-state-sm { padding: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Error Pages ──────────────────────────────────────────────────── */
.error-page {
  text-align: center;
  padding: var(--space-10);
}

.error-code {
  font-size: 80px;
  font-weight: 900;
  color: var(--color-border-strong);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.error-title { font-size: var(--text-2xl); font-weight: 700; margin: 0 0 var(--space-3); }
.error-message { font-size: var(--text-md); color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* ── Phase placeholder ────────────────────────────────────────────── */
.phase-placeholder {
  text-align: center;
  padding: var(--space-8);
}

.phase-placeholder-icon { font-size: 36px; margin-bottom: var(--space-4); }
.phase-placeholder h4 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.phase-placeholder p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }

/* ── Utilities ────────────────────────────────────────────────────── */
.text-muted  { color: var(--color-text-muted) !important; }
.text-sm     { font-size: var(--text-sm) !important; }
.text-xs     { font-size: var(--text-xs) !important; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-6, .col-8, .col-2 { flex: 1 1 100% !important; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .page-wrapper { margin-left: 0; }
  .sidebar-toggle-btn { display: block; }

  .main-content { padding: var(--space-4); }

  .topbar { padding: 0 var(--space-4); }

  .page-header {
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-header-actions { width: 100%; }

  .ops-toolbar,
  .ops-toolbar-form,
  .page-header-actions {
    width: 100%;
  }

  .ops-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-filter-actions {
    grid-column: span 2;
  }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }


  .ops-filter-grid {
    grid-template-columns: 1fr;
  }

  .ops-filter-actions {
    grid-column: auto;
  }

  .ops-toolbar > *,
  .ops-toolbar-form > *,
  .page-header-actions > * {
    width: 100%;
  }


  .standalone-page {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .billing-panel {
    padding: var(--space-5);
  }

  .recipe-link-layout { grid-template-columns: 1fr; }

  .recipe-suggestion-row { grid-template-columns: 1fr; }

  .inventory-quickstart-banner,
  .inventory-library-layout,
  .inventory-count-layout,
  .inventory-exception-grid,
  .inventory-summary-columns,
  .inventory-count-toolbar,
  .inventory-count-helper-bar {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .inventory-pack-item-top,
  .inventory-pack-section-header,
  .inventory-count-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .inventory-count-row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .module-grid { grid-template-columns: 1fr; }

  .table { font-size: var(--text-xs); }
  .table th, .table td { padding: var(--space-3) var(--space-3); }

  .alert { margin: 0 var(--space-4) var(--space-3); }
}

/* ── Sidebar overlay (mobile) ─────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}

.sidebar-overlay.is-active { display: block; }
/* ── Phase 2: Catalog ─────────────────────────────────────────────── */

/* Station selection grid */
.station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.station-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  background: var(--color-bg-card);
}
.station-option input[type=radio] { display: none; }
.station-option:hover { border-color: var(--color-primary); background: var(--color-bg-hover); }
.station-option.selected { border-color: var(--color-primary); background: rgba(99,102,241,.1); }
.station-option-icon { font-size: 1.75rem; line-height: 1; }
.station-option-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); }

/* Station badge (table / product header) */
.station-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Station display card (product show page) */
.station-display {
  border: 3px solid;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.station-display-icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--space-2); }
.station-display-label { font-size: var(--text-lg); font-weight: 700; }
.station-display-time { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Checkbox grid for modifier groups */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s;
}
.checkbox-option:hover { background: var(--color-bg-hover); }
.checkbox-option input { margin-top: 2px; flex-shrink: 0; }
.checkbox-option span { display: flex; flex-direction: column; gap: 2px; }
.checkbox-option strong { font-size: var(--text-sm); }
.checkbox-option small { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Color swatch */
.color-swatch {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.1);
}
.color-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}

/* Inline edit row */
.edit-inline-row { background: var(--color-bg-hover); }
.edit-inline-row td { padding: var(--space-3) var(--space-4); }
.inline-edit-form .form-row { margin-bottom: 0; align-items: center; }

/* Card filters row */
.card-filters { padding: var(--space-4); }
.filter-form .form-row { margin-bottom: 0; align-items: flex-end; }

/* Grid layout helpers */
.grid-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.span-2 { grid-column: span 2; }

/* Detail grid */
.detail-grid { display: flex; flex-direction: column; }
.detail-row {
  display: flex;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.detail-row:last-child { border-bottom: none; }
.detail-label { width: 160px; flex-shrink: 0; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; }
.detail-value { flex: 1; font-size: var(--text-sm); }

/* Input group */
.input-group { display: flex; align-items: stretch; }
.input-group .form-control { border-radius: var(--radius) 0 0 var(--radius); flex: 1; }
.input-group-text {
  display: flex;

  align-items: center;
  padding: 0 var(--space-3);
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}
input[type=color].form-control.color-picker {
  width: 48px; padding: 2px 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  cursor: pointer; flex-shrink: 0;
}

/* Stat card extra colors */
.stat-icon-orange { background: #fed7aa; color: #ea580c; }
.stat-icon-teal   { background: #ccfbf1; color: #0d9488; }
.stat-icon-indigo { background: #e0e7ff; color: #4338ca; }

/* Empty state small */
.empty-state-sm { padding: var(--space-6) var(--space-5); text-align: center; }
.empty-state-sm p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* btn-block */
.btn-block { width: 100%; }

/* Card footer */
.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-hover);
}

/* Card body */
.card-body { padding: var(--space-5); }

/* Inline form */
.inline-form { display: inline; }

/* Toggle label */
.toggle-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.toggle-label input[type=checkbox] { width: 16px; height: 16px; }

/* align-end */
.align-end { align-items: flex-end; }

@media (max-width: 900px) {
  .grid-cols-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .station-grid { grid-template-columns: repeat(4, 1fr); }
  .checkbox-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Live screen layout ─────────────────────────────────────────── */
body.app-live-screen {
  background: #08111f;
  min-height: 100dvh;
  overflow: auto;
}

.app-live-screen .alert {
  margin: 0;
  border-radius: 0;
}

.live-screen-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.live-main-content {
  flex: 1;
  padding: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.live-screen-controls {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 260;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.live-screen-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(34,197,94,.34);
  background: rgba(6,95,70,.82);
  color: #dcfce7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}

.live-screen-install-btn:hover {
  background: rgba(22,163,74,.86);
  border-color: rgba(134,239,172,.6);
  color: #fff;
}

.live-screen-install-btn:active {
  transform: translateY(1px);
}

.live-terminal-bar {
  position: relative;
  z-index: 220;
  flex-shrink: 0;
  padding: 18px 18px 0;
}

.live-terminal-bar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-right: min(260px, 32vw);
}

.live-terminal-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.live-terminal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(148,163,184,.88);
}

.live-terminal-page {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  color: #f8fafc;
  letter-spacing: -.03em;
}

.live-terminal-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.live-terminal-actor-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(96,165,250,.22);
  background: rgba(15,23,42,.7);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(2,6,23,.18);
  backdrop-filter: blur(10px);
}

.live-terminal-actor-chip strong {
  color: #fff;
  font-weight: 800;
}

.live-terminal-actor-chip.is-manager {
  border-color: rgba(251,191,36,.28);
  background: rgba(120,53,15,.22);
  color: #fde68a;
}

.live-terminal-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.62);
  box-shadow: 0 16px 36px rgba(2,6,23,.22);
  backdrop-filter: blur(14px);
}

.live-terminal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.live-terminal-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(8,17,31,.44);
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}

.live-terminal-nav-link:hover {
  background: rgba(30,41,59,.84);
  border-color: rgba(96,165,250,.42);
  color: #fff;
  text-decoration: none;
}

.live-terminal-nav-link:active {
  transform: translateY(1px);
}

.live-terminal-nav-link.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: rgba(147,197,253,.8);
  color: #fff;
  box-shadow: 0 12px 26px rgba(37,99,235,.24);
}

.live-terminal-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-terminal-exit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(251,191,36,.28);
  background: rgba(120,53,15,.24);
  color: #fde68a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.live-terminal-exit-btn:hover {
  background: rgba(146,64,14,.36);
  border-color: rgba(251,191,36,.42);
  color: #fff7ed;
}

.live-screen-shell.has-terminal-nav .live-main-content {
  min-height: 0;
  overflow: auto;
  padding-bottom: 20px;
}

.live-screen-shell[data-terminal-kind="server-checks"].has-terminal-nav .live-main-content,
.live-screen-shell[data-terminal-kind="clock-terminal"].has-terminal-nav .live-main-content {
  overflow: auto;
}

.live-screen-shell.has-terminal-nav .live-board-screen {
  min-height: 100%;
}

.live-screen-exit-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 320;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.live-screen-exit-overlay.is-open {
  display: flex;
}

.live-screen-exit-box {
  width: 320px;
  max-width: 92vw;
  padding: 28px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.24);
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 16px 36px rgba(0,0,0,.38);
}

.live-screen-exit-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.live-screen-exit-sub {
  margin: 0 0 16px;
  color: #94a3b8;
  font-size: 13px;
}

.live-screen-exit-pin {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 10px;
  background: #020617;
  color: #f8fafc;
  font-size: 22px;
  text-align: center;
  letter-spacing: .3em;
  outline: none;
}

.live-screen-exit-pin:focus {
  border-color: rgba(96,165,250,.72);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

.live-screen-exit-error {
  display: none;
  margin-top: 10px;
  color: #f87171;
  font-size: 12px;
}

.live-screen-exit-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.live-screen-exit-confirm,
.live-screen-exit-cancel {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.live-screen-exit-confirm {
  border: none;
  background: #2563eb;
  color: #fff;
}

.live-screen-exit-cancel {
  border: 1px solid rgba(148,163,184,.3);
  background: transparent;
  color: #cbd5e1;
}

/* ── Live board UX ─────────────────────────────────────────────── */
.live-board-screen {
  min-height: 100dvh;
  padding: 18px 20px 20px;
  background: radial-gradient(circle at top, rgba(37,99,235,.16), transparent 30%), linear-gradient(180deg, #0b1220 0%, #07101d 100%);
  color: #e5eefc;
}

.live-board-screen .page-header {
  margin-bottom: 14px;
}

.live-board-screen .page-title,
.live-board-screen .page-subtitle,
.live-board-screen .card-title {
  color: #f8fbff;
}

.live-board-screen .page-subtitle,
.live-board-screen .text-muted,
.live-board-screen .small {
  color: rgba(226, 232, 240, 0.75) !important;
}

.live-board-screen .card {
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.35);
}

.live-board-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.live-board-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.live-board-badge.is-local {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.live-board-badge.is-hetable {
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
}

.live-board-link {
  color: rgba(226, 232, 240, 0.8);
  font-size: 12px;
  text-decoration: none;
}

.live-board-link:hover { color: #fff; }

.live-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.live-board-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.live-board-toggle button {
  border: none;
  background: transparent;
  color: rgba(226, 232, 240, 0.82);
  padding: 8px 14px;
  min-height: 42px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.live-board-toggle button.is-active {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.live-board-pane[hidden] { display: none !important; }

.live-map-card .card-body,
.live-legend-card .card-body {
  padding: 0;
}

.live-floor-viewport {
  overflow: auto;
  background: linear-gradient(180deg, #101a2e, #0a1222);
  padding: 14px;
  border-radius: 0 0 16px 16px;
  min-height: calc(100dvh - 300px);
}

.live-floor-canvas {
  position: relative;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(180deg, #111827, #0f172a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transform-origin: top left;
}

.pos-table-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 7px 8px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(2, 8, 23, 0.24);
}

.pos-table-btn.is-round {
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px;
}

.pos-table-btn.is-compact {
  padding: 5px 6px;
}

.pos-table-ref {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-table-btn.is-round .pos-table-ref {
  max-width: calc(100% - 10px);
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  font-size: clamp(11px, 1.2vw, 15px);
}

.pos-table-state {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
}

.pos-table-sub {
  max-width: 100%;
  font-size: 10px;
  line-height: 1.15;
  opacity: .84;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-table-badge {
  position: absolute;
  right: 6px;
  top: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, .84);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(2,8,23,.3);
}

.pos-table-dot {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .55);
}

.station-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.station-breakdown-card {
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
  padding: 16px;
}

.station-breakdown-table {
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.02);
}

.station-breakdown-table:last-child { margin-bottom: 0; }

.station-breakdown-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

body.app-live-screen .kds-sta-topbar,
body.app-live-screen .kds-line-topbar,
body.app-live-screen .kds-exp-topbar,
body.app-live-screen .kds-bp-topbar,
body.app-live-screen .sd-topbar {
  padding-top: calc(max(12px, env(safe-area-inset-top)) + 42px);
  padding-right: max(16px, min(232px, 34vw));
}

body.app-live-screen .kds-sta-nav,
body.app-live-screen .kds-line-station-links,
body.app-live-screen .kds-exp-nav,
body.app-live-screen .kds-bp-nav,
body.app-live-screen .sd-topbar-links {
  min-width: 0;
}

body.app-live-screen .kds-sta-nav-link,
body.app-live-screen .kds-line-station-link,
body.app-live-screen .kds-exp-nav-link,
body.app-live-screen .kds-bp-nav-link,
body.app-live-screen .sd-topbar-link {
  white-space: normal;
  text-align: center;
}

@media (max-width: 1100px) {
  .live-board-screen { padding: 14px; }
  .live-floor-viewport { min-height: calc(100dvh - 270px); }
}

@media (max-width: 900px) {
  body.app-live-screen { overflow: auto; }
  .live-board-screen { padding: 12px; min-height: 100dvh; }
  .live-floor-viewport { min-height: 58dvh; padding: 10px; }
  .live-board-toolbar { align-items: stretch; }
  .live-board-toggle { width: 100%; justify-content: space-between; }
  .live-board-toggle button { flex: 1 1 0; }
  .live-screen-controls {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .live-screen-install-btn {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
  }
  .live-terminal-bar {
    padding: 64px 14px 0;
  }
  .live-terminal-bar-head {
    padding-right: 0;
  }
  .live-terminal-page {
    font-size: 24px;
  }
  .live-terminal-bar-row {
    align-items: stretch;
  }
  .live-terminal-bar-actions {
    width: 100%;
  }
  .live-terminal-exit-btn {
    width: 100%;
  }
  body.app-live-screen .kds-sta-topbar,
  body.app-live-screen .kds-line-topbar,
  body.app-live-screen .kds-exp-topbar,
  body.app-live-screen .kds-bp-topbar,
  body.app-live-screen .sd-topbar {
    padding-top: calc(max(10px, env(safe-area-inset-top)) + 52px);
    padding-right: 12px;
  }
  body.app-live-screen .kds-sta-nav,
  body.app-live-screen .kds-line-station-links,
  body.app-live-screen .kds-exp-nav,
  body.app-live-screen .kds-bp-nav,
  body.app-live-screen .sd-topbar-links {
    margin-left: 0;
    width: 100%;
  }
  body.app-live-screen .kds-sta-nav-link,
  body.app-live-screen .kds-line-station-link,
  body.app-live-screen .kds-exp-nav-link,
  body.app-live-screen .kds-bp-nav-link,
  body.app-live-screen .sd-topbar-link {
    flex: 1 1 140px;
  }
  body.app-live-screen .kds-sta-refresh,
  body.app-live-screen .kds-line-refresh,
  body.app-live-screen .kds-exp-refresh,
  body.app-live-screen .kds-bp-refresh {
    width: 100%;
    text-align: right;
  }
}

@media (max-width: 768px) {
  .live-floor-viewport { min-height: 54dvh; }
  .station-breakdown-grid { grid-template-columns: 1fr; }
  .pos-table-ref { font-size: 12px; }
  .pos-table-btn:not(.is-round) .pos-table-state { font-size: 9px; padding: 2px 6px; }
}

/* ── Live board topbar ─────────────────────────────────────────── */
.live-board-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.live-board-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 280px;
  min-width: 0;
}

.live-board-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 320px;
  min-width: 0;
  justify-content: flex-end;
}

.live-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.22);
  color: #e5eefc;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: background .15s;
  flex-shrink: 0;
}

.live-back-btn:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
  text-decoration: none;
}

.live-board-plan-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(226,232,240,.85);
}

.live-board-date-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.live-board-date-form > * {
  min-width: 0;
}

.live-board-date-input {
  flex: 1 1 148px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.7);
  color: #e5eefc;
  font-size: 13px;
  outline: none;
  min-width: 0;
  max-width: 100%;
}

.live-board-date-input:focus {
  border-color: rgba(59,130,246,.6);
}

.live-board-date-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(59,130,246,.4);
  background: rgba(59,130,246,.18);
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.live-board-date-btn:hover {
  background: rgba(59,130,246,.32);
  color: #fff;
}

.station-breakdown-actions form {
  margin: 0;
  display: flex;
  min-width: 0;
}

.station-breakdown-actions .btn,
.station-breakdown-actions form .btn {
  width: 100%;
  justify-content: center;
  white-space: normal;
}

/* ── Register back button ──────────────────────────────────────── */
.reg-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}

.reg-back-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
  border-color: var(--color-text-muted);
  text-decoration: none;
}

@media (max-width: 768px) {
  .live-board-topbar { gap: 8px; }
  .live-board-topbar-right {
    width: 100%;
    justify-content: flex-start;
  }
  .live-board-date-form { width: 100%; }
  .live-board-date-input { font-size: 12px; padding: 5px 8px; }
  .live-board-date-btn { padding: 5px 10px; font-size: 12px; }
  .station-breakdown-actions,
  .station-breakdown-actions form {
    width: 100%;
  }
}

/* ── Register: keep live-screen wrapper from clipping register height ── */
@media (max-width: 1024px) {
  .live-screen-shell[data-terminal-kind="server-checks"].has-terminal-nav .live-main-content,
  .live-screen-shell[data-terminal-kind="clock-terminal"].has-terminal-nav .live-main-content {
    overflow: auto;
  }
  .app-live-screen .reg-shell {
    flex-direction: row;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .app-live-screen .reg-menu {
    border-right: 1px solid var(--color-border);
    border-bottom: none;
  }
  .app-live-screen .reg-product-grid {
    max-height: none;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }
  .app-live-screen .reg-check { width: 320px; }
}

/* At very small screens (phones), allow vertical scroll */
@media (max-width: 600px) {
  .live-terminal-bar {
    padding: 64px 12px 0;
  }
  .live-terminal-bar-row {
    padding: 12px;
  }
  .live-terminal-nav {
    width: 100%;
  }
  .live-terminal-nav-link {
    flex: 1 1 100%;
  }
  .app-live-screen .reg-shell {
    flex-direction: column;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .app-live-screen .reg-check { width: 100%; }
  .app-live-screen .reg-product-grid { max-height: 280px; }
}

/* ── Recall / check detail: keep full-screen terminals usable ───────── */
.live-screen-shell[data-terminal-kind="register"] .live-main-content,
.live-screen-shell[data-terminal-kind="recall"] .live-main-content,
.live-screen-shell[data-terminal-kind="order-detail"] .live-main-content {
  min-height: 0;
  padding: 16px 16px 24px;
  overflow: auto;
}

.live-screen-shell[data-terminal-kind="register"] .live-main-content > *,
.live-screen-shell[data-terminal-kind="recall"] .live-main-content > *,
.live-screen-shell[data-terminal-kind="order-detail"] .live-main-content > * {
  min-width: 0;
}

.os-action-inline-form {
  display: inline-flex;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}

.board-fallback-wrap {
  margin-top: 16px;
}

.board-fallback-card {
  background: rgba(15,23,42,.82);
  border-color: rgba(148,163,184,.18);
}

.board-fallback-card .card-header {
  background: rgba(15,23,42,.9);
  border-bottom-color: rgba(148,163,184,.16);
}

.board-fallback-card .card-title,
.board-fallback-card .card-subtitle,
.board-fallback-card .card-header-meta {
  color: #e5eefc;
}

.board-fallback-card .card-subtitle,
.board-fallback-card .card-header-meta {
  color: rgba(226,232,240,.72);
}

.board-fallback-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-fallback-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}

.board-fallback-copy {
  min-width: 0;
  flex: 1 1 320px;
}

.board-fallback-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #f8fbff;
}

.board-fallback-order {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.board-fallback-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.board-fallback-chip.is-open {
  background: rgba(37,99,235,.18);
  border-color: rgba(147,197,253,.36);
  color: #bfdbfe;
}

.board-fallback-chip.is-saved {
  background: rgba(148,163,184,.14);
  border-color: rgba(148,163,184,.28);
  color: #cbd5e1;
}

.board-fallback-chip.is-reason {
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.28);
  color: #fde68a;
}

.board-fallback-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: rgba(226,232,240,.78);
  font-size: 12px;
}

.board-fallback-note,
.board-fallback-access {
  margin-top: 8px;
  font-size: 12px;
}

.board-fallback-note {
  color: #cbd5e1;
}

.board-fallback-access {
  color: #fde68a;
}

.board-fallback-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 1 auto;
}

.board-fallback-actions form {
  margin: 0;
}

.board-fallback-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(148,163,184,.08);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .live-screen-shell[data-terminal-kind="register"] .live-main-content,
  .live-screen-shell[data-terminal-kind="recall"] .live-main-content,
  .live-screen-shell[data-terminal-kind="order-detail"] .live-main-content {
    padding: 12px;
  }

  .board-fallback-actions,
  .board-fallback-actions form,
  .board-fallback-actions .btn,
  .board-fallback-static {
    width: 100%;
  }
}

/* ── Floor Map Zoom Bar ──────────────────────────────────────────────── */
.live-map-zoombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
}
.live-map-zoombar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text);
  transition: background .1s;
}
.zoom-btn:hover { background: var(--color-border); }

/* ── Floor Table Popup ───────────────────────────────────────────────── */
.floor-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
}
.floor-table-popup {
  position: fixed;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.2);
  padding: 14px 16px 12px;
  min-width: 220px;
  max-width: 300px;
}
.floor-table-popup-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.floor-table-popup-hdr strong {
  font-size: 15px;
  color: var(--color-text);
  display: block;
}
.floor-popup-state {
  font-size: 12px;
  color: var(--color-text-muted);
  display: block;
  margin-top: 1px;
}
.floor-popup-x {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  margin-top: -2px;
}
.floor-popup-x:hover { background: var(--color-border); color: var(--color-text); }
.floor-popup-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.floor-popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.floor-popup-actions .btn[aria-disabled="true"],
.floor-popup-actions .btn:disabled {
  pointer-events: none;
  opacity: .55;
}
.os-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.os-modal-overlay.is-open { display: flex; }
.os-modal-card {
  width: min(420px, 100%);
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.45);
  padding: 22px;
}
.os-modal-title { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.os-modal-copy { font-size: 13px; color: #cbd5e1; margin: 0 0 16px; line-height: 1.45; }
.os-modal-field { margin-bottom: 12px; }
.os-modal-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  margin-bottom: 6px;
}
.os-modal-input,
.os-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(148,163,184,.28);
  background: #111827;
  color: #f8fafc;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  outline: none;
}
.os-modal-input:focus,
.os-modal-textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.2);
}
.os-modal-input.pin { text-align: center; font-size: 22px; letter-spacing: .28em; }
.os-modal-help { margin: -4px 0 12px; color: #94a3b8; font-size: 12px; }
.os-modal-keypad-display { caret-color: transparent; }
.os-modal-numpad { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:2px 0 12px; }
.os-modal-numpad-btn { min-height:52px; border-radius:12px; border:1px solid rgba(148,163,184,.24); background:#0f172a; color:#f8fafc; font-size:20px; font-weight:800; cursor:pointer; }
.os-modal-numpad-btn:hover { background:#162033; }
.os-modal-numpad-btn.is-secondary { font-size:14px; color:#cbd5e1; background:#172033; }
.os-modal-error { display: none; margin-bottom: 12px; color: #fca5a5; font-size: 12px; }
.os-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.os-modal-steps { margin: 0; padding-left: 18px; color: #e2e8f0; font-size: 13px; line-height: 1.5; }
.os-modal-steps li + li { margin-top: 8px; }
.os-modal-btn {
  flex: 1;
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.os-modal-btn.primary { background: #2563eb; color: #fff; }
.os-modal-btn.primary:hover { background: #1d4ed8; }
.os-modal-btn.secondary {
  background: transparent;
  color: #cbd5e1;
  border-color: rgba(148,163,184,.28);
}
.os-modal-btn.secondary:hover { background: rgba(148,163,184,.08); }
/* ── Clock widget (register topbar + board topbar) ──────────── */
.clock-widget { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.clock-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:12px; font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.clock-chip.is-in  { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.clock-chip.is-out { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.clock-chip::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.clock-chip.is-in::before  { background:#22c55e; }
.clock-chip.is-out::before { background:#ef4444; }
.clock-action-btn { padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; border:1.5px solid; cursor:pointer; line-height:1.6; white-space:nowrap; transition:all .12s; background:transparent; }
.clock-action-btn.do-in  { border-color:#22c55e; color:#166534; }
.clock-action-btn.do-in:hover  { background:#22c55e; color:#fff; }
.clock-action-btn.do-out { border-color:#ef4444; color:#991b1b; }
.clock-action-btn.do-out:hover { background:#ef4444; color:#fff; }
/* Dark topbar version (board page) */
.live-board-topbar .clock-chip.is-in  { background:rgba(34,197,94,.18); color:#86efac; border-color:rgba(34,197,94,.4); }
.live-board-topbar .clock-chip.is-out { background:rgba(239,68,68,.18); color:#fca5a5; border-color:rgba(239,68,68,.4); }
.live-board-topbar .clock-chip.is-in::before  { background:#22c55e; }
.live-board-topbar .clock-chip.is-out::before { background:#ef4444; }
.live-board-topbar .clock-action-btn.do-in  { border-color:#86efac; color:#86efac; }
.live-board-topbar .clock-action-btn.do-in:hover  { background:#22c55e; border-color:#22c55e; color:#fff; }
.live-board-topbar .clock-action-btn.do-out { border-color:#fca5a5; color:#fca5a5; }
.live-board-topbar .clock-action-btn.do-out:hover { background:#ef4444; border-color:#ef4444; color:#fff; }

/* ── Operator clock-out section (register/clock page) ──────────── */
.op-clock-out-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-4); }
.op-clock-out-card h4 { margin:0 0 var(--space-2); font-size:var(--text-sm); font-weight:700; }
.op-clock-out-card p  { margin:0 0 var(--space-4); font-size:var(--text-sm); color:var(--color-text-muted); }


.pos-table-dot.has-badge {
  left: 7px;
  right: auto;
}

.live-board-live-region {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-board-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.live-board-stack .live-board-pane[data-board-pane="map"] {
  order: 1;
}

.live-board-stack .live-board-toolbar {
  order: 2;
  margin: 0;
}

.live-board-stack .live-board-pane[data-board-pane="list"] {
  order: 3;
}

.live-screen-shell[data-terminal-kind="server-checks"].has-terminal-nav .live-main-content {
  order: 1;
  overflow: auto;
  padding-bottom: 10px;
}

.live-screen-shell[data-terminal-kind="server-checks"].has-terminal-nav .live-terminal-bar {
  order: 2;
  padding: 0 18px max(14px, env(safe-area-inset-bottom));
}

.live-screen-shell[data-terminal-kind="server-checks"] .live-terminal-bar-head {
  display: none;
}

.live-screen-shell[data-terminal-kind="server-checks"] .live-terminal-bar-row {
  border-top: 1px solid rgba(96,165,250,.14);
  padding-top: 10px;
}

.live-board-topbar {
  margin-bottom: 10px;
}

.live-board-topbar .clock-action-btn,
.live-board-topbar .session-primary-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.22);
}

.live-board-topbar .session-primary-btn.do-in {
  background: linear-gradient(135deg, rgba(34,197,94,.28), rgba(22,163,74,.18));
}

.live-board-topbar .session-primary-btn.do-out {
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(153,27,27,.14));
}

.live-board-refresh-btn {
  min-height: 42px;
  padding: 8px 14px;
}

.live-board-refresh-status {
  min-width: 132px;
}

@media (max-width: 768px) {
  .live-screen-shell[data-terminal-kind="server-checks"].has-terminal-nav .live-terminal-bar {
    padding: 0 12px max(12px, env(safe-area-inset-bottom));
  }

  .live-board-topbar .session-primary-btn,
  .live-board-refresh-btn {
    width: 100%;
  }
}

/* ── Landing Page ─────────────────────────────────────────────────── */
body.landing-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 28%),
    radial-gradient(circle at 85% 8%, rgba(15, 23, 42, 0.08), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.landing-shell {
  width: 100%;
  min-height: 100vh;
  padding: var(--space-6);
}

.landing-header,
.landing-main,
.landing-footer {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.landing-header {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) clamp(16px, 2vw, 20px);
  margin-bottom: var(--space-8);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.landing-brand:hover,
.marketing-link-card:hover {
  text-decoration: none;
}

.landing-brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(37, 99, 235, 0.16);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
  overflow: hidden;
}

.landing-brand-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-brand-image-logo {
  transform: scale(1.18);
}

.landing-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.landing-brand-copy strong {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.landing-brand-copy span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.landing-nav,
.landing-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.landing-nav {
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.landing-nav a,
.landing-footer a {
  color: var(--color-text-muted);
  font-weight: 600;
}

.landing-nav a {
  padding: 10px 14px;
  border-radius: 999px;
}

.landing-nav a:hover,
.landing-footer a:hover {
  color: var(--color-text);
}

.btn-lg {
  padding: 12px 18px;
  font-size: var(--text-base);
}

.landing-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.landing-hero,
.landing-proof-strip,
.landing-section,
.landing-cta {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.08);
}

.landing-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  position: relative;
}

.landing-home-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 52%;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0.02) 58%, transparent 72%);
  transform: translate(-50%, -18%);
  pointer-events: none;
}

.landing-hero-copy,
.landing-home-stage {
  position: relative;
  z-index: 1;
}

.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-hero-copy h1,
.landing-section-intro h2,
.landing-cta h2 {
  margin: var(--space-4) 0 var(--space-4);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #091225;
}

.landing-hero-copy h1 {
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  max-width: 11ch;
}

.landing-section-intro h2,
.landing-cta h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}

.landing-lead,
.landing-section-intro p,
.landing-card p,
.landing-pricing-card p,
.landing-step p,
.landing-panel-card p,
.landing-cta p,
.landing-source-grid p,
.landing-proof-strip p,
.landing-home-stage p,
.landing-home-highlights span,
.landing-home-capability-card li {
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.landing-home-hero-copy .landing-lead {
  max-width: 62ch;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.landing-inline-metrics,
.landing-panel-list,
.landing-pricing-card ul {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.landing-home-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.landing-home-highlights li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.92) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
}

.landing-home-highlights strong {
  font-size: var(--text-md);
  color: #091225;
}

.landing-home-stage {
  display: flex;
  align-items: stretch;
}

.landing-home-stage-card {
  width: 100%;
  border-radius: 28px;
  padding: clamp(22px, 3vw, 30px);
  background: linear-gradient(180deg, #0f172a 0%, #101f3b 56%, #0f172a 100%);
  color: #fff;
  box-shadow: 0 36px 68px rgba(15, 23, 42, 0.24);
}

.landing-home-stage-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.landing-panel-label {
  display: inline-block;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-home-stage-card h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1.1;
  margin: var(--space-3) 0 0;
  color: #fff;
}

.landing-home-stage-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--text-sm);
  font-weight: 700;
}

.landing-home-stage-pulse span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.18);
}

.landing-home-stage-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.landing-home-stage-metrics article {
  min-height: 158px;
  padding: var(--space-5);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.landing-home-stage-kicker {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: rgba(191, 219, 254, 0.92);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.landing-home-stage-metrics strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  color: #fff;
}

.landing-home-stage-metrics p,
.landing-home-flow-step p {
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

.landing-home-flow {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.landing-home-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-home-flow-step span {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #091225;
  background: linear-gradient(180deg, #dbeafe 0%, #93c5fd 100%);
}

.landing-home-flow-step strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: var(--text-md);
}

.landing-proof-strip-rich {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
}

.landing-proof-strip-rich article {
  padding: var(--space-5);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0.92) 100%);
  border: 1px solid rgba(37, 99, 235, 0.08);
}

.landing-proof-strip strong,
.landing-card h3,
.landing-step h3,
.landing-pricing-card h3,
.landing-source-grid strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(1.08rem, 1.8vw, 1.2rem);
  color: #091225;
}

.landing-section,
.landing-cta {
  padding: clamp(24px, 3.5vw, 40px);
}

.landing-section-intro {
  max-width: 760px;
  margin-bottom: var(--space-6);
}

.landing-home-intro-wide {
  max-width: 840px;
}

.landing-grid {
  display: grid;
  gap: var(--space-5);
}

.landing-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-card,
.landing-pricing-card,
.landing-step,
.landing-source-grid article {
  background: var(--color-surface);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;
  padding: var(--space-6);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.landing-home-story-grid,
.landing-home-capability-grid {
  align-items: stretch;
}

.landing-home-story-card,
.landing-home-capability-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
}

.landing-home-capability-card ul {
  margin: var(--space-5) 0 0;
  padding-left: 18px;
}

.landing-home-capability-card li + li {
  margin-top: var(--space-3);
}

.landing-section-accent {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.landing-ops-band {
  position: relative;
  overflow: hidden;
}

.landing-ops-band::after {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.01) 68%, transparent 72%);
  pointer-events: none;
}

.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.landing-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-5);
}

.landing-pricing-card-featured {
  border-color: rgba(37, 99, 235, 0.26);
  box-shadow: 0 24px 42px rgba(37, 99, 235, 0.12);
}

.landing-pricing-badge {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: var(--text-xs);
}

.landing-price {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #091225;
}

.landing-price span,
.landing-price-small {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-muted);
}

.landing-pricing-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.landing-pricing-card li {
  padding: 0 0 0 var(--space-5);
  background: none;
  border: none;
  position: relative;
  font-weight: 500;
  color: var(--color-text-muted);
}

.landing-pricing-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
}

.landing-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.landing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #fff;
}

.landing-cta h2,
.landing-cta p,
.landing-cta .landing-eyebrow {
  color: #fff;
}

.landing-cta .landing-eyebrow {
  background: rgba(255, 255, 255, 0.14);
}

.landing-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4) 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(180px, 0.7fr));
  gap: var(--space-5);
  padding: clamp(22px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 26px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.06);
}

.landing-footer-brand {
  display: grid;
  gap: var(--space-4);
}

.landing-brand-footer {
  width: fit-content;
}

.landing-footer-heading {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: #091225;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.landing-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.landing-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-2);
}

.landing-nav a.is-active {
  color: var(--color-primary-dark);
  font-weight: 700;
  background: rgba(37, 99, 235, 0.1);
}

.marketing-page-main {
  gap: var(--space-6);
}

.marketing-page-hero {
  padding-top: clamp(28px, 4vw, 44px);
}

.marketing-page-intro {
  max-width: 880px;
}

.marketing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: var(--space-5);
  align-items: stretch;
}

.marketing-hero-rail {
  display: grid;
  gap: var(--space-4);
}

.marketing-hero-panel {
  padding: var(--space-5);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.94) 100%);
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: 0 18px 32px rgba(15,23,42,.05);
}

.marketing-hero-panel h3,
.marketing-hero-panel strong {
  color: #091225;
}

.marketing-hero-panel-dark {
  background: linear-gradient(180deg, #0f172a 0%, #172554 100%);
  color: #fff;
  border-color: rgba(59,130,246,.16);
  box-shadow: 0 30px 56px rgba(15,23,42,.2);
}

.marketing-hero-panel-dark h3,
.marketing-hero-panel-dark p,
.marketing-hero-panel-dark strong,
.marketing-hero-panel-dark .landing-card-kicker,
.marketing-hero-panel-dark li {
  color: #fff;
}

.marketing-hero-panel-dark .landing-card-kicker {
  opacity: .88;
}

.marketing-hero-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.marketing-hero-list li {
  position: relative;
  padding-left: 18px;
}

.marketing-hero-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #93c5fd;
}

.marketing-mini-proof {
  padding: 0;
}

.marketing-link-grid {
  align-items: stretch;
}

.marketing-link-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.marketing-link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 22px 38px rgba(15,23,42,.09);
}

.landing-card-kicker {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-primary-dark);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pricing-page-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pricing-hero-panel .landing-price {
  margin: 12px 0 16px;
  color: #fff;
}

.pricing-hero-panel .landing-price span {
  color: rgba(255, 255, 255, 0.78);
}

.pricing-side-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
}

.pricing-side-list li::before {
  background: var(--color-primary);
}

.pricing-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.pricing-summary-strip article,
.pricing-scope-card {
  background: var(--color-surface);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;
  padding: var(--space-6);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.05);
}

.pricing-summary-strip strong,
.pricing-scope-card h3 {
  display: block;
  margin-bottom: var(--space-2);
  color: #091225;
}

.pricing-summary-strip p,
.pricing-scope-card p,
.pricing-scope-card li,
.pricing-breakout-note {
  color: var(--color-text-muted);
}

.pricing-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.pricing-scope-card-featured {
  border-color: rgba(37, 99, 235, 0.26);
  box-shadow: 0 24px 42px rgba(37, 99, 235, 0.12);
}

.pricing-scope-card ul {
  margin: var(--space-4) 0 0;
  padding-left: 18px;
  display: grid;
  gap: var(--space-3);
}

.pricing-breakout-card ul {
  margin-bottom: var(--space-5);
}

.pricing-breakout-note {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.marketing-steps-tall {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-proof-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

.ops-proof-card,
.launch-lane-card {
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,252,.98) 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  padding: var(--space-6);
  box-shadow: 0 20px 38px rgba(15, 23, 42, 0.06);
}

.ops-proof-card-dark,
.launch-lane-card-featured {
  color: #e5eefb;
  background: linear-gradient(160deg, #081121 0%, #0f1f3d 56%, #163b73 100%);
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 28px 48px rgba(8, 17, 33, 0.28);
}

.ops-proof-card-dark h3,
.ops-proof-card-dark p,
.ops-proof-card-dark li,
.launch-lane-card-featured h3,
.launch-lane-card-featured p,
.launch-lane-card-featured li {
  color: inherit;
}

.ops-proof-card-topbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

.ops-proof-status,
.ops-proof-muted {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.ops-proof-status {
  color: #dbeafe;
  background: rgba(96, 165, 250, 0.2);
}

.ops-proof-muted {
  color: #475569;
  background: rgba(148, 163, 184, 0.14);
}

.ops-proof-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.ops-proof-stat-row-light {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-proof-stat-row div {
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ops-proof-card:not(.ops-proof-card-dark) .ops-proof-stat-row div {
  background: rgba(37, 99, 235, 0.05);
  border-color: rgba(37, 99, 235, 0.1);
}

.ops-proof-stat-row span {
  display: block;
  margin-bottom: 6px;
  color: inherit;
  opacity: .78;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ops-proof-stat-row strong {
  display: block;
  color: inherit;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

.ops-proof-list,
.launch-lane-card ul {
  margin: var(--space-4) 0 0;
  padding-left: 18px;
  display: grid;
  gap: var(--space-3);
}

.ops-proof-stack {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ops-proof-stack div {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ops-proof-stack strong {
  display: block;
  color: #0f172a;
  margin-bottom: 6px;
}

.ops-proof-stack span,
.ops-proof-note,
.launch-lane-card p,
.launch-lane-card li,
.auth-next-steps span {
  color: var(--color-text-muted);
}

.launch-readiness-grid,
.launch-lane-grid,
.auth-next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.launch-readiness-card,
.auth-next-steps article {
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
}

.launch-lane-card .landing-card-kicker,
.auth-next-steps strong {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.auth-next-steps {
  margin-bottom: var(--space-6);
}

.auth-next-steps article {
  background: rgba(255,255,255,.98);
  border-radius: 18px;
  padding: 16px 18px;
}

.auth-next-steps strong {
  color: #091225;
}

@media (max-width: 1120px) {
  .landing-header {
    position: static;
  }

  .landing-home-hero,
  .landing-proof-strip-rich,
  .landing-home-stage-metrics,
  .landing-grid-3,
  .landing-grid-2,
  .landing-source-grid,
  .landing-pricing-grid,
  .pricing-page-grid,
  .landing-steps,
  .marketing-steps-tall,
  .marketing-hero-grid,
  .landing-footer-grid,
  .auth-setup-list,
  .pricing-summary-strip,
  .ops-proof-grid,
  .launch-readiness-grid,
  .launch-lane-grid,
  .auth-next-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .landing-shell {
    padding: var(--space-4);
  }

  .landing-header {
    flex-wrap: wrap;
    border-radius: 22px;
  }

  .landing-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .landing-nav a {
    white-space: nowrap;
  }

  .landing-home-hero,
  .landing-proof-strip-rich,
  .landing-grid-3,
  .landing-grid-2,
  .landing-source-grid,
  .landing-home-stage-metrics,
  .landing-home-highlights,
  .landing-pricing-grid,
  .pricing-page-grid,
  .landing-steps,
  .marketing-steps-tall,
  .auth-setup-list,
  .pricing-summary-strip,
  .pricing-scope-grid,
  .ops-proof-grid,
  .launch-readiness-grid,
  .launch-lane-grid,
  .auth-next-steps,
  .ops-proof-stat-row,
  .ops-proof-stat-row-light {
    grid-template-columns: 1fr;
  }

  .landing-home-hero::before,
  .landing-ops-band::after {
    display: none;
  }

  .landing-cta,
  .landing-footer,
  .landing-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .marketing-hero-grid,
  .landing-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-header-actions,
  .landing-hero-actions,
  .landing-hero-actions-end {
    width: 100%;
  }

  .landing-header-actions .btn,
  .landing-hero-actions .btn,
  .landing-hero-actions-end .btn {
    width: 100%;
    justify-content: center;
  }

  .landing-home-stage-topbar,
  .landing-home-flow-step {
    grid-template-columns: 1fr;
    display: grid;
  }

  .landing-footer-grid {
    padding: var(--space-5);
  }

  .auth-setup-list,
  .pricing-summary-strip,
  .pricing-scope-grid,
  .launch-readiness-grid,
  .launch-lane-grid,
  .auth-next-steps {
    grid-template-columns: 1fr;
  }

  .landing-home-stage-card,
  .landing-card,
  .landing-pricing-card,
  .landing-proof-strip-rich article {
    border-radius: 20px;
  }
}

@media (max-width: 980px) {
  .auth-shell,
  .auth-shell-compact {
    grid-template-columns: 1fr;
    max-width: 760px;
  }

  .auth-panel-brand {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .auth-main {
    padding: var(--space-4);
  }

  .auth-panel-brand,
  .auth-panel-form,
  .auth-card,
  .auth-form-surface {
    border-radius: 22px;
    padding: var(--space-6);
  }

  .auth-brand-image {
    width: min(240px, 100%);
  }
}


.guide-section {
  scroll-margin-top: 120px;
}

.guide-link-grid {
  align-items: stretch;
}

.guide-checklist {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.guide-checklist li {
  position: relative;
  padding-left: 18px;
  color: var(--color-text-muted);
}

.guide-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
}

.guide-spotlight-grid,
.guide-workflow-grid {
  align-items: stretch;
}

.guide-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.guide-section-tools,
.guide-workflow-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.guide-direct-link,
.guide-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.guide-direct-link:hover,
.guide-copy-button:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.guide-copy-button {
  appearance: none;
}

.guide-workflow-card {
  scroll-margin-top: 120px;
}

.guide-workflow-card:target,
.guide-section:target {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 24px 48px rgba(59, 130, 246, 0.14);
}

.guide-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.guide-workflow-summary {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  max-width: 58ch;
}

.guide-change-strip {
  margin-top: var(--space-4);
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(59, 130, 246, 0.16);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.guide-change-kicker {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.guide-change-list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
}

.guide-change-list li + li {
  margin-top: 6px;
}

.guide-spotlight-card {
  min-height: 100%;
}

@media (max-width: 900px) {
  .guide-utility-shell {
    grid-template-columns: 1fr;
  }

  .guide-sticky-index {
    position: static;
  }
}

@media (max-width: 760px) {
  .guide-section-tools,
  .guide-workflow-actions {
    width: 100%;
  }

  .guide-direct-link,
  .guide-copy-button {
    flex: 1 1 180px;
  }

  .guide-index-link {
    padding: 12px 14px;
  }
}


.guide-utility-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.guide-search-card,
.guide-sticky-index {
  border: 1px solid rgba(148, 163, 184, 0.14);
}

.guide-search-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guide-search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  padding: 14px 16px;
  font: inherit;
}

.guide-search-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.guide-search-meta {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.guide-search-results {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.86);
}

.guide-search-results strong {
  color: var(--color-text);
  font-size: 15px;
}

.guide-search-results span {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.guide-filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.guide-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(241, 245, 249, 0.9);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.guide-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.guide-search-action {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.08);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.guide-search-action:hover {
  background: rgba(59, 130, 246, 0.14);
  transform: translateY(-1px);
}

.guide-search-action[hidden] {
  display: none !important;
}

.guide-sticky-index {
  position: sticky;
  top: 16px;
}

.guide-index-links {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.guide-index-link {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.guide-index-link span {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.guide-index-link strong {
  color: var(--color-text);
  font-size: 15px;
}

.guide-index-link:hover {
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.guide-role-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.guide-role-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.guide-role-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.guide-role-chip.is-active {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-primary);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
}

[hidden][data-guide-role-group] {
  display: none !important;
}


.landing-header-package {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.92) 100%);
  color: #f8fafc;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.14);
}

.landing-footer-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-4);
}

.landing-footer-proof span,
.auth-package-note {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.12);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: 700;
}

.landing-decision-strip {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,247,251,0.96) 100%);
}

.decision-strip-grid,
.product-journey-grid,
.pricing-compare-grid,
.workflow-connection-grid,
.landing-cta-split {
  display: grid;
  gap: var(--space-5);
}

.decision-strip-grid,
.product-journey-grid,
.pricing-compare-grid,
.workflow-connection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-strip-card,
.product-journey-card,
.pricing-compare-card,
.workflow-connection-card,
.landing-cta-rail {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.06);
}

.decision-strip-card h3,
.product-journey-card h3,
.pricing-compare-card h3,
.workflow-connection-card h3,
.landing-cta-rail h3 {
  margin: 0 0 var(--space-3);
  color: #091225;
  font-size: clamp(1.12rem, 1.8vw, 1.34rem);
  line-height: 1.15;
}

.decision-strip-card p,
.product-journey-card p,
.pricing-compare-card p,
.product-journey-card li,
.pricing-compare-card li,
.workflow-connection-card p,
.landing-cta-rail p,
.landing-cta-rail li,
.signup-timeline span {
  color: var(--color-text-muted);
}

.decision-strip-card-dark,
.product-journey-card-dark,
.pricing-compare-card-dark,
.workflow-connection-card-dark,
.landing-cta-rail-dark {
  background: linear-gradient(160deg, #081121 0%, #10213e 58%, #163b73 100%);
  border-color: rgba(96, 165, 250, 0.24);
  box-shadow: 0 28px 48px rgba(8, 17, 33, 0.28);
}

.decision-strip-card-dark h3,
.decision-strip-card-dark p,
.product-journey-card-dark h3,
.product-journey-card-dark p,
.pricing-compare-card-dark h3,
.pricing-compare-card-dark p,
.pricing-compare-card-dark li,
.workflow-connection-card-dark h3,
.workflow-connection-card-dark p,
.landing-cta-rail-dark h3,
.landing-cta-rail-dark p,
.landing-cta-rail-dark li {
  color: #e5eefb;
}

.pricing-compare-card ul,
.landing-cta-rail ul {
  margin: var(--space-4) 0 0;
  padding-left: 18px;
  display: grid;
  gap: var(--space-3);
}

.landing-cta-split {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: start;
}

.landing-cta-side {
  display: grid;
  gap: var(--space-4);
}

.signup-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.signup-timeline article {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.97) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.05);
}

.signup-timeline strong {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: #091225;
}

.auth-package-note {
  margin-bottom: var(--space-5);
  border-radius: 16px;
  padding: 14px 16px;
  display: block;
}

@media (max-width: 1120px) {
  .decision-strip-grid,
  .product-journey-grid,
  .pricing-compare-grid,
  .workflow-connection-grid,
  .signup-timeline,
  .landing-cta-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .landing-header-package {
    width: 100%;
    justify-content: center;
  }

  .decision-strip-grid,
  .product-journey-grid,
  .pricing-compare-grid,
  .workflow-connection-grid,
  .signup-timeline,
  .landing-cta-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .landing-footer-proof {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ── Online Ordering Public Flow ─────────────────────────────────── */
body.ordering-page {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(15, 23, 42, 0.08), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.ordering-shell .landing-main {
  gap: var(--space-6);
}

.ordering-shell .btn.is-disabled {
  opacity: .55;
  pointer-events: none;
}

.ordering-hero,
.ordering-storefront-hero {
  position: relative;
}

.ordering-hero::after,
.ordering-storefront-hero::after,
.ordering-category-section::after,
.ordering-checkout-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.ordering-hero::after,
.ordering-storefront-hero::after {
  right: -90px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0.02) 60%, transparent 72%);
}

.ordering-hero-copy h1 {
  max-width: 12ch;
}

.ordering-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.ordering-hero-stats article {
  padding: var(--space-5);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
}

.ordering-hero-stats strong {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  color: #091225;
  line-height: 1;
}

.ordering-hero-stats span {
  display: block;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ordering-hero-stage {
  display: flex;
  align-items: stretch;
}

.ordering-stage-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ordering-stage-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: flex-start;
  flex-wrap: wrap;
}

.ordering-stage-header h2 {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.08;
  color: #fff;
}

.ordering-stage-list {
  display: grid;
  gap: var(--space-4);
}

.ordering-stage-list article {
  padding: var(--space-5);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ordering-stage-list strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: var(--text-md);
}

.ordering-stage-list p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.6;
}

.ordering-locations-section,
.ordering-category-section,
.ordering-checkout-section {
  position: relative;
  overflow: hidden;
}

.ordering-section-intro p,
.ordering-category-intro p,
.ordering-checkout-intro p {
  max-width: 65ch;
}

.ordering-empty-state {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  display: grid;
  gap: var(--space-3);
}

.ordering-empty-state strong {
  color: #091225;
  font-size: var(--text-lg);
}

.ordering-empty-state p {
  margin: 0;
  color: var(--color-text-muted);
}

.ordering-location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.ordering-location-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.94) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.ordering-location-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.ordering-location-head h3 {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  color: #091225;
}

.ordering-location-head p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ordering-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.18);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.ordering-location-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ordering-manager-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: 22px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.ordering-manager-preview strong {
  display: block;
  margin-bottom: 4px;
  color: #091225;
}

.ordering-manager-preview p {
  margin: 0;
  color: var(--color-text-muted);
}

.ordering-storefront-copy .landing-lead {
  max-width: 60ch;
}

.ordering-storefront-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}

.ordering-meta-pill,
.ordering-category-link,
.ordering-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.84);
  color: #091225;
  font-size: var(--text-sm);
  font-weight: 700;
}

.ordering-meta-pill.is-muted {
  color: var(--color-text-muted);
  font-weight: 600;
}

.ordering-note-card {
  display: grid;
  gap: 6px;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.ordering-note-card strong,
.ordering-card-heading h3 {
  color: #091225;
}

.ordering-note-card p,
.ordering-card-heading p,
.ordering-summary-note {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.ordering-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-6);
}

.ordering-category-link {
  text-decoration: none;
}

.ordering-category-link:hover {
  text-decoration: none;
  background: var(--color-primary-light);
  border-color: rgba(37, 99, 235, 0.18);
}

.ordering-cart-panel,
.ordering-checkout-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-4);
  padding: clamp(20px, 2.5vw, 26px);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 24px 46px rgba(15, 23, 42, 0.08);
}

.ordering-cart-panel {
  align-self: start;
  position: sticky;
  top: 104px;
}

.ordering-cart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.ordering-cart-head strong {
  display: block;
  font-size: clamp(1.2rem, 1.8vw, 1.35rem);
  color: #091225;
}

.ordering-cart-head p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ordering-cart-empty {
  padding: var(--space-5);
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px dashed rgba(37, 99, 235, 0.18);
}

.ordering-cart-empty strong {
  display: block;
  color: #091225;
  margin-bottom: 4px;
}

.ordering-cart-empty p,
.ordering-cart-lines li,
.ordering-summary-meta,
.ordering-product-description,
.ordering-product-summary {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
}

.ordering-cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ordering-cart-lines li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.ordering-cart-lines li strong {
  color: #091225;
  white-space: nowrap;
}

.ordering-cart-lines li.is-more {
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--color-text);
  font-weight: 700;
}

.ordering-cart-metrics {
  display: grid;
  gap: 10px;
}

.ordering-cart-metric,
.ordering-total-box > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.ordering-cart-metric span,
.ordering-total-box span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ordering-cart-metric strong,
.ordering-total-box strong,
.ordering-price {
  color: #091225;
  font-size: var(--text-lg);
}

.ordering-cart-metric.total,
.ordering-total-box .is-total {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.ordering-cart-actions {
  display: grid;
  gap: 10px;
}

.ordering-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-5);
}

.ordering-product-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.05);
}

.ordering-product-card.is-unavailable {
  opacity: .78;
}

.ordering-product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.ordering-product-copy {
  display: grid;
  gap: 8px;
}

.ordering-product-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ordering-product-title-row h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.32rem);
  color: #091225;
}

.ordering-station-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ordering-product-summary {
  font-weight: 600;
}

.ordering-soldout-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.14);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ordering-add-form {
  display: grid;
  gap: var(--space-4);
}

.ordering-modifier-group {
  padding: var(--space-4);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ordering-modifier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.ordering-modifier-head strong {
  color: #091225;
  font-size: var(--text-sm);
}

.ordering-modifier-head span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ordering-modifier-options {
  display: grid;
  gap: 10px;
}

.ordering-modifier-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ordering-modifier-option input {
  margin: 0;
}

.ordering-modifier-name {
  color: #091225;
  font-weight: 600;
}

.ordering-modifier-price {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.ordering-add-grid,
.ordering-field-grid {
  display: grid;
  gap: 14px;
}

.ordering-add-grid {
  grid-template-columns: 110px minmax(0, 1fr);
}

.ordering-field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ordering-field,
.ordering-qty-field {
  display: grid;
  gap: 8px;
}

.ordering-field > span,
.ordering-qty-field > span {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.ordering-field-span-2,
.ordering-field-full {
  grid-column: 1 / -1;
}

.ordering-shell .stg-input,
.ordering-shell .stg-select,
.ordering-shell .stg-textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #fff;
  color: #091225;
  font-size: var(--text-sm);
  outline: none;
  font-family: inherit;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.ordering-shell .stg-textarea {
  min-height: 110px;
  resize: vertical;
}

.ordering-shell .stg-input:focus,
.ordering-shell .stg-select:focus,
.ordering-shell .stg-textarea:focus {
  border-color: rgba(37, 99, 235, 0.44);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
}

.ordering-checkout-intro {
  margin-bottom: var(--space-6);
}

.ordering-step-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}

.ordering-step-pill {
  color: var(--color-text-muted);
  font-weight: 700;
}

.ordering-step-pill.is-active {
  background: var(--color-primary-light);
  border-color: rgba(37, 99, 235, 0.18);
  color: var(--color-primary-dark);
}

.ordering-preview-banner,
.ordering-banner,
.ordering-summary-note {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.ordering-preview-banner--compact,
.ordering-summary-note--compact {
  padding: 10px 12px;
  border-radius: 14px;
}

.ordering-preview-banner {
  margin-top: var(--space-5);
  background: rgba(37, 99, 235, 0.06);
  color: var(--color-primary-dark);
}

.ordering-banner {
  display: grid;
  gap: 10px;
  margin-bottom: var(--space-6);
  background: rgba(255, 255, 255, 0.9);
}

.ordering-banner.is-success {
  border-color: rgba(34, 197, 94, 0.18);
  background: rgba(240, 253, 244, 0.96);
}

.ordering-banner.is-warn {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 235, 0.96);
}

.ordering-banner.is-info {
  border-color: rgba(14, 165, 233, 0.18);
  background: rgba(236, 254, 255, 0.96);
}

.ordering-banner-copy strong {
  display: block;
  color: #091225;
  margin-bottom: 4px;
}

.ordering-banner-copy p {
  margin: 0;
  color: var(--color-text-muted);
}

.ordering-banner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ordering-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.94fr);
  gap: var(--space-5);
}

.ordering-card-heading {
  display: grid;
  gap: 6px;
}

.ordering-card-heading h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.35rem);
}

.ordering-summary-list {
  display: grid;
  gap: 12px;
}

.ordering-summary-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.ordering-summary-item:last-child {
  border-bottom: 0;
}

.ordering-summary-item strong {
  color: #091225;
}

.ordering-summary-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

.ordering-total-box {
  display: grid;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.ordering-checkout-form {
  display: grid;
  gap: var(--space-5);
}

.ordering-resume-payment {
  margin-top: 14px;
}

@media (max-width: 1120px) {
  .ordering-hero-stats,
  .ordering-checkout-grid {
    grid-template-columns: 1fr;
  }

  .ordering-cart-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  .ordering-location-grid,
  .ordering-product-grid,
  .ordering-field-grid {
    grid-template-columns: 1fr;
  }

  .ordering-manager-preview,
  .ordering-stage-header,
  .ordering-summary-item,
  .ordering-cart-head,
  .ordering-product-head,
  .ordering-location-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ordering-summary-actions {
    justify-items: start;
    text-align: left;
  }

  .ordering-add-grid {
    grid-template-columns: 1fr;
  }

  .ordering-field-span-2,
  .ordering-field-full {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .ordering-shell .landing-main {
    gap: var(--space-5);
  }

  .ordering-hero-stats,
  .ordering-stage-list,
  .ordering-location-grid,
  .ordering-product-grid,
  .ordering-summary-list,
  .ordering-field-grid {
    gap: var(--space-4);
  }

  .ordering-meta-pill,
  .ordering-category-link,
  .ordering-step-pill {
    width: 100%;
    justify-content: center;
  }

  .ordering-cart-panel,
  .ordering-checkout-card,
  .ordering-product-card,
  .ordering-location-card {
    padding: var(--space-5);
    border-radius: 22px;
  }
}

/* ====================================================================
   Public Online Ordering — software app shell
   ====================================================================== */
html.ordering-app-html,
html.ordering-app-html body { height: 100%; overflow: hidden; }
body.ordering-app-page { background: #eef2f6; color: var(--color-text); overflow: hidden; }
body.ordering-app-page a:hover { text-decoration: none; }
.ordering-app-shell { height: 100dvh; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); background: #eef2f6; }
.ordering-app-topbar { height: var(--topbar-height); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:0 var(--space-4); background:rgba(255,255,255,.96); border-bottom:1px solid #d7dee8; box-shadow:0 1px 0 rgba(15,23,42,.03); position:relative; z-index:30; }
.ordering-app-topbar-main,.ordering-app-topbar-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.ordering-app-topbar-note { box-shadow:none; white-space:nowrap; }
.ordering-app-brand { display:flex; align-items:center; gap:10px; color:var(--color-text); min-width:0; }
.ordering-app-brand-mark { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%); color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; flex-shrink:0; }
.ordering-app-brand-copy,.ordering-app-title-stack { display:flex; flex-direction:column; min-width:0; }
.ordering-app-brand-copy strong,.ordering-app-title-stack strong { font-size:13px; line-height:1.15; font-weight:700; color:var(--color-text); }
.ordering-app-brand-copy span,.ordering-app-title-stack span { font-size:12px; color:var(--color-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ordering-app-toolbar-btn { display:inline-flex; flex-direction:column; justify-content:center; gap:4px; width:34px; height:34px; border-radius:10px; border:1px solid #d7dee8; background:#fff; cursor:pointer; padding:0 8px; box-shadow:var(--shadow-sm); }
.ordering-app-toolbar-btn span { display:block; width:100%; height:2px; border-radius:999px; background:#475569; }
.ordering-app-body { min-height:0; display:grid; grid-template-columns:280px minmax(0, 1fr) 360px; }
.ordering-app-body--directory { grid-template-columns:280px minmax(0, 1fr); }
.ordering-app-body--checkout { grid-template-columns:260px minmax(0, 1fr) 380px; }
.ordering-app-body--status { grid-template-columns:260px minmax(0, 1fr) 360px; }
.ordering-app-sidebar,.ordering-app-workspace,.ordering-app-rail { min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px; }
.ordering-app-sidebar { border-right:1px solid #d7dee8; background:#f7f9fc; }
.ordering-app-rail { border-left:1px solid #d7dee8; background:#f7f9fc; }
.ordering-pane-stack { display:flex; flex-direction:column; gap:12px; }
.ordering-pane-card,.ordering-workspace-panel,.ordering-software-card,.ordering-product-card--software,.ordering-form-panel { background:#fff; border:1px solid #d7dee8; border-radius:16px; box-shadow:var(--shadow-sm); }
.ordering-pane-card,.ordering-form-panel { padding:14px; }
.ordering-pane-card--accent { background:linear-gradient(180deg,#111827 0%,#1f2937 100%); border-color:#1f2937; }
.ordering-pane-card--accent .ordering-pane-label,.ordering-pane-card--accent p,.ordering-pane-card--accent h1,.ordering-pane-card--accent strong,.ordering-pane-card--accent span { color:#e5eefb; }
.ordering-pane-card h1,.ordering-pane-card h2,.ordering-workspace-head h2,.ordering-menu-section-head h3,.ordering-card-heading h3 { margin:0; font-size:18px; line-height:1.2; font-weight:700; color:var(--color-text); }
.ordering-pane-card p,.ordering-workspace-head p,.ordering-menu-section-head p,.ordering-card-heading p,.ordering-pane-card li,.ordering-summary-meta,.ordering-empty-state p,.ordering-status-event p,.order-status-side-item p,.ordering-field small { margin:0; font-size:12px; line-height:1.55; color:var(--color-text-muted); }
.ordering-pane-label { display:inline-flex; font-size:11px; line-height:1; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin-bottom:10px; }
.ordering-pane-section-head,.ordering-workspace-head,.ordering-menu-section-head,.ordering-card-heading,.ordering-software-card-head,.ordering-status-event-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ordering-app-nav-list,.ordering-rule-list,.ordering-step-list { display:flex; flex-direction:column; gap:8px; padding:0; margin:0; list-style:none; }
.ordering-app-nav-link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; border:1px solid #e2e8f0; background:#f8fafc; color:var(--color-text); font-size:13px; font-weight:600; }
.ordering-app-nav-link small { font-size:11px; color:var(--color-text-muted); }
.ordering-app-nav-link.is-active { border-color:rgba(37,99,235,.24); background:#eff6ff; color:#1d4ed8; }
.ordering-stat-list { display:grid; gap:10px; }
.ordering-stat-list article,.ordering-status-meta-card,.ordering-status-event,.order-status-side-item,.ordering-summary-item,.ordering-cart-metric,.ordering-summary-note,.ordering-note-card,.ordering-banner { border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
.ordering-stat-list article { padding:12px; }
.ordering-stat-list strong { display:block; font-size:18px; line-height:1; font-weight:800; color:var(--color-text); }
.ordering-stat-list span { display:block; margin-top:6px; font-size:12px; color:var(--color-text-muted); }
.ordering-step-list li,.ordering-rule-list li { padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; font-size:12px; color:var(--color-text); }
.ordering-workspace-panel { min-height:100%; padding:16px; }
.ordering-workspace-head { margin-bottom:16px; }
.ordering-workspace-head-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ordering-menu-section + .ordering-menu-section { margin-top:18px; }
.ordering-menu-section-head { margin-bottom:12px; }
.ordering-software-grid { display:grid; gap:14px; }
.ordering-software-grid--locations { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.ordering-software-grid--products { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.ordering-software-card,.ordering-product-card--software { padding:14px; }
.ordering-software-card h3,.ordering-product-card h3 { margin:0; font-size:16px; font-weight:700; color:var(--color-text); }
.ordering-software-card p,.ordering-product-description,.ordering-product-summary { margin:0; font-size:12px; line-height:1.55; color:var(--color-text-muted); }
.ordering-software-card-meta,.ordering-storefront-meta { display:flex; flex-wrap:wrap; gap:8px; }
.ordering-software-card-actions,.ordering-cart-actions { display:grid; gap:8px; margin-top:14px; }
.ordering-live-badge,.ordering-meta-pill,.ordering-station-pill,.ordering-step-pill,.order-status-pill { display:inline-flex; align-items:center; justify-content:center; min-height:28px; padding:0 10px; border-radius:999px; border:1px solid #d7dee8; background:#f8fafc; font-size:11px; font-weight:700; line-height:1; letter-spacing:.04em; text-transform:uppercase; color:#475569; }
.ordering-live-badge { border-color:rgba(22,163,74,.2); background:#f0fdf4; color:#15803d; }
.ordering-step-strip { display:flex; flex-wrap:wrap; gap:8px; }
.ordering-step-strip--stacked { flex-direction:column; }
.ordering-step-pill.is-active { background:#eff6ff; border-color:rgba(37,99,235,.24); color:#1d4ed8; }
.ordering-step-pill.is-complete { background:#ecfdf3; border-color:rgba(22,163,74,.24); color:#15803d; }
.ordering-product-head { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; }
.ordering-product-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ordering-price { font-size:16px; font-weight:800; color:var(--color-text); }
.ordering-soldout-badge { margin-top:10px; }
.ordering-add-form,.ordering-checkout-form { margin-top:14px; }
.ordering-modifier-group + .ordering-modifier-group { margin-top:10px; }
.ordering-modifier-head { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ordering-modifier-head strong,.ordering-modifier-head span { font-size:12px; }
.ordering-modifier-options { display:grid; gap:8px; }
.ordering-modifier-option { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.ordering-modifier-option input { margin:0; }
.ordering-modifier-name,.ordering-modifier-price { font-size:12px; color:var(--color-text); }
.ordering-add-grid,.ordering-field-grid { display:grid; gap:12px; }
.ordering-add-grid { grid-template-columns:90px minmax(0, 1fr); margin-top:12px; }
.ordering-field-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ordering-field { display:flex; flex-direction:column; gap:6px; }
.ordering-field > span { font-size:12px; font-weight:700; color:var(--color-text); }
.ordering-field small { display:block; }
.ordering-field-span-2,.ordering-field-full { grid-column:1 / -1; }
.ordering-cart-empty,.ordering-empty-state { padding:14px; border:1px dashed #cbd5e1; border-radius:14px; background:#f8fafc; }
.ordering-empty-state strong,.ordering-cart-empty strong { display:block; margin-bottom:6px; font-size:14px; color:var(--color-text); }
.ordering-empty-state--panel { margin-top:10px; }
.ordering-cart-lines,.ordering-summary-list,.order-status-side-list,.ordering-status-timeline { display:flex; flex-direction:column; gap:10px; }
.ordering-cart-lines { list-style:none; padding:0; margin:0; }
.ordering-cart-lines li,.ordering-summary-item,.order-status-side-item,.ordering-status-event { padding:12px; }
.ordering-cart-lines li { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.ordering-cart-lines li small,.order-status-side-time { display:block; margin-top:4px; font-size:11px; color:var(--color-text-light); }
.ordering-cart-lines--full { max-height:340px; overflow-y:auto; padding-right:2px; }
.ordering-cart-metrics,.ordering-total-box,.ordering-status-meta-grid,.ordering-status-facts { display:grid; gap:10px; margin-top:12px; }
.ordering-status-meta-grid { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); margin-bottom:16px; }
.ordering-status-facts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ordering-status-facts div,.ordering-status-meta-card { padding:12px; }
.ordering-status-facts span,.ordering-status-meta-card .ordering-pane-label { display:block; margin-bottom:6px; }
.ordering-status-facts strong,.ordering-status-meta-card strong,.ordering-status-event strong,.order-status-side-item strong,.ordering-summary-item strong { color:var(--color-text); }
.ordering-cart-metric,.ordering-total-box div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; }
.ordering-cart-metric.total,.ordering-total-box .is-total { background:#eff6ff; border-color:rgba(37,99,235,.2); }
.ordering-summary-actions { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.ordering-summary-note,.ordering-note-card,.ordering-banner { padding:12px 14px; }
.ordering-summary-note,.ordering-note-card { display:grid; gap:6px; }
.ordering-summary-note a { color:var(--color-primary); font-weight:600; }
.ordering-banner { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.ordering-banner-copy strong { display:block; margin-bottom:4px; font-size:13px; }
.ordering-banner-meta { display:flex; flex-direction:column; gap:4px; min-width:180px; font-size:12px; color:var(--color-text-muted); }
.ordering-banner.is-success { background:#f0fdf4; border-color:rgba(22,163,74,.18); }
.ordering-banner.is-warn { background:#fffbeb; border-color:rgba(217,119,6,.18); }
.ordering-banner.is-info { background:#eff6ff; border-color:rgba(37,99,235,.16); }
.ordering-preview-banner { margin-bottom:12px; padding:10px 12px; border-radius:12px; border:1px solid rgba(14,165,233,.18); background:#ecfeff; font-size:12px; color:#155e75; }
.ordering-checkout-hero { margin-bottom:12px; padding:16px; border-radius:16px; border:1px solid rgba(37,99,235,.14); background:linear-gradient(180deg,#ffffff 0%, #eff6ff 100%); display:grid; gap:14px; }
.ordering-checkout-hero-copy { display:grid; gap:6px; }
.ordering-checkout-hero-copy strong { color:var(--color-text); font-size:16px; line-height:1.2; }
.ordering-checkout-hero-copy p { margin:0; font-size:13px; line-height:1.6; color:var(--color-text-muted); }
.ordering-checkout-hero-highlights { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ordering-status-hero { margin-bottom:12px; padding:16px; border-radius:16px; border:1px solid rgba(37,99,235,.14); background:linear-gradient(180deg,#ffffff 0%, #eff6ff 100%); display:grid; gap:14px; }
.ordering-status-hero-copy { display:grid; gap:6px; }
.ordering-status-hero-copy strong { color:var(--color-text); font-size:16px; line-height:1.2; }
.ordering-status-hero-copy p { margin:0; font-size:13px; line-height:1.6; color:var(--color-text-muted); }
.ordering-status-hero-highlights { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ordering-status-hero-highlights article { display:grid; gap:6px; padding:12px 14px; border:1px solid rgba(37,99,235,.12); border-radius:14px; background:rgba(255,255,255,.82); }
.ordering-status-hero-highlights article strong { color:var(--color-text); font-size:14px; line-height:1.3; }
.ordering-status-hero-highlights article span:last-child { color:var(--color-text-muted); font-size:12px; line-height:1.55; }
.ordering-status-hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ordering-checkout-highlight { padding:12px; border-radius:14px; border:1px solid #dbe3ef; background:rgba(255,255,255,.86); display:grid; gap:4px; }
.ordering-checkout-highlight span { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#64748b; }
.ordering-checkout-highlight strong { color:var(--color-text); font-size:15px; line-height:1.25; }
.ordering-checkout-highlight small { font-size:12px; line-height:1.55; color:var(--color-text-muted); }
.ordering-summary-note--spotlight { border-color:rgba(37,99,235,.18); background:#eff6ff; }
.ordering-summary-note--spotlight strong { color:#1d4ed8; }
.ordering-promise-card { margin-bottom:12px; padding:14px; border-radius:14px; border:1px solid #dbe3ef; background:#f8fafc; display:grid; gap:10px; }
.ordering-promise-card--compact { margin-bottom:0; }
.ordering-promise-head { display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.ordering-promise-head strong { color:var(--color-text); font-size:14px; }
.ordering-promise-head p { margin:4px 0 0; font-size:12px; line-height:1.55; color:var(--color-text-muted); }
.ordering-suggested-times { display:flex; flex-wrap:wrap; gap:8px; }
.ordering-suggested-time-btn { appearance:none; border:1px solid #cbd5e1; background:#fff; color:var(--color-text); border-radius:999px; padding:7px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.ordering-suggested-time-btn:hover,.ordering-suggested-time-btn:focus-visible { border-color:var(--color-primary); color:var(--color-primary); outline:none; }
.ordering-form-panel { padding:16px; }
.ordering-status-event-head span { font-size:11px; color:var(--color-text-light); }
@media (max-width: 900px) {
  .ordering-checkout-hero-highlights { grid-template-columns:1fr; }
  .ordering-status-hero-highlights { grid-template-columns:1fr; }
  .ordering-status-hero-actions { flex-direction:column; }
  .ordering-status-hero-actions .btn { width:100%; justify-content:center; }
}

.ordering-app-overlay { position:fixed; inset:var(--topbar-height) 0 0 0; background:rgba(15,23,42,.45); z-index:39; }
.ordering-app-mobile-cart-btn,.ordering-app-toolbar-btn--mobile { display:none; }
@media (max-width: 1180px) {
  .ordering-app-body,.ordering-app-body--directory,.ordering-app-body--checkout,.ordering-app-body--status { grid-template-columns:minmax(0, 1fr); }
  .ordering-app-sidebar,.ordering-app-rail { position:fixed; top:var(--topbar-height); bottom:0; width:min(380px, 92vw); z-index:40; background:#f7f9fc; box-shadow:var(--shadow-lg); transition:transform .2s ease; border:none; }
  .ordering-app-sidebar { left:0; transform:translateX(-102%); }
  .ordering-app-rail { right:0; transform:translateX(102%); }
  .ordering-app-sidebar.is-open,.ordering-app-rail.is-open { transform:translateX(0); }
  .ordering-app-mobile-cart-btn,.ordering-app-toolbar-btn--mobile,.ordering-app-toolbar-btn { display:inline-flex; }
  .ordering-app-title-stack { display:none; }
}
@media (max-width: 900px) {
  .ordering-software-grid--products,.ordering-software-grid--locations,.ordering-field-grid,.ordering-status-meta-grid,.ordering-status-facts { grid-template-columns:1fr; }
  .ordering-add-grid { grid-template-columns:1fr; }
  .ordering-app-topbar { padding:0 12px; }
  .ordering-app-topbar-actions .btn-secondary,.ordering-app-topbar-actions .btn-ghost,.ordering-app-topbar-actions .ordering-app-topbar-note { display:none; }
  .ordering-app-topbar-actions .ordering-app-mobile-cart-btn,.ordering-app-topbar-actions .btn-primary { display:inline-flex; }
}


.ordering-directory-hero { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(280px, .95fr); gap:18px; margin-bottom:18px; padding:18px; border:1px solid #d7dee8; border-radius:20px; background:linear-gradient(135deg,#ffffff 0%,#f8fafc 58%,#eef4ff 100%); box-shadow:var(--shadow-sm); }
.ordering-directory-hero-copy { display:grid; gap:14px; align-content:start; }
.ordering-directory-hero-copy h2 { margin:0; font-size:28px; line-height:1.1; font-weight:800; color:var(--color-text); }
.ordering-directory-hero-copy p { margin:0; font-size:13px; line-height:1.65; color:var(--color-text-muted); max-width:62ch; }
.ordering-directory-highlight-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ordering-directory-highlight,.ordering-directory-signal { display:grid; gap:6px; padding:12px 14px; border:1px solid #dbe3ef; border-radius:16px; background:rgba(255,255,255,.88); }
.ordering-directory-highlight strong,.ordering-directory-signal strong,.ordering-directory-summary,.ordering-directory-action-note { color:var(--color-text); }
.ordering-directory-highlight strong { font-size:14px; line-height:1.3; }
.ordering-directory-highlight span,.ordering-directory-signal p,.ordering-directory-action-note { font-size:12px; line-height:1.6; color:var(--color-text-muted); }
.ordering-directory-signal-list { display:grid; gap:10px; align-content:start; }
.ordering-directory-signal { background:#f8fafc; }
.ordering-directory-signal .ordering-pane-label,.ordering-directory-highlight .ordering-pane-label { margin-bottom:2px; }
.ordering-software-card--directory { display:flex; flex-direction:column; gap:12px; border-color:#dbe3ef; box-shadow:0 18px 34px rgba(15,23,42,.05); }
.ordering-software-card-head--directory { align-items:flex-start; }
.ordering-directory-copy { display:grid; gap:10px; }
.ordering-directory-summary { margin:0; font-size:13px; line-height:1.65; }
.ordering-directory-link-row { display:grid; gap:6px; }
.ordering-software-card-actions--directory { margin-top:auto; }
.ordering-directory-action-note { display:block; }
.ordering-directory-link-row code,.ordering-discovery-card code { display:block; padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; font-size:12px; color:#0f172a; word-break:break-all; }
.ordering-discovery-stack { display:grid; gap:10px; }
.ordering-discovery-card { display:grid; gap:6px; padding:12px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
.ordering-discovery-card strong { color:var(--color-text); }
.ordering-discovery-card p { margin:0; font-size:12px; line-height:1.5; color:var(--color-text-muted); }

@media (max-width: 1180px) {
  .ordering-directory-hero { grid-template-columns:minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ordering-directory-highlight-grid { grid-template-columns:1fr; }
}

.ordering-repeat-stack {
    display: grid;
    gap: 10px;
}

.ordering-repeat-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.04);
}

.ordering-repeat-card strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
}

.ordering-repeat-card span {
    display: block;
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}

.ordering-repeat-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ordering-repeat-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.ordering-repeat-pill--success {
    border-color: rgba(34, 197, 94, 0.22);
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
}

.ordering-repeat-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ordering-repeat-card--landing {
    gap: 12px;
    padding: 14px;
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(255, 255, 255, 0.10);
}

.ordering-repeat-landing-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ordering-repeat-card-copy {
    color: #e2e8f0;
}

.ordering-repeat-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.5;
}

.ordering-repeat-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ordering-repeat-action-row form {
    display: flex;
}

.ordering-repeat-card--landing .ordering-repeat-pill {
    background: rgba(255, 255, 255, 0.88);
}

@media (max-width: 640px) {
    .ordering-repeat-landing-head {
        flex-direction: column;
    }

    .ordering-repeat-action-row form,
    .ordering-repeat-action-row .btn {
        width: 100%;
    }
}

.ordering-attach-stack {
    gap: 12px;
}

.ordering-attach-card {
    background: rgba(15, 23, 42, 0.03);
}

.ordering-attach-list {
    display: grid;
    gap: 8px;
}

.ordering-attach-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.ordering-attach-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ordering-attach-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.ordering-attach-copy strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
}

.ordering-attach-meta {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

.ordering-photo-upload-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--color-text-muted);
  font-size: 13px;
}

.ordering-manager-photo-panel {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 8px 0 18px;
}

.ordering-manager-photo-frame {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ordering-manager-photo-frame.has-image {
  background: #fff;
}

.ordering-manager-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ordering-manager-photo-fallback,
.ordering-manager-product-thumb span,
.ordering-cart-line-thumb span,
.ordering-product-media-fallback span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.ordering-manager-photo-fallback {
  width: 100%;
  height: 100%;
  font-size: 52px;
  color: #334155;
}

.ordering-manager-photo-status {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: #f8fafc;
  min-height: 100%;
}

.ordering-manager-photo-status.has-image {
  background: rgba(236, 253, 245, 0.9);
  border-color: rgba(16, 185, 129, 0.25);
}

.ordering-manager-photo-status strong {
  color: #091225;
}

.ordering-manager-photo-status span,
.ordering-photo-clear-toggle {
  font-size: 12px;
  color: var(--color-text-muted);
}

.ordering-manager-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.ordering-manager-product-thumb,
.ordering-cart-line-thumb {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #334155;
}

.ordering-manager-product-thumb.has-image,
.ordering-cart-line-thumb.has-image {
  background: #fff;
}

.ordering-manager-product-thumb img,
.ordering-cart-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ordering-product-media {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ordering-product-media.has-image {
  background: #fff;
}

.ordering-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ordering-product-media-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
  color: #334155;
}

.ordering-product-media-fallback span {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.ordering-product-media-fallback small {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.ordering-cart-line-rich {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ordering-cart-line-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ordering-cart-line-main > div:last-child {
  display: grid;
  gap: 4px;
}

@media (max-width: 900px) {
  .ordering-manager-photo-panel {
    grid-template-columns: 1fr;
  }
}

.ordering-summary-note span { display:block; }
.ordering-fulfillment-summary { margin-top:12px; padding:14px; border-radius:14px; border:1px solid #dbeafe; background:linear-gradient(180deg,#eff6ff 0%,#f8fafc 100%); display:grid; gap:10px; }
.ordering-fulfillment-summary.is-warn { border-color:#fde68a; background:linear-gradient(180deg,#fffbeb 0%,#f8fafc 100%); }
.ordering-fulfillment-summary-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ordering-fulfillment-summary-head strong { color:var(--color-text); font-size:14px; line-height:1.45; }
.ordering-fulfillment-summary p { margin:0; font-size:12px; line-height:1.6; color:var(--color-text-muted); }
.ordering-fulfillment-badges { display:flex; flex-wrap:wrap; gap:8px; }
.ordering-address-preview { display:grid; gap:4px; padding:10px 12px; border-radius:12px; background:#fff; border:1px dashed #cbd5e1; color:var(--color-text); font-size:12px; line-height:1.55; }
.ordering-address-preview .ordering-pane-label { margin-bottom:2px; }

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-workspace {
  background: linear-gradient(180deg, #f4f7fb 0%, #eef2f6 100%);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 18px;
}

.ordering-storefront-hero-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.95fr);
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #d7dee8;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 62%, #eef4ff 100%);
  box-shadow: var(--shadow-sm);
}

.ordering-storefront-hero-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.ordering-storefront-hero-copy h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 800;
  color: var(--color-text);
  max-width: 16ch;
}

.ordering-storefront-hero-copy p {
  margin: 0;
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.ordering-storefront-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ordering-storefront-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.ordering-storefront-hero-stats article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: rgba(255,255,255,0.82);
}

.ordering-storefront-hero-stats strong {
  font-size: 20px;
  line-height: 1;
  color: var(--color-text);
}

.ordering-storefront-hero-stats p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.ordering-storefront-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ordering-storefront-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d7dee8;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 700;
}

.ordering-storefront-category-chip:hover,
.ordering-storefront-category-chip:focus-visible {
  border-color: rgba(37,99,235,.24);
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.ordering-storefront-category-chip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  line-height: 1;
}

.ordering-workspace-head--storefront {
  margin-bottom: 18px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-menu-section-head {
  margin-bottom: 14px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-menu-section-head h3 {
  font-size: 20px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-grid--products {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software {
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail {
  background: #f5f7fb;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar .ordering-pane-card:not(.ordering-pane-card--accent),
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail .ordering-pane-card {
  background: rgba(255,255,255,0.92);
}

.ordering-storefront-support-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-style: solid;
}

.ordering-storefront-support-card .ordering-repeat-card--landing {
  background: #f8fbff;
  border-color: rgba(125, 211, 252, 0.24);
}

.ordering-storefront-support-card .ordering-repeat-card-copy,
.ordering-storefront-support-card .ordering-repeat-list {
  color: #475569;
}

@media (max-width: 1180px) {
  .ordering-storefront-hero-surface {
    grid-template-columns: minmax(0, 1fr);
  }

  .ordering-storefront-hero-copy h2 {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .ordering-storefront-hero-surface,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel {
    padding: 14px;
  }

  .ordering-storefront-hero-stats {
    grid-template-columns: 1fr;
  }

  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-grid--products {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ordering-storefront-hero-copy h2 {
    font-size: 24px;
  }

  .ordering-storefront-hero-actions .btn {
    width: 100%;
  }
}


/* Pass 181 shared public-ordering polish */
.ordering-app-shell[data-ordering-shell="directory"],
.ordering-app-shell[data-ordering-shell="storefront"],
.ordering-app-shell[data-ordering-shell="checkout"],
.ordering-app-shell[data-ordering-shell="status"] {
  background: linear-gradient(180deg, #f4f7fb 0%, #eef2f6 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
  padding: 18px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
  background: linear-gradient(180deg, #f8fafd 0%, #f4f7fb 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-workspace {
  background: linear-gradient(180deg, #f5f8fc 0%, #eef2f6 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-panel {
  min-height: 100%;
  padding: 18px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-stack,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-stack,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-pane-stack,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-stack {
  gap: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-card,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-card,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-pane-card,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-form-panel {
  padding: 16px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-card:not(.ordering-pane-card--accent),
.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-product-card--software,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-stat-list article,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-status-event,
.ordering-app-shell[data-ordering-shell="directory"] .order-status-side-item,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-note-card,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-banner,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-cart-metric,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-total-box > div,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-card:not(.ordering-pane-card--accent),
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-card,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-stat-list article,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-status-event,
.ordering-app-shell[data-ordering-shell="storefront"] .order-status-side-item,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-note-card,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-banner,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-cart-metric,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-total-box > div,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-pane-card:not(.ordering-pane-card--accent),
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-software-card,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-product-card--software,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-stat-list article,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-status-event,
.ordering-app-shell[data-ordering-shell="checkout"] .order-status-side-item,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-note-card,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-banner,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-cart-metric,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-total-box > div,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-card:not(.ordering-pane-card--accent),
.ordering-app-shell[data-ordering-shell="status"] .ordering-software-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-product-card--software,
.ordering-app-shell[data-ordering-shell="status"] .ordering-form-panel,
.ordering-app-shell[data-ordering-shell="status"] .ordering-stat-list article,
.ordering-app-shell[data-ordering-shell="status"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event,
.ordering-app-shell[data-ordering-shell="status"] .order-status-side-item,
.ordering-app-shell[data-ordering-shell="status"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="status"] .ordering-note-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-banner,
.ordering-app-shell[data-ordering-shell="status"] .ordering-cart-metric,
.ordering-app-shell[data-ordering-shell="status"] .ordering-total-box > div {
  border-color: #dbe4ef;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-card--accent,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-card--accent,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-pane-card--accent,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-card--accent {
  box-shadow: 0 16px 32px rgba(15,23,42,.18);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head {
  margin-bottom: 20px;
  padding-inline: 2px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head--compact,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head--compact {
  margin-bottom: 14px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head--compact h2,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head--compact h2 {
  max-width: 16ch;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head--compact p,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head--compact p {
  max-width: 44ch;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head h2,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head h2,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head h2,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head h2 {
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head p,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head p,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head p,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head p {
  max-width: 60ch;
  font-size: 13px;
  line-height: 1.65;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head-meta,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head-meta,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head-meta,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head-meta {
  gap: 10px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-card .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-card-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-card .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-software-card-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-pane-card .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="status"] .ordering-software-card-meta .ordering-meta-pill,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-card .ordering-meta-pill {
  background: #fff;
  border-color: #dbe4ef;
  color: #334155;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-surface,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero {
  border-color: #dbe4ef;
  box-shadow: 0 18px 38px rgba(15,23,42,.06);
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 56%, #eef4ff 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-signal,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats article,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-highlight,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights article {
  border-color: #dbe4ef;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card-actions,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-card-actions,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-software-card-actions,
.ordering-app-shell[data-ordering-shell="status"] .ordering-software-card-actions {
  margin-top: 16px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card--directory {
  border-radius: 20px;
  padding: 16px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card-actions--directory {
  padding-top: 14px;
  border-top: 1px solid #e5edf7;
  gap: 10px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card-actions--directory .btn-primary {
  width: 100%;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(37,99,235,.16);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-topbar-actions .btn,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-actions .btn,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar-actions .btn,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-actions .btn {
  min-height: 40px;
  border-radius: 12px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-note--spotlight {
  box-shadow: 0 12px 24px rgba(37,99,235,.09);
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-actions .btn-secondary {
  background: #fff;
  border-color: #dbe4ef;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-actions .btn-ghost {
  background: rgba(255,255,255,.68);
  border-color: #dbe4ef;
  color: var(--color-text);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar-note,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar-note,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar-note {
  min-height: 36px;
  padding-inline: 12px;
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(203, 213, 225, 0.85);
  color: #475569;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar-note {
  text-transform: none;
  letter-spacing: 0.01em;
}

.ordering-app-topbar-note--neutral {
  background: rgba(248, 250, 252, 0.96);
  border-color: rgba(203, 213, 225, 0.85);
  color: #475569;
}

.ordering-app-topbar-note--success {
  background: rgba(240, 253, 244, 0.96);
  border-color: rgba(22, 163, 74, 0.22);
  color: #15803d;
}

.ordering-app-topbar-note--warn {
  background: rgba(255, 251, 235, 0.96);
  border-color: rgba(217, 119, 6, 0.24);
  color: #b45309;
}

.ordering-app-topbar-note--danger {
  background: rgba(254, 242, 242, 0.96);
  border-color: rgba(220, 38, 38, 0.22);
  color: #b91c1c;
}

.ordering-app-topbar-note--info {
  background: rgba(239, 246, 255, 0.96);
  border-color: rgba(37, 99, 235, 0.22);
  color: #1d4ed8;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-support-card {
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.ordering-step-strip--hero {
  margin-top: 0;
  justify-content: flex-end;
}

.ordering-checkout-hero-top,
.ordering-status-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ordering-checkout-hero-support,
.ordering-status-hero-support {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-copy,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-copy {
  max-width: 620px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-copy strong,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-copy strong {
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-copy p,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-copy p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 58ch;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero {
  padding: 18px;
  gap: 16px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-highlight,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights article {
  min-height: 112px;
  align-content: start;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
  position: sticky;
  top: 82px;
  max-height: calc(100dvh - 82px);
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-list,
.ordering-app-shell[data-ordering-shell="status"] .order-status-side-list {
  gap: 12px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-section-head {
  margin: 18px 0 12px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-timeline {
  position: relative;
  gap: 12px;
  padding-left: 20px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, rgba(37,99,235,.24), rgba(148,163,184,.16));
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event {
  position: relative;
  background: rgba(255,255,255,.96);
  border-color: #dbe4ef;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 5px #eff6ff;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event.is-current {
  border-color: rgba(37,99,235,.24);
  box-shadow: 0 16px 32px rgba(37,99,235,.10);
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="status"] .order-status-side-item,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="status"] .ordering-summary-note {
  background: rgba(255,255,255,.94);
}

.ordering-operator-note {
  border-color: rgba(59,130,246,.18);
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.ordering-operator-note strong {
  color: #1d4ed8;
}

.ordering-operator-note span {
  display: block;
}

@media (max-width: 1100px) {
  .ordering-checkout-hero-top,
  .ordering-status-hero-top,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head {
    flex-direction: column;
  }

  .ordering-step-strip--hero,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-head-meta,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-head-meta {
    justify-content: flex-start;
  }

  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
    position: static;
    top: auto;
    max-height: none;
  }
}

@media (max-width: 900px) {
  body.is-ordering-drawer-open {
    overflow: hidden;
    touch-action: none;
  }

  .ordering-app-shell[data-ordering-shell="directory"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="directory"] .ordering-app-workspace,
  .ordering-app-shell[data-ordering-shell="directory"] .ordering-app-rail,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-workspace,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-workspace,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-workspace,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
    padding: 14px;
  }

  .ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-panel {
    padding: 14px;
  }

  .ordering-app-shell[data-ordering-shell="directory"] .ordering-app-topbar-actions::before,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar-actions::before,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar-actions::before,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar-actions::before {
    display: none;
  }

  .ordering-app-brand-copy span {
    display: none;
  }

  .ordering-app-sidebar,
  .ordering-app-rail {
    width: min(344px, 88vw);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-top: none;
    border-radius: 0 22px 22px 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  .ordering-app-rail {
    border-radius: 22px 0 0 22px;
  }
}

/* ── Online ordering public-surface polish (Pass 274) ───────────── */
body.ordering-app-page.has-sidebar {
  overflow: hidden;
}

body.ordering-app-page.has-sidebar .sidebar,
body.ordering-app-page.has-sidebar .page-wrapper > .topbar,
body.ordering-app-page.has-sidebar .page-wrapper > .sidebar-overlay,
body.ordering-app-page.has-sidebar .page-wrapper > .sidebar-toggle-btn {
  display: none !important;
}

body.ordering-app-page.has-sidebar .page-wrapper {
  margin-left: 0;
  min-height: 100dvh;
}

body.ordering-app-page.has-sidebar .main-content {
  max-width: none;
  padding: 0;
}

body.ordering-app-page .alert {
  margin: 12px 16px 0;
}

body.ordering-shell-page .auth-main,
body.ordering-shell-page .main-content,
body.ordering-shell-page .page-wrapper {
  max-width: none;
  padding: 0;
  margin: 0;
}

.ordering-app-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.ordering-app-utility-link:hover,
.ordering-app-utility-link:focus-visible {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.ordering-app-utility-inline {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  padding: 0 2px;
}

.ordering-app-utility-inline:hover,
.ordering-app-utility-inline:focus-visible {
  color: #0f172a;
  outline: none;
}

.ordering-app-utility-inline--return {
  position: relative;
  padding-left: 14px;
}

.ordering-app-utility-inline--return::before {
  content: "←";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
}

.ordering-app-utility-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(248, 250, 252, 0.92);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ordering-app-utility-chip:hover,
.ordering-app-utility-chip:focus-visible {
  border-color: rgba(37, 99, 235, 0.24);
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.ordering-app-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.ordering-app-drawer-head strong {
  display: block;
  font-size: 15px;
  line-height: 1.1;
  color: #0f172a;
}

.ordering-app-drawer-head .ordering-pane-label {
  margin-bottom: 6px;
}

.ordering-app-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.96);
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.ordering-app-drawer-close:hover,
.ordering-app-drawer-close:focus-visible {
  border-color: rgba(37, 99, 235, 0.24);
  color: #1d4ed8;
  outline: none;
}

.ordering-directory-utility-card p,
.ordering-discovery-card p {
  margin: 0;
}

.ordering-directory-card-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ordering-directory-card-mark {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(160deg, #111827 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 18px 30px rgba(29, 78, 216, 0.2);
}

.ordering-directory-facts {
  display: grid;
  gap: 8px;
}

.ordering-directory-facts > div {
  display: grid;
  gap: 6px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-pane-card--accent,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-pane-card--accent {
  background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.28), transparent 34%), linear-gradient(160deg, #0f172a 0%, #111827 52%, #1d4ed8 100%);
  border-color: rgba(30, 41, 59, 0.96);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar-actions,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar-actions,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar-actions {
  position: relative;
  gap: 12px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-topbar-actions::before,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-topbar-actions::before,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-topbar-actions::before {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(226, 232, 240, 0) 0%, rgba(203, 213, 225, 0.95) 24%, rgba(203, 213, 225, 0.95) 76%, rgba(226, 232, 240, 0) 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-workspace,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-workspace {
  background:
    radial-gradient(circle at top left, rgba(191, 219, 254, 0.42), transparent 26%),
    linear-gradient(180deg, #f4f7fb 0%, #edf2f7 100%);
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-panel,
.ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-panel {
  border-radius: 24px;
  padding: 22px;
}

.ordering-directory-hero,
.ordering-storefront-hero-surface {
  position: relative;
  overflow: hidden;
}

.ordering-directory-hero::after,
.ordering-storefront-hero-surface::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.16), rgba(96, 165, 250, 0));
  pointer-events: none;
}

.ordering-directory-hero-copy h2,
.ordering-storefront-hero-copy h2 {
  letter-spacing: -0.04em;
  max-width: 14ch;
}

.ordering-directory-highlight,
.ordering-directory-signal,
.ordering-storefront-hero-stats article {
  border-radius: 18px;
  padding: 14px 16px;
}

.ordering-directory-highlight strong,
.ordering-directory-signal strong,
.ordering-storefront-hero-stats strong {
  letter-spacing: -0.02em;
}

.ordering-storefront-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ordering-storefront-category-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -2px 18px;
  padding: 8px 2px 6px;
  background: linear-gradient(180deg, rgba(244, 247, 251, 0.96) 0%, rgba(244, 247, 251, 0.76) 70%, rgba(244, 247, 251, 0) 100%);
  backdrop-filter: blur(10px);
}

.ordering-storefront-category-chip {
  min-height: 44px;
  padding-inline: 16px;
  border-radius: 14px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 22px;
  border-color: #d9e2ee;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 42%, rgba(248, 250, 252, 0.52) 100%);
  pointer-events: none;
}

.ordering-product-media {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  margin-bottom: 16px;
}

.ordering-product-media.has-image {
  position: relative;
}

.ordering-product-media.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.18) 100%);
  pointer-events: none;
}

.ordering-product-media-fallback {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 30%),
    linear-gradient(160deg, #0f172a 0%, #172554 58%, #1d4ed8 100%);
  color: #e2e8f0;
  gap: 10px;
  padding: 20px;
}

.ordering-product-media-fallback span {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.ordering-product-media-fallback-copy {
  display: grid;
  gap: 4px;
  text-align: center;
}

.ordering-product-media-fallback-copy strong {
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}

.ordering-product-media-fallback small,
.ordering-product-media-fallback-copy small {
  color: rgba(226, 232, 240, 0.82);
}

.ordering-product-title-row {
  align-items: flex-start;
}

.ordering-price {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.ordering-add-grid {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: end;
}

.ordering-add-form .btn-full {
  min-height: 46px;
}

.ordering-cart-lines li {
  border-radius: 16px;
}

@media (max-width: 1180px) {
  .ordering-directory-hero-copy h2,
  .ordering-storefront-hero-copy h2 {
    max-width: none;
  }
}

@media (max-width: 900px) {
  body.ordering-app-page .alert {
    margin-inline: 12px;
  }

  .ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-workspace-panel,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-workspace-panel {
    padding: 16px;
    border-radius: 18px;
  }

  .ordering-directory-card-top {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .ordering-directory-card-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 16px;
  }

  .ordering-storefront-category-strip {
    top: -2px;
    margin-bottom: 14px;
    padding-top: 4px;
  }

  .ordering-app-utility-link,
  .ordering-app-utility-chip {
    width: 100%;
    justify-content: center;
  }

  .ordering-app-topbar-actions .ordering-app-utility-inline,
  .ordering-app-topbar-actions .ordering-app-topbar-note {
    display: none;
  }

  .ordering-app-sidebar,
  .ordering-app-rail {
    padding-top: 12px;
  }

  .ordering-app-drawer-head {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(247,249,252,0.98) 0%, rgba(247,249,252,0.94) 100%);
    backdrop-filter: blur(8px);
  }
}



/* Pass 277 — screenshot-led density polish */
.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-body--directory {
  grid-template-columns: 248px minmax(0, 1fr);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-body,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-body--commerce {
  grid-template-columns: 248px minmax(0, 1fr) 320px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-body--checkout {
  grid-template-columns: 244px minmax(0, 1fr) 336px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-app-body--status {
  grid-template-columns: 244px minmax(0, 1fr) 320px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-rail,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-sidebar,
.ordering-app-shell[data-ordering-shell="status"] .ordering-app-rail {
  padding: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-surface,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero {
  padding: 16px;
  gap: 14px;
  margin-bottom: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero-copy,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-copy {
  gap: 10px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero-copy h2,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-copy h2 {
  font-size: clamp(1.85rem, 2.7vw, 2.35rem);
  max-width: 13ch;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight-grid,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-highlights,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights {
  gap: 8px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-signal,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats article,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-highlight,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights article {
  padding: 12px 14px;
  min-height: 0;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight strong,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-signal strong,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats strong {
  font-size: 16px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight span,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-signal p,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats p,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-highlight small,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights article span:last-child {
  font-size: 11px;
  line-height: 1.5;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-section-head {
  margin-bottom: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-grid--locations,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-grid--products {
  gap: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-software-card--directory {
  gap: 10px;
  padding: 14px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-card-top {
  gap: 12px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-card-mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 18px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-summary,
.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-action-note {
  font-size: 12px;
  line-height: 1.55;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-surface {
  grid-template-columns: minmax(0, 1.16fr) minmax(250px, 0.9fr);
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-actions,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-actions {
  gap: 8px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-category-strip {
  margin-bottom: 14px;
  padding: 6px 2px 4px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-category-chip {
  min-height: 40px;
  padding: 0 12px;
  gap: 8px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-software-grid--products {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software {
  padding: 14px;
  gap: 12px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-media {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  margin-bottom: 12px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-media-fallback {
  padding: 16px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-media-fallback span {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-media-fallback-copy strong {
  font-size: 16px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-title-row h3 {
  font-size: 15px;
  line-height: 1.28;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-description,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-summary,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-field > span,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-qty-field > span {
  font-size: 12px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-add-grid {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-shell .stg-textarea {
  min-height: 86px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-add-form .btn-full,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-cart-actions .btn,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-actions .btn {
  min-height: 42px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-cart-panel,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-pane-card {
  gap: 12px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-copy strong,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-copy strong {
  font-size: 20px;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-copy p,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-copy p {
  font-size: 12px;
  line-height: 1.6;
}

.ordering-app-shell[data-ordering-shell="checkout"] .ordering-status-facts,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-grid {
  gap: 8px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 14px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-card,
.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-item,
.ordering-app-shell[data-ordering-shell="checkout"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="status"] .ordering-summary-note,
.ordering-app-shell[data-ordering-shell="status"] .order-status-side-item {
  padding: 12px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-timeline {
  gap: 10px;
}

.ordering-app-shell[data-ordering-shell="status"] .ordering-status-event::before {
  top: 16px;
}

.ordering-app-utility-inline {
  min-height: 34px;
  font-size: 12px;
}

.ordering-app-utility-chip,
.ordering-app-utility-link {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .ordering-app-shell[data-ordering-shell="directory"] .ordering-app-body--directory,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-body,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-app-body--commerce,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-app-body--checkout,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-app-body--status {
    grid-template-columns: minmax(0, 1fr);
  }

  .ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero-copy h2,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-copy h2 {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-hero,
  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-surface,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero {
    padding: 14px;
  }

  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-storefront-hero-stats,
  .ordering-app-shell[data-ordering-shell="checkout"] .ordering-checkout-hero-highlights,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-status-hero-highlights,
  .ordering-app-shell[data-ordering-shell="status"] .ordering-status-meta-grid,
  .ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-highlight-grid {
    grid-template-columns: 1fr;
  }

  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-card--software {
    padding: 13px;
  }

  .ordering-app-shell[data-ordering-shell="storefront"] .ordering-product-media {
    aspect-ratio: 16 / 10;
  }
}


/* Pass 278 — utility/support card pruning */
.ordering-quiet-tools {
  display: grid;
  gap: 6px;
  padding-top: 4px;
}

.ordering-quiet-tools--compact {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.ordering-quiet-tools-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.ordering-app-utility-inline--quiet {
  min-height: 0;
  padding: 0;
  font-size: 11px;
  color: #64748b;
}

.ordering-app-utility-inline--quiet:hover,
.ordering-app-utility-inline--quiet:focus-visible {
  color: #1d4ed8;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-workspace-head-meta,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-workspace-head-meta {
  display: none;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-discovery-stack--lean {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-quiet-tools,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-quiet-tools {
  margin-top: 2px;
}

@media (max-width: 900px) {
  .ordering-quiet-tools-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* Pass 281 — storefront empty-cart CTA suppression and directory proof-strip compaction */
.ordering-directory-proof-strip {
  display: grid;
  gap: 8px;
  align-content: start;
}

.ordering-directory-proof-pill {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 600;
}

.ordering-hero-support-note,
.ordering-cart-empty-note {
  display: grid;
  gap: 4px;
  padding: 11px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.ordering-hero-support-note {
  align-content: center;
  min-height: 42px;
}

.ordering-cart-empty-note strong {
  color: var(--color-text);
  font-size: 13px;
}

.ordering-cart-empty-note span {
  font-size: 12px;
}

.ordering-app-shell[data-ordering-shell="storefront"] .ordering-summary-note {
  gap: 4px;
}

.ordering-app-shell[data-ordering-shell="directory"] .ordering-directory-proof-strip,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-hero-support-note,
.ordering-app-shell[data-ordering-shell="storefront"] .ordering-cart-empty-note {
  box-shadow: none;
}

@media (max-width: 900px) {
  .ordering-directory-proof-pill {
    min-height: 0;
    padding: 11px 12px;
  }

  .ordering-hero-support-note,
  .ordering-cart-empty-note {
    width: 100%;
  }
}