/* ====================================================================
   ALLBOOKEU — MOBILE APP DESIGN SYSTEM
   Dark navy · Red accent · Glass cards · Bottom navigation
   Applies only to max-width: 768px (phone screens + Capacitor WebView)
   ==================================================================== */

/* ---- MOBILE DESIGN TOKENS ---- */
:root {
  --m-bg:          #07090f;
  --m-surface:     #0d1421;
  --m-surface-2:   #111827;
  --m-border:      rgba(255,255,255,0.07);
  --m-text:        #f1f5f9;
  --m-muted:       #64748b;
  --m-subtle:      #334155;
  --m-red:         #dc2626;
  --m-red-glow:    rgba(220,38,38,0.14);
  --m-red-text:    #fca5a5;
  --m-green:       #4ade80;
  --m-green-bg:    rgba(34,197,94,0.10);
  --m-nav-h:       58px;
  --m-bottom-h:    72px;
  --m-radius:      16px;
  --m-radius-sm:   12px;
  --m-glass:       rgba(13,20,37,0.88);
}

/* ====================================================================
   BOTTOM NAVIGATION — rendered in base.html, visible only on mobile
   ==================================================================== */

.mobile-bottom-nav {
  display: none; /* hidden on desktop; shown via media query below */
}

/* 5-item owner nav: slightly smaller labels so nothing is clipped */
.mobile-bottom-nav--five .mbn-label {
  font-size: 0.56rem;
}
.mobile-bottom-nav--five .mbn-icon {
  font-size: 1.15rem;
}
.mobile-bottom-nav--six .mbn-label {
  font-size: 0.52rem;
}
.mobile-bottom-nav--six .mbn-icon {
  font-size: 1.05rem;
}

/* ====================================================================
   ALL MOBILE OVERRIDES
   ==================================================================== */

@media (max-width: 768px) {

  /* --- BASE --- */
  html, body {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
  }

  body.has-bottom-nav {
    padding-bottom: calc(var(--m-bottom-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- BOTTOM NAVIGATION --- */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    background: rgba(7,9,15,0.96);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid var(--m-border);
    height: var(--m-bottom-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  }

  .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    color: var(--m-subtle);
    transition: color 0.18s;
    padding: 8px 0 4px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .mbn-item.mbn-active { color: var(--m-red); }
  .mbn-item:active { opacity: 0.55; }

  .mbn-icon {
    font-size: 1.25rem;
    line-height: 1;
    display: block;
    transition: transform 0.18s;
  }

  .mbn-item.mbn-active .mbn-icon { transform: scale(1.12); }

  .mbn-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* Active pill indicator */
  .mbn-item.mbn-active::before {
    content: '';
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 2px;
    background: var(--m-red);
    border-radius: 0 0 3px 3px;
  }

  /* --- HIDE FOOTER ON MOBILE (bottom nav replaces it) --- */
  .footer { display: none !important; }

  /* --- NAVBAR --- */
  .navbar {
    background: rgba(7,9,15,0.94) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom-color: var(--m-border) !important;
    height: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px)) !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  .navbar-inner {
    min-height: var(--m-nav-h) !important;
    height: var(--m-nav-h) !important;
    max-width: none !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .navbar .nav-links {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  .navbar .lang-switcher {
    flex: 0 0 auto !important;
    padding: 5px 7px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  .nav-link, .nav-user-name { color: #94a3b8 !important; }
  .nav-avatar { background: var(--m-red) !important; }

  .btn-nav-biz {
    background: var(--m-red) !important;
    color: #fff !important;
    border-color: var(--m-red) !important;
  }

  .btn-nav-signup {
    background: rgba(255,255,255,0.06) !important;
    border-color: var(--m-border) !important;
    color: #94a3b8 !important;
  }

  .nav-dropdown {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
  }

  .nav-dropdown-header { background: rgba(255,255,255,0.03) !important; border-bottom-color: var(--m-border) !important; }
  .nav-dd-name { color: #f1f5f9 !important; }
  .nav-dd-email { color: var(--m-muted) !important; }
  .nav-dd-item { color: #94a3b8 !important; }
  .nav-dd-item:hover { background: rgba(255,255,255,0.05) !important; color: #f1f5f9 !important; }
  .nav-dd-divider { background: var(--m-border) !important; }
  .nav-dd-logout { color: var(--m-red-text) !important; }

  /* --- FLASH MESSAGES --- */
  .flash-container {
    top: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 10px !important; right: 10px !important;
    width: auto !important; max-width: none !important;
  }

  .flash {
    background: rgba(13,20,37,0.96) !important;
    color: #e2e8f0 !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    border-radius: 12px !important;
  }

  .flash-success { border-color: rgba(34,197,94,0.3) !important; }
  .flash-error   { border-color: rgba(220,38,38,0.3) !important; }
  .flash-warning { border-color: rgba(234,179,8,0.3) !important; }

  /* ====================================================================
     HOMEPAGE
     ==================================================================== */

  .hero-premium { min-height: 480px !important; }

  .hero-eyebrow { font-size: 0.64rem !important; }

  .hero-headline {
    font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
    letter-spacing: -0.03em !important;
  }

  .hero-subtext { font-size: 0.9rem !important; color: #475569 !important; }

  .hero-search-module {
    border-radius: var(--m-radius) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
  }

  .hero-stats-strip { display: none !important; }

  /* Cuisine bar */
  .cuisine-bar {
    background: #090c14 !important;
    border-bottom-color: var(--m-border) !important;
  }

  .cuisine-pill {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #64748b !important;
  }

  .cuisine-pill.active {
    background: var(--m-red) !important;
    border-color: var(--m-red) !important;
    color: #fff !important;
  }

  /* Restaurants section */
  .restaurants-section { background: var(--m-bg) !important; padding: 24px 0 !important; }

  .section-header h2 { color: #f1f5f9 !important; }
  .see-all { color: var(--m-red-text) !important; }

  .restaurant-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .rc-body { background: var(--m-surface) !important; }
  .rc-name { color: #f1f5f9 !important; }
  .rc-meta { color: var(--m-muted) !important; }
  .rc-dot { color: #1e293b !important; }
  .rc-time-btn {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.2) !important;
    color: var(--m-red-text) !important;
    min-height: 36px !important;
  }
  .rc-time-btn:hover { background: var(--m-red) !important; color: #fff !important; }

  /* Features strip */
  .features-strip {
    background: #090c14 !important;
    border-bottom-color: var(--m-border) !important;
    padding: 40px 0 !important;
  }

  .features-strip .section-header h2 { color: #f1f5f9 !important; }
  .features-strip .section-header p { color: var(--m-muted) !important; }

  .feature-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: var(--m-radius) !important;
    padding: 22px 18px !important;
  }

  .feature-card h3 { color: #f1f5f9 !important; }
  .feature-card p { color: var(--m-muted) !important; }

  /* Cities */
  .cities-section { background: var(--m-bg) !important; padding: 0 0 32px !important; }

  .city-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .city-name { color: #f1f5f9 !important; }
  .city-count { color: var(--m-muted) !important; }

  .city-card:hover {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.25) !important;
  }

  /* CTA dark */
  .cta-dark { background: #04060a !important; }

  /* ====================================================================
     SEARCH PAGE
     ==================================================================== */

  .search-bar-wrap {
    background: rgba(7,9,15,0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom-color: var(--m-border) !important;
    top: var(--m-nav-h) !important;
  }

  .sbf-inner {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }

  .sbf-field { background: transparent !important; }
  .sbf-field label { color: var(--m-muted) !important; }

  .sbf-field select,
  .sbf-field input { color: #f1f5f9 !important; background: transparent !important; }

  .sbf-btn { background: var(--m-red) !important; }
  .sbf-divider { background: rgba(255,255,255,0.07) !important; }

  .search-body { background: var(--m-bg) !important; }

  .results-count { color: #94a3b8 !important; }
  .results-count strong { color: #f1f5f9 !important; }

  /* Result cards */
  .result-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .result-name a { color: #f1f5f9 !important; }
  .result-meta { color: var(--m-muted) !important; }
  .result-desc { color: #64748b !important; }

  .result-time-btn {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.2) !important;
    color: var(--m-red-text) !important;
    border-radius: 10px !important;
    min-height: 44px !important;
  }

  .result-time-btn:hover {
    background: var(--m-red) !important;
    color: #fff !important;
    border-color: var(--m-red) !important;
  }

  .result-paused {
    background: rgba(255,255,255,0.04) !important;
    color: var(--m-muted) !important;
  }

  .result-no-times { color: var(--m-muted) !important; }

  /* Mobile filter panel */
  .mobile-filter-panel {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
  }

  .mobile-filter-panel summary { color: #f1f5f9 !important; }
  .mobile-filter-body { border-top-color: var(--m-border) !important; }

  .filter-label { color: var(--m-muted) !important; }

  .filter-opt {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #94a3b8 !important;
    border-radius: 999px !important;
    min-height: 38px !important;
  }

  .filter-opt.active {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.25) !important;
    color: var(--m-red-text) !important;
    font-weight: 700 !important;
  }

  .no-results { background: var(--m-bg) !important; }
  .no-results h3 { color: #f1f5f9 !important; }
  .no-results p { color: var(--m-muted) !important; }

  /* ====================================================================
     RESTAURANT DETAIL & RESERVATION WIDGET
     ==================================================================== */

  .restaurant-page { background: var(--m-bg) !important; }
  .rp-body { background: var(--m-bg) !important; padding-top: 16px !important; }
  .restaurant-page,
  .premium-booking-page {
    overflow-x: hidden !important;
  }

  .rp-section {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-bottom: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    margin-bottom: 12px !important;
  }

  .rp-section h2 { color: #f1f5f9 !important; }
  .rp-description { color: #94a3b8 !important; }
  .rp-info-label { color: var(--m-muted) !important; }
  .rp-day { color: #f1f5f9 !important; }
  .rp-time { color: #94a3b8 !important; }
  .rp-hour-row { border-bottom-color: var(--m-border) !important; }
  .rp-info-row a { color: var(--m-red-text) !important; }

  .premium-facts span {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
  }

  /* Reviews */
  .review-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .reviewer-name { color: #f1f5f9 !important; }
  .review-date { color: var(--m-muted) !important; }
  .review-text { color: #94a3b8 !important; }
  .rstar { color: #1e293b !important; }
  .rstar-filled { color: #f59e0b !important; }

  /* Reservation widget */
  .reservation-widget,
  .premium-widget {
    background: var(--m-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: none !important;
  }

  .premium-rw-header {
    background: rgba(255,255,255,0.03) !important;
    border-bottom-color: var(--m-border) !important;
  }

  .premium-rw-header h3 { color: #f1f5f9 !important; }
  .premium-kicker { color: var(--m-red-text) !important; }

  .booking-step-pill {
    background: var(--m-red-glow) !important;
    color: var(--m-red-text) !important;
  }

  .rw-label { color: var(--m-muted) !important; }
  .section-helper { color: var(--m-muted) !important; }
  .party-display { color: #f1f5f9 !important; }

  /* Party buttons */
  .party-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    width: 40px !important; height: 40px !important;
  }

  .premium-party-row {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }

  /* Date buttons */
  .date-btn, .premium-date-btn {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
  }

  .date-btn:hover { border-color: rgba(220,38,38,0.3) !important; }

  .date-active, .premium-date-btn.date-active {
    background: var(--m-red) !important;
    border-color: var(--m-red) !important;
    color: #fff !important;
  }

  .db-day { opacity: 0.6 !important; }
  .db-count { color: rgba(255,255,255,0.4) !important; }
  .date-active .db-count { color: rgba(255,255,255,0.7) !important; }

  /* Date nav */
  .date-nav-btn {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
  }

  .date-nav-btn:hover:not(:disabled) {
    border-color: rgba(220,38,38,0.4) !important;
    color: var(--m-red-text) !important;
    background: var(--m-red-glow) !important;
  }

  /* Time buttons */
  .time-btn, .premium-time-btn {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.16) !important;
    color: var(--m-red-text) !important;
    border-radius: 10px !important;
    min-height: 52px !important;
  }

  .time-active, .premium-time-btn.time-active {
    background: var(--m-red) !important;
    border-color: var(--m-red) !important;
    color: #fff !important;
  }

  .premium-time-btn small { color: rgba(252,165,165,0.7) !important; }
  .premium-time-btn.time-active small { color: rgba(255,255,255,0.75) !important; }

  /* No times */
  .no-times { color: var(--m-muted) !important; }
  .premium-no-times {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.15) !important;
    border-radius: 10px !important;
    color: #fcd34d !important;
  }

  .time-loading {
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--m-muted) !important;
    border-radius: 10px !important;
  }

  /* Summary box */
  .rw-summary, .premium-summary {
    background: #050810 !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
  }

  .summary-title { color: #f1f5f9 !important; }
  .rws-label { color: var(--m-muted) !important; }
  .rws-row span:last-child { color: #f1f5f9 !important; }

  /* Guest detail form */
  .form-section-title { color: #f1f5f9 !important; }

  .rw-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
    min-height: 48px !important;
  }

  .rw-input::placeholder { color: #1e293b !important; }

  .rw-input:focus {
    border-color: rgba(220,38,38,0.45) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important;
  }

  .rw-textarea { min-height: 72px !important; }

  .rw-prefill-note {
    background: var(--m-green-bg) !important;
    color: #4ade80 !important;
    border-radius: 10px !important;
  }

  .rw-error {
    background: rgba(220,38,38,0.10) !important;
    color: #f87171 !important;
    border-color: rgba(220,38,38,0.2) !important;
    border-radius: 10px !important;
  }

  .rw-consent { color: #475569 !important; font-size: 0.78rem !important; }
  .rw-policy { color: #1e293b !important; }

  /* Main CTA buttons - premium pill on mobile */
  .btn-reserve, .btn-continue {
    border-radius: 14px !important;
    min-height: 52px !important;
    font-size: 0.98rem !important;
    box-shadow: 0 4px 20px rgba(220,38,38,0.28) !important;
  }

  .btn-reserve:hover { transform: none !important; }

  /* Info card */
  .rp-info-card, .premium-info-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .ric-row { color: #94a3b8 !important; border-bottom-color: var(--m-border) !important; }
  .ric-icon { color: var(--m-muted) !important; font-size: 0.68rem !important; }

  /* Success state */
  .reservation-success, .premium-success {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .reservation-success h3 { color: #f1f5f9 !important; }
  .reservation-success p { color: var(--m-muted) !important; }

  .rs-details, .premium-success .rs-details {
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--m-border) !important;
    border-radius: 10px !important;
  }

  .rs-detail-row { border-bottom-color: var(--m-border) !important; }
  .premium-success .rs-detail-row strong { color: var(--m-muted) !important; }
  .premium-success .rs-detail-row span { color: #f1f5f9 !important; font-weight: 600 !important; }

  .after-booking-help {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.15) !important;
    border-radius: 10px !important;
    color: #fcd34d !important;
  }

  .after-booking-help a { color: #fbbf24 !important; }

  /* Paused box */
  .reservation-paused-box, .premium-paused {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .reservation-paused-box h3 { color: #f1f5f9 !important; }
  .reservation-paused-box p { color: var(--m-muted) !important; }

  /* Mobile book bar (above bottom nav) */
  .mobile-book-bar {
    background: rgba(7,9,15,0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top-color: var(--m-border) !important;
    bottom: var(--m-bottom-h) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45) !important;
    padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mbb-name { color: #f1f5f9 !important; }
  .mbb-sub { color: var(--m-muted) !important; }

  /* ====================================================================
     CUSTOMER DASHBOARD
     ==================================================================== */

  .dash-layout { background: var(--m-bg) !important; }
  .dash-main { background: var(--m-bg) !important; padding: 20px 14px 40px !important; }

  .dash-header h1 { color: #f1f5f9 !important; letter-spacing: -0.03em !important; }
  .dash-header p { color: var(--m-muted) !important; }

  /* Stats */
  .dash-stats-row { gap: 10px !important; }

  .dash-stat-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 16px !important;
  }

  .dsc-num { color: #f1f5f9 !important; font-size: 1.75rem !important; letter-spacing: -0.04em !important; }
  .dsc-label { color: var(--m-muted) !important; }

  .dash-section-title {
    color: #f1f5f9 !important;
    border-bottom-color: var(--m-border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Booking cards */
  .booking-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .booking-card:hover { transform: none !important; box-shadow: none !important; }

  .bc-biz-img { background: #131d32 !important; }
  .bc-biz-name { color: #f1f5f9 !important; }
  .bc-biz-name a { color: #f1f5f9 !important; }
  .bc-category { color: var(--m-muted) !important; }
  .bc-info-row { color: var(--m-muted) !important; }
  .bc-notes { color: #475569 !important; }
  .bc-actions { border-left-color: var(--m-border) !important; gap: 8px !important; }

  .bc-btn-view {
    background: var(--m-red-glow) !important;
    color: var(--m-red-text) !important;
    border: 1px solid rgba(220,38,38,0.2) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
  }

  .bc-btn-cancel {
    background: transparent !important;
    color: #475569 !important;
    border-color: rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
  }

  /* Status badges */
  .bc-status-confirmed  { background: var(--m-green-bg) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,0.2) !important; border-radius: 999px !important; }
  .bc-status-cancelled  { background: rgba(220,38,38,0.1) !important; color: #f87171 !important; border: 1px solid rgba(220,38,38,0.18) !important; border-radius: 999px !important; }
  .bc-status-completed  { background: rgba(59,130,246,0.1) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,0.16) !important; border-radius: 999px !important; }
  .bc-status-seated     { background: rgba(139,92,246,0.1) !important; color: #c4b5fd !important; border: 1px solid rgba(139,92,246,0.16) !important; border-radius: 999px !important; }

  /* Empty state */
  .dash-empty {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .dash-empty h3 { color: #94a3b8 !important; }
  .dash-empty p { color: #475569 !important; }

  /* Dash card */
  .dash-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .dash-card-title { color: #f1f5f9 !important; border-bottom-color: var(--m-border) !important; }

  /* Inputs */
  .dash-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: var(--m-radius-sm) !important;
    font-size: 16px !important;
  }

  .dash-input:focus {
    border-color: rgba(220,38,38,0.45) !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important;
  }

  .dash-input::placeholder { color: #1e293b !important; }

  .dash-input-disabled { background: rgba(255,255,255,0.03) !important; color: #334155 !important; }

  /* Form labels */
  .form-group label, .auth-field label { color: var(--m-muted) !important; }

  /* Info list */
  .dash-info-row { border-bottom-color: var(--m-border) !important; color: #94a3b8 !important; }
  .dash-info-row span:last-child { color: #f1f5f9 !important; }

  /* Badge */
  .dash-badge {
    background: var(--m-red-glow) !important;
    color: var(--m-red-text) !important;
    border-color: rgba(220,38,38,0.2) !important;
  }

  /* Account summary card */
  .account-summary-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .account-summary-name { color: #f1f5f9 !important; }
  .account-summary-email { color: var(--m-muted) !important; }
  .account-summary-head { border-bottom-color: var(--m-border) !important; }

  /* ====================================================================
     BIZ OWNER DASHBOARD
     ==================================================================== */

  .dash-page { background: var(--m-bg) !important; }

  .mobile-ops-app {
    display: block !important;
    min-height: calc(100vh - var(--m-bottom-h));
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px 24px !important;
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    overflow-x: hidden !important;
  }

  .dash-page:has(.mobile-ops-app) .dash-page-header,
  .dash-page:has(.mobile-ops-app) .dash-main > div[style*="padding:28px"] {
    display: none !important;
  }

  .mobile-ops-app ~ .dash-page-header,
  .mobile-ops-app ~ div[style*="padding:28px"] {
    display: none !important;
  }

  .mo-header {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -4px -12px 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px 10px;
    background: rgba(7,9,15,0.96);
    border-bottom: 1px solid var(--m-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mo-safe-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
    gap: 8px;
    align-items: center;
  }

  .mo-date-arrow,
  .mo-message-btn {
    min-height: 38px;
    border: 1px solid var(--m-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    color: var(--m-text);
    font-size: 1.1rem;
    font-weight: 900;
  }

  .mo-message-btn {
    color: var(--m-red-text);
  }

  .mo-date-title {
    min-width: 0;
    text-align: center;
  }

  .mo-date-title span {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .mo-date-title strong {
    display: block;
    color: var(--m-text);
    font-size: 1rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mo-day-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
  }

  .mo-day-chip {
    min-height: 46px;
    border: 1px solid var(--m-border);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
  }

  .mo-day-chip span {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mo-day-chip strong {
    color: var(--m-text);
    font-size: 1rem;
    line-height: 1.15;
  }

  .mo-day-chip.active {
    background: var(--m-red);
    border-color: var(--m-red);
    color: #fff;
  }

  .mo-day-chip.active strong { color: #fff; }

  .mo-tabs > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .mo-tabbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
  }

  .mo-tabbar label {
    min-height: 38px;
    border: 1px solid var(--m-border);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.045);
    color: #cbd5e1;
    font-size: 0.66rem;
    font-weight: 850;
    text-align: center;
    padding: 6px 8px;
  }

  #mo-tab-overview:checked ~ .mo-tabbar label[for="mo-tab-overview"],
  #mo-tab-list:checked ~ .mo-tabbar label[for="mo-tab-list"],
  #mo-tab-floor:checked ~ .mo-tabbar label[for="mo-tab-floor"],
  #mo-tab-timeline:checked ~ .mo-tabbar label[for="mo-tab-timeline"],
  #mo-tab-more:checked ~ .mo-tabbar label[for="mo-tab-more"] {
    background: rgba(220,38,38,0.18);
    border-color: rgba(220,38,38,0.42);
    color: #fff;
  }

  .mo-panel { display: none; }
  #mo-tab-overview:checked ~ .mo-panel-overview,
  #mo-tab-list:checked ~ .mo-panel-list,
  #mo-tab-floor:checked ~ .mo-panel-floor,
  #mo-tab-timeline:checked ~ .mo-panel-timeline,
  #mo-tab-more:checked ~ .mo-panel-more {
    display: block;
  }

  .mo-summary-grid,
  .mo-highlight-list,
  .mo-table-grid,
  .mo-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mo-stat-card,
  .mo-card,
  .mo-res-card,
  .mo-table-card,
  .mo-overview-hero {
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: none;
  }

  .mo-stat-card {
    min-height: 92px;
    padding: 14px;
  }

  .mo-stat-card span,
  .mo-card-head span,
  .mo-res-top span,
  .mo-table-card span,
  .mo-table-card em,
  .mo-timeline-card span {
    color: #94a3b8;
  }

  .mo-stat-card span {
    display: block;
    min-height: 30px;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .mo-stat-card strong {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
  }

  .mo-stat-card.primary {
    background: linear-gradient(135deg, rgba(220,38,38,0.26), rgba(255,255,255,0.05));
    border-color: rgba(220,38,38,0.36);
  }

  .mo-stat-card.danger strong { color: #fca5a5; }

  .mo-card {
    margin-top: 12px;
    padding: 14px;
  }

  .mo-card-head,
  .mo-group-title,
  .mo-floor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .mo-card-head h3,
  .mo-group-title h3,
  .mo-floor-head h3 {
    color: var(--m-text);
    font-size: 0.98rem;
    letter-spacing: 0;
  }

  .mo-floor-head a {
    color: var(--m-red-text);
    font-size: 0.78rem;
    font-weight: 850;
  }

  .mo-flow-bars {
    height: 128px;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 7px;
    align-items: end;
  }

  .mo-flow-bar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
  }

  .mo-flow-bar span {
    display: block;
    min-height: 8px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, #ef4444, #991b1b);
  }

  .mo-flow-bar em {
    color: #64748b;
    font-size: 0.58rem;
    font-style: normal;
    text-align: center;
    overflow: hidden;
  }

  .mo-mini-list,
  .mo-res-group,
  .mo-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mo-mini-row,
  .mo-timeline-card {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 11px;
    background: rgba(255,255,255,0.04);
  }

  .mo-mini-row strong,
  .mo-timeline-card strong {
    display: block;
    color: var(--m-text);
    font-size: 0.88rem;
  }

  .mo-mini-row span {
    display: block;
    color: #94a3b8;
    font-size: 0.78rem;
    margin-top: 4px;
  }

  .mo-empty-text {
    color: #94a3b8;
    font-size: 0.84rem;
    margin: 0;
  }

  .mo-overview-hero {
    padding: 14px;
    background: linear-gradient(135deg, #0d1421, #182033 62%, #33151a);
  }

  .mo-overview-hero span {
    color: #fca5a5;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .mo-overview-hero strong {
    display: block;
    margin-top: 4px;
    color: #fff;
    font-size: 1.25rem;
  }

  .mo-overview-hero p {
    color: #cbd5e1;
    font-size: 0.8rem;
    margin-top: 4px;
  }

  .mo-overview-actions,
  .mo-res-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .mo-overview-actions a,
  .mo-res-actions a,
  .mo-res-actions button,
  .mo-more-grid a {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.055);
    color: var(--m-text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
  }

  .mo-res-actions form { margin: 0; }
  .mo-res-actions button.danger { color: #fca5a5; }

  .mo-highlight-list { margin-top: 12px; }
  .mo-highlight-list div {
    border-radius: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.04);
  }
  .mo-highlight-list strong {
    display: block;
    color: #fff;
    font-size: 1.25rem;
  }
  .mo-highlight-list span {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 4px;
  }

  .mo-res-group { margin-bottom: 16px; }
  .mo-group-title span {
    min-width: 28px;
    min-height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    color: #cbd5e1;
    font-weight: 900;
  }

  .mo-res-card {
    padding: 12px;
    border-left: 4px solid #64748b;
  }

  .mo-res-card.status-confirmed { border-left-color: #60a5fa; }
  .mo-res-card.status-seated { border-left-color: #f59e0b; }
  .mo-res-card.status-completed { border-left-color: #22c55e; }
  .mo-res-card.status-cancelled { border-left-color: #ef4444; opacity: 0.76; }

  .mo-res-top {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }

  .mo-res-top time {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
  }

  .mo-res-top strong {
    display: block;
    color: #fff;
    font-size: 0.94rem;
    overflow-wrap: anywhere;
  }

  .mo-res-top span {
    display: block;
    font-size: 0.76rem;
    margin-top: 2px;
  }

  .mo-status {
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.06);
    color: #cbd5e1 !important;
    font-size: 0.66rem !important;
    font-weight: 850;
    text-transform: uppercase;
  }

  .mo-res-card p {
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 10px 0 0;
    overflow-wrap: anywhere;
  }

  .mo-table-card {
    padding: 12px;
  }

  .mo-table-card.reserved {
    border-color: rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.08);
  }

  .mo-table-card strong {
    display: block;
    color: #fff;
    font-size: 1rem;
  }

  .mo-table-card span,
  .mo-table-card em {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
  }

  .mo-table-card em {
    margin-top: 8px;
    color: #86efac;
    font-weight: 850;
  }

  .mo-table-card.reserved em { color: #fde68a; }
  .mo-table-card p {
    color: #cbd5e1;
    font-size: 0.78rem;
    margin-top: 8px;
  }

  .mo-time-slot {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .mo-time-slot > time {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 900;
    padding-top: 11px;
  }

  .mo-time-slot > div {
    min-height: 44px;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding-left: 10px;
  }

  .mo-time-slot p {
    min-height: 44px;
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #64748b;
    font-size: 0.82rem;
    margin: 0;
  }

  .mo-more-grid a {
    justify-content: flex-start;
    padding: 0 14px;
  }

  /* Header banner */
  .dash-page-header {
    padding: 20px 16px !important;
    border-radius: 0 !important;
  }

  .dph-title { font-size: 1.15rem !important; }
  .dph-sub { font-size: 0.78rem !important; }

  .dph-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .btn-dph-primary, .btn-dph-secondary { justify-content: center !important; min-height: 44px !important; }

  /* KPI cards */
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  .kpi-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 16px !important;
  }

  .kpi-label { color: var(--m-muted) !important; }
  .kpi-value { color: #f1f5f9 !important; font-size: 2rem !important; }
  .kpi-trend.up { color: #4ade80 !important; }
  .kpi-trend.down { color: #f87171 !important; }
  .kpi-trend.neutral { color: var(--m-muted) !important; }

  /* Stat grid */
  .db-stats { gap: 10px !important; }

  .db-stat {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 14px !important;
  }

  .db-stat-num { color: #f1f5f9 !important; font-size: 1.6rem !important; letter-spacing: -0.04em !important; }
  .db-stat-label { color: var(--m-muted) !important; }
  .db-stat-sub.up { color: #4ade80 !important; }
  .db-stat-sub.down { color: #f87171 !important; }
  .db-stat-sub.neutral { color: var(--m-muted) !important; }

  /* Chart / card containers */
  .db-card, .db-chart-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .db-card-title { color: #f1f5f9 !important; }
  .db-chart-title { color: #f1f5f9 !important; }
  .db-chart-sub { color: var(--m-muted) !important; }
  .chart-legend-item { color: var(--m-muted) !important; }

  /* Onboarding */
  .onboarding-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: 16px !important;
  }

  .onboarding-title { color: #f1f5f9 !important; }
  .onboarding-sub { color: var(--m-muted) !important; }
  .onboarding-count strong { color: #f1f5f9 !important; }
  .onboarding-count span { color: var(--m-muted) !important; }
  .onboarding-progress { background: rgba(255,255,255,0.07) !important; }

  .onboarding-item {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
    min-height: 0 !important;
  }

  .onboarding-item.is-done {
    background: rgba(34,197,94,0.07) !important;
    border-color: rgba(34,197,94,0.14) !important;
  }

  .onboarding-check {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #475569 !important;
  }

  .onboarding-label { color: #f1f5f9 !important; }
  .onboarding-helper { color: var(--m-muted) !important; }

  /* Timeline */
  .tl-time { color: var(--m-red-text) !important; }

  .tl-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
  }

  .tl-name { color: #f1f5f9 !important; }
  .tl-card-meta { color: var(--m-muted) !important; }
  .tl-status-confirmed { background: var(--m-green-bg) !important; color: #4ade80 !important; }
  .tl-status-completed { background: var(--m-red-glow) !important; color: var(--m-red-text) !important; }
  .tl-status-cancelled { background: rgba(220,38,38,0.08) !important; color: #f87171 !important; }
  .timeline-item::before { background: rgba(255,255,255,0.07) !important; }

  /* Week calendar */
  .wc-day {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: 10px !important;
  }

  .wc-day-today { border-color: rgba(220,38,38,0.25) !important; background: rgba(220,38,38,0.06) !important; }
  .wc-day-name { color: #f1f5f9 !important; }
  .wc-day-date { color: var(--m-muted) !important; }
  .wc-chip-time { color: var(--m-red-text) !important; }
  .wc-chip-name { color: #94a3b8 !important; }
  .wc-more { color: var(--m-muted) !important; }
  .wc-empty { color: #1e293b !important; }

  /* Quick actions */
  .qa-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    color: #94a3b8 !important;
    border-radius: var(--m-radius-sm) !important;
    min-height: 44px !important;
  }

  .qa-btn:hover {
    background: var(--m-red-glow) !important;
    color: var(--m-red-text) !important;
    border-color: rgba(220,38,38,0.2) !important;
  }

  /* Res timeline rows */
  .res-row { border-bottom-color: var(--m-border) !important; }
  .res-name { color: #f1f5f9 !important; }
  .res-meta { color: var(--m-muted) !important; }
  .res-time { color: var(--m-red-text) !important; }

  /* Bookings table (card view on mobile) */
  .bk-filters {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .bk-table tr {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: none !important;
  }

  .bk-table td { color: #94a3b8 !important; }
  .bk-guest-name { color: #f1f5f9 !important; }
  .bk-guest-sub { color: var(--m-muted) !important; }
  .bk-date { color: #f1f5f9 !important; }

  .bk-status-confirmed { background: var(--m-green-bg) !important; color: #4ade80 !important; border-radius: 999px !important; }
  .bk-status-completed { background: var(--m-red-glow) !important; color: var(--m-red-text) !important; border-radius: 999px !important; }
  .bk-status-cancelled { background: rgba(220,38,38,0.08) !important; color: #f87171 !important; border-radius: 999px !important; }

  /* ====================================================================
     TABLE SETUP
     ==================================================================== */

  .tables-add-box {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .tables-add-box h3 { color: #f1f5f9 !important; border-bottom-color: var(--m-border) !important; }

  .atf-field label { color: var(--m-muted) !important; }

  .atf-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  .atf-input:focus {
    border-color: rgba(220,38,38,0.4) !important;
    box-shadow: 0 0 0 3px rgba(220,38,38,0.10) !important;
    background: rgba(255,255,255,0.08) !important;
  }

  .floor-section {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .fs-name { color: #f1f5f9 !important; }
  .fs-count { color: var(--m-muted) !important; }

  .table-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.07) !important;
    border-radius: var(--m-radius-sm) !important;
  }

  .tc-number { color: #f1f5f9 !important; }
  .tc-seats { color: var(--m-muted) !important; }
  .tc-notes { color: #475569 !important; }
  .tc-badge.active { background: var(--m-green-bg) !important; color: #4ade80 !important; }
  .tc-badge.inactive { background: rgba(255,255,255,0.05) !important; color: #475569 !important; }

  .tc-btn {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
  }

  .tc-delete { color: #f87171 !important; }

  .no-tables-empty {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .no-tables-empty h3 { color: #f1f5f9 !important; }
  .no-tables-empty p { color: var(--m-muted) !important; }

  /* ====================================================================
     PROFILE & SETTINGS
     ==================================================================== */

  .profile-card {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .profile-section-title { color: #f1f5f9 !important; border-bottom-color: var(--m-border) !important; }
  .profile-section-sub { color: var(--m-muted) !important; }
  .profile-section-head { border-bottom-color: var(--m-border) !important; }
  .pf-field label { color: var(--m-muted) !important; }

  .profile-card .hours-grid {
    background: var(--m-surface-2) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text) !important;
  }

  .hours-row {
    background: rgba(255,255,255,0.045) !important;
    border-color: var(--m-border) !important;
    border-radius: 10px !important;
  }

  .hours-row.is-closed {
    background: rgba(255,255,255,0.025) !important;
  }

  .hours-day-label { color: var(--m-text) !important; }
  .hours-day-label small { color: var(--m-green) !important; }
  .hours-row.is-closed .hours-day-label small { color: #94a3b8 !important; }
  .hours-to { color: #cbd5e1 !important; }

  .hours-select {
    background: #111827 !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: var(--m-text) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  .hours-select option {
    background: #111827;
    color: var(--m-text);
  }

  .hours-closed-toggle { color: #cbd5e1 !important; }

  .filter-select, .filter-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* ====================================================================
     AUTH PAGES (mobile — no split, full-width dark card)
     ==================================================================== */

  .auth-split { grid-template-columns: 1fr !important; }
  .auth-brand-panel { display: none !important; }
  .auth-form-panel {
    background: var(--m-bg) !important;
    padding: 20px 16px 40px !important;
    min-height: calc(100vh - var(--m-nav-h)) !important;
    align-items: flex-start !important;
  }

  .auth-page {
    background: var(--m-bg) !important;
    padding: 20px 0 40px !important;
    min-height: auto !important;
    display: block !important;
  }

  .auth-card {
    background: var(--m-surface) !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 26px 20px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45) !important;
    max-width: 100% !important;
  }

  .auth-title { color: #f1f5f9 !important; }
  .auth-sub { color: var(--m-muted) !important; }

  .auth-tabs {
    background: rgba(255,255,255,0.05) !important;
  }

  .auth-tab { color: #475569 !important; }

  .auth-tab-active {
    background: var(--m-red) !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(220,38,38,0.3) !important;
  }

  .auth-section-label {
    color: var(--m-muted) !important;
    border-bottom-color: var(--m-border) !important;
  }

  .auth-footer { color: #334155 !important; }
  .auth-footer a { color: var(--m-red-text) !important; }

  .auth-biz-badge {
    background: var(--m-red-glow) !important;
    color: var(--m-red-text) !important;
    border-color: rgba(220,38,38,0.2) !important;
  }

  /* ====================================================================
     MODAL (dark glass)
     ==================================================================== */

  .modal-overlay { background: rgba(0,0,0,0.75) !important; }

  .modal-box {
    background: var(--m-surface) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65) !important;
  }

  .modal-header {
    border-bottom-color: var(--m-border) !important;
    background: rgba(255,255,255,0.03) !important;
  }

  .modal-header h3 { color: #f1f5f9 !important; }
  .modal-close { color: var(--m-muted) !important; }
  .modal-field label { color: var(--m-muted) !important; }

  /* ====================================================================
     SECONDARY BUTTONS
     ==================================================================== */

  .btn-outline {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #94a3b8 !important;
    border-radius: var(--m-radius-sm) !important;
    min-height: 44px !important;
  }

  .btn-outline:hover {
    background: rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
  }

  .btn-dash-primary {
    border-radius: var(--m-radius-sm) !important;
    min-height: 44px !important;
    box-shadow: 0 3px 12px rgba(220,38,38,0.25) !important;
  }

  /* ====================================================================
     GLOBAL INPUT & SELECT APPEARANCE ON DARK
     ==================================================================== */

  select { color-scheme: dark; }
  input[type="date"] { color-scheme: dark; }

  /* ====================================================================
     BIZ DASH PAUSE BOX (in sidebar area that's hidden)
     ==================================================================== */

  .ds-pause-box {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
  }

  .ds-pause-box.is-paused {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.2) !important;
  }

  .dpb-msg { color: #475569 !important; }

  .dpb-reason-input {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
    font-size: 16px !important;
  }

  /* ====================================================================
     NAVBAR — COMPACT ONE-LINE ON MOBILE
     For logged-in users (has-bottom-nav): hide redundant nav text links.
     Bottom nav handles navigation; only avatar + lang stay in navbar.
     ==================================================================== */

  .has-bottom-nav .navbar-inner {
    flex-wrap: nowrap !important;
  }

  .has-bottom-nav .nav-links {
    width: auto !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 4px !important;
  }

  /* Hide text nav links for logged-in users (bottom nav handles them) */
  .has-bottom-nav .nav-links .nav-link {
    display: none !important;
  }

  /* Compact avatar button on all mobile */
  .nav-avatar-btn {
    padding: 4px 8px 4px 4px !important;
    gap: 5px !important;
  }

  /* Guest buttons: compact so all three fit one row */
  .btn-nav-signup {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  /* ====================================================================
     HERO SEARCH — DARK STACKED FIELDS
     style.css stacks .hsf-inner at ≤680px; we dark-theme it here.
     ==================================================================== */

  .hero-premium-inner {
    padding: 52px 16px 28px !important;
  }

  .hero-subtext {
    margin-bottom: 20px !important;
  }

  /* Dark glass container */
  .hero-search-module {
    background: rgba(13,20,37,0.96) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  }

  /* Each stacked field row */
  .hsf-field {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 12px 16px !important;
    background: transparent !important;
  }

  .hsf-field label {
    color: var(--m-muted) !important;
    font-size: 0.63rem !important;
    letter-spacing: 0.06em !important;
  }

  .hsf-field select,
  .hsf-field input[type="date"] {
    color: #f1f5f9 !important;
    background: transparent !important;
    font-size: 1rem !important;
    min-height: 30px !important;
  }

  /* Search button: full-width red pill at bottom */
  .hsf-btn {
    background: var(--m-red) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    min-height: 52px !important;
    width: 100% !important;
    border-radius: 0 0 var(--m-radius) var(--m-radius) !important;
    letter-spacing: -0.01em !important;
  }

  /* ====================================================================
     HOMEPAGE LAYOUT — GRID FIXES
     ==================================================================== */

  /* Single-column restaurant grid */
  .restaurant-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Single-column "how it works" strip */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .feature-card { padding: 20px 16px !important; }

  /* Two-column cities */
  .cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Tighter vertical padding */
  .restaurants-section { padding: 24px 0 32px !important; }
  .cities-section      { padding: 0 0 24px !important; }

  /* CTA button: full width on mobile */
  .btn-cta-white {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* ====================================================================
     SEARCH PAGE — HIDE DESKTOP SIDEBAR
     style.css already hides .search-filters & shows .mobile-filter-panel
     at ≤680px; this ensures it for our 768px breakpoint too.
     ==================================================================== */

  .search-filters  { display: none !important; }
  .search-layout   { display: block !important; }
  .search-results  { width: 100% !important; }

  .mobile-filter-panel {
    margin-bottom: 12px !important;
    border-radius: var(--m-radius) !important;
  }

  /* Taller card image so text sits below, not beside */
  .result-img-link { height: 170px !important; }

  /* Bigger time slot tap targets on result cards */
  .result-time-btn {
    min-height: 44px !important;
    font-size: 0.85rem !important;
    padding: 9px 14px !important;
  }

  /* ====================================================================
     DASHBOARD SIDEBARS — HIDDEN ON MOBILE
     Bottom nav + navbar avatar dropdown replaces sidebar navigation.
     ==================================================================== */

  .dash-layout > .dash-sidebar,
  .dash-page > .dash-sidebar {
    display: none !important;
  }

  /* With sidebar gone, keep layout as row so main fills full width */
  .dash-layout,
  .dash-page {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .dash-main {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ====================================================================
     BOOKING CARDS — STACKED VERTICAL LAYOUT
     ==================================================================== */

  .booking-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .bc-biz-img {
    width: 100% !important;
    height: 130px !important;
    flex-shrink: 0 !important;
  }

  .bc-details { padding: 14px 14px 10px !important; }

  .bc-actions {
    border-left: none !important;
    border-top: 1px solid var(--m-border) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 10px 14px 14px !important;
    gap: 8px !important;
  }

  .bc-btn-view,
  .bc-btn-cancel,
  .bc-btn-review {
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 9px 10px !important;
    font-size: 0.8rem !important;
  }

  .bc-btn-review {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: #94a3b8 !important;
    border-radius: 10px !important;
  }

  /* ====================================================================
     REVIEW MODAL — DARK GLASS
     .review-modal-card replaces the inline background:#fff.
     ==================================================================== */

  .review-modal-card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 20px !important;
    padding: 24px 20px !important;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65) !important;
  }

  .review-modal-card h3  { color: #f1f5f9 !important; }
  .review-modal-card > p { color: var(--m-muted) !important; }

  /* Star rating labels */
  .review-modal-card .star-label { color: #334155 !important; }

  /* Inline-label text for rating / review sections */
  .review-modal-card > form > div > div { color: var(--m-muted) !important; }

  .review-modal-card textarea {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    color: #f1f5f9 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  .review-modal-card textarea::placeholder { color: #334155 !important; }

  .review-modal-card button[type="submit"] {
    background: var(--m-red) !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    border: none !important;
    color: #fff !important;
  }

  .review-modal-card button[type="button"] {
    background: rgba(255,255,255,0.06) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 12px !important;
    min-height: 48px !important;
  }

  /* ====================================================================
     MARKETING PAGE — DARK PANELS + MOBILE LAYOUT
     ==================================================================== */

  .mobile-owner-marketing-card,
  .mobile-marketing-dashboard {
    display: block !important;
    background: linear-gradient(135deg, #0d1421 0%, #111827 62%, #2b1118 100%) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-text) !important;
    box-shadow: none !important;
  }

  .mobile-owner-marketing-card { margin: 0 0 16px !important; }

  .mobile-marketing-dashboard {
    margin-bottom: 14px !important;
    padding: 18px 14px !important;
  }

  .mom-head,
  .mmd-head { gap: 10px !important; }

  .mom-head h2,
  .mmd-head h1 {
    color: var(--m-text) !important;
    font-size: 1.25rem !important;
  }

  .mom-head p,
  .mmd-head p {
    color: #94a3b8 !important;
    font-size: 0.84rem !important;
  }

  .mom-status,
  .mmd-status {
    background: var(--m-green-bg) !important;
    color: var(--m-green) !important;
  }

  .mom-status.is-paused,
  .mmd-status.is-paused {
    background: rgba(245,158,11,0.12) !important;
    color: #fde68a !important;
  }

  .mom-stats,
  .mmd-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mom-stats div,
  .mmd-stat-grid div {
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }

  .mom-stats span,
  .mmd-stat-grid span { color: #94a3b8 !important; }

  .mom-stats strong,
  .mmd-stat-grid strong {
    color: var(--m-text) !important;
    font-size: 1.35rem !important;
  }

  .mom-actions,
  .mmd-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mom-actions a,
  .mmd-actions a {
    min-height: 52px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--m-text) !important;
    font-size: 0.82rem !important;
  }

  .mom-actions .mom-primary,
  .mmd-actions .mmd-primary {
    background: var(--m-red) !important;
    border-color: var(--m-red) !important;
    color: #fff !important;
  }

  /* Dark panel cards */
  .marketing-panel {
    background: var(--m-surface) !important;
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
  }

  .marketing-panel h2        { color: #f1f5f9 !important; }
  .marketing-section-kicker  { color: var(--m-red-text) !important; }

  .marketing-reach-pill {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.22) !important;
    color: var(--m-red-text) !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 0.76rem !important;
  }

  /* Campaign template quick-pick buttons */
  .campaign-template {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.09) !important;
    color: #94a3b8 !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
    font-size: 0.79rem !important;
    padding: 10px 10px !important;
    flex: unset !important;
  }

  .campaign-template:hover {
    background: var(--m-red-glow) !important;
    border-color: rgba(220,38,38,0.2) !important;
    color: var(--m-red-text) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* 2-col template grid — tappable instead of horizontal scroll */
  .campaign-template-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow-x: visible !important;
    flex-wrap: unset !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    margin-bottom: 16px !important;
  }

  /* Single-column form fields */
  .marketing-form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Workspace: single column (already done at 980px but reinforce) */
  .marketing-workspace {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Hero section */
  .marketing-hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 16px 24px !important;
    border-radius: 0 !important;
  }

  .marketing-page .marketing-main {
    background: var(--m-bg) !important;
    padding: 16px 12px 34px !important;
    overflow-x: hidden !important;
  }

  .marketing-page *,
  .mobile-owner-marketing-card * {
    max-width: 100%;
  }

  .marketing-hero h1 { font-size: 1.35rem !important; }
  .marketing-hero p  { font-size: 0.88rem !important; }

  .marketing-hero-stat {
    min-height: 70px !important;
    padding: 12px !important;
  }

  .marketing-hero-stat strong { font-size: 1.5rem !important; }

  /* Submit button: big tap target */
  .marketing-actions button[type="submit"],
  .marketing-form .btn-reserve {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 14px !important;
  }

  /* Alert: dark amber */
  .marketing-alert {
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.2) !important;
    color: #fcd34d !important;
    border-radius: 12px !important;
  }

  .marketing-alert strong { color: #fde68a !important; }

  /* Campaign history cards */
  .campaign-history-panel .table-responsive {
    display: none !important;
  }

  .campaign-history-cards {
    display: grid !important;
    gap: 10px !important;
  }

  .campaign-history-card {
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--m-text) !important;
  }

  .chc-top {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .chc-top strong {
    display: block !important;
    color: var(--m-text) !important;
    font-size: 0.92rem !important;
    overflow-wrap: anywhere !important;
  }

  .chc-top span:not(.badge):not(.channel-dot) {
    color: #94a3b8 !important;
    font-size: 0.74rem !important;
  }

  .campaign-history-card p {
    color: #cbd5e1 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin: 10px 0 0 !important;
    overflow-wrap: anywhere !important;
  }

  .chc-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .chc-metrics div {
    border-radius: 10px !important;
    padding: 9px !important;
    background: rgba(255,255,255,0.045) !important;
  }

  .chc-metrics span {
    display: block !important;
    color: #94a3b8 !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }

  .chc-metrics strong {
    color: var(--m-text) !important;
    font-size: 1rem !important;
  }

  /* ====================================================================
     ADMIN PAGES — BASIC MOBILE SUPPORT
     ==================================================================== */

  /* Hide admin sidebar column */
  .admin-sidebar,
  .admin-nav-col { display: none !important; }

  /* Stats grid: 2 columns */
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Tables: horizontal scroll */
  .admin-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  /* ====================================================================
     POLISH — EMPTY STATES, LOADING, SMALL DETAILS
     ==================================================================== */

  /* Better empty states */
  .no-results {
    padding: 48px 20px !important;
    border-radius: var(--m-radius) !important;
  }
  .no-results-icon {
    font-size: 2.5rem !important;
    display: block !important;
    margin: 0 auto 12px !important;
  }
  .no-results h3 { font-size: 1.1rem !important; }

  /* Loading shimmer */
  .time-loading {
    padding: 20px !important;
    text-align: center !important;
    font-size: 0.9rem !important;
  }

  /* Cuisine pills: slightly larger tap target */
  .cuisine-pill {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 16px !important;
  }

  .cuisine-scroll,
  .date-scroll,
  .premium-date-scroll,
  .filters-scroll,
  .search-filters,
  .filter-options,
  .date-picker-shell {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .cuisine-scroll::-webkit-scrollbar,
  .date-scroll::-webkit-scrollbar,
  .premium-date-scroll::-webkit-scrollbar,
  .filters-scroll::-webkit-scrollbar,
  .filter-options::-webkit-scrollbar {
    display: none !important;
  }

  /* Restaurant card: 16:9 hero image */
  .rc-img-wrap { aspect-ratio: 16/9 !important; }

  /* Date inputs: tappable */
  input[type="date"] { min-height: 40px !important; }

  /* Auth form panel: tight edge padding */
  .auth-form-panel { padding: 16px !important; }

  /* Prevent body scroll when any modal is open */
  body.modal-open { overflow: hidden !important; }

  /* ====================================================================
     2026 MOBILE PREMIUM PASS
     Matches the compact iPhone app direction from the design critique.
     ==================================================================== */

  .navbar .logo {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    text-decoration: none !important;
  }

  .navbar .logo img {
    width: auto !important;
    height: 38px !important;
    max-width: 190px !important;
  }

  .navbar .logo .logo-img-light {
    display: none !important;
  }

  .navbar .logo .logo-img-dark {
    display: inline-block !important;
  }

  .hero-premium {
    min-height: calc(100svh - var(--m-nav-h) - 18px) !important;
    background:
      linear-gradient(180deg, rgba(5,8,15,0.64) 0%, rgba(5,8,15,0.86) 58%, #07090f 100%),
      url('../images/allbookeubg.png') center / cover no-repeat !important;
  }

  .hero-premium::before,
  .hero-premium::after {
    display: none !important;
  }

  .hero-premium-inner {
    justify-content: flex-start !important;
    padding: 54px 16px 24px !important;
  }

  .hero-eyebrow {
    width: fit-content !important;
    margin: 0 auto 12px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(239,35,45,0.18) !important;
    color: #fecaca !important;
    letter-spacing: 0.06em !important;
  }

  .hero-headline {
    max-width: 330px !important;
    margin: 0 auto 10px !important;
    color: #fff !important;
    line-height: 1.02 !important;
  }

  .hero-subtext {
    max-width: 310px !important;
    margin: 0 auto 24px !important;
    color: #a8b3c5 !important;
    line-height: 1.45 !important;
  }

  .hero-search-module {
    width: 100% !important;
    background: rgba(16,24,39,0.86) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 70px rgba(0,0,0,0.48) !important;
  }

  .hero-search-form {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .hsf-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .hsf-divider {
    display: none !important;
  }

  .hsf-field {
    width: 100% !important;
    flex: none !important;
    min-height: 64px !important;
    padding: 11px 16px 10px 46px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
  }

  .hsf-field::before {
    position: absolute !important;
    left: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #e5e7eb !important;
    font-size: 1rem !important;
  }

  .hsf-field:nth-of-type(1)::before { content: "\1F4CD"; }
  .hsf-field:nth-of-type(3)::before { content: "\1F4C5"; }
  .hsf-field:nth-of-type(5)::before { content: "\23F2"; }
  .hsf-field:nth-of-type(7)::before { content: "\1F465"; }

  .hsf-field label {
    color: #9aa6b7 !important;
  }

  .hsf-field select,
  .hsf-field input[type="date"] {
    color: #fff !important;
    font-weight: 650 !important;
  }

  .hsf-btn {
    margin: 10px 12px 12px !important;
    width: calc(100% - 24px) !important;
    border-radius: 12px !important;
    min-height: 54px !important;
    background: linear-gradient(180deg, #ff3038 0%, #dc2626 100%) !important;
  }

  .cuisine-bar {
    position: relative !important;
    z-index: 1 !important;
    padding: 12px 0 !important;
    background: #07090f !important;
  }

  .cuisine-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 2px 2px !important;
  }

  .cuisine-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .cuisine-pill {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    color: #a8b3c5 !important;
    background: rgba(255,255,255,0.06) !important;
  }

  .restaurants-section .container,
  .cities-section .container,
  .search-body.container,
  .rp-body.container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .restaurant-card,
  .result-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #0d1421 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
  }

  .restaurant-card:hover,
  .result-card:hover {
    transform: none !important;
  }

  .rc-img-wrap {
    aspect-ratio: 1.85 / 1 !important;
  }

  .rc-booked-badge,
  .result-booked-badge {
    background: rgba(8,12,20,0.68) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }

  .rc-body {
    padding: 13px 14px 14px !important;
  }

  .rc-name,
  .result-name {
    font-size: 1.04rem !important;
    line-height: 1.2 !important;
  }

  .rc-meta,
  .result-meta,
  .result-desc {
    color: #93a0b4 !important;
  }

  .rp-hero.premium-hero {
    height: 330px !important;
    min-height: 330px !important;
    border-radius: 0 0 18px 18px !important;
    overflow: hidden !important;
    background: #050810 !important;
  }

  .premium-hero .rp-hero-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(5,8,15,0.24) 42%, rgba(5,8,15,0.88) 100%) !important;
  }

  .premium-hero-content {
    inset: auto 0 18px !important;
  }

  .premium-hero-card {
    padding: 0 4px !important;
  }

  .premium-hero-card h1 {
    margin: 6px 0 8px !important;
    max-width: 100% !important;
    font-size: clamp(1.85rem, 8.4vw, 2.45rem) !important;
    line-height: 1.02 !important;
    color: #fff !important;
    overflow-wrap: anywhere !important;
  }

  .premium-meta {
    color: #d8dee8 !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
  }

  .rp-body {
    padding-top: 12px !important;
  }

  .rp-section {
    padding: 18px 16px !important;
    border-radius: 14px !important;
  }

  .premium-widget {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #111827 0%, #0b111d 100%) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.36) !important;
  }

  .rp-layout,
  .rp-main,
  .rp-sidebar,
  .booking-sidebar {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  .premium-rw-header {
    position: relative !important;
    padding: 18px 16px 14px !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .premium-rw-header > div {
    min-width: 0 !important;
  }

  .premium-rw-header h3 {
    font-size: 1.24rem !important;
  }

  .booking-step-pill {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    flex: none !important;
    max-width: 88px !important;
    border: 1px solid rgba(239,35,45,0.22) !important;
    border-radius: 999px !important;
    padding: 5px 9px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .booking-control-row,
  .premium-widget .rw-section,
  .premium-form {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .premium-party-row {
    min-height: 48px !important;
    border-radius: 12px !important;
    padding: 4px !important;
  }

  .party-btn {
    border-radius: 10px !important;
  }

  .premium-date-scroll {
    grid-auto-columns: 72px !important;
    gap: 8px !important;
  }

  .premium-date-btn {
    width: 72px !important;
    min-height: 72px !important;
    border-radius: 12px !important;
  }

  .date-nav-btn {
    min-height: 72px !important;
    border-radius: 12px !important;
  }

  .premium-time-grid {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .premium-time-grid::-webkit-scrollbar {
    display: none !important;
  }

  .premium-time-btn {
    flex: 0 0 auto !important;
    min-width: 82px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    text-align: center !important;
  }

  .premium-time-btn small {
    display: none !important;
  }

  .premium-summary,
  .mobile-form-summary {
    border-radius: 14px !important;
  }

  .premium-form {
    padding-bottom: 16px !important;
  }

  .form-section-title {
    margin: 18px 0 12px !important;
    font-size: 1.02rem !important;
    letter-spacing: 0 !important;
  }

  .rw-field {
    display: block !important;
    margin: 0 0 12px !important;
  }

  .rw-field-label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #dbe4f0 !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
  }

  .rw-field-shell {
    position: relative !important;
    display: block !important;
  }

  .rw-field-icon {
    position: absolute !important;
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #cbd5e1 !important;
    font-size: 0.92rem !important;
    z-index: 1 !important;
    opacity: 0.92 !important;
  }

  .rw-field-shell-textarea .rw-field-icon {
    top: 17px !important;
    transform: none !important;
  }

  .rw-field .rw-input {
    margin-bottom: 0 !important;
    padding-left: 42px !important;
  }

  .rw-input {
    min-height: 50px !important;
    color: #f8fafc !important;
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 12px !important;
  }

  .rw-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
  }

  .rw-textarea {
    min-height: 82px !important;
    line-height: 1.35 !important;
    padding-top: 13px !important;
  }

  .rw-consent {
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    color: #aab5c5 !important;
    font-size: 0.8rem !important;
    line-height: 1.42 !important;
  }

  .rw-consent input {
    width: 20px !important;
    height: 20px !important;
    accent-color: #ef232d !important;
  }

  .rw-policy {
    color: #7f8ca0 !important;
  }

  .btn-reserve,
  .btn-continue {
    min-height: 54px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #ff3038 0%, #dc2626 100%) !important;
    box-shadow: 0 10px 28px rgba(220,38,38,0.28) !important;
  }

  .restaurant-page {
    padding-bottom: calc(var(--m-bottom-h) + 104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-page-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 70px) !important;
    left: 12px !important;
    z-index: 430 !important;
    min-height: 38px !important;
    padding: 0 12px 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(7,9,15,0.72) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }

  .mobile-page-back span:first-child {
    font-size: 1.35rem !important;
    line-height: 1 !important;
  }

  .mobile-book-bar {
    left: 10px !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 68px !important;
    padding: 9px 9px 9px 10px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(13,20,33,0.94) !important;
    box-shadow: 0 -10px 34px rgba(0,0,0,0.44) !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 420 !important;
  }

  .has-bottom-nav .mobile-book-bar {
    bottom: calc(var(--m-bottom-h) + 8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mbb-thumb {
    display: block !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    object-fit: cover !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }

  .mbb-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 84px !important;
  }

  .mbb-name {
    color: #fff !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .mbb-sub {
    display: block !important;
    margin-top: 3px !important;
    color: #a8b3c5 !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mbb-btn {
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex: none !important;
    width: 74px !important;
    min-width: 74px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ff3038 0%, #dc2626 100%) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 22px rgba(220,38,38,0.28) !important;
  }

  @media (max-width: 420px) {
    .premium-date-scroll {
      grid-auto-columns: 68px !important;
    }

    .premium-date-btn {
      width: 68px !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
    }

    .mbb-thumb {
      width: 42px !important;
      height: 42px !important;
      flex-basis: 42px !important;
    }

    .mbb-name {
      font-size: 0.84rem !important;
    }

    .mbb-sub {
      font-size: 0.68rem !important;
    }
  }

} /* end @media max-width: 768px */