/* ==========================================================================
   Aluvio design system
   1. Tokens          5. Forms
   2. Base + type     6. Data display
   3. Layout blocks   7. Product surfaces
   4. Buttons         8. Marketing
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
    /* Brand — emerald primary, gold accent */
    --qs-primary: #0f7a57;
    --qs-primary-hover: #0b6046;
    --qs-primary-dark: #084835;
    --qs-primary-soft: #e6f5ef;
    --qs-primary-softer: #f1f9f5;
    --qs-primary-border: #bee3d3;
    --qs-accent: #d4901f;
    --qs-accent-soft: #fbf3e6;
    /* Gold reads as brand at logo size but fails on small text — this is the text-safe gold */
    --qs-accent-ink: #8f5f0c;

    /* Status — retuned to sit at the same chroma as the brand */
    --qs-danger: #c0362b;
    --qs-danger-soft: #fceceb;
    --qs-warning: #a85408;
    --qs-warning-soft: #fdf3e7;
    --qs-info: #1d64d8;
    --qs-info-soft: #e9f0fd;

    /* Neutrals — true gray, no green cast */
    --qs-ink: #151a18;
    --qs-ink-soft: #3e4643;
    --qs-muted: #656c6a;
    --qs-faint: #9aa09e;
    --qs-surface: #ffffff;
    --qs-surface-subtle: #f8faf9;
    --qs-surface-sunken: #eff1f0;
    --qs-bg: #f6f7f7;
    --qs-border: #e5e8e7;
    --qs-border-strong: #cfd5d3;

    /* Dark surfaces — sidebars, heroes */
    --qs-dark-1: #123f2e;
    --qs-dark-2: #0a2419;
    --qs-dark-accent: #4fc984;

    /* Accent tints — one lightness and chroma level, so they read as a family */
    --qs-tint-teal: #e9f4f3;
    --qs-tint-teal-border: #cfe6e3;
    --qs-tint-teal-icon: #d3eae7;
    --qs-tint-teal-ink: #0e7168;
    --qs-tint-green: #e9f5ee;
    --qs-tint-green-border: #cfe6d9;
    --qs-tint-green-icon: #d4ecdf;
    --qs-tint-green-ink: #0f7a57;
    --qs-tint-amber: #fbf3e6;
    --qs-tint-amber-border: #f0dfc1;
    --qs-tint-amber-icon: #f6e6c9;
    --qs-tint-amber-ink: #8f5f0c;
    --qs-tint-blue: #edf1f8;
    --qs-tint-blue-border: #d6dfef;
    --qs-tint-blue-icon: #dce5f3;
    --qs-tint-blue-ink: #3b5691;
    --qs-tint-plum: #f3eef6;
    --qs-tint-plum-border: #e2d6e9;
    --qs-tint-plum-icon: #e9dff0;
    --qs-tint-plum-ink: #6b4a80;
    --qs-tint-slate: #eef1f1;
    --qs-tint-slate-border: #dbe1e0;
    --qs-tint-slate-icon: #e3e8e7;
    --qs-tint-slate-ink: #3f4f4b;

    /* Radii */
    --qs-radius-xs: 6px;
    --qs-radius-sm: 8px;
    --qs-radius: 12px;
    --qs-radius-lg: 16px;
    --qs-radius-xl: 22px;
    --qs-radius-pill: 999px;

    /* Elevation — layered and low-opacity, so surfaces stack without noise */
    --qs-shadow-xs: 0 1px 2px rgba(16, 38, 29, .05);
    --qs-shadow-sm: 0 1px 2px rgba(16, 38, 29, .05), 0 1px 3px rgba(16, 38, 29, .04);
    --qs-shadow: 0 1px 2px rgba(16, 38, 29, .04), 0 4px 12px -2px rgba(16, 38, 29, .06);
    --qs-shadow-md: 0 2px 4px rgba(16, 38, 29, .04), 0 12px 24px -6px rgba(16, 38, 29, .1);
    --qs-shadow-lg: 0 4px 8px rgba(16, 38, 29, .04), 0 24px 48px -12px rgba(16, 38, 29, .16);
    --qs-shadow-hover: var(--qs-shadow-md);

    /* Motion */
    --qs-ease: cubic-bezier(.32, .72, 0, 1);
    --qs-fast: .14s var(--qs-ease);
    --qs-base: .22s var(--qs-ease);

    --qs-focus: rgba(15, 122, 87, .22);
    --qs-focus-ring: 0 0 0 3px var(--qs-focus);

    --qs-font: 'Inter var', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', -apple-system,
               BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

    /* Bootstrap bridge */
    --bs-primary: #0f7a57;
    --bs-primary-rgb: 15, 122, 87;
    --bs-link-color: #0f7a57;
    --bs-link-hover-color: #0b6046;
    --bs-body-color: #151a18;
    --bs-secondary-color: #656c6a;
    --bs-border-color: #e5e8e7;
    --bs-border-radius: 12px;
    --bs-body-font-family: var(--qs-font);
}

/* --- 2. Base + typography ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body {
    min-height: 100%;
    font-family: var(--qs-font);
    background: var(--qs-bg);
    color: var(--qs-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    /* Inherit, so headings stay legible on dark surfaces (hero, promise, value cards) */
    color: inherit;
    font-weight: 640;
    line-height: 1.25;
    letter-spacing: -.021em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 1.95rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.28rem, 1.05rem + .8vw, 1.55rem); letter-spacing: -.025em; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
h5, h6 { font-size: .92rem; }

p { text-wrap: pretty; }
small, .small { font-size: .82rem; }
strong, b { font-weight: 640; }
hr { border-color: var(--qs-border); opacity: 1; }

a, .btn-link { color: var(--qs-primary); text-underline-offset: .18em; }
a:hover { color: var(--qs-primary-hover); }

::selection { background: var(--qs-primary-soft); color: var(--qs-primary-dark); }

.text-muted { color: var(--qs-muted) !important; }
.qs-num, .qs-metric-card h2, .qs-price { font-variant-numeric: tabular-nums; }

/* One consistent, keyboard-only focus ring across the whole app */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--qs-primary); outline-offset: 2px; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { outline: none; box-shadow: var(--qs-focus-ring); }

/* Refined scrollbars — pointer devices only; they read as clutter on touch */
@media (hover: hover) {
    * { scrollbar-width: thin; scrollbar-color: var(--qs-border-strong) transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        border: 3px solid transparent;
        border-radius: 99px;
        background: var(--qs-border-strong);
        background-clip: content-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--qs-faint); background-clip: content-box; }
}

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

/* --- Brand -------------------------------------------------------------- */
/* The mark is the "a": frame + "luvio" read as one word. */
.aluvio-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1;
}

.aluvio-name { font-size: 1.15em; }

/* Gold frame, letter in the text colour (see AluvioLogo.razor): ink on the
   light topbar, white on the dark ones. Sized so the frame stands as tall as the "l". */
.aluvio-mark {
    --aluvio-frame: #e8b44a;
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    margin: 0 -.03em -.06em 0; /* the frame ends inside its box; pull the "l" up to it */
    overflow: visible;
}

.aluvio-mark-frame { fill: none; stroke: var(--aluvio-frame); stroke-width: 4.5; }
.aluvio-mark-letter { fill: currentColor; fill-rule: evenodd; }

.app-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--qs-ink); }
.app-brand:hover { color: var(--qs-ink); }
.app-brand-tagline { color: var(--qs-muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; }

.qs-icon { flex: 0 0 auto; vertical-align: -.18em; }

/* --- 3. Layout blocks --------------------------------------------------- */
.qs-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: .25rem;
}

.qs-page-head h1 { margin-bottom: .25rem; }
.qs-subtitle { max-width: 62ch; color: var(--qs-muted); margin: 0; font-size: .925rem; }

.qs-section-title {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 2rem 0 .35rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--qs-border);
}
.qs-section-title h3 { margin: 0; font-size: 1.1rem; }

.qs-section-kicker {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Cards */
.card {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    box-shadow: var(--qs-shadow-sm);
    background: var(--qs-surface);
    overflow: clip;
    transition: border-color var(--qs-base), box-shadow var(--qs-base), transform var(--qs-base);
}

.card-header {
    display: flex;
    align-items: center;
    min-height: 3.35rem;
    padding: .85rem 1.25rem;
    background: var(--qs-surface);
    border-bottom: 1px solid var(--qs-border);
    color: var(--qs-ink);
    font-size: .95rem;
    font-weight: 640;
    letter-spacing: -.012em;
}
.card-header a { font-size: .85rem; font-weight: 550; text-decoration: none; }
.card-header a:hover { text-decoration: underline; }

.card-body { padding: 1.25rem; }
.card-footer { padding: .9rem 1.25rem; background: var(--qs-surface-subtle); border-top: 1px solid var(--qs-border); }

.qs-hover:hover {
    border-color: var(--qs-border-strong);
    box-shadow: var(--qs-shadow-md);
    transform: translateY(-2px);
}

/* Empty state */
.qs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.75rem 1.25rem;
    color: var(--qs-muted);
    text-align: center;
}
.qs-empty strong { color: var(--qs-ink-soft); font-size: .95rem; }
.qs-empty p { max-width: 38ch; margin: 0; font-size: .875rem; }

/* --- 4. Buttons --------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .45rem 1rem;
    border-radius: var(--qs-radius-sm);
    font-size: .9rem;
    font-weight: 580;
    letter-spacing: -.008em;
    line-height: 1.3;
    transition: background-color var(--qs-fast), border-color var(--qs-fast),
                color var(--qs-fast), box-shadow var(--qs-fast), transform var(--qs-fast);
}

.btn-sm { min-height: 2.1rem; padding: .3rem .7rem; font-size: .825rem; border-radius: var(--qs-radius-xs); gap: .35rem; }
.btn-lg { min-height: 3rem; padding: .65rem 1.5rem; font-size: 1rem; border-radius: var(--qs-radius); }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

.btn-primary {
    color: #fff;
    background-color: var(--qs-primary);
    border-color: var(--qs-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(16, 38, 29, .16);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:first-child:active, .btn-check:checked + .btn-primary {
    color: #fff;
    background-color: var(--qs-primary-hover);
    border-color: var(--qs-primary-hover);
}

.btn-outline-primary {
    color: var(--qs-primary);
    background-color: var(--qs-surface);
    border-color: var(--qs-border-strong);
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:active, .btn-outline-primary:first-child:active {
    color: var(--qs-primary-dark);
    background-color: var(--qs-primary-soft);
    border-color: color-mix(in srgb, var(--qs-primary) 42%, white);
}

.btn-outline-secondary {
    color: var(--qs-ink-soft);
    background-color: var(--qs-surface);
    border-color: var(--qs-border-strong);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-secondary:active, .btn-outline-secondary:first-child:active {
    color: var(--qs-ink);
    background-color: var(--qs-surface-sunken);
    border-color: var(--qs-faint);
}

.btn-outline-light { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .28); }
.btn-outline-light:hover { color: var(--qs-primary-dark); background: #fff; border-color: #fff; }

.btn-link { font-weight: 550; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* --- 5. Forms ----------------------------------------------------------- */
.form-control, .form-select {
    min-height: 2.6rem;
    padding: .5rem .8rem;
    border-radius: var(--qs-radius-sm);
    border-color: var(--qs-border-strong);
    background-color: #fff;
    color: var(--qs-ink);
    font-size: .925rem;
    box-shadow: var(--qs-shadow-xs);
    transition: border-color var(--qs-fast), box-shadow var(--qs-fast);
}

.form-control::placeholder { color: var(--qs-faint); }
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: var(--qs-faint); }
.form-control:focus, .form-select:focus { border-color: var(--qs-primary); box-shadow: var(--qs-focus-ring); }
.form-control:disabled, .form-select:disabled { background: var(--qs-surface-sunken); color: var(--qs-muted); }
.form-select-sm, .form-control-sm { min-height: 2.1rem; padding: .28rem .6rem; font-size: .85rem; border-radius: var(--qs-radius-xs); }
textarea.form-control { min-height: 5.5rem; line-height: 1.5; }

.form-label {
    margin-bottom: .38rem;
    color: var(--qs-ink-soft);
    font-size: .85rem;
    font-weight: 580;
    letter-spacing: -.004em;
}
.form-text { color: var(--qs-muted); font-size: .8rem; }

.form-check-input { border-color: var(--qs-border-strong); }
.form-check-input:checked { background-color: var(--qs-primary); border-color: var(--qs-primary); }
.form-check-label { font-size: .9rem; }
.input-group-text {
    border-color: var(--qs-border-strong);
    background: var(--qs-surface-subtle);
    color: var(--qs-muted);
    font-size: .875rem;
}

.valid.modified:not([type=checkbox]) { border-color: var(--qs-primary); outline: none; }
.invalid { border-color: var(--qs-danger) !important; outline: none; }
.validation-message { margin-top: .3rem; color: var(--qs-danger); font-size: .82rem; font-weight: 500; }

/* --- 6. Data display ---------------------------------------------------- */
.table { --bs-table-bg: transparent; margin-bottom: 0; color: var(--qs-ink); }
.table > :not(caption) > * > * {
    padding: .82rem 1.25rem;
    border-bottom-color: var(--qs-border);
    vertical-align: middle;
}
.table tbody td { font-variant-numeric: tabular-nums; }
.table thead th {
    color: var(--qs-muted);
    background: var(--qs-surface-subtle);
    border-bottom: 1px solid var(--qs-border);
    font-size: .705rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr { transition: background-color var(--qs-fast); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--qs-primary-softer); }

.list-group-item { padding: .85rem 1.25rem; border-color: var(--qs-border); }

.dropdown-menu {
    padding: .35rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-lg);
}
.dropdown-item { padding: .5rem .7rem; border-radius: var(--qs-radius-xs); font-size: .885rem; }
.dropdown-item:hover, .dropdown-item:focus { color: var(--qs-primary-dark); background: var(--qs-primary-soft); }
.dropdown-divider { border-color: var(--qs-border); }

.alert {
    padding: .9rem 1.1rem;
    border-width: 1px;
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-xs);
    font-size: .9rem;
}
.alert-info { color: var(--qs-info); background: var(--qs-info-soft); border-color: color-mix(in srgb, var(--qs-info) 18%, white); }
.alert-success { color: var(--qs-primary-dark); background: var(--qs-primary-soft); border-color: color-mix(in srgb, var(--qs-primary) 22%, white); }
.alert-warning { color: var(--qs-warning); background: var(--qs-warning-soft); border-color: color-mix(in srgb, var(--qs-warning) 20%, white); }
.alert-danger { color: var(--qs-danger); background: var(--qs-danger-soft); border-color: color-mix(in srgb, var(--qs-danger) 18%, white); }

.badge { padding: .34em .6em; border-radius: var(--qs-radius-xs); font-size: .74rem; font-weight: 620; letter-spacing: .005em; }

.nav-pills { gap: .3rem; }
.nav-pills .nav-link {
    padding: .45rem .85rem;
    border-radius: var(--qs-radius-sm);
    font-size: .9rem;
    font-weight: 570;
    transition: background-color var(--qs-fast), color var(--qs-fast);
}
.nav-pills .nav-link:not(.active) { color: var(--qs-muted); }
.nav-pills .nav-link:not(.active):hover { color: var(--qs-ink); background: var(--qs-surface-sunken); }

.modal-content { border: 1px solid var(--qs-border); border-radius: var(--qs-radius-lg); box-shadow: var(--qs-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--qs-border); padding: 1rem 1.25rem; }
.progress { height: .5rem; border-radius: var(--qs-radius-pill); background: var(--qs-surface-sunken); }
.progress-bar { background: var(--qs-primary); }

/* Pills — one status vocabulary shared by the whole product */
.qs-pill {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .26rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--qs-radius-pill);
    font-size: .745rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .005em;
    white-space: nowrap;
    max-width: 100%;
}

.qs-pill-tag { background: var(--qs-primary-soft); border-color: color-mix(in srgb, var(--qs-primary) 16%, transparent); color: var(--qs-primary-dark); }
.qs-pill-allergen { background: var(--qs-warning-soft); border-color: color-mix(in srgb, var(--qs-warning) 18%, transparent); color: var(--qs-warning); }
.qs-pill-muted { background: var(--qs-surface-sunken); border-color: var(--qs-border); color: var(--qs-muted); }

.qs-status-pending { background: var(--qs-warning-soft); border-color: color-mix(in srgb, var(--qs-warning) 18%, transparent); color: var(--qs-warning); }
.qs-status-confirmed,
.qs-status-preparing { background: var(--qs-info-soft); border-color: color-mix(in srgb, var(--qs-info) 16%, transparent); color: var(--qs-info); }
.qs-status-ready { background: var(--qs-primary-soft); border-color: color-mix(in srgb, var(--qs-primary) 18%, transparent); color: var(--qs-primary-dark); }
.qs-status-served { background: var(--qs-surface-sunken); border-color: var(--qs-border); color: var(--qs-muted); }
.qs-status-cancelled { background: var(--qs-danger-soft); border-color: color-mix(in srgb, var(--qs-danger) 16%, transparent); color: var(--qs-danger); }

.qs-live-dot {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    animation: qs-pulse 2.4s var(--qs-ease) infinite;
}
@keyframes qs-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    70%  { box-shadow: 0 0 0 .32rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* --- 7. Product surfaces ------------------------------------------------ */
.qs-metric-card { position: relative; border-radius: var(--qs-radius-lg); }
.qs-metric-card::before {
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--qs-primary), color-mix(in srgb, var(--qs-primary) 30%, transparent));
}
.qs-metric-card .card-body {
    display: flex;
    min-height: 8.25rem;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.3rem;
}
.qs-metric-card small {
    color: var(--qs-muted);
    font-size: .755rem;
    font-weight: 620;
    letter-spacing: .045em;
    text-transform: uppercase;
}
.qs-metric-card span { color: var(--qs-muted); font-size: .8rem; }
.qs-metric-card h2 {
    margin: .45rem 0 .3rem;
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem);
    font-weight: 660;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.qs-auth-shell { min-height: calc(100vh - 10rem); align-items: center; padding: 2rem 0 4rem; }
.qs-auth-card { border-radius: var(--qs-radius-xl); box-shadow: var(--qs-shadow-lg); }
.qs-auth-card::before {
    display: block;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--qs-primary), var(--qs-accent));
}
.qs-auth-card .card-body { padding: clamp(1.6rem, 4vw, 2.4rem) !important; }
.qs-auth-brand { color: var(--qs-primary-dark); }

/* Public menu */
.qs-menu-hero {
    margin-bottom: 1.5rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: linear-gradient(135deg, #fff 0%, var(--qs-primary-softer) 100%);
    box-shadow: var(--qs-shadow-sm);
}
.qs-menu-cart { top: 5.25rem !important; }

.qs-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.qs-menu-item .card-body { padding: 1rem 1.2rem; }
.qs-menu-item .qs-price { font-weight: 660; color: var(--qs-ink); letter-spacing: -.015em; }
.qs-menu-item.qs-unavailable { opacity: .55; }
.qs-serving { font-variant-numeric: tabular-nums; font-weight: 620; }

/* Allergen and dietary pickers in the menu editor */
.qs-label-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.qs-label-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: .3rem .65rem;
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface);
    color: var(--qs-ink-soft);
    font-size: .82rem;
    font-weight: 550;
    cursor: pointer;
}
.qs-label-chip.is-on {
    border-color: color-mix(in srgb, var(--qs-primary) 45%, white);
    background: var(--qs-primary-soft);
    color: var(--qs-primary-dark);
}
.qs-label-chip input { margin: 0; }

.qs-menu-browser {
    position: sticky;
    /* Below the layout's own sticky top bar, not underneath it — at top: .5rem
       this pinned itself behind the bar and became invisible while scrolling. */
    top: calc(var(--qs-topbar-h, 0px) + .35rem);
    z-index: 20;
    padding: .6rem;
    /* Fallback first: color-mix needs iOS Safari 16.2+, and without this the
       whole declaration is dropped there, leaving the bar with no background. */
    background: var(--qs-surface);
    background: color-mix(in srgb, var(--qs-surface) 88%, transparent);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    box-shadow: var(--qs-shadow);
    backdrop-filter: blur(14px) saturate(1.4);
}
.qs-category-scroll {
    display: flex;
    gap: .45rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: .2rem;
    scroll-snap-type: inline proximity;
}
.qs-category-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: .44rem .85rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface);
    color: var(--qs-ink-soft);
    font-size: .865rem;
    font-weight: 570;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--qs-fast), border-color var(--qs-fast), color var(--qs-fast);
}
.qs-category-chip:hover,
.qs-category-chip:focus-visible {
    border-color: color-mix(in srgb, var(--qs-primary) 40%, white);
    background: var(--qs-primary-soft);
    color: var(--qs-primary-dark);
}
/* Clears the layout top bar plus the pinned category strip, so an anchored
   category does not land underneath them. */
.qs-menu-category-section { scroll-margin-top: calc(var(--qs-topbar-h, 0px) + 7.5rem); }

/* Kitchen ticket */
.qs-ticket { display: flex; flex-direction: column; }
.qs-ticket .qs-ticket-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: .65rem 1rem; border-bottom: 1px solid var(--qs-border);
    background: var(--qs-surface-subtle);
    font-size: .92rem;
    font-weight: 660;
}
.qs-ticket.qs-urgent {
    border-color: color-mix(in srgb, var(--qs-danger) 45%, white);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--qs-danger) 18%, transparent), var(--qs-shadow);
}
.qs-ticket.qs-urgent .qs-ticket-head { background: var(--qs-danger); color: #fff; border-color: var(--qs-danger); }
.qs-ticket-body { padding: .8rem 1rem; }
.qs-ticket-item { padding: .2rem 0; }
.qs-ticket-item.is-done { color: var(--qs-muted); text-decoration: line-through; }
.qs-ticket-bump {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: .4rem;
    padding: 0;
    vertical-align: -.35rem;
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-xs);
    background: var(--qs-surface);
    color: var(--qs-primary);
}
.qs-ticket-bump:hover:not(:disabled) { background: var(--qs-primary-soft); border-color: var(--qs-primary); }
.qs-ticket-bump:disabled { opacity: .35; }
@media (pointer: coarse) {
    .qs-ticket-bump { width: 2.4rem; height: 2.4rem; }
}
.qs-ticket-modifiers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: .3rem 0 .2rem 1.25rem;
}
.qs-ticket-modifiers-label { color: var(--qs-muted); font-size: .76rem; font-weight: 600; }
.qs-ticket-modifier {
    background: var(--qs-primary-soft);
    border: 1px solid color-mix(in srgb, var(--qs-primary) 22%, transparent);
    border-radius: var(--qs-radius-pill);
    color: var(--qs-primary-dark);
    font-size: .755rem;
    font-weight: 620;
    line-height: 1.2;
    padding: .18rem .5rem;
}
.qs-ticket-note { color: var(--qs-muted); font-size: .825rem; font-style: italic; }
.qs-ticket-order-note {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    padding: .4rem .55rem;
    border-radius: var(--qs-radius-xs);
    background: var(--qs-warning-soft);
    color: var(--qs-warning);
    font-size: .84rem;
    font-weight: 620;
}

.qs-kds-col h4 {
    text-align: center; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .08em; font-weight: 700; color: var(--qs-muted); margin-bottom: 1rem;
}

/* Cart */
.qs-cart-line { padding: .6rem 0; border-bottom: 1px solid var(--qs-border); }
.qs-cart-line:last-child { border-bottom: 0; }
.qs-qty-btn {
    width: 1.95rem; height: 1.95rem; min-height: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--qs-radius-xs); font-weight: 600;
}

/* Floor plan */
.qs-table-card { text-align: center; }
.qs-table-card.qs-ready { border-color: color-mix(in srgb, var(--qs-primary) 45%, white); box-shadow: 0 0 0 3px var(--qs-primary-soft); }
.qs-table-card.qs-active { border-color: color-mix(in srgb, var(--qs-accent) 55%, white); box-shadow: 0 0 0 3px var(--qs-accent-soft); }
.qs-table-card .card-body { display: flex; flex-direction: column; padding: .9rem .8rem; }
.qs-table-actions { display: grid; gap: .4rem; margin-top: auto; padding-top: .6rem; }

/* Operational screens open straight onto their controls, with no page title
   above them — see the waiter floor plan for why. */
.qs-ops-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }

.qs-table-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-bottom: .3rem;
    padding: .28rem .45rem;
    border-radius: var(--qs-radius-xs);
    font-size: .755rem;
    font-weight: 620;
    line-height: 1.25;
    text-align: left;
}
.qs-table-flag.is-warning { background: var(--qs-warning-soft); color: var(--qs-warning); }
.qs-table-flag.is-info { background: var(--qs-info-soft); color: var(--qs-info); }
.qs-table-flag.is-booked { background: var(--qs-tint-plum); color: var(--qs-tint-plum-ink); }

.qs-availability-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--qs-border);
}
.qs-availability-row:last-child { border-bottom: 0; }
.qs-availability-row.is-out .qs-availability-name { color: var(--qs-muted); text-decoration: line-through; }
.qs-availability-name { min-width: 0; font-weight: 560; }

/* How long a table has been waiting — the one number a waiter scans for. */
.qs-order-age {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--qs-muted);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    font-weight: 560;
}
.qs-order-age.is-urgent { color: var(--qs-danger); font-weight: 660; }

.qs-reason-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.qs-reason-chip {
    padding: .3rem .6rem;
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface);
    color: var(--qs-ink-soft);
    font-size: .78rem;
    font-weight: 560;
    line-height: 1.3;
}
.qs-reason-chip.is-active {
    border-color: color-mix(in srgb, var(--qs-danger) 45%, white);
    background: var(--qs-danger-soft);
    color: var(--qs-danger);
}

.qs-void-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 2.5rem;
    padding: .2rem 0;
    font-size: .85rem;
}
.qs-void-row.is-void { color: var(--qs-muted); text-decoration: line-through; }
.qs-void-row.is-void .qs-pill { text-decoration: none; }

.qs-split-row {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.5rem;
    font-size: .875rem;
}

/* --- Overlays: modifier picker, table detail, confirmations, mobile cart --- */
.qs-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(10, 36, 25, .42);
    backdrop-filter: blur(2px);
}
.qs-scrim-top { z-index: 1060; }

.qs-sheet {
    position: fixed;
    z-index: 1050;
    left: 50%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(34rem, 100%);
    max-height: min(85vh, 46rem);
    transform: translateX(-50%);
    border: 1px solid var(--qs-border);
    border-bottom: 0;
    border-radius: var(--qs-radius-xl) var(--qs-radius-xl) 0 0;
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-lg);
}
.qs-sheet-wide { width: min(40rem, 100%); }
.qs-sheet-confirm { z-index: 1070; width: min(26rem, 100%); }

.qs-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--qs-border);
}
.qs-sheet-body { overflow-y: auto; padding: 1.15rem; -webkit-overflow-scrolling: touch; }
.qs-sheet-foot {
    display: flex;
    gap: .5rem;
    padding: .85rem 1.15rem;
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--qs-border);
    background: var(--qs-surface-subtle);
    border-radius: 0 0 var(--qs-radius-xl) var(--qs-radius-xl);
}
.qs-sheet-section {
    margin: 1.15rem 0 .55rem;
    color: var(--qs-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.qs-sheet-section:first-child { margin-top: 0; }

.qs-modifier-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 2.75rem;
    margin-top: .15rem;
    padding: .25rem 0;
}

/* On a desktop the sheets read better centred than docked to the bottom. */
@media (min-width: 576px) {
    .qs-sheet {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        border-bottom: 1px solid var(--qs-border);
        border-radius: var(--qs-radius-xl);
    }
    .qs-sheet-foot { border-radius: 0 0 var(--qs-radius-xl) var(--qs-radius-xl); }
}

/* Waiter ordering mode: the whole guest hero collapses to one bar. */
/* Deliberately not sticky. Three pinned bars — the layout's top bar, this, and
   the category strip — stacked to 237px of a 812px phone and overlapped each
   other. The categories are what a waiter needs while scrolling a long menu,
   so they get to be the sticky one; this scrolls away. */
.qs-waiter-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
    padding: .5rem .6rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-sm);
}
.qs-waiter-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--qs-radius-sm);
    background: transparent;
    color: var(--qs-ink);
    text-decoration: none;
}
.qs-waiter-back:hover { background: var(--qs-surface-sunken); color: var(--qs-ink); }
.qs-waiter-bar-title { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.qs-waiter-bar-title strong { display: block; font-size: 1.05rem; }
.qs-waiter-bar-title span {
    display: block;
    overflow: hidden;
    color: var(--qs-muted);
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cart dock — below lg the cart panel is off-screen, so this bar is both the
   feedback that an item landed and the way back into the order. */
.qs-cart-dock {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    padding: .6rem .75rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    /* Fallback first — see .qs-menu-browser. On an iPhone without color-mix the
       dock rendered with no background at all, which reads as "it vanished". */
    background: var(--qs-surface);
    background: color-mix(in srgb, var(--qs-surface) 92%, transparent);
    border-top: 1px solid var(--qs-border);
    backdrop-filter: blur(14px) saturate(1.4);
}
.qs-cart-dock.is-hidden { display: none; }
.qs-cart-dock-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-height: 3rem;
    padding: .5rem .9rem;
    border: 0;
    border-radius: var(--qs-radius);
    background: var(--qs-primary);
    color: #fff;
    font-weight: 620;
    box-shadow: var(--qs-shadow-md);
}
.qs-cart-dock-btn:active { transform: translateY(.5px); }
.qs-cart-dock-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .35rem;
    border-radius: var(--qs-radius-pill);
    background: rgba(255, 255, 255, .22);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.qs-cart-dock-label { flex: 1 1 auto; text-align: left; }
.qs-cart-dock-total { font-variant-numeric: tabular-nums; }

/* Order timeline */
.qs-order-timeline { display: flex; flex-wrap: wrap; gap: .35rem; }
.qs-order-step {
    padding: .26rem .6rem; border-radius: var(--qs-radius-pill);
    background: var(--qs-surface-sunken); color: var(--qs-muted); font-size: .75rem; font-weight: 540;
}
.qs-order-step.active { background: var(--qs-primary-soft); color: var(--qs-primary-dark); font-weight: 620; }

.qs-dashboard-alert { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid var(--qs-border); }
.qs-dashboard-alert:last-of-type { border-bottom: 0; }
.qs-dashboard-alert strong, .qs-dashboard-alert small { display: block; }
.qs-dashboard-alert strong { font-size: .92rem; }
.qs-dashboard-alert small { margin-top: .1rem; color: var(--qs-muted); }
.qs-mini-status-dot { flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .45rem; border-radius: 50%; }

.qs-language-select { width: auto; min-width: 8rem; }
.qs-context-select { width: auto; min-width: 10rem; max-width: 15rem; }
.qs-public-shell { min-height: 100vh; min-height: 100dvh; }
.qs-public-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border-bottom: 1px solid var(--qs-border); }
.qs-public-content { max-width: 1200px; margin: 0 auto; padding-top: 2rem; padding-bottom: 2rem; }
.qs-qr-image { width: 180px; height: 180px; border-radius: var(--qs-radius-sm); image-rendering: pixelated; }
.qs-drag-handle { cursor: grab; color: var(--qs-faint); }
.qs-drag-handle:active { cursor: grabbing; }

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

/* --- 8. Marketing ------------------------------------------------------- */
.qs-marketing-eyebrow {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    backdrop-filter: blur(6px);
}
.qs-marketing-feature { transition: transform var(--qs-base), box-shadow var(--qs-base), border-color var(--qs-base); }
.qs-marketing-feature:hover { transform: translateY(-3px); box-shadow: var(--qs-shadow-md); }
.qs-marketing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1rem;
    border-radius: var(--qs-radius);
    background: var(--qs-primary-soft);
    color: var(--qs-primary);
}
.qs-marketing-steps { background: var(--qs-primary-soft); }
.qs-marketing-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%; color: #fff;
    background: var(--qs-primary); font-size: 1.2rem; font-weight: 660;
    box-shadow: 0 6px 16px -4px rgba(15, 122, 87, .45);
}
.qs-section-kicker { color: var(--qs-accent-ink); }
.qs-mini-status { display: grid; grid-template-columns: .6rem 1fr auto; gap: .55rem; align-items: center; padding: .8rem 0; border-top: 1px solid rgba(212, 144, 31, .2); font-size: .84rem; }
.qs-mini-status strong { font-size: .78rem; color: var(--qs-ink); }

.qs-role-card { padding: 1.4rem; border-radius: var(--qs-radius-lg); border: 1px solid var(--qs-border); }
.qs-role-card p { color: var(--qs-muted); font-size: .865rem; }
.qs-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: var(--qs-radius); font-size: 1.25rem; }
.qs-role-customer { background: var(--qs-tint-blue); border-color: var(--qs-tint-blue-border); }
.qs-role-customer .qs-role-icon { background: var(--qs-tint-blue-icon); color: var(--qs-tint-blue-ink); }
.qs-role-waiter { background: var(--qs-tint-green); border-color: var(--qs-tint-green-border); }
.qs-role-waiter .qs-role-icon { background: var(--qs-tint-green-icon); color: var(--qs-tint-green-ink); }
.qs-role-kitchen { background: var(--qs-tint-amber); border-color: var(--qs-tint-amber-border); }
.qs-role-kitchen .qs-role-icon { background: var(--qs-tint-amber-icon); color: var(--qs-tint-amber-ink); }
.qs-role-manager { background: var(--qs-tint-teal); border-color: var(--qs-tint-teal-border); }
.qs-role-manager .qs-role-icon { background: var(--qs-tint-teal-icon); color: var(--qs-tint-teal-ink); }
.qs-role-cashier { background: var(--qs-tint-plum); border-color: var(--qs-tint-plum-border); }
.qs-role-cashier .qs-role-icon { background: var(--qs-tint-plum-icon); color: var(--qs-tint-plum-ink); }
.qs-role-owner { background: var(--qs-tint-slate); border-color: var(--qs-tint-slate-border); }
.qs-role-owner .qs-role-icon { background: var(--qs-tint-slate-icon); color: var(--qs-tint-slate-ink); }

/* Hero proof band — sits on the light isometric hero, so it reads as a
   hairline-separated strip rather than a glass panel. */
.qs-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: clamp(1.75rem, 4vw, 2.75rem);
    overflow: hidden;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-border);
}
.qs-hero-stats div { padding: 1.05rem 1.2rem; background: var(--qs-surface); }
.qs-hero-stats strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 660;
    letter-spacing: -.03em;
    color: var(--qs-primary);
}
.qs-hero-stats span {
    display: block;
    margin-top: .2rem;
    color: var(--qs-muted);
    font-size: .8rem;
    line-height: 1.45;
}

/* Section headings */
.qs-section-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.qs-section-head h2 { margin: .55rem 0 .6rem; }
.qs-section-head .qs-subtitle { margin: 0 auto; }

/* Advantage cards */
.qs-advantage-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-xs);
    transition: transform var(--qs-base), box-shadow var(--qs-base), border-color var(--qs-base);
}
.qs-advantage-card:hover {
    transform: translateY(-3px);
    border-color: var(--qs-primary-border);
    box-shadow: var(--qs-shadow-md);
}
.qs-advantage-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 1rem;
    border-radius: var(--qs-radius);
    background: var(--qs-primary-soft);
    color: var(--qs-primary);
}
.qs-advantage-card h3 { margin-bottom: .4rem; }
.qs-advantage-card p { flex: 1 1 auto; margin-bottom: 1rem; color: var(--qs-muted); font-size: .865rem; }
.qs-advantage-tag {
    align-self: flex-start;
    padding: .24rem .6rem;
    border-radius: var(--qs-radius-pill);
    background: var(--qs-accent-soft);
    color: var(--qs-accent-ink);
    font-size: .72rem;
    font-weight: 640;
}

/* Before / after comparison */
.qs-compare {
    overflow: hidden;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-xs);
}
.qs-compare-head,
.qs-compare-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.3fr;
    gap: 1rem;
    align-items: center;
    padding: .95rem 1.35rem;
}
.qs-compare-head {
    background: var(--qs-surface-subtle);
    border-bottom: 1px solid var(--qs-border);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--qs-muted);
}
.qs-compare-row { border-top: 1px solid var(--qs-border); font-size: .875rem; }
.qs-compare-row:first-of-type { border-top: 0; }
.qs-compare-topic { font-weight: 620; }
.qs-compare-row .qs-compare-before { color: var(--qs-muted); }
.qs-compare-row .qs-compare-after { color: var(--qs-primary-dark); font-weight: 560; }
.qs-compare-row .qs-compare-before .qs-icon { color: var(--qs-faint); }
.qs-compare-row .qs-compare-after .qs-icon { color: var(--qs-primary); }
.qs-compare-row span .qs-icon { flex: 0 0 auto; margin-right: .45rem; vertical-align: -.2em; }
.qs-compare-head .qs-compare-after { color: var(--qs-primary-dark); }

/* Scenario walkthrough — guest phone on the left, team screen on the right */
.qs-theatre {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-xl);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-xs);
    overflow: clip;
}

.qs-theatre-tabs {
    display: flex;
    gap: .3rem;
    padding: .6rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--qs-border);
    background: var(--qs-surface-subtle);
    scrollbar-width: thin;
}
.qs-theatre-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: .55rem .85rem;
    border: 1px solid transparent;
    border-radius: var(--qs-radius);
    background: transparent;
    color: var(--qs-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 560;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: color var(--qs-fast), background var(--qs-fast), border-color var(--qs-fast);
}
.qs-theatre-tab:hover { color: var(--qs-ink); background: var(--qs-surface); }
.qs-theatre-tab:focus-visible { outline: none; box-shadow: var(--qs-focus-ring); }
.qs-theatre-tab.is-active {
    color: var(--qs-primary-dark);
    background: var(--qs-surface);
    border-color: var(--qs-primary-border);
    font-weight: 620;
}
.qs-theatre-tab .qs-icon { color: var(--qs-faint); }
.qs-theatre-tab.is-active .qs-icon { color: var(--qs-primary); }

.qs-theatre-progress { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--qs-primary); transform-origin: left; scale: 0 1; }
.qs-theatre-tab.is-active .qs-theatre-progress { animation: qs-theatre-sweep 5.2s linear forwards; }
@keyframes qs-theatre-sweep { from { scale: 0 1; } to { scale: 1 1; } }

.qs-theatre-stage { position: relative; padding: clamp(1.25rem, 3vw, 2.25rem); }
.qs-theatre-scene {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.25rem);
    align-items: center;
}
.qs-theatre-scene.is-active { display: grid; animation: qs-theatre-in .45s var(--qs-ease) both; }
@keyframes qs-theatre-in { from { opacity: 0; translate: 0 .6rem; } to { opacity: 1; translate: 0 0; } }

.qs-theatre-side { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.qs-theatre-who {
    color: var(--qs-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* Guest phone */
.qs-phone {
    position: relative;
    width: min(15.5rem, 100%);
    padding: .7rem .55rem .8rem;
    border: 1px solid var(--qs-border-strong);
    border-radius: 1.9rem;
    background: var(--qs-surface-sunken);
    box-shadow: var(--qs-shadow-md);
}
.qs-phone-notch {
    position: absolute;
    top: .42rem;
    left: 50%;
    width: 3.2rem;
    height: .28rem;
    border-radius: var(--qs-radius-pill);
    background: var(--qs-border-strong);
    translate: -50% 0;
}
.qs-phone-screen {
    min-height: 15.5rem;
    padding: 1rem .85rem;
    border-radius: 1.45rem;
    background: var(--qs-surface);
}
.qs-phone-head { padding-bottom: .7rem; margin-bottom: .55rem; border-bottom: 1px solid var(--qs-border); }
.qs-phone-head strong { display: block; font-size: .95rem; }
.qs-phone-head span { display: block; margin-top: .1rem; color: var(--qs-muted); font-size: .72rem; }
.qs-phone-rows { display: grid; gap: .1rem; }
.qs-phone-row { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--qs-border); font-size: .8rem; }
.qs-phone-row:last-child { border-bottom: 0; }
.qs-phone-row span:first-child { color: var(--qs-ink-soft); }
.qs-phone-row span:last-child { color: var(--qs-muted); white-space: nowrap; }
.qs-phone-row.is-strong { font-weight: 660; }
.qs-phone-row.is-strong span { color: var(--qs-ink); }

.qs-phone-button {
    display: block;
    margin-top: .85rem;
    padding: .6rem;
    border-radius: var(--qs-radius);
    background: var(--qs-primary);
    color: #fff;
    font-size: .82rem;
    font-weight: 620;
    text-align: center;
    animation: qs-phone-press 5.2s var(--qs-ease) infinite;
}
@keyframes qs-phone-press {
    0%, 24% { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 122, 87, .38); }
    30%     { transform: scale(.97); box-shadow: 0 0 0 .55rem rgba(15, 122, 87, 0); }
    36%,
    100%    { transform: scale(1); box-shadow: 0 0 0 0 rgba(15, 122, 87, 0); }
}
.qs-phone-note { margin: .85rem 0 0; color: var(--qs-muted); font-size: .73rem; line-height: 1.45; }

/* Flow marker between the two sides */
.qs-theatre-link { position: relative; display: flex; align-items: center; justify-content: center; color: var(--qs-primary); }
.qs-theatre-pulse {
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    border: 1.5px solid var(--qs-primary);
    border-radius: 50%;
    animation: qs-theatre-ping 2.6s var(--qs-ease) infinite;
}
@keyframes qs-theatre-ping {
    0%   { transform: scale(.5); opacity: 0; }
    22%  { opacity: .6; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Team screen */
.qs-staff {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface-subtle);
}
.qs-staff-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.qs-staff-label { color: var(--qs-muted); font-size: .66rem; font-weight: 700; letter-spacing: .09em; }
.qs-staff-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-sm);
    animation: qs-staff-land 5.2s var(--qs-ease) infinite;
}
@keyframes qs-staff-land {
    0%, 30% { transform: translateX(.5rem); opacity: .35; }
    40%     { transform: translateX(0); opacity: 1; box-shadow: 0 0 0 3px var(--qs-primary-soft); }
    60%,
    100%    { transform: translateX(0); opacity: 1; box-shadow: var(--qs-shadow-sm); }
}
.qs-staff-card strong { display: block; font-size: .86rem; }
.qs-staff-card span:not(.qs-pill) { display: block; margin-top: .12rem; color: var(--qs-muted); font-size: .73rem; }
.qs-staff-outcome {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .85rem 0 0;
    color: var(--qs-ink-soft);
    font-size: .78rem;
    line-height: 1.45;
}
.qs-staff-outcome .qs-icon { flex: 0 0 auto; margin-top: .15em; color: var(--qs-primary); }

@media (max-width: 767.98px) {
    .qs-theatre-scene { grid-template-columns: 1fr; justify-items: center; }
    .qs-theatre-link { rotate: 90deg; margin: -.35rem 0; }
    .qs-staff { max-width: 22rem; }
}

/* Configuration levels — cards + coverage matrix */
.qs-package {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-xs);
    transition: transform var(--qs-base), box-shadow var(--qs-base), border-color var(--qs-base);
}
.qs-package:hover { transform: translateY(-3px); border-color: var(--qs-primary-border); box-shadow: var(--qs-shadow-md); }
.qs-package header { padding-bottom: 1rem; border-bottom: 1px solid var(--qs-border); }
.qs-package h3 { margin: .55rem 0 .3rem; }
.qs-package-level {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface-sunken);
    color: var(--qs-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.qs-package-for { margin: 0; color: var(--qs-muted); font-size: .82rem; }
.qs-package-builds {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .9rem 0 .2rem;
    color: var(--qs-accent-ink);
    font-size: .76rem;
    font-weight: 600;
}
.qs-package-list { flex: 1 1 auto; margin: .9rem 0 0; padding: 0; list-style: none; }
.qs-package-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .5rem;
    color: var(--qs-ink-soft);
    font-size: .84rem;
    line-height: 1.45;
}
.qs-package-list li:last-child { margin-bottom: 0; }
.qs-package-list .qs-icon { flex: 0 0 auto; margin-top: .18em; color: var(--qs-primary); }

.qs-package.is-featured { border-color: var(--qs-primary); box-shadow: 0 0 0 3px var(--qs-primary-soft), var(--qs-shadow); }
.qs-package.is-featured .qs-package-level { background: var(--qs-primary); color: #fff; }

.qs-package-note { margin: 1rem 0 0; color: var(--qs-muted); font-size: .82rem; text-align: center; }

/* FAQ */
.qs-faq {
    overflow: hidden;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-lg);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-xs);
}
.qs-faq details { border-top: 1px solid var(--qs-border); }
.qs-faq details:first-child { border-top: 0; }
.qs-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    transition: background var(--qs-fast);
}
.qs-faq summary::-webkit-details-marker { display: none; }
.qs-faq summary:hover { background: var(--qs-surface-subtle); }
.qs-faq summary:focus-visible { outline: none; box-shadow: var(--qs-focus-ring); }
.qs-faq summary .qs-icon { flex: 0 0 auto; color: var(--qs-faint); transition: transform var(--qs-base); }
.qs-faq details[open] summary .qs-icon { transform: rotate(90deg); color: var(--qs-primary); }
.qs-faq p { margin: 0; padding: 0 1.35rem 1.25rem; max-width: 68ch; color: var(--qs-muted); font-size: .9rem; }

/* Closing call to action */
.qs-cta-band {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
    color: #fff;
    background:
        radial-gradient(ellipse 60% 90% at 88% 12%, rgba(79, 201, 132, .24), transparent 68%),
        linear-gradient(125deg, #146b4c, #08281c);
}
.qs-cta-band .qs-section-kicker { color: #9fe9bc; }
.qs-cta-band h2 { margin: .55rem 0 .7rem; color: #fff; }
.qs-cta-band p { margin: 0; max-width: 34rem; color: rgba(255, 255, 255, .78); }
.qs-cta-actions { display: grid; gap: .85rem; justify-items: start; }
.qs-cta-actions small { color: rgba(255, 255, 255, .64); font-size: .78rem; }

/* Marketing footer */
.qs-marketing-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    padding-top: 2rem;
    margin-bottom: 1rem;
    border-top: 1px solid var(--qs-border);
}
.qs-marketing-footer-brand strong { font-size: 1.05rem; }
.qs-marketing-footer-brand p { margin: .4rem 0 0; max-width: 34rem; color: var(--qs-muted); font-size: .85rem; }
.qs-marketing-footer nav { display: flex; flex-direction: column; gap: .4rem; }
.qs-marketing-footer nav span {
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--qs-faint);
}
.qs-marketing-footer nav a { color: var(--qs-ink-soft); font-size: .85rem; text-decoration: none; }
.qs-marketing-footer nav a:hover { color: var(--qs-primary); text-decoration: underline; }

.qs-restaurant-hero {
    color: #fff;
    background:
        radial-gradient(ellipse 55% 70% at 85% 18%, rgba(212, 144, 31, .3), transparent 70%),
        linear-gradient(125deg, #146b4c, #08281c);
}
.qs-reservation-form, .qs-reservation-success { max-width: 760px; margin: 0 auto; }

/* --- Responsive --------------------------------------------------------- */

/* The cart is one node in the DOM at every width, so the notes and quantities
   a waiter has typed survive the switch between sidebar and sheet. Below lg it
   slides up over the menu instead of sitting a whole menu's height below it. */
@media (max-width: 991.98px) {
    .qs-cart-col {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1050;
        max-height: 85vh;
        padding: 0;
        transform: translateY(101%);
        transition: transform var(--qs-base);
        pointer-events: none;
    }
    .qs-cart-col.qs-cart-open { transform: translateY(0); pointer-events: auto; }
    .qs-cart-col .qs-menu-cart {
        position: static !important;
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        margin: 0;
        border-bottom: 0;
        border-radius: var(--qs-radius-xl) var(--qs-radius-xl) 0 0;
        box-shadow: var(--qs-shadow-lg);
    }
    .qs-cart-col .qs-menu-cart .card-body {
        overflow-y: auto;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }
    /* Room for the dock so the last dish is never trapped underneath it. */
    .qs-menu-browser ~ .row { padding-bottom: 4.5rem; }
}

@media (min-width: 992px) {
    .qs-cart-close { display: none; }
}

/* A wide table on a phone is a sideways-scrolling wall. Below md each row
   becomes a card and every cell is labelled from its data-label. */
@media (max-width: 767.98px) {
    .qs-stack-table thead { display: none; }
    .qs-stack-table, .qs-stack-table tbody, .qs-stack-table tr, .qs-stack-table td { display: block; width: 100%; }
    .qs-stack-table tr {
        margin-bottom: .6rem;
        padding: .55rem .75rem;
        border: 1px solid var(--qs-border);
        border-radius: var(--qs-radius);
        background: var(--qs-surface);
    }
    .qs-stack-table td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        padding: .22rem 0;
        border: 0;
        text-align: right;
    }
    .qs-stack-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--qs-muted);
        font-size: .76rem;
        font-weight: 640;
        text-align: left;
    }
    .qs-stack-table td:not([data-label]) { justify-content: flex-end; }
    .qs-stack-table .table-responsive { overflow-x: visible; }
}

/* Standing, one-handed, in a hurry: the add and quantity controls have to be
   thumb-sized on touch even though they read as small buttons on a desktop. */
@media (pointer: coarse) {
    .qs-menu-item .btn { min-height: 2.75rem; min-width: 4.5rem; padding-inline: 1rem; }
    .qs-qty-btn { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
    .qs-reason-chip { min-height: 2.5rem; }
    /* The rows are already 44px tall; this just makes the box itself hittable. */
    .qs-modifier-option .form-check-input,
    .qs-split-row .form-check-input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; }
}

@media (max-width: 991.98px) {
    .qs-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-cta-band { grid-template-columns: 1fr; padding: 1.9rem; }
    .qs-marketing-footer { grid-template-columns: 1fr 1fr; }
    .qs-marketing-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .qs-compare-head { display: none; }
    .qs-compare-row { grid-template-columns: 1fr; gap: .5rem; padding: 1.05rem 1.15rem; }
    .qs-compare-topic { font-size: .95rem; }
    .qs-cta-actions { justify-items: stretch; }
}

@media (max-width: 575.98px) {
    .qs-page-head { flex-direction: column; align-items: stretch; margin-bottom: 1.15rem; }
    .qs-page-head > :last-child { text-align: left !important; }
    .qs-menu-hero { margin-inline: -.15rem; padding: 1.1rem; }
    .qs-menu-hero label { justify-content: flex-start !important; }
    /* top is set on the base rule from --qs-topbar-h; do not reset it here. */
    .qs-menu-browser { margin-inline: -.35rem; }
    .qs-section-title { align-items: flex-start; flex-direction: column; gap: .2rem; }
    .qs-menu-item { align-items: flex-start; }
    .qs-menu-item > .text-end { min-width: 92px !important; }
    .card-body { padding: 1.05rem; }
    .table > :not(caption) > * > * { padding: .72rem .9rem; }
}

/* --- 9. Hero variants ---------------------------------------------------
   Four candidate treatments for the marketing hero. Each is self-contained
   under .qs-hero-<name>; drop the ones that are not chosen.
   ------------------------------------------------------------------------ */

.qs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.4rem);
    border-radius: var(--qs-radius-xl);
}

.qs-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    align-items: center;
}

.qs-hero-copy h1 {
    margin: 1.1rem 0 .9rem;
    font-size: clamp(2.1rem, 3.9vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}
.qs-hero-copy h1 em { font-style: normal; }
.qs-hero-copy p { max-width: 34rem; margin: 0 0 1.6rem; font-size: 1.05rem; line-height: 1.6; }
.qs-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.qs-hero-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.35rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: .875rem; }
.qs-hero-checks li { position: relative; padding-left: 1.35rem; }
.qs-hero-checks li::before {
    content: "";
    position: absolute;
    top: .42em;
    left: 0;
    width: .95rem;
    height: .5rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .75;
}
.qs-hero-eyebrow { gap: .45rem; }

/* --- Variant D: isometric floor ------------------------------------------ */
.qs-hero-floor {
    color: var(--qs-ink);
    border: 1px solid var(--qs-border);
    background:
        radial-gradient(ellipse 55% 70% at 88% 12%, var(--qs-primary-soft), transparent 66%),
        radial-gradient(ellipse 50% 60% at 4% 92%, var(--qs-accent-soft), transparent 68%),
        var(--qs-surface);
}
.qs-hero-floor .qs-hero-copy h1 em { color: var(--qs-primary); }
.qs-hero-floor .qs-hero-copy p { color: var(--qs-muted); }
.qs-hero-floor .qs-hero-checks { color: var(--qs-ink-soft); }
.qs-hero-floor .qs-hero-eyebrow { color: var(--qs-primary-dark); background: var(--qs-primary-soft); border-color: var(--qs-primary-border); }

.qs-floor-stage { position: relative; }
.qs-floor-svg { display: block; width: 100%; height: auto; overflow: visible; }
.qs-floor-slab { fill: var(--qs-surface-subtle); stroke: var(--qs-border-strong); stroke-width: 1.5; }
.qs-floor-line { stroke: var(--qs-border-strong); stroke-width: 1; opacity: .5; }
.qs-floor-top { fill: var(--qs-surface); stroke: var(--qs-border-strong); stroke-width: 1.4; }
.qs-floor-side { fill: var(--qs-surface-sunken); stroke: var(--qs-border-strong); stroke-width: 1.2; }

.qs-floor-table.is-active .qs-floor-top { fill: var(--qs-primary-soft); stroke: var(--qs-primary); }
.qs-floor-table.is-active .qs-floor-side { fill: #cfe9dd; stroke: var(--qs-primary); }
.qs-floor-table.is-attention .qs-floor-top { fill: var(--qs-tint-amber); stroke: var(--qs-accent); }
.qs-floor-table.is-attention .qs-floor-side { fill: #f2e2c4; stroke: var(--qs-accent); }

.qs-floor-ping {
    fill: none;
    stroke: var(--qs-primary);
    stroke-width: 1.6;
    transform-box: fill-box;
    transform-origin: center;
    animation: qs-floor-ping 3.2s var(--qs-ease) infinite;
}
.qs-floor-table:nth-of-type(2n) .qs-floor-ping { animation-delay: 1.1s; }
.qs-floor-table:nth-of-type(3n) .qs-floor-ping { animation-delay: 2s; }
@keyframes qs-floor-ping {
    0%   { transform: scale(.55); opacity: 0; }
    18%  { opacity: .75; }
    100% { transform: scale(1.25); opacity: 0; }
}

.qs-floor-beacon { fill: none; stroke: var(--qs-primary); stroke-width: 1.8; animation: qs-beacon-bob 4.5s var(--qs-ease) infinite alternate; }
.qs-floor-beacon rect { fill: var(--qs-surface); }
.qs-floor-beacon path { fill: var(--qs-primary); stroke: none; }
.qs-floor-beacon line { stroke-dasharray: 4 4; opacity: .55; }
@keyframes qs-beacon-bob { from { translate: 0 -4px; } to { translate: 0 4px; } }

.qs-floor-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-pill);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-md);
    color: var(--qs-ink-soft);
    font-size: .75rem;
    font-weight: 560;
    white-space: nowrap;
}
.qs-floor-chip .qs-icon { color: var(--qs-primary); }
.qs-floor-chip-a { top: 4%; left: -2%; animation: qs-chip-float 7s var(--qs-ease) infinite alternate; }
.qs-floor-chip-b { top: 44%; right: -3%; animation: qs-chip-float 8.5s var(--qs-ease) .8s infinite alternate-reverse; }
.qs-floor-chip-c { bottom: 2%; left: 6%; animation: qs-chip-float 9.5s var(--qs-ease) 1.6s infinite alternate; }

/* --- Hero variants: responsive ------------------------------------------- */
@media (max-width: 991.98px) {
    .qs-hero-grid { grid-template-columns: 1fr; }
    .qs-floor-chip { position: static; margin: .35rem .35rem 0 0; animation: none; }
    .qs-floor-stage { display: flex; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 575.98px) {
    .qs-hero { padding: 1.4rem; }
    .qs-floor-chip { font-size: .7rem; }
}

/* --- Blazor chrome ------------------------------------------------------ */
.blazor-error-boundary {
    padding: 1rem 1rem 1rem 3.7rem;
    border-radius: var(--qs-radius);
    color: #fff;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: var(--qs-border-strong); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* Order-status badges carry a dot so a status is scannable at a glance
   on the kitchen and orders screens, not just readable. */
.qs-status::before {
    flex: 0 0 auto;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

/* Context label (dine-in / takeaway / delivery) — distinct from the
   order-status vocabulary, so re-tinting a status never moves it. */
.qs-pill-info {
    background: var(--qs-info-soft);
    border-color: color-mix(in srgb, var(--qs-info) 16%, transparent);
    color: var(--qs-info);
}

/* Progressive web app strips: offline, update waiting, install offer. */
.qs-pwa-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .5rem 1rem; font-size: .9rem; }
.qs-pwa-offline { background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffe69c; }
.qs-pwa-update { background: var(--qs-primary-dark); color: #fff; }
.qs-pwa-install { background: var(--qs-primary-softer); color: var(--qs-primary-dark); border-bottom: 1px solid var(--qs-primary-border); }

/* Translations grid: an empty cell must catch the eye across a long table. */
.qs-translation-grid { max-height: 70vh; overflow: auto; }
.qs-translation-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--qs-surface); }
.qs-translation-missing { background: var(--qs-warning-soft); border-color: color-mix(in srgb, var(--qs-warning) 35%, transparent); }

/* Menu from photos: the draft is a working area, visibly apart from the live menu. */
.qs-ai-card { border-color: color-mix(in srgb, var(--qs-primary) 30%, transparent); }
.qs-draft-category { padding: .75rem; border: 1px dashed var(--qs-border); border-radius: var(--qs-radius); background: var(--qs-surface-subtle); }