:root {
    --brand-primary: #1f3d2b;
    --brand-accent: #f36f45;
    --brand-bg: #f7f7f2;
    --brand-surface: #ffffff;
    --brand-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ink: #151714;
    --muted: #687065;
    --line: rgba(21, 23, 20, 0.12);
    --soft-line: rgba(21, 23, 20, 0.08);
    --shadow: 0 18px 50px rgba(32, 36, 31, 0.12);
    --radius: 8px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    color-scheme: light;
}

body {
    min-height: 100%;
    margin: 0;
    background: var(--brand-bg);
    color: var(--ink);
    font-family: var(--brand-font);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

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

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

[data-theme="contrast"] {
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

[data-theme="garden"] {
    --soft-line: rgba(41, 87, 67, 0.13);
}

[data-theme="dark"] {
    --brand-bg: #111311;
    --brand-surface: #1a1d19;
    --ink: #f5f1e8;
    --muted: #a8ad9f;
    --line: rgba(245, 241, 232, 0.18);
    --soft-line: rgba(245, 241, 232, 0.12);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
    color-scheme: dark;
}

[data-theme="dark"] .soft-button,
[data-theme="dark"] .cart-line,
[data-theme="dark"] .call-row,
[data-theme="dark"] .visit-row,
[data-theme="dark"] .order-card,
[data-theme="dark"] .payment-provider-card,
[data-theme="dark"] .integration-profile,
[data-theme="dark"] .integration-settings-panel,
[data-theme="dark"] .integration-requirements span,
[data-theme="dark"] .integration-support-row,
[data-theme="dark"] .payment-summary,
[data-theme="dark"] .payment-demo-card,
[data-theme="dark"] .tip-modal-card,
[data-theme="dark"] .waiter-task,
[data-theme="dark"] .waiter-table-card,
[data-theme="dark"] .table-order-panel,
[data-theme="dark"] .table-order-modal-card,
[data-theme="dark"] .table-order-card,
[data-theme="dark"] .table-order-item,
[data-theme="dark"] .menu-category-row,
[data-theme="dark"] .menu-item-edit-form,
[data-theme="dark"] .serve-check,
[data-theme="dark"] .kitchen-item,
[data-theme="dark"] .kitchen-menu-item,
[data-theme="dark"] .kitchen-menu-category,
[data-theme="dark"] .settings-toggle-row,
[data-theme="dark"] .visit-payment-summary span,
[data-theme="dark"] .menu-file-drop,
[data-theme="dark"] .menu-import-help span {
    background: rgba(245, 241, 232, 0.06);
}

[data-theme="dark"] .acquiring-request-map {
    background: rgba(245, 241, 232, 0.06);
}

[data-theme="dark"] .acquiring-runtime-list span {
    background: rgba(245, 241, 232, 0.08);
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select,
[data-theme="dark"] select,
[data-theme="dark"] .tip-options button,
[data-theme="dark"] .post-payment-tip-options button,
[data-theme="dark"] .tip-waiter-choice,
[data-theme="dark"] .qty-control button,
[data-theme="dark"] .icon-button,
[data-theme="dark"] .hall-create-form input,
[data-theme="dark"] .add-table-form input,
[data-theme="dark"] .add-table-form select,
[data-theme="dark"] .floor-seat-control input,
[data-theme="dark"] .waiter-photo-preview,
[data-theme="dark"] .dish-thumb {
    background: #20241f;
    color: var(--ink);
}

[data-theme="dark"] .floor-delete-button {
    background: rgba(216, 73, 54, 0.16);
    color: #ffad9f;
}

[data-theme="dark"] .tip-waiter-choice.is-active {
    background: color-mix(in srgb, var(--brand-primary) 24%, #20241f);
}

[data-theme="dark"] .serve-check.is-ready,
[data-theme="dark"] .kitchen-item.status-ready {
    background: rgba(34, 122, 69, 0.16);
}

[data-theme="dark"] .kitchen-menu-item.is-stopped {
    background: rgba(216, 73, 54, 0.14);
}

[data-theme="dark"] .kitchen-menu-category-head {
    background: rgba(245, 241, 232, 0.07);
}

[data-theme="dark"] .visit-chip,
[data-theme="dark"] .menu-preview,
[data-theme="dark"] .floor-plan {
    background-color: #151814;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-lockup strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-lockup small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
}

.primary-button,
.outline-button,
.soft-button,
.danger-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.primary-button {
    padding: 0 18px;
    background: var(--brand-primary);
    color: #fff;
}

.outline-button {
    padding: 0 16px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
}

.soft-button {
    padding: 0 16px;
    background: color-mix(in srgb, var(--brand-primary) 9%, #fff);
    color: var(--brand-primary);
}

.danger-button {
    padding: 0 14px;
    border: 1px solid rgba(216, 73, 54, 0.22);
    background: rgba(216, 73, 54, 0.08);
    color: #b43122;
}

.primary-button:hover,
.outline-button:hover,
.soft-button:hover,
.danger-button:hover,
.icon-button:hover {
    transform: translateY(-1px);
}

.primary-button:disabled,
.outline-button:disabled,
.soft-button:disabled,
.danger-button:disabled,
.icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
}

.button-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
}

.button-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.wide {
    width: 100%;
}

.icon-button {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--brand-surface);
    color: var(--ink);
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform 160ms ease, background 160ms ease;
}

.field {
    display: grid;
    gap: 8px;
}

.field span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.field input,
.field textarea,
.field select,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    outline: none;
}

.field input,
.field select,
select {
    min-height: 42px;
    padding: 0 12px;
}

.field textarea {
    min-height: 82px;
    padding: 10px 12px;
    resize: vertical;
}

.empty-state {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    max-width: min(360px, calc(100vw - 32px));
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

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

.landing-shell {
    background: #ffffff;
    color: #142017;
}

.landing-hero {
    position: relative;
    display: grid;
    min-height: 92dvh;
    overflow: hidden;
    padding: 24px clamp(18px, 5vw, 56px) 30px;
    background:
        linear-gradient(90deg, rgba(7, 14, 9, 0.86) 0%, rgba(7, 14, 9, 0.64) 45%, rgba(7, 14, 9, 0.18) 100%),
        linear-gradient(0deg, rgba(7, 14, 9, 0.54), rgba(7, 14, 9, 0.1)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=2400&q=88") center / cover;
    color: #fff;
}

.landing-nav,
.landing-hero-content,
.landing-proof-row,
.landing-section,
.landing-final {
    width: min(1220px, 100%);
    margin: 0 auto;
}

.landing-nav {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}

.landing-brand,
.landing-nav-links,
.landing-actions,
.landing-proof-row,
.landing-logo-cloud,
.landing-palette {
    display: flex;
    align-items: center;
}

.landing-brand {
    gap: 10px;
    font-size: 20px;
    font-weight: 850;
}

.landing-brand-logo {
    display: block;
    width: 86px;
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.24));
}

.landing-brand-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    color: #7ee19a;
}

.landing-brand-mark svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.landing-nav-links {
    justify-content: center;
    gap: 24px;
}

.landing-nav-links a,
.landing-nav-cta {
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 800;
}

.landing-nav-links a:hover {
    color: #fff;
}

.landing-nav-cta,
.landing-secondary {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
    gap: clamp(28px, 6vw, 74px);
    align-items: center;
    padding: clamp(54px, 10vh, 112px) 0 42px;
}

.landing-hero-copy {
    max-width: 650px;
}

.landing-service-logo {
    display: block;
    width: min(300px, 66vw);
    height: auto;
    margin-bottom: 26px;
    filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.34));
}

.landing-hero h1 {
    margin: 0;
    font-size: clamp(46px, 7vw, 92px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.94;
}

.landing-hero p {
    max-width: 560px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 19px;
    line-height: 1.55;
}

.landing-actions {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.landing-primary {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: var(--radius);
    background: #f36f45;
    color: #fff;
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 18px 38px rgba(243, 111, 69, 0.28);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.landing-secondary.dark {
    border-color: rgba(20, 32, 23, 0.24);
    color: #142017;
}

.landing-primary:hover,
.landing-secondary:hover,
.landing-nav-cta:hover {
    transform: translateY(-1px);
}

.landing-product-preview {
    position: relative;
    min-height: 610px;
}

.landing-phone {
    position: absolute;
    left: 15%;
    top: 52px;
    z-index: 3;
    display: grid;
    width: 270px;
    gap: 12px;
    padding: 18px 14px 14px;
    border: 8px solid #101710;
    border-radius: 34px;
    background: #f8faf6;
    box-shadow: 0 34px 70px rgba(0, 0, 0, 0.36);
    color: #162015;
    transform: rotate(-7deg);
}

.landing-phone::before {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 76px;
    height: 16px;
    border-radius: 0 0 12px 12px;
    background: #101710;
    content: "";
    transform: translateX(-50%);
}

.landing-phone-top,
.landing-phone-item,
.landing-phone-order,
.landing-live-card header,
.landing-live-card > div,
.landing-mini-menu,
.landing-mini-pay {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.landing-phone-top {
    justify-content: center;
    padding-top: 18px;
    font-size: 18px;
}

.landing-phone-tabs {
    display: flex;
    gap: 8px;
    color: #687065;
    font-size: 11px;
    font-weight: 800;
}

.landing-phone-tabs span:first-child {
    color: #1f3d2b;
}

.landing-phone-item {
    padding: 8px;
    border: 1px solid rgba(31, 61, 43, 0.1);
    border-radius: 8px;
    background: #fff;
}

.landing-phone-item img {
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
}

.landing-phone-item div {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.landing-phone-item strong {
    font-size: 13px;
    line-height: 1.15;
}

.landing-phone-item span {
    color: #687065;
    font-size: 12px;
    font-weight: 800;
}

.landing-phone-item b {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 6px;
    background: #1f3d2b;
    color: #fff;
}

.landing-phone-order {
    min-height: 48px;
    padding: 0 12px;
    border-radius: 8px;
    background: #1f3d2b;
    color: #fff;
    font-size: 13px;
}

.landing-live-card {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(13, 17, 13, 0.78);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.landing-live-card header {
    padding-bottom: 4px;
}

.landing-live-card header strong {
    color: #fff;
}

.landing-live-card header span,
.landing-live-card > div span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
}

.landing-live-card > div strong {
    color: #fff;
    font-size: 13px;
}

.landing-live-card b {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f7ba45;
    color: #18150b;
    font-size: 11px;
    line-height: 1;
}

.landing-live-card b.ready {
    background: #5ed48a;
    color: #0f2a17;
}

.landing-kitchen-card {
    top: 16px;
    right: 0;
    width: 320px;
    padding: 18px;
}

.landing-floor-card {
    right: 6%;
    bottom: 20px;
    width: 330px;
    padding: 18px;
}

.landing-table-map {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px !important;
}

.landing-table-map span {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.landing-table-map span:nth-child(2n) {
    border-radius: 8px;
}

.landing-table-map span.is-active {
    background: #3bbf6c;
}

.landing-table-map span.is-busy {
    background: #72513b;
}

.landing-proof-row {
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.landing-proof-row strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.landing-section {
    padding: 78px clamp(18px, 4vw, 42px);
}

.landing-feature-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.landing-feature {
    display: grid;
    align-content: start;
    gap: 10px;
}

.landing-feature > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #1f3d2b;
}

.landing-feature svg,
.landing-value h3::before {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.landing-feature h2,
.landing-feature p,
.landing-section-head h2,
.landing-section-head p,
.landing-steps h3,
.landing-steps p,
.landing-integrations h2,
.landing-integrations p,
.landing-value h3,
.landing-value p,
.landing-custom h2,
.landing-custom p,
.landing-final h2,
.landing-final p {
    margin: 0;
}

.landing-feature h2 {
    font-size: 16px;
    line-height: 1.2;
}

.landing-feature p,
.landing-steps p,
.landing-value p,
.landing-custom p,
.landing-integrations p,
.landing-final p {
    color: #5f675c;
    font-size: 15px;
}

.landing-section-head {
    display: grid;
    max-width: 800px;
    gap: 14px;
    margin: 0 auto 34px;
    text-align: center;
}

.landing-section-head h2,
.landing-integrations h2,
.landing-custom h2,
.landing-final h2 {
    color: #142017;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.02;
}

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

.landing-steps article {
    display: grid;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(20, 32, 23, 0.16);
}

.landing-steps span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(31, 61, 43, 0.35);
    border-radius: 50%;
    color: #1f3d2b;
    font-weight: 850;
}

.landing-steps h3,
.landing-value h3 {
    color: #142017;
    font-size: 18px;
    line-height: 1.18;
}

.landing-integrations {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 42px;
    align-items: center;
    border-top: 1px solid rgba(20, 32, 23, 0.08);
    border-bottom: 1px solid rgba(20, 32, 23, 0.08);
}

.landing-integrations > div:first-child {
    display: grid;
    gap: 14px;
}

.landing-logo-cloud {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
}

.landing-logo-cloud span {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 1px solid rgba(20, 32, 23, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #1f3d2b;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(20, 32, 23, 0.05);
}

.landing-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.landing-value-grid article {
    display: grid;
    gap: 10px;
    padding: 28px;
    border: 1px solid rgba(20, 32, 23, 0.1);
    border-radius: 8px;
    background: #f8faf6;
}

.landing-custom {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 38px;
    align-items: center;
    padding-top: 54px;
}

.landing-custom-copy {
    display: grid;
    gap: 18px;
}

.landing-custom-preview {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 16px;
    align-items: stretch;
}

.landing-palette {
    grid-column: 1 / -1;
    gap: 10px;
    justify-content: flex-end;
}

.landing-palette span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(20, 32, 23, 0.1);
}

.landing-mini-menu,
.landing-mini-pay {
    min-height: 168px;
    padding: 18px;
    border: 1px solid rgba(20, 32, 23, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(20, 32, 23, 0.08);
}

.landing-mini-menu {
    align-items: flex-start;
    flex-direction: column;
}

.landing-mini-menu img {
    width: 100%;
    aspect-ratio: 1.7;
    border-radius: 8px;
    object-fit: cover;
}

.landing-mini-menu div,
.landing-mini-pay {
    display: grid;
    gap: 8px;
}

.landing-mini-menu strong,
.landing-mini-pay strong {
    color: #142017;
    font-size: 22px;
    line-height: 1.05;
}

.landing-mini-menu span,
.landing-mini-pay span {
    color: #5f675c;
    font-size: 13px;
    font-weight: 800;
}

.landing-mini-pay b {
    display: grid;
    min-height: 44px;
    place-items: center;
    border-radius: 8px;
    background: #1f3d2b;
    color: #fff;
    font-size: 14px;
}

.landing-final {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 80px 22px;
    background:
        linear-gradient(rgba(8, 20, 11, 0.82), rgba(8, 20, 11, 0.82)),
        url("https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=2000&q=84") center / cover;
    color: #fff;
    text-align: center;
}

.landing-final h2 {
    color: #fff;
}

.landing-final p {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.78);
}

.landing-legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    width: min(1220px, 100%);
    margin: 0 auto;
    padding: 28px 22px 42px;
    color: #5f675c;
    font-size: 14px;
}

.landing-legal-footer a,
.guest-legal-links a,
.login-legal-links a {
    color: inherit;
    text-decoration: none;
}

.landing-legal-footer a:hover,
.guest-legal-links a:hover,
.login-legal-links a:hover {
    color: var(--brand-primary);
}

.guest-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 42px;
}

.guest-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-mini-link,
.guest-link {
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.guest-hero {
    padding: 18px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow);
}

.guest-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 28px;
    align-items: center;
    padding: 42px 0 26px;
}

.guest-intro h1 {
    max-width: 720px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(34px, 6vw, 68px);
    font-weight: 850;
    line-height: 0.96;
    letter-spacing: 0;
}

.guest-intro p {
    max-width: min(600px, 100%);
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.guest-intro > * {
    min-width: 0;
}

.guest-action-panel {
    display: grid;
    gap: 14px;
    justify-items: end;
}

.visit-chip {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    width: min(100%, 300px);
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 70%, #fff);
}

.visit-chip-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.visit-chip-copy span,
.visit-chip-copy strong,
.visit-chip strong {
    overflow-wrap: anywhere;
}

.visit-chip-copy > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.visit-chip strong {
    font-size: 16px;
}

.waiter-face {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 2px solid color-mix(in srgb, var(--waiter-color, var(--brand-primary)) 38%, #fff);
    border-radius: 50%;
    background: var(--waiter-color, var(--brand-primary));
    color: #fff;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.waiter-face img,
.waiter-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-actions {
    display: grid;
    width: min(100%, 300px);
    grid-template-columns: 1fr;
    gap: 10px;
}

.quick-actions [data-cart-count],
.order-count-badge {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    font-size: 12px;
}

.order-count-badge {
    flex: 0 0 auto;
}

.wide .order-count-badge {
    margin-left: auto;
}

.table-order-panel {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: 0 12px 36px rgba(35, 38, 34, 0.06);
}

.table-order-head,
.table-order-card header,
.table-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.table-order-head h2 {
    margin: 2px 0 0;
    font-size: 24px;
    line-height: 1;
}

.table-order-head span,
.table-order-summary span,
.table-order-card header span,
.table-order-payment,
.item-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.table-order-summary {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.table-order-summary strong {
    font-size: 24px;
    line-height: 1;
}

.table-order-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table-order-progress span {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.table-order-list,
.table-order-items {
    display: grid;
    gap: 8px;
}

.table-order-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 48%, #fff);
}

.table-order-card header strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
}

.table-order-item {
    padding: 10px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.table-order-item.is-served {
    border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--line));
}

.table-order-item strong,
.table-order-item span {
    display: block;
}

.table-order-item strong {
    font-size: 14px;
}

.table-order-item div > span {
    color: var(--muted);
    font-size: 13px;
}

.item-status {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
}

.floating-order-button {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 18;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-primary) 28%, transparent);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.86);
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.floating-order-button.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.floating-order-button.is-bumping {
    animation: orderButtonBump 320ms ease;
}

.floating-order-button svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.floating-order-button span {
    position: absolute;
    top: -3px;
    right: -3px;
    display: grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid var(--brand-surface);
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
}

.guest-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    padding: 26px 0 76px;
    color: var(--muted);
    font-size: 13px;
}

.category-rail {
    display: flex;
    gap: 10px;
    margin: 24px 0 18px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.category-rail::-webkit-scrollbar {
    display: none;
}

.category-tab {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.category-tab::after {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
}

.category-tab.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary) 22%, transparent);
    transform: translateY(-1px);
}

.category-tab.is-pulsing {
    animation: categoryPop 300ms ease;
}

.category-tab.is-pulsing::after {
    animation: categoryRipple 420ms ease-out;
}

.menu-grid.is-filtering .dish-card:not([hidden]) {
    animation: dishReveal 320ms ease both;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns, 3), minmax(0, 1fr));
    gap: 16px;
}

.menu-layout-book {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
        color-mix(in srgb, var(--brand-surface) 94%, var(--brand-bg));
    box-shadow: var(--shadow);
}

.menu-layout-book::before,
.menu-layout-book::after {
    position: absolute;
    top: 18px;
    bottom: 18px;
    width: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    content: "";
}

.menu-layout-book::before {
    left: calc(50% - 18px);
}

.menu-layout-book::after {
    right: calc(50% - 18px);
}

.book-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0 8px;
}

.book-controls span {
    min-width: 150px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.dish-card {
    overflow: hidden;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.dish-photo {
    position: relative;
    aspect-ratio: 1.35;
    background-color: #d9ded7;
    background-position: center;
    background-size: cover;
}

.dish-state {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(21, 23, 20, 0.84);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.dish-body {
    display: grid;
    gap: 10px;
    padding: 15px;
}

.dish-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dish-meta span {
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.dish-body h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.12;
}

.dish-body p {
    min-height: 68px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.dish-body small {
    color: var(--muted);
    font-size: 12px;
}

.dish-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.dish-footer strong {
    font-size: 18px;
}

.add-button {
    border-color: transparent;
    background: var(--brand-accent);
    color: #fff;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    display: grid;
    width: min(420px, 100%);
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto;
    gap: 16px;
    padding: 20px;
    border-left: 1px solid var(--line);
    background: var(--brand-surface);
    box-shadow: -24px 0 60px rgba(21, 23, 20, 0.16);
    transform: translateX(104%);
    transition: transform 220ms ease;
}

.cart-drawer.is-open {
    transform: translateX(0);
}

.action-feedback {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 12, 10, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.action-feedback.is-visible {
    opacity: 1;
}

.action-feedback-card {
    max-width: min(560px, calc(100vw - 48px));
    padding: 28px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: clamp(28px, 7vw, 54px);
    font-weight: 850;
    line-height: 1;
    text-align: center;
    transform: scale(0.88);
    transition: transform 220ms ease;
}

.action-feedback.is-visible .action-feedback-card {
    transform: scale(1);
}

.payment-modal {
    position: fixed;
    inset: 0;
    z-index: 42;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 10, 8, 0.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.tip-modal {
    position: fixed;
    inset: 0;
    z-index: 43;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 10, 8, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.table-order-modal {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 10, 8, 0.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.payment-modal.is-open,
.payment-modal:not([hidden]),
.tip-modal.is-open,
.tip-modal:not([hidden]),
.table-order-modal.is-open,
.table-order-modal:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.payment-modal-card {
    position: relative;
    display: grid;
    width: min(460px, 100%);
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow);
    transform: translateY(12px) scale(0.98);
    transition: transform 180ms ease;
}

.tip-modal-card {
    position: relative;
    display: grid;
    width: min(500px, 100%);
    max-height: min(88dvh, 760px);
    gap: 14px;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow);
    transform: translateY(12px) scale(0.98);
    transition: transform 180ms ease;
}

.table-order-modal-card {
    position: relative;
    display: grid;
    width: min(720px, 100%);
    max-height: min(86dvh, 820px);
    gap: 14px;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow);
    transform: translateY(12px) scale(0.98);
    transition: transform 180ms ease;
}

.payment-modal.is-open .payment-modal-card,
.payment-modal:not([hidden]) .payment-modal-card,
.tip-modal.is-open .tip-modal-card,
.tip-modal:not([hidden]) .tip-modal-card,
.table-order-modal.is-open .table-order-modal-card,
.table-order-modal:not([hidden]) .table-order-modal-card {
    transform: translateY(0) scale(1);
}

.payment-close,
.tip-close,
.table-order-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.table-order-panel-modal {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.payment-modal-head {
    display: grid;
    gap: 4px;
    padding-right: 42px;
}

.payment-modal-head span,
.payment-provider-card span,
.payment-summary span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.payment-modal-head h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1;
}

.payment-modal-head p,
.payment-summary small {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.payment-provider-card,
.payment-summary {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 58%, #fff);
}

.payment-provider-card strong,
.payment-summary strong {
    font-size: 22px;
    line-height: 1;
}

.payment-methods {
    display: grid;
    gap: 8px;
}

.payment-method-option {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.payment-method-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}

.payment-method-option input {
    accent-color: var(--brand-primary);
}

.post-payment-tip-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.post-payment-tip-options button {
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 15px;
    font-weight: 850;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.post-payment-tip-options button:hover {
    transform: translateY(-1px);
}

.post-payment-tip-options button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.tip-waiter-block {
    display: grid;
    gap: 8px;
}

.field-caption {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tip-waiter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.tip-waiter-choice {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 64px;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tip-waiter-choice:hover {
    transform: translateY(-1px);
}

.tip-waiter-choice.is-active {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}

.tip-waiter-choice .waiter-face {
    width: 46px;
    height: 46px;
    font-size: 16px;
}

.tip-waiter-choice strong {
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.15;
}

.cart-header,
.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cart-header span,
.cart-total span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.cart-header strong,
.cart-total strong {
    font-size: 20px;
}

.cart-lines {
    display: grid;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
}

.cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 52%, #fff);
}

.cart-line strong,
.cart-line span {
    overflow-wrap: anywhere;
}

.cart-line strong {
    font-size: 14px;
}

.cart-line span {
    color: var(--muted);
    font-size: 13px;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-control button {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
}

.tip-panel {
    display: grid;
    gap: 10px;
}

.tip-panel > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.tip-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.tip-options button {
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.tip-options button.is-active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.admin-shell {
    display: grid;
    min-height: 100dvh;
    grid-template-columns: 260px minmax(0, 1fr);
}

.admin-sidebar {
    position: sticky;
    top: 0;
    display: grid;
    height: 100dvh;
    align-content: start;
    gap: 22px;
    padding: 24px 18px;
    border-right: 1px solid var(--line);
    background: var(--brand-surface);
}

.admin-nav {
    display: grid;
    gap: 8px;
}

.admin-nav a {
    padding: 11px 12px;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.admin-nav a.is-active {
    background: var(--brand-primary);
    color: #fff;
}

.guest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.admin-session-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 48%, #fff);
}

.admin-session-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-session-card strong {
    font-size: 15px;
}

.admin-session-card form,
.admin-session-card button {
    width: 100%;
}

.admin-content {
    display: grid;
    gap: 22px;
    align-content: start;
    padding: 28px;
}

.visit-details-row {
    display: grid;
    padding: 0;
    overflow: hidden;
}

.visit-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.visit-summary::-webkit-details-marker {
    display: none;
}

.visit-admin-body {
    display: grid;
    gap: 12px;
    padding: 0 12px 12px;
}

.visit-admin-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.waiter-login-shell {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(120deg, rgba(31, 61, 43, 0.88), rgba(18, 24, 18, 0.74)),
        url("https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?auto=format&fit=crop&w=1800&q=82") center/cover;
}

.waiter-login-card {
    display: grid;
    width: min(440px, 100%);
    gap: 22px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.waiter-login-card h1 {
    margin: 0;
    font-size: 36px;
    line-height: 1;
}

.waiter-login-card p {
    margin: 10px 0 0;
    color: var(--muted);
}

.waiter-login-form {
    display: grid;
    gap: 14px;
}

.login-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    color: var(--muted);
    font-size: 13px;
}

.legal-page {
    background: #f6f5ef;
}

.legal-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0 56px;
}

.legal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0 28px;
}

.legal-brand img {
    display: block;
    width: 82px;
    height: auto;
}

.legal-topbar div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legal-topbar a {
    color: #142017;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}

.legal-topbar div a {
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid rgba(20, 32, 23, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
}

.legal-hero,
.legal-note,
.legal-document {
    border: 1px solid rgba(20, 32, 23, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 32, 23, 0.08);
}

.legal-hero {
    display: grid;
    gap: 14px;
    padding: clamp(24px, 5vw, 54px);
}

.legal-hero span,
.legal-card span,
.legal-document header span {
    color: #687066;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.legal-hero h1,
.legal-document h1 {
    margin: 0;
    color: #121712;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 0.96;
}

.legal-hero p,
.legal-note p,
.legal-card p,
.legal-document p {
    margin: 0;
    color: #5f675c;
    line-height: 1.55;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.legal-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 230px;
    padding: 22px;
    border: 1px solid rgba(20, 32, 23, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(20, 32, 23, 0.06);
}

.legal-card h2,
.legal-note h2,
.legal-document h2 {
    margin: 0;
    color: #121712;
}

.legal-card h2 {
    font-size: 24px;
    line-height: 1.05;
}

.legal-card a {
    align-self: end;
    width: fit-content;
    margin-top: 8px;
    color: var(--brand-primary);
    font-weight: 900;
    text-decoration: none;
}

.legal-note {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 22px;
}

.legal-document-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
}

.legal-document-nav {
    position: sticky;
    top: 18px;
    display: grid;
    align-self: start;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(20, 32, 23, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.legal-document-nav strong {
    margin-bottom: 6px;
}

.legal-document-nav a {
    padding: 9px 10px;
    border-radius: 8px;
    color: #4f584d;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

.legal-document-nav a.is-active,
.legal-document-nav a:hover {
    background: #e9eee8;
    color: #142017;
}

.legal-document {
    display: grid;
    gap: 24px;
    padding: clamp(22px, 4vw, 46px);
}

.legal-document header {
    display: grid;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(20, 32, 23, 0.12);
}

.legal-document section {
    display: grid;
    gap: 10px;
}

.legal-document h2 {
    font-size: 24px;
}

.legal-document-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 32, 23, 0.12);
}

.form-alert {
    padding: 12px 14px;
    border: 1px solid rgba(216, 73, 54, 0.22);
    border-radius: var(--radius);
    background: rgba(216, 73, 54, 0.08);
    color: #a72e20;
    font-size: 14px;
    font-weight: 800;
}

.waiter-workspace {
    min-height: 100dvh;
}

.waiter-topbar {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--brand-surface) 92%, transparent);
    backdrop-filter: blur(14px);
}

.waiter-session-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.waiter-session-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.waiter-session-name > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiter-session-card strong {
    font-size: 16px;
}

.waiter-sound-button.is-enabled {
    border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
    color: var(--brand-primary);
}

.waiter-content {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.waiter-alert-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(216, 73, 54, 0.28);
    border-radius: var(--radius);
    background: color-mix(in srgb, #f36f45 12%, var(--brand-surface));
    box-shadow: 0 16px 38px rgba(216, 73, 54, 0.12);
}

.waiter-alert-panel[hidden] {
    display: none;
}

.waiter-alert-panel strong,
.waiter-alert-panel span {
    display: block;
}

.waiter-alert-panel strong {
    font-size: 16px;
}

.waiter-alert-panel span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.section-header h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1;
}

.section-header p {
    max-width: 700px;
    margin: 10px 0 0;
    color: var(--muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.metric-tile,
.panel,
.integration-card {
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: 0 12px 36px rgba(35, 38, 34, 0.06);
}

.metric-tile {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.metric-tile span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.metric-tile strong {
    font-size: 28px;
    line-height: 1;
}

.metric-tile.is-alert strong {
    color: var(--brand-accent);
}

.work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: 18px;
}

.panel {
    padding: 18px;
}

.panel-title {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.panel-title.compact {
    margin-top: 22px;
}

.panel-title h2,
.hall-block h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
}

.panel-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.hall-block + .hall-block {
    margin-top: 18px;
}

.hall-heading {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 10px;
}

.hall-block h3 {
    margin: 0;
}

.hall-create-form,
.add-table-form {
    display: grid;
    gap: 8px;
}

.hall-create-form {
    grid-template-columns: minmax(150px, 1fr) auto;
    min-width: min(420px, 100%);
}

.add-table-form {
    grid-template-columns: minmax(88px, 1fr) 86px minmax(128px, 0.9fr) auto;
}

.hall-create-form input,
.add-table-form input,
.add-table-form select,
.floor-seat-control input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    outline: none;
    padding: 0 10px;
}

.floor-plan {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1000 / 640;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(31, 61, 43, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(31, 61, 43, 0.06) 1px, transparent 1px),
        color-mix(in srgb, var(--brand-bg) 75%, #fff);
    background-size: 40px 40px;
}

.floor-table {
    position: absolute;
    left: calc(var(--x) * 0.1%);
    top: calc(var(--y) * 0.15625%);
    display: grid;
    width: 98px;
    min-height: 78px;
    grid-template-rows: auto auto;
    gap: 5px;
    place-items: center;
    padding: 9px 8px 8px;
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    cursor: grab;
    box-shadow: 0 10px 22px rgba(21, 23, 20, 0.12);
    user-select: none;
    touch-action: none;
}

.floor-table.round {
    width: 90px;
    min-height: 90px;
    border-radius: 50%;
}

.floor-table:active {
    cursor: grabbing;
}

.floor-table strong {
    font-size: 18px;
    line-height: 1;
}

.floor-seat-control {
    display: grid;
    width: 52px;
    gap: 2px;
    place-items: center;
    cursor: default;
}

.floor-seat-control span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.floor-seat-control input {
    min-height: 24px;
    padding: 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.floor-delete-button {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(216, 73, 54, 0.28);
    border-radius: 50%;
    background: #fff1ee;
    color: #b43122;
    cursor: pointer;
    font-size: 18px;
    font-weight: 850;
    line-height: 1;
    transition: transform 160ms ease, background 160ms ease;
}

.floor-delete-button:hover {
    background: #ffe2dc;
    transform: scale(1.08);
}

.floor-table.status-occupied {
    border-color: var(--brand-accent);
}

.floor-table.status-occupied::after {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand-accent);
    content: "";
}

.call-list,
.visit-list {
    display: grid;
    gap: 10px;
}

.call-row,
.visit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 45%, #fff);
}

.visit-row.visit-details-row {
    display: grid;
    align-items: stretch;
    padding: 0;
}

.call-row {
    align-items: start;
    flex-direction: column;
}

.call-row span,
.visit-row span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.visit-row select {
    width: min(190px, 100%);
    flex: 0 0 190px;
}

.order-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.order-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 40%, #fff);
}

.order-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.order-card header span,
.menu-row span,
.integration-card header strong {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.integration-card header strong {
    text-transform: none;
}

.order-card h3 {
    margin: 3px 0 0;
    font-size: 19px;
}

.order-card ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    font-size: 14px;
}

.order-status-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.menu-table {
    display: grid;
    gap: 10px;
}

.menu-category-form,
.menu-category-row,
.menu-item-form {
    display: grid;
    gap: 12px;
}

.menu-import-panel {
    border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--soft-line));
}

.menu-import-form {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(150px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.menu-file-drop {
    display: grid;
    min-height: 156px;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 42%, var(--line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
    color: var(--brand-primary);
    cursor: pointer;
    text-align: center;
}

.menu-file-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.menu-file-drop strong {
    font-size: 16px;
}

.menu-file-drop small {
    max-width: 320px;
    color: var(--muted);
    font-size: 13px;
}

.menu-import-wide {
    grid-row: span 2;
}

.menu-import-form textarea {
    min-height: 156px;
}

.menu-import-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / 3;
    align-items: center;
    color: var(--muted);
    font-size: 13px;
}

.menu-import-help span {
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--brand-surface);
    font-size: 12px;
    font-weight: 800;
}

.menu-import-submit {
    grid-column: 1 / -1;
    justify-self: start;
}

.menu-category-form {
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: end;
    margin-bottom: 14px;
}

.menu-category-list {
    display: grid;
    gap: 8px;
}

.menu-category-row {
    grid-template-columns: minmax(220px, 1fr) auto auto;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 40%, #fff);
}

.menu-item-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}

.menu-item-edit-form {
    padding: 14px;
    border-top: 1px solid var(--soft-line);
    background: color-mix(in srgb, var(--brand-bg) 32%, #fff);
}

.menu-form-wide {
    grid-column: span 2;
}

.menu-form-action {
    align-self: end;
}

.menu-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.menu-check {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
}

.menu-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
}

.menu-editor-row {
    overflow: hidden;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.menu-editor-row[open] {
    border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line));
}

.menu-row-summary {
    display: grid;
    grid-template-columns: 34px 82px minmax(0, 1fr) auto auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    list-style: none;
}

.menu-row-summary::-webkit-details-marker {
    display: none;
}

.menu-row-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.menu-row-copy small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 14px;
}

.menu-row-copy strong {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.15;
}

.menu-edit-button {
    pointer-events: none;
}

.menu-row {
    display: grid;
    grid-template-columns: 34px 82px minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.menu-row.is-dragging,
.menu-editor-row.is-dragging {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow);
    opacity: 0.72;
}

.menu-row.is-drop-target,
.menu-editor-row.is-drop-target {
    border-color: var(--brand-accent);
    transform: translateY(2px);
}

.drag-handle {
    display: grid;
    width: 34px;
    height: 42px;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 48%, #fff);
    color: var(--muted);
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle span {
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: currentColor;
}

.menu-row img,
.menu-row-summary img {
    width: 82px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
}

.menu-row strong,
.menu-row p {
    overflow-wrap: anywhere;
}

.menu-row p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.switch {
    position: relative;
    width: 46px;
    height: 26px;
}

.switch input {
    position: absolute;
    opacity: 0;
}

.switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #c7ccc3;
    cursor: pointer;
    transition: background 160ms ease;
}

.switch span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform 160ms ease;
}

.switch input:checked + span {
    background: var(--brand-primary);
}

.switch input:checked + span::after {
    transform: translateX(20px);
}

.design-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap: 18px;
}

.design-form {
    display: grid;
    gap: 14px;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.preset-option {
    display: grid;
    min-height: 76px;
    align-content: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.preset-option input {
    position: absolute;
    opacity: 0;
}

.preset-option span {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 4px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.88);
    color: #151714;
}

.preset-option:has(input:checked) {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}

.preset-option[data-preset-preview="contrast"] {
    background: linear-gradient(135deg, #171717 0%, #171717 52%, #f7f7f2 52%);
    color: #fff;
}

.preset-option[data-preset-preview="garden"] {
    background: linear-gradient(135deg, #dfeee2 0%, #fff 55%, #f36f45 55%);
}

.preset-option[data-preset-preview="dark"] {
    background: linear-gradient(135deg, #111311 0%, #111311 58%, #f36f45 58%);
    color: #f5f1e8;
}

.menu-layout-settings {
    display: grid;
    gap: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--soft-line);
}

.layout-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.layout-choice label {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.layout-choice input {
    accent-color: var(--brand-primary);
}

@keyframes categoryPop {
    0% {
        transform: translateY(0) scale(1);
    }

    46% {
        transform: translateY(-2px) scale(1.06);
    }

    100% {
        transform: translateY(-1px) scale(1);
    }
}

@keyframes categoryRipple {
    0% {
        opacity: 0.18;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(18);
    }
}

@keyframes dishReveal {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes orderButtonBump {
    0% {
        transform: translateY(0) scale(1);
    }

    45% {
        transform: translateY(-3px) scale(1.1);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

.menu-preview {
    display: grid;
    place-items: center;
    min-height: 640px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 28%),
        color-mix(in srgb, var(--brand-bg) 80%, #fff);
}

.preview-phone {
    display: grid;
    width: min(360px, calc(100% - 32px));
    gap: 16px;
    padding: 18px;
    border: 10px solid #151714;
    border-radius: 32px;
    background: var(--brand-surface);
    box-shadow: var(--shadow);
}

.preview-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-phone h2 {
    margin: 16px 0 0;
    font-size: 30px;
    line-height: 1;
}

.preview-phone p,
.preview-top small {
    margin: 0;
    color: var(--muted);
}

.preview-dish {
    aspect-ratio: 1.15;
    border-radius: var(--radius);
    background: url("https://images.unsplash.com/photo-1519915028121-7d3463d20b13?auto=format&fit=crop&w=900&q=80") center / cover;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.integration-card {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 18px;
}

.integration-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.integration-card header span {
    font-size: 20px;
    font-weight: 850;
}

.integration-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.integration-actions {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(190px, 1fr);
    gap: 10px;
}

.integration-settings-panel {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 56%, #fff);
}

.integration-settings-panel[hidden] {
    display: none;
}

.integration-profile {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 48%, #fff);
}

.integration-api-head {
    display: grid;
    gap: 4px;
}

.integration-api-head > span,
.integration-requirements > strong {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
}

.integration-api-head strong {
    font-size: 15px;
}

.integration-api-head p {
    font-size: 13px;
}

.integration-requirements {
    display: grid;
    gap: 8px;
}

.integration-requirements div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.integration-requirements span {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.integration-support-list {
    display: grid;
    gap: 10px;
}

.integration-support-group {
    display: grid;
    gap: 6px;
}

.integration-support-group h3 {
    margin: 0;
    font-size: 14px;
}

.integration-support-row {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.integration-support-row strong {
    font-size: 13px;
    line-height: 1.2;
}

.integration-support-row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.integration-support-row.support-agent,
.integration-support-row.support-custom,
.integration-support-row.support-optional {
    border-left-color: var(--brand-accent);
}

.integration-support-row.support-planned {
    border-left-color: #9aa093;
}

.capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.capability-list span {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
}

.restaurant-settings-form {
    margin-bottom: 18px;
}

.settings-inline-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.65fr);
    gap: 12px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 48%, #fff);
}

.settings-toggle-row > span {
    color: var(--muted);
    font-size: 13px;
}

.settings-form,
.provider-fields,
.acquiring-preview {
    display: grid;
    gap: 14px;
}

.provider-fields {
    padding-top: 4px;
}

.provider-fields > p,
.settings-disclaimer {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.settings-note {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.acquiring-request-map {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 56%, #fff);
}

.acquiring-request-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.acquiring-request-head strong {
    font-size: 14px;
}

.acquiring-request-head a {
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.acquiring-request-map dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.acquiring-request-map dl > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.acquiring-request-map dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.acquiring-request-map dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}

.acquiring-runtime-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.acquiring-runtime-list span {
    padding: 7px 9px;
    border: 1px solid var(--soft-line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.acquiring-request-map p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.waiter-access-panel {
    display: grid;
    gap: 16px;
}

.staff-access-panel {
    display: grid;
    gap: 16px;
}

.staff-access-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr) minmax(150px, 0.8fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 45%, #fff);
}

.staff-access-form.is-new {
    grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(150px, 0.8fr) auto;
}

.staff-access-list {
    display: grid;
    gap: 10px;
}

.waiter-access-form {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.75fr) minmax(145px, 0.85fr) 76px minmax(130px, 0.8fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 45%, #fff);
}

.waiter-access-form.is-new {
    grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.75fr) minmax(160px, 0.85fr) 76px minmax(130px, 0.8fr) auto;
}

.waiter-access-list {
    display: grid;
    gap: 10px;
}

.waiter-active-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.waiter-photo-field {
    min-width: 0;
}

.waiter-photo-control {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 42px;
}

.waiter-photo-preview {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--waiter-color, var(--brand-primary));
    color: #fff;
    font-weight: 850;
    text-transform: uppercase;
}

.waiter-photo-control input[type="file"] {
    width: 100%;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.payment-demo-card {
    display: grid;
    gap: 12px;
    width: min(420px, 100%);
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 58%, #fff);
}

.payment-demo-card > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.payment-demo-card > strong {
    font-size: 28px;
    line-height: 1;
}

.integration-config-card {
    align-content: start;
}

.integration-form,
.csv-import-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.integration-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 9px 10px;
}

.integration-toggle-row strong {
    font-size: 13px;
}

.csv-import-form textarea {
    min-height: 160px;
    resize: vertical;
}

.payment-demo-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.payment-demo-methods span,
.status-pill,
.status-strip span {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.waiter-select {
    display: grid;
    min-width: min(260px, 100%);
    gap: 6px;
}

.waiter-select span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.waiter-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px;
}

.waiter-task-list,
.waiter-table-list,
.waiter-order-grid {
    display: grid;
    gap: 10px;
}

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

.waiter-task,
.waiter-table-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 45%, #fff);
}

.waiter-task.is-alerting,
.waiter-order-card.is-alerting {
    border-color: rgba(216, 73, 54, 0.42);
    box-shadow: 0 0 0 3px rgba(243, 111, 69, 0.12), 0 16px 36px rgba(216, 73, 54, 0.12);
    animation: waiter-alert-pulse 1.4s ease-in-out infinite;
}

.waiter-table-details-card {
    display: grid;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.waiter-table-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
}

.waiter-table-summary::-webkit-details-marker {
    display: none;
}

.waiter-table-summary::after {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    content: "+";
    font-size: 20px;
    font-weight: 800;
}

.waiter-table-details-card[open] .waiter-table-summary::after {
    content: "−";
}

.waiter-visit-orders {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.waiter-visit-order {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.waiter-visit-order-head,
.waiter-visit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.waiter-dish-line,
.kitchen-dish-line {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.dish-thumb {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 56%, #fff);
    color: var(--muted);
    font-size: 18px;
    font-weight: 850;
    text-transform: uppercase;
}

.dish-thumb.small {
    width: 50px;
    height: 50px;
}

.dish-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.waiter-visit-order-head span,
.waiter-visit-item small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.waiter-visit-item span {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
}

.waiter-dish-line > span:last-child,
.kitchen-dish-line > span:last-child {
    overflow-wrap: anywhere;
}

.waiter-dish-line .dish-thumb,
.kitchen-dish-line .dish-thumb {
    font-size: 18px;
    font-weight: 850;
}

.closed-visits-panel {
    margin-top: 18px;
}

.closed-visit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.closed-visit-meta span {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.visit-payment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.visit-payment-summary span {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 850;
}

.waiter-table-details-card .waiter-table-actions {
    padding: 0 14px 14px;
}

.waiter-table-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.waiter-task span,
.waiter-table-card span,
.waiter-table-card small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.waiter-table-card strong {
    display: block;
    margin: 3px 0;
    font-size: 22px;
    line-height: 1;
}

.waiter-order-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.alert-ack-button {
    min-height: 36px;
    padding: 0 12px;
}

.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.waiter-item-checklist {
    display: grid;
    gap: 8px;
}

.serve-check {
    position: relative;
    display: grid;
    min-height: 74px;
    grid-template-columns: 48px 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--brand-surface);
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.serve-check:active {
    transform: scale(0.99);
}

.serve-check:has(input:disabled) {
    cursor: default;
    opacity: 0.78;
}

.serve-check:has(input:disabled):active {
    transform: none;
}

.serve-check input {
    position: absolute;
    opacity: 0;
}

.serve-check-box {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 56%, #fff);
}

.serve-check-thumb {
    width: 58px;
    height: 58px;
}

.serve-check-box::after {
    color: #fff;
    content: "✓";
    font-size: 28px;
    font-weight: 850;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 160ms ease, transform 160ms ease;
}

.serve-check.is-served {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
}

.serve-check.is-served .serve-check-box {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
}

.serve-check.is-served .serve-check-box::after {
    opacity: 1;
    transform: scale(1);
}

.serve-check.is-ready {
    border-color: rgba(34, 122, 69, 0.42);
    background: color-mix(in srgb, #ebf7ee 82%, var(--brand-surface));
    box-shadow: inset 0 0 0 1px rgba(34, 122, 69, 0.16);
}

.serve-check.is-ready .serve-check-box {
    border-color: #227a45;
}

.serve-check.is-ready .serve-check-text small {
    color: #227a45;
}

.serve-check-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.serve-check-text strong {
    overflow-wrap: anywhere;
    font-size: 15px;
}

.serve-check-text small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.inline-status {
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.kitchen-content {
    background: color-mix(in srgb, var(--brand-bg) 70%, #fff);
}

.kitchen-page .admin-sidebar .brand-lockup {
    gap: 9px;
}

.kitchen-page .admin-sidebar .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.kitchen-page .admin-sidebar .brand-lockup strong {
    font-size: 13px;
}

.kitchen-page .admin-sidebar .brand-lockup small {
    font-size: 11px;
}

.kitchen-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.kitchen-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.kitchen-sound-button.is-enabled {
    border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--line));
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
    color: var(--brand-primary);
}

.kitchen-card {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--brand-primary);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: 0 18px 50px rgba(31, 61, 43, 0.08);
}

.kitchen-card.is-alerting {
    box-shadow: 0 0 0 3px rgba(243, 111, 69, 0.14), 0 18px 50px rgba(216, 73, 54, 0.16);
    animation: waiter-alert-pulse 1.4s ease-in-out infinite;
}

.kitchen-card.status-new {
    border-left-color: #d84f36;
}

.kitchen-card.status-accepted {
    border-left-color: #b97819;
}

.kitchen-card.status-cooking {
    border-left-color: var(--brand-accent);
}

.kitchen-card.status-ready {
    border-left-color: #227a45;
}

.kitchen-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.kitchen-card header span,
.kitchen-card header small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.kitchen-card h2 {
    margin: 4px 0;
    font-size: 30px;
    line-height: 1;
}

.kitchen-card header > strong {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 10%, #fff);
    color: var(--brand-primary);
    font-size: 12px;
    text-transform: uppercase;
}

.kitchen-items {
    display: grid;
    gap: 8px;
}

.kitchen-item {
    display: grid;
    gap: 4px;
    padding: 11px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 44%, #fff);
}

.kitchen-item span {
    font-size: 16px;
    font-weight: 850;
}

.kitchen-item small {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.kitchen-item.status-cooking {
    border-color: rgba(243, 111, 69, 0.3);
    background: color-mix(in srgb, var(--brand-accent) 8%, var(--brand-surface));
}

.kitchen-item.status-ready {
    border-color: rgba(34, 122, 69, 0.42);
    background: color-mix(in srgb, #ebf7ee 82%, var(--brand-surface));
}

.kitchen-item-status {
    text-transform: uppercase;
}

.kitchen-item.status-ready .kitchen-item-status {
    color: #227a45;
}

.kitchen-item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 7px;
}

.kitchen-item-actions button {
    min-height: 46px;
    padding-right: 10px;
    padding-left: 10px;
}

.kitchen-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.kitchen-actions button {
    min-height: 50px;
    padding-right: 10px;
    padding-left: 10px;
}

.kitchen-stoplist-panel {
    margin-top: 24px;
}

.kitchen-menu-category-list {
    display: grid;
    gap: 12px;
}

.kitchen-menu-category {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-bg) 34%, var(--brand-surface));
    box-shadow: 0 8px 20px rgba(32, 36, 31, 0.05);
}

.kitchen-menu-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 7px 10px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-primary) 8%, #fff);
}

.kitchen-menu-category-head span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.kitchen-menu-category-head h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.15;
}

.kitchen-menu-category-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.kitchen-menu-category-stats span {
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--ink);
    font-size: 11px;
    text-transform: none;
}

.kitchen-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.kitchen-menu-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto auto;
    gap: 9px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    background: var(--brand-surface);
}

.kitchen-menu-item.is-stopped {
    border-color: rgba(216, 73, 54, 0.34);
    background: color-mix(in srgb, #fff0ed 70%, var(--brand-surface));
}

.kitchen-menu-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.kitchen-menu-copy small,
.kitchen-menu-copy span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.kitchen-menu-copy strong {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.2;
}

.kitchen-menu-item button {
    min-height: 44px;
    white-space: nowrap;
}

.subscription-status-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.subscription-status-panel h2,
.billing-card h2,
.superadmin-restaurant-card h2 {
    margin: 6px 0 0;
    font-size: 24px;
    line-height: 1.1;
}

.subscription-status-panel p,
.billing-card p,
.superadmin-restaurant-card p {
    margin: 8px 0 0;
    color: var(--muted);
}

.subscription-status-meta {
    display: grid;
    justify-items: end;
    gap: 4px;
}

.subscription-status-meta span,
.billing-card-head span,
.superadmin-restaurant-card header span:first-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.subscription-status-meta strong {
    font-size: 22px;
}

.billing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.billing-card {
    display: grid;
    gap: 16px;
    align-content: start;
}

.billing-card.is-current {
    border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--soft-line));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 10%, transparent), 0 12px 36px rgba(35, 38, 34, 0.08);
}

.billing-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.billing-card-head > strong {
    white-space: nowrap;
    color: var(--brand-primary);
    font-size: 24px;
}

.billing-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-limits span,
.billing-features li {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.billing-features {
    display: flex;
    min-height: 80px;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.billing-history {
    margin-top: 18px;
}

.billing-payment-list,
.superadmin-restaurant-list {
    display: grid;
    gap: 12px;
}

.billing-payment-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 0.9fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
}

.billing-payment-row strong,
.billing-payment-row span {
    display: block;
}

.billing-payment-row span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.superadmin-restaurant-form {
    margin-bottom: 18px;
}

.superadmin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.superadmin-form-wide {
    grid-column: 1 / -1;
}

.superadmin-restaurant-card {
    display: grid;
    gap: 16px;
}

.superadmin-restaurant-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.superadmin-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.superadmin-metrics span {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--soft-line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.superadmin-metrics strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 16px;
}

.superadmin-extend-form {
    display: grid;
    grid-template-columns: minmax(150px, 0.7fr) minmax(120px, 0.45fr) minmax(120px, 0.45fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

@keyframes waiter-alert-pulse {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@media (max-width: 1040px) {
    .landing-nav {
        grid-template-columns: 1fr auto;
    }

    .landing-nav-links {
        display: none;
    }

    .landing-hero-content {
        grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr);
        gap: 28px;
        padding: 46px 0 28px;
    }

    .landing-product-preview {
        min-height: 430px;
    }

    .landing-phone {
        left: 2%;
        top: 34px;
        width: 235px;
    }

    .landing-kitchen-card {
        right: 0;
        width: 260px;
        padding: 14px;
    }

    .landing-floor-card {
        right: 3%;
        bottom: 0;
        width: 260px;
        padding: 14px;
    }

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

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

    .landing-integrations,
    .landing-custom {
        grid-template-columns: 1fr;
    }

    .landing-logo-cloud {
        justify-content: flex-start;
    }

    .landing-brand-logo {
        width: 72px;
    }

    .landing-service-logo {
        width: min(240px, 70vw);
    }

    .menu-grid,
    .order-board,
    .integration-grid,
    .kitchen-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metric-grid,
    .billing-grid,
    .superadmin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-grid,
    .design-grid,
    .settings-grid,
    .waiter-grid,
    .superadmin-form-grid,
    .superadmin-extend-form {
        grid-template-columns: 1fr;
    }

    .integration-actions {
        grid-template-columns: 1fr;
    }

    .staff-access-form,
    .staff-access-form.is-new,
    .waiter-access-form,
    .waiter-access-form.is-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-import-form {
        grid-template-columns: 1fr;
    }

    .menu-import-wide,
    .menu-import-help {
        grid-column: auto;
        grid-row: auto;
    }

    .menu-import-submit {
        justify-self: stretch;
    }

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

    .menu-row-summary {
        grid-template-columns: 34px 72px minmax(0, 1fr);
    }

    .menu-row-summary img {
        width: 72px;
        height: 58px;
    }

    .menu-row-summary > strong {
        grid-column: 2;
        justify-self: start;
    }

    .menu-row-summary > .switch {
        grid-column: 3;
        justify-self: start;
    }

    .menu-row-summary > .menu-edit-button {
        grid-column: 1 / -1;
        width: 100%;
    }

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

    .hall-heading,
    .add-table-form {
        grid-template-columns: 1fr;
    }

    .floor-panel .panel-title {
        align-items: stretch;
        flex-direction: column;
    }

    .hall-create-form {
        grid-template-columns: 1fr;
        min-width: 0;
    }

}

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

    .admin-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .admin-content {
        padding: 20px 14px 30px;
    }

    .section-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .landing-hero {
        min-height: auto;
        padding: 18px 18px 24px;
    }

    .landing-nav {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .landing-nav-cta {
        width: 100%;
    }

    .landing-hero-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 32px 0 12px;
    }

    .landing-hero h1 {
        font-size: 38px;
        line-height: 1;
    }

    .landing-hero p {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.42;
    }

    .landing-actions {
        margin-top: 20px;
    }

    .landing-actions > * {
        width: 100%;
    }

    .landing-product-preview {
        min-height: 235px;
    }

    .landing-phone {
        position: absolute;
        top: 0;
        left: 50%;
        width: min(270px, 90vw);
        max-width: 330px;
        transform: translateX(-50%) rotate(-4deg) scale(0.72);
        transform-origin: top center;
    }

    .landing-live-card {
        display: none;
    }

    .landing-proof-row {
        display: none;
    }

    .landing-section {
        padding: 54px 18px;
    }

    .landing-feature-strip,
    .landing-steps,
    .landing-value-grid,
    .landing-custom-preview {
        grid-template-columns: 1fr;
    }

    .landing-logo-cloud span {
        flex: 1 1 130px;
    }

    .legal-shell {
        width: calc(100vw - 32px);
        padding-top: 14px;
    }

    .legal-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal-grid,
    .legal-document-layout {
        grid-template-columns: 1fr;
    }

    .legal-document-nav {
        position: static;
    }

    .legal-hero h1,
    .legal-document h1 {
        font-size: 36px;
    }

    .legal-document-footer > * {
        width: 100%;
    }

    .landing-palette {
        justify-content: flex-start;
    }

    .guest-shell {
        width: calc(100vw - 40px);
        max-width: none;
        margin-right: 20px;
        margin-left: 20px;
        padding-top: 10px;
    }

    .guest-topbar {
        flex-wrap: wrap;
    }

    .admin-mini-link {
        display: none;
    }

    .guest-hero {
        padding: 14px;
    }

    .guest-intro {
        grid-template-columns: 1fr;
        padding: 28px 0 20px;
    }

    .guest-action-panel {
        justify-items: stretch;
    }

    .guest-intro p,
    .visit-chip {
        width: 100%;
    }

    .quick-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .tip-waiter-options {
        grid-template-columns: 1fr;
    }

    .guest-intro h1 {
        font-size: 42px;
    }

    .visit-chip {
        min-width: 0;
    }

    .menu-grid,
    .order-board,
    .integration-grid,
    .waiter-order-grid,
    .kitchen-menu-grid,
    .kitchen-board {
        grid-template-columns: 1fr;
    }

    .menu-layout-book {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .menu-layout-book::before,
    .menu-layout-book::after {
        display: none;
    }

    .dish-body p {
        min-height: 0;
    }

    .cart-drawer {
        top: auto;
        bottom: 0;
        height: min(88dvh, 760px);
        border-top: 1px solid var(--line);
        border-left: 0;
        transform: translateY(104%);
    }

    .cart-drawer.is-open {
        transform: translateY(0);
    }

    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .admin-content {
        padding: 18px 12px 28px;
    }

    .waiter-topbar {
        position: static;
        align-items: stretch;
        flex-direction: column;
        padding: 16px;
    }

    .waiter-session-card {
        align-items: stretch;
        flex-direction: column;
    }

    .waiter-alert-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .kitchen-header-actions {
        justify-content: stretch;
    }

    .kitchen-header-actions > * {
        flex: 1 1 auto;
    }

    .section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-status-panel,
    .superadmin-restaurant-card header {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-status-meta {
        justify-items: start;
    }

    .section-actions {
        justify-content: stretch;
    }

    .section-actions > * {
        flex: 1 1 auto;
    }

    .panel-title {
        align-items: stretch;
        flex-direction: column;
    }

    .hall-create-form {
        grid-template-columns: 1fr;
    }

    .menu-category-form,
    .menu-category-row,
    .menu-item-form,
    .menu-row-summary,
    .settings-inline-grid,
    .staff-access-form,
    .staff-access-form.is-new,
    .waiter-access-form,
    .waiter-access-form.is-new {
        grid-template-columns: 1fr;
    }

    .settings-toggle-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .menu-form-wide {
        grid-column: auto;
    }

    .menu-row-summary {
        align-items: start;
    }

    .menu-row-summary .drag-handle,
    .menu-row-summary img {
        justify-self: start;
    }

    .menu-edit-button {
        width: 100%;
    }

    .metric-grid,
    .billing-grid,
    .superadmin-metrics,
    .billing-payment-row,
    .superadmin-form-grid,
    .superadmin-extend-form,
    .preset-grid {
        grid-template-columns: 1fr;
    }

    .menu-row {
        grid-template-columns: 34px 68px minmax(0, 1fr);
    }

    .menu-row > strong,
    .menu-row > .switch {
        justify-self: start;
    }

    .order-status-row {
        grid-template-columns: 1fr;
    }

    .visit-admin-actions {
        grid-template-columns: 1fr;
    }

    .waiter-task {
        align-items: stretch;
        flex-direction: column;
    }

    .waiter-table-summary,
    .visit-row,
    .waiter-order-card header,
    .waiter-order-actions,
    .waiter-visit-order-head,
    .waiter-visit-item,
    .kitchen-menu-category-head,
    .kitchen-menu-item,
    .kitchen-card header {
        align-items: stretch;
        flex-direction: column;
    }

    .kitchen-menu-category-stats {
        justify-content: flex-start;
    }

    .kitchen-menu-item {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .kitchen-menu-item .status-pill,
    .kitchen-menu-item button {
        grid-column: 1 / -1;
    }

    .kitchen-actions {
        grid-template-columns: 1fr;
    }

    .waiter-order-actions {
        justify-items: stretch;
    }

    .visit-row select {
        width: 100%;
        flex: auto;
    }

    .waiter-table-actions {
        justify-content: stretch;
    }

    .waiter-table-actions > * {
        flex: 1 1 auto;
    }

    .table-order-head,
    .table-order-card header,
    .table-order-item {
        align-items: stretch;
        flex-direction: column;
    }

    .table-order-summary {
        justify-items: start;
    }
}

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