/* This platform is made by Cblu Digital. */
:root {
    --ink: #202431;
    --muted: #697080;
    --muted-strong: #596173;
    --soft: #f4f5f9;
    --panel: #ffffff;
    --line: #e7e9ef;
    --brand: #18a86f;
    --brand-dark: #0b7b50;
    --accent: #f04f66;
    --orange: #ff5a1f;
    --shadow: 0 16px 42px rgba(22, 26, 36, 0.14);
    --font-ui: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-title: 22px;
    --text-display: clamp(30px, 7vw, 38px);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--soft);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    line-height: 1.45;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.landing-body {
    background:
        radial-gradient(circle at 16% 0%, rgba(24, 168, 111, .08), transparent 28%),
        radial-gradient(circle at 84% 12%, rgba(255, 90, 31, .10), transparent 26%),
        radial-gradient(circle at 52% 72%, rgba(37, 99, 235, .08), transparent 30%),
        #fafafa;
}

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

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

button {
    cursor: pointer;
}

.shell {
    min-height: 100vh;
    padding-bottom: 0;
}

.menu-app .shell {
    padding-bottom: 0;
}

body.menu-app:has(.order-panel.has-items) .menu-stack {
    padding-bottom: 128px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    border-bottom: 1px solid rgba(231, 233, 239, 0.78);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.wide-app .topbar,
.auth-app .topbar {
    position: static;
}

.menu-app .topbar {
    position: sticky;
}

.brand-lockup {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.brand-name,
.brand-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-name {
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1.15;
}

.brand-subtitle {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-button,
.button,
.round-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(22, 26, 36, 0.06);
}

.icon-button {
    width: 42px;
    padding: 0;
}

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

.back-button {
    font-size: 30px;
    line-height: 1;
}

.header-logo-mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 122, 51, .22);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255, 122, 51, .96), rgba(255, 90, 31, .96)),
        center/cover no-repeat;
    background-size: cover;
    color: #fff;
    font-size: var(--text-md);
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(255, 90, 31, .18);
}

.button {
    padding: 0 14px;
}

.button.primary {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 12px 24px rgba(24, 168, 111, 0.24);
}

.button.danger {
    border-color: rgba(190, 18, 60, .18);
    background: #fff5f7;
    color: #be123c;
}

.restaurant-screen {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
}

.restaurant-hero {
    padding: 18px 16px 0;
    background:
        linear-gradient(180deg, var(--hero-overlay, rgba(0, 0, 0, 0.86)), rgba(24, 5, 3, 0.92) 66%, #fff 66%),
        var(--hero-image) center top/cover;
}

.restaurant-card {
    margin-top: 0;
    padding: 18px;
    border-radius: 26px;
    background: var(--hero-card-bg, #fff);
    box-shadow: 0 18px 46px rgba(10, 14, 24, 0.16);
}

.restaurant-awards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #52649b;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
}

.restaurant-awards span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #f2f5ff;
}

.restaurant-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}

.restaurant-title-block {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.restaurant-logo-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(231, 233, 239, 0.9);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.92)),
        var(--hero-accent, #ff6b2d);
    background-position: center;
    background-size: cover;
    color: var(--hero-accent, #ff6b2d);
    font-size: var(--text-title);
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(22, 26, 36, 0.08);
}

.restaurant-card h1 {
    margin: 0;
    font-size: var(--text-display);
    line-height: 1.06;
    letter-spacing: 0;
    font-weight: 800;
}

.restaurant-card p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.45;
}

.rating-badge {
    display: grid;
    justify-items: center;
    gap: 2px;
}

.rating-badge strong {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--hero-rating-bg, #118252);
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 800;
}

.rating-badge span {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.restaurant-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.25;
}

.restaurant-meta-line span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #f7f8fb;
}

.hero-offer-strip {
    margin-top: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #ffe1d4;
    border-radius: 18px;
    background: linear-gradient(90deg, #fff8f3, #fffdfb);
    scrollbar-width: none;
}

.hero-offer-strip::-webkit-scrollbar {
    display: none;
}

.hero-offer-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(188px, 1fr);
    gap: 12px;
    min-width: 100%;
    padding: 12px;
}

.hero-offer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    min-height: 72px;
    align-items: center;
    padding: 10px;
    border: 1px solid #ffe1d4;
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
}

.offer-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: var(--hero-accent, #ff7a33);
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 800;
}

.hero-offer strong,
.hero-offer small {
    display: block;
}

.hero-offer small {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
    line-height: 1.25;
}

.hero-offer strong {
    font-size: var(--text-md);
    line-height: 1.18;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .restaurant-banner-track.is-scrolling {
        width: 100%;
        overflow-x: auto;
        animation: none;
    }
}

.free-delivery-strip {
    margin: 12px -14px 0;
    padding: 16px 20px;
    border-radius: 0 0 28px 28px;
    background: var(--hero-strip-bg, #210604);
    color: #fff;
    font-size: var(--text-md);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.restaurant-banner-strip {
    overflow: hidden;
    padding: 14px 0 2px;
    background: #fff;
}

.restaurant-banner-track {
    display: flex;
    gap: 12px;
    width: max-content;
    padding: 0 14px;
}

.restaurant-banner-track.is-scrolling {
    animation: restaurant-banner-scroll 32s linear infinite;
}

.restaurant-banner-strip:hover .restaurant-banner-track {
    animation-play-state: paused;
}

.restaurant-banner-card {
    position: relative;
    display: grid;
    flex: 0 0 min(430px, calc(100vw - 56px));
    min-height: 150px;
    align-items: end;
    overflow: hidden;
    border-radius: 20px;
    background: #10141f;
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
}

.restaurant-banner-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
}

.restaurant-banner-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(8, 12, 24, .74));
}

.restaurant-banner-card span {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    padding: 16px;
}

.restaurant-install-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 14px;
    padding: 14px;
    border: 1px solid rgba(24, 168, 111, .18);
    border-radius: 18px;
    background: linear-gradient(135deg, #f3fff9, #fff);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .08);
}

.restaurant-install-card[hidden] {
    display: none;
}

.install-mark {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: var(--hero-accent, #18a86f);
    background-position: center;
    background-size: cover;
    color: #fff;
    font-size: var(--text-xl);
    font-weight: 900;
}

.restaurant-install-card strong,
.restaurant-install-card span {
    display: block;
}

.restaurant-install-card strong {
    color: var(--ink);
    font-size: var(--text-md);
    line-height: 1.2;
}

.restaurant-install-card span {
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.35;
}

.install-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.install-actions .button {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    white-space: nowrap;
}

.restaurant-banner-card strong {
    font-size: var(--text-title);
    line-height: 1.12;
    font-weight: 900;
}

.restaurant-banner-card small {
    color: rgba(255, 255, 255, .86);
    font-size: var(--text-sm);
    line-height: 1.3;
    font-weight: 700;
}

@keyframes restaurant-banner-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 6px));
    }
}

.category-hero {
    display: grid;
    gap: 14px;
    padding: 24px 18px 18px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(8, 12, 18, 0.42), rgba(8, 12, 18, 0.86)),
        var(--hero-image) center/cover;
}

.category-hero p,
.category-hero h1 {
    margin: 0;
}

.category-hero p,
.category-hero span {
    font-size: var(--text-md);
    font-weight: 650;
    line-height: 1.35;
    opacity: 0.9;
}

.category-hero h1 {
    margin-top: 6px;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.05;
    font-weight: 800;
}

.category-back-link {
    width: fit-content;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
}

.filter-bar {
    position: sticky;
    top: 63px;
    z-index: 30;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.search-pill {
    display: block;
    position: relative;
}

.search-pill span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.search-pill input {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: #edf0f1;
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 600;
    text-align: center;
    padding: 0 18px;
}

.filter-chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.chip {
    display: inline-flex;
    min-height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #333844;
    font-size: var(--text-md);
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(22, 26, 36, 0.06);
}

.chip.active {
    border-color: rgba(24, 168, 111, 0.42);
    background: rgba(24, 168, 111, 0.08);
    color: var(--brand-dark);
}

.menu-section {
    margin: 14px;
    border-radius: 22px;
    background: #fff;
}

.section-label {
    color: #8b909b;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.menu-stack {
    display: grid;
    gap: 2px;
    padding-bottom: 24px;
}

.menu-section {
    scroll-margin-top: 150px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

.section-head {
    padding: 18px 8px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.category-toggle {
    display: grid;
    width: 100%;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    touch-action: manipulation;
}

.category-toggle span:first-child,
.section-head h2 {
    margin: 0;
    font-size: var(--text-title);
    font-weight: 800;
    line-height: 1.18;
}

.category-count,
.section-head > span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.category-chevron {
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--muted);
    border-bottom: 3px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.menu-section.is-expanded .category-chevron {
    transform: rotate(225deg);
}

.item-list {
    display: grid;
}

.menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 164px;
    gap: 18px;
    min-height: 196px;
    padding: 18px 8px 20px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.item-body {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding-top: 2px;
}

.food-mark {
    width: 17px;
    height: 17px;
    border: 2px solid #c66c50;
    border-radius: 4px;
    background: #fff;
}

.food-mark::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 3.5px auto 0;
    border-radius: 999px;
    background: #c66c50;
}

.item-title {
    margin: 0;
    font-size: var(--text-title);
    line-height: 1.14;
    font-weight: 800;
}

.item-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.price {
    color: #232936;
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.15;
}

.item-rating {
    margin: 0;
    width: fit-content;
    padding: 3px 7px;
    border-radius: 999px;
    background: #d9f8ea;
    color: #108452;
    font-size: var(--text-sm);
    font-weight: 750;
    line-height: 1.15;
}

.item-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 1px 0 0;
    color: var(--muted);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1.42;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-media {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0;
    padding-top: 2px;
}

.item-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(24, 168, 111, 0.18), rgba(255, 90, 31, 0.22)),
        #f3f4f7;
    box-shadow: 0 10px 26px rgba(22, 26, 36, 0.12);
}

.item-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}

.add-control {
    display: inline-flex;
    min-width: 112px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: -22px;
    border: 1px solid #f0bfca;
    border-radius: 14px;
    background: #fff;
    color: var(--accent);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 22px rgba(22, 26, 36, 0.13);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.add-control span:first-child {
    min-width: 0;
}

.add-control:active {
    transform: translateY(1px) scale(.99);
    box-shadow: 0 7px 14px rgba(22, 26, 36, 0.12);
}

.item-media small {
    margin-top: 7px;
    color: #a2a6af;
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.1;
}

.menu-fab {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 45;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 0;
    border-radius: 16px;
    background: #080c18;
    color: #fff;
    box-shadow: 0 16px 30px rgba(8, 12, 24, 0.28);
    transform: translateX(-50%);
}

.menu-fab svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body:has(.order-panel.has-items) .menu-fab {
    display: none;
}

.category-menu-backdrop,
.info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(8, 12, 18, 0.62);
}

.category-menu-sheet {
    position: fixed;
    right: max(18px, calc((100vw - 720px) / 2 + 18px));
    bottom: 90px;
    z-index: 80;
    width: min(440px, calc(100vw - 36px));
    padding: 24px;
    border-radius: 26px;
    background: #080c18;
    color: #fff;
    box-shadow: var(--shadow);
}

.menu-sheet-close {
    position: absolute;
    right: 14px;
    bottom: -74px;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: #202533;
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 700;
}

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

.category-menu-list button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 50px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

body.has-category-menu,
body.has-info-drawer {
    overflow: hidden;
}

.info-drawer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    max-height: 86vh;
    overflow: auto;
    padding: 18px;
    border-radius: 24px 24px 0 0;
    background: var(--soft);
    box-shadow: 0 -18px 52px rgba(22, 26, 36, 0.18);
}

.info-drawer-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.info-drawer-head h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.12;
    font-weight: 800;
}

.info-panel {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
}

.restaurant-info-grid {
    display: grid;
    gap: 14px;
}

.section-head.compact {
    position: static;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
}

.section-head.compact h2 {
    font-size: var(--text-lg);
    font-weight: 800;
}

.info-list,
.document-grid,
.promo-list {
    display: grid;
    gap: 10px;
}

.info-list div,
.promo-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.info-list span,
.promo-row small {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.info-list strong {
    text-align: right;
    font-size: var(--text-md);
    font-weight: 750;
    line-height: 1.3;
}

.info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.map-preview {
    position: relative;
    display: grid;
    min-height: 190px;
    overflow: hidden;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #eef1f6;
    box-shadow: 0 8px 20px rgba(22, 26, 36, .06);
}

.map-preview iframe {
    width: 100%;
    height: 190px;
    border: 0;
    pointer-events: none;
}

.map-preview span {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    box-shadow: 0 8px 20px rgba(22, 26, 36, .12);
}

.map-preview strong {
    font-size: var(--text-md);
    font-weight: 800;
}

.map-preview small {
    overflow: hidden;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.document-card {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(22, 26, 36, .06);
}

.document-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eef1f6;
    border-bottom: 1px solid var(--line);
}

.document-thumb img,
.document-thumb embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.document-copy {
    display: grid;
    gap: 3px;
    padding: 12px;
}

.document-copy strong {
    font-size: var(--text-md);
    line-height: 1.2;
    font-weight: 750;
}

.document-copy small {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 750;
    text-transform: uppercase;
}

.order-panel {
    position: fixed;
    right: max(0px, calc((100vw - 720px) / 2));
    bottom: 0;
    left: max(0px, calc((100vw - 720px) / 2));
    z-index: 60;
    max-height: min(84vh, 720px);
    overflow: auto;
    padding: 14px 16px max(16px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -18px 52px rgba(22, 26, 36, 0.2);
    transform: translateY(calc(100% - 92px));
    transition: transform 180ms ease;
    scrollbar-width: none;
}

.order-panel::-webkit-scrollbar {
    display: none;
}

.order-panel.is-open {
    transform: translateY(0);
}

.order-panel:not(.has-items) {
    pointer-events: none;
    transform: translateY(100%);
}

.order-panel-head {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
}

.order-panel h2 {
    margin: 0;
    font-size: var(--text-title);
    line-height: 1.15;
    font-weight: 800;
}

.cart-count {
    display: block;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.2;
}

.cart-head-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.cart-icon-action,
.cart-clear-action {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
}

.cart-icon-action {
    width: 40px;
    padding: 0;
}

.cart-icon-action svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cart-clear-action {
    padding: 0 12px;
    color: #b83252;
    font-size: var(--text-sm);
    font-weight: 700;
}

.order-panel.has-items:not(.is-open) .order-panel-head {
    margin: -2px 0 4px;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--brand);
    box-shadow: 0 12px 28px rgba(24, 168, 111, 0.28);
    cursor: pointer;
}

.order-panel.has-items:not(.is-open) h2,
.order-panel.has-items:not(.is-open) [data-cart-clear] {
    display: none;
}

.order-panel.has-items:not(.is-open) .cart-count {
    color: #fff;
    font-size: var(--text-xl);
    font-weight: 800;
}

.order-panel.has-items:not(.is-open) .cart-icon-action {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.order-panel.is-checkout .cart-count {
    display: none;
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 700;
}

.empty-cart {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: 1.4;
}

.cart-lines,
.checkout-fields {
    display: grid;
    gap: 12px;
    margin: 14px 0;
}

.checkout-screen {
    display: grid;
    gap: 14px;
}

.cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.cart-line strong,
.cart-line span {
    display: block;
}

.cart-line span {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.25;
}

.cart-line strong {
    font-size: var(--text-md);
    line-height: 1.25;
    font-weight: 750;
}

.quantity-control {
    display: grid;
    grid-template-columns: 38px 34px 38px;
    align-items: center;
    min-height: 40px;
    border: 1px solid #e9b9c3;
    border-radius: 12px;
    overflow: hidden;
    color: var(--accent);
    text-align: center;
}

.quantity-control button {
    height: 40px;
    border: 0;
    background: #fff8fa;
    color: var(--accent);
    font-weight: 800;
}

.customise-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(8, 12, 18, .58);
}

.customise-sheet {
    position: fixed;
    right: max(16px, calc((100vw - 720px) / 2 + 16px));
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(16px, calc((100vw - 720px) / 2 + 16px));
    z-index: 91;
    display: grid;
    max-height: min(82vh, 720px);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(8, 12, 18, .34);
}

.customise-head,
.customise-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.customise-footer {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.customise-head h2 {
    margin: 0;
    font-size: var(--text-xl);
    line-height: 1.15;
}

.customise-head span,
.customise-group-head span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

[data-customise-content] {
    overflow: auto;
}

.customise-body {
    display: grid;
    gap: 12px;
    padding: 14px 16px 18px;
}

.customise-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fafbfc;
}

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

.customise-group-head strong {
    font-size: var(--text-md);
}

.customise-group textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    padding: 11px 12px;
    resize: vertical;
}

.customise-sheet .cart-warning {
    margin: 0 16px;
}

.customise-quantity {
    flex: 0 0 auto;
}

.customise-footer .button {
    flex: 1 1 auto;
    border-radius: 14px;
}

.checkout-fields label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.checkout-fields input,
.checkout-fields select,
.checkout-fields textarea,
.otp-row input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 500;
    padding: 10px 12px;
}

.checkout-phone-control {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
}

.checkout-fields textarea {
    resize: vertical;
}

.otp-code-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}

.otp-code-boxes .otp-digit {
    min-width: 0;
    min-height: 48px;
    padding: 0;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 850;
}

.otp-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(24, 168, 111, 0.22);
    border-radius: 16px;
    background: rgba(24, 168, 111, 0.07);
}

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

.otp-panel span {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.otp-panel .otp-timer {
    margin-top: 6px;
    color: var(--brand-dark);
    font-weight: 800;
}

.otp-row {
    display: grid;
    gap: 8px;
}

.otp-row .button {
    min-height: 44px;
}

.order-row,
.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.order-total {
    color: var(--ink);
    font-size: var(--text-title);
    font-weight: 800;
}

.cart-warning {
    margin: 10px 0;
    color: #b83232;
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.35;
}

.cart-warning.is-success {
    color: var(--brand-dark);
}

.hero {
    padding: 28px 16px;
    background: #fff;
}

@media (max-width: 900px) {
    .auth-screen {
        grid-template-columns: 1fr;
        width: min(560px, calc(100% - 32px));
        min-height: 0;
        padding: 24px 0;
    }

    .auth-intro {
        min-height: 260px;
        padding: 28px;
        border-right: 1px solid rgba(17, 24, 39, .08);
        border-radius: 22px 22px 0 0;
    }

    .auth-card {
        min-height: 0;
        padding: 28px;
        border-radius: 0 0 22px 22px;
    }

    .auth-form {
        width: 100%;
    }
}

.hero h1,
.item-detail-copy h1 {
    margin: 0;
    font-size: clamp(34px, 7vw, 48px);
    line-height: 1;
}

.hero p,
.item-detail-copy p {
    color: var(--muted);
}

.hero-media,
.item-detail-photo {
    min-height: 260px;
    margin-top: 18px;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(24, 168, 111, 0.18), rgba(255, 90, 31, 0.22)),
        var(--hero-image, none) center/cover;
}

.item-detail-photo {
    min-height: 360px;
    margin-top: 0;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 -70px 90px rgba(8, 12, 24, .18);
}

.restaurant-strip,
.content-grid,
.item-detail-grid {
    width: min(1280px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 16px;
    background: #fff;
}

.menu-app .restaurant-strip,
.menu-app .content-grid,
.menu-app .item-detail-grid {
    width: auto;
    max-width: 720px;
}

body.menu-app:has(.order-panel.has-items) .item-detail-grid {
    padding-bottom: 128px;
}

.item-detail,
.item-detail-copy,
.item-detail-actions,
.item-detail-meta,
.option-list {
    display: grid;
    gap: 14px;
}

.item-detail-copy {
    padding: 8px 2px 0;
}

.item-detail-actions {
    gap: 10px;
}

.item-detail-actions .button {
    min-height: 54px;
    border-radius: 14px;
}

.item-detail {
    overflow: hidden;
    padding-bottom: 10px;
}

.item-detail-visual {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(17, 24, 39, .06);
    border-radius: 24px;
    background: linear-gradient(180deg, #f8faf9, #fff);
}

.item-detail-heading {
    display: grid;
    gap: 10px;
}

.option-list {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(circle at 92% 10%, rgba(24, 168, 111, .10), transparent 30%),
        #fff;
}

.option-list h2 {
    margin: 0;
    font-size: var(--text-title);
    line-height: 1.15;
}

.option-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.option-row.stacked {
    display: grid;
}

.option-row small {
    color: var(--brand-dark);
    font-size: var(--text-xs);
    font-weight: 850;
    text-transform: uppercase;
}

.option-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 750;
}

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

.item-gallery {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.item-gallery img {
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    border: 2px solid #fff;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.breadcrumb,
.item-detail-meta {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 4px 2px;
}

.breadcrumb a {
    color: var(--muted);
}

.item-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.item-detail-meta span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--muted);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.item-detail-meta .detail-price {
    border-color: rgba(24, 168, 111, .18);
    background: #f3fbf7;
    color: var(--brand-dark);
    font-size: var(--text-lg);
    font-weight: 900;
}

.item-detail-meta .is-live {
    color: var(--brand-dark);
}

.item-detail-meta .is-off {
    color: #b83252;
}

.item-customisation-summary {
    grid-template-columns: minmax(0, 1fr);
}

.customisation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.customisation-summary-grid span {
    display: grid;
    gap: 2px;
    min-height: 68px;
    align-content: center;
    padding: 10px;
    border: 1px solid rgba(24, 168, 111, .14);
    border-radius: 15px;
    background: #f8faf9;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 850;
    text-transform: uppercase;
}

.customisation-summary-grid strong {
    display: block;
    color: var(--ink);
    font-size: var(--text-title);
    line-height: 1;
}

.status-card {
    display: grid;
    gap: 18px;
    width: min(1120px, calc(100% - 32px));
    max-width: none;
    margin: 24px auto;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow);
}

.tracking-card {
    width: min(860px, calc(100% - 32px));
    padding-bottom: 28px;
}

.tracking-hero {
    display: grid;
    gap: 12px;
    padding: 4px 2px 2px;
}

.tracking-hero-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.tracking-hero h1 {
    margin: 0;
    font-size: clamp(30px, 6vw, 48px);
    line-height: 1;
}

.tracking-hero p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: 1.45;
    font-weight: 600;
}

.tracking-date {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.tracking-link-box {
    display: grid;
    gap: 7px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid rgba(24, 168, 111, .18);
    border-radius: 15px;
    background: #f3fbf7;
}

.tracking-link-box span {
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 850;
}

.tracking-link-box input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 8px 10px;
}

.tracking-progress,
.tracking-summary {
    display: grid;
    gap: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.tracking-summary h2 {
    margin: 0 0 8px;
    font-size: var(--text-title);
}

.tracking-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    min-height: 64px;
    padding-bottom: 14px;
    color: var(--muted);
}

.tracking-step::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #dfe5ee;
}

.tracking-step:last-child {
    min-height: 28px;
    padding-bottom: 0;
}

.tracking-step:last-child::before {
    display: none;
}

.tracking-step > span {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 2px solid #dfe5ee;
    border-radius: 999px;
    background: #fff;
}

.tracking-step.done > span,
.tracking-step.current > span {
    border-color: var(--brand);
    background: var(--brand);
}

.tracking-step.done > span::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tracking-step.current > span::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 999px;
    background: #fff;
}

.tracking-step strong {
    display: block;
    padding-top: 2px;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 850;
}

.tracking-step small {
    display: block;
    max-width: 100%;
    margin-top: 5px;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    font-weight: 650;
}

.status-pill {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(24, 168, 111, 0.12);
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 750;
}

.status-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px 16px 24px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.menu-app .footer {
    display: none;
}

.footer a {
    color: var(--ink);
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px max(20px, calc((100vw - 1120px) / 2));
    border-bottom: 1px solid rgba(20, 24, 32, .08);
    background: rgba(250, 250, 250, .86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    min-width: 168px;
}

.landing-brand img {
    width: min(188px, 44vw);
    height: auto;
    display: block;
}

.landing-nav nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.landing-nav nav a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    color: #303642;
    font-size: var(--text-sm);
    font-weight: 750;
}

.landing-nav nav a:hover {
    background: #eef1f0;
}

.landing-nav nav a.landing-nav-primary {
    padding: 0 18px;
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 10px 22px rgba(24, 168, 111, .22);
}

.landing-actions .button,
.landing-cta .button,
.signup-card .button {
    border-radius: 10px;
}

.landing-nav nav a.landing-nav-primary:hover {
    background: var(--brand-dark);
}

.landing-hero,
.landing-section,
.landing-footer {
    max-width: 1120px;
    margin: 0 auto;
}

.landing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
    gap: 56px;
    align-items: center;
    min-height: 650px;
    padding: 82px 20px 46px;
}

.landing-hero::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: max(20px, calc((100vw - 1120px) / 2 + 240px));
    top: 120px;
    z-index: -1;
    border-radius: 999px;
    background: rgba(255, 201, 92, .34);
    filter: blur(26px);
}

.landing-hero-copy {
    display: grid;
    gap: 20px;
}

.eyebrow {
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #10141f;
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 900;
    line-height: .95;
}

.landing-hero p,
.landing-section p {
    margin: 0;
    color: #596170;
    font-size: 17px;
    font-weight: 550;
    line-height: 1.55;
}

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

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 640px;
}

.landing-proof-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 11px;
    border: 1px solid rgba(24, 168, 111, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
    color: #263043;
    font-size: var(--text-sm);
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.landing-proof-strip b,
.landing-checks b {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.landing-showcase {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 30px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .10);
}

.showcase-photo {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 22px;
    background: #eef1f0;
}

.showcase-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
}

.showcase-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 38%, rgba(16, 20, 31, .58)),
        linear-gradient(90deg, rgba(24, 168, 111, .10), transparent 44%);
}

.showcase-photo span {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 1;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #10141f;
    font-size: var(--text-sm);
    font-weight: 900;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}

.showcase-card {
    position: absolute;
    left: -22px;
    bottom: 96px;
    z-index: 2;
    display: grid;
    gap: 7px;
    width: min(250px, 72%);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(16, 20, 31, .90);
    color: #fff;
    box-shadow: 0 18px 46px rgba(15, 23, 42, .20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.showcase-card small,
.showcase-grid small {
    color: inherit;
    opacity: .62;
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
}

.showcase-card strong {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
}

.showcase-card span {
    max-width: 270px;
    color: rgba(255, 255, 255, .74);
    line-height: 1.35;
}

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

.showcase-grid div {
    display: grid;
    gap: 8px;
    min-height: 104px;
    align-content: center;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 18px;
    background: #fff;
}

.showcase-grid small {
    color: #596170;
}

.showcase-grid strong {
    color: #10141f;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}

.landing-preview {
    display: grid;
    justify-items: center;
}

.preview-phone {
    display: grid;
    gap: 14px;
    width: min(360px, 100%);
    padding: 18px;
    border: 1px solid #dfe5ee;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .16);
}

.preview-top {
    width: 86px;
    height: 6px;
    margin: 0 auto 4px;
    border-radius: 999px;
    background: #d5dbe5;
}

.preview-restaurant-card,
.preview-item,
.preview-cart {
    border-radius: 22px;
}

.preview-restaurant-card {
    display: grid;
    gap: 6px;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .88)),
        url("https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?auto=format&fit=crop&w=900&q=82") center/cover;
}

.preview-restaurant-card small,
.preview-restaurant-card span {
    color: var(--muted);
    font-weight: 750;
}

.preview-restaurant-card strong {
    font-size: 27px;
    font-weight: 900;
    line-height: 1.05;
}

.preview-filter {
    height: 52px;
    border-radius: 16px;
    background: #edf1f4;
}

.preview-item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
}

.preview-item span {
    display: block;
    aspect-ratio: 1;
    border-radius: 18px;
    background: url("https://images.unsplash.com/photo-1598515214211-89d3c73ae83b?auto=format&fit=crop&w=400&q=82") center/cover;
}

.preview-item strong,
.preview-item em {
    grid-column: 2;
    font-style: normal;
}

.preview-item strong {
    font-size: var(--text-lg);
    font-weight: 850;
    line-height: 1.15;
}

.preview-item em {
    color: #151a26;
    font-weight: 850;
}

.preview-item button {
    grid-column: 2;
    justify-self: start;
    min-width: 108px;
    min-height: 42px;
    border: 1px solid #efbdc8;
    border-radius: 14px;
    background: #fff;
    color: var(--accent);
    font-weight: 900;
}

.preview-cart {
    padding: 18px;
    background: var(--brand);
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 900;
}

.landing-section {
    padding: 36px 20px;
}

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

.landing-metrics article,
.landing-feature-card,
.landing-signup,
.landing-split {
    border: 1px solid rgba(17, 24, 39, .09);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .045);
}

.landing-metrics article:nth-child(1),
.landing-feature-card:nth-child(1) {
    background: linear-gradient(180deg, #ffffff, #f1fbf6);
}

.landing-metrics article:nth-child(2),
.landing-feature-card:nth-child(2) {
    background: linear-gradient(180deg, #ffffff, #fff6ef);
}

.landing-metrics article:nth-child(3),
.landing-feature-card:nth-child(3) {
    background: linear-gradient(180deg, #ffffff, #f3f7ff);
}

.landing-metrics article,
.landing-feature-card {
    display: grid;
    gap: 10px;
    padding: 22px;
}

.landing-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(24, 168, 111, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    font-size: 24px;
    line-height: 1;
}

.landing-metrics strong,
.landing-feature-card strong {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

.landing-metrics span,
.landing-feature-card p {
    color: #626a78;
    font-size: var(--text-md);
    font-weight: 550;
    line-height: 1.45;
}

.landing-section > .section-head.compact {
    margin-bottom: 16px;
}

.landing-section h2 {
    margin: 6px 0 0;
    max-width: 760px;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1;
    font-weight: 900;
}

.landing-split {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr);
    gap: 24px;
    padding: 30px;
}

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

.landing-checks span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 15px;
    border-radius: 16px;
    background: #f6f8f7;
    color: #273142;
    font-weight: 750;
}

.aggregator-section {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(360px, 1fr);
    gap: 22px;
    align-items: start;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(16, 20, 31, .94), rgba(25, 52, 42, .94)),
        #10141f;
    color: #fff;
}

.aggregator-section h2 {
    color: #fff;
}

.aggregator-section p {
    max-width: 520px;
    color: rgba(255, 255, 255, .72);
}

.aggregator-section .eyebrow {
    color: #ffcf74;
}

.aggregator-grid {
    display: grid;
    gap: 12px;
}

.aggregator-grid article {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.aggregator-grid .landing-icon {
    border-color: rgba(255, 255, 255, .30);
    background: rgba(255, 255, 255, .15);
    box-shadow: none;
}

.aggregator-grid strong {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 900;
}

.aggregator-grid span {
    color: rgba(255, 255, 255, .72);
    line-height: 1.45;
    font-weight: 550;
}

.landing-signup {
    display: grid;
    gap: 18px;
    padding: 30px;
}

.landing-cta {
    display: grid;
    justify-items: start;
    gap: 16px;
    border: 1px solid rgba(17, 24, 39, .09);
    border-radius: 24px;
    background: #10141f;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
}

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

.landing-cta .eyebrow {
    color: rgba(255, 255, 255, .68);
}

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

.landing-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.landing-form input:not([type="checkbox"]),
.landing-form textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 600;
    padding: 10px 12px;
}

.landing-form textarea {
    resize: vertical;
}

.span-2 {
    grid-column: 1 / -1;
}

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

.landing-mode-grid label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8faf9;
    color: #273142;
}

.landing-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding: 34px 20px 52px;
    color: var(--muted);
    font-weight: 700;
}

.landing-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.landing-footer-links span {
    color: var(--ink);
    font-weight: 900;
}

.landing-socials {
    display: flex;
    gap: 9px;
    align-items: center;
}

.landing-socials a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(17, 24, 39, .09);
    border-radius: 12px;
    background: #fff;
    color: #10141f;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .055);
}

.landing-socials svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.signup-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(24, 168, 111, .10), transparent 32%),
        #fafafa;
}

.signup-page {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
    gap: 46px;
    align-items: center;
    max-width: 1120px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 42px 20px;
}

.signup-intro {
    display: grid;
    gap: 42px;
}

.signup-intro h1 {
    margin: 10px 0 0;
    color: #10141f;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .96;
    font-weight: 900;
}

.signup-intro p {
    max-width: 520px;
    margin: 18px 0 0;
    color: #596170;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 550;
}

.signup-points {
    display: grid;
    gap: 10px;
    max-width: 390px;
}

.signup-points span {
    min-height: 46px;
    padding: 13px 15px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 16px;
    background: #fff;
    color: #273142;
    font-weight: 800;
}

.signup-card {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(17, 24, 39, .10);
    border-radius: 28px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .10);
}

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

.signup-card h2 {
    margin: 0;
    color: #10141f;
    font-size: 26px;
    line-height: 1.08;
    font-weight: 900;
}

.signup-card-head a {
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 800;
}

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

.signup-form label {
    display: grid;
    gap: 7px;
    color: #626a78;
    font-size: var(--text-sm);
    font-weight: 800;
}

.signup-form input:not([type="checkbox"]) {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 600;
    padding: 10px 12px;
}

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

.signup-modes label {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8faf9;
    color: #273142;
}

.partner-body {
    min-height: 100vh;
    margin: 0;
    background: #f7fbf9;
}

.partner-register {
    display: grid;
    grid-template-columns: minmax(360px, .95fr) minmax(460px, 1fr);
    min-height: 100vh;
    background: #f7fbf9;
}

.partner-image {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(20, 24, 31, .08), rgba(20, 24, 31, .22)),
        url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=84") center/cover;
}

.partner-panel {
    display: grid;
    align-items: center;
    min-height: 100vh;
    padding: 48px 32px;
    background:
        radial-gradient(circle at 90% 10%, rgba(33, 150, 118, .12), transparent 32%),
        linear-gradient(180deg, #ffffff, #f5faf8);
}

.partner-form-wrap {
    width: min(380px, 100%);
    margin: 0 auto;
}

.partner-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 31px;
}

.partner-logo img {
    width: min(172px, 52vw);
    height: auto;
    display: block;
}

.partner-form-wrap h1 {
    margin: 0 0 12px;
    color: #18202f;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 850;
}

.partner-form-wrap > p {
    margin: 0 0 30px;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.partner-errors {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #ffd4d7;
    border-radius: 6px;
    background: #fff4f5;
    color: #b4232c;
    font-size: 12px;
    font-weight: 650;
}

.partner-success {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #b8ead6;
    border-radius: 6px;
    background: #effcf6;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.partner-form {
    display: grid;
    gap: 16px;
}

.partner-form label {
    display: grid;
    gap: 8px;
    margin: 0;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.partner-form input,
.partner-form select {
    width: 100%;
    max-width: 100%;
    height: 42px;
    border: 1px solid #d9e2e3;
    border-radius: 7px;
    background: #fff;
    color: #202431;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    outline: none;
}

.partner-form select {
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, #536171 50%) right 13px center/6px 6px no-repeat,
        linear-gradient(135deg, #536171 50%, transparent 50%) right 8px center/6px 6px no-repeat,
        #fff;
    padding-right: 28px;
}

.partner-form input:focus,
.partner-form select:focus {
    border-color: #15946f;
    box-shadow: 0 0 0 3px rgba(21, 148, 111, .12);
}

.partner-phone-control {
    display: grid;
    grid-template-columns: minmax(132px, .9fr) minmax(0, 1.2fr);
    gap: 8px;
}

.partner-otp-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px 124px;
    gap: 8px;
}

.partner-form button {
    width: 100%;
    max-width: 100%;
    height: 42px;
    margin-top: 4px;
    border: 0;
    border-radius: 7px;
    background: #15946f;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(21, 148, 111, .2);
}

.partner-form button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.partner-form button:hover {
    background: #0f7f60;
}

.partner-form button:disabled:hover {
    background: #15946f;
}

.partner-otp-message {
    margin-top: -4px;
    padding: 10px 12px;
    border: 1px solid rgba(21, 148, 111, .2);
    border-radius: 7px;
    background: #f1fbf6;
    color: #0f7f60;
    font-size: 13px;
    font-weight: 750;
}

.partner-otp-message.is-error {
    border-color: rgba(184, 50, 50, .2);
    background: #fff5f5;
    color: #b83232;
}

.partner-login {
    padding-top: 14px;
    color: #5f6b7a;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.partner-login a {
    color: #0f7f60;
    font-weight: 800;
}

.auth-screen,
.admin-screen {
    display: grid;
    gap: 16px;
    width: min(1280px, calc(100% - 32px));
    max-width: none;
    margin: 0 auto;
    padding: 22px 18px 18px;
    background: #fff;
}

.auth-app {
    background:
        radial-gradient(circle at 16% 8%, rgba(24, 168, 111, .12), transparent 30%),
        linear-gradient(180deg, #f8fbfa, #eef3f5);
}

.auth-app .shell {
    min-height: 100vh;
    padding-bottom: 0;
}

.auth-app .topbar {
    border-bottom-color: rgba(17, 24, 39, .06);
    background: rgba(255, 255, 255, .88);
}

.auth-app .footer {
    background: transparent;
    padding-bottom: 28px;
}

.auth-screen {
    grid-template-columns: minmax(0, .92fr) minmax(360px, 520px);
    align-items: stretch;
    gap: 0;
    width: min(1120px, calc(100% - 48px));
    min-height: calc(100vh - 205px);
    padding: 42px 0;
    background: transparent;
}

.auth-card,
.admin-card,
.admin-metrics article {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 26, 36, 0.08);
}

.auth-card h1,
.admin-card h1,
.admin-card h2 {
    margin: 0;
    line-height: 1.12;
    font-weight: 800;
}

.auth-card h1,
.admin-card h1 {
    font-size: var(--text-display);
}

.admin-card h2 {
    overflow-wrap: anywhere;
    font-size: var(--text-lg);
}

.auth-card p,
.admin-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.auth-form {
    display: grid;
    gap: 14px;
    width: min(420px, 100%);
}

.auth-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.auth-form input:not([type="checkbox"]) {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    font-size: var(--text-lg);
    padding: 10px 12px;
}

.auth-phone-control {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 8px;
}

.auth-phone-control select {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 750;
    padding: 10px;
}

.auth-form small {
    color: #b83232;
}

.auth-status {
    padding: 12px 14px;
    border: 1px solid rgba(24, 168, 111, .22);
    border-radius: 12px;
    background: #f1fbf6;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 750;
}

.remember-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.admin-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.auth-card {
    width: 100%;
    justify-self: stretch;
    align-content: center;
    min-height: 520px;
    padding: 38px;
    border-radius: 0 22px 22px 0;
}

.auth-intro {
    display: grid;
    align-content: center;
    gap: 18px;
    min-height: 520px;
    padding: 42px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-right: 0;
    border-radius: 22px 0 0 22px;
    background:
        linear-gradient(135deg, rgba(17, 37, 29, .90), rgba(11, 123, 80, .82)),
        url("https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1200&q=84") center/cover;
    color: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.auth-intro > span {
    width: max-content;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    font-size: var(--text-sm);
    font-weight: 900;
}

.auth-intro h2 {
    max-width: 520px;
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: .98;
    font-weight: 900;
}

.auth-intro p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: var(--text-lg);
    line-height: 1.55;
    font-weight: 600;
}

.auth-intro-points {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.auth-intro-points strong {
    width: max-content;
    max-width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: var(--text-sm);
}

.auth-card .button.primary {
    border-radius: 10px;
}

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

.admin-metrics article {
    gap: 4px;
}

.admin-metrics span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.admin-metrics strong {
    font-size: 28px;
    line-height: 1;
}

.customer-account-screen {
    gap: 18px;
    padding-top: 28px;
}

.customer-account-hero {
    min-height: 148px;
    border-color: rgba(24, 168, 111, .14);
    background:
        radial-gradient(circle at 88% 10%, rgba(24, 168, 111, .12), transparent 26%),
        linear-gradient(135deg, #fff, #fbfdfc);
}

.customer-account-hero h1 {
    max-width: 760px;
    font-size: clamp(34px, 5vw, 48px);
    letter-spacing: 0;
}

.customer-live-card {
    border-color: rgba(24, 168, 111, .18);
    background:
        radial-gradient(circle at 92% 12%, rgba(24, 168, 111, .13), transparent 28%),
        #fff;
}

.customer-live-card .button.primary {
    min-width: 150px;
    border-radius: 13px;
}

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

.admin-actions form {
    margin: 0;
}

.customer-account-screen .owner-tabs {
    gap: 6px;
    padding: 0 0 8px;
}

.customer-account-screen .owner-tabs a {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 800;
    white-space: nowrap;
}

.customer-account-screen .owner-tabs a.active {
    border-color: rgba(24, 168, 111, .32);
    background: #effcf6;
    color: var(--brand-dark);
}

.customer-detail-card {
    align-items: start;
}

.compact-danger {
    border-style: dashed;
    border-color: rgba(190, 18, 60, .20);
    background: #fffafa;
    box-shadow: none;
}

.compact-danger h2 {
    font-size: var(--text-md);
}

.compact-danger .button {
    width: fit-content;
    min-height: 42px;
    border-radius: 12px;
}

.customer-account-screen .admin-card.stack {
    grid-template-columns: 1fr;
    align-items: start;
}

.customer-address-card {
    gap: 18px;
}

.customer-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(820px, 100%);
}

.address-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(1060px, 100%);
}

.customer-form label {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.customer-form label > span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.customer-form input:not([type="checkbox"]),
.customer-form select,
.customer-form textarea {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    padding: 10px 12px;
}

.customer-form textarea {
    min-height: 96px;
    resize: vertical;
}

.customer-form input:focus,
.customer-form select:focus,
.customer-form textarea:focus {
    outline: 0;
    border-color: rgba(24, 168, 111, .48);
    box-shadow: 0 0 0 3px rgba(24, 168, 111, .12);
}

.customer-form small {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    font-weight: 650;
}

.customer-form .button {
    align-self: end;
    width: fit-content;
    min-width: 160px;
    min-height: 48px;
    border-radius: 12px;
}

.address-form .button {
    justify-self: start;
}

.customer-account-screen .check-row {
    display: flex !important;
    flex-direction: row;
    gap: 10px !important;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink) !important;
}

.span-2 {
    grid-column: 1 / -1;
}

.saved-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.saved-address-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}

.saved-address-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.saved-address-card strong {
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 900;
}

.saved-address-card span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #effcf6;
    color: var(--brand-dark);
    font-size: var(--text-xs);
    font-weight: 900;
}

.saved-address-card p,
.saved-address-card small {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.saved-address-card form {
    margin-top: 4px;
}

.saved-address-card .button {
    min-height: 38px;
    border-radius: 11px;
}

.customer-account-screen .list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.customer-account-screen .list-row:first-child {
    border-top: 0;
}

.customer-account-screen .list-row strong {
    color: var(--ink);
    font-weight: 850;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.owner-module-groups {
    display: grid;
    gap: 16px;
}

.owner-module-group {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 26, 36, 0.06);
}

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

.owner-module-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 104px;
    align-content: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fafc;
}

.module-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--module-color) 13%, white);
    color: var(--module-color);
}

.module-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.module-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.owner-module-card strong {
    font-size: var(--text-md);
    line-height: 1.22;
    font-weight: 800;
}

.owner-module-card span {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    font-weight: 500;
}

.owner-module-card .module-icon {
    color: var(--module-color);
}

.owner-console {
    width: min(1280px, calc(100% - 32px));
    padding: 24px 18px 48px;
}

.browser-order-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(24, 168, 111, .22);
    border-radius: 14px;
    background: #effcf6;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 750;
}

.browser-order-alerts .button {
    min-height: 36px;
    border-radius: 10px;
    background: #fff;
}

.browser-order-toast {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 80;
    max-width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid rgba(24, 168, 111, .28);
    border-radius: 14px;
    background: #11251d;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 800;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .24);
}

.owner-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: none;
}

.owner-tabs::-webkit-scrollbar {
    display: none;
}

.owner-settings-hero {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    border-color: rgba(24, 168, 111, .18);
    background:
        radial-gradient(circle at 82% 16%, rgba(24, 168, 111, .18), transparent 26%),
        radial-gradient(circle at 18% 88%, rgba(255, 112, 45, .10), transparent 28%),
        linear-gradient(135deg, #ffffff, #f7fbf9);
}

.owner-settings-hero > div {
    position: relative;
    z-index: 1;
}

.owner-settings-hero p {
    max-width: 760px;
    font-size: var(--text-md);
    font-weight: 650;
}

.owner-settings-hero .button {
    position: relative;
    z-index: 1;
}

.owner-settings-icon {
    position: absolute;
    right: 138px;
    bottom: -18px;
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    border: 1px solid rgba(24, 168, 111, .14);
    border-radius: 32px;
    background: rgba(255, 255, 255, .62);
    color: rgba(24, 168, 111, .18);
    font-size: 38px;
    font-weight: 950;
    transform: rotate(-8deg);
}

.owner-settings-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.owner-settings-pills span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(24, 168, 111, .14);
    border-radius: 11px;
    background: rgba(255, 255, 255, .72);
    color: #263043;
    font-size: var(--text-sm);
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.owner-panel {
    display: grid;
    gap: 16px;
    align-content: start;
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(249, 251, 250, .96)),
        radial-gradient(circle at 96% 0%, rgba(24, 168, 111, .08), transparent 26%);
    box-shadow: 0 12px 28px rgba(22, 26, 36, 0.06);
}

.owner-panel > .owner-form {
    justify-self: stretch;
}

.owner-panel h2 {
    margin: 0;
    font-size: var(--text-title);
    line-height: 1.15;
}

.item-position {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    align-items: center;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(24, 168, 111, .16);
    border-radius: 10px;
    background: #f3fbf7;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 850;
}

.item-record-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.button.is-disabled {
    pointer-events: none;
    opacity: .42;
}

.owner-dashboard {
    gap: 18px;
}

.owner-dashboard-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    overflow: hidden;
    border-color: rgba(24, 168, 111, .18);
    background:
        radial-gradient(circle at 92% 12%, rgba(24, 168, 111, .16), transparent 30%),
        linear-gradient(135deg, #ffffff, #f7fbf9);
}

.owner-dashboard-hero h1 {
    max-width: 720px;
    font-size: clamp(34px, 5vw, 58px);
}

.owner-dashboard-hero p {
    max-width: 760px;
    font-size: var(--text-md);
    font-weight: 650;
}

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

.owner-dashboard-actions form {
    display: contents;
}

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

.owner-kpi {
    display: grid;
    gap: 8px;
    min-height: 148px;
    align-content: space-between;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 26, 36, 0.06);
}

.owner-kpi.urgent {
    border-color: rgba(244, 63, 94, .22);
    background: linear-gradient(135deg, #fff, #fff7f8);
}

.owner-kpi span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 800;
}

.owner-kpi strong {
    color: var(--ink);
    font-size: clamp(30px, 4vw, 48px);
    line-height: .95;
    font-weight: 900;
}

.owner-kpi a {
    width: max-content;
    max-width: 100%;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 850;
}

.owner-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 16px;
}

.owner-action-list,
.owner-checklist,
.owner-order-list {
    display: grid;
    gap: 10px;
}

.owner-action-list a,
.owner-checklist a,
.owner-order-list article {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f9fafc;
    color: var(--ink);
}

.owner-action-list a:hover,
.owner-checklist a:hover {
    border-color: rgba(24, 168, 111, .28);
    background: #f4fbf8;
}

.owner-action-list strong,
.owner-checklist strong {
    font-size: var(--text-md);
    font-weight: 850;
}

.owner-action-list span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

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

.owner-action-card {
    display: grid;
    gap: 9px;
    min-height: 168px;
    align-content: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8faf9);
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(22, 26, 36, .045);
}

.owner-action-card:hover {
    border-color: rgba(24, 168, 111, .30);
    background: #f5fbf8;
}

.owner-action-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(24, 168, 111, .16);
    border-radius: 14px;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .055);
}

.owner-action-card strong {
    font-size: var(--text-md);
    font-weight: 900;
}

.owner-action-card small {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.42;
    font-weight: 650;
}

.owner-checklist a {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
}

.owner-checklist span {
    display: inline-grid;
    min-height: 30px;
    place-items: center;
    border-radius: 10px;
    background: rgba(24, 168, 111, .12);
    color: var(--brand-dark);
    font-size: var(--text-xs);
    font-weight: 900;
    text-transform: uppercase;
}

.owner-checklist .needs-work span {
    background: rgba(255, 112, 45, .14);
    color: #b45309;
}

.owner-order-list article {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    background: #fff;
}

.owner-order-list article > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.owner-order-list article span:not(.status-pill) {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.owner-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 980px;
}

.owner-form.compact {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    align-items: end;
    width: 100%;
    max-width: 980px;
}

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

.single-card-form {
    grid-template-columns: 1fr;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.quick-item-form {
    grid-template-columns: 1.1fr 1.5fr .7fr .7fr 1fr auto auto;
    width: 100%;
    max-width: none;
    align-items: end;
}

.owner-form label,
.owner-form .toggle-line {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.owner-help {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    font-weight: 600;
}

.owner-help-box {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(24, 168, 111, .16);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(243, 251, 247, .96), rgba(247, 250, 255, .96));
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    font-weight: 600;
}

.owner-help-box::before {
    content: "?";
    display: grid;
    width: 42px;
    height: 42px;
    grid-row: span 2;
    place-items: center;
    border-radius: 14px;
    background: #fff;
    color: var(--brand-dark);
    font-size: 20px;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .055);
}

.owner-help-box strong {
    color: var(--ink);
    font-size: var(--text-md);
}

.field-hint {
    color: var(--muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    font-weight: 600;
}

.appearance-image-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.appearance-thumb {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.appearance-thumb.cover {
    width: 86px;
}

.appearance-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.color-control {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.owner-form .color-control .color-swatch-input {
    width: 54px;
    min-height: 46px;
    height: 46px;
    padding: 4px;
    border-radius: 12px;
    cursor: pointer;
}

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

.owner-form input,
.owner-form select,
.owner-form textarea,
.owner-row input,
.owner-row select,
.owner-row textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--ink);
    font: inherit;
    padding: 9px 11px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .025);
}

.owner-form input:focus,
.owner-form select:focus,
.owner-form textarea:focus,
.owner-row input:focus,
.owner-row select:focus,
.owner-row textarea:focus {
    outline: 3px solid rgba(24, 168, 111, .14);
    border-color: rgba(24, 168, 111, .48);
}

.owner-form > .button,
.owner-form > button.button {
    width: max-content;
    max-width: 100%;
    min-width: 170px;
    min-height: 48px;
    padding-right: 22px;
    padding-left: 22px;
    border-radius: 12px;
    justify-self: start;
}

.owner-form.compact > .button,
.quick-item-form > .button,
.single-card-form > .button,
.item-detail-form > .button {
    width: max-content;
    max-width: 100%;
}

.owner-form .form-actions {
    display: flex;
    align-items: end;
    justify-content: flex-start;
}

.owner-form .form-actions .button {
    width: auto;
    min-width: 190px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 12px;
}

.appearance-save-action {
    align-self: end;
}

.banner-create-form {
    max-width: none;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.1fr) minmax(180px, 1fr);
    align-items: end;
}

.banner-admin-list {
    display: grid;
    gap: 12px;
}

.banner-admin-list article {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8faf9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.banner-admin-thumb {
    display: grid;
    width: 150px;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #eef1f6;
    color: var(--muted);
    cursor: pointer;
}

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

.banner-edit-form {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) 110px;
    max-width: none;
    align-items: end;
}

.banner-delete-form {
    display: flex;
    align-items: end;
}

.owner-form textarea {
    resize: vertical;
}

.owner-row textarea {
    resize: vertical;
}

.owner-form .toggle-line,
.toggle-line {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, .78);
}

.owner-list,
.owner-nested {
    display: grid;
    gap: 10px;
}

.owner-summary-list {
    display: grid;
    gap: 10px;
}

.owner-summary-list article {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f8faf9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.owner-summary-list article > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.owner-summary-list strong,
.owner-summary-list span {
    overflow-wrap: anywhere;
}

.owner-summary-list span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.owner-summary-list small {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 850;
}

.owner-summary-list small.is-live {
    background: #e7f8ef;
    color: var(--brand-dark);
}

.editable-summary-list article {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.editable-summary-list article.editable-summary-card {
    grid-template-columns: 1fr;
}

.editable-summary-form {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) minmax(120px, .65fr);
    width: 100%;
    max-width: none;
    align-items: end;
}

.editable-summary-form.offer-edit-form {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.editable-summary-form .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-right: 16px;
    padding-left: 16px;
}

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

.editable-delete-form {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.editable-summary-list .button.danger {
    min-height: 44px;
    padding-right: 16px;
    padding-left: 16px;
}

.owner-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8faf9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

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

.owner-row.category-row {
    grid-template-columns: minmax(0, 1.4fr) 120px 120px auto;
    align-items: center;
}

.owner-row.order-admin-row {
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr) minmax(120px, .8fr) minmax(0, 1fr);
}

.owner-row.platform-restaurant-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-row.platform-user-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.owner-row.platform-content-row,
.owner-row.platform-system-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-admin-screen {
    gap: 18px;
}

.platform-admin-hero {
    min-height: 170px;
    border-color: rgba(24, 168, 111, .18);
    background:
        radial-gradient(circle at 84% 12%, rgba(24, 168, 111, .15), transparent 26%),
        radial-gradient(circle at 8% 92%, rgba(249, 115, 22, .08), transparent 30%),
        linear-gradient(135deg, #fff, #f8fbfa);
}

.platform-admin-hero h1 {
    font-size: clamp(34px, 5vw, 52px);
}

.platform-section-tabs {
    padding: 4px 0 8px;
}

.platform-section-tabs a {
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 850;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.platform-section-tabs a.active {
    border-color: rgba(24, 168, 111, .34);
    background: #effcf6;
    color: var(--brand-dark);
}

.platform-section-grid {
    display: grid;
    grid-template-columns: minmax(300px, .42fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.platform-section-grid.single {
    grid-template-columns: 1fr;
}

.platform-form-card,
.platform-list-card,
.platform-insight-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 26, 36, .06);
}

.platform-card-title {
    display: grid;
    gap: 5px;
}

.platform-card-title h2,
.platform-card-title h3 {
    margin: 0;
    color: var(--ink);
    line-height: 1.15;
    font-weight: 900;
}

.platform-card-title h2 {
    font-size: var(--text-title);
}

.platform-card-title h3 {
    font-size: var(--text-md);
}

.platform-card-title p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    font-weight: 650;
}

.platform-form {
    grid-template-columns: 1fr;
    max-width: none;
}

.platform-form.compact,
.platform-inline-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
}

.platform-record-list {
    display: grid;
    gap: 12px;
}

.platform-record-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcfd);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.platform-record-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.platform-record-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.platform-record-head strong {
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 900;
}

.platform-record-head small {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.35;
    font-weight: 650;
}

.platform-status-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 900;
}

.platform-status-pill.is-live,
.platform-status-pill.is-active {
    background: #e7f8ef;
    color: var(--brand-dark);
}

.platform-status-pill.is-warning {
    background: #fff7ed;
    color: #b45309;
}

.platform-record-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
}

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

.platform-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.platform-record-actions .button {
    min-height: 42px;
    border-radius: 12px;
}

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

.platform-metric-strip span {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid rgba(24, 168, 111, .12);
    border-radius: 14px;
    background: #f8faf9;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 850;
    text-transform: uppercase;
}

.platform-metric-strip strong {
    color: var(--ink);
    font-size: var(--text-title);
    line-height: 1;
}

.service-mode-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: var(--text-sm);
}

.service-mode-list label,
.owner-row > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-weight: 700;
}

.owner-row input[type="checkbox"],
.owner-form input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
    height: 18px;
    padding: 0;
    accent-color: var(--brand);
}

.owner-row strong,
.owner-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.owner-row .row-meta {
    display: grid;
    gap: 4px;
    align-content: center;
    min-height: 44px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.owner-row .row-status {
    color: var(--brand-dark);
}

.owner-row .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
    align-items: center;
}

.owner-row > .button,
.owner-row > a.button {
    justify-self: start;
}

.dining-layout {
    display: grid;
    gap: 16px;
}

.dining-create-card,
.dining-area-list,
.dining-area-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.dining-create-card {
    grid-template-columns: minmax(260px, .45fr) minmax(0, 1fr);
    align-items: start;
    background:
        linear-gradient(135deg, rgba(243, 251, 247, .96), #fff);
}

.dining-create-card h3,
.dining-area-list h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-title);
    line-height: 1.15;
}

.dining-create-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    font-weight: 650;
}

.dining-area-form {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, .65fr) 120px 140px auto;
    max-width: none;
    align-items: end;
}

.dining-area-list {
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

.dining-count {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 11px;
    border-radius: 11px;
    background: #f3fbf7;
    color: var(--brand-dark);
    font-size: var(--text-sm);
    font-weight: 850;
}

.dining-area-card {
    gap: 12px;
    background: #fff;
}

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

.dining-area-head > div {
    display: grid;
    gap: 4px;
}

.dining-area-head strong {
    color: var(--ink);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.dining-area-head span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.dining-area-head small {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 900;
}

.dining-table-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dining-table-chips span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(24, 168, 111, .14);
    border-radius: 11px;
    background: #f8faf9;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 800;
}

.dining-table-form {
    grid-template-columns: minmax(180px, 1fr) 110px 140px auto;
    max-width: none;
    align-items: end;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.bulk-note {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(24, 168, 111, .16);
    border-radius: 12px;
    background: #f3fbf7;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 650;
}

.bulk-note strong {
    color: var(--ink);
    font-size: var(--text-md);
}

.owner-menu-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(150px, .75fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

.owner-menu-filter label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.owner-menu-filter input,
.owner-menu-filter select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 9px 11px;
}

.owner-menu-filter .button {
    min-height: 44px;
    border-radius: 12px;
}

.owner-list-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.owner-list-summary strong {
    color: var(--ink);
    font-size: var(--text-md);
}

.owner-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.owner-item-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.owner-item-table th,
.owner-item-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.owner-item-table th {
    background: #f8faf9;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 850;
    text-transform: uppercase;
}

.owner-item-table tr:last-child td {
    border-bottom: 0;
}

.owner-table-icon {
    width: 46px;
    height: 46px;
    margin-left: auto;
    border-radius: 14px;
}

.owner-item-table td:last-child {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.owner-item-table td:last-child form {
    display: contents;
}

.owner-table-icon.danger {
    border-color: rgba(190, 18, 60, .18);
    background: #fff5f7;
    color: #be123c;
}

.owner-table-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.owner-item-table input,
.owner-item-table select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    color: var(--ink);
    font: inherit;
}

.owner-item-table td:nth-child(1) {
    min-width: 240px;
}

.owner-item-table td:nth-child(2) {
    min-width: 180px;
}

.owner-item-table td:nth-child(3),
.owner-item-table td:nth-child(4) {
    width: 110px;
}

.owner-item-table td:nth-child(5) {
    width: 130px;
}

.owner-item-table td:nth-child(6) {
    width: 86px;
}

.table-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.category-admin-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f8faf9);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

.category-admin-card .category-row {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.category-name-field {
    align-content: start;
}

.category-name-field small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
}

.category-delete-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.icon-action {
    display: inline-grid;
    width: 46px;
    min-width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.icon-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.icon-action.danger {
    border-color: rgba(190, 18, 60, .2);
    background: #fff7f8;
    color: #be123c;
}

.button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.icon-action:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.item-delete-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border: 1px dashed rgba(190, 18, 60, .24);
    border-radius: 16px;
    background: #fff8fa;
}

.item-delete-form span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 750;
}

.bulk-save-button {
    margin-top: 12px;
}

.owner-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
}

.owner-pagination a,
.owner-pagination span,
.owner-pagination strong {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 800;
}

.owner-pagination span {
    color: var(--muted);
    opacity: .62;
}

.owner-pagination strong {
    border-color: rgba(24, 168, 111, .18);
    background: #f3fbf7;
    color: var(--brand-dark);
}

.item-detail-form {
    width: 100%;
    max-width: none;
}

.owner-form.embedded {
    grid-column: 1 / -1;
    max-width: none;
}

.item-editor-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fbfcfd);
}

.item-editor-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.item-editor-head h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-title);
    line-height: 1.1;
}

.item-editor-head p,
.option-builder-title small {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.45;
    font-weight: 650;
}

.item-image-preview {
    display: grid;
    grid-template-columns: minmax(220px, .45fr) minmax(320px, 1fr);
    gap: 12px;
}

.item-image-preview > div {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8faf9;
}

.item-image-preview span {
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.item-image-preview strong,
.item-thumb-grid strong {
    display: grid;
    min-height: 120px;
    place-items: center;
    border: 1px dashed #cfd6df;
    border-radius: 13px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 850;
}

.item-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 112px));
    gap: 10px;
}

.item-preview-thumb,
.row-image-thumb {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #f8faf9;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
    cursor: pointer;
}

.item-preview-thumb {
    width: 100%;
    max-width: 112px;
    aspect-ratio: 1;
    padding: 0;
}

.item-preview-thumb.primary {
    max-width: 144px;
}

.item-preview-thumb:hover,
.row-image-thumb:hover {
    border-color: rgba(24, 168, 111, .45);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.item-preview-thumb img,
.row-image-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.row-image-thumb {
    width: 78px;
    min-height: 58px;
    padding: 0;
}

.row-image-thumb img {
    height: 58px;
}

.image-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(8, 12, 24, .72);
}

.image-preview-modal[hidden] {
    display: none;
}

.image-preview-modal img {
    display: block;
    max-width: min(960px, 96vw);
    max-height: 86vh;
    border-radius: 18px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}

.image-preview-close {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 101;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 850;
}

body.has-image-preview {
    overflow: hidden;
}

.option-builder {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 16px;
    background: #f8faf9;
}

.option-builder-title {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.option-builder-title strong {
    color: var(--ink);
    font-size: var(--text-md);
    font-weight: 900;
}

.option-row-list {
    display: grid;
    gap: 10px;
}

.option-row {
    display: grid;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.option-row.two {
    grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr) auto;
}

.option-row.priced,
.option-row.gallery-row {
    grid-template-columns: minmax(220px, 1fr) minmax(140px, .36fr) auto;
}

.option-row.gallery-row {
    grid-template-columns: minmax(260px, 1fr) auto auto;
}

.option-row.modifier {
    grid-template-columns: minmax(140px, .9fr) minmax(140px, .9fr) minmax(110px, .45fr) auto auto auto;
}

.option-row label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.option-row input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    padding: 8px 10px;
}

.mini-toggle {
    display: inline-flex !important;
    min-height: 42px;
    align-items: center;
    gap: 7px !important;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink) !important;
    font-size: var(--text-sm);
    font-weight: 800 !important;
    white-space: nowrap;
}

.option-remove {
    min-height: 42px;
    align-self: end;
}

.sticky-form-actions {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.hero h1,
.item-detail-copy h1 {
    font-weight: 800;
    line-height: 1.06;
}

.hero p,
.item-detail-copy p,
.item-detail-meta,
.breadcrumb {
    font-size: var(--text-md);
    line-height: 1.45;
    font-weight: 500;
}

.option-row {
    font-size: var(--text-md);
    line-height: 1.35;
}

.option-row strong,
.status-row strong {
    font-weight: 750;
}

.button.primary {
    font-size: var(--text-md);
    font-weight: 800;
}

@media (max-width: 420px) {
    .restaurant-hero {
        padding: 14px 12px 0;
        background:
            linear-gradient(180deg, var(--hero-overlay, rgba(0, 0, 0, 0.78)), rgba(24, 5, 3, 0.9) 58%, #fff 58%),
            var(--hero-image) center top/cover;
    }

    .restaurant-card {
        padding: 14px;
        border-radius: 22px;
    }

    .restaurant-awards {
        gap: 6px;
        font-size: 12px;
    }

    .restaurant-awards span {
        min-height: 26px;
        padding: 0 9px;
    }

    .restaurant-card-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-top: 12px;
    }

    .restaurant-title-block {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
    }

    .restaurant-logo-mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 22px;
    }

    .restaurant-card h1 {
        max-width: 9ch;
        font-size: 32px;
        line-height: 1.02;
    }

    .restaurant-card p {
        max-width: 18rem;
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.34;
    }

    .rating-badge strong {
        min-height: 32px;
        padding: 0 11px;
        font-size: 19px;
    }

    .rating-badge span {
        max-width: 62px;
        font-size: 11px;
    }

    .restaurant-meta-line {
        gap: 6px;
        margin-top: 13px;
        font-size: 13px;
    }

    .restaurant-meta-line span {
        min-height: 30px;
        padding: 0 9px;
        border-radius: 14px;
    }

    .restaurant-meta-line span:last-child {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-offer-strip {
        margin-top: 13px;
        border-radius: 16px;
    }

    .hero-offer-track {
        grid-auto-columns: minmax(205px, 78%);
        gap: 10px;
        padding: 10px;
    }

    .hero-offer {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 68px;
        padding: 9px;
        border-radius: 14px;
    }

    .offer-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .hero-offer strong {
        font-size: 16px;
    }

    .free-delivery-strip {
        margin: 12px -12px 0;
        padding: 15px 16px;
        border-radius: 0 0 22px 22px;
    }

    .restaurant-banner-strip {
        padding-top: 12px;
    }

    .restaurant-banner-card {
        flex-basis: min(300px, calc(100vw - 52px));
        min-height: 124px;
        border-radius: 16px;
    }

    .restaurant-install-card {
        grid-template-columns: 44px minmax(0, 1fr);
        margin: 12px;
        padding: 12px;
    }

    .install-mark {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .install-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .install-actions .button {
        flex: 1;
    }

    .top-actions .button,
    .top-actions [data-cart-open] {
        display: none;
    }

    .menu-item {
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 14px;
        min-height: 178px;
        padding-top: 17px;
        padding-bottom: 19px;
    }

    .item-title {
        font-size: 19px;
        line-height: 1.2;
    }

    .price {
        font-size: 16px;
    }

    .item-description {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .add-control {
        min-width: 104px;
        min-height: 44px;
        margin-top: -20px;
        font-size: 16px;
    }

    .item-detail-photo {
        min-height: 260px;
    }

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

    .category-toggle span:first-child,
    .section-head h2 {
        font-size: 21px;
    }

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

    .owner-module-card {
        min-height: 92px;
    }

    .owner-action-grid,
    .option-row.two,
    .option-row.priced,
    .option-row.gallery-row,
    .option-row.modifier,
    .item-editor-head,
    .item-image-preview {
        grid-template-columns: 1fr;
    }

    .owner-action-card {
        min-height: auto;
    }

    .item-editor-card,
    .option-builder {
        padding: 12px;
    }

    .sticky-form-actions {
        position: static;
        flex-direction: column;
        align-items: stretch;
    }

    .sticky-form-actions .button {
        width: 100%;
    }

    .owner-dashboard {
        width: min(100%, calc(100% - 16px));
        padding-right: 8px;
        padding-left: 8px;
    }

    .owner-dashboard-hero,
    .owner-settings-hero,
    .owner-today-grid,
    .owner-dashboard-grid,
    .owner-order-list article {
        grid-template-columns: 1fr;
    }

    .owner-settings-icon {
        right: 12px;
        bottom: -34px;
        width: 96px;
        height: 96px;
        font-size: 28px;
    }

    .owner-dashboard-actions {
        justify-content: stretch;
    }

    .owner-dashboard-actions .button,
    .owner-dashboard-actions form {
        width: 100%;
    }

    .owner-dashboard-actions button {
        width: 100%;
    }

    .owner-kpi {
        min-height: 124px;
    }

    .owner-order-list article {
        align-items: start;
    }

    .owner-form,
    .owner-form.compact,
    .quick-item-form,
    .owner-menu-filter,
    .owner-split-grid,
    .platform-section-grid,
    .platform-form.compact,
    .platform-inline-form,
    .platform-record-form,
    .platform-metric-strip,
    .owner-row,
    .owner-row.item-row,
    .category-admin-card,
    .owner-row.order-admin-row,
    .owner-row.platform-restaurant-row,
    .owner-row.platform-user-row,
    .owner-row.platform-content-row,
    .owner-row.platform-system-row {
        grid-template-columns: 1fr;
    }

    .dining-create-card,
    .banner-create-form,
    .banner-admin-list article,
    .banner-edit-form,
    .dining-area-form,
    .dining-table-form,
    .editable-summary-list article,
    .editable-summary-form,
    .editable-summary-form.offer-edit-form {
        grid-template-columns: 1fr;
    }

    .auth-form,
    .owner-form,
    .owner-form.compact {
        width: 100%;
    }

    .auth-phone-control {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 421px) and (max-width: 820px) {
    .restaurant-hero {
        padding: 16px 14px 0;
    }

    .restaurant-card {
        padding: 16px;
        border-radius: 24px;
    }

    .restaurant-card-main {
        gap: 10px;
    }

    .restaurant-title-block {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 11px;
    }

    .restaurant-card h1 {
        max-width: 12ch;
        font-size: clamp(34px, 8vw, 44px);
        line-height: 1.03;
    }

    .restaurant-card p {
        max-width: 24rem;
        font-size: 16px;
        line-height: 1.38;
    }

    .hero-offer-track {
        grid-auto-columns: minmax(235px, 66%);
    }

    .restaurant-banner-card {
        flex-basis: min(360px, calc(100vw - 56px));
        min-height: 136px;
    }

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

    .option-row.modifier,
    .option-row.two,
    .option-row.priced,
    .owner-menu-filter,
    .banner-create-form,
    .banner-admin-list article,
    .banner-edit-form,
    .dining-create-card,
    .dining-area-form,
    .dining-table-form,
    .editable-summary-list article,
    .editable-summary-form,
    .editable-summary-form.offer-edit-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .landing-nav {
        align-items: flex-start;
        padding: 14px 16px;
    }

    .landing-nav nav {
        gap: 2px;
    }

    .landing-nav nav a:not(.landing-user-icon) {
        min-height: 34px;
        padding: 0 10px;
        font-size: 11px;
    }

    .landing-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        padding: 54px 16px 26px;
    }

    .landing-hero h1 {
        font-size: clamp(42px, 13vw, 62px);
    }

    .landing-showcase {
        border-radius: 22px;
    }

    .showcase-card {
        position: static;
        width: 100%;
    }

    .landing-metrics,
    .landing-feature-grid,
    .landing-split,
    .aggregator-section,
    .landing-form,
    .customer-form,
    .landing-mode-grid,
    .signup-page,
    .signup-form,
    .signup-modes {
        grid-template-columns: 1fr;
    }

    .landing-section {
        padding: 22px 16px;
    }

    .landing-footer {
        justify-content: center;
    }

    .landing-footer-links {
        justify-content: center;
    }

    .landing-split,
    .landing-signup {
        padding: 22px;
    }

    .customer-account-screen {
        width: min(720px, calc(100% - 20px));
        padding-inline: 0;
    }

    .customer-account-hero,
    .customer-account-screen .admin-card {
        grid-template-columns: 1fr;
    }

    .customer-account-screen .admin-actions {
        justify-content: flex-start;
    }

    .customer-form .button {
        width: 100%;
    }

    .signup-page {
        gap: 24px;
        min-height: 0;
        padding: 28px 16px;
    }

    .signup-intro {
        gap: 24px;
    }

    .signup-card {
        padding: 20px;
        border-radius: 22px;
    }

    .signup-card-head {
        display: grid;
    }

    .partner-register {
        grid-template-columns: 1fr;
    }

    .partner-image {
        min-height: 180px;
    }

    .partner-panel {
        min-height: auto;
        padding: 34px 22px;
    }

    .partner-form-wrap {
        width: min(380px, 100%);
    }

    .partner-phone-control {
        grid-template-columns: 1fr;
    }

    .partner-otp-control {
        grid-template-columns: 1fr;
    }

    .owner-console {
        width: min(100%, calc(100% - 16px));
        padding-right: 8px;
        padding-left: 8px;
    }

    .owner-form,
    .owner-form.compact,
    .quick-item-form,
    .single-card-form,
    .item-detail-form,
    .owner-split-grid,
    .platform-section-grid,
    .platform-form.compact,
    .platform-inline-form,
    .platform-record-form,
    .platform-metric-strip,
    .owner-row,
    .owner-row.item-row,
    .owner-row.category-row,
    .category-admin-card,
    .owner-row.order-admin-row,
    .owner-row.platform-restaurant-row,
    .owner-row.platform-user-row,
    .owner-row.platform-content-row,
    .owner-row.platform-system-row {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .dining-create-card,
    .banner-create-form,
    .banner-admin-list article,
    .banner-edit-form,
    .dining-area-form,
    .dining-table-form,
    .editable-summary-list article,
    .editable-summary-form,
    .editable-summary-form.offer-edit-form {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .owner-form > .button,
    .owner-form > button.button,
    .owner-form.compact > .button,
    .quick-item-form > .button,
    .single-card-form > .button,
    .item-detail-form > .button {
        width: 100%;
    }

    .owner-today-grid,
    .owner-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .owner-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .owner-settings-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .owner-settings-icon {
        display: none;
    }

    .owner-dashboard-actions {
        justify-content: flex-start;
    }
}

@media (min-width: 760px) {
    body {
        background: #dfe3ea;
    }

    .menu-app .topbar {
        max-width: 720px;
        margin: 0 auto;
    }

    body.menu-app:has(.order-panel.has-items) .menu-stack {
        padding-bottom: 128px;
    }
}