/* Single cyberpunk palette and shared layout. */
:root {
  color-scheme: dark;
  --bg: #090e19;
  --surface: #111a2a;
  --surface-alt: #19253a;
  --text: #f2f6ff;
  --muted: #a1b5ca;
  --accent: #5be7e9;
  --accent-text: #071923;
  --accent-soft: #173749;
  --line: #2d4760;
  --eyebrow: #8ae6e9;
  --warm: #fb78b7;
  --hero: #111d35;
  --hero-text: #f5fbff;
  --hero-muted: #bdd3e3;
  --hero-highlight: #ff84c2;
  --plan: #111d2f;
  --plan-line: #28465b;
  --plan-bar: #a43d83;
  --table-free: #183f50;
  --table-free-line: #65e5e7;
  --table-free-text: #bafaff;
  --table-busy: #303441;
  --table-busy-line: #596178;
  --table-busy-text: #a2a8bb;
  --status: #17464f;
  --danger: #ff779b;
  --shadow: 0 18px 56px #0009177d;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); transition: background .22s ease, color .22s ease; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; }
.app-shell { max-width: 1080px; }
.topbar { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.brand { color: var(--text); letter-spacing: .055em; }
.brand-mark { background: var(--accent); color: var(--accent-text); }
.brand-dot { color: var(--warm); }
.topbar-right { color: var(--muted); white-space: nowrap; }
.open-dot { background: var(--table-free-line); box-shadow: 0 0 0 4px var(--accent-soft); }

.eyebrow { color: var(--hero-highlight); }
.eyebrow.dark { color: var(--eyebrow); }
h1, h2, h3, strong { color: inherit; }
.hero { background: var(--hero); color: var(--hero-text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero:before { background: radial-gradient(circle at 80% 48%, color-mix(in srgb, var(--hero-highlight) 18%, transparent), transparent 35%), linear-gradient(135deg, transparent 45%, #ffffff08 100%); }
.hero h1 { letter-spacing: -.055em; }
.hero h1 em { color: var(--hero-highlight); }
.hero p { color: var(--hero-muted); }
.hero-btn { background: var(--hero-highlight); color: var(--hero); border-radius: 10px; }
.hero-btn:hover, .primary-btn:hover, .detail-btn:hover, .add-btn:hover { filter: brightness(1.08); }
.art-circle { background: color-mix(in srgb, var(--hero-highlight) 12%, transparent); border-color: color-mix(in srgb, var(--hero-highlight) 25%, transparent); }
.cup-shadow { background: #0007; }
.section-heading { margin-top: 42px; }
.feature-card { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: none; }
.feature-card:hover { box-shadow: var(--shadow); }
.feature-card small, .page-heading p, .product-info p, .map-top small, .table-detail small, .profile-intro small, .history-card small { color: var(--muted); }
.feature-card small { font-size: 12px; }
.feature-icon.peach { background: var(--accent-soft); color: var(--accent); }
.feature-icon.mint { background: var(--surface-alt); color: var(--accent); }
.feature-arrow, .heading-star { color: var(--warm); }
.home-note, .profile-intro { background: var(--surface-alt); color: var(--muted); }
.home-note strong { color: var(--text); }
.avatar { background: var(--accent-soft); }
.page-heading h1 { letter-spacing: -.055em; }

.menu-search, .category-tabs button, .product-card, .map-wrap, .table-detail, .empty-state, .history-card { background: var(--surface); color: var(--text); border-color: var(--line); }
.menu-search { color: var(--muted); }
.menu-search input { color: var(--text); }
.menu-search input::placeholder { color: var(--muted); }
.category-tabs button { color: var(--muted); }
.category-tabs button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.menu-count, .product-info .restaurant-name, .product-info .badge { color: var(--eyebrow); }
.product-card { box-shadow: none; }
.product-card:hover { border-color: var(--accent); }
.product-info h3 { font-size: 15px; }
.product-info p { font-size: 11px; line-height: 1.5; }
.product-info .restaurant-name { font-size: 10px; }
.menu-count { font-size: 11px; }
.product-image { background: var(--surface-alt); }
.product-image:before { background: color-mix(in srgb, var(--hero-highlight) 38%, transparent); }
.product-bottom .price { color: var(--text); }
.add-btn, .qty button { background: var(--accent); color: var(--accent-text); }
.menu-empty { background: var(--surface); border-color: var(--line); color: var(--muted); }

.booking-controls label, .scheduled-fields label, .field-label { color: var(--muted); }
.booking-controls label, .scheduled-fields label { font-size: 11px; }
.booking-controls input, .booking-controls select, .scheduled-fields input, .scheduled-fields select, .field-label input { background: var(--surface); border-color: var(--line); color: var(--text); }
.map-wrap { box-shadow: none; }
.north-icon { color: var(--warm); }
.floor-plan { background-color: var(--plan); background-image: linear-gradient(var(--plan-line) 1px, transparent 1px), linear-gradient(90deg, var(--plan-line) 1px, transparent 1px); border-color: var(--plan-line); }
.window-band { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, var(--plan)) 0 23%, var(--surface-alt) 23% 26%); border-color: var(--plan-line); }
.window-band span { color: var(--muted); }
.plan-bar { background: var(--plan-bar); color: var(--hero-text); }
.plan-entry { background: var(--surface-alt); border-color: var(--plan-line); color: var(--muted); }
.plan-plant { color: var(--eyebrow); }
.table { background: var(--table-free); border-color: var(--table-free-line); color: var(--table-free-text); box-shadow: 0 3px 0 var(--plan-line); }
.table:before, .table:after { background: var(--plan-line); }
.table.busy { background: var(--table-busy); border-color: var(--table-busy-line); color: var(--table-busy-text); box-shadow: 0 3px 0 var(--plan-line); opacity: .66; }
.table.selected { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 32%, transparent); }
.map-legend, .detail-placeholder { color: var(--muted); }
.legend-dot.free { background: var(--table-free-line); }
.legend-dot.busy { background: var(--table-busy-line); }
.legend-dot.selected { background: var(--accent); }
.detail-btn, .primary-btn, .cart-fab { background: var(--accent); color: var(--accent-text); }
.primary-btn { font-size: 13px; }

.history-card .status { background: var(--status); color: var(--accent); }
.history-card .status.cancelled { background: var(--surface-alt); color: var(--muted); }
.cancel-link { color: var(--danger); }
.bottom-nav { background: var(--surface); border-top-color: var(--line); box-shadow: 0 -8px 30px #00000012; }
.bottom-nav button { color: var(--muted); }
.bottom-nav button.active { color: var(--accent); }
.cart-fab { box-shadow: var(--shadow); }
.cart-fab b { background: var(--accent-text); color: var(--accent); }

.modal-backdrop { background: #090d0db8; }
.modal-sheet { background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.modal-head p { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.close-btn { background: var(--surface-alt); color: var(--text); }
.cart-row { border-bottom-color: var(--line); }
.cart-row-info small, .payment-note { color: var(--muted); }
.segmented { background: var(--surface-alt); }
.segmented button { color: var(--muted); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: none; }
.eta-line, .booking-summary { background: var(--accent-soft); color: var(--text); }
.modal-total { border-top-color: var(--line); }
.toast { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); }
.toast.error { background: var(--danger); color: #fff; }

:root .hero { background-image: linear-gradient(135deg, #111d35, #15112d); border-color: #3d5b79; }
:root .hero:before { background: radial-gradient(circle at 78% 42%, #62dbe52b, transparent 37%), linear-gradient(90deg, #f772c20d 1px, transparent 1px); background-size: auto, 32px 32px; }
:root .brand-mark { text-shadow: 0 0 12px #65e5e7; }
:root .table.selected { box-shadow: 0 0 0 4px #5be7e930, 0 0 23px #5be7e975; }
:root .cup { filter: hue-rotate(155deg) saturate(.75); }

@media (max-width: 700px) {
  .app-shell { padding-left: 16px; padding-right: 16px; }
  .topbar { height: 64px; margin-bottom: 8px; }
  .topbar-actions { gap: 9px; }
  .hero { min-height: 370px; }
  .feature-card { min-height: 170px; }
  .feature-card small { font-size: 11px; }
}
@media (max-width: 390px) {
  .topbar-right span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}