/* Warm editorial cafe theme based on the supplied reference. Visual overrides only. */
:root {
  --bg: #f5f1e7 !important;
  --panel: #fffdf8 !important;
  --panel2: #eee8dc !important;
  --gold: #af8848 !important;
  --gold-light: #d6c39a !important;
  --red: #a44f4b !important;
  --text: #183f30 !important;
  --muted: #70766c !important;
  --line: rgba(38, 67, 51, .17) !important;
  --forest-night: #f5f1e7 !important;
  --forest-deep: #183f30 !important;
  --forest-panel: #fffdf8 !important;
  --forest-panel-soft: #eee8dc !important;
  --forest-leaf: #244f3b !important;
  --forest-sage: #b28b4c !important;
  --forest-moss: #b28b4c !important;
  --forest-cream: #f5f1e7 !important;
  --forest-muted: #70766c !important;
  --radius: 5px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: #f5f1e7 !important; color: #183f30 !important; }
body {
  overflow-x: hidden;
  background: #f5f1e7 !important;
  background-image: none !important;
  color: #243d31 !important;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif !important;
  line-height: 1.55;
}
body::before {
  content: "GOOD FOOD  ·  WARM PEOPLE  ·  ALWAYS OPEN" !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  inset: auto !important;
  width: 100% !important;
  height: 34px !important;
  border-top: 5px solid #59373a;
  background: #183f30 !important;
  color: #f7f3e9 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: center;
  filter: none !important;
  opacity: 1 !important;
  z-index: 2;
}
body::after, .ambient, .ambient-one, .ambient-two { display: none !important; }
a { color: #183f30 !important; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #b28b4c !important;
  outline-offset: 3px !important;
}

.topbar {
  position: relative !important;
  z-index: 3;
  width: 100% !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 14px max(22px, calc((100vw - 1300px) / 2)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(38, 67, 51, .14) !important;
  border-radius: 0 !important;
  background: #f5f1e7 !important;
  box-shadow: none !important;
  align-items: center !important;
}
.brand { gap: 12px !important; color: #183f30 !important; text-decoration: none; }
.brand-mark {
  width: 46px !important; height: 46px !important;
  border: 1px solid #b28b4c !important; border-radius: 50% !important;
  background: transparent !important; color: #b28b4c !important;
  font: 27px Georgia, serif !important;
}
.brand > span:last-child { color: #183f30 !important; font: 700 20px Georgia, serif; letter-spacing: .12em; }
.brand small { margin-top: 3px; color: #73776c !important; font-size: 9px !important; letter-spacing: .21em !important; }
.brand-dot { color: #b28b4c !important; }
.header-clock {
  display: flex !important; align-items: flex-end !important; gap: 3px !important;
  min-width: 120px; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: #183f30 !important;
}
.clock-greeting { color: #70766c !important; font-size: 9px !important; letter-spacing: .12em; text-transform: uppercase; }
.digital-clock { color: #183f30 !important; font: 600 15px/1.15 "Segoe UI", Arial, sans-serif !important; letter-spacing: .02em; }
.digital-date { color: #70766c !important; font-size: 9px !important; }

.app-shell, .chef-shell {
  width: min(calc(100% - 40px), 1280px) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 0 70px !important;
}
.screen { padding: 40px 0 !important; animation: none !important; }
h1, h2, h3, h4, .panel-title {
  color: #183f30 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -.035em;
}
h1 { font-size: clamp(42px, 6vw, 76px) !important; font-weight: 500 !important; line-height: .99 !important; }
h1 em { color: #b28b4c !important; font-weight: 500 !important; }
h2 { font-size: clamp(27px, 4vw, 42px) !important; }
.step-label, .eyebrow { color: #a78349 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .22em !important; }
.muted, .small, .field-help, .microcopy { color: #70766c !important; }

/* Customer start screen: editorial copy and a photo beside the existing table form. */
#customer-step.active {
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "step art" "title art" "intro art" "form art" "active active" "micro micro";
  column-gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: 42px 0 54px !important;
}
#customer-step > .step-label { grid-area: step; align-self: end; margin: 0 0 15px !important; }
#welcome-title { grid-area: title; max-width: 560px; margin: 0 0 17px !important; }
#customer-step > .muted { grid-area: intro; max-width: 490px; margin: 0 0 7px; font-size: 16px !important; }
#customer-step > .form-panel { grid-area: form; width: 100%; max-width: none; margin: 18px 0 0 !important; }
#customer-step > .welcome-art {
  grid-area: art;
  width: 100%; height: auto !important; min-height: 470px;
  margin: 0 !important; overflow: hidden; position: relative;
  border: 1px solid rgba(24, 63, 48, .12) !important; border-radius: 3px !important;
  background: #eee8dc !important;
  box-shadow: none !important;
}
#customer-step > .welcome-art::after {
  content: "A WELCOMING TABLE · MADE FOR GOOD MOMENTS";
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  padding: 12px 14px; background: rgba(24, 63, 48, .88); color: #f5f1e7;
  font-size: 9px; font-weight: 600; letter-spacing: .16em;
}
.plate-ring, .plate-core { display: none !important; }
.art-caption { display: none !important; }
#home-active-order { grid-area: active; width: min(100%, 720px); margin: 24px auto 0; }
#customer-step > .microcopy { grid-area: micro; margin: 14px 0 0 !important; text-align: left; }

.panel, .form-panel, .order-panel, .payment-panel, .confirmation-card, .history-card,
.home-active-order-card, .settings-card, .staff-order, .staff-item, .add-item-form,
.modal-card, .checkout-item, .master-panel, .master-items-list > .staff-item {
  border: 1px solid rgba(38, 67, 51, .15) !important;
  border-radius: 4px !important;
  background: #fffdf8 !important;
  color: #243d31 !important;
  box-shadow: 0 10px 30px rgba(39, 48, 37, .045) !important;
}
.form-panel { padding: clamp(18px, 2vw, 28px) !important; }
.form-panel label, .note-label, .settings-card label { color: #243d31 !important; font-size: 13px !important; }
.form-panel input, textarea, select, .search-box, .phone-field, .status-select,
.staff-item input, .staff-item select, .add-item-form input, .add-item-form select {
  border: 1px solid rgba(38, 67, 51, .24) !important;
  border-radius: 3px !important; background: #fffefa !important; color: #243d31 !important;
}
input::placeholder, textarea::placeholder { color: #8c9086 !important; }
.phone-field { background: #fffefa !important; }
.phone-field .country-code { background: #eee8dc !important; border-color: rgba(38,67,51,.2) !important; color: #183f30 !important; }
.table-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important; gap: 8px !important; }
.table-card {
  min-height: 54px !important; border: 1px solid rgba(38,67,51,.22) !important;
  border-radius: 3px !important; background: #f9f6ee !important; color: #555f55 !important;
}
.table-card b { color: #183f30 !important; }
.table-card.selected { background: #183f30 !important; color: #fffdf8 !important; border-color: #183f30 !important; box-shadow: none !important; }
.table-card.selected b { color: #e6d3a9 !important; }
.button, .staff-tab, .category-button, .text-button, .back-button {
  border-radius: 3px !important; letter-spacing: .025em;
}
.button-primary, .button-primary:hover, #place-order {
  background: #183f30 !important; border: 1px solid #183f30 !important;
  color: #fffdf7 !important; box-shadow: none !important;
}
.button-primary:hover, .button-secondary:hover { filter: brightness(1.08); }
.button-secondary, .text-button, .staff-tab, .category-button, .back-button {
  background: transparent !important; border: 1px solid rgba(24,63,48,.3) !important;
  color: #183f30 !important;
}
.staff-tab.active, .category-button.active { background: #183f30 !important; color: #fffdf7 !important; border-color: #183f30 !important; }
.my-orders-button { margin-top: 9px !important; }
.error-message { color: #a44f4b !important; }

#menu-step .menu-heading { margin-bottom: 16px; }
#menu-step .menu-heading h1, #checkout-step h1, #my-orders-step h1 { font-size: clamp(38px, 5.3vw, 62px) !important; }
.guest-strip { border: 1px solid rgba(38,67,51,.16) !important; border-radius: 3px !important; background: #eee8dc !important; color: #183f30 !important; }
.guest-icon { border-radius: 3px !important; background: #183f30 !important; color: #f5f1e7 !important; }
.gold-chip, .food-tag, .stock-chip, .table-state {
  border: 1px solid rgba(178,139,76,.35) !important; border-radius: 2px !important;
  background: #f2ead9 !important; color: #7b6133 !important;
}
.category-list { gap: 7px; }
.category-button { border-radius: 3px !important; background: #fffdf8 !important; }
.search-box { border-radius: 3px !important; }
.search-box input { background: transparent !important; }
.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
.food-card { border: 1px solid rgba(38,67,51,.14) !important; border-radius: 3px !important; background: #fffdf8 !important; box-shadow: none !important; animation: none !important; }
.food-image { height: clamp(150px, 20vw, 230px) !important; background: #eee8dc !important; }
.food-image-placeholder { color: #7b806f !important; }
.food-info { padding: 16px !important; }
.food-info h3 { color: #183f30 !important; font: 600 20px/1.2 Georgia, serif !important; }
.food-info p { color: #70766c !important; font-size: 13px !important; }
.price, .checkout-item .line-price, .total-row strong { color: #8c6d39 !important; }
.add-button, .quantity-control, .quantity-control button, .checkout-quantity button {
  border: 1px solid #183f30 !important; border-radius: 3px !important;
}
.add-button, .quantity-control button, .checkout-quantity button { background: #183f30 !important; color: #fffdf7 !important; }
.cart-bar { background: #183f30 !important; border: 1px solid #183f30 !important; border-radius: 3px !important; box-shadow: 0 12px 30px rgba(20,50,35,.2) !important; }
.cart-bar strong, .cart-bar span { color: #fffdf7 !important; }
.bottom-spacer { height: 90px; }
.order-panel, .payment-panel { padding: clamp(18px, 2.4vw, 28px) !important; }
.upi-placeholder { border: 1px solid rgba(38,67,51,.18) !important; border-radius: 3px !important; background: #f9f6ee !important; }
.upi-placeholder strong { color: #183f30 !important; }
.payment-note { color: #58665a !important; }
.total-row { color: #70766c !important; }
.confirmation-screen { max-width: 760px; margin-inline: auto; }
.confirmation-card > strong { color: #183f30 !important; font-family: Georgia, serif !important; }
.history-status { color: #183f30 !important; background: #eee8dc !important; border: 1px solid var(--line) !important; }
.history-actions button { border-radius: 3px !important; }

/* Shared staff pages keep clear hierarchy and readable, touch-friendly controls. */
.master-panel, #staff-settings { padding: clamp(16px, 2.2vw, 28px); }
.staff-warning { border: 1px solid rgba(178,139,76,.34) !important; border-radius: 3px !important; background: #f2ead9 !important; color: #665638 !important; }
.staff-tabs { gap: 8px; }
.staff-tab { min-height: 44px; background: #fffdf8 !important; }
.staff-order, .staff-item { border-radius: 4px !important; }
.staff-order-head strong, .staff-item-main strong { color: #183f30 !important; }
.staff-order-items { color: #414d42 !important; }
.status-current { border-radius: 3px !important; }
.status-pending, .status-cooking, .status-served, .status-delivered, .status-cancelled {
  background: #f2ead9 !important; color: #695532 !important; border-color: rgba(178,139,76,.32) !important;
}
.status-served.is-current, .status-delivered.is-current { background: #183f30 !important; color: #fffdf7 !important; border-color: #183f30 !important; }
.status-cancelled.is-current { background: #f5e7e2 !important; color: #8f3e38 !important; border-color: #d4aaa1 !important; }
.settings-board { gap: 14px !important; }
.settings-card { border-radius: 4px !important; }
.settings-icon { border-radius: 50% !important; background: #f2ead9 !important; color: #8c6d39 !important; }
.settings-savebar { background: #eee8dc !important; border: 1px solid var(--line) !important; }
.time-pair > span { background: #f9f6ee !important; border-color: rgba(38,67,51,.2) !important; border-radius: 3px !important; }
.time-pair input { background: transparent !important; }
.footer {
  width: 100% !important; max-width: none !important; min-height: 74px;
  padding: 20px max(22px, calc((100vw - 1300px) / 2)) !important;
  border: 0 !important; background: #183f30 !important; color: #f5f1e7 !important;
}
.footer .muted, .footer .staff-entry, .footer .staff-entry a { color: #eee7d8 !important; }
.footer .staff-entry a:hover { color: #d9bd82 !important; }
.toast { border: 1px solid #b28b4c !important; border-radius: 3px !important; background: #183f30 !important; color: #fffdf7 !important; }
.modal-backdrop { background: rgba(24,63,48,.68) !important; }
.modal-card { background: #fffdf8 !important; }

@media (min-width: 900px) {
  #staff-orders.staff-content, #cook-orders.staff-content { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (max-width: 760px) {
  .topbar { min-height: 74px !important; padding: 12px 16px !important; }
  .app-shell, .chef-shell { width: calc(100% - 32px) !important; }
  .screen { padding: 26px 0 !important; }
  #customer-step.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "step" "title" "intro" "art" "form" "active" "micro";
    row-gap: 0;
    padding: 28px 0 38px !important;
  }
  #welcome-title { font-size: clamp(42px, 12vw, 62px) !important; }
  #customer-step > .muted { font-size: 15px !important; }
  #customer-step > .welcome-art { min-height: clamp(230px, 65vw, 360px); margin: 18px 0 4px !important; }
  #customer-step > .form-panel { margin-top: 14px !important; }
  #customer-step > .microcopy { text-align: center; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .food-image { height: clamp(125px, 37vw, 190px) !important; }
  .food-info { padding: 12px !important; }
  .food-info h3 { font-size: 17px !important; }
  .staff-tabs { overflow-x: auto; }
  .staff-tab { min-width: 110px; }
  .settings-board { grid-template-columns: 1fr !important; }
  .settings-savebar { position: sticky; bottom: 8px; z-index: 5; }
  .footer { gap: 14px; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  body::before { font-size: 9px; letter-spacing: .13em; }
  .brand-mark { width: 38px !important; height: 38px !important; font-size: 23px !important; }
  .brand > span:last-child { font-size: 17px; }
  .header-clock { min-width: 0; }
  .digital-clock { font-size: 13px !important; }
  .menu-grid { grid-template-columns: 1fr !important; }
  .food-image { height: 210px !important; }
  .menu-heading { align-items: flex-start !important; }
  .menu-heading h1 { font-size: 36px !important; }
  .order-action-buttons .button { min-width: 0 !important; flex-basis: 100%; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Final page-canvas override: defeat older dark theme declarations. */
html, body, body[data-page-mode], body[data-page-mode] .app-shell,
body[data-page-mode] main, body[data-page-mode] .screen {
  background-color: #f5f1e7 !important;
  background-image: none !important;
}
body[data-page-mode] { color: #243d31 !important; }
body[data-page-mode]::after, body[data-page-mode] .app-shell::before,
body[data-page-mode] .app-shell::after { display: none !important; content: none !important; }

/* Final visual refinement: no decorative food photos, centered layout, soft cards. */
body[data-page-mode], body[data-page-mode] .app-shell, body[data-page-mode] main,
body[data-page-mode] .screen { background-color: #f5f1e7 !important; color: #24231f !important; }
body[data-page-mode] .welcome-art { display: none !important; }
body[data-page-mode] .food-image, body[data-page-mode] .staff-item-photo,
body[data-page-mode] .edit-photo-preview { display: none !important; }
body[data-page-mode] .app-shell::before, body[data-page-mode] .app-shell::after { display: none !important; }

body[data-page-mode] .topbar { justify-content: center !important; flex-wrap: wrap; gap: 8px 24px !important; }
body[data-page-mode] .brand { justify-content: center; text-align: center; }
body[data-page-mode] .brand-mark {
  background: #183f30 !important; color: #f5f1e7 !important;
  border: 2px solid #b28b4c !important; box-shadow: 0 0 0 3px rgba(178,139,76,.12) !important;
}
body[data-page-mode] .brand > span:last-child,
body[data-page-mode] .brand small { color: #24231f !important; }
body[data-page-mode] .brand-dot { color: #9a7135 !important; }
body[data-page-mode] .header-clock { align-items: center !important; text-align: center; }

body[data-page-mode] .app-shell { text-align: center !important; }
body[data-page-mode] .screen, body[data-page-mode] .menu-heading,
body[data-page-mode] .panel-title, body[data-page-mode] .staff-order,
body[data-page-mode] .staff-item, body[data-page-mode] .settings-card,
body[data-page-mode] .history-card, body[data-page-mode] .confirmation-card,
body[data-page-mode] .food-card, body[data-page-mode] .add-item-form {
  text-align: center !important;
}
body[data-page-mode] h1, body[data-page-mode] h2, body[data-page-mode] h3,
body[data-page-mode] p, body[data-page-mode] .field-help,
body[data-page-mode] .step-label, body[data-page-mode] .eyebrow { text-align: center !important; color: #24231f !important; }
body[data-page-mode] h1 em, body[data-page-mode] .eyebrow,
body[data-page-mode] .step-label { color: #9a7135 !important; }
body[data-page-mode] .form-panel label, body[data-page-mode] .settings-card label,
body[data-page-mode] .note-label { text-align: center !important; color: #24231f !important; }
body[data-page-mode] input, body[data-page-mode] textarea, body[data-page-mode] select,
body[data-page-mode] .search-box, body[data-page-mode] .phone-field {
  background: #fffdf8 !important; color: #24231f !important; text-align: center !important;
  border: 1px solid #b28b4c !important; border-radius: 10px !important;
}
body[data-page-mode] input::placeholder, body[data-page-mode] textarea::placeholder { color: #747168 !important; opacity: 1; }
body[data-page-mode] .search-box input { background: #fffdf8 !important; color: #24231f !important; }
body[data-page-mode] .search-box span { color: #8d692f !important; }
body[data-page-mode] .phone-field .country-code { background: #eee8dc !important; color: #24231f !important; border-color: #b28b4c !important; }

body[data-page-mode] .panel, body[data-page-mode] .form-panel,
body[data-page-mode] .order-panel, body[data-page-mode] .payment-panel,
body[data-page-mode] .confirmation-card, body[data-page-mode] .history-card,
body[data-page-mode] .home-active-order-card, body[data-page-mode] .settings-card,
body[data-page-mode] .staff-order, body[data-page-mode] .staff-item,
body[data-page-mode] .food-card, body[data-page-mode] .add-item-form,
body[data-page-mode] .master-panel, body[data-page-mode] .modal-card {
  border: 1px solid #b28b4c !important;
  border-radius: 18px !important;
  background: #fffdf8 !important;
  color: #24231f !important;
  box-shadow: 0 5px 18px rgba(52,43,26,.07) !important;
}
body[data-page-mode] .form-panel { max-width: 680px; margin-inline: auto !important; }
body[data-page-mode] #customer-step.active {
  display: flex !important; flex-direction: column; align-items: center; gap: 12px;
}
body[data-page-mode] #customer-step > * { width: min(100%, 680px); }
body[data-page-mode] #customer-step > .microcopy { text-align: center !important; }
body[data-page-mode] .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
body[data-page-mode] .food-card { min-height: 0; padding: 6px; }
body[data-page-mode] .food-info { padding: 12px !important; }
body[data-page-mode] .food-info h3 { color: #24231f !important; font-size: 18px !important; }
body[data-page-mode] .food-info p, body[data-page-mode] .staff-order-items,
body[data-page-mode] .staff-order-head small, body[data-page-mode] .muted,
body[data-page-mode] .small, body[data-page-mode] .field-help { color: #55554f !important; }
body[data-page-mode] .staff-content, body[data-page-mode] .settings-board,
body[data-page-mode] .master-items-list { justify-items: center; }
body[data-page-mode] #staff-orders.staff-content, body[data-page-mode] #cook-orders.staff-content,
body[data-page-mode] .master-items-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
body[data-page-mode] #staff-orders .table-order-card,
body[data-page-mode] #cook-orders .table-order-card,
body[data-page-mode] .master-items-list > .staff-item { width: 100%; max-width: 390px; padding: 16px !important; }
body[data-page-mode] .staff-order-head, body[data-page-mode] .staff-item-actions,
body[data-page-mode] .order-action-buttons, body[data-page-mode] .settings-card-head {
  justify-content: center !important; text-align: center !important;
}
body[data-page-mode] .staff-order-head { flex-wrap: wrap; }
body[data-page-mode] .staff-item-main { text-align: center !important; }
body[data-page-mode] .table-grid { justify-content: center; }
body[data-page-mode] .footer { justify-content: center !important; text-align: center; }
body[data-page-mode] .footer > span, body[data-page-mode] .footer .staff-entry { justify-content: center; }

body[data-page-mode] .button, body[data-page-mode] .staff-tab,
body[data-page-mode] .category-button, body[data-page-mode] .text-button,
body[data-page-mode] .table-card, body[data-page-mode] .staff-item-actions button {
  border-radius: 10px !important; transition: background-color .18s ease, color .18s ease,
  border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
body[data-page-mode] .button-primary, body[data-page-mode] #place-order,
body[data-page-mode] .staff-tab.active, body[data-page-mode] .category-button.active {
  background: #183f30 !important; color: #fffdf8 !important; border-color: #183f30 !important;
}
body[data-page-mode] .button:hover, body[data-page-mode] .staff-tab:hover,
body[data-page-mode] .category-button:hover, body[data-page-mode] .text-button:hover,
body[data-page-mode] .table-card:hover, body[data-page-mode] .staff-item-actions button:hover {
  background: #b28b4c !important; color: #1f211c !important; border-color: #8d692f !important;
  box-shadow: 0 4px 12px rgba(90,66,27,.18) !important; transform: translateY(-1px);
}
body[data-page-mode] .food-card:hover, body[data-page-mode] .staff-order:hover,
body[data-page-mode] .staff-item:hover, body[data-page-mode] .settings-card:hover,
body[data-page-mode] .history-card:hover {
  border-color: #8d692f !important; box-shadow: 0 9px 22px rgba(90,66,27,.13) !important;
  transform: translateY(-2px);
}
body[data-page-mode] .button-primary:hover, body[data-page-mode] #place-order:hover {
  background: #b28b4c !important; color: #1f211c !important; border-color: #8d692f !important;
}
body[data-page-mode] .quantity-control button:hover, body[data-page-mode] .add-button:hover,
body[data-page-mode] .checkout-quantity button:hover {
  background: #b28b4c !important; color: #1f211c !important;
}

@media (max-width: 900px) {
  body[data-page-mode] .menu-grid,
  body[data-page-mode] #staff-orders.staff-content,
  body[data-page-mode] #cook-orders.staff-content,
  body[data-page-mode] .master-items-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  body[data-page-mode] .topbar { flex-direction: column; padding: 12px 16px !important; }
  body[data-page-mode] .header-clock { align-items: center !important; }
  body[data-page-mode] .menu-grid,
  body[data-page-mode] #staff-orders.staff-content,
  body[data-page-mode] #cook-orders.staff-content,
  body[data-page-mode] .master-items-list { grid-template-columns: 1fr !important; }
  body[data-page-mode] #staff-orders .table-order-card,
  body[data-page-mode] #cook-orders .table-order-card,
  body[data-page-mode] .master-items-list > .staff-item { max-width: 480px; }
  body[data-page-mode] .order-action-buttons { flex-direction: column; }
}

/* Palette correction: keep real menu photos and remove inherited dark surfaces. */
html, html body, body[data-page-mode], body[data-page-mode]::before,
body[data-page-mode] .app-shell, body[data-page-mode] .chef-shell,
body[data-page-mode] main, body[data-page-mode] .screen,
body[data-page-mode] .bottom-spacer, body[data-page-mode] .empty-state {
  background-color: #f5f1e7 !important;
  background-image: none !important;
  color: #24231f !important;
}
body[data-page-mode]::before {
  background: #183f30 !important;
  color: #fffdf8 !important;
}
body[data-page-mode] .welcome-art { display: block !important; }
body[data-page-mode] .food-image, body[data-page-mode] .staff-item-photo,
body[data-page-mode] .edit-photo-preview { display: block !important; }
body[data-page-mode] .food-image {
  height: clamp(150px, 20vw, 230px) !important;
  overflow: hidden !important; background: #eee8dc !important;
  border-radius: 14px 14px 0 0 !important;
}
body[data-page-mode] .food-image img,
body[data-page-mode] .staff-item-photo,
body[data-page-mode] .edit-photo-preview {
  display: block !important; object-fit: cover !important;
}
body[data-page-mode] .food-image img { width: 100% !important; height: 100% !important; }
body[data-page-mode] .food-image-placeholder { background: #eee8dc !important; color: #665d4c !important; }

body[data-page-mode] .topbar, body[data-page-mode] .brand,
body[data-page-mode] .brand > span:last-child, body[data-page-mode] .brand small,
body[data-page-mode] .header-clock, body[data-page-mode] .clock-greeting,
body[data-page-mode] .digital-clock, body[data-page-mode] .digital-date {
  color: #24231f !important;
}
body[data-page-mode] .brand-mark { background: #183f30 !important; color: #fffdf8 !important; }
body[data-page-mode] .header-clock { background: #f5f1e7 !important; border-color: #b28b4c !important; }

body[data-page-mode] .panel, body[data-page-mode] .form-panel,
body[data-page-mode] #customer-form, body[data-page-mode] .order-panel,
body[data-page-mode] .payment-panel, body[data-page-mode] .confirmation-card,
body[data-page-mode] .history-card, body[data-page-mode] .home-active-order-card,
body[data-page-mode] .settings-card, body[data-page-mode] .staff-order,
body[data-page-mode] .staff-item, body[data-page-mode] .food-card,
body[data-page-mode] .add-item-form, body[data-page-mode] .master-panel,
body[data-page-mode] .modal-card, body[data-page-mode] .order-edit-panel,
body[data-page-mode] .checkout-item, body[data-page-mode] .upi-placeholder,
body[data-page-mode] .search-box, body[data-page-mode] .guest-strip,
body[data-page-mode] .settings-savebar, body[data-page-mode] .confirmation-window {
  background-color: #fffdf8 !important;
  background-image: none !important;
  color: #24231f !important;
  border-color: #b28b4c !important;
}
body[data-page-mode] input, body[data-page-mode] textarea,
body[data-page-mode] select, body[data-page-mode] .search-box input,
body[data-page-mode] .add-items-search, body[data-page-mode] .master-order-note-label textarea,
body[data-page-mode] .timing-grid input, body[data-page-mode] .order-discount-tools input,
body[data-page-mode] .order-discount-tools select,
body[data-page-mode] input:-webkit-autofill,
body[data-page-mode] input:-webkit-autofill:hover,
body[data-page-mode] input:-webkit-autofill:focus {
  background-color: #fffdf8 !important;
  background-image: none !important;
  color: #24231f !important;
  -webkit-text-fill-color: #24231f !important;
  border-color: #b28b4c !important;
  box-shadow: 0 0 0 1000px #fffdf8 inset !important;
}
body[data-page-mode] .phone-field { background: #fffdf8 !important; }
body[data-page-mode] .phone-field .country-code { background: #eee8dc !important; color: #24231f !important; }
body[data-page-mode] .search-box span { color: #8d692f !important; }
body[data-page-mode] .upi-placeholder { min-height: 170px !important; }
body[data-page-mode] .upi-placeholder img { background: #fffdf8 !important; }
body[data-page-mode] .upi-placeholder strong,
body[data-page-mode] .upi-placeholder small,
body[data-page-mode] .payment-note,
body[data-page-mode] .panel-title,
body[data-page-mode] .form-panel label,
body[data-page-mode] .settings-card label,
body[data-page-mode] .note-label,
body[data-page-mode] .staff-order-items,
body[data-page-mode] .staff-order-head small,
body[data-page-mode] .history-card-foot,
body[data-page-mode] .history-lines,
body[data-page-mode] .muted, body[data-page-mode] .field-help,
body[data-page-mode] .small { color: #555149 !important; }
body[data-page-mode] h1, body[data-page-mode] h2, body[data-page-mode] h3,
body[data-page-mode] .food-info h3, body[data-page-mode] .staff-order-head strong,
body[data-page-mode] .staff-item-main strong { color: #183f30 !important; }
body[data-page-mode] input::placeholder,
body[data-page-mode] textarea::placeholder { color: #777166 !important; opacity: 1 !important; }
body[data-page-mode] .footer { background: #183f30 !important; color: #fffdf8 !important; }
body[data-page-mode] .toast { background: #fffdf8 !important; color: #24231f !important; border-color: #b28b4c !important; }
body[data-page-mode] .modal-backdrop { background: rgba(245,241,231,.88) !important; }
body[data-page-mode] .order-live-notification {
  background: #fffdf8 !important;
  background-image: none !important;
  color: #24231f !important;
  border: 1px solid #b28b4c !important;
  box-shadow: 0 12px 30px rgba(52,43,26,.16) !important;
}
body[data-page-mode] .order-live-notification strong,
body[data-page-mode] .order-live-notification div,
body[data-page-mode] .order-live-notification small { color: #24231f !important; }
body[data-page-mode] .order-live-notification .live-notification-details b {
  color: #183f30 !important;
  font-size: 1.05em;
  font-weight: 800;
}
body[data-page-mode] .order-live-notification button {
  color: #183f30 !important; background: #eee8dc !important; border-color: #b28b4c !important;
}

/* Readability and checkout spacing refinements across all page modes. */
body[data-page-mode] .app-shell { text-align: left !important; }
body[data-page-mode] .screen, body[data-page-mode] .panel,
body[data-page-mode] .staff-order, body[data-page-mode] .staff-item,
body[data-page-mode] .settings-card, body[data-page-mode] .history-card,
body[data-page-mode] .confirmation-card, body[data-page-mode] .order-edit-panel {
  text-align: left !important;
}
body[data-page-mode] .screen h1, body[data-page-mode] .step-label,
body[data-page-mode] .eyebrow, body[data-page-mode] #customer-step > .muted,
body[data-page-mode] .confirmation-screen > p,
body[data-page-mode] .confirmation-screen > h1 { text-align: center !important; }
body[data-page-mode] .form-panel label, body[data-page-mode] .settings-card label,
body[data-page-mode] #customer-form label, body[data-page-mode] #history-form label,
body[data-page-mode] #master-login-form label, body[data-page-mode] .note-label {
  display: block !important; text-align: left !important; color: #24231f !important;
  font-size: 14px !important; font-weight: 600 !important;
}
body[data-page-mode] input, body[data-page-mode] textarea,
body[data-page-mode] select, body[data-page-mode] .search-box input {
  text-align: left !important; color: #24231f !important; font-size: 16px !important;
}
body[data-page-mode] .table-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
body[data-page-mode] .table-card { min-width: 0; min-height: 64px !important; }
body[data-page-mode] .welcome-art {
  height: 172px !important; min-height: 172px !important; background: #eee8dc !important;
  border: 1px solid #d8c9aa !important; border-radius: 22px !important;
}
body[data-page-mode] .welcome-art::after { display: none !important; content: none !important; }
body[data-page-mode] .plate-ring { display: block !important; border-color: #b28b4c !important; }
body[data-page-mode] .plate-core {
  display: grid !important; background: #183f30 !important; color: #f5f1e7 !important;
  border-color: #b28b4c !important; box-shadow: 0 8px 20px rgba(52,43,26,.12) !important;
}
body[data-page-mode] .plate-core span { color: #d5b875 !important; }
body[data-page-mode] .art-caption { display: block !important; color: #6f552d !important; }
body[data-page-mode] .checkout-items { gap: 10px !important; }
body[data-page-mode] .checkout-item {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important; gap: 12px 22px !important;
  padding: 14px 16px !important; text-align: left !important;
}
body[data-page-mode] .checkout-item > div:first-child { min-width: 0; text-align: left !important; }
body[data-page-mode] .checkout-item .line-name { color: #24231f !important; font-size: 15px !important; font-weight: 700 !important; }
body[data-page-mode] .checkout-item .line-detail { color: #625d52 !important; font-size: 13px !important; }
body[data-page-mode] .checkout-item .line-price {
  min-width: 76px; padding-left: 14px !important; text-align: right !important;
  color: #725323 !important; font-size: 15px !important; white-space: nowrap;
}
body[data-page-mode] .checkout-quantity { justify-content: flex-start !important; gap: 12px !important; margin-top: 10px !important; }
body[data-page-mode] .checkout-quantity button {
  width: 36px !important; min-width: 36px !important; height: 36px !important;
  min-height: 36px !important; padding: 0 !important; border-radius: 7px !important;
  display: inline-grid !important; place-items: center !important; font-size: 18px !important;
}
body[data-page-mode] .checkout-quantity span { min-width: 24px; text-align: center !important; color: #24231f !important; font-size: 15px !important; }
body[data-page-mode] .panel-title { text-align: left !important; }
body[data-page-mode] .guest-strip { text-align: left !important; }
body[data-page-mode] #guest-summary { text-align: left !important; }
body[data-page-mode] .footer { text-align: center !important; }
@media (max-width: 600px) {
  body[data-page-mode] .table-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  body[data-page-mode] .welcome-art { height: 150px !important; min-height: 150px !important; }
  body[data-page-mode] .checkout-item { gap: 10px 14px !important; padding: 12px !important; }
  body[data-page-mode] .checkout-item .line-price { min-width: 68px; padding-left: 8px !important; }
}

/* Specificity fixes for legacy ui-fixes.css declarations. */
body[data-page-mode] #brand-restaurant-name,
body[data-page-mode] #footer-restaurant-name,
body[data-page-mode] #clock-greeting,
body[data-page-mode] #digital-clock,
body[data-page-mode] #digital-date,
body[data-page-mode] #checkout-upi-label {
  color: #24231f !important;
  text-shadow: none !important;
}
body[data-page-mode] .brand,
body[data-page-mode] .brand span,
body[data-page-mode] .brand small { color: #24231f !important; }
body[data-page-mode] .brand-mark { background: #183f30 !important; color: #fffdf8 !important; }
body[data-page-mode] #clock-greeting,
body[data-page-mode] #digital-clock,
body[data-page-mode] #digital-date { background: transparent !important; }
body[data-page-mode] .header-clock {
  background: #fffdf8 !important; border: 1px solid #b28b4c !important;
  border-radius: 14px !important; padding: 10px 14px !important;
}
body[data-page-mode] #menu-step .menu-tools,
body[data-page-mode] #menu-step .search-box,
body[data-page-mode] #menu-step .search-box input,
body[data-page-mode] #search-input {
  background: #fffdf8 !important; background-image: none !important;
  color: #24231f !important; border-color: #b28b4c !important;
}
body[data-page-mode] #search-input::placeholder { color: #70695d !important; opacity: 1 !important; }
body[data-page-mode] .quantity-control {
  background: #eee8dc !important; border: 1px solid #b28b4c !important;
  border-radius: 10px !important; padding: 5px !important; gap: 8px !important;
}
body[data-page-mode] .quantity-control span { color: #24231f !important; min-width: 18px; }
body[data-page-mode] .quantity-control button {
  width: 36px !important; min-width: 36px !important; height: 36px !important;
  min-height: 36px !important; border-radius: 7px !important;
  background: #183f30 !important; color: #fffdf8 !important;
}
body[data-page-mode] .back-button,
body[data-page-mode] #edit-details {
  background: #fffdf8 !important; color: #183f30 !important;
  border: 1px solid #b28b4c !important;
}
body[data-page-mode] #checkout-upi-label { color: #183f30 !important; }
body[data-page-mode] .footer { background: #183f30 !important; color: #f5f1e7 !important; }
body[data-page-mode] .footer .muted,
body[data-page-mode] .footer .staff-entry,
body[data-page-mode] .footer .staff-entry a,
body[data-page-mode] .footer > span,
body[data-page-mode] .footer > span span { color: #f5f1e7 !important; }
body[data-page-mode] .footer .brand-dot { color: #d5b875 !important; }

/* Master layout cleanup: clear canvas, simple header, no floating settings bar. */
body[data-page-mode] .topbar {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; flex-wrap: nowrap !important;
  min-height: 94px !important; padding: 14px max(22px, calc((100vw - 1300px) / 2)) !important;
  background: #f5f1e7 !important; border-bottom: 1px solid #d9cfba !important;
}
body[data-page-mode] .brand { margin-right: auto !important; justify-content: flex-start !important; }
body[data-page-mode] .header-clock {
  margin-left: auto !important; margin-top: 0 !important; flex: 0 0 auto !important;
  min-width: 0 !important; border: 0 !important; border-radius: 0 !important;
  padding: 4px 0 4px 16px !important; box-shadow: none !important;
  background: transparent !important;
}
body[data-page-mode] .brand-mark {
  background: transparent !important; color: #183f30 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
body[data-page-mode] #staff-settings,
body[data-page-mode] #master-settings-panel,
body[data-page-mode] #master-settings-panel .settings-board,
body[data-page-mode] #staff-settings .settings-board,
body[data-page-mode] .settings-board {
  width: 100% !important; max-width: none !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
}
body[data-page-mode] .settings-board {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important; padding: 0 !important; margin: 20px 0 !important;
}
body[data-page-mode] .settings-card {
  min-width: 0 !important; background: #fffdf8 !important;
  color: #24231f !important; border: 1px solid #b28b4c !important;
  box-shadow: 0 5px 18px rgba(52,43,26,.07) !important;
}
body[data-page-mode] .settings-card .settings-card-head p,
body[data-page-mode] .settings-card .field-help { color: #555149 !important; }
body[data-page-mode] .settings-icon {
  background: #eee8dc !important; color: #183f30 !important;
  border: 1px solid #b28b4c !important;
}
body[data-page-mode] .settings-savebar {
  position: static !important; inset: auto !important; grid-column: 1 / -1 !important;
  display: flex !important; justify-content: flex-start !important;
  background: #f5f1e7 !important; border: 1px solid #d9cfba !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body[data-page-mode] .settings-savebar .field-help { color: #555149 !important; }
body[data-page-mode] .master-panel,
body[data-page-mode] #master-orders-panel,
body[data-page-mode] #master-items-panel,
body[data-page-mode] #master-settings-panel {
  background: #f5f1e7 !important; background-image: none !important;
  color: #24231f !important; border-color: #d9cfba !important;
}
body[data-page-mode] .back-button,
body[data-page-mode] .back-button span,
body[data-page-mode] .button-secondary { color: #183f30 !important; }
@media (max-width: 600px) {
  body[data-page-mode] .topbar { flex-direction: row !important; gap: 10px !important; padding: 12px 16px !important; }
  body[data-page-mode] .brand { gap: 7px !important; }
  body[data-page-mode] .brand-mark { width: 34px !important; height: 34px !important; font-size: 24px !important; }
  body[data-page-mode] .header-clock { padding-left: 8px !important; text-align: right !important; }
  body[data-page-mode] .settings-board { grid-template-columns: 1fr !important; }
  body[data-page-mode] .settings-savebar { grid-column: 1 !important; }
}

/* Contrast corrections for text generated inside live order cards. */
body[data-page-mode] #home-active-order strong,
body[data-page-mode] .history-card strong,
body[data-page-mode] .confirmation-card strong,
body[data-page-mode] .staff-order strong,
body[data-page-mode] .staff-item strong,
body[data-page-mode] .order-edit-panel strong,
body[data-page-mode] .live-notification-table,
body[data-page-mode] .live-notification-details,
body[data-page-mode] .confirmation-window strong {
  color: #183f30 !important; text-shadow: none !important;
}
body[data-page-mode] #order-reference,
body[data-page-mode] #confirmation-countdown,
body[data-page-mode] #confirmation-order-message { color: #183f30 !important; }
body[data-page-mode] button:disabled,
body[data-page-mode] .button:disabled {
  opacity: 1 !important; background: #e8e2d5 !important;
  color: #625d52 !important; border-color: #c9bda4 !important;
  box-shadow: none !important; transform: none !important;
}
body[data-page-mode] button:disabled:hover,
body[data-page-mode] .button:disabled:hover {
  background: #e8e2d5 !important; color: #625d52 !important;
  border-color: #c9bda4 !important; transform: none !important;
}
body[data-page-mode] .error-message { color: #963c32 !important; }
body[data-page-mode] .status-current,
body[data-page-mode] .stock-chip,
body[data-page-mode] .gold-chip { color: #59451f !important; }
body[data-page-mode] .status-cooking.is-current,
body[data-page-mode] .status-served.is-current,
body[data-page-mode] .status-delivered.is-current { color: #fffdf8 !important; }

/* Master login: centered floating form with no dark panel container. */
body[data-page-mode] #master-login-step.active {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  min-height: min(700px, calc(100vh - 220px)) !important;
  text-align: center !important;
}
body[data-page-mode] #master-login-step > * { width: min(100%, 560px) !important; }
body[data-page-mode] #master-login-step > .step-label,
body[data-page-mode] #master-login-step > h1,
body[data-page-mode] #master-login-step > p { text-align: center !important; }
body[data-page-mode] #master-login-step > h1 { margin: 8px 0 12px !important; }
body[data-page-mode] #master-login-step > .muted { margin: 0 0 12px !important; color: #555149 !important; }
body[data-page-mode] #master-login-step .form-panel,
body[data-page-mode] #master-login-form {
  width: min(100%, 560px) !important; max-width: 560px !important;
  margin: 14px auto !important; padding: 18px 0 !important;
  background: transparent !important; background-color: transparent !important;
  background-image: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body[data-page-mode] #master-login-step .form-panel label,
body[data-page-mode] #master-login-form label {
  display: block !important; margin: 0 0 7px !important;
  text-align: left !important; color: #24231f !important;
}
body[data-page-mode] #master-login-step .form-panel input,
body[data-page-mode] #master-login-form input {
  width: 100% !important; margin: 0 0 18px !important;
  padding: 13px 14px !important; text-align: left !important;
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  background: #fffdf8 !important; background-color: #fffdf8 !important;
  background-image: none !important; border: 1px solid #b28b4c !important;
  border-radius: 12px !important; box-shadow: none !important;
}
body[data-page-mode] #master-login-form .button-primary {
  width: 100% !important; background: #183f30 !important;
  color: #fffdf8 !important; border: 1px solid #183f30 !important;
}
body[data-page-mode] #master-login-form .error-message { color: #963c32 !important; }
body[data-page-mode] #master-login-step > .microcopy { color: #625d52 !important; }
@media (max-width: 600px) {
  body[data-page-mode] #master-login-step.active { min-height: calc(100vh - 190px) !important; }
  body[data-page-mode] #master-login-step .form-panel,
  body[data-page-mode] #master-login-form { padding-inline: 0 !important; }
}

/* Center the welcome emblem and its caption as one visual lockup. */
body[data-page-mode] .welcome-art {
  position: relative !important; display: grid !important; place-items: center !important;
  overflow: hidden !important;
}
body[data-page-mode] .welcome-art .plate-ring,
body[data-page-mode] .welcome-art .plate-core {
  position: absolute !important; left: 50% !important; top: 46% !important;
}
body[data-page-mode] .welcome-art .plate-ring {
  transform: translate(-50%, -50%) rotate(-12deg) !important;
}
body[data-page-mode] .welcome-art .plate-core {
  transform: translate(-50%, -50%) !important;
}
body[data-page-mode] .welcome-art .art-caption {
  position: absolute !important; left: 50% !important; right: auto !important;
  bottom: 12px !important; width: max-content !important;
  transform: translateX(-50%) !important; text-align: center !important;
}

/* Active order host must not show through the rounded card corners. */
body[data-page-mode] #home-active-order {
  background: transparent !important; background-color: transparent !important;
  background-image: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; overflow: visible !important;
}
body[data-page-mode] #home-active-order .home-active-order-card {
  overflow: hidden !important; border-radius: 20px !important;
  background: #fffdf8 !important; border: 1px solid #b28b4c !important;
}

/* Order history and edit-order tools: keep legacy dark component styles out. */
body[data-page-mode] #my-orders-step .form-panel,
body[data-page-mode] #history-form {
  color: #24231f !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border: 1px solid #b28b4c !important; border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(55, 43, 22, .10) !important;
}
body[data-page-mode] #my-orders-step .form-panel label,
body[data-page-mode] #history-form label { color: #24231f !important; }
body[data-page-mode] #my-orders-step .form-panel .field-help,
body[data-page-mode] #history-form .field-help { color: #625d52 !important; }
body[data-page-mode] #history-form input,
body[data-page-mode] #history-phone {
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  caret-color: #183f30 !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border-color: #b28b4c !important; box-shadow: none !important;
}
body[data-page-mode] #history-form .country-code {
  color: #183f30 !important; background: #f1eadc !important;
  border-color: #b28b4c !important;
}
body[data-page-mode] .history-actions button {
  color: #183f30 !important; -webkit-text-fill-color: #183f30 !important;
  background: #f3eddf !important; background-image: none !important;
  border: 1px solid #c8ad79 !important; border-radius: 10px !important;
  box-shadow: none !important;
}
body[data-page-mode] .history-actions button.cancel-order {
  color: #873b32 !important; -webkit-text-fill-color: #873b32 !important;
  background: #f8ebe5 !important; border-color: #d7a99b !important;
}
body[data-page-mode] .history-actions button:hover:not(:disabled),
body[data-page-mode] .history-actions button.cancel-order:hover:not(:disabled) {
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  background: #ead9b8 !important; border-color: #b28b4c !important;
}

body[data-page-mode] .order-edit-panel,
body[data-page-mode] .order-editor-menu,
body[data-page-mode] .add-menu-items-panel,
body[data-page-mode] .add-menu-items-panel.add-items-modal {
  color: #24231f !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border: 1px solid #c8ad79 !important; border-radius: 16px !important;
  box-shadow: 0 14px 38px rgba(55, 43, 22, .16) !important;
}
body[data-page-mode] .add-menu-items-panel.add-items-modal:before {
  color: #183f30 !important;
}
body[data-page-mode] .order-edit-row,
body[data-page-mode] .addable-item {
  color: #24231f !important; background: transparent !important;
  border-color: #e2d8c6 !important;
}
body[data-page-mode] .order-edit-row small,
body[data-page-mode] .order-edit-row .muted,
body[data-page-mode] .editor-title { color: #4e4a40 !important; }
body[data-page-mode] .add-items-search,
body[data-page-mode] input.add-items-search {
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  caret-color: #183f30 !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border: 1px solid #b28b4c !important; border-radius: 11px !important;
  box-shadow: none !important;
}
body[data-page-mode] .order-edit-row button,
body[data-page-mode] .addable-item button,
body[data-page-mode] .add-menu-items-toggle {
  color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important;
  background: #183f30 !important; background-image: none !important;
  border: 1px solid #183f30 !important; border-radius: 9px !important;
}
body[data-page-mode] .order-edit-row button:hover,
body[data-page-mode] .addable-item button:hover,
body[data-page-mode] .add-menu-items-toggle:hover {
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  background: #ead9b8 !important; border-color: #b28b4c !important;
}

/* Master orders: three equal-width, full-available-width workflow columns. */
body[data-page-mode="master"] #staff-orders.master-order-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
}
body[data-page-mode="master"] .master-order-column { min-width: 0; }
body[data-page-mode="master"] .master-order-column > h3 {
  margin: 0 0 12px !important; padding: 0 0 10px !important;
  border-bottom: 1px solid #d8c9aa; color: #183f30 !important;
  font-size: 18px !important; line-height: 1.35;
}
body[data-page-mode="master"] .master-order-list { display: grid; gap: 12px; min-width: 0; }
body[data-page-mode="master"] .master-order-empty {
  margin: 0; padding: 16px; border: 1px dashed #c8ad79; border-radius: 12px;
  color: #625d52; background: #fffdf8; line-height: 1.55;
}
body[data-page-mode="master"] .master-managed-order {
  min-width: 0; padding: 16px; border: 1px solid #c8ad79; border-radius: 14px;
  background: #fffdf8; color: #24231f; box-shadow: 0 8px 22px rgba(55,43,22,.08);
}
body[data-page-mode="master"] .master-managed-order.cancelled { background: #faf2ef; border-color: #d7a99b; }
body[data-page-mode="master"] .master-managed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
body[data-page-mode="master"] .master-managed-head > div { min-width: 0; display: grid; gap: 7px; }
body[data-page-mode="master"] .master-managed-head .eyebrow { font-size: 10px !important; color: #936b30 !important; }
body[data-page-mode="master"] .master-managed-head strong { overflow-wrap: anywhere; line-height: 1.45; color: #183f30 !important; }
body[data-page-mode="master"] .master-order-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #eee8dc; color: #183f30; font-size: 11px; font-weight: 700; }
body[data-page-mode="master"] .master-order-status.delivered { background: #e5f0e5; color: #245338; }
body[data-page-mode="master"] .master-order-status.cancelled { background: #f1e2de; color: #873b32; }
body[data-page-mode="master"] .master-order-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; margin: 16px 0; }
body[data-page-mode="master"] .master-order-meta div { min-width: 0; }
body[data-page-mode="master"] .master-order-meta dt { color: #70695d; font-size: 10px; margin-bottom: 3px; }
body[data-page-mode="master"] .master-order-meta dd { margin: 0; color: #24231f; font-size: 12px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
body[data-page-mode="master"] .master-order-lines { display: grid; gap: 7px; padding: 12px 0; border-top: 1px solid #e2d8c6; border-bottom: 1px solid #e2d8c6; }
body[data-page-mode="master"] .master-order-item { display: flex; justify-content: space-between; gap: 10px; color: #3c3932; font-size: 12px; line-height: 1.45; }
body[data-page-mode="master"] .master-order-item span { min-width: 0; overflow-wrap: anywhere; }
body[data-page-mode="master"] .master-order-item strong { flex: 0 0 auto; color: #725323 !important; white-space: nowrap; }
body[data-page-mode="master"] .master-kitchen-note,
body[data-page-mode="master"] .master-cancel-reason { display: grid; gap: 5px; margin: 12px 0; padding: 10px; border-left: 3px solid #b28b4c; background: #f4efe4; color: #3c3932; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
body[data-page-mode="master"] .master-cancel-reason { border-color: #a65449; background: #f8ebe5; }
body[data-page-mode="master"] .master-order-column .button { width: 100%; min-height: 40px; margin-top: 10px; }
body[data-page-mode="master"] .master-order-column .order-action-buttons { display: grid; grid-template-columns: 1fr; gap: 8px; }
body[data-page-mode="master"] .master-order-column .order-action-buttons .button { margin: 0; }
body[data-page-mode="master"] .master-order-editor { margin-top: 10px; padding: 12px; border: 1px solid #d8c9aa; border-radius: 10px; background: #f8f5ec; }
body[data-page-mode="master"] .master-order-editor > label { display: grid; gap: 6px; color: #3c3932; font-size: 12px; font-weight: 700; }
body[data-page-mode="master"] .master-order-editor,
body[data-page-mode="master"] .master-order-editor label,
body[data-page-mode="master"] .master-order-editor label span,
body[data-page-mode="master"] .master-order-editor label small,
body[data-page-mode="master"] .master-order-editor label b {
  color: #24231f !important;
  -webkit-text-fill-color: #24231f !important;
  text-shadow: none !important;
}
body[data-page-mode="master"] .master-order-editor label small { color: #625d52 !important; -webkit-text-fill-color: #625d52 !important; }
body[data-page-mode="master"] .master-order-editor select { width: 100%; min-height: 40px; padding: 8px; border: 1px solid #b28b4c; border-radius: 8px; background: #fffdf8; color: #24231f; }
body[data-page-mode="master"] .master-manage-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e2d8c6; color: #24231f; }
body[data-page-mode="master"] .master-manage-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
body[data-page-mode="master"] .master-manage-line small { display: block; margin-top: 3px; color: #70695d; }
body[data-page-mode="master"] .master-manage-qty { display: flex; align-items: center; gap: 8px; }
body[data-page-mode="master"] .master-manage-qty button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: #183f30; color: #fffdf8; font-size: 18px; }
body[data-page-mode="master"] .master-manage-qty b { min-width: 20px; text-align: center; }
body[data-page-mode="master"] .master-cancel-form { display: grid; gap: 14px; color: #24231f; background: #fffdf8; }
body[data-page-mode="master"] .master-cancel-form h2 { margin: 0; color: #183f30; }
body[data-page-mode="master"] .master-cancel-form label { display: grid; gap: 7px; color: #3c3932; font-weight: 600; }
body[data-page-mode="master"] .master-cancel-form input,
body[data-page-mode="master"] .master-cancel-form select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #b28b4c; border-radius: 8px; background: #fffdf8; color: #24231f; }
body[data-page-mode="customer"] .cancel-reason-form { display: grid; gap: 14px; color: #24231f; background: #fffdf8; }
body[data-page-mode="customer"] .cancel-reason-form h2 { margin: 0; color: #183f30; }
body[data-page-mode="customer"] .cancel-reason-form label { display: grid; gap: 7px; color: #3c3932; font-weight: 600; }
body[data-page-mode="customer"] .cancel-reason-form input,
body[data-page-mode="customer"] .cancel-reason-form select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #b28b4c; border-radius: 8px; background: #fffdf8; color: #24231f; }
@media (max-width: 900px) {
  body[data-page-mode="master"] #staff-orders.master-order-columns { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 620px) {
  body[data-page-mode="master"] #staff-orders.master-order-columns { grid-template-columns: minmax(0,1fr) !important; }
}
body[data-page-mode="master"] .master-managed-order.is-cooking {
  position: relative;
  z-index: 1;
  color: #f4f8ee !important;
  background: linear-gradient(145deg, #124a34 0%, #0c3828 100%) !important;
  border: 2px solid #42a86c !important;
  animation: masterCookingGlow 1.9s ease-in-out infinite;
}
@keyframes masterCookingGlow {
  0%,100% { box-shadow: 0 8px 20px rgba(9,45,31,.24), 0 0 0 2px rgba(112,218,139,.3), 0 0 20px 4px rgba(112,218,139,.28), inset 0 1px 0 rgba(255,255,255,.12); }
  50% { box-shadow: 0 12px 26px rgba(9,45,31,.34), 0 0 0 3px rgba(112,218,139,.56), 0 0 38px 10px rgba(112,218,139,.58), inset 0 1px 0 rgba(255,255,255,.2); }
}
body[data-page-mode="master"] .master-managed-order.is-cooking :is(.eyebrow, .master-managed-head strong, .master-order-meta dd, .master-order-item span, .master-kitchen-note, .master-kitchen-note span, .master-manage-line, .master-manage-line span, .master-manage-line b) {
  color: #f4f8ee !important;
  -webkit-text-fill-color: #f4f8ee !important;
  text-shadow: none !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-meta dt,
body[data-page-mode="master"] .master-managed-order.is-cooking .master-manage-line small {
  color: #c6e7ce !important;
  -webkit-text-fill-color: #c6e7ce !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-status {
  color: #f4f8ee !important;
  background: #1c6948 !important;
  border: 1px solid #72cf8b !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-lines {
  border-color: rgba(198,231,206,.32) !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-item strong {
  color: #d6edaa !important;
  -webkit-text-fill-color: #d6edaa !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-kitchen-note {
  color: #f4f8ee !important;
  background: #1b5b40 !important;
  border-color: #9fda9e !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-editor {
  background: #174a36 !important;
  border-color: #70ba83 !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-editor label,
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-editor label span,
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-editor label b {
  color: #f4f8ee !important;
  -webkit-text-fill-color: #f4f8ee !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .master-order-editor select { color: #24231f !important; -webkit-text-fill-color: #24231f !important; background: #fffdf8 !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-page-mode="master"] .master-managed-order.is-cooking { animation: none; box-shadow: 0 0 0 2px #70da8b, 0 0 24px rgba(112,218,139,.55); }
}
body[data-page-mode="master"] .master-managed-order .master-manage-qty button {
  background: #183f30 !important;
  background-image: none !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  border: 1px solid #326d50 !important;
  box-shadow: 0 2px 4px rgba(10,38,27,.2) !important;
  font-weight: 700 !important;
}
body[data-page-mode="master"] .master-managed-order .master-manage-qty button:hover {
  background: #286447 !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons .status-cooking {
  background: #183f30 !important; background-image: none !important;
  color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important;
  border: 1px solid #326d50 !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons .status-served {
  background: #b28b4c !important; background-image: none !important;
  color: #211b10 !important; -webkit-text-fill-color: #211b10 !important;
  border: 1px solid #98733b !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons .status-cancelled {
  background: #f8ebe5 !important; background-image: none !important;
  color: #873b32 !important; -webkit-text-fill-color: #873b32 !important;
  border: 1px solid #d7a99b !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons .status-paid {
  background: #e5eedf !important; background-image: none !important;
  color: #183f30 !important; -webkit-text-fill-color: #183f30 !important;
  border: 1px solid #91ad83 !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons .status-paid:hover:not(:disabled) {
  background: #d1e2c6 !important;
}
body[data-page-mode="master"] .master-managed-order .order-action-buttons button:disabled {
  opacity: .72 !important; cursor: not-allowed !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking .order-action-buttons .status-cooking:disabled {
  background: #286447 !important; color: #e7f5e8 !important;
  -webkit-text-fill-color: #e7f5e8 !important; border-color: #70ba83 !important;
}
body[data-page-mode="master"] .master-managed-order .master-order-editor [data-save-order-items] {
  background: #fffdf8 !important; color: #183f30 !important;
  -webkit-text-fill-color: #183f30 !important; border: 1px solid #b9c8b7 !important;
}
body[data-page-mode="master"] .master-managed-order > [data-manage-order] {
  background: #fffdf8 !important;
  background-image: none !important;
  color: #183f30 !important;
  -webkit-text-fill-color: #183f30 !important;
  border: 1px solid #b9c8b7 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body[data-page-mode="master"] .master-managed-order.is-cooking > [data-manage-order] {
  background: #eaf4e8 !important;
  color: #123d2b !important;
  -webkit-text-fill-color: #123d2b !important;
  border-color: #91c69c !important;
}
body[data-page-mode="master"] .master-managed-order > [data-manage-order]:hover:not(:disabled) {
  background: #e8dfca !important;
  color: #183f30 !important;
  -webkit-text-fill-color: #183f30 !important;
}
@media (max-width: 600px) {
  body[data-page-mode] #my-orders-step .form-panel,
  body[data-page-mode] #history-form { padding: 18px !important; }
  body[data-page-mode] .history-actions { gap: 10px !important; }
  body[data-page-mode] .history-actions button { min-height: 44px !important; }
  body[data-page-mode] .add-menu-items-panel.add-items-modal {
    width: calc(100vw - 24px) !important; max-height: 82vh !important;
    padding: 16px !important;
  }
}

/* Keep order editing comfortable on narrow screens. */
@media (max-width: 600px) {
  body[data-page-mode] .order-edit-panel {
    padding: 16px !important;
    margin-top: 14px !important;
  }
  body[data-page-mode] .order-editor-menu {
    padding: 0 8px !important;
  }
  body[data-page-mode] .editor-title {
    line-height: 1.5 !important;
    margin: 0 8px 18px !important;
    padding: 2px 0 0 !important;
    overflow-wrap: anywhere;
  }
  body[data-page-mode] .order-edit-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 12px !important;
    line-height: 1.5 !important;
  }
  body[data-page-mode] .order-edit-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.55 !important;
    padding-right: 8px;
  }
  body[data-page-mode] .order-edit-row small {
    display: inline-block;
    margin-top: 4px;
    line-height: 1.45 !important;
  }
  body[data-page-mode] .editor-qty {
    flex: 0 0 auto;
    align-items: center !important;
    justify-content: center;
    gap: 10px !important;
  }
  body[data-page-mode] .editor-qty button {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    font-size: 20px !important;
  }
  body[data-page-mode] .editor-qty strong {
    min-width: 22px;
    text-align: center;
    line-height: 1.4;
  }
  body[data-page-mode] .home-active-order-card,
  body[data-page-mode] .history-card {
    padding: 16px !important;
  }
  body[data-page-mode] .home-active-order-card > strong,
  body[data-page-mode] .history-card-head strong {
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
    letter-spacing: .01em;
  }
  body[data-page-mode] .home-active-order-card .muted,
  body[data-page-mode] .history-lines,
  body[data-page-mode] .history-card-foot {
    line-height: 1.65 !important;
  }
}

/* Master menu editor forms and item cards, including narrow phone layouts. */
body[data-page-mode] #staff-items > .add-item-form,
body[data-page-mode] #staff-items > .staff-item,
body[data-page-mode] .master-items-list > .add-item-form,
body[data-page-mode] .master-items-list > .staff-item {
  color: #24231f !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border: 1px solid #b28b4c !important; border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(55, 43, 22, .10) !important;
}
body[data-page-mode] #staff-items .add-item-form h3,
body[data-page-mode] #staff-items .add-item-form label,
body[data-page-mode] .master-items-list .add-item-form h3,
body[data-page-mode] .master-items-list .add-item-form label {
  color: #183f30 !important;
}
body[data-page-mode] #staff-items .add-item-form input,
body[data-page-mode] #staff-items .add-item-form select,
body[data-page-mode] #staff-items .add-item-form textarea,
body[data-page-mode] .master-items-list .add-item-form input,
body[data-page-mode] .master-items-list .add-item-form select,
body[data-page-mode] .master-items-list .add-item-form textarea {
  color: #24231f !important; -webkit-text-fill-color: #24231f !important;
  background: #fffdf8 !important; background-color: #fffdf8 !important;
  background-image: none !important; border: 1px solid #b28b4c !important;
  border-radius: 10px !important;
}
body[data-page-mode] #staff-items .staff-item-main,
body[data-page-mode] #staff-items .staff-item-main small,
body[data-page-mode] #staff-items .field-help { color: #4e4a40 !important; }
body[data-page-mode] #staff-items .staff-item-main strong { color: #183f30 !important; }
body[data-page-mode] .guest-icon svg {
  display: block !important; width: 18px !important; height: 18px !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
}
body[data-page-mode] .brand-spark svg {
  display: block !important; width: 13px !important; height: 13px !important;
  fill: currentColor !important;
}
@media (max-width: 600px) {
  body[data-page-mode] #staff-items > .add-item-form,
  body[data-page-mode] .master-items-list > .add-item-form { padding: 16px !important; }
  body[data-page-mode] #staff-items .add-item-form > div,
  body[data-page-mode] .master-items-list .add-item-form > div {
    grid-template-columns: 1fr !important;
  }
}

/* Final contrast guard for customer order history and footer wordmark. */
html body[data-page-mode="customer"] #my-orders-step #history-form.panel.form-panel {
  color: #24231f !important; background: #fffdf8 !important;
  background-color: #fffdf8 !important; background-image: none !important;
  border: 1px solid #b28b4c !important; box-shadow: 0 12px 30px rgba(55,43,22,.10) !important;
}
html body[data-page-mode="customer"] #my-orders-step #history-form.panel.form-panel label,
html body[data-page-mode="customer"] #my-orders-step #history-form.panel.form-panel .field-help {
  color: #24231f !important;
}
html body[data-page-mode="customer"] #my-orders-step #history-form.panel.form-panel .field-help { color: #625d52 !important; }
html body[data-page-mode="customer"] .footer,
html body[data-page-mode="customer"] .footer > span,
html body[data-page-mode="customer"] .footer > span #footer-restaurant-name,
html body[data-page-mode="customer"] .footer > span .muted {
  color: #fffdf8 !important; -webkit-text-fill-color: #fffdf8 !important;
}
html body[data-page-mode="customer"] .footer .brand-dot {
  color: #d5b875 !important; -webkit-text-fill-color: #d5b875 !important;
}

/* Make the live clock easier to read while keeping it in the right header slot. */
body[data-page-mode] .topbar {
  display: flex !important; width: 100% !important; max-width: none !important;
  margin: 0 !important; flex-wrap: nowrap !important;
  justify-content: space-between !important; align-items: center !important;
}
body[data-page-mode] .brand { flex: 0 1 auto !important; min-width: 0 !important; }
body[data-page-mode] .header-clock {
  flex: 0 0 auto !important; min-width: 170px !important; align-items: flex-start !important;
  justify-content: center !important; gap: 4px !important;
  text-align: left !important; transform: none !important;
}
body[data-page-mode] .clock-greeting {
  align-self: flex-start !important; font-size: 11px !important;
  line-height: 1.2 !important; text-align: left !important;
}
body[data-page-mode] .digital-clock {
  align-self: flex-start !important; font-size: 19px !important;
  line-height: 1.15 !important; text-align: left !important;
}
body[data-page-mode] .digital-date {
  align-self: flex-start !important; font-size: 11px !important;
  line-height: 1.25 !important; text-align: left !important;
}
@media (max-width: 600px) {
  body[data-page-mode] .header-clock { min-width: 0 !important; }
  body[data-page-mode] .digital-clock { font-size: 17px !important; }
  body[data-page-mode] .clock-greeting,
  body[data-page-mode] .digital-date { font-size: 10px !important; }
}

/* Use the lotus mark from the supplied PNG inside the former A medallion. */
body[data-page-mode] .plate-core {
  display: grid !important; place-items: center !important; overflow: visible !important;
}
body[data-page-mode] .plate-core .lotus-icon {
  display: block !important; width: 112px !important; height: 66px !important;
  background-image: url("lotuslogo.png?v=1") !important;
  background-repeat: no-repeat !important; background-size: 224px auto !important;
  background-position: center top !important;
  animation: lotusIconFloat 3.6s ease-in-out infinite !important;
  will-change: transform;
}
body[data-page-mode] .art-caption {
  letter-spacing: .24em !important; word-spacing: .35em !important;
}
@keyframes lotusMarkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page-mode] .plate-core .lotus-icon { animation: none !important; }
}

/* Remove the welcome-art rectangle and replace the green medallion fill. */
body[data-page-mode] .welcome-art {
  display: grid !important; place-items: center !important;
  background: transparent !important; background-color: transparent !important;
  background-image: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body[data-page-mode] .welcome-art .plate-core {
  width: 108px !important; height: 108px !important;
  background: #eadfc9 !important; background-image: none !important;
  border: 1px solid #b28b4c !important; border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(79, 59, 29, .12) !important;
}
body[data-page-mode] .welcome-art .lotus-icon {
  position: relative !important; left: auto !important; top: auto !important;
  margin: 0 auto !important;
}
body[data-page-mode] .welcome-art .plate-ring {
  border-color: rgba(178, 139, 76, .58) !important;
}
body[data-page-mode] .welcome-art .art-caption {
  bottom: 3px !important; color: #70562d !important;
}

/* Show the untouched full logo in the center, with no medallion behind it. */
body[data-page-mode] .welcome-art {
  height: 180px !important; min-height: 180px !important;
  display: grid !important; place-items: center !important;
  overflow: visible !important;
}
body[data-page-mode] .welcome-art .plate-core,
body[data-page-mode] .welcome-art .plate-ring { display: none !important; }
body[data-page-mode] .welcome-art .welcome-logo {
  position: absolute !important; left: 50% !important; top: 45% !important;
  display: block !important; width: min(250px, 74vw) !important;
  height: auto !important; max-height: 140px !important;
  object-fit: contain !important; transform: translate(-50%, -50%) !important;
  animation: welcomeLogoFloat 4.5s ease-in-out infinite !important;
}
body[data-page-mode] .welcome-art .art-caption { bottom: 0 !important; }
@keyframes welcomeLogoFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@media (max-width: 600px) {
  body[data-page-mode] .welcome-art { height: 158px !important; min-height: 158px !important; }
  body[data-page-mode] .welcome-art .welcome-logo {
    width: min(220px, 78vw) !important; max-height: 122px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page-mode] .welcome-art .welcome-logo { animation: none !important; }
}

/* Keep the welcome area open; show only the centered circular lotus medallion. */
body[data-page-mode] .welcome-art {
  height: 180px !important; min-height: 180px !important;
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  overflow: visible !important;
}
body[data-page-mode] .welcome-art .plate-ring,
body[data-page-mode] .welcome-art .plate-core {
  display: block !important; position: absolute !important;
  left: 50% !important; top: 44% !important;
}
body[data-page-mode] .welcome-art .plate-ring {
  width: 138px !important; height: 138px !important;
  border: 1px solid #b28b4c !important; border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}
body[data-page-mode] .welcome-art .plate-core {
  display: grid !important; place-items: center !important;
  width: 108px !important; height: 108px !important;
  background: #eadfc9 !important; border: 1px solid #b28b4c !important;
  border-radius: 50% !important; box-shadow: 0 8px 22px rgba(79,59,29,.12) !important;
  transform: translate(-50%, -50%) !important;
}
body[data-page-mode] .welcome-art .plate-core .lotus-icon {
  display: block !important; width: 112px !important; height: 66px !important;
  background: url("lotuslogo.png?v=1") center top / 224px auto no-repeat !important;
  animation: lotusMarkFloat 4s ease-in-out infinite !important;
}
body[data-page-mode] .welcome-art .welcome-logo { display: none !important; }
body[data-page-mode] .welcome-art .art-caption { bottom: 0 !important; }
@media (max-width: 600px) {
  body[data-page-mode] .welcome-art { height: 158px !important; min-height: 158px !important; }
}

/* Override the ID-based legacy art panel and center the lotus-only crop. */
body[data-page-mode] #customer-step > .welcome-art {
  width: 100% !important; height: 180px !important; min-height: 180px !important;
  margin: 0 !important; padding: 0 !important; overflow: visible !important;
  background: transparent !important; background-color: transparent !important;
  background-image: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body[data-page-mode] #customer-step > .welcome-art .plate-core {
  left: 50% !important; top: 44% !important;
  width: 108px !important; height: 108px !important;
  transform: translate(-50%, -50%) !important;
}
body[data-page-mode] #customer-step > .welcome-art .plate-core .lotus-icon {
  position: relative !important; left: auto !important; top: auto !important;
  width: 112px !important; height: 59px !important;
  margin: 0 !important;
  background-size: 224px auto !important; background-position: center top !important;
}
@media (max-width: 600px) {
  body[data-page-mode] #customer-step > .welcome-art {
    height: 158px !important; min-height: 158px !important;
  }
}

/* Keep every lotus petal comfortably inside the inner medallion. */
body[data-page-mode] #customer-step > .welcome-art .plate-core {
  overflow: hidden !important; border-radius: 50% !important;
}
body[data-page-mode] #customer-step > .welcome-art .plate-core .lotus-icon {
  position: relative !important; flex: none !important;
  width: 80px !important; height: 46px !important;
  background-size: 160px auto !important; background-position: center top !important;
  margin: 0 !important;
  animation-name: lotusIconFloat !important;
  animation-duration: 2.4s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: transform;
}
@keyframes lotusIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Final header lockup: unboxed monogram, square clock tile, uppercase clock text. */
body[data-page-mode] .brand-mark {
  display: inline-grid !important; place-items: center !important;
  width: auto !important; height: auto !important; min-width: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  outline: 0 !important; background: transparent !important;
  box-shadow: none !important; color: #183f30 !important;
}
body[data-page-mode] .header-clock {
  width: 190px !important; min-width: 190px !important; height: 86px !important;
  padding: 8px 12px !important; box-sizing: border-box !important;
  align-items: flex-start !important; justify-content: center !important;
  gap: 3px !important; text-align: left !important;
  border: 1px solid #b28b4c !important; border-radius: 3px !important;
  background: #fffdf8 !important; box-shadow: none !important;
}
body[data-page-mode] .clock-greeting,
body[data-page-mode] .digital-clock,
body[data-page-mode] .digital-date {
  align-self: flex-start !important; text-align: left !important;
  text-transform: uppercase !important;
}
body[data-page-mode] .clock-greeting { font-size: 10px !important; letter-spacing: .1em !important; }
body[data-page-mode] .digital-clock { font-size: 17px !important; letter-spacing: .015em !important; }
body[data-page-mode] .digital-date { font-size: 9px !important; letter-spacing: .03em !important; }
@media (max-width: 600px) {
  body[data-page-mode] .header-clock {
    width: 156px !important; min-width: 156px !important; height: 78px !important;
    padding: 7px 9px !important;
  }
  body[data-page-mode] .digital-clock { font-size: 15px !important; }
  body[data-page-mode] .digital-date { font-size: 8px !important; }
}

/* Lotus wordmark used as the complete header brand on every page. */
body[data-page-mode] .brand {
  display: flex !important; align-items: center !important;
  width: max-content !important; margin-right: auto !important;
  text-decoration: none !important;
}
body[data-page-mode] .brand-logo {
  display: block !important; width: 226px !important; height: 110px !important;
  max-width: min(40vw, 226px) !important; object-fit: contain !important;
}
body[data-page-mode] .topbar { min-height: 126px !important; }
@media (max-width: 600px) {
  body[data-page-mode] .brand-logo {
    width: 156px !important; height: 76px !important; max-width: 43vw !important;
  }
  body[data-page-mode] .topbar { min-height: 94px !important; }
}

/* Compact header: transparent clock and smaller wordmark, aligned on one baseline. */
body[data-page-mode] .topbar {
  min-height: 104px !important; padding-top: 6px !important;
  padding-bottom: 6px !important; gap: 18px !important;
}
body[data-page-mode] .brand-logo {
  width: 188px !important; height: auto !important; aspect-ratio: auto !important;
  max-width: min(34vw, 188px) !important;
  object-fit: contain !important;
}
body[data-page-mode] .header-clock {
  width: 174px !important; min-width: 174px !important;
  height: auto !important; min-height: 0 !important;
  padding: 3px 0 3px 10px !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  body[data-page-mode] .topbar { min-height: 82px !important; gap: 8px !important; }
  body[data-page-mode] .brand-logo {
    width: 142px !important; height: auto !important; aspect-ratio: auto !important;
    max-width: 40vw !important;
  }
  body[data-page-mode] .header-clock {
    width: 154px !important; min-width: 154px !important;
    padding-left: 6px !important;
  }
}

/* Center the clock content within its transparent header area. */
body[data-page-mode] .header-clock {
  align-items: center !important; text-align: center !important;
}
body[data-page-mode] .clock-greeting,
body[data-page-mode] .digital-clock,
body[data-page-mode] .digital-date {
  align-self: center !important; text-align: center !important;
}

/* Use the original lotus icon image, fitted whole inside the center medallion. */
body[data-page-mode] #customer-step > .welcome-art .plate-core .lotus-icon {
  display: block !important;
  width: 90% !important;
  height: 90% !important;
  flex: none !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
  background: none !important;
  animation-name: lotusIconFloat !important;
  animation-duration: 2.4s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  will-change: transform;
}

@media (max-width: 600px) {
  body[data-page-mode] .footer { flex-wrap: wrap !important; gap: 14px !important; }
}

/* Use one consistent line-icon treatment across customer and staff pages. */
.ui-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .ui-icon, .back-button .ui-icon { margin-left: .45em; }
.back-button .ui-icon { margin: 0 .35em 0 0; }
.search-box > .ui-icon { width: 1.2rem; height: 1.2rem; margin: 0 .6rem; color: #9c7134; }
.payment-icon { width: 1.25rem; height: 1.25rem; }
.payment-note .ui-icon { width: 1rem; height: 1rem; margin-top: .1em; color: #9c7134; }
.success-symbol .ui-icon { width: 2rem; height: 2rem; margin: 0; }
.live-notification-top button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: .4rem; }
.live-notification-top button .ui-icon { width: 1.2rem; height: 1.2rem; margin: 0; }
body[data-page-mode] #customer-step > .step-label {
  align-self: center !important;
  margin-inline: auto !important;
  text-align: center !important;
}
body[data-page-mode] #menu-step .menu-tools {
  gap: 12px !important;
  padding: 8px 12px !important;
  border: 1px solid #b28b4c !important;
  border-radius: 12px !important;
  background: #fffdf8 !important;
}
body[data-page-mode] #menu-step .search-box {
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-page-mode] #menu-step .search-box > .ui-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-page-mode] #menu-step #search-input {
  min-width: 0 !important;
  padding: 8px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body[data-page-mode] #menu-step #search-input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.cooking-status-toast {
  position: fixed;
  z-index: 12000;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(330px, calc(100vw - 32px));
  padding: 12px 13px;
  border: 1px solid #b28b4c;
  border-radius: 12px;
  background: #fffdf8;
  color: #183f30;
  box-shadow: 0 12px 34px rgba(36, 35, 31, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.cooking-status-toast.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cooking-status-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #e9dfc9; color: #183f30; }
.cooking-status-icon svg, .cooking-status-toast button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cooking-status-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cooking-status-copy strong { color: #183f30; font-size: 13px; }
.cooking-status-copy small { color: #625d52; font-size: 11px; overflow-wrap: anywhere; }
.cooking-status-toast button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 4px; border: 0; background: transparent; color: #625d52; cursor: pointer; }
html body[data-page-mode="customer"] .cooking-status-toast .cooking-status-copy strong {
  color: #183f30 !important;
  -webkit-text-fill-color: #183f30 !important;
  text-shadow: none !important;
}
html body[data-page-mode="customer"] .cooking-status-toast > button {
  border: 1px solid #b28b4c !important;
  border-radius: 8px !important;
  background: #eee8dc !important;
  color: #183f30 !important;
  box-shadow: none !important;
}
html body[data-page-mode="customer"] .cooking-status-toast > button svg {
  stroke: #183f30 !important;
}
@media (max-width: 480px) { .cooking-status-toast { top: 10px; right: 10px; width: calc(100vw - 20px); } }
@media (prefers-reduced-motion: reduce) { .cooking-status-toast { transition: none; } }
body[data-page-mode="chef"] #cook-orders.staff-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 22px !important;
}
body[data-page-mode="chef"] .chef-order-section { min-width: 0; }
body[data-page-mode="chef"] .chef-section-heading {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  border-bottom: 1px solid #d9cfba; padding: 0 0 9px;
}
body[data-page-mode="chef"] .chef-section-heading h2 {
  margin: 0; color: #183f30 !important; font-size: 24px !important;
}
body[data-page-mode="chef"] .chef-section-heading > span {
  display: grid; place-items: center; min-width: 28px; height: 28px;
  padding: 0 8px; border-radius: 999px; background: #e9dfc9; color: #183f30;
  font-size: 12px; font-weight: 700;
}
body[data-page-mode="chef"] .chef-order-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
body[data-page-mode="chef"] .chef-section-empty {
  grid-column: 1 / -1; margin: 0; padding: 18px;
  border: 1px dashed #c9b78f; border-radius: 12px; color: #625d52;
}
body[data-page-mode="chef"] .chef-order-card {
  min-width: 0; gap: 10px; background: #fffdf8 !important;
  color: #24231f !important; border: 1px solid #b28b4c !important;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body[data-page-mode="chef"] .chef-order-card.is-cooking {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg, #e8f7df 0%, #d3edc9 100%) !important;
  color: #123d2b !important;
  border: 2px solid #1e6845 !important;
  transform: perspective(900px) translateY(-2px);
  animation: chefCookingPulse 1.8s ease-in-out infinite;
}
@keyframes chefCookingPulse {
  0%, 100% { box-shadow: 0 5px 12px rgba(18,61,43,.16), 0 0 0 2px rgba(30,104,69,.42), 0 0 22px 5px rgba(142,225,125,.58), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -5px 12px rgba(30,104,69,.12); }
  50% { box-shadow: 0 12px 24px rgba(18,61,43,.24), 0 0 0 3px rgba(30,104,69,.68), 0 0 42px 12px rgba(142,225,125,.86), inset 0 2px 0 rgba(255,255,255,.98), inset 0 -7px 16px rgba(30,104,69,.18); }
}
body[data-page-mode="chef"] .chef-order-card.is-delivered {
  background: #171816 !important; color: #fffdf8 !important;
  border-color: #171816 !important; box-shadow: 0 8px 22px rgba(23,24,22,.18) !important;
}
body[data-page-mode="chef"] .chef-order-card.is-delivered :is(strong, small, p, .cook-item, .cook-item span, .status-current) {
  color: #fffdf8 !important;
}
body[data-page-mode="chef"] .chef-order-card.is-delivered .gold-chip {
  color: #f2dfb5 !important; background: #302b20 !important; border-color: #8e7444 !important;
}
body[data-page-mode="chef"] .chef-order-card .status-current {
  width: fit-content; margin: 0 !important; padding: 5px 10px !important;
}
body[data-page-mode="chef"] .chef-order-card.is-cooking .status-current {
  color: #fffdf8 !important; background: #145437 !important; border-color: #0e3f2b !important;
}
body[data-page-mode="chef"] .chef-order-card.is-delivered .status-current {
  color: #f2dfb5 !important; background: #302b20 !important; border-color: #8e7444 !important;
}
body[data-page-mode="chef"] .chef-order-actions { display: flex; gap: 10px; margin-top: 4px; }
body[data-page-mode="chef"] .chef-order-actions .button {
  flex: 1; min-height: 42px; border-radius: 8px !important;
}
body[data-page-mode="chef"] .chef-action-cooking { background: #183f30 !important; color: #fffdf8 !important; }
body[data-page-mode="chef"] .chef-action-cooking.is-current { background: #145437 !important; color: #fffdf8 !important; border: 1px solid #0e3f2b !important; box-shadow: inset 0 2px 3px rgba(255,255,255,.18), 0 3px 8px rgba(20,84,55,.3) !important; }
body[data-page-mode="chef"] .chef-action-delivered { background: #eee8dc !important; color: #183f30 !important; border: 1px solid #b28b4c !important; }
body[data-page-mode="chef"] .chef-delivered-note { margin: 4px 0 0; color: #f2dfb5 !important; font-size: 12px; }
@media (max-width: 680px) { body[data-page-mode="chef"] .chef-order-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body[data-page-mode="chef"] .chef-order-card.is-cooking { animation: none; box-shadow: 0 0 0 2px #1e6845, 0 0 28px rgba(142,225,125,.72), inset 0 2px 0 #fff; } }

body[data-page-mode="master"] .master-order-toolbar { display: flex; align-items: center; gap: 8px; }
body[data-page-mode="master"] .master-filter-summary { margin: 0 0 12px; color: #625d52; font-size: 13px; }
body[data-page-mode="master"] .master-filter-summary:empty { display: none; }
body[data-page-mode="master"] .master-order-filter-form { display: grid; gap: 12px; width: min(460px, 100%); max-height: min(90vh, 760px); overflow-y: auto; color: #24231f !important; }
body[data-page-mode="master"] .master-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body[data-page-mode="master"] .master-filter-heading h2 { margin: 0; color: #183f30 !important; }
body[data-page-mode="master"] .master-order-filter-form > label { display: grid; gap: 6px; color: #24231f !important; font-weight: 600; }
body[data-page-mode="master"] .master-order-filter-form input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b28b4c; border-radius: 8px; background: #fffdf8; color: #24231f; }
body[data-page-mode="master"] .master-order-filter-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b28b4c; border-radius: 8px; background: #fffdf8; color: #24231f; }
body[data-page-mode="master"] .master-order-filter-form input:focus { outline: 2px solid #183f30; outline-offset: 1px; }
@media (max-width: 520px) {
  body[data-page-mode="master"] .master-panel-heading { align-items: flex-start; gap: 10px; }
  body[data-page-mode="master"] .master-order-toolbar { flex-wrap: wrap; justify-content: flex-end; }
  body[data-page-mode="master"] .master-order-toolbar .button { min-height: 40px; padding: 8px 11px; }
}

body[data-page-mode="master"] .master-delivered-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
body[data-page-mode="master"] .master-delivered-actions .button { min-width: 0; margin: 0; }
@media (max-width: 480px) {
  body[data-page-mode="master"] .master-delivered-actions { grid-template-columns: 1fr; }
}

/* Keep restaurant settings cards aligned and equal in width. */
body[data-page-mode="master"] .settings-intro { text-align: left !important; margin: 0 0 20px !important; }
body[data-page-mode="master"] .settings-intro h2,
body[data-page-mode="master"] .settings-intro p { text-align: left !important; }
body[data-page-mode="master"] .settings-board {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}
body[data-page-mode="master"] .settings-card {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
  align-items: stretch !important;
}
body[data-page-mode="master"] .settings-card-head,
body[data-page-mode="master"] .settings-card label,
body[data-page-mode="master"] .settings-card .field-help { text-align: left !important; }
body[data-page-mode="master"] .settings-card input,
body[data-page-mode="master"] .settings-card textarea,
body[data-page-mode="master"] .settings-card .time-pair { width: 100% !important; }
body[data-page-mode="master"] .settings-savebar { grid-column: 1 / -1 !important; }
@media (max-width: 700px) {
  body[data-page-mode="master"] .settings-board { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-page-mode="master"] .settings-savebar { grid-column: 1 !important; }
}

/* Add breathing room around text and controls in the customer order editor. */
body[data-page-mode] .order-edit-row {
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
}
body[data-page-mode] .order-edit-row > span {
  min-width: 0 !important;
  padding: 0 8px 0 2px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}
body[data-page-mode] .order-edit-row small {
  display: inline-block !important;
  margin-top: 4px !important;
  line-height: 1.45 !important;
}

/* Chef footer: readable brand, centered label, and separated page links. */
html body[data-page-mode="chef"] .footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 24px !important;
  min-height: 82px !important;
  padding: 18px clamp(22px, 6vw, 88px) !important;
  text-align: initial !important;
}
html body[data-page-mode="chef"] #footer-restaurant-name {
  justify-self: start !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
html body[data-page-mode="chef"] .footer > .muted {
  justify-self: center !important;
  color: #d9bd82 !important;
  -webkit-text-fill-color: #d9bd82 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}
html body[data-page-mode="chef"] .footer .staff-entry {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body[data-page-mode="chef"] .footer .staff-entry a {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body[data-page-mode="chef"] .footer .staff-entry a:hover,
html body[data-page-mode="chef"] .footer .staff-entry a:focus-visible {
  color: #f0d99f !important;
  -webkit-text-fill-color: #f0d99f !important;
  text-decoration: underline !important;
}
@media (max-width: 700px) {
  html body[data-page-mode="chef"] .footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  html body[data-page-mode="chef"] #footer-restaurant-name,
  html body[data-page-mode="chef"] .footer > .muted,
  html body[data-page-mode="chef"] .footer .staff-entry { justify-self: center !important; }
  html body[data-page-mode="chef"] .footer .staff-entry { flex-wrap: wrap !important; gap: 12px 20px !important; }
}

/* Master footer: give the brand, section label, and navigation room to breathe. */
html body[data-page-mode="master"] .footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 24px !important;
  min-height: 82px !important;
  padding: 18px clamp(22px, 6vw, 88px) !important;
  text-align: initial !important;
}
html body[data-page-mode="master"] #footer-restaurant-name {
  justify-self: start !important;
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
html body[data-page-mode="master"] .footer > .muted {
  justify-self: center !important;
  color: #d9bd82 !important;
  -webkit-text-fill-color: #d9bd82 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}
html body[data-page-mode="master"] .footer .staff-entry {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body[data-page-mode="master"] .footer .staff-entry a {
  color: #fffdf8 !important;
  -webkit-text-fill-color: #fffdf8 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
html body[data-page-mode="master"] .footer .staff-entry a:hover,
html body[data-page-mode="master"] .footer .staff-entry a:focus-visible {
  color: #f0d99f !important;
  -webkit-text-fill-color: #f0d99f !important;
  text-decoration: underline !important;
}
@media (max-width: 700px) {
  html body[data-page-mode="master"] .footer {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  html body[data-page-mode="master"] #footer-restaurant-name,
  html body[data-page-mode="master"] .footer > .muted,
  html body[data-page-mode="master"] .footer .staff-entry { justify-self: center !important; }
  html body[data-page-mode="master"] .footer .staff-entry { flex-wrap: wrap !important; gap: 12px 20px !important; }
}

/* Order cards respond to hover, while completed cards shift tint as they age. */
html body[data-page-mode="master"] .master-managed-order {
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 250ms ease, border-color 250ms ease;
}
html body[data-page-mode="master"] .master-managed-order:hover,
html body[data-page-mode="master"] .master-managed-order:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(55, 43, 22, .16);
  border-color: #a77a38;
}
html body[data-page-mode="master"] .master-managed-order.delivered.age-minute-0 { background: #edf5e9; border-color: #8eae7a; }
html body[data-page-mode="master"] .master-managed-order.delivered.age-minute-1 { background: #f5f0df; border-color: #c7ae70; }
html body[data-page-mode="master"] .master-managed-order.delivered.age-minute-2 { background: #eaf2f1; border-color: #8eaaa4; }
html body[data-page-mode="master"] .master-managed-order.delivered.age-minute-3 { background: #f3edf6; border-color: #b5a0c0; }
html body[data-page-mode="master"] .master-managed-order.delivered.age-minute-4 { background: #f2eee6; border-color: #c2b69e; }
html body[data-page-mode="master"] .master-managed-order.cancelled.age-minute-0 { background: #f9e9e4; border-color: #c9897c; }
html body[data-page-mode="master"] .master-managed-order.cancelled.age-minute-1 { background: #f6eee2; border-color: #c5a16c; }
html body[data-page-mode="master"] .master-managed-order.cancelled.age-minute-2 { background: #f4e9eb; border-color: #bd929a; }
html body[data-page-mode="master"] .master-managed-order.cancelled.age-minute-3 { background: #f1ece5; border-color: #b7a791; }
html body[data-page-mode="master"] .master-managed-order.cancelled.age-minute-4 { background: #eeeae5; border-color: #b2a89a; }
@media (prefers-reduced-motion: reduce) {
  html body[data-page-mode="master"] .master-managed-order { transition: none; }
  html body[data-page-mode="master"] .master-managed-order:hover,
  html body[data-page-mode="master"] .master-managed-order:focus-within { transform: none; }
}

/* Settings fields need clear separation from both card and field borders. */
html body[data-page-mode="master"] .settings-card {
  box-sizing: border-box !important;
  padding: 22px !important;
}
html body[data-page-mode="master"] .settings-card label {
  margin: 16px 0 10px !important;
  line-height: 1.5 !important;
}
html body[data-page-mode="master"] .settings-card > label > input,
html body[data-page-mode="master"] .settings-card > label > textarea {
  box-sizing: border-box !important;
  margin-top: 9px !important;
  padding: 12px 14px !important;
  text-align: left !important;
}
html body[data-page-mode="master"] .settings-card > label > textarea {
  line-height: 1.65 !important;
}
html body[data-page-mode="master"] .settings-card .field-help {
  margin: 0 0 18px 2px !important;
  line-height: 1.55 !important;
}
html body[data-page-mode="master"] .settings-card .time-pair {
  box-sizing: border-box !important;
  gap: 12px !important;
  margin-top: 9px !important;
}
html body[data-page-mode="master"] .settings-card .time-pair > span {
  box-sizing: border-box !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border: 1px solid #b28b4c !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
}
html body[data-page-mode="master"] .settings-card .time-pair input {
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
@media (max-width: 700px) {
  html body[data-page-mode="master"] .settings-card { padding: 18px !important; }
}

/* The Chef display uses a compact header without the global slogan strip. */
html body[data-page-mode="chef"]::before { content: none !important; display: none !important; }
@keyframes stock-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .28), 0 8px 24px rgba(120, 0, 0, .12); }
  50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, .18), 0 8px 30px rgba(120, 0, 0, .24); }
}
body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock {
  background: #fee2e2 !important;
  border: 2px solid #dc2626 !important;
  color: #7f1d1d !important;
  animation: stock-card-pulse 1.8s ease-in-out infinite !important;
}
body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock .staff-item-main,
body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock .staff-item-main small,
body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock .staff-item-main strong,
body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock .field-help { color: #7f1d1d !important; }
body[data-page-mode="master"] #staff-items > .staff-item.status-hidden {
  background: #e5e7eb !important;
  border: 2px solid #9ca3af !important;
  color: #4b5563 !important;
  box-shadow: none !important;
  animation: none !important;
}
body[data-page-mode="master"] #staff-items > .staff-item.status-hidden .staff-item-main,
body[data-page-mode="master"] #staff-items > .staff-item.status-hidden .staff-item-main small,
body[data-page-mode="master"] #staff-items > .staff-item.status-hidden .staff-item-main strong,
body[data-page-mode="master"] #staff-items > .staff-item.status-hidden .field-help { color: #4b5563 !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-page-mode="master"] #staff-items > .staff-item.status-out-of-stock { animation: none !important; }
}
@keyframes ready-order-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, .3), 0 8px 22px rgba(120, 80, 0, .1); }
  50% { box-shadow: 0 0 0 7px rgba(234, 179, 8, .22), 0 8px 30px rgba(120, 80, 0, .2); }
}
html body[data-page-mode="master"] .master-managed-order.ready-order {
  background: #fff4b8 !important;
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .2), 0 0 24px rgba(234, 179, 8, .36), 0 8px 22px rgba(120, 80, 0, .12) !important;
  animation: ready-order-pulse 1.8s ease-in-out infinite;
}
html body[data-page-mode="master"] .master-managed-order.ready-order .master-order-status {
  background: #facc15 !important;
  color: #422006 !important;
}
body[data-page-mode="chef"] .status-ready.is-current,
body[data-page-mode="master"] .master-order-status.is-ready {
  background: #facc15 !important;
  color: #422006 !important;
}
body[data-page-mode="chef"] .chef-action-ready {
  background: #facc15 !important;
  color: #422006 !important;
  border: 1px solid #ca8a04 !important;
}
@media (prefers-reduced-motion: reduce) {
  html body[data-page-mode="master"] .master-managed-order.ready-order { animation: none !important; }
}