:root {
    color-scheme: dark;
    --primary: #ff8a00;
    --primary-hover: #ffa126;
    --primary-container: #3d260d;
    --on-primary-container: #ffb45b;
    --accent: #ff8a00;
    --accent-container: #3d260d;
    --surface: #090a0a;
    --surface-high: #121414;
    --surface-variant: #1b1d1d;
    --outline: #303333;
    --text: #f4f4f1;
    --muted: #989d9b;
    --danger: #ff675e;
    --danger-container: #3a1716;
    --warning: #ff9d2d;
    --warning-container: #3b260f;
    --success: #87d45e;
    --success-container: #183020;
    --shadow-1: 0 1px 0 rgb(255 255 255 / 3%), 0 12px 30px rgb(0 0 0 / 18%);
    --shadow-2: 0 24px 70px rgb(0 0 0 / 48%);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --sidebar-width: 264px;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--surface); }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -0.035em; }
h2 { margin-bottom: 6px; font-size: 1.25rem; letter-spacing: -0.02em; }
h3 { margin-bottom: 4px; font-size: 1rem; }
p { line-height: 1.55; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow {
    margin-bottom: 7px;
    color: var(--success);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-weight: 750;
    transition: background .16s, transform .16s, box-shadow .16s;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgb(30 111 75 / 25%); outline-offset: 2px; }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.button-primary { color: white; background: var(--primary); box-shadow: 0 4px 12px rgb(18 55 42 / 18%); }
.button-primary:hover { background: var(--primary-hover); }
.button-tonal { color: var(--on-primary-container); background: var(--primary-container); }
.button-tonal:hover { background: #c3e7d5; }
.button-quiet:hover { background: var(--surface-variant); }
.button-danger { color: var(--danger); background: var(--danger-container); }
.button-large { min-height: 52px; padding-inline: 24px; }
.button-full { width: 100%; }
.icon-button {
    display: inline-grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.6rem;
}
.icon-button:hover { background: var(--surface-variant); }

.field { display: grid; gap: 7px; }
.field > span { color: #414842; font-size: .83rem; font-weight: 750; }
.field input, .field textarea, .field select,
.search-field input {
    width: 100%;
    border: 1px solid var(--outline);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface-high);
    outline: none;
}
.field input, .field select { min-height: 50px; padding: 0 14px; }
.field textarea { padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .search-field:focus-within { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.compact-field textarea { background: var(--surface); }
.password-input-wrap { position: relative; width: 100%; }
.password-input-wrap input { padding-right: 52px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}
.password-toggle:hover, .password-toggle.visible { color: var(--primary); background: var(--primary-container); }
.password-toggle span { font-size: 1.05rem; line-height: 1; }
.password-toggle.visible span { filter: saturate(.65); }
.stack-form { display: grid; gap: 18px; }
.switch-field { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 16px; }
.switch-field input { width: 22px; height: 22px; accent-color: var(--primary); }

.login-page { background: #0e2d22; }
.login-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); }
.login-brand {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(42px, 8vw, 120px);
    color: white;
    background:
        radial-gradient(circle at 15% 22%, rgb(122 202 160 / 22%), transparent 28%),
        radial-gradient(circle at 86% 80%, rgb(236 107 60 / 18%), transparent 30%),
        linear-gradient(145deg, #0d3023, #173d31);
}
.login-brand .eyebrow { margin-top: 42px; color: #99deb9; }
.login-brand h1 { max-width: 680px; font-size: clamp(2.6rem, 5.8vw, 5.6rem); line-height: .98; letter-spacing: -.06em; }
.login-lead { max-width: 620px; margin: 18px 0 30px; color: #d6e9de; font-size: clamp(1rem, 1.8vw, 1.25rem); }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-row span { padding: 9px 13px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 999px; color: #e6f4ec; background: rgb(255 255 255 / 6%); font-size: .84rem; }
.login-card { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: clamp(36px, 7vw, 90px); background: var(--surface-high); }
.login-card h2 { font-size: 2rem; }
.login-card .muted { max-width: 440px; }
.demo-accounts { display: grid; gap: 5px; padding: 16px; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); font-size: .82rem; }
.demo-accounts strong { color: var(--text); }
.alert { padding: 13px 15px; border-radius: var(--radius-sm); font-size: .9rem; }
.alert-error { color: #760b04; background: var(--danger-container); }
.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    color: white;
    background: var(--primary);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: -.03em;
}
.brand-mark-large { width: 58px; height: 58px; border-radius: 18px; color: var(--primary); background: #bce8cf; font-size: 1rem; }

.sidebar {
    position: fixed;
    z-index: 20;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    padding: 24px 16px 18px;
    border-right: 1px solid #e0e5df;
    background: #fbfcf8;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; }
.brand > span:last-child { display: grid; }
.brand strong { letter-spacing: -.02em; }
.brand small { margin-top: 1px; color: var(--muted); font-size: .69rem; }
.main-nav { display: grid; gap: 5px; margin-top: 42px; }
.nav-link { display: flex; min-height: 48px; align-items: center; gap: 13px; padding: 0 15px; border-radius: 15px; color: #505851; font-size: .91rem; font-weight: 700; }
.nav-link > span { width: 20px; color: #737c75; font-size: 1.2rem; text-align: center; }
.nav-link:hover { background: #edf1eb; }
.nav-link.active { color: var(--on-primary-container); background: var(--primary-container); }
.nav-link.active > span { color: var(--primary); }
.sidebar-footer { display: grid; gap: 10px; margin-top: auto; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid #e3e7e2; }
.user-card > span:last-child { display: grid; min-width: 0; }
.user-card strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.user-card small { margin-top: 2px; color: var(--muted); font-size: .7rem; }
.avatar { display: inline-grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--on-primary-container); background: var(--primary-container); font-size: .85rem; font-weight: 900; }

.mobile-header, .bottom-nav { display: none; }
.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.page { width: min(1480px, 100%); margin-inline: auto; padding: clamp(28px, 4vw, 58px); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; margin-bottom: 34px; }
.page-header p:last-child { margin-bottom: 0; }
.compact-header { margin-bottom: 24px; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.surface-card { padding: 24px; border: 1px solid #e1e6df; border-radius: var(--radius-md); background: var(--surface-high); box-shadow: var(--shadow-1); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.loading-block { min-height: 90px; padding: 20px; border-radius: var(--radius-sm); color: var(--muted); background: linear-gradient(100deg, #f1f3ef, #fafbf8, #f1f3ef); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.metric-card { position: relative; min-height: 148px; overflow: hidden; padding: 22px; border: 1px solid #e0e5df; border-radius: var(--radius-md); background: var(--surface-high); box-shadow: var(--shadow-1); }
.metric-card::after { position: absolute; right: -16px; bottom: -28px; width: 94px; height: 94px; border-radius: 50%; background: var(--primary-container); content: ""; opacity: .55; }
.metric-card .metric-label { color: var(--muted); font-size: .82rem; font-weight: 750; }
.metric-card strong { display: block; margin-top: 20px; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1; letter-spacing: -.04em; }
.metric-card small { display: block; margin-top: 8px; color: var(--success); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 20px; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--success); font-size: .75rem; font-weight: 800; }
.live-indicator::before { width: 7px; height: 7px; border-radius: 50%; background: #38a169; box-shadow: 0 0 0 4px rgb(56 161 105 / 13%); content: ""; }
.order-row { display: grid; grid-template-columns: 52px minmax(130px, 1fr) minmax(120px, .8fr) auto auto; align-items: center; gap: 14px; padding: 14px 6px; border-bottom: 1px solid #edf0eb; }
.order-row:last-child { border-bottom: 0; }
.order-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-container); font-size: .78rem; font-weight: 900; }
.order-row strong, .order-row span { font-size: .87rem; }
.order-row small { display: block; margin-top: 3px; color: var(--muted); }
.status-badge { display: inline-flex; width: fit-content; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: .7rem !important; font-weight: 850; white-space: nowrap; }
.status-submitted { color: #8d3f00; background: var(--warning-container); }
.status-preparing { color: #574500; background: #f5e397; }
.status-ready { color: #075b36; background: var(--success-container); }
.status-served { color: #375345; background: #e2e9e3; }
.status-cancelled { color: var(--danger); background: var(--danger-container); }
.mini-table-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-table { min-height: 90px; padding: 13px; border: 1px solid #e5e9e3; border-radius: 14px; background: var(--surface); }
.mini-table strong { display: block; font-size: .85rem; }
.mini-table span { display: block; margin-top: 22px; color: var(--muted); font-size: .7rem; }
.mini-table.busy { border-color: #efc4a8; background: #fff5ec; }
.mini-table.ready { border-color: #a8d8bd; background: #eefaf3; }

.service-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.segmented-control { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border: 1px solid #dfe4dd; border-radius: 999px; background: var(--surface-high); }
.segmented-control button, .management-tabs button {
    min-height: 44px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: .81rem;
    font-weight: 800;
}
.segmented-control button.active { color: var(--on-primary-container); background: var(--primary-container); }
.status-legend { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: .75rem; }
.status-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-free { background: #9aa39c; }
.dot-busy { background: #e77835; }
.dot-ready { background: #34a36c; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 15px; }
.table-card {
    position: relative;
    display: flex;
    min-height: 174px;
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    border: 1px solid #dfe5de;
    border-radius: var(--radius-md);
    background: var(--surface-high);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    text-align: left;
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.table-card:hover { transform: translateY(-2px); border-color: #aebbb1; box-shadow: var(--shadow-2); }
.table-card .table-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.table-card h3 { font-size: 1.15rem; }
.table-card .table-zone { color: var(--muted); font-size: .75rem; }
.table-card .table-seats { display: grid; min-width: 33px; height: 33px; place-items: center; border-radius: 50%; color: var(--muted); background: var(--surface); font-size: .75rem; font-weight: 800; }
.table-card .table-state { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-size: .78rem; font-weight: 850; }
.table-card .table-total { margin-top: 6px; color: var(--muted); font-size: .73rem; }
.table-card.busy { border-color: #efc6aa; background: #fffaf5; }
.table-card.ready { border-color: #9fd1b4; background: #f4fcf7; }

dialog { color: var(--text); }
dialog::backdrop { background: rgb(10 22 17 / 55%); backdrop-filter: blur(3px); }
.order-dialog { width: min(1180px, calc(100% - 32px)); max-width: none; height: min(800px, calc(100% - 32px)); max-height: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--surface-high); box-shadow: 0 28px 80px rgb(0 0 0 / 26%); }
.order-dialog-layout { display: grid; height: 100%; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); }
.menu-panel { min-width: 0; overflow-y: auto; padding: 25px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dialog-header h2, .dialog-header p { margin-bottom: 0; }
.search-field { display: flex; height: 48px; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid var(--outline); border-radius: 16px; background: var(--surface); }
.search-field span { color: var(--muted); font-size: 1.3rem; }
.search-field input { height: 100%; padding: 0; border: 0; background: transparent; }
.search-field input:focus { box-shadow: none; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 17px 0 14px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 38px; padding: 7px 15px; border: 1px solid var(--outline); border-radius: 999px; background: white; cursor: pointer; font-size: .78rem; font-weight: 800; }
.chip.active { border-color: var(--primary); color: white; background: var(--primary); }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding-bottom: 20px; }
.menu-item-card { display: flex; min-height: 126px; flex-direction: column; align-items: flex-start; padding: 16px; border: 1px solid #e1e6e0; border-radius: 16px; background: white; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.menu-item-card:hover { transform: translateY(-1px); border-color: #9bb7a5; background: #fbfdfb; }
.menu-item-card strong { font-size: .93rem; }
.menu-item-card p { margin: 5px 0 15px; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.menu-item-card .menu-item-bottom { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.menu-item-card .price { color: var(--primary); font-size: .88rem; font-weight: 900; }
.add-circle { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-size: 1.15rem; }
.cart-panel { display: flex; min-width: 0; flex-direction: column; padding: 25px; border-left: 1px solid #e2e6e1; background: #f7f8f4; }
.cart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.cart-heading h2, .cart-heading p { margin-bottom: 0; }
.count-badge { display: grid; min-width: 32px; height: 32px; place-items: center; padding: 0 8px; border-radius: 999px; color: var(--on-primary-container); background: var(--primary-container); font-size: .78rem; font-weight: 900; }
.cart-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.empty-state { display: grid; place-items: center; padding: 55px 20px; color: var(--muted); text-align: center; }
.empty-state > span { margin-bottom: 12px; color: #9ba49d; font-size: 2.3rem; }
.empty-state strong { color: #414842; font-size: .9rem; }
.empty-state p { margin: 6px 0 0; font-size: .76rem; }
.cart-item { padding: 13px 0; border-bottom: 1px solid #e0e5df; }
.cart-item-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cart-item-name strong { display: block; font-size: .84rem; }
.cart-item-name small { color: var(--muted); font-size: .7rem; }
.quantity-control { display: inline-flex; align-items: center; gap: 8px; }
.quantity-control button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; background: white; cursor: pointer; font-weight: 900; }
.quantity-control span { min-width: 15px; text-align: center; font-size: .8rem; font-weight: 850; }
.cart-item-price { font-size: .79rem; font-weight: 850; }
.item-note-input { width: calc(100% - 78px); min-height: 32px; margin: 8px 0 0 78px; padding: 6px 9px; border: 0; border-radius: 9px; color: var(--text); background: white; font-size: .7rem; }
.cart-footer { display: grid; gap: 12px; padding-top: 16px; }
.cart-total { display: flex; align-items: center; justify-content: space-between; }
.cart-total span { color: var(--muted); font-size: .82rem; }
.cart-total strong { font-size: 1.45rem; letter-spacing: -.035em; }

.kitchen-page { width: 100%; max-width: none; min-height: 100vh; background: #f1f3ef; }
.kitchen-header { align-items: center; }
.compact-segments button { padding-inline: 12px; }
.kitchen-board { display: grid; grid-template-columns: repeat(3, minmax(270px, 1fr)); gap: 15px; align-items: start; }
.kitchen-column { min-height: 65vh; padding: 13px; border-radius: 22px; background: #e8ece6; }
.kitchen-column > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 15px; }
.kitchen-column > header > div { display: flex; align-items: center; gap: 9px; }
.kitchen-column h2 { margin: 0; font-size: .94rem; }
.status-icon { font-size: .72rem; }
.status-icon.new { color: #d95d19; }
.status-icon.preparing { color: #b28a00; }
.status-icon.ready { color: #29905a; }
.column-count { display: grid; min-width: 29px; height: 29px; place-items: center; padding: 0 7px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / 72%); font-size: .74rem; font-weight: 900; }
.ticket-list { display: grid; gap: 11px; }
.ticket { overflow: hidden; border: 1px solid #dde3dc; border-radius: 17px; background: white; box-shadow: var(--shadow-1); }
.ticket.urgent { border-color: #e88770; box-shadow: 0 0 0 2px rgb(211 62 30 / 9%); }
.ticket-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px 12px; border-bottom: 1px dashed #dbe1da; }
.ticket-table { display: flex; align-items: center; gap: 10px; }
.ticket-number { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; background: var(--primary); font-size: .72rem; font-weight: 900; }
.ticket-table strong { display: block; font-size: .98rem; }
.ticket-table small { display: block; margin-top: 3px; color: var(--muted); font-size: .67rem; }
.ticket-time { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.urgent .ticket-time { color: var(--danger); background: var(--danger-container); }
.ticket-items { display: grid; gap: 8px; padding: 13px 16px; }
.ticket-item { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: start; gap: 7px; }
.ticket-item > strong { font-size: .86rem; }
.ticket-item .quantity { color: var(--primary); font-weight: 950; }
.ticket-item .station-tag { padding: 3px 6px; border-radius: 6px; color: var(--muted); background: var(--surface); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.ticket-item-note { grid-column: 2 / -1; margin-top: -4px; color: #a44318; font-size: .69rem; font-weight: 700; }
.ticket-note { margin: 0 16px 13px; padding: 9px 10px; border-radius: 10px; color: #7c3513; background: #fff1e7; font-size: .7rem; }
.ticket-footer { padding: 0 13px 13px; }
.ticket-footer .button { min-height: 43px; }
.kitchen-empty { display: grid; min-height: 160px; place-items: center; padding: 24px; color: #7a837b; text-align: center; }
.kitchen-empty span { display: block; margin-bottom: 7px; font-size: 1.8rem; }

.management-tabs { display: inline-flex; gap: 4px; margin-bottom: 24px; padding: 5px; border: 1px solid #dfe5de; border-radius: 999px; background: white; }
.management-tabs button.active { color: white; background: var(--primary); }
.management-panel { display: none; padding: 25px; border: 1px solid #e0e5df; border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-1); }
.management-panel.active { display: block; }
.admin-list { display: grid; }
.admin-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .8fr) minmax(100px, .6fr) minmax(110px, .6fr) auto; align-items: center; gap: 16px; min-height: 68px; padding: 10px 5px; border-bottom: 1px solid #edf0eb; }
.admin-row:last-child { border-bottom: 0; }
.admin-primary strong { display: block; font-size: .87rem; }
.admin-primary small, .admin-cell { color: var(--muted); font-size: .75rem; }
.availability { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: .68rem; font-weight: 850; }
.availability.on { color: var(--success); background: var(--success-container); }
.availability.off { color: var(--danger); background: var(--danger-container); }
.row-actions { display: flex; justify-content: flex-end; }
.row-actions .button { min-height: 36px; padding: 6px 12px; font-size: .75rem; }
.protected-access { align-self: center; color: var(--muted); font-size: .7rem; font-weight: 750; }
.form-dialog { width: min(510px, calc(100% - 28px)); padding: 24px; border: 0; border-radius: 24px; background: white; box-shadow: var(--shadow-2); }
.form-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 8px; width: min(360px, calc(100% - 32px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; color: white; background: #26332c; box-shadow: var(--shadow-2); animation: toast-in .2s ease-out; font-size: .83rem; font-weight: 700; }
.toast.error { background: #8c211a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .order-dialog-layout { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr); }
    .kitchen-board { grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; }
    .admin-row { grid-template-columns: minmax(160px, 1.2fr) 120px 100px auto; }
    .admin-row > :nth-child(4):not(.row-actions) { display: none; }
}

@media (max-width: 820px) {
    :root { --bottom-nav-height: 72px; }
    .sidebar { display: none; }
    .mobile-header {
        position: sticky;
        z-index: 30;
        top: 0;
        display: flex;
        min-height: 68px;
        align-items: center;
        justify-content: space-between;
        padding: 10px 18px;
        border-bottom: 1px solid #e0e5df;
        background: rgb(251 252 248 / 92%);
        backdrop-filter: blur(14px);
    }
    .mobile-header .brand { padding: 0; }
    .mobile-header .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
    .main-content { margin-left: 0; padding-bottom: var(--bottom-nav-height); }
    .page { padding: 24px 18px 38px; }
    .page-header { margin-bottom: 24px; }
    .page-header .button { flex: 0 0 auto; }
    .bottom-nav {
        position: fixed;
        z-index: 35;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        min-height: var(--bottom-nav-height);
        align-items: stretch;
        justify-content: space-around;
        padding: 7px 8px max(7px, env(safe-area-inset-bottom));
        border-top: 1px solid #dfe4dd;
        background: rgb(251 252 248 / 96%);
        backdrop-filter: blur(14px);
    }
    .bottom-nav a { display: grid; min-width: 62px; place-items: center; align-content: center; gap: 2px; border-radius: 16px; color: var(--muted); font-size: .63rem; font-weight: 800; }
    .bottom-nav a span { font-size: 1.2rem; }
    .bottom-nav a.active { color: var(--primary); background: var(--primary-container); }
    .order-dialog { width: 100%; height: calc(100% - 25px); margin: auto 0 0; border-radius: 24px 24px 0 0; }
    .order-dialog-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr); }
    .menu-panel, .cart-panel { padding: 20px; }
    .kitchen-page { padding-inline: 14px; }
    .kitchen-header { align-items: flex-start; }
    .kitchen-header .header-actions { justify-content: flex-start; }
    .kitchen-board { margin-inline: -2px; padding-bottom: 8px; scroll-snap-type: x mandatory; }
    .kitchen-column { width: min(84vw, 360px); scroll-snap-align: start; }
}

@media (max-width: 640px) {
    .login-layout { display: block; min-height: 100vh; background: var(--surface-high); }
    .login-brand { min-height: auto; padding: 46px 24px 54px; }
    .login-brand .eyebrow { margin-top: 25px; }
    .login-brand h1 { font-size: clamp(2.3rem, 13vw, 3.7rem); }
    .login-lead { margin-bottom: 0; }
    .feature-row { display: none; }
    .login-card { padding: 34px 24px 50px; }
    h1 { font-size: 1.75rem; }
    .page-header { display: block; }
    .page-header > .button { width: 100%; margin-top: 16px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric-card { min-height: 125px; padding: 17px; }
    .metric-card strong { margin-top: 18px; font-size: 1.75rem; }
    .surface-card { padding: 18px; }
    .order-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 9px; }
    .order-row > :nth-child(3), .order-row > :nth-child(4) { display: none; }
    .mini-table-grid { grid-template-columns: repeat(2, 1fr); }
    .service-toolbar { display: block; }
    .segmented-control { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; }
    .status-legend { margin-top: 14px; }
    .table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .table-card { min-height: 148px; padding: 15px; }
    .table-card h3 { font-size: .95rem; }
    .order-dialog-layout { display: block; overflow-y: auto; }
    .menu-panel { overflow: visible; padding-bottom: 10px; }
    .cart-panel { min-height: 420px; border-top: 1px solid #e2e6e1; border-left: 0; }
    .menu-grid { grid-template-columns: 1fr; }
    .menu-item-card { min-height: 105px; }
    .kitchen-header .header-actions { width: 100%; margin-top: 18px; }
    .kitchen-header .button { width: auto; margin-top: 0; }
    .kitchen-header .compact-segments { width: 100%; }
    .kitchen-header .compact-segments button { flex: 1; }
    .management-tabs { display: flex; width: 100%; overflow-x: auto; }
    .management-tabs button { flex: 1; padding-inline: 10px; }
    .management-panel { padding: 18px; }
    .management-panel .section-heading { align-items: flex-start; }
    .management-panel .section-heading .button { min-width: 44px; padding-inline: 12px; font-size: 0; }
    .management-panel .section-heading .button::first-letter { font-size: 1rem; }
    .admin-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding-block: 13px; }
    .admin-row > :not(.admin-primary):not(.row-actions) { display: none; }
    .toast-region { right: 16px; bottom: calc(var(--bottom-nav-height) + 12px); }
}

/* Company identity and public presentation */
.brand-logo { display: block; flex: 0 0 auto; object-fit: cover; object-position: center; border: 1px solid #513319; border-radius: 10px; background: #080909; box-shadow: 0 8px 22px rgb(0 0 0 / 22%); }
.brand-logo-header { width: 48px; height: 48px; }
.brand-logo-app { width: 42px; height: 42px; border-radius: 11px; }
.brand-logo-mobile { width: 38px; height: 38px; border-radius: 10px; }
.hero-company-logo { display: block; width: clamp(94px, 11vw, 138px); height: auto; margin: 0 0 27px; border: 1px solid #433022; border-radius: 18px; box-shadow: 0 24px 60px rgb(0 0 0 / 45%), 0 0 50px rgb(255 138 0 / 10%); }
.portal-company-logo { width: 104px; height: auto; margin-bottom: 28px; border: 1px solid #47311f; border-radius: 15px; box-shadow: 0 20px 55px rgb(0 0 0 / 38%); }
.cta-company-logo { width: 96px; height: auto; margin-bottom: 21px; border: 1px solid #4b351e; border-radius: 16px; box-shadow: 0 18px 48px rgb(0 0 0 / 42%); }

.marketing-hero { isolation: isolate; padding-top: clamp(84px, 10vw, 145px); padding-bottom: clamp(80px, 10vw, 145px); background: radial-gradient(circle at 77% 42%, rgb(255 138 0 / 12%), transparent 21rem), radial-gradient(circle at 15% 12%, rgb(255 138 0 / 16%), transparent 26rem), #070808; }
.marketing-hero::after { position: absolute; z-index: -1; right: -20vw; bottom: -37vw; width: min(78vw, 980px); aspect-ratio: 1; border: 1px solid rgb(255 138 0 / 15%); border-radius: 50%; box-shadow: inset 0 0 100px rgb(255 138 0 / 4%), 0 0 130px rgb(255 138 0 / 4%); content: ""; }
.hero-copy { max-width: 760px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-copy .eyebrow::before { width: 28px; height: 1px; background: var(--primary); content: ""; }
.hero-copy h1 { max-width: 850px; }
.hero-copy .login-lead { max-width: 610px; font-size: clamp(1rem, 1.55vw, 1.15rem); line-height: 1.6; }
.hero-actions .button-primary { box-shadow: 0 13px 34px rgb(255 138 0 / 23%); }
.feature-row { gap: 9px; }
.feature-row span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; }
.feature-row i { color: var(--primary); font-style: normal; font-weight: 950; }
.hero-dashboard { overflow: hidden; border-color: #3f3427; }
.hero-dashboard::after { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgb(255 138 0 / 4%)); content: ""; pointer-events: none; }
.hero-dashboard-top span { display: inline-flex; align-items: center; gap: 8px; }
.hero-dashboard-top span i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgb(135 212 94 / 10%); }
.hero-metrics span { position: relative; z-index: 1; gap: 5px; }
.hero-metrics small { color: #747a77; font-size: .61rem; letter-spacing: 0; text-transform: none; }
.hero-tickets { position: relative; z-index: 1; }

.marketing-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0 clamp(24px, 7vw, 110px); background: #27231e; }
.marketing-proof > div { display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center; min-height: 112px; padding: 22px clamp(14px, 2vw, 34px); background: #111313; }
.marketing-proof span { grid-row: span 2; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #5c3914; border-radius: 50%; color: var(--primary); font-size: .67rem; font-weight: 900; }
.marketing-proof strong { font-size: .91rem; text-transform: uppercase; letter-spacing: .03em; }
.marketing-proof small { margin-top: 4px; color: var(--muted); font-size: .73rem; line-height: 1.4; }
.marketing-section { position: relative; padding-top: clamp(90px, 11vw, 160px); }
.section-intro { max-width: 1000px; }
.section-intro > p:last-child { max-width: 720px; }
.marketing-card-grid article { position: relative; overflow: hidden; display: flex; min-height: 306px; flex-direction: column; border-color: #323535; transition: border-color .2s, transform .2s, box-shadow .2s; }
.marketing-card-grid article::after { position: absolute; right: -38px; bottom: -46px; width: 136px; height: 136px; border: 1px solid rgb(255 138 0 / 14%); border-radius: 50%; content: ""; }
.marketing-card-grid article:hover { border-color: #81521d; box-shadow: 0 20px 48px rgb(0 0 0 / 23%); transform: translateY(-4px); }
.marketing-card-grid article > span { margin-bottom: 43px; }
.marketing-card-grid article p { position: relative; z-index: 1; margin-bottom: 18px; }
.marketing-card-grid article small { position: relative; z-index: 1; margin-top: auto; color: #d2d5d3; font-size: .76rem; line-height: 1.5; }
.marketing-benefits { position: relative; overflow: hidden; }
.marketing-benefits::before { position: absolute; top: -18rem; right: -16rem; width: 43rem; height: 43rem; border: 1px solid rgb(255 138 0 / 12%); border-radius: 50%; content: ""; }
.marketing-benefits > * { position: relative; z-index: 1; }
.marketing-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0, rgb(255 138 0 / 10%), transparent 27rem), #0d0f0f; }
.marketing-cta::before { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 74%); content: ""; pointer-events: none; }
.marketing-cta > * { position: relative; z-index: 1; }
.portal-brand { position: relative; overflow: hidden; }
.portal-brand::after { position: absolute; right: -12rem; bottom: -17rem; width: 35rem; height: 35rem; border: 1px solid rgb(255 138 0 / 14%); border-radius: 50%; content: ""; }
.portal-brand > * { position: relative; z-index: 1; }

@media (max-width: 700px) {
    .brand-logo-header { width: 42px; height: 42px; }
    .hero-company-logo { width: 104px; margin-bottom: 22px; }
    .marketing-proof { grid-template-columns: 1fr; padding-inline: 0; }
    .marketing-proof > div { min-height: 86px; padding-inline: 24px; }
    .marketing-card-grid article { min-height: 230px; }
    .marketing-card-grid article > span { margin-bottom: 26px; }
    .portal-company-logo { width: 84px; margin-bottom: 20px; }
}

/* Account security and history workspace */
.password-strength { min-height: 1.2em; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.password-strength[data-level="weak"] { color: #ff9d96; }
.password-strength[data-level="medium"] { color: #ffbe6e; }
.password-strength[data-level="strong"] { color: #9fe67e; }

.security-page { max-width: 1180px; }
.security-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.security-card { padding: clamp(22px, 4vw, 34px); }
.security-card-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.security-card-heading > span { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; border: 1px solid #6c4315; border-radius: 12px; color: var(--primary); background: var(--primary-container); font-size: 1.45rem; }
.security-card-heading h2, .security-card-heading p { margin: 0; }
.security-card-heading p { margin-top: 3px; color: var(--muted); font-size: .82rem; }
.security-card .alert { margin: 0 0 18px; }
.account-context { padding: 25px; background: linear-gradient(150deg, #171919, #101111); }
.account-identity { display: flex; align-items: center; gap: 11px; padding: 3px 0 21px; border-bottom: 1px solid var(--outline); }
.account-identity > span:last-child { display: grid; min-width: 0; }
.account-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { margin-top: 4px; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.security-checklist { display: grid; gap: 12px; margin: 21px 0 0; padding: 0; list-style: none; color: #c8ccca; font-size: .78rem; line-height: 1.4; }
.security-checklist li { position: relative; padding-left: 22px; }
.security-checklist li::before { position: absolute; left: 0; color: var(--success); content: "✓"; font-weight: 900; }

.history-page { max-width: 1520px; }
.history-live-context { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #b6bbb8; font-size: .76rem; font-weight: 750; }
.history-live-context > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgb(135 212 94 / 10%); }
.history-filters { grid-template-columns: minmax(112px, .6fr) auto 132px 132px minmax(160px, .75fr) minmax(145px, .65fr) minmax(220px, 1.2fr) auto; gap: 11px; padding: 17px; }
.history-filter-label { display: grid; align-self: center; gap: 3px; }
.history-filter-label > span { color: var(--text); font-size: .84rem; font-weight: 850; }
.history-filter-label small { color: var(--muted); font-size: .68rem; }
.history-presets { white-space: nowrap; }
.history-sort { min-width: 0; }
.history-summary { gap: 13px; margin: 18px 0; }
.history-summary .metric-card { min-height: 126px; padding: 19px; background: linear-gradient(145deg, #171919, #111313); }
.history-summary .metric-card::after { width: 74px; height: 74px; right: -20px; bottom: -25px; background: rgb(255 138 0 / 16%); }
.history-summary .metric-card small { color: #a0a6a3; }
.history-insights { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.15fr); gap: 16px; margin-bottom: 18px; }
.history-status-overview, .history-activity-card { min-height: 202px; padding: 20px; background: linear-gradient(145deg, #161818, #101111); }
.insight-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.insight-heading h2 { margin: 0; font-size: 1.05rem; }
.insight-heading .eyebrow { margin-bottom: 4px; font-size: .64rem; }
.insight-heading > small { padding-top: 3px; color: var(--muted); font-size: .69rem; text-align: right; }
.status-overview-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.history-status-stat { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 7px; padding: 8px; border: 1px solid #292c2c; border-radius: 10px; color: var(--text); background: #0d0f0f; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.history-status-stat:hover, .history-status-stat.active { border-color: #805018; background: #1d1610; transform: translateY(-1px); }
.history-status-stat .status-badge { padding: 4px 7px; font-size: .59rem !important; }
.history-status-stat strong { font-size: 1.06rem; }
.activity-chart { display: flex; height: 122px; align-items: end; gap: clamp(4px, 1vw, 11px); overflow: hidden; padding: 0 3px; }
.activity-bar-wrap { display: grid; min-width: 0; height: 100%; flex: 1 1 0; grid-template-rows: 17px minmax(0, 1fr) 18px; align-items: end; gap: 5px; }
.activity-value { color: #ccd0cd; font-size: .65rem; font-weight: 850; text-align: center; }
.activity-bar { display: block; width: 100%; height: var(--activity-height); min-height: 5px; border: 1px solid rgb(255 177 83 / 26%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ffad4a, #b96308); box-shadow: 0 7px 16px rgb(255 138 0 / 13%); transition: height .25s ease; }
.activity-height-10 { --activity-height: 10%; }
.activity-height-20 { --activity-height: 20%; }
.activity-height-30 { --activity-height: 30%; }
.activity-height-40 { --activity-height: 40%; }
.activity-height-50 { --activity-height: 50%; }
.activity-height-60 { --activity-height: 60%; }
.activity-height-70 { --activity-height: 70%; }
.activity-height-80 { --activity-height: 80%; }
.activity-height-90 { --activity-height: 90%; }
.activity-height-100 { --activity-height: 100%; }
.activity-bar-wrap small { overflow: hidden; color: var(--muted); font-size: .61rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.history-insight-empty { display: grid; height: 120px; place-items: center; margin: 0; color: var(--muted); font-size: .8rem; }
.history-results { padding: 0; background: linear-gradient(145deg, #141616, #101111); }
.history-results-heading { align-items: center; margin: 0; padding: 22px 24px 15px; border-bottom: 1px solid #292c2c; }
.history-list { min-height: 100px; }
.history-day > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px 10px; border-bottom: 1px solid #252828; color: #d7dad8; background: rgb(255 255 255 / 1%); }
.history-day > header strong { font-size: .78rem; text-transform: capitalize; }
.history-day > header span { color: var(--muted); font-size: .68rem; }
.history-row { grid-template-columns: 52px minmax(145px, 1fr) minmax(170px, .95fr) minmax(96px, .55fr) minmax(78px, .45fr) 22px; gap: 14px; min-height: 78px; padding: 13px 24px; border-bottom-color: #232626; }
.history-row:hover { padding-inline: 24px; background: linear-gradient(90deg, rgb(255 138 0 / 9%), transparent 80%); }
.history-row .order-number { width: 40px; height: 40px; border: 1px solid #59411f; border-radius: 11px; color: #ffc17c; background: #24170b; }
.history-main strong { font-size: .88rem; }
.history-person small { font-size: .69rem; }
.history-total { color: #f3f3ef; font-size: .87rem; }
.history-stream .history-row:last-child { border-bottom: 0; }
.history-results .empty-state { min-height: 210px; }

@media (max-width: 1320px) {
    .history-filters { grid-template-columns: minmax(110px, .65fr) auto 1fr 1fr 1fr 1fr; }
    .history-presets { grid-column: span 2; }
    .history-search { grid-column: span 2; }
    .history-insights { grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr); }
}

@media (max-width: 980px) {
    .security-layout, .history-insights { grid-template-columns: 1fr; }
    .history-filters { grid-template-columns: repeat(4, 1fr); }
    .history-filter-label { grid-column: span 1; }
    .history-presets { grid-column: span 3; }
    .history-search { grid-column: span 2; }
    .history-row { grid-template-columns: 52px minmax(130px, 1fr) minmax(96px, .6fr) auto 18px; }
    .history-person { display: none; }
}

@media (max-width: 640px) {
    .security-card, .account-context { padding: 20px; }
    .history-page .page-header { gap: 18px; }
    .history-page .page-header > .button { width: 100%; }
    .history-filters { grid-template-columns: 1fr 1fr; padding: 14px; }
    .history-filter-label, .history-presets, .history-search, .history-filters > .button { grid-column: 1 / -1; }
    .history-filter-label { display: none; }
    .history-presets { width: 100%; overflow-x: auto; }
    .history-presets button { flex: 0 0 auto; }
    .history-date, .history-status, .history-sort { min-width: 0; }
    .history-summary { grid-template-columns: 1fr 1fr; }
    .history-summary .metric-card { min-height: 112px; padding: 15px; }
    .status-overview-list { grid-template-columns: 1fr 1fr; }
    .history-status-overview, .history-activity-card { padding: 17px; }
    .activity-chart { gap: 5px; }
    .activity-bar-wrap small { font-size: .56rem; }
    .history-results-heading { padding: 19px 16px 13px; }
    .history-day > header { padding-inline: 16px; }
    .history-row { grid-template-columns: 43px minmax(0, 1fr) auto; min-height: 69px; gap: 9px; padding: 11px 16px; }
    .history-row:hover { padding-inline: 16px; }
    .history-row .order-number { width: 36px; height: 36px; font-size: .7rem; }
    .history-row .status-badge, .history-arrow { display: none; }
    .history-total { font-size: .79rem; }
}

@media (display-mode: standalone) and (max-width: 820px) {
    .mobile-header { padding-top: max(10px, env(safe-area-inset-top)); }
}

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

/* Helloman Cuisine — graphite, orange and high-contrast operational UI */
html, body { background: var(--surface); }
body {
    background:
        radial-gradient(circle at 92% 2%, rgb(255 138 0 / 7%), transparent 24rem),
        var(--surface);
}
::selection { color: #080909; background: var(--primary); }
h1 { font-weight: 900; text-transform: uppercase; }
em { color: var(--primary); font-style: normal; }
.eyebrow { color: var(--primary); letter-spacing: .16em; }
.muted { color: var(--muted); }

.button { border-radius: var(--radius-sm); letter-spacing: .01em; }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.history-row:focus-visible, .table-card:focus-visible, .menu-item-card:focus-visible { outline-color: rgb(255 138 0 / 45%); }
.button-primary { color: #111; background: var(--primary); box-shadow: 0 7px 22px rgb(255 138 0 / 18%); }
.button-primary:hover { background: var(--primary-hover); }
.button-tonal { border: 1px solid #513319; color: var(--on-primary-container); background: var(--primary-container); }
.button-tonal:hover { background: #4c2d0f; }
.button-quiet { color: var(--muted); }
.button-quiet:hover, .icon-button:hover { color: var(--text); background: var(--surface-variant); }
.button-danger { color: #ff918a; background: var(--danger-container); }

.field > span { color: #c5c8c6; }
.field input, .field textarea, .field select, .search-field input {
    border-color: var(--outline);
    color: var(--text);
    background: #0d0f0f;
}
.field input:focus, .field textarea:focus, .field select:focus, .search-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field input::placeholder, .field textarea::placeholder, .search-field input::placeholder { color: #676b69; }
.compact-field textarea { background: #0d0f0f; }
.password-toggle:hover, .password-toggle.visible { color: var(--primary); background: var(--primary-container); }
.switch-field input { accent-color: var(--primary); }

.login-page { background: #070808; }
.login-layout { grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); }
.login-brand {
    position: relative;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 16% 18%, rgb(255 138 0 / 15%), transparent 24rem),
        radial-gradient(circle at 82% 84%, rgb(255 138 0 / 11%), transparent 19rem),
        linear-gradient(145deg, #070808, #101212);
}
.login-brand::after {
    position: absolute;
    right: -8rem;
    bottom: -13rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgb(255 138 0 / 20%);
    border-radius: 50%;
    box-shadow: 0 0 80px rgb(255 138 0 / 10%), inset 0 0 80px rgb(255 138 0 / 4%);
    content: "";
}
.login-brand .eyebrow { margin-top: 36px; color: #ffae4f; }
.login-brand h1 { position: relative; z-index: 1; max-width: 830px; font-size: clamp(2.7rem, 6vw, 6rem); letter-spacing: -.055em; }
.login-brand h1 span { color: var(--primary); }
.login-lead { position: relative; z-index: 1; color: #b7bcba; }
.feature-row { position: relative; z-index: 1; }
.feature-row span { border-color: #343737; border-radius: 8px; color: #e5e7e6; background: rgb(255 255 255 / 3%); text-transform: uppercase; letter-spacing: .07em; }
.login-card { border-left: 1px solid #222525; background: #0d0f0f; }
.login-card h2 { text-transform: uppercase; }
.demo-accounts { padding: 0; border: 1px solid #292c2c; color: var(--muted); background: #111313; }
.demo-accounts summary { padding: 14px 16px; cursor: pointer; font-weight: 800; }
.demo-accounts > div { display: grid; gap: 5px; padding: 0 16px 16px; }
.demo-accounts > div > strong { display: none; }
.alert-error { color: #ffaaa4; background: var(--danger-container); }
.alert-success { color: #b8eca0; background: var(--success-container); }
.alert-info { color: #ffd19b; background: var(--primary-container); }

.brand-lockup { display: flex; align-items: center; gap: 16px; }
.brand-lockup > span:last-child { display: grid; line-height: .88; }
.brand-lockup strong { font-size: 1.55rem; font-weight: 950; letter-spacing: -.06em; }
.brand-lockup em { font-size: 1.9rem; font-weight: 950; letter-spacing: -.07em; transform: skew(-7deg); }
.brand-mark {
    position: relative;
    overflow: visible;
    border: 1px solid #6b410e;
    border-radius: 11px;
    color: #0b0c0c;
    background: var(--primary);
    box-shadow: 0 8px 25px rgb(255 138 0 / 18%);
    font-style: italic;
}
.brand-mark::before, .brand-mark::after {
    position: absolute;
    left: -9px;
    width: 9px;
    height: 2px;
    background: var(--primary);
    content: "";
}
.brand-mark::before { top: 14px; box-shadow: -5px 7px 0 var(--primary); }
.brand-mark::after { top: 28px; width: 13px; }
.brand-mark-large { width: 70px; height: 70px; border-radius: 16px; color: #0b0c0c; background: var(--primary); font-size: 1.08rem; }
.brand-lockup-large .brand-mark::before { top: 22px; box-shadow: -8px 10px 0 var(--primary); }
.brand-lockup-large .brand-mark::after { top: 43px; width: 17px; }

.sidebar { border-right-color: #232626; background: #090a0a; }
.brand strong { font-size: .88rem; letter-spacing: .025em; }
.brand small { color: #717674; }
.nav-link { border: 1px solid transparent; border-radius: 10px; color: #929795; }
.nav-link > span { color: #6f7472; }
.nav-link:hover { color: var(--text); background: #151717; }
.nav-link.active { border-color: #513319; color: var(--text); background: linear-gradient(90deg, #3b240b, #24190e); }
.nav-link.active > span { color: var(--primary); }
.user-card { border-top-color: #242727; }
.avatar { color: #111; background: var(--primary); }
.main-content { background: transparent; }
.page { max-width: 1540px; }
.surface-card, .metric-card, .management-panel { border-color: #282b2b; background: var(--surface-high); box-shadow: var(--shadow-1); }
.loading-block { color: var(--muted); background: linear-gradient(100deg, #111313, #191b1b, #111313); background-size: 200% 100%; animation: loading-sheen 1.6s ease infinite; }
@keyframes loading-sheen { to { background-position: -200% 0; } }
.text-link { color: var(--primary); font-size: .78rem; font-weight: 850; }

.metric-card { border-radius: var(--radius-md); }
.metric-card::after { border: 1px solid rgb(255 138 0 / 18%); background: transparent; }
.metric-card .metric-label { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.metric-card strong { color: var(--text); }
.metric-card small { color: var(--primary); }
.operations-strip {
    display: grid;
    grid-template-columns: minmax(250px, 1.3fr) 1px repeat(4, minmax(115px, .7fr));
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 18px 22px;
    border: 1px solid #2a2d2d;
    border-radius: var(--radius-md);
    background: linear-gradient(105deg, #15120d, #111313 45%);
}
.pulse-score, .pulse-stat { display: flex; align-items: center; gap: 12px; }
.pulse-score span:last-child, .pulse-stat span:last-child { display: grid; }
.pulse-score strong, .pulse-stat strong { font-size: .98rem; }
.pulse-score small, .pulse-stat small { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.score-ring {
    --score: 0;
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, #15130f 61%, transparent 63%), conic-gradient(var(--primary) calc(var(--score) * 1%), #343636 0);
}
.score-ring strong { font-size: .78rem; }
.score-ring.score-0 { --score: 0; }
.score-ring.score-10 { --score: 10; }
.score-ring.score-20 { --score: 20; }
.score-ring.score-30 { --score: 30; }
.score-ring.score-40 { --score: 40; }
.score-ring.score-50 { --score: 50; }
.score-ring.score-60 { --score: 60; }
.score-ring.score-70 { --score: 70; }
.score-ring.score-80 { --score: 80; }
.score-ring.score-90 { --score: 90; }
.score-ring.score-100 { --score: 100; }
.pulse-divider { width: 1px; height: 42px; background: #303333; }
.pulse-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgb(255 138 0 / 8%); }
.pulse-dot.preparing { background: #ffd15c; }
.pulse-dot.ready { background: var(--success); }
.pulse-dot.delayed { background: #ff675e; }
.pulse-stat.alerting strong { color: #ff8179; }

.order-row { border-bottom-color: #252828; }
.order-number { border: 1px solid #5b3710; border-radius: 9px; color: var(--primary); background: #271a0d; }
.status-badge { border: 1px solid transparent; }
.status-submitted { border-color: #5b3912; color: #ffad4f; background: #2e1e0d; }
.status-preparing { border-color: #5d501c; color: #f3d968; background: #2d290f; }
.status-ready { border-color: #28543a; color: #8ee0a9; background: #142b1e; }
.status-served { border-color: #343a37; color: #b8c2bd; background: #1b1f1d; }
.status-cancelled { border-color: #5b2825; color: #ff8982; background: #311716; }
.live-indicator { color: var(--success); }
.live-indicator::before { background: var(--success); box-shadow: 0 0 0 4px rgb(135 212 94 / 11%); }
.mini-table { border-color: #292c2c; background: #0e1010; }
.mini-table.busy { border-color: #614019; background: #21170d; }
.mini-table.ready { border-color: #28513a; background: #10231a; }

.segmented-control, .management-tabs { border-color: #303333; background: #111313; }
.segmented-control button, .management-tabs button { color: var(--muted); }
.segmented-control button.active, .management-tabs button.active { color: #101111; background: var(--primary); }
.dot-free { background: #777c7a; }
.dot-busy { background: var(--primary); }
.dot-ready { background: var(--success); }
.table-card { border-color: #2a2d2d; background: #111313; }
.table-card:hover { border-color: #664115; box-shadow: 0 14px 42px rgb(0 0 0 / 35%); }
.table-card .table-seats { color: var(--muted); background: #1d2020; }
.table-card.busy { border-color: #604018; background: linear-gradient(150deg, #19140e, #121414); }
.table-card.ready { border-color: #28543a; background: linear-gradient(150deg, #101d17, #121414); }
.draft-badge { width: fit-content; margin-top: 12px; padding: 4px 7px; border: 1px dashed #6c4519; border-radius: 6px; color: #ffae50; font-size: .63rem; font-weight: 850; }

dialog { color: var(--text); }
dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(5px); }
.order-dialog, .form-dialog { border: 1px solid #313434; background: #111313; }
.search-field { border-color: var(--outline); background: #0d0f0f; }
.chip { border-color: var(--outline); color: var(--muted); background: #111313; }
.chip.active { border-color: var(--primary); color: #111; background: var(--primary); }
.menu-item-card { border-color: #2d3030; color: var(--text); background: #111313; }
.menu-item-card:hover { border-color: #6b4518; background: #17140f; }
.menu-item-card .price { color: var(--primary); }
.add-circle { color: #111; background: var(--primary); }
.cart-panel { border-left-color: #2b2e2e; background: #0c0e0e; }
.count-badge { color: var(--primary); background: var(--primary-container); }
.empty-state > span { color: #696e6c; }
.empty-state strong { color: #d6d9d7; }
.cart-item { border-bottom-color: #272a2a; }
.quantity-control button, .item-note-input { color: var(--text); background: #181a1a; }

.kitchen-page { background: transparent; }
.kitchen-column { border: 1px solid #262929; background: #0e1010; }
.status-icon.new { color: var(--primary); }
.status-icon.preparing { color: #f5d35f; }
.status-icon.ready { color: var(--success); }
.column-count { color: var(--muted); background: #1c1f1f; }
.ticket { border-color: #2b2e2e; background: #141616; }
.ticket.urgent { border-color: #84403b; box-shadow: 0 0 0 2px rgb(255 103 94 / 8%); }
.ticket-header { border-bottom-color: #303333; }
.ticket-number { border-radius: 9px; color: #111; background: var(--primary); }
.ticket-time, .ticket-item .station-tag { color: var(--muted); background: #202323; }
.urgent .ticket-time { color: #ff958e; background: var(--danger-container); }
.ticket-item .quantity { color: var(--primary); }
.ticket-item.item-ready > strong { color: #91dca9; }
.ticket-item.item-ready > strong::after { color: var(--success); content: "  ✓"; }
.ticket-item-note { color: #ffad58; }
.ticket-note { color: #ffc17c; background: #2c1d0d; }
.kitchen-empty { color: var(--muted); }

.management-panel { background: #111313; }
.admin-row { border-bottom-color: #252828; }
.availability.on { color: #8ee0a9; background: #142b1e; }
.availability.off { color: #ff8e87; background: #311716; }
.management-search { width: min(310px, 100%); }

.toast { color: #111; background: var(--primary); }
.toast.error { color: #fff; background: #a83832; }

/* Searchable order history */
.history-filters {
    display: grid;
    grid-template-columns: auto 150px 150px minmax(170px, .55fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
}
.history-presets { align-self: end; }
.history-search { height: 50px; }
.history-summary { margin-bottom: 20px; }
.history-summary .metric-card { min-height: 130px; }
.history-summary .metric-card strong { margin-top: 15px; font-size: clamp(1.55rem, 2.6vw, 2.15rem); }
.history-results { overflow: hidden; }
.result-count { color: var(--muted); font-size: .75rem; font-weight: 750; }
.history-list { min-height: 90px; transition: opacity .15s; }
.history-list.is-refreshing { opacity: .55; }
.history-row {
    display: grid;
    width: 100%;
    grid-template-columns: 52px minmax(130px, 1fr) minmax(160px, .9fr) auto auto 22px;
    align-items: center;
    gap: 14px;
    padding: 14px 6px;
    border: 0;
    border-bottom: 1px solid #252828;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .15s, padding .15s;
}
.history-row:last-child { border-bottom: 0; }
.history-row:hover { padding-inline: 12px; background: #171919; }
.history-main, .history-person { display: grid; }
.history-main strong, .history-person strong { font-size: .86rem; }
.history-main small, .history-person small { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.history-total { text-align: right; white-space: nowrap; }
.history-arrow { color: var(--primary); font-size: 1.1rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 20px; }
.pagination > span { color: var(--muted); font-size: .74rem; }
.order-detail-dialog { width: min(670px, calc(100% - 28px)); }
.detail-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 20px; }
.detail-meta > span { display: grid; gap: 5px; padding: 11px; border: 1px solid #292c2c; border-radius: 9px; background: #0c0e0e; }
.detail-meta small { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.detail-meta strong { font-size: .75rem; }
.detail-items { display: grid; }
.detail-items > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 3px; border-bottom: 1px solid #282b2b; }
.detail-items span { display: grid; gap: 4px; }
.detail-items span strong { font-size: .84rem; }
.detail-items small { color: var(--muted); font-size: .68rem; }
.detail-note { margin: 16px 0 0; padding: 12px; border-radius: 9px; color: #ffc17d; background: #2b1d0e; font-size: .75rem; }
.detail-total { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; }
.detail-total span { color: var(--muted); }
.detail-total strong { color: var(--primary); font-size: 1.55rem; }

@media (max-width: 1280px) {
    .operations-strip { grid-template-columns: minmax(230px, 1.2fr) repeat(4, minmax(105px, .7fr)); }
    .pulse-divider { display: none; }
    .history-filters { grid-template-columns: repeat(4, 1fr); }
    .history-presets { grid-column: 1 / -1; }
    .history-search { grid-column: span 2; }
}

@media (max-width: 900px) {
    .operations-strip { grid-template-columns: repeat(2, 1fr); }
    .pulse-score { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid #292c2c; }
    .history-row { grid-template-columns: 48px minmax(110px, 1fr) auto auto; }
    .history-person, .history-arrow { display: none; }
    .detail-meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .mobile-header { border-bottom-color: #252828; background: rgb(9 10 10 / 94%); }
    .bottom-nav { border-top-color: #292c2c; background: rgb(9 10 10 / 96%); }
    .bottom-nav a { color: var(--muted); }
    .bottom-nav a.active { color: var(--primary); background: var(--primary-container); }
    .mobile-header .brand strong { font-size: .78rem; }
}

@media (max-width: 640px) {
    .login-layout { background: #090a0a; }
    .login-brand { padding-bottom: 44px; }
    .login-brand h1 { font-size: clamp(2.2rem, 12vw, 3.45rem); }
    .login-card { border-top: 1px solid #242727; border-left: 0; background: #0d0f0f; }
    .brand-lockup-large .brand-mark { width: 57px; height: 57px; }
    .brand-lockup strong { font-size: 1.15rem; }
    .brand-lockup em { font-size: 1.45rem; }
    .operations-strip { grid-template-columns: 1fr 1fr; gap: 15px; padding: 16px; }
    .pulse-stat { align-items: flex-start; }
    .history-filters { grid-template-columns: 1fr 1fr; }
    .history-presets { grid-column: 1 / -1; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .history-presets button { flex: 0 0 auto; padding-inline: 12px; }
    .history-status, .history-search { grid-column: 1 / -1; }
    .history-filters > .button { grid-column: 1 / -1; }
    .history-results { padding: 16px; }
    .history-row { grid-template-columns: 43px minmax(0, 1fr) auto; gap: 9px; }
    .history-row .status-badge { display: none; }
    .history-total { font-size: .8rem; }
    .detail-meta { grid-template-columns: 1fr 1fr; }
    .pagination { justify-content: space-between; gap: 6px; }
    .pagination .button { padding-inline: 10px; font-size: .72rem; }
    .management-search { width: 100%; margin-top: 16px; }
}

/* Kitchen production display */
.kitchen-page .kitchen-header { margin-bottom: 16px; }
.kitchen-page .kitchen-header h1 { margin-bottom: 5px; }
.kitchen-page .header-actions .button { min-height: 46px; }
.kitchen-page .header-actions .button.is-active { border-color: #8a571a; color: #111; background: var(--primary); }
.kitchen-alert-bar {
    display: grid;
    grid-template-columns: minmax(150px, auto) repeat(4, minmax(88px, auto)) minmax(150px, 1fr);
    align-items: center;
    gap: 0;
    min-height: 72px;
    margin-bottom: 16px;
    padding: 9px 14px;
    border: 1px solid #303333;
    border-radius: var(--radius-md);
    background: linear-gradient(100deg, #17130d, #111313 42%);
    box-shadow: 0 12px 36px rgb(0 0 0 / 22%);
}
.sync-pill { display: inline-flex; width: fit-content; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #353939; border-radius: 999px; color: #c8ccca; background: #191c1b; font-size: .75rem; font-weight: 850; white-space: nowrap; }
.sync-pill i { width: 9px; height: 9px; border-radius: 50%; background: #989d9b; }
.sync-pill.online { border-color: #28543a; color: #9ce1b2; background: #13271b; }
.sync-pill.online i { background: #6ede93; box-shadow: 0 0 0 5px rgb(110 222 147 / 10%); animation: live-pulse 1.8s ease infinite; }
.sync-pill.offline { border-color: #743631; color: #ff9891; background: #321817; }
.sync-pill.offline i { background: #ff675e; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 8px rgb(110 222 147 / 2%); } }
.kitchen-alert-metric { display: grid; min-height: 48px; align-content: center; padding: 0 18px; border-left: 1px solid #2f3232; text-align: center; }
.kitchen-alert-metric strong { color: #ffb35b; font-size: 1.55rem; line-height: 1; }
.kitchen-alert-metric span { margin-top: 5px; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kitchen-alert-metric.preparing strong { color: #f1d368; }
.kitchen-alert-metric.ready strong { color: #8ee0a9; }
.kitchen-alert-metric.urgent strong { color: #ff8179; }
.kitchen-alert-bar.has-urgent { border-color: #71342f; box-shadow: 0 0 0 2px rgb(255 103 94 / 6%), 0 14px 40px rgb(0 0 0 / 28%); }
.kitchen-alert-bar > small { justify-self: end; color: #747977; font-size: .67rem; }

.kitchen-live-alert {
    position: fixed;
    z-index: 95;
    top: 24px;
    right: 24px;
    display: grid;
    width: min(470px, calc(100% - 32px));
    grid-template-columns: 52px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid #8a571a;
    border-radius: 15px;
    color: #111;
    background: #ff9418;
    box-shadow: 0 24px 80px rgb(0 0 0 / 48%);
    animation: kitchen-alert-in .25s ease-out;
}
.kitchen-live-alert[hidden] { display: none; }
.kitchen-live-alert.urgent, .kitchen-live-alert.offline { border-color: #a33c35; color: #fff; background: #a8332d; }
.kitchen-live-alert > span:nth-child(2) { display: grid; gap: 4px; }
.kitchen-live-alert strong { font-size: .98rem; }
.kitchen-live-alert small { color: currentColor; font-size: .74rem; opacity: .82; }
.kitchen-live-alert .icon-button { color: currentColor; }
.live-alert-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 1.35rem; font-weight: 950; }
@keyframes kitchen-alert-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } }

.kitchen-column { position: relative; }
.kitchen-column.has-urgent { border-color: #64302c; }
.kitchen-page .ticket { position: relative; }
.ticket-alert-flag { padding: 6px 14px; color: #171008; background: var(--primary); font-size: .64rem; font-weight: 950; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.ticket-alert-flag.warning { background: #f1d368; }
.ticket-alert-flag.urgent { color: #fff; background: #b84038; }
.ticket-alert-flag.critical { color: #fff; background: #e34c43; animation: critical-pulse 1.2s ease infinite; }
.ticket.warning { border-color: #6c5a1d; box-shadow: 0 0 0 2px rgb(241 211 104 / 6%); }
.ticket.urgent { border-color: #8b403a; box-shadow: 0 0 0 2px rgb(255 103 94 / 9%); }
.ticket.critical { border-color: #e34c43; box-shadow: 0 0 0 3px rgb(227 76 67 / 12%), 0 16px 38px rgb(0 0 0 / 35%); }
.ticket.new-ticket { border-color: #b76d13; box-shadow: 0 0 0 3px rgb(255 138 0 / 12%), 0 16px 38px rgb(0 0 0 / 32%); animation: new-ticket-in .35s ease-out; }
.ticket.warning .ticket-time { color: #f4dc77; background: #302a10; }
.ticket.urgent .ticket-time, .ticket.critical .ticket-time { color: #ffa19a; background: #351918; }
@keyframes critical-pulse { 50% { background: #a72b26; } }
@keyframes new-ticket-in { from { opacity: .45; transform: translateY(-8px); } }
.kitchen-page .ticket-footer .button { min-height: 52px; font-size: .8rem; }
.kitchen-empty > div { display: grid; gap: 5px; place-items: center; }
.kitchen-empty strong { color: #c5cac7; font-size: .82rem; }
.kitchen-empty small { color: #707573; font-size: .68rem; }

body.kitchen-display-mode .sidebar,
body.kitchen-display-mode .mobile-header,
body.kitchen-display-mode .bottom-nav { display: none !important; }
body.kitchen-display-mode .main-content { margin-left: 0; padding-bottom: 0; }
body.kitchen-display-mode .kitchen-page { width: 100%; max-width: none; padding: 18px 22px 22px; }
body.kitchen-display-mode .kitchen-alert-bar { position: sticky; z-index: 20; top: 10px; }
body.kitchen-display-mode .kitchen-live-alert { top: 18px; right: 50%; transform: translateX(50%); }

@media (min-width: 1500px) {
    .kitchen-page { padding: 26px 30px 30px; }
    .kitchen-page .kitchen-header { align-items: center; }
    .kitchen-page .kitchen-header h1 { font-size: 2.65rem; }
    .kitchen-alert-bar { min-height: 82px; margin-bottom: 20px; }
    .kitchen-alert-metric strong { font-size: 1.8rem; }
    .kitchen-board { gap: 18px; }
    .kitchen-column { display: flex; height: calc(100vh - 245px); min-height: 520px; flex-direction: column; padding: 15px; }
    .kitchen-column > header { flex: 0 0 auto; }
    .ticket-list { min-height: 0; overflow-y: auto; padding: 2px 5px 8px 2px; scrollbar-color: #414545 transparent; }
    .ticket-table strong { font-size: 1.05rem; }
    .ticket-item > strong { font-size: .93rem; }
    .ticket-item-note, .ticket-note { font-size: .74rem; }
}

@media (min-width: 2200px) {
    .kitchen-page { padding: 34px 42px; }
    .kitchen-page .kitchen-header h1 { font-size: 3.2rem; }
    .kitchen-page .kitchen-header p { font-size: 1.05rem; }
    .kitchen-alert-bar { min-height: 96px; }
    .sync-pill { font-size: .9rem; }
    .kitchen-alert-metric strong { font-size: 2.25rem; }
    .kitchen-alert-metric span, .kitchen-alert-bar > small { font-size: .78rem; }
    .kitchen-column { height: calc(100vh - 290px); padding: 20px; }
    .kitchen-column h2 { font-size: 1.2rem; }
    .ticket-header { padding: 20px; }
    .ticket-number { width: 48px; height: 48px; font-size: .9rem; }
    .ticket-table strong { font-size: 1.25rem; }
    .ticket-table small, .ticket-time { font-size: .82rem; }
    .ticket-items { gap: 12px; padding: 18px 20px; }
    .ticket-item > strong { font-size: 1.08rem; }
    .kitchen-page .ticket-footer .button { min-height: 62px; font-size: .95rem; }
}

@media (min-width: 821px) and (max-width: 1250px) {
    .kitchen-page { padding-inline: 22px; }
    .kitchen-header { align-items: flex-start; }
    .kitchen-header .header-actions { max-width: 560px; }
    .kitchen-alert-bar { grid-template-columns: auto repeat(4, 1fr); }
    .kitchen-alert-bar > small { display: none; }
    .kitchen-alert-metric { padding-inline: 10px; }
    .kitchen-board { grid-template-columns: 1fr; overflow: visible; }
    .kitchen-column { min-height: 190px; }
    .kitchen-column .ticket-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 820px) {
    .kitchen-alert-bar { grid-template-columns: repeat(4, 1fr); gap: 0; margin-inline: -2px; }
    .sync-pill { grid-column: 1 / -1; margin-bottom: 10px; }
    .kitchen-alert-metric { padding-inline: 5px; }
    .kitchen-alert-metric:first-of-type { border-left: 0; }
    .kitchen-alert-bar > small { display: none; }
    .kitchen-live-alert { top: 82px; right: 16px; }
    .kitchen-header .header-actions .button { flex: 1 1 160px; min-height: 50px; }
}

@media (max-width: 520px) {
    .kitchen-page { padding-inline: 12px; }
    .kitchen-alert-bar { padding: 10px 7px; }
    .kitchen-alert-metric strong { font-size: 1.3rem; }
    .kitchen-alert-metric span { font-size: .55rem; }
    .kitchen-live-alert { grid-template-columns: 42px minmax(0, 1fr) 36px; gap: 9px; padding: 11px; }
    .live-alert-icon { width: 40px; height: 40px; }
}

/* Public marketing and account access */
.login-page { padding-top: 84px; }
.marketing-header {
    position: fixed;
    z-index: 80;
    inset: 0 0 auto;
    display: flex;
    min-height: 84px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 14px clamp(22px, 5vw, 76px);
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    background: rgb(7 8 8 / 90%);
    backdrop-filter: blur(20px);
}
.marketing-header nav { display: flex; align-items: center; gap: 22px; color: #c1c5c3; font-size: .84rem; font-weight: 750; }
.marketing-header nav > a:not(.button):hover { color: var(--primary); }
.marketing-header .brand-lockup strong { font-size: 1rem; }
.marketing-header .brand-lockup em { font-size: 1.2rem; }
.marketing-page { overflow: hidden; }
.marketing-hero {
    position: relative;
    display: grid;
    min-height: calc(100vh - 84px);
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: clamp(50px, 7vw, 120px);
    padding: clamp(70px, 9vw, 130px) clamp(24px, 7vw, 110px);
    background:
        radial-gradient(circle at 20% 20%, rgb(255 138 0 / 15%), transparent 27rem),
        radial-gradient(circle at 90% 84%, rgb(255 138 0 / 8%), transparent 24rem),
        #070808;
}
.marketing-hero::before {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to right, black, transparent 72%);
    pointer-events: none;
    content: "";
}
.hero-copy { position: relative; z-index: 1; }
.hero-copy > .brand-lockup { display: none; }
.hero-copy h1 { max-width: 800px; font-size: clamp(3rem, 6.3vw, 7rem); line-height: .88; letter-spacing: -.065em; }
.hero-copy h1 span { color: var(--primary); }
.hero-copy .login-lead { max-width: 660px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-dashboard {
    position: relative;
    z-index: 1;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid #353838;
    border-radius: 24px;
    background: linear-gradient(145deg, rgb(24 26 26 / 96%), rgb(10 11 11 / 98%));
    box-shadow: 0 45px 100px rgb(0 0 0 / 55%), 0 0 80px rgb(255 138 0 / 8%);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
.hero-dashboard::before { position: absolute; inset: -1px; border: 1px solid rgb(255 138 0 / 22%); border-radius: inherit; transform: translate(15px, 15px); content: ""; pointer-events: none; }
.hero-dashboard-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #303333; color: var(--muted); font-size: .78rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.hero-dashboard-top strong { color: var(--text); font-size: 1.4rem; }
.hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-block: 22px; }
.hero-metrics span { display: grid; gap: 4px; padding: 16px; border: 1px solid #2c2f2f; border-radius: 12px; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.hero-metrics strong { color: #8ee565; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.hero-metrics .urgent strong { color: #ff675e; }
.hero-tickets { display: grid; gap: 10px; }
.hero-tickets span { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 11px; padding: 15px; border: 1px solid #292c2c; border-radius: 11px; background: #111313; font-size: .82rem; }
.hero-tickets i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 13px var(--primary); }
.hero-tickets b { color: var(--primary); }
.marketing-section { padding: clamp(80px, 10vw, 150px) clamp(24px, 7vw, 110px); background: #0d0f0f; }
.section-intro { display: grid; max-width: 930px; margin-bottom: 50px; }
.section-intro h2, .marketing-benefits h2, .marketing-cta h2 { font-size: clamp(2rem, 4.8vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.section-intro > p:last-child { max-width: 660px; color: var(--muted); font-size: 1.05rem; }
.marketing-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.marketing-card-grid article { min-height: 280px; padding: 30px; border: 1px solid #2a2d2d; border-radius: 16px; background: linear-gradient(145deg, #151717, #101111); }
.marketing-card-grid article > span { display: inline-grid; width: 42px; height: 42px; place-items: center; margin-bottom: 62px; border: 1px solid #5b3710; border-radius: 50%; color: var(--primary); font-size: .75rem; font-weight: 900; }
.marketing-card-grid h3 { font-size: 1.35rem; text-transform: uppercase; }
.marketing-card-grid p { color: var(--muted); }
.marketing-benefits { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding: clamp(80px, 10vw, 145px) clamp(24px, 9vw, 145px); background: linear-gradient(130deg, #080909 40%, #17120c); }
.marketing-benefits ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.marketing-benefits li { position: relative; padding: 22px 10px 22px 48px; border-bottom: 1px solid #30302e; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.marketing-benefits li::before { position: absolute; left: 5px; color: var(--primary); font-size: 1.45rem; content: "✓"; }
.marketing-cta { display: grid; justify-items: center; padding: clamp(85px, 11vw, 160px) 24px; text-align: center; background: #0d0f0f; }
.marketing-cta h2 { max-width: 970px; }
.marketing-cta > p:not(.eyebrow) { max-width: 650px; color: var(--muted); }
.marketing-cta .button { margin-top: 18px; }
.portal-layout { display: grid; min-height: calc(100vh - 84px); grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr); }
.portal-brand { display: flex; flex-direction: column; justify-content: center; padding: clamp(45px, 8vw, 120px); background: radial-gradient(circle at 18% 18%, rgb(255 138 0 / 16%), transparent 26rem), #080909; }
.portal-brand h1 { max-width: 760px; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .9; }
.portal-brand h1 span { color: var(--primary); }
.portal-brand > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 1.08rem; }
.portal-brand .text-link { margin-top: 24px; }
.portal-layout .login-card { min-height: calc(100vh - 84px); padding-block: 55px; overflow-y: auto; }
.portal-switch { margin: 0; color: var(--muted); font-size: .9rem; text-align: center; }
.portal-switch a, .generate-password { color: var(--primary); font-weight: 850; }
.privacy-note { margin: -4px 0 0; padding: 12px 14px; border-left: 2px solid var(--primary); color: var(--muted); background: #121414; font-size: .76rem; }
.admin-access-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #343737; border-radius: 12px; background: #111313; }
.admin-access-note > span { color: var(--primary); }
.admin-access-note p { display: grid; gap: 2px; margin: 0; color: var(--muted); font-size: .8rem; }
.admin-access-note strong { color: var(--text); }
.security-note { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 15px 17px; border: 1px solid #40321f; border-radius: 12px; background: #1c160f; }
.security-note > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #111; background: var(--primary); }
.security-note p { display: grid; gap: 2px; margin: 0; color: var(--muted); font-size: .78rem; }
.security-note strong { color: var(--text); }
.pending-user { border-color: #59401f; background: linear-gradient(90deg, rgb(255 138 0 / 6%), transparent); }
.availability.pending { color: #ffbe6e; background: #35250f; }
.row-actions { flex-wrap: wrap; }
.generate-password { width: max-content; padding: 6px 0; border: 0; background: none; cursor: pointer; font-size: .76rem; }
.generate-password:hover { color: var(--primary-hover); }
.field-help { color: var(--muted); font-size: .72rem; line-height: 1.4; }

@media (max-width: 980px) {
    .marketing-header nav > a:not(.button) { display: none; }
    .marketing-hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-copy { max-width: 760px; }
    .hero-dashboard { max-width: 720px; transform: none; }
    .marketing-card-grid { grid-template-columns: 1fr; }
    .marketing-card-grid article { min-height: auto; }
    .marketing-card-grid article > span { margin-bottom: 28px; }
    .marketing-benefits { grid-template-columns: 1fr; gap: 30px; }
    .portal-layout { grid-template-columns: minmax(300px, .8fr) minmax(390px, 1.2fr); }
}

@media (max-width: 700px) {
    .login-page { padding-top: 70px; }
    .marketing-header { min-height: 70px; padding-inline: 17px; }
    .marketing-header nav { gap: 7px; }
    .marketing-header nav .button { min-height: 38px; padding-inline: 12px; font-size: .72rem; }
    .marketing-header nav .button-tonal { display: none; }
    .marketing-header .brand-mark { width: 36px; height: 36px; }
    .marketing-hero { min-height: calc(100svh - 70px); padding-block: 58px 72px; }
    .hero-copy h1 { font-size: clamp(2.8rem, 14vw, 4.7rem); }
    .hero-actions { display: grid; }
    .hero-actions .button { width: 100%; }
    .hero-dashboard { padding: 17px; }
    .hero-dashboard::before { display: none; }
    .hero-metrics { grid-template-columns: 1fr 1fr; }
    .hero-metrics span:last-child { grid-column: 1 / -1; }
    .hero-tickets span { font-size: .72rem; }
    .marketing-benefits { padding-inline: 24px; }
    .portal-layout { display: block; min-height: calc(100svh - 70px); }
    .portal-brand { min-height: 270px; padding: 42px 24px; }
    .portal-brand h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
    .portal-layout .login-card { min-height: auto; padding: 38px 24px 54px; border-top: 1px solid #242727; border-left: 0; }
    .admin-row.pending-user { gap: 12px; }
    .admin-row.pending-user .row-actions { width: 100%; }
    .admin-row.pending-user .row-actions .button { flex: 1; }
}

/* Zones, payment workflow and traceability */
.status-occupied { border-color: #3d4141; color: #c4c9c7; background: #202323; }
.status-closed { border-color: #28543a; color: #9fe67e; background: #13261a; }
.table-card.occupied { border-color: #444949; background: linear-gradient(150deg, #181a1a, #121414); }
.table-card.payment { border-color: #7a5422; background: linear-gradient(150deg, #21180d, #121414); }
.service-ready-alert {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #39724d;
    border-radius: 14px;
    background: linear-gradient(100deg, #153221, #111a15);
    box-shadow: 0 14px 35px rgb(0 0 0 / 26%);
}
.service-ready-alert[hidden] { display: none; }
.service-ready-alert > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: #101510; background: var(--success); font-size: 1.35rem; font-weight: 950; }
.service-ready-alert p { display: grid; gap: 3px; margin: 0; }
.service-ready-alert strong { font-size: 1rem; }
.service-ready-alert small { color: #b9c9bf; }
.connection-banner {
    position: fixed;
    z-index: 120;
    right: 22px;
    bottom: 22px;
    display: flex;
    width: min(440px, calc(100% - 32px));
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #8f3934;
    border-radius: 14px;
    color: #fff;
    background: #8e2e29;
    box-shadow: 0 20px 60px rgb(0 0 0 / 42%);
}
.connection-banner[hidden] { display: none; }
.connection-banner > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 950; }
.connection-banner p { display: grid; gap: 2px; margin: 0; }
.connection-banner small { color: #ffd5d2; font-size: .72rem; }
body.is-offline .toast-region { bottom: 104px; }

.admin-fullscreen-exit {
    position: fixed;
    z-index: 125;
    top: max(16px, env(safe-area-inset-top));
    right: 18px;
    min-height: 46px;
    padding: 10px 17px;
    border: 1px solid #b56b14;
    border-radius: 999px;
    color: #171008;
    background: var(--primary);
    box-shadow: 0 14px 40px rgb(0 0 0 / 42%);
    cursor: pointer;
    font-weight: 850;
}
.admin-fullscreen-exit[hidden] { display: none; }
body.admin-fullscreen-mode .sidebar,
body.admin-fullscreen-mode .mobile-header,
body.admin-fullscreen-mode .bottom-nav { display: none !important; }
body.admin-fullscreen-mode .main-content { margin-left: 0; padding-bottom: 0; }
body.admin-fullscreen-mode .page { width: 100%; max-width: none; padding-top: 76px; }

.button.is-busy, .button.is-pending { pointer-events: none; opacity: .62; }
.kitchen-page .header-actions .button.needs-attention { border: 1px solid #b66b12; box-shadow: 0 0 0 4px rgb(255 138 0 / 8%); animation: sound-attention 1.8s ease-in-out infinite; }
@keyframes sound-attention { 50% { box-shadow: 0 0 0 8px rgb(255 138 0 / 2%); } }
.kitchen-live-alert.critical { border-color: #ff6a61; color: #fff; background: #c8312b; animation: kitchen-alert-in .25s ease-out, critical-alert-pulse 1.2s ease-in-out infinite; }
@keyframes critical-alert-pulse { 50% { box-shadow: 0 24px 90px rgb(199 49 43 / 52%); } }
.live-alert-dismiss { min-width: 76px; min-height: 42px; padding-inline: 13px; border: 1px solid rgb(0 0 0 / 25%); color: currentColor; background: rgb(255 255 255 / 22%); font-size: .75rem; }
.kitchen-live-alert { grid-template-columns: 52px minmax(0, 1fr) auto; }
.audit-timeline { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--outline); }
.audit-timeline h3 { margin-bottom: 14px; text-transform: uppercase; }
.audit-timeline > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.audit-timeline i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgb(255 138 0 / 40%); }
.audit-timeline span { display: grid; gap: 3px; }
.audit-timeline small { color: var(--muted); line-height: 1.45; }
.settings-form { display: grid; max-width: 760px; gap: 22px; }
.workspace-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.workspace-summary span { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--outline); border-radius: 12px; color: var(--muted); font-size: .78rem; background: #0d0f0f; }
.workspace-summary strong { color: var(--text); font-size: .9rem; }

@media (max-width: 640px) {
    .service-ready-alert { grid-template-columns: 42px minmax(0, 1fr) 36px; padding: 12px; }
    .service-ready-alert > span { width: 40px; height: 40px; }
    .workspace-summary { grid-template-columns: 1fr; }
    .connection-banner { right: 12px; bottom: calc(var(--bottom-nav-height) + 10px); width: calc(100% - 24px); }
    body.is-offline .toast-region { bottom: calc(var(--bottom-nav-height) + 100px); }
    .live-alert-dismiss { min-width: 68px; padding-inline: 10px; }
    .kitchen-live-alert { grid-template-columns: 42px minmax(0, 1fr) auto; }
}

/* Final page-level presentation overrides */
.marketing-page .marketing-hero { isolation: isolate; padding: clamp(84px, 10vw, 145px) clamp(24px, 7vw, 110px); background: radial-gradient(circle at 77% 42%, rgb(255 138 0 / 12%), transparent 21rem), radial-gradient(circle at 15% 12%, rgb(255 138 0 / 16%), transparent 26rem), #070808; }
.marketing-page .marketing-hero::after { position: absolute; z-index: -1; right: -20vw; bottom: -37vw; width: min(78vw, 980px); aspect-ratio: 1; border: 1px solid rgb(255 138 0 / 15%); border-radius: 50%; box-shadow: inset 0 0 100px rgb(255 138 0 / 4%), 0 0 130px rgb(255 138 0 / 4%); content: ""; }
.marketing-page .hero-copy { max-width: 760px; }
.marketing-page .hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.marketing-page .hero-copy .eyebrow::before { width: 28px; height: 1px; background: var(--primary); content: ""; }
.marketing-page .hero-copy .login-lead { max-width: 610px; font-size: clamp(1rem, 1.55vw, 1.15rem); line-height: 1.6; }
.marketing-page .hero-dashboard { overflow: hidden; border-color: #3f3427; }
.marketing-page .hero-dashboard::after { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgb(255 138 0 / 4%)); content: ""; pointer-events: none; }
.marketing-page .hero-dashboard-top span { display: inline-flex; align-items: center; gap: 8px; }
.marketing-page .hero-dashboard-top span i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgb(135 212 94 / 10%); }
.marketing-page .hero-metrics span { position: relative; z-index: 1; gap: 5px; }
.marketing-page .hero-metrics small { color: #747a77; font-size: .61rem; letter-spacing: 0; text-transform: none; }
.marketing-page .hero-tickets { position: relative; z-index: 1; }
.marketing-page .marketing-card-grid article { position: relative; overflow: hidden; display: flex; min-height: 306px; flex-direction: column; border-color: #323535; transition: border-color .2s, transform .2s, box-shadow .2s; }
.marketing-page .marketing-card-grid article::after { position: absolute; right: -38px; bottom: -46px; width: 136px; height: 136px; border: 1px solid rgb(255 138 0 / 14%); border-radius: 50%; content: ""; }
.marketing-page .marketing-card-grid article:hover { border-color: #81521d; box-shadow: 0 20px 48px rgb(0 0 0 / 23%); transform: translateY(-4px); }
.marketing-page .marketing-card-grid article > span { margin-bottom: 43px; }
.marketing-page .marketing-card-grid article p { position: relative; z-index: 1; margin-bottom: 18px; }
.marketing-page .marketing-card-grid article small { position: relative; z-index: 1; margin-top: auto; color: #d2d5d3; font-size: .76rem; line-height: 1.5; }
.marketing-page .marketing-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 0, rgb(255 138 0 / 10%), transparent 27rem), #0d0f0f; }
.marketing-page .marketing-cta::before { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, black, transparent 74%); content: ""; pointer-events: none; }
.marketing-page .marketing-cta > * { position: relative; z-index: 1; }

.history-page .history-filters { grid-template-columns: minmax(112px, .6fr) auto 132px 132px minmax(160px, .75fr) minmax(145px, .65fr) minmax(220px, 1.2fr) auto; gap: 11px; padding: 17px; }
.history-page .history-filter-label { display: grid; align-self: center; gap: 3px; }
.history-page .history-filter-label > span { color: var(--text); font-size: .84rem; font-weight: 850; }
.history-page .history-filter-label small { color: var(--muted); font-size: .68rem; }
.history-page .history-summary { gap: 13px; margin: 18px 0; }
.history-page .history-summary .metric-card { min-height: 126px; padding: 19px; background: linear-gradient(145deg, #171919, #111313); }
.history-page .history-summary .metric-card::after { width: 74px; height: 74px; right: -20px; bottom: -25px; background: rgb(255 138 0 / 16%); }
.history-page .history-insights { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(480px, 1.15fr); gap: 16px; margin-bottom: 18px; }
.history-page .history-status-overview, .history-page .history-activity-card { min-height: 202px; padding: 20px; background: linear-gradient(145deg, #161818, #101111); }
.history-page .insight-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.history-page .insight-heading h2 { margin: 0; font-size: 1.05rem; }
.history-page .insight-heading .eyebrow { margin-bottom: 4px; font-size: .64rem; }
.history-page .insight-heading > small { padding-top: 3px; color: var(--muted); font-size: .69rem; text-align: right; }
.history-page .status-overview-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.history-page .history-status-stat { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 7px; padding: 8px; border: 1px solid #292c2c; border-radius: 10px; color: var(--text); background: #0d0f0f; cursor: pointer; text-align: left; }
.history-page .history-status-stat:hover, .history-page .history-status-stat.active { border-color: #805018; background: #1d1610; }
.history-page .history-status-stat .status-badge { padding: 4px 7px; font-size: .59rem !important; }
.history-page .history-status-stat strong { font-size: 1.06rem; }
.history-page .activity-chart { display: flex; height: 122px; align-items: end; gap: clamp(4px, 1vw, 11px); overflow: hidden; padding: 0 3px; }
.history-page .activity-bar-wrap { display: grid; min-width: 0; height: 100%; flex: 1 1 0; grid-template-rows: 17px minmax(0, 1fr) 18px; align-items: end; gap: 5px; }
.history-page .activity-value { color: #ccd0cd; font-size: .65rem; font-weight: 850; text-align: center; }
.history-page .activity-bar { display: block; width: 100%; height: var(--activity-height); min-height: 5px; border: 1px solid rgb(255 177 83 / 26%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ffad4a, #b96308); box-shadow: 0 7px 16px rgb(255 138 0 / 13%); }
.history-page .activity-bar-wrap small { overflow: hidden; color: var(--muted); font-size: .61rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.history-page .history-results { padding: 0; background: linear-gradient(145deg, #141616, #101111); }
.history-page .history-results-heading { align-items: center; margin: 0; padding: 22px 24px 15px; border-bottom: 1px solid #292c2c; }
.history-page .history-day > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 24px 10px; border-bottom: 1px solid #252828; color: #d7dad8; background: rgb(255 255 255 / 1%); }
.history-page .history-day > header strong { font-size: .78rem; text-transform: capitalize; }
.history-page .history-day > header span { color: var(--muted); font-size: .68rem; }
.history-page .history-row { grid-template-columns: 52px minmax(145px, 1fr) minmax(170px, .95fr) minmax(96px, .55fr) minmax(78px, .45fr) 22px; gap: 14px; min-height: 78px; padding: 13px 24px; border-bottom-color: #232626; }
.history-page .history-row:hover { padding-inline: 24px; background: linear-gradient(90deg, rgb(255 138 0 / 9%), transparent 80%); }
.history-page .history-row .order-number { width: 40px; height: 40px; border: 1px solid #59411f; border-radius: 11px; color: #ffc17c; background: #24170b; }
.history-page .history-total { color: #f3f3ef; font-size: .87rem; }

@media (max-width: 1320px) {
    .history-page .history-filters { grid-template-columns: minmax(110px, .65fr) auto 1fr 1fr 1fr 1fr; }
    .history-page .history-presets { grid-column: span 2; }
    .history-page .history-search { grid-column: span 2; }
    .history-page .history-insights { grid-template-columns: minmax(320px, .9fr) minmax(380px, 1.1fr); }
}
@media (max-width: 980px) {
    .history-page .history-insights, .security-layout { grid-template-columns: 1fr; }
    .history-page .history-filters { grid-template-columns: repeat(4, 1fr); }
    .history-page .history-presets { grid-column: span 3; }
    .history-page .history-search { grid-column: span 2; }
    .history-page .history-row { grid-template-columns: 52px minmax(130px, 1fr) minmax(96px, .6fr) auto 18px; }
    .history-page .history-person { display: none; }
}
@media (max-width: 700px) {
    .marketing-page .marketing-hero { min-height: calc(100svh - 70px); padding-block: 58px 72px; }
    .marketing-page .marketing-card-grid article { min-height: 230px; }
    .marketing-page .marketing-card-grid article > span { margin-bottom: 26px; }
}
@media (max-width: 640px) {
    .history-page .history-filters { grid-template-columns: 1fr 1fr; padding: 14px; }
    .history-page .history-filter-label, .history-page .history-presets, .history-page .history-search, .history-page .history-filters > .button { grid-column: 1 / -1; }
    .history-page .history-filter-label { display: none; }
    .history-page .history-presets { width: 100%; overflow-x: auto; }
    .history-page .history-presets button { flex: 0 0 auto; }
    .history-page .history-summary { grid-template-columns: 1fr 1fr; }
    .history-page .history-summary .metric-card { min-height: 112px; padding: 15px; }
    .history-page .status-overview-list { grid-template-columns: 1fr 1fr; }
    .history-page .history-status-overview, .history-page .history-activity-card { padding: 17px; }
    .history-page .activity-chart { gap: 5px; }
    .history-page .history-results-heading { padding: 19px 16px 13px; }
    .history-page .history-day > header { padding-inline: 16px; }
    .history-page .history-row { grid-template-columns: 43px minmax(0, 1fr) auto; min-height: 69px; gap: 9px; padding: 11px 16px; }
    .history-page .history-row:hover { padding-inline: 16px; }
    .history-page .history-row .order-number { width: 36px; height: 36px; font-size: .7rem; }
    .history-page .history-row .status-badge, .history-page .history-arrow { display: none; }
    .history-page .history-total { font-size: .79rem; }
}

/* Instant feedback when adding an item to an order */
.menu-item-card { position: relative; }
.menu-item-card.has-cart-quantity { border-color: #76501f; background: linear-gradient(145deg, #19160f, #121414); }
.menu-item-card.has-cart-quantity:hover { border-color: #b87723; background: linear-gradient(145deg, #21190d, #141515); }
.menu-add-control { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-right: 3px; }
.menu-add-count { position: absolute; z-index: 2; top: -9px; right: -9px; display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border: 2px solid #111313; border-radius: 50%; color: #fff; background: #e5484d; box-shadow: 0 4px 10px rgb(0 0 0 / 30%); font-size: .66rem; font-weight: 950; line-height: 1; }
.menu-add-count.is-new { animation: count-added .62s cubic-bezier(.2, .8, .25, 1); }
.menu-add-feedback { min-width: 0; color: #b7bdb9; font-size: .61rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.menu-item-card:not(.has-cart-quantity) .menu-add-feedback { display: none; }
.menu-item-card.has-cart-quantity .add-circle { color: #111; background: var(--primary); box-shadow: 0 0 0 4px rgb(255 138 0 / 11%); }
.menu-item-card.is-just-added { animation: item-added .34s ease-out; }
.menu-item-card.is-just-added .add-circle { animation: add-confirmation .75s ease-out; }
@keyframes item-added { 45% { border-color: #e39a3e; box-shadow: 0 0 0 4px rgb(255 138 0 / 10%); transform: translateY(-2px); } }
@keyframes add-confirmation { 35% { transform: scale(1.24) rotate(-8deg); } 70% { transform: scale(.94); } }
@keyframes count-added { 0% { opacity: 0; transform: scale(.45); } 55% { transform: scale(1.26); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 640px) {
    .menu-add-control { gap: 6px; }
    .menu-add-count { top: -8px; right: -7px; min-width: 19px; height: 19px; font-size: .6rem; }
    .menu-add-feedback { font-size: .56rem; }
}

/* Guided waiter order flow */
.order-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.order-dialog:not([open]) { display: none; }
.order-dialog-layout { height: auto; min-height: 0; }
.order-header { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #292c2c; background: #0d0f0f; }
.order-back-form { flex: 0 0 auto; margin: 0; }
.order-back { flex: 0 0 auto; }
.order-context { min-width: 0; }
.order-context .eyebrow { margin-bottom: 3px; }
.order-context h2 { margin: 0; font-size: 1.18rem; }
.order-draft-status { margin: 3px 0 0; color: var(--muted); font-size: .69rem; }
.order-navigation, .order-mobile-footer, .cart-back { display: none; }
.menu-panel, .cart-panel { min-height: 0; }
.search-field .icon-button { width: 34px; height: 34px; flex: 0 0 auto; }
.cart-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; padding: 10px 12px; border: 1px solid #5f431f; border-radius: 11px; color: #e9d7c0; background: #20170e; font-size: .72rem; }
.cart-undo[hidden] { display: none; }
.cart-undo button { flex: 0 0 auto; padding: 5px 7px; border: 0; color: var(--primary); background: transparent; cursor: pointer; font: inherit; font-weight: 900; }
.order-send-error { margin: 0; padding: 10px 12px; border: 1px solid #743936; border-radius: 10px; color: #ffd0cc; background: #2b1211; font-size: .72rem; line-height: 1.4; }
.order-send-error[hidden] { display: none; }
.order-success { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 38px; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #315d41; border-radius: 16px; background: linear-gradient(110deg, #102319, #121817); }
.order-success[hidden] { display: none; }
.order-success-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #0d160f; background: var(--success); font-size: 1.3rem; font-weight: 950; }
.order-success strong { display: block; color: #dcf3e4; font-size: .9rem; }
.order-success p { margin: 3px 0 0; color: #9fbaaa; font-size: .73rem; }

@media (max-width: 640px) {
    .order-dialog { width: 100%; height: calc(100dvh - 10px); grid-template-rows: auto auto minmax(0, 1fr) auto; margin: 10px 0 0; border-radius: 20px 20px 0 0; }
    .order-header { gap: 10px; padding: 11px 13px 9px; }
    .order-back { min-height: 39px; padding: 8px 11px; font-size: .69rem; }
    .order-context .eyebrow { font-size: .57rem; }
    .order-context h2 { overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
    .order-draft-status { overflow: hidden; max-width: 57vw; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
    .order-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #292c2c; background: #101212; }
    .order-navigation button { display: flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: .7rem; font-weight: 850; }
    .order-navigation button > span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #3c4040; border-radius: 50%; font-size: .61rem; }
    .order-navigation button > strong { min-width: 21px; padding: 3px 6px; border-radius: 999px; color: #111; background: var(--primary); font-size: .61rem; }
    .order-navigation button[aria-pressed="true"] { color: #17120c; background: var(--primary); }
    .order-navigation button[aria-pressed="true"] > span { border-color: #2a1a08; }
    .order-navigation button[aria-pressed="true"] > strong { color: var(--primary); background: #18120b; }
    .order-dialog-layout { display: block; min-height: 0; overflow: hidden; }
    .order-dialog .menu-panel, .order-dialog .cart-panel { display: none; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
    .order-dialog[data-order-step="menu"] .menu-panel { display: block; padding: 12px 13px 82px; }
    .order-dialog[data-order-step="cart"] .cart-panel { display: flex; min-height: 0; padding: 11px 14px 20px; border: 0; }
    .cart-back { display: inline-flex; width: fit-content; margin: 0 0 10px -7px; padding: 6px 7px; color: var(--primary); }
    .cart-heading { margin-bottom: 7px; }
    .cart-list { flex: 0 0 auto; overflow: visible; }
    .cart-panel .compact-field { margin-top: 12px; }
    .cart-footer { margin-top: auto; }
    .order-mobile-footer { display: none; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #292c2c; background: #0d0f0f; }
    .order-dialog[data-order-step="menu"] .order-mobile-footer { display: block; }
    .order-mobile-footer button { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 50px; align-items: center; gap: 10px; padding-inline: 16px; text-align: left; }
    .order-mobile-footer button > strong { color: #111; font-size: .82rem; }
    .order-success { grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 10px; padding: 12px; }
    .order-success-icon { width: 40px; height: 40px; }
    .order-success .button { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .order-success .icon-button { grid-column: 3; grid-row: 1; }
}

/* Service overview and dependable touch actions */
.service-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.service-sync-status { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #303434; border-radius: 999px; color: var(--muted); background: #111313; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.service-sync-status i { width: 8px; height: 8px; border-radius: 50%; background: #737a76; }
.service-sync-status.synced { border-color: #264a34; color: #a9c7b4; }
.service-sync-status.synced i { background: var(--success); box-shadow: 0 0 0 4px rgb(135 212 94 / 8%); }
.service-sync-status.checking i { background: var(--primary); animation: service-sync-pulse 1s ease-in-out infinite; }
.service-sync-status.reconnecting { border-color: #70412d; color: #ffb794; }
.service-sync-status.reconnecting i { background: var(--danger); animation: service-sync-pulse 1s ease-in-out infinite; }
@keyframes service-sync-pulse { 50% { opacity: .35; transform: scale(.76); } }

.service-toolbar { align-items: flex-end; }
.service-filter-group { display: grid; min-width: 0; gap: 7px; }
.service-status-group { margin-left: auto; justify-items: end; }
.service-filter-label { color: #7f8782; font-size: .61rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
#zoneFilters button { display: inline-flex; align-items: center; gap: 8px; }
#zoneFilters button strong { display: grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border-radius: 999px; color: #9ca39f; background: #242727; font-size: .62rem; }
#zoneFilters button.active strong { color: #1a1208; background: var(--primary); }
.service-status-filters { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.service-status-filters button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #303434; border-radius: 11px; color: #a7ada9; background: #111313; cursor: pointer; font: inherit; font-size: .69rem; font-weight: 800; transition: border-color .16s, color .16s, background .16s, transform .16s; }
.service-status-filters button:hover { border-color: #67451e; color: #f0f0eb; transform: translateY(-1px); }
.service-status-filters button.active { border-color: #865716; color: #fff0df; background: #2b1c0d; box-shadow: 0 0 0 3px rgb(255 138 0 / 7%); }
.service-status-filters button strong { display: grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 7px; color: #c2c7c4; background: #282b2b; font-size: .64rem; }
.service-status-filters button.active strong { color: #17110a; background: var(--primary); }
.dot-payment { background: #e6a044; }

.table-card { overflow: hidden; min-height: 174px; padding: 0; cursor: default; }
.table-card:hover { transform: translateY(-2px); }
.table-card:focus-within { border-color: #8b5a1e; box-shadow: 0 0 0 3px rgb(255 138 0 / 10%), var(--shadow-2); }
.table-card-main { display: flex; width: 100%; min-height: 172px; flex: 1; flex-direction: column; align-items: stretch; padding: 20px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
.table-card-main:hover { background: rgb(255 255 255 / 1.5%); }
.table-card-main:focus-visible { outline: 3px solid rgb(255 138 0 / 42%); outline-offset: -4px; }
.table-card-actions { display: grid; padding: 0 12px 12px; }
.table-card-actions::before { height: 1px; margin: 0 0 11px; background: #2c2f2f; content: ""; }
.table-card-actions .button { width: 100%; min-height: 42px; }
.table-filter-empty { grid-column: 1 / -1; min-height: 250px; }
.table-filter-empty .button { margin-top: 10px; }

:where(button, a, input, textarea, select) { touch-action: manipulation; }
.segmented-control button:focus-visible, .service-status-filters button:focus-visible, .order-navigation button:focus-visible, .cart-undo button:focus-visible { outline: 3px solid rgb(255 138 0 / 42%); outline-offset: 2px; }

.qr-settings-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 214px;
    gap: 18px;
    align-items: start;
    padding: 18px;
    border: 1px solid #2d3030;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #101212, #17110b);
}
.qr-settings-copy { display: grid; gap: 14px; }
.qr-settings-copy h3 { margin: -4px 0 0; font-size: 1.1rem; }
.qr-settings-copy .muted { max-width: 62ch; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-preview {
    display: grid;
    min-height: 214px;
    place-items: center;
    padding: 12px;
    border: 1px solid #363838;
    border-radius: 16px;
    background: #fff;
}
.qr-preview img { display: block; width: 100%; max-width: 190px; height: auto; }
.qr-disabled .qr-preview { opacity: .45; filter: grayscale(1); }

.public-menu-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 0%, rgb(255 138 0 / 14%), transparent 32rem),
        linear-gradient(180deg, #090a0a, #11100e 58%, #090a0a);
}
.public-menu-shell {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 64px;
}
.public-menu-hero {
    display: grid;
    gap: 13px;
    padding: 24px 0 30px;
    border-bottom: 1px solid #2d3030;
}
.public-menu-hero .brand-lockup { width: fit-content; }
.public-menu-hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.2rem, 8vw, 5.4rem);
    line-height: .95;
}
.public-menu-hero p:not(.eyebrow) {
    max-width: 660px;
    color: #b8bcb8;
    font-size: 1.05rem;
}
.public-menu-list { display: grid; gap: 26px; padding-top: 28px; }
.public-menu-category {
    display: grid;
    gap: 12px;
}
.public-menu-category h2 {
    margin: 0;
    color: var(--primary);
    font-size: .88rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.public-menu-items {
    display: grid;
    overflow: hidden;
    border: 1px solid #2c2f2f;
    border-radius: var(--radius-md);
    background: rgb(18 20 20 / 82%);
}
.public-menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 18px;
    border-top: 1px solid #282b2b;
}
.public-menu-item:first-child { border-top: 0; }
.public-menu-item h3 { margin: 0 0 5px; font-size: 1.02rem; }
.public-menu-item p { margin: 0; color: #a4aaa6; }
.public-menu-item strong { color: #fff1df; white-space: nowrap; }

@media (max-width: 900px) {
    .service-toolbar { display: grid; align-items: stretch; }
    .service-status-group { margin-left: 0; justify-items: stretch; }
    .service-status-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 2px 7px; scrollbar-width: thin; }
    .service-status-filters button { flex: 0 0 auto; }
}

@media (max-width: 640px) {
    .qr-settings-card { grid-template-columns: 1fr; }
    .qr-preview { min-height: 0; }
    .qr-preview img { max-width: 210px; }
    .public-menu-shell { width: min(100% - 22px, 980px); padding-top: 18px; }
    .public-menu-item { grid-template-columns: 1fr; gap: 8px; padding: 15px; }
    .service-page .compact-header { display: grid; gap: 13px; }
    .service-header-actions { width: 100%; justify-content: space-between; }
    .service-header-actions .button { min-height: 42px; margin: 0; }
    .service-sync-status { min-height: 42px; }
    .service-toolbar { gap: 14px; margin-bottom: 16px; }
    .service-filter-label { padding-left: 2px; }
    .service-status-filters { margin-inline: -2px; }
    .service-status-filters button { min-height: 44px; padding-inline: 11px; }
    .table-card { min-height: 152px; }
    .table-card-main { min-height: 150px; padding: 15px; }
    .table-card-actions { padding: 0 9px 9px; }
    .table-card-actions .button { min-height: 44px; padding-inline: 8px; font-size: .66rem; }
}