/* ==========================================================================
       NEXT-GEN OS MOTION SYSTEM: APPLE iOS 18 • ANDROID 15 • LINUX COSMIC
       ========================================================================== */
    :root {
      --apple-font: "Plus Jakarta Sans", "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
      --bg: #fcfcfc; --card: #ffffff; --card2: #f5f5f5; --gold: #c48b36; --gold-light: #e2ad5c; --gold-deep: #a67329; --ink: #1a1a1a; --muted: #666666; --muted2: #888888; --green: #2a9d8f; --red: #e63946; --line: rgba(0,0,0,0.06); --shadow: 0 12px 30px rgba(0,0,0,0.04); --radius: 22px;
      --font-brand: 'Outfit', 'Plus Jakarta Sans', sans-serif; --font-acme: 'Outfit', sans-serif; --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;

      /* OS Fluid Spring Curves & Physics */
      --os-spring-touch: cubic-bezier(0.32, 0.72, 0, 1);
      --os-spring-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
      --os-spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
      --os-spring-decel: cubic-bezier(0.05, 0.7, 0.1, 1.0);
      --os-spring-morph: cubic-bezier(0.2, 0, 0, 1);
      --spring-snappy: cubic-bezier(0.2, 0.9, 0.2, 1.0);
      --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
      --spring-glide: cubic-bezier(0.32, 0.72, 0, 1);
      --spring-morph: cubic-bezier(0.4, 0.0, 0.2, 1);

      --dur-instant: 120ms;
      --dur-fast: 220ms;
      --dur-normal: 340ms;
      --dur-slow: 480ms;
    }
    *, *::before, *::after {
      box-sizing: border-box !important;
    }
    html {
      scroll-behavior: smooth;
      overflow-x: hidden !important;
      max-width: 100vw !important;
      width: 100% !important;
    }
    body {
      margin: 0;
      padding: 0;
      max-width: 100vw !important;
      width: 100% !important;
      overflow-x: hidden !important;
      position: relative;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
      letter-spacing: -0.011em;
      touch-action: manipulation;
    }
    button, input, textarea, select {
      font: inherit;
      touch-action: manipulation;
    }
    button {
      cursor: pointer;
      min-height: 44px; /* Apple minimum touch target standard */
    }
    img, video, canvas, svg, iframe, model-viewer {
      max-width: 100% !important;
    }
    .hidden {
      display: none !important;
    }
    /* Universal Text Truncation & Zero Overflow Helper Classes */
    .truncate-text {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .zero-overflow {
      max-width: 100vw !important;
      overflow-x: hidden !important;
    }
    #appContent { 
      padding-bottom: 110px;
      transition: transform 0.42s var(--os-spring-touch), filter 0.42s ease, border-radius 0.42s ease;
      will-change: transform;
    }

    /* iOS 18 Spatial Background Scale-Back Detent */
    .os-viewport-scale-back {
      transform: scale(0.972) translateY(-6px) !important;
      filter: brightness(0.72) saturate(110%) !important;
      border-radius: 28px !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }

    /* ==========================================================================
       NEXT-GEN OS CUSTOM GLASS DROPDOWN & SELECT SYSTEM (APPLE / ANDROID 15)
       ========================================================================== */
    select, .os-select {
      appearance: none !important;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background: color-mix(in srgb, var(--card) 85%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
      background-size: 16px 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      padding: 11px 40px 11px 16px !important;
      font-size: 13.5px !important;
      font-weight: 700 !important;
      color: var(--ink) !important;
      backdrop-filter: blur(24px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.14) !important;
      cursor: pointer !important;
      transition: all var(--dur-fast) var(--os-spring-smooth) !important;
      outline: none !important;
      position: relative;
    }
    select:hover, .os-select:hover {
      border-color: var(--gold) !important;
      box-shadow: 0 8px 24px rgba(212,175,55,0.18), inset 0 1px 0 rgba(255,255,255,0.2) !important;
      transform: translateY(-1.5px) !important;
    }
    select:focus, .os-select:focus {
      border-color: var(--gold) !important;
      box-shadow: 0 10px 28px rgba(212,175,55,0.28), inset 0 0 0 1px var(--gold) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important;
      transform: scale(1.015) !important;
    }
    select option {
      background: var(--card) !important;
      color: var(--ink) !important;
      padding: 12px 14px !important;
      font-size: 14px !important;
      font-weight: 600 !important;
    }

    /* Universal Tactile Haptic Press & Elastic Rebound Physics (Apple iOS 18 & Android 15) */
    button, input[type="button"], input[type="submit"], .primary-btn, .ghost-btn, .gold-btn, .saas-admin-btn, .pill, .admin-tab-btn, .layout-pill, .category-pill, .order-btn, .add-btn, .stepper button, .waiter-action-btn, .kds-station-pill, .rush-tab-btn, .sub-tab-btn, .table-card, .floor-table-card, .waiter-fab, .cart-bar-btn {
      transition: transform 0.14s var(--os-spring-touch), box-shadow 0.22s var(--os-spring-smooth), background-color 0.2s ease, border-color 0.2s ease !important;
      user-select: none;
      -webkit-user-select: none;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }
    button:hover, .primary-btn:hover, .gold-btn:hover, .saas-admin-btn:hover, .pill:hover, .category-pill:hover, .kds-station-pill:hover, .rush-tab-btn:hover, .sub-tab-btn:hover {
      transform: translateY(-1.5px) scale(1.008);
    }
    button:active, input[type="button"]:active, input[type="submit"]:active, .primary-btn:active, .ghost-btn:active, .gold-btn:active, .saas-admin-btn:active, .pill:active, .admin-tab-btn:active, .layout-pill:active, .category-pill:active, .order-btn:active, .add-btn:active, .stepper button:active, .waiter-action-btn:active, .kds-station-pill:active, .rush-tab-btn:active, .sub-tab-btn:active, .table-card:active, .floor-table-card:active, .waiter-fab:active, .cart-bar-btn:active {
      transform: scale(0.958) translateY(1.5px) !important;
      transition: transform 0.08s var(--os-spring-touch) !important;
    }

    /* Material 3 / Android 15 Dynamic Surface Ripple Wave */
    .os-press-ripple {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, rgba(255, 255, 255, 0.18) 50%, transparent 80%);
      pointer-events: none;
      transform: scale(0);
      animation: osRippleExpand 0.55s var(--os-spring-touch) forwards;
      z-index: 10;
    }
    @keyframes osRippleExpand {
      0% {
        transform: scale(0);
        opacity: 0.85;
      }
      100% {
        transform: scale(2.4);
        opacity: 0;
      }
    }

    /* Spatial Grab Handle for Drawers and Sheets */
    .sheet-grab-bar {
      width: 44px;
      height: 4.5px;
      background: rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      margin: 8px auto 14px auto;
      transition: width 0.25s var(--os-spring-expressive), background-color 0.25s ease;
      cursor: grab;
    }
    .sheet-grab-bar:active {
      width: 58px;
      background: var(--gold);
      cursor: grabbing;
    }

    /* Kinetic Cross-Fade View Transitions */
    .os-view-transition-out {
      opacity: 0 !important;
      transform: translateY(6px) scale(0.985) !important;
      transition: opacity 0.14s ease, transform 0.14s var(--os-spring-smooth) !important;
      pointer-events: none !important;
    }
    .os-view-transition-in {
      animation: osViewSlideCross 0.32s var(--os-spring-smooth) forwards !important;
    }
    @keyframes osViewSlideCross {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Staggered Cascade Animation for Lists & Grids */
    .os-stagger-in {
      animation: osStaggerIn 0.35s var(--os-spring-smooth) backwards;
    }
    @keyframes osStaggerIn {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    /* ===== VISUAL THEME SYSTEM ===== */
    body[data-visual-theme=classic-light],
    body[data-visual-theme=classic-white]{
      --bg:#f8fafc;--card:#ffffff;--card2:#f1f5f9;--ink:#090d16;--muted:#334155;--muted2:#475569;
      --line:rgba(15,23,42,.12);--shadow:0 18px 45px rgba(15,23,42,.08);
      --gold:#b8860b;--gold-light:#d4af37;--gold-deep:#8b6508;
    }
    body[data-visual-theme=classic-light] .hero:before,
    body[data-visual-theme=classic-white] .hero:before{background:linear-gradient(180deg,rgba(241,245,249,.85),rgba(248,250,252,.98) 60%,var(--bg) 100%)}
    body[data-visual-theme=classic-light] .admin-card,
    body[data-visual-theme=classic-white] .admin-card,
    body[data-visual-theme=classic-light] .bento-card,
    body[data-visual-theme=classic-white] .bento-card,
    body[data-visual-theme=classic-light] .modal-content,
    body[data-visual-theme=classic-white] .modal-content{
      background:#ffffff !important;border-color:rgba(15,23,42,.12) !important;box-shadow:0 8px 30px rgba(15,23,42,.06) !important;
    }
    body[data-visual-theme=classic-light] input,
    body[data-visual-theme=classic-white] input,
    body[data-visual-theme=classic-light] textarea,
    body[data-visual-theme=classic-white] textarea,
    body[data-visual-theme=classic-light] select,
    body[data-visual-theme=classic-white] select{
      background:#f8fafc !important;color:#090d16 !important;border-color:rgba(15,23,42,.15) !important;
    }
    body[data-visual-theme=classic-light] label,
    body[data-visual-theme=classic-white] label,
    body[data-visual-theme=classic-light] .field label,
    body[data-visual-theme=classic-white] .field label{
      color:#1e293b !important;font-weight:700 !important;
    }
    body[data-visual-theme=classic-light] p,
    body[data-visual-theme=classic-white] p,
    body[data-visual-theme=classic-light] small,
    body[data-visual-theme=classic-white] small,
    body[data-visual-theme=classic-light] .muted,
    body[data-visual-theme=classic-white] .muted{
      color:#475569 !important;
    }

    body[data-visual-theme=classic-dark]{
      --bg:#0b0f19;--card:#111827;--card2:#1f2937;--ink:#f9fafb;--muted:#cbd5e1;--muted2:#94a3b8;
      --line:rgba(248,250,252,.12);--shadow:0 18px 50px rgba(0,0,0,.75);
      --gold:#d4af37;--gold-light:#ffd700;--gold-deep:#aa820a;
    }
    body[data-visual-theme=classic-dark] .hero-stage{border-color:rgba(248,250,252,.18);box-shadow:0 24px 60px rgba(0,0,0,.5)}
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) .admin-card,
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) .bento-card,
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) .modal-content{
      background:#111827 !important;border-color:rgba(255,255,255,.12) !important;
    }
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) input,
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) textarea,
    body[data-visual-theme=classic-dark]:not(.admin-light-mode):not([data-admin-theme="light"]) select{
      background:#1f2937 !important;color:#f9fafb !important;border-color:rgba(255,255,255,.15) !important;
    }

    /* Universal Tactile Button Feedback */
    button, .primary-btn, .ghost-btn, .gold-btn, .saas-admin-btn, .pill, .admin-tab-btn {
      transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease !important;
      user-select: none;
    }
    button:active, .primary-btn:active, .ghost-btn:active, .gold-btn:active, .saas-admin-btn:active, .pill:active, .admin-tab-btn:active {
      transform: scale(0.96) !important;
    }

    /* Universal Modal Overlay System */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 999999;
      background: rgba(0, 0, 0, 0.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: none !important;
      align-items: center;
      justify-content: center;
      padding: 16px;
      overflow-y: auto;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-overlay.open {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
    .modal-overlay .modal-content {
      background: var(--card);
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      max-height: 92vh;
      overflow-y: auto;
      transform: translateY(12px) scale(0.98);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .modal-overlay.open .modal-content {
      transform: translateY(0) scale(1);
    }
    body[data-visual-theme=aura]{--bg:#070709;--card:#0f0f13;--card2:#16161b;--ink:#f0f0f0;--muted:#888888;--muted2:#666666;--line:rgba(212,175,55,.15);--shadow:0 18px 50px rgba(0,0,0,.8)}
    body[data-visual-theme=aura] .hero-stage{border-color:rgba(212,175,55,.3);box-shadow:0 24px 60px rgba(212,175,55,.1)}
    body[data-visual-theme=ivory]{--bg:#f7f1e7;--card:#fffaf2;--card2:#fffdf8;--ink:#2b2118;--muted:#776b5d;--muted2:#9b8d7c;--line:rgba(133,83,35,.18);--shadow:0 18px 45px rgba(92,58,25,.16)}
    body[data-visual-theme=ivory] .hero:before{background:linear-gradient(180deg,rgba(247,241,231,.35),rgba(247,241,231,.72) 55%,var(--bg) 100%),radial-gradient(ellipse 80% 50% at 50% 20%,rgba(196,103,37,.16),transparent 70%)}
    body[data-visual-theme=midnight]{--bg:#05060b;--card:#0d1320;--card2:#111a2a;--ink:#eef6ff;--muted:#9aaac0;--muted2:#63748c;--line:rgba(65,169,255,.2);--shadow:0 18px 50px rgba(0,0,0,.65)}
    body[data-visual-theme=midnight] .hero-stage{border-color:rgba(65,169,255,.35);box-shadow:0 24px 60px rgba(0,90,180,.24),inset 0 0 50px rgba(65,169,255,.08)}
    body[data-visual-theme=sunset]{--bg:#170b08;--card:#26120e;--card2:#321811;--ink:#fff5e9;--muted:#d4a995;--muted2:#9d6b58;--line:rgba(255,133,60,.2);--shadow:0 18px 45px rgba(80,18,0,.5)}
    body[data-visual-theme=sunset] .hero-stage{border-color:rgba(255,133,60,.42);background:linear-gradient(145deg,#32140e,#170b08);box-shadow:0 24px 60px rgba(255,91,33,.18)}
    body[data-visual-theme=forest]{--bg:#07100c;--card:#0d1c15;--card2:#12261b;--ink:#effff4;--muted:#a7c3ad;--muted2:#6f9079;--line:rgba(74,222,128,.18);--shadow:0 18px 45px rgba(0,38,17,.55)}
    body[data-visual-theme=forest] .hero-stage{border-color:rgba(74,222,128,.32);box-shadow:0 24px 60px rgba(0,103,54,.22)}
    /* User Requested Gradient Themes (Accessible & Balanced Contrast) */
    body[data-visual-theme=warm-breeze]{--bg:#fbf4f0;--card:#ffffff;--card2:#f6f1ec;--ink:#1f1916;--muted:#665851;--muted2:#8f8078;--line:rgba(217,119,87,.22);--shadow:0 18px 45px rgba(185,220,242,.22)}
    body[data-visual-theme=warm-breeze] .hero:before{background:linear-gradient(180deg,rgba(246,207,190,.32),rgba(185,220,242,.25) 50%,var(--bg) 100%)}
    body[data-visual-theme=periwinkle]{--bg:#f2f4fc;--card:#ffffff;--card2:#eceef8;--ink:#141724;--muted:#575d73;--muted2:#82889e;--line:rgba(92,106,196,.22);--shadow:0 18px 45px rgba(202,208,255,.24)}
    body[data-visual-theme=periwinkle] .hero:before{background:linear-gradient(180deg,rgba(202,208,255,.36),rgba(227,227,227,.3) 50%,var(--bg) 100%)}
    body[data-visual-theme=cyber-neon]{--bg:#090514;--card:#140c26;--card2:#1c1035;--ink:#fdf6fb;--muted:#c4b4d6;--muted2:#8a76a3;--line:rgba(229,54,171,.26);--shadow:0 18px 50px rgba(92,3,188,.38)}
    body[data-visual-theme=cyber-neon] .hero-stage{border-color:rgba(229,54,171,.42);box-shadow:0 24px 60px rgba(92,3,188,.35)}
    body[data-visual-theme=ocean-rose]{--bg:#f5f8fd;--card:#ffffff;--card2:#eef4fa;--ink:#111a24;--muted:#4f6477;--muted2:#7d91a3;--line:rgba(60,140,222,.24);--shadow:0 18px 45px rgba(237,115,168,.18)}
    body[data-visual-theme=ocean-rose] .hero:before{background:linear-gradient(180deg,rgba(60,140,222,.2),rgba(237,115,168,.18) 50%,var(--bg) 100%)}
    body[data-visual-theme=lavender-dream]{--bg:#faf5ff;--card:#ffffff;--card2:#f3e8ff;--ink:#2e1065;--muted:#581c87;--muted2:#7e22ce;--line:rgba(192,132,252,.3);--shadow:0 18px 45px rgba(168,85,247,.15)}
    body[data-visual-theme=lavender-dream] .hero:before{background:linear-gradient(180deg,rgba(231,198,255,.3),rgba(200,182,255,.25) 50%,var(--bg) 100%)}
    body[data-visual-theme=matcha-cream]{--bg:#f8faf6;--card:#ffffff;--card2:#eff6e0;--ink:#142217;--muted:#4f6e57;--muted2:#72927a;--line:rgba(132,169,140,.3);--shadow:0 18px 45px rgba(132,169,140,.15)}
    body[data-visual-theme=matcha-cream] .hero:before{background:linear-gradient(180deg,rgba(226,236,233,.4),rgba(227,213,202,.3) 50%,var(--bg) 100%)}
    body[data-visual-theme=ivory] .card-media,
    body[data-visual-theme=warm-breeze] .card-media,
    body[data-visual-theme=periwinkle] .card-media,
    body[data-visual-theme=ocean-rose] .card-media,
    body[data-visual-theme=lavender-dream] .card-media,
    body[data-visual-theme=matcha-cream] .card-media{background:rgba(255,255,255,.94)}
    .hero-loader{position:absolute;top:14px;right:14px;z-index:9;display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid rgba(212,175,55,.3);border-radius:999px;padding:6px 12px;font-size:10px;font-weight:700;color:var(--gold-light);backdrop-filter:blur(8px);transition:opacity .2s}
    .hero-loader.hidden,.hero-error-msg.hidden{display:none !important}
    .hero-spinner{width:12px;height:12px;border:2px solid rgba(212,175,55,.3);border-top-color:var(--gold);border-radius:50%;animation:heroSpin .6s linear infinite}
    @keyframes heroSpin{to{transform:rotate(360deg)}}
    .hero-error-msg{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:9;background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px 14px;font-size:11px;color:var(--muted);backdrop-filter:blur(8px)}
    .visual-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px;margin-top:10px}
    .visual-theme-card{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:12px 10px;text-align:left;color:var(--ink);cursor:pointer;transition:all .18s cubic-bezier(0.16,1,0.3,1);display:flex;flex-direction:column}
    .visual-theme-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);box-shadow:0 6px 16px rgba(0,0,0,.22)}
    .visual-theme-card.active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 8px 24px rgba(0,0,0,.28);background:var(--card)}
    .visual-theme-card .theme-preview{height:46px;border-radius:10px;margin-bottom:10px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
    .visual-theme-card b{display:block;font-size:12px;font-weight:700;letter-spacing:.01em}
    .visual-theme-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.35}
    ::selection{background:var(--gold);color:var(--bg)}
    /* ===== HERO — clean stage ===== */
    html,body{background:var(--bg)}
    body.saas-public{background:var(--bg)}
    body{padding-top:0;margin:0}
    /* ☕ CAFE DENSE LAYOUT — Optimized for high-density menu cards */
    .menu-grid.dense-layout {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px;
      padding: 10px;
    }
    .menu-grid.dense-layout .menu-card {
      padding: 10px;
      border-radius: 12px;
    }
    .menu-grid.dense-layout .menu-card .menu-card-img {
      height: 90px;
    }
    .menu-grid.dense-layout .menu-card h4 {
      font-size: 13px;
      margin: 6px 0 2px;
    }
    .menu-grid.dense-layout .menu-card .item-meta {
      font-size: 10px;
    }
    .menu-grid.dense-layout .menu-card .price-row {
      margin-top: 8px;
    }
    .menu-grid.dense-layout .menu-card .price {
      font-size: 14px;
    }
    .menu-grid.dense-layout .menu-card .add-btn {
      padding: 4px 10px;
      font-size: 11px;
    }
    @media (max-width: 480px) {
      .menu-grid.dense-layout {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* 🧭 SETTINGS SUB-TABS STYLING */
    .sub-tab-btn {
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--card2);
      color: var(--muted);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .sub-tab-btn:hover {
      background: var(--card);
      color: var(--ink);
      border-color: var(--gold-light);
    }
    .sub-tab-btn.active {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
      box-shadow: 0 4px 12px rgba(212,175,55,0.3);
    }
    .sub-settings-pane {
      display: none;
      animation: fadeInSubTab 0.3s ease;
    }
    .sub-settings-pane.active {
      display: block;
    }
    @keyframes fadeInSubTab {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* 💳 BRANDED PAYMENT GATEWAY SUITE TABS & STYLING */
    .gw-tab-btn {
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px solid var(--line, rgba(255,255,255,0.12));
      background: var(--card, #18181b);
      color: var(--ink, #f8fafc);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 155px;
      flex: 1 1 0;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    .gw-tab-btn:hover {
      border-color: var(--gold, #d4af37);
      background: var(--card2, #27272a);
      transform: translateY(-1px);
    }
    .gw-tab-btn.active {
      border-color: var(--gold, #d4af37);
      background: rgba(212,175,55,0.1);
      box-shadow: 0 4px 14px rgba(212,175,55,0.18);
    }
    .gw-tab-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink, #f8fafc);
      line-height: 1.2;
    }
    .gw-tab-sub {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted, #94a3b8);
      margin-top: 2px;
      white-space: nowrap;
    }
    .gw-active-dot {
      color: #22c55e;
      font-size: 10px;
      margin-left: auto;
    }
    .gw-field-label {
      margin-bottom: 6px;
      font-weight: 800;
      font-size: 12.5px;
      display: block;
      color: var(--ink, #f8fafc);
    }
    .gw-text-input,
    .gw-select {
      width: 100%;
      box-sizing: border-box;
      background: var(--bg, #0b0f19);
      color: var(--ink, #ffffff);
      border: 1.5px solid var(--line, #334155);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 600;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .gw-text-input:focus,
    .gw-select:focus {
      outline: none;
      border-color: var(--gold, #d4af37);
      box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
    }
    .gw-field-hint {
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: var(--muted, #94a3b8);
      line-height: 1.35;
    }
    .gw-toggle-pwd-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 15px;
      padding: 4px 6px;
      border-radius: 4px;
      opacity: 0.75;
      transition: opacity 0.2s;
    }
    .gw-toggle-pwd-btn:hover {
      opacity: 1;
    }

    /* ☀️ LIGHT MODE HIGH-CONTRAST OVERRIDES FOR GATEWAY SUITE */
    body.admin-light-mode .gw-tab-btn,
    .admin-overlay.light-mode .gw-tab-btn,
    .admin-overlay:not(.dark-mode) .gw-tab-btn,
    html[data-admin-theme="light"] .gw-tab-btn {
      background: #ffffff !important;
      border-color: #cbd5e1 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    body.admin-light-mode .gw-tab-btn.active,
    .admin-overlay.light-mode .gw-tab-btn.active,
    .admin-overlay:not(.dark-mode) .gw-tab-btn.active,
    html[data-admin-theme="light"] .gw-tab-btn.active {
      border-color: #b45309 !important;
      background: rgba(217, 119, 6, 0.08) !important;
      box-shadow: 0 3px 10px rgba(180, 83, 9, 0.15) !important;
    }
    body.admin-light-mode .gw-tab-title,
    .admin-overlay.light-mode .gw-tab-title,
    .admin-overlay:not(.dark-mode) .gw-tab-title,
    html[data-admin-theme="light"] .gw-tab-title {
      color: #0f172a !important;
    }
    body.admin-light-mode .gw-tab-sub,
    .admin-overlay.light-mode .gw-tab-sub,
    .admin-overlay:not(.dark-mode) .gw-tab-sub,
    html[data-admin-theme="light"] .gw-tab-sub {
      color: #475569 !important;
    }
    body.admin-light-mode .gw-field-label,
    .admin-overlay.light-mode .gw-field-label,
    .admin-overlay:not(.dark-mode) .gw-field-label,
    html[data-admin-theme="light"] .gw-field-label {
      color: #0f172a !important;
    }
    body.admin-light-mode .gw-field-hint,
    .admin-overlay.light-mode .gw-field-hint,
    .admin-overlay:not(.dark-mode) .gw-field-hint,
    html[data-admin-theme="light"] .gw-field-hint {
      color: #475569 !important;
    }
    body.admin-light-mode .gw-text-input,
    body.admin-light-mode .gw-select,
    .admin-overlay.light-mode .gw-text-input,
    .admin-overlay.light-mode .gw-select,
    .admin-overlay:not(.dark-mode) .gw-text-input,
    .admin-overlay:not(.dark-mode) .gw-select,
    html[data-admin-theme="light"] .gw-text-input,
    html[data-admin-theme="light"] .gw-select {
      background: #ffffff !important;
      color: #0f172a !important;
      border-color: #cbd5e1 !important;
    }
    body.admin-light-mode .gw-active-banner,
    .admin-overlay.light-mode .gw-active-banner,
    .admin-overlay:not(.dark-mode) .gw-active-banner,
    html[data-admin-theme="light"] .gw-active-banner {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
      color: #0f172a !important;
    }
    body.admin-light-mode .gw-info-card,
    .admin-overlay.light-mode .gw-info-card,
    .admin-overlay:not(.dark-mode) .gw-info-card,
    html[data-admin-theme="light"] .gw-info-card {
      color: #0f172a !important;
    }

    /* 💎 GOOGLE MATERIAL SYMBOLS INTEGRATION */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined' !important;
      font-weight: normal;
      font-style: normal;
      font-size: 20px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-feature-settings: 'liga';
    }
    .material-symbols-outlined.md-16 { font-size: 16px; }
    .material-symbols-outlined.md-18 { font-size: 18px; }
    .material-symbols-outlined.md-24 { font-size: 24px; }
    .material-symbols-outlined.md-28 { font-size: 28px; }
    .material-symbols-outlined.md-32 { font-size: 32px; }

    /* 🏢 DINING PROFILE & BUSINESS MODEL PRESETS (APPLE-INSPIRED DESIGN) */
    .dining-presets-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .dining-preset-card {
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 16px;
      cursor: pointer;
      position: relative;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }
    .dining-preset-card:hover {
      border-color: var(--gold-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    .dining-preset-card.active {
      background: linear-gradient(180deg, rgba(212, 175, 55, 0.1) 0%, var(--card) 100%);
      border-color: var(--gold);
      box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(212, 175, 55, 0.2);
    }
    .dining-preset-icon-wrap {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--card2);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-light);
      transition: all 0.2s ease;
    }
    .dining-preset-card.active .dining-preset-icon-wrap {
      background: var(--gold);
      color: #000;
      border-color: var(--gold);
    }
    .dining-preset-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.3;
    }
    .dining-preset-card.active .dining-preset-title {
      color: var(--gold-light);
    }
    .dining-preset-desc {
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.45;
      flex-grow: 1;
    }
    .dining-preset-badge {
      font-size: 10.5px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 20px;
      background: var(--card2);
      color: var(--muted);
      width: fit-content;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .dining-preset-card.active .dining-preset-badge {
      background: var(--gold);
      color: #000;
    }

    /* 🥡 ORDER TYPE SEGMENTED SWITCH (DRAWER) */
    .order-type-segmented-control {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      background: var(--card2);
      padding: 4px;
      border-radius: 12px;
      border: 1px solid var(--line);
      margin-bottom: 12px;
    }
    .order-type-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .order-type-btn.active {
      background: var(--card);
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      border: 1px solid rgba(212,175,55,0.4);
    }
    .order-type-btn.active .material-symbols-outlined {
      color: var(--gold);
    }

    .hero[data-hero-mode="none"] {
      min-height: auto !important;
      padding: 10px 16px 12px !important;
      background: var(--bg) !important;
      border-bottom: 1px solid var(--line);
      box-shadow: none;
    }
    .hero[data-hero-mode="none"] .hero-bg,
    .hero[data-hero-mode="none"] #heroBg,
    .hero[data-hero-mode="none"] .hero-stage,
    .hero[data-hero-mode="none"] .hero-info,
    .hero[data-hero-mode="none"] .hero-dots,
    .hero[data-hero-mode="none"] .hero-hint,
    .hero[data-hero-mode="none"] .hero-nav-btn,
    .hero[data-hero-mode="none"] #heroVideo {
      display: none !important;
    }
    .hero[data-hero-mode="none"] .hero-header {
      padding: 0 !important;
      margin-bottom: 4px !important;
    }
    .hero[data-hero-mode="none"] .search-wrap {
      margin: 10px 0 6px !important;
    }
    .hero{position:relative;isolation:isolate;overflow:hidden;min-height:auto;color:var(--ink);padding:12px 16px 18px;padding-top:max(12px,env(safe-area-inset-top,0px));background:var(--bg)}
    .hero-bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center 30%;opacity:0;pointer-events:none}
    /* Soft dark veil only — no yellow top bar / gold fog */
    .hero:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg);pointer-events:none}
    .hero:after{content:none}
    .hero-header{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:3}
    .hero-brand-wrap{min-width:0;display:flex;flex-direction:column;cursor:pointer;-webkit-tap-highlight-color:transparent;overflow:hidden;}
    .hero-brand{font-family:var(--font-brand);font-size:clamp(19px,4.8vw,28px);letter-spacing:.12em;color:var(--gold);text-transform:uppercase;margin:0;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .hero-eyebrow{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .hero-header-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
    /* Mobile Back to Home Navigation Button */
    .nav-back-home-btn{display:inline-flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--gold);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:800;letter-spacing:.06em;cursor:pointer;transition:all .18s;box-shadow:0 4px 14px rgba(0,0,0,.45);flex-shrink:0;-webkit-tap-highlight-color:transparent}
    .nav-back-home-btn:hover{background:var(--gold);color:var(--bg);border-color:transparent;transform:translateX(-2px)}
    .nav-back-home-btn:active{transform:scale(0.94)}
    .nav-back-home-btn .nav-back-arrow{font-size:14px;font-weight:900;line-height:1}
    .nav-back-home-btn .nav-back-label{font-size:10px;font-weight:800}

    /* Mobile 3D Tactile HUD & Interactive Controls */
    .hero-3d-hud{position:absolute;top:10px;right:10px;display:flex;flex-direction:row;align-items:center;gap:5px;z-index:15;pointer-events:auto}
    .hero-3d-hud-btn{border:1px solid rgba(255,255,255,.14);background:rgba(14,14,18,.86);color:var(--ink);border-radius:999px;padding:5px 9px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5);transition:all .18s;user-select:none;-webkit-tap-highlight-color:transparent}
    .hero-3d-hud-btn:hover{border-color:var(--gold);color:var(--gold-light);background:rgba(212,175,55,.15)}
    .hero-3d-hud-btn.active{border-color:var(--gold);background:var(--gold);color:var(--bg);box-shadow:0 0 14px rgba(212,175,55,.5)}
    .hero-3d-hud-btn.hero-3d-ar-btn{border-color:rgba(56,189,248,.6);color:#38bdf8;background:rgba(56,189,248,.12)}
    .hero-3d-hud-btn.hero-3d-ar-btn:hover{background:#38bdf8;color:#050b14;box-shadow:0 0 16px rgba(56,189,248,.6)}
    .hero-3d-hud-btn:active{transform:scale(.92)}
    .hero-3d-touch-badge{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);z-index:11;background:rgba(10,10,14,.88);border:1px solid rgba(212,175,55,.3);color:var(--gold-light);border-radius:999px;padding:4px 12px;font-size:9px;font-weight:700;letter-spacing:.04em;white-space:nowrap;backdrop-filter:blur(8px);pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.6);opacity:.92;transition:opacity .3s}

    /* CAPITAL LETTER PRESETS */
    .capital-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:10px}
    .capital-preset-card{border:1.5px solid var(--line);background:var(--card);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;color:var(--ink);transition:all .2s cubic-bezier(0.16,1,0.3,1);position:relative;display:flex;flex-direction:column;padding:0}
    .capital-preset-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
    .capital-preset-card.active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 10px 28px rgba(212,175,55,.2)}
    .preset-top-stripe{height:34px;width:100%;border-bottom:1px solid rgba(255,255,255,.08)}
    .preset-body{padding:10px 12px;display:flex;flex-direction:column;gap:3px;flex-grow:1}
    .preset-name{font-size:11.5px;font-weight:900;letter-spacing:.05em;color:var(--ink);text-transform:uppercase}
    .capital-preset-card.active .preset-name{color:var(--gold-light)}
    .preset-sub{font-size:9.5px;color:var(--muted);line-height:1.3}
    .preset-swatches{display:flex;align-items:center;gap:5px;margin-top:6px}
    .swatch-dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 2px 6px rgba(0,0,0,.4)}
    .lang-toggle{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
    .lang-toggle button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:6px 11px;font-size:10.5px;font-weight:800;letter-spacing:.04em}
    .lang-toggle button.active{background:var(--gold);color:var(--bg)}
    .table-tag{border:1px solid var(--gold);background:var(--card);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.05em;white-space:nowrap}
    .icon-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;font-size:15px;flex:0 0 auto}
    /* Signature SaaS platform stage — dark pedestal, ambient framing, soft inner vignette */
    .hero-stage{position:relative;z-index:2;margin-top:8px;height:min(52vw,340px);max-height:360px;min-height:240px;border-radius:24px;overflow:hidden;background:transparent;border:none;box-shadow:none}
    .hero-stage-top-glow{display:none;}
    .hero-table-bg{position:absolute;inset:0;background-size:cover;background-position:center 62%;background-repeat:no-repeat;pointer-events:none;z-index:0;transition:opacity .35s cubic-bezier(0.16,1,0.3,1),filter .35s ease}
    .hero-stage-vignette{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;box-shadow:none;transition:opacity .25s ease}
    .hero-table-contact-shadow{position:absolute;left:21%;right:21%;bottom:11%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 44%,transparent 72%);filter:blur(5px);z-index:1;pointer-events:none;transition:opacity .25s ease}
    .hero-stage:before{display:none;}
    .hero-stage:after{display:none;}
    #heroSlides{position:absolute;inset:0;z-index:2}
    .hero-media-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;z-index:2;transition:opacity .22s cubic-bezier(0.2,0,0,1)}
    #heroModelViewer{width:100%;height:100%;--poster-color:transparent;background:transparent;outline:none;transition:opacity .25s ease, transform .2s ease;transform:translateY(var(--hero-model-y-offset, 12px))}
    .hero-img-display{width:100%;height:100%;object-fit:contain;padding:12px;border-radius:18px;filter:drop-shadow(0 16px 36px rgba(0,0,0,.75));animation:heroMediaIn .3s ease-out;transform-origin:center center}
    .hero-video-display{width:100%;height:100%;object-fit:cover;border-radius:inherit;background:var(--bg);animation:heroMediaIn .3s ease-out}
    .video-tap-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,0.3);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:35;box-shadow:0 14px 40px rgba(0,0,0,0.8);animation:videoTapPop .6s cubic-bezier(.16,1,.3,1) forwards}
    .video-tap-feedback svg{width:28px;height:28px;fill:currentColor}
    .video-paused-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,0.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;transition:all .2s ease;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
    .video-paused-overlay:hover{transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.85);border-color:#fff}
    .hero-audio-btn{position:absolute;bottom:14px;right:14px;z-index:15;background:rgba(0,0,0,0.72);border:1px solid rgba(255,255,255,0.22);color:#fff;border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.5);transition:all .2s ease}
    .hero-audio-btn svg{width:15px;height:15px;flex-shrink:0}
    .hero-audio-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.5);color:#fff}
    .hero-audio-btn.unmuted{background:rgba(212,175,55,0.92);color:#120c04;border-color:transparent;box-shadow:0 0 20px rgba(212,175,55,0.65)}
    .hero-audio-btn.unmuted svg{stroke:#120c04}
    .video-tap-feedback .feedback-label{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold,#d4af37);margin-top:2px}
    @keyframes videoTapPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}}
    .hero-audio-btn{position:absolute;bottom:14px;right:14px;z-index:12;background:var(--card2);border:1px solid rgba(212,175,55,.4);color:var(--gold-light);border-radius:999px;padding:6px 14px;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.5);transition:all .18s}
    .hero-audio-btn:hover{background:var(--gold);color:var(--bg);border-color:transparent}
    .hero-audio-btn.unmuted{background:var(--gold);color:var(--bg);border-color:transparent;box-shadow:0 0 16px rgba(212,175,55,.6)}
    .hero-audio-btn:active{transform:scale(.95)}
    .hero-video-badge{position:absolute;top:14px;left:14px;z-index:11;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:10px;font-weight:800;letter-spacing:.08em;display:inline-flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
    .hero-chip-badge{font-size:9px;padding:2px 6px;border-radius:999px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.12);color:var(--gold-light)}
    .hero-chip.active .hero-chip-badge{background:rgba(0,0,0,.25);color:var(--bg)}
    .media-type-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:10px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;transition:all .18s}
    .media-type-btn:hover{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.05)}
    .media-type-btn.active{border-color:var(--gold);background:rgba(212,175,55,.12);box-shadow:0 0 0 1px var(--gold)}
    .media-type-btn b{font-size:12px;color:var(--gold-light)}
    .media-type-btn small{font-size:9.5px;color:var(--muted);line-height:1.2}
    .hero-mode-card{border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:14px 12px;cursor:pointer;display:flex;flex-direction:column;gap:5px;transition:all .2s ease;position:relative;user-select:none}
    .hero-mode-card:hover{border-color:rgba(212,175,55,.6);transform:translateY(-2px);background:rgba(212,175,55,.06)}
    .hero-mode-card.active{border-color:var(--gold);background:rgba(212,175,55,.15);box-shadow:0 0 16px rgba(212,175,55,.25)}
    .hero-mode-card .hero-mode-icon{font-size:22px;margin-bottom:2px}
    .hero-mode-card .hero-mode-title{font-size:13px;font-weight:800;color:var(--ink)}
    .hero-mode-card.active .hero-mode-title{color:var(--gold-light)}
    .hero-mode-card .hero-mode-sub{font-size:11px;color:var(--muted);line-height:1.35;flex-grow:1}
    .hero-mode-card .hero-mode-badge{margin-top:8px;font-size:9.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;align-self:flex-start;background:rgba(255,255,255,.08);color:var(--muted);transition:all .18s}
    .hero-mode-card.active .hero-mode-badge{background:var(--gold);color:var(--bg);box-shadow:0 2px 8px rgba(212,175,55,.4)}
    @keyframes heroMediaIn{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:scale(1)}}
    .hero-slide-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;padding-bottom:8%;color:var(--muted);font-size:13px}
    .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(7,7,9,.65);color:var(--ink);display:grid;place-items:center;font-size:18px}
    .hero-arrow.prev{left:8px}.hero-arrow.next{right:8px}
    /* ===== PHASE 1: EXTREME GLASSMORPHISM DESIGN SYSTEM & DUAL-MODE TOKENS ===== */
    :root {
      --glass-dark-surface: rgba(18, 18, 24, 0.76);
      --glass-dark-hover: rgba(28, 28, 38, 0.88);
      --glass-dark-border: rgba(255, 255, 255, 0.14);
      --glass-dark-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
      --glass-light-surface: rgba(255, 255, 255, 0.82);
      --glass-light-hover: rgba(255, 255, 255, 0.95);
      --glass-light-border: rgba(15, 23, 42, 0.1);
      --glass-light-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
      --font-numeric: 'JetBrains Mono', 'Outfit', monospace;
    }

    .hero-hint{position:absolute;bottom:8px;left:0;right:0;z-index:7;text-align:center;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,241,232,.35);pointer-events:none}
    .hero-info{position:relative;z-index:2;text-align:center;margin-top:12px;cursor:pointer;border-radius:20px;padding:14px 16px 12px;transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);border:1px solid var(--line);background:color-mix(in srgb, var(--card) 85%, transparent);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--shadow)}
    .hero-info:hover{border-color:var(--gold);transform:translateY(-2px)}
    .hero-info:active{transform:scale(.98)}
    .hero-info-tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:6px}
    .hero-info-name{font-family:var(--font-display);font-size:clamp(20px,4.5vw,24px);font-weight:800;margin:0 0 4px;color:var(--ink)}
    .hero-info-price{font-family:var(--font-display);font-size:18px;color:var(--gold-light);font-weight:800;font-variant-numeric:tabular-nums}
    .hero-info-cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--bg);letter-spacing:.04em;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);border-radius:999px;padding:8px 18px;box-shadow:0 4px 14px rgba(212,175,55,0.35);transition:transform .18s ease}
    .hero-info-cta:active{transform:scale(0.95)}
    .hero-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;position:relative;z-index:2}
    .hero-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:.2s;cursor:pointer}
    .hero-dot.active{background:var(--gold);width:16px;border-radius:4px}
    .search-wrap{margin-top:16px;position:relative;z-index:2;display:flex;align-items:center}
    .search-box{width:100%;border:1.5px solid var(--line);outline:0;border-radius:24px;padding:15px 52px 15px 48px;background:color-mix(in srgb, var(--card) 85%, transparent);box-shadow:0 8px 30px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.18);font-size:14.5px;font-weight:600;color:var(--ink);transition:all .25s var(--os-spring-smooth);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%)}
    .search-box:hover{border-color:rgba(212,175,55,0.4);transform:translateY(-1px);box-shadow:0 10px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.22)}
    .search-box:focus{border-color:var(--gold);background:var(--card);box-shadow:0 12px 36px rgba(212,175,55,0.22), inset 0 0 0 1px var(--gold);transform:scale(1.01)}
    .search-box::placeholder{color:var(--muted2);font-weight:500}
    .search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;pointer-events:none;transition:transform 0.25s var(--os-spring-expressive)}
    .search-box:focus ~ .search-icon, .search-wrap:hover .search-icon{transform:translateY(-50%) scale(1.15)}
    .search-kbd-hint{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:color-mix(in srgb, var(--card2) 80%, transparent);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:11px;font-weight:800;color:var(--muted);font-family:var(--font-mono);box-shadow:0 2px 5px rgba(0,0,0,0.06);cursor:pointer;pointer-events:auto;transition:all 0.18s ease}
    .search-kbd-hint:hover{background:var(--gold);color:#000;border-color:var(--gold)}
    .dietary-filter-bar::-webkit-scrollbar{display:none}
    .diet-chip{flex:0 0 auto;border:1px solid var(--line);background:color-mix(in srgb, var(--card2) 75%, transparent);color:var(--muted);border-radius:20px;padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);white-space:nowrap;backdrop-filter:blur(12px)}
    .diet-chip:hover{color:var(--ink);border-color:var(--gold);transform:translateY(-1px)}
    .diet-chip.active{background:rgba(212,175,55,0.18);color:var(--gold-light);border-color:var(--gold);box-shadow:0 4px 16px rgba(212,175,55,0.25)}
    
    /* ===== MENU VIEW HEADER & STICKY CATEGORY NAV ===== */
    .density-toggle-bar {
      padding: 8px 16px 12px;
      background: transparent;
    }
    .category-nav-sticky-wrap {
      display: block !important;
      position: -webkit-sticky !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      width: 100% !important;
      background: color-mix(in srgb, var(--card, #ffffff) 82%, transparent) !important;
      backdrop-filter: blur(28px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
      border-bottom: 1px solid var(--line, rgba(0,0,0,0.08)) !important;
      box-shadow: 0 10px 36px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2) !important;
      transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body[data-visual-theme^="classic-dark"] .category-nav-sticky-wrap,
    body[data-visual-theme="aura"] .category-nav-sticky-wrap,
    body[data-visual-theme="sunset"] .category-nav-sticky-wrap,
    body[data-visual-theme="midnight"] .category-nav-sticky-wrap,
    body[data-visual-theme="forest"] .category-nav-sticky-wrap,
    body[data-visual-theme="cyber-neon"] .category-nav-sticky-wrap {
      background: color-mix(in srgb, var(--card, #0f0f13) 78%, transparent) !important;
      border-bottom: 1px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    }
    body.has-demo-bar .category-nav-sticky-wrap {
      top: 48px !important;
    }
    .category-nav {
      display: flex !important;
      gap: 10px !important;
      overflow-x: auto !important;
      padding: 12px 16px !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
      max-width: 960px;
      margin: 0 auto;
    }
    .category-nav::-webkit-scrollbar { display: none !important; }
    .category-pill { 
      flex: 0 0 auto; 
      border: 1px solid var(--line); 
      background: color-mix(in srgb, var(--card2, #f5f5f5) 65%, transparent); 
      color: var(--ink); 
      border-radius: 999px; 
      padding: 9px 20px; 
      font-size: 13px; 
      font-weight: 700; 
      transition: all .25s cubic-bezier(0.16, 1, 0.3, 1); 
      white-space: nowrap; 
      cursor: pointer; 
      display: inline-flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .category-pill:hover { 
      transform: translateY(-2px); 
      background: var(--card); 
      box-shadow: 0 6px 18px rgba(0,0,0,0.08); 
      border-color: var(--gold);
    }
    .category-pill:active { transform: scale(.96) translateY(0); }
    .category-pill.active { 
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); 
      color: #0b0f19; 
      border-color: var(--gold); 
      box-shadow: 0 8px 24px rgba(212,175,55,0.42); 
      transform: scale(1.03); 
      font-weight: 800;
    }
    .cat-count-badge {
      background: rgba(0,0,0,0.12);
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 800;
      transition: all 0.2s;
    }
    .category-pill.active .cat-count-badge {
      background: rgba(11,15,25,0.22);
      color: #0b0f19;
    }
    /* ===== MENU LIST ===== */
    .menu-root{max-width:920px;margin:0 auto;padding-bottom:120px}
    .menu-section{padding:26px 14px 0}
    .section-head{display:flex;align-items:baseline;gap:10px}
    .section-head h2{font-family:var(--font-display);font-size:22px;margin:0;color:var(--ink);letter-spacing:.02em}
    .section-count{font-size:11px;color:var(--muted);font-weight:600}
    .section-rule{height:1px;margin:10px 0 16px;background:linear-gradient(90deg,var(--gold),transparent 70%)}
    /* ==========================================================================
       PHASE 2: 3D CARD TILT, MODAL ORIGIN MORPH & DYNAMIC ISLAND CART DOCK
       ========================================================================== */
    .menu-grid { display:flex; flex-direction:column; gap:14px; }
    .menu-card {
      display: flex;
      flex-direction: row-reverse;
      gap: 16px;
      background: var(--card);
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--line);
      padding: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      transition: transform var(--dur-normal) var(--spring-bounce), border-color var(--dur-fast) ease, box-shadow var(--dur-normal) var(--spring-smooth) !important;
      position: relative;
      content-visibility: auto;
      contain-intrinsic-size: auto 140px;
    }
    .menu-card::after {
      content: "";
      position: absolute;
      top: 0; left: -120%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      transform: skewX(-20deg);
      pointer-events: none;
      transition: left 0.6s var(--spring-smooth);
    }
    @media(hover:hover){
      .menu-card:hover {
        border-color: var(--gold);
        transform: perspective(1000px) translateY(-3px) scale(1.015);
        box-shadow: 0 18px 45px rgba(212,175,55,0.15), 0 4px 16px rgba(0,0,0,0.08);
      }
      .menu-card:hover::after {
        left: 140%;
      }
    }
    .menu-card:active {
      transform: scale(0.975) !important;
      transition: transform var(--dur-instant) var(--spring-snappy) !important;
    }
    .card-media {
      position: relative;
      flex: 0 0 115px;
      width: 115px;
      height: 115px;
      border-radius: 16px;
      overflow: hidden;
      background: var(--card2);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 6px 18px rgba(0,0,0,0.12);
    }
    .card-media img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.4s var(--spring-smooth) !important;
    }
    @media(hover:hover){
      .menu-card:hover .card-media img {
        transform: scale(1.08);
      }
    }

    /* Modal Canvas Depth Scale-Back (Apple iOS Depth Stacking) */
    body.modal-open #appContent,
    body.drawer-open #appContent {
      transform: scale(0.985);
      filter: blur(2px) brightness(0.94);
      transition: transform 0.35s var(--spring-smooth), filter 0.35s ease;
    }
    #appContent {
      transition: transform 0.3s var(--spring-smooth), filter 0.3s ease;
      will-change: transform, filter;
    }

    /* Modal Sheet Origin Morphing Animation */
    .modal-sheet {
      position: relative;
      width: min(580px,100%);
      margin: auto;
      background: color-mix(in srgb, var(--card) 88%, transparent);
      backdrop-filter: blur(32px) saturate(200%);
      -webkit-backdrop-filter: blur(32px) saturate(200%);
      border-radius: 26px;
      padding: 20px;
      max-height: 90vh;
      overflow: auto;
      border: 1px solid var(--line);
      color: var(--ink);
      box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.2);
      transform-origin: center center;
      animation: modalOriginPop 0.34s var(--spring-bounce) forwards;
    }
    @keyframes modalOriginPop {
      0% { opacity: 0; transform: scale(0.92) translateY(24px); }
      65% { opacity: 1; transform: scale(1.02) translateY(-2px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    /* Dynamic Island Floating Cart Dock Morphing */
    .cart-fab-circle {
      position: relative !important;
      width: 58px !important;
      height: 58px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
      color: #ffffff !important;
      border: 2px solid rgba(254, 240, 138, 0.85) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 10px 28px rgba(180, 83, 9, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 18px rgba(212, 175, 55, 0.35) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer !important;
      transition: transform var(--dur-normal) var(--spring-bounce), box-shadow var(--dur-normal) ease !important;
      padding: 0 !important;
      margin: 0 !important;
      outline: none !important;
    }
    .cart-fab-wrapper.show .cart-fab-circle {
      animation: dynamicIslandPop 0.42s var(--spring-bounce) forwards;
    }
    @keyframes dynamicIslandPop {
      0% { transform: scale(0.5); opacity: 0; }
      70% { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .cart-fab-badge {
      animation: badgeSpringPop 0.3s var(--spring-bounce);
    }
    @keyframes badgeSpringPop {
      0% { transform: scale(0.7); }
      60% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    .food-badge{position:absolute;top:8px;right:8px;width:16px;height:16px;background:#ffffff;border:1.5px solid var(--green);border-radius:4px;display:grid;place-items:center;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.25)}
    .food-badge:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
    .food-badge.nonveg{border-color:var(--red)}.food-badge.nonveg:after{background:var(--red)}
    .view-3d{position:absolute;bottom:6px;left:6px;right:6px;border:0;border-radius:8px;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);color:#0b0f19;padding:5px;font-size:9px;font-weight:900;letter-spacing:.04em;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.45)}
    .card-content{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;justify-content:center}
    .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
    .card-title{font-family:var(--font-display);font-size:16px;line-height:1.25;color:var(--ink);margin:0;font-weight:800;letter-spacing:-0.01em}
    .featured-tag{font-size:8px;color:#0b0f19;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);border-radius:5px;padding:3px 7px;white-space:nowrap;font-weight:900;letter-spacing:.04em;margin-top:2px;box-shadow:0 2px 8px rgba(212,175,55,0.3)}
    .card-desc{font-size:12px;color:var(--muted);line-height:1.42;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .card-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
    .price{font-family:var(--font-display);color:var(--gold-light);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
    .add-btn{border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.12);color:var(--gold-light);border-radius:10px;padding:8px 20px;font-size:12px;font-weight:800;transition:all .18s cubic-bezier(0.16, 1, 0.3, 1);backdrop-filter:blur(8px)}
    .add-btn:hover{background:var(--gold);color:#0b0f19;box-shadow:0 4px 14px rgba(212,175,55,0.35)}
    .add-btn:active{transform:scale(0.92)}
    .stepper{display:flex;align-items:center;background:rgba(212,175,55,.12);border:1.5px solid rgba(212,175,55,.45);border-radius:10px;overflow:hidden;backdrop-filter:blur(8px)}
    .stepper button{width:32px;height:32px;border:0;background:transparent;color:var(--gold-light);font-size:18px;font-weight:800;transition:background .15s}
    .stepper button:active{background:rgba(212,175,55,.35)}
    .stepper span{min-width:24px;text-align:center;color:var(--gold-light);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
    .empty-state{text-align:center;padding:48px 20px;color:var(--muted);font-size:14px}
    .empty-state:before{content:"🍽";display:block;font-size:36px;margin-bottom:10px;opacity:.7}
    .theme-preset-grid,.font-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px;margin-top:6px}
    .theme-swatch,.font-swatch{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px;cursor:pointer;text-align:left;color:var(--ink);transition:border-color .15s,transform .12s;font-size:11px}
    .theme-swatch:hover,.font-swatch:hover{border-color:rgba(212,175,55,.45)}
    .theme-swatch.active,.font-swatch.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
    .theme-swatch .sw{width:100%;height:28px;border-radius:8px;margin-bottom:8px;border:1px solid var(--line)}
    .theme-swatch b,.font-swatch b{display:block;font-size:11.5px;font-weight:800;margin-bottom:2px}
    .theme-swatch small,.font-swatch small{color:var(--muted);font-size:9.5px;line-height:1.3}
    .font-swatch .font-demo{font-size:15px;margin-bottom:6px;line-height:1.2;color:var(--gold-light)}
    
    
/* ===== CLASSIC PHYSICAL & SPACE-OPTIMIZED MENU LAYOUTS ===== */
    .menu-list-layout { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 10px 0 30px; }
    
    /* 1. COMPACT 2-COLUMN GRID MODE (Fits 6-8 items on mobile viewport) */
    .menu-list-layout.layout-grid-2col {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
      padding: 8px 0 24px !important;
    }
    @media(min-width: 640px) {
      .menu-list-layout.layout-grid-2col {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
      }
    }
    @media(min-width: 1024px) {
      .menu-list-layout.layout-grid-2col {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
      }
    }

    .menu-card.grid-card {
      display: flex !important;
      flex-direction: column !important;
      background: color-mix(in srgb, var(--card) 85%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--line);
      padding: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }
    .menu-card.grid-card:hover {
      border-color: var(--gold);
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(212,175,55,0.15);
    }
    .menu-card.grid-card:active {
      transform: scale(0.97);
    }
    .card-media-grid {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 12px;
      overflow: hidden;
      background: var(--card2);
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    }
    .card-media-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .menu-card.grid-card:hover .card-media-grid img {
      transform: scale(1.06);
    }
    .view-3d-badge {
      position: absolute;
      bottom: 6px;
      right: 6px;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      color: #0b0f19;
      border: none;
      border-radius: 6px;
      padding: 3px 7px;
      font-size: 9px;
      font-weight: 900;
      box-shadow: 0 3px 8px rgba(0,0,0,0.35);
      cursor: pointer;
    }
    .combo-badge-mini {
      position: absolute;
      top: 6px;
      left: 6px;
      background: #f97316;
      color: #ffffff;
      font-size: 8px;
      font-weight: 900;
      padding: 2px 6px;
      border-radius: 5px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }

    .card-content-grid {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
      margin-top: 8px;
      gap: 6px;
    }
    .card-top-grid {
      cursor: pointer;
    }
    .card-title-grid {
      font-family: var(--font-display);
      font-size: 13.5px;
      font-weight: 800;
      color: var(--ink);
      line-height: 1.25;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      letter-spacing: -0.01em;
    }
    .card-bottom-grid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
      gap: 4px;
    }
    .card-bottom-grid .add-btn {
      padding: 6px 14px;
      font-size: 11px;
      border-radius: 8px;
    }
    .card-bottom-grid .stepper button {
      width: 28px;
      height: 28px;
      font-size: 15px;
    }
    .card-bottom-grid .stepper span {
      min-width: 20px;
      font-size: 12px;
    }
    .price-grid {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 800;
      color: var(--gold-light);
      font-variant-numeric: tabular-nums;
    }

    /* 2. ULTRA-DENSE SINGLE-ROW LIST MODE (Fits 8-10 items on mobile viewport) */
    .menu-list-layout.layout-list-dense {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      padding: 6px 0 20px !important;
    }
    .menu-card.dense-card {
      display: flex !important;
      align-items: center !important;
      flex-direction: row !important;
      background: color-mix(in srgb, var(--card) 85%, transparent);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border-radius: 14px;
      border: 1px solid var(--line);
      padding: 8px 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .menu-card.dense-card:hover {
      border-color: rgba(212,175,55,0.4);
      transform: translateY(-1px);
    }
    .menu-card.dense-card:active {
      background: var(--card2);
    }
    .dense-thumb {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    .food-badge-inline {
      width: 11px;
      height: 11px;
      background: #ffffff;
      border: 1.5px solid var(--green);
      border-radius: 3px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .food-badge-inline:after {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--green);
    }
    .food-badge-inline.nonveg {
      border-color: var(--red);
    }
    .food-badge-inline.nonveg:after {
      background: var(--red);
    }

    .dense-info {
      flex: 1;
      min-width: 0;
      padding: 0 8px;
      cursor: pointer;
    }
    .dense-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dense-price {
      font-size: 12px;
      font-weight: 800;
      color: var(--gold-light);
      margin-top: 1px;
    }
    .dense-tag {
      font-size: 8px;
      font-weight: 800;
      background: var(--gold);
      color: #100c02;
      padding: 1px 4px;
      border-radius: 3px;
    }
    .dense-action {
      flex-shrink: 0;
    }
    .dense-action .add-btn {
      padding: 5px 12px;
      font-size: 11px;
      border-radius: 6px;
    }
    .dense-action .stepper button {
      width: 26px;
      height: 26px;
      font-size: 15px;
    }
    .dense-action .stepper span {
      min-width: 18px;
      font-size: 11.5px;
    }

    /* 3. DETAILED CARD MODE */
    .menu-list-layout.layout-card-detailed {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 16px !important;
      padding: 10px 0 30px !important;
    }
    @media(min-width: 800px){
      .menu-list-layout.layout-card-detailed {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 40px !important;
      }
    }

    /* LAYOUT SWITCHER PILLS */
    .layout-toggle-bar {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .layout-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--card2);
      border: 1px solid var(--line);
      color: var(--muted);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 10.5px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }
    .layout-pill:hover {
      border-color: rgba(212,175,55,0.4);
      color: var(--ink);
    }
    .layout-pill.active {
      background: rgba(212,175,55,0.18);
      border-color: var(--gold);
      color: var(--gold-light);
      box-shadow: 0 2px 8px rgba(212,175,55,0.2);
    }
    .classic-item { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px dashed rgba(160, 150, 140, 0.2); }
    .classic-item-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .classic-item-header { display: flex; align-items: baseline; width: 100%; }
    .classic-item-name { font-size: 15.5px; font-weight: 700; color: var(--ink); white-space: normal; line-height: 1.3; }
    .classic-item-dots { flex: 1; border-bottom: 2px dotted var(--line); margin: 0 10px; opacity: 0.6; position: relative; top: -4px; min-width: 20px; }
    .classic-item-price { font-size: 16px; font-weight: 800; color: var(--ink); white-space: nowrap; font-family: var(--font-display); }
    .classic-item-desc { font-size: 11.5px; color: var(--muted); margin-top: 4px; white-space: normal; }
    
    .classic-item-add { margin-left: 4px; flex-shrink: 0; }
    .classic-item-add button.add-btn { background: rgba(212,175,55,0.08); border: 1.5px solid var(--gold); color: var(--gold-light); font-weight: 800; font-size: 11px; border-radius: 6px; padding: 6px 14px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
    .classic-item-add button.add-btn:hover { background: var(--gold); color: #100c02; }
    .classic-item-add button:active { transform: scale(0.95); }
    .classic-item-add .qty-ctrl { height: 32px; border-radius: 6px; background: rgba(212,175,55,0.08); border: 1.5px solid var(--gold); }
    .classic-item-add .qty-btn { font-size: 16px; width: 28px; }
    
     /* Lift above cart bar */

/* ===== CUSTOMER BOTTOM DOCK (COMPACT BOTTOM RIGHT) & CART BAR ===== */
    .customer-bottom-bar{position:fixed;right:max(14px,env(safe-area-inset-right,14px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 14px));z-index:100015;display:inline-flex;align-items:center;gap:8px;pointer-events:none;transition:all .28s cubic-bezier(0.34,1.56,0.64,1);max-width:calc(100vw - 28px)}
    .customer-bottom-bar > *{pointer-events:auto}
    .customer-bottom-bar.raised{bottom:max(78px,calc(env(safe-area-inset-bottom,0px) + 72px))}
    .waiter-fab{flex:0 0 auto;display:none;align-items:center;justify-content:center;gap:6px;background:rgba(18,14,10,.95);color:var(--gold-light);border:1.5px solid rgba(212,175,55,.5);border-radius:9999px;padding:8px 14px;font-size:11.5px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.6),0 2px 6px rgba(212,175,55,.2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:all .2s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap}
    .waiter-fab:hover{transform:translateY(-2px);background:rgba(28,22,14,.98);border-color:var(--gold);box-shadow:0 12px 30px rgba(0,0,0,.7),0 4px 12px rgba(212,175,55,.35)}
    .waiter-fab:active{transform:scale(.95)}
    .waiter-fab.show{display:inline-flex}
    .waiter-fab.calling{background:linear-gradient(135deg,var(--gold),#b78e1b);color:#100c02;animation:waiterPulse 1.2s ease-in-out infinite;border-color:transparent}
    .waiter-fab-icon{font-size:13.5px;display:inline-flex}
    .customer-orders-fab{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(18,14,10,.95);color:#f8fafc;border:1.5px solid rgba(212,175,55,.35);border-radius:9999px;padding:8px 13px;font-size:11.5px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:all .2s cubic-bezier(0.34,1.56,0.64,1);white-space:nowrap}
    .customer-orders-fab:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold-light)}
    .customer-orders-fab:active{transform:scale(.95)}
    .orders-fab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;background:var(--gold);color:#100c02;border-radius:99px;font-size:10px;font-weight:900;line-height:1}
    /* ===== FLOATING ACTION CART BUTTON (COMPACT CIRCULAR WATERMARK WIDGET) ===== */
    .cart-fab-wrapper,
    .cart-bar {
      position: fixed !important;
      right: 20px !important;
      left: auto !important;
      bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
      z-index: 100020 !important;
      display: none;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      opacity: 0;
      transform: scale(0.6) translateY(20px);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease, filter 0.2s ease !important;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      max-width: none !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .cart-fab-wrapper.show,
    .cart-bar.show {
      display: flex !important;
      opacity: 1 !important;
      transform: scale(1) translateY(0) !important;
    }

    .cart-fab-circle {
      position: relative !important;
      width: 58px !important;
      height: 58px !important;
      border-radius: 50% !important;
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
      color: #ffffff !important;
      border: 2px solid rgba(254, 240, 138, 0.85) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      box-shadow: 0 10px 28px rgba(180, 83, 9, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 18px rgba(212, 175, 55, 0.35) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      cursor: pointer !important;
      transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
      padding: 0 !important;
      margin: 0 !important;
      outline: none !important;
    }

    .cart-fab-wrapper:hover .cart-fab-circle {
      transform: scale(1.08) !important;
      box-shadow: 0 14px 34px rgba(180, 83, 9, 0.65), 0 0 24px rgba(212, 175, 55, 0.5) !important;
    }

    .cart-fab-wrapper:active .cart-fab-circle {
      transform: scale(0.92) !important;
    }

    .cart-fab-icon {
      font-size: 26px !important;
      color: #ffffff !important;
      line-height: 1 !important;
      display: inline-block !important;
    }

    .cart-fab-badge {
      position: absolute !important;
      top: -3px !important;
      right: -3px !important;
      min-width: 22px !important;
      height: 22px !important;
      padding: 0 5px !important;
      border-radius: 999px !important;
      background: #ef4444 !important;
      color: #ffffff !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      line-height: 22px !important;
      text-align: center !important;
      border: 2px solid #ffffff !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
      animation: fabBadgePulse 2s infinite ease-in-out;
    }

    @keyframes fabBadgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.12); }
    }

    .cart-fab-price-pill {
      margin-top: 5px !important;
      background: rgba(15, 23, 42, 0.92) !important;
      color: #fef08a !important;
      border: 1px solid rgba(245, 158, 11, 0.6) !important;
      border-radius: 999px !important;
      padding: 2px 9px !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: 0.2px !important;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      white-space: nowrap !important;
      pointer-events: none !important;
    }

    .admin-dark-theme .cart-fab-price-pill,
    body.admin-dark-mode .cart-fab-price-pill {
      background: rgba(15, 23, 42, 0.95) !important;
      color: #38bdf8 !important;
      border-color: rgba(56, 189, 248, 0.5) !important;
    }
    @keyframes waiterPulse{0%,100%{box-shadow:0 12px 28px rgba(212,175,55,.25);transform:scale(1)}50%{box-shadow:0 12px 28px rgba(212,175,55,.6);transform:scale(1.04)}}
    
    body:not(.saas-public) .customer-only-form {
      display: none !important;
    }

    /* ===== MINIMAL TABLE ASSISTANCE MODAL ===== */
    .waiter-sheet{background:color-mix(in srgb, var(--card, #121216) 88%, transparent);border:1px solid rgba(212,175,55,.35);backdrop-filter:blur(28px) saturate(190%);-webkit-backdrop-filter:blur(28px) saturate(190%);box-shadow:0 20px 50px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18);border-radius:24px;padding:20px}
    .waiter-sheet-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px}
    .waiter-sheet-icon{font-size:28px;display:inline-flex}
    .waiter-table-pill{font-size:11px;font-weight:800;background:rgba(212,175,55,.18);color:var(--gold-light);border:1px solid rgba(212,175,55,.45);padding:4px 12px;border-radius:99px;letter-spacing:.04em;backdrop-filter:blur(10px)}
    .waiter-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
    @media(max-width:400px){.waiter-action-grid{grid-template-columns:1fr}}
    .waiter-action-btn{display:flex;align-items:center;gap:12px;background:color-mix(in srgb, var(--card2) 65%, transparent);border:1.5px solid var(--line);border-radius:18px;padding:14px;cursor:pointer;transition:all .22s cubic-bezier(0.16,1,0.3,1);color:var(--ink);text-align:left;position:relative;overflow:hidden;backdrop-filter:blur(14px)}
    .waiter-action-btn:hover{background:rgba(212,175,55,.16);border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 28px rgba(212,175,55,0.25)}
    .waiter-action-btn:active{transform:scale(.97)}
    .waiter-action-icon-box{width:42px;height:42px;border-radius:14px;background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.35);display:grid;place-items:center;font-size:20px;flex:0 0 42px}
    .waiter-action-text{min-width:0;flex:1}
    .waiter-action-title{font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:2px}
    .waiter-action-desc{font-size:11px;color:var(--muted);line-height:1.28}

    .wtr-table-pick-btn {
      transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .wtr-table-pick-btn:hover {
      transform: translateY(-2px) scale(1.05);
      border-color: var(--gold) !important;
      color: var(--gold-light) !important;
    }
    .wtr-table-pick-btn.active {
      background: var(--gold) !important;
      color: #100c02 !important;
      border-color: var(--gold) !important;
      box-shadow: 0 4px 14px rgba(212, 175, 55, 0.45);
    }
    .water-quick-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 18px rgba(56,189,248,0.45) !important;
    }

    /* ===== UNIVERSAL MOUSE DRAG SCROLL STYLING ===== */
    .is-mouse-draggable{cursor:grab;user-select:none;-webkit-user-select:none}
    .is-mouse-dragging{cursor:grabbing!important;user-select:none!important}
    .is-mouse-dragging *{pointer-events:none!important}
    /* ===== OVERLAYS / MODALS ===== */
    .overlay{position:fixed;inset:0;z-index:360;background:rgba(0,0,0,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:none}
    .overlay.open{display:flex}
    .modal-sheet{position:relative;width:min(580px,100%);margin:auto;background:color-mix(in srgb, var(--card) 88%, transparent);backdrop-filter:blur(32px) saturate(200%);-webkit-backdrop-filter:blur(32px) saturate(200%);border-radius:26px;padding:20px;max-height:90vh;overflow:auto;border:1px solid var(--line);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.2)}
    .modal-close{position:absolute;right:16px;top:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:rgba(212,175,55,.15);color:var(--gold-light);font-weight:800;z-index:2;cursor:pointer;display:grid;place-items:center;transition:all .18s ease}
    .modal-close:hover{background:var(--gold);color:#0b0f19;transform:scale(1.08)}
    .modal-handle{width:48px;height:5px;border-radius:99px;background:var(--line);margin:0 auto 16px;opacity:0.6}
    .modal-sheet h3{font-family:var(--font-display);color:var(--ink);margin:12px 0 4px;font-size:22px;font-weight:800}
    .modal-price{color:var(--gold-light);font-weight:800;font-variant-numeric:tabular-nums}
    .model-hint{font-size:11px;color:var(--muted);margin:7px 0}
    .model-credit{font-size:10px;color:var(--gold-deep);font-weight:800}
    model-viewer{display:block;width:100%;height:340px;border:0;background:transparent;--poster-color:transparent;outline:0}
    .model-hint,.model-credit{display:none}
    .drawer-overlay{position:fixed;inset:0;z-index:100020;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none}
    .drawer-overlay.open{display:block}
    .drawer{position:fixed;z-index:100021;left:50%;bottom:0;top:auto;width:100%;max-width:640px;max-height:92vh;background:color-mix(in srgb, var(--card) 90%, transparent);backdrop-filter:blur(36px) saturate(200%);-webkit-backdrop-filter:blur(36px) saturate(200%);transform:translate(-50%, 100%);transition:transform .38s cubic-bezier(0.16, 1, 0.3, 1);display:flex;flex-direction:column;border-top:1px solid var(--line);border-radius:28px 28px 0 0;box-shadow:0 -16px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,0.2);overflow:hidden}
    .drawer.open{transform:translate(-50%, 0)}
    .drawer-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 16px;border-bottom:1px solid var(--line);flex:0 0 auto;background:transparent}
    .drawer-header h2{font-family:var(--font-display);color:var(--ink);margin:0;font-size:21px;font-weight:800}
    .drawer-scroll-wrap{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:calc(92vh - 120px);padding:0}
    .drawer-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
    .drawer-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:color-mix(in srgb, var(--card2) 65%, transparent);border:1px solid var(--line);border-radius:18px;transition:all .18s ease;backdrop-filter:blur(12px)}
    .drawer-item:hover{border-color:rgba(212,175,55,0.45);transform:translateY(-1px)}
    .drawer-item strong{display:block;font-size:14.5px;color:var(--ink);font-weight:800}
    .drawer-item small{display:block;color:var(--gold-light);font-size:12.5px;margin-top:3px;font-weight:700;font-variant-numeric:tabular-nums}
    
    /* Cart Recommendations Carousel */
    .drawer-recommendations{padding:16px 20px;background:linear-gradient(180deg, rgba(212,175,55,0.08), transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .drawer-rec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
    .drawer-rec-head strong{font-size:12px;font-weight:800;color:var(--gold-light);text-transform:uppercase;letter-spacing:0.04em;display:flex;align-items:center;gap:6px}
    .drawer-rec-head small{font-size:11px;color:var(--muted)}
    .drawer-rec-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .drawer-rec-scroll::-webkit-scrollbar{height:4px}
    .drawer-rec-scroll::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.35);border-radius:4px}
    .drawer-rec-card{flex:0 0 170px;max-width:180px;background:color-mix(in srgb, var(--card2) 80%, transparent);border:1px solid rgba(212,175,55,0.3);border-radius:16px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;scroll-snap-align:start;transition:all .2s ease;backdrop-filter:blur(12px)}
    .drawer-rec-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,175,55,0.2)}
    .drawer-rec-thumb{width:100%;height:80px;border-radius:10px;object-fit:cover;background:#111}
    .drawer-rec-name{font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .drawer-rec-price{font-size:12.5px;font-weight:800;color:var(--gold-light);font-variant-numeric:tabular-nums}
    .drawer-rec-btn{width:100%;border:0;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);color:#0b0f19;border-radius:10px;padding:8px 12px;font-size:11.5px;font-weight:900;cursor:pointer;transition:transform .12s}
    .drawer-rec-btn:active{transform:scale(0.95)}
    
    .drawer-footer{padding:16px 20px 20px;background:transparent}
    .drawer-action-bar{padding:14px 20px 18px;background:transparent;border-top:1px solid var(--line);flex:0 0 auto}
    .drawer-action-bar .order-btn{margin-top:0}
    .table-message{padding:14px 16px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.3);border-radius:14px;color:var(--gold-light);font-size:12.5px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(8px)}
    .table-message.warning{color:var(--red);background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3)}
    .summary-row{display:flex;justify-content:space-between;margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:600}
    .summary-row.total{font-size:19px;font-weight:900;color:var(--ink);margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-variant-numeric:tabular-nums}
    .order-btn{width:100%;margin-top:16px;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);color:#0b0f19;border:0;border-radius:18px;padding:18px;font-size:16px;font-weight:900;position:sticky;bottom:0;z-index:2;box-shadow:0 10px 32px rgba(212,175,55,.4);transition:transform .18s ease}
    .order-btn:active{transform:scale(0.98)}

    /* ===== PHASE 3: WAITER PAD & TABLE FLOOR MANAGEMENT GLASS SYSTEM ===== */
    .qw-fullscreen-overlay {
      background: color-mix(in srgb, var(--card, #0a0c10) 92%, transparent) !important;
      backdrop-filter: blur(28px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
      animation: modalOriginPop 0.32s var(--spring-smooth) forwards;
    }
    .qw-container {
      background: color-mix(in srgb, var(--card, #0a0c10) 90%, transparent) !important;
      color: var(--ink) !important;
      backdrop-filter: blur(28px) !important;
    }
    .qw-top-bar {
      background: color-mix(in srgb, var(--card2, #0f172a) 85%, transparent) !important;
      backdrop-filter: blur(20px) !important;
      border-bottom: 1px solid var(--line) !important;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    }
    .qw-grid-scroll, .qw-cart-scroll {
      transition: flex var(--dur-normal) var(--spring-glide), width var(--dur-normal) var(--spring-glide) !important;
      will-change: flex, width;
    }
    
    /* Table Floor Map Cards */
    .table-section-pill {
      background: color-mix(in srgb, var(--card2) 70%, transparent);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 18px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink);
      cursor: pointer;
      transition: all 0.22s var(--spring-smooth);
      backdrop-filter: blur(12px);
    }
    .table-section-pill.active {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
      color: #0b0f19;
      border-color: var(--gold);
      box-shadow: 0 6px 20px rgba(212,175,55,0.35);
      transform: scale(1.02);
    }
    
    .floor-table-card {
      background: color-mix(in srgb, var(--card) 85%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1.5px solid var(--line);
      border-radius: 20px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      transition: transform var(--dur-normal) var(--spring-bounce), border-color var(--dur-fast) ease, box-shadow var(--dur-normal) var(--spring-smooth) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.15);
      position: relative;
      overflow: hidden;
    }
    .floor-table-card:hover {
      transform: translateY(-3px) scale(1.015);
      border-color: var(--gold);
      box-shadow: 0 14px 32px rgba(212,175,55,0.22);
    }
    .floor-table-card:active {
      transform: scale(0.97) !important;
    }
    
    /* Table Status Multi-Wave Concentric Luminous Rings */
    .floor-table-card.status-free {
      border-color: rgba(148, 163, 184, 0.3);
    }
    .floor-table-card.status-dining {
      border-color: rgba(34, 197, 94, 0.5);
      background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(16, 185, 129, 0.05) 100%);
      box-shadow: 0 8px 28px rgba(34, 197, 94, 0.2);
    }
    .floor-table-card.status-needs_bill {
      border-color: rgba(245, 158, 11, 0.5);
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(212, 175, 55, 0.06) 100%);
      box-shadow: 0 8px 28px rgba(245, 158, 11, 0.2);
    }
    .floor-table-card.status-reserved {
      border-color: rgba(6, 182, 212, 0.5);
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(14, 165, 233, 0.05) 100%);
    }

    .table-status-ring {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
      position: relative;
    }
    .table-status-ring.free { background: #94a3b8; }
    .table-status-ring.dining { 
      background: #22c55e; 
      box-shadow: 0 0 12px #22c55e;
      animation: multiWavePulseGreen 2.2s infinite ease-out; 
    }
    .table-status-ring.needs_bill { 
      background: #f59e0b; 
      box-shadow: 0 0 12px #f59e0b;
      animation: multiWavePulseAmber 1.6s infinite ease-out; 
    }
    .table-status-ring.reserved { 
      background: #06b6d4; 
      box-shadow: 0 0 10px #06b6d4;
    }

    @keyframes multiWavePulseGreen {
      0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); transform: scale(1); }
      70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); transform: scale(1.08); }
      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
    }
    @keyframes multiWavePulseAmber {
      0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); transform: scale(1); }
      70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); transform: scale(1.12); }
      100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); transform: scale(1); }
    }

    /* Chef Instruction Tooltip Elastic Pop */
    #chefInstTooltip {
      animation: tooltipSpringPop 0.2s var(--spring-bounce);
    }
    @keyframes tooltipSpringPop {
      0% { opacity: 0; transform: translateY(-4px) scale(0.92); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ===== SMART PAIRING UPSELL DRAWER ===== */
    .smart-pairing-drawer{position:fixed;left:14px;right:14px;bottom:94px;max-width:540px;margin:0 auto;z-index:55;background:rgba(20,20,26,0.96);border:1px solid rgba(212,175,55,0.4);border-radius:20px;padding:14px 16px;box-shadow:0 20px 48px rgba(0,0,0,0.65),0 0 0 1px rgba(212,175,55,0.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:var(--ink);transform:translateY(120%);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(0.16,1,0.3,1),opacity .3s ease;display:flex;flex-direction:column;gap:10px}
    .smart-pairing-drawer.open{transform:translateY(0);opacity:1;pointer-events:auto}
    .smart-pairing-header{display:flex;justify-content:space-between;align-items:center;gap:10px}
    .smart-pairing-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(212,175,55,0.18);color:var(--gold-light);border:1px solid rgba(212,175,55,0.35);border-radius:99px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:0.04em}
    .smart-pairing-close{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.08);color:var(--muted);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
    .smart-pairing-close:hover{color:#fff;background:rgba(255,255,255,0.2)}
    .smart-pairing-prompt{font-size:12.5px;color:#fff;line-height:1.4;font-weight:600}
    .smart-pairing-prompt strong{color:var(--gold-light);font-weight:800}
    .smart-pairing-list{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
    .smart-pairing-list::-webkit-scrollbar{display:none}
    .smart-pairing-card{flex:1 0 210px;max-width:240px;background:rgba(255,255,255,0.06);border:1px solid rgba(212,175,55,0.2);border-radius:14px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:6px;transition:all .2s ease}
    .smart-pairing-card:hover{background:rgba(212,175,55,0.1);border-color:rgba(212,175,55,0.45)}
    .smart-pairing-thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--card)}
    .smart-pairing-info{flex:1;min-width:0}
    .smart-pairing-name{font-size:12px;font-weight:700;color:#ffffff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .smart-pairing-price{font-size:11px;color:var(--gold-light);font-weight:800;margin-top:2px}
    .smart-pairing-add-btn{border:0;background:var(--gold);color:var(--bg);font-weight:800;font-size:11px;border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap;transition:transform .12s,background .15s;flex-shrink:0}
    .smart-pairing-add-btn:active{transform:scale(0.95)}
    .smart-pairing-add-btn.added{background:#22c55e;color:#ffffff}

    /* ===== COMBO MEAL PACKAGE BUNDLE STYLING ===== */
    .menu-card.combo-card{border:1.5px solid rgba(212,175,55,0.4);background:linear-gradient(180deg, rgba(212,175,55,0.04), var(--card))}
    .combo-badge{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),#a67329);color:var(--bg);font-size:10px;font-weight:900;letter-spacing:0.06em;padding:3px 8px;border-radius:6px;text-transform:uppercase}
    .combo-savings-pill{display:inline-flex;align-items:center;gap:3px;background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3);font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:99px}
    .price-strikethrough{text-decoration:line-through;color:var(--muted);font-size:12px;font-weight:600}
    .combo-package-breakdown{margin:8px 0;background:rgba(255,255,255,0.03);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
    .combo-package-title{font-size:10.5px;font-weight:800;color:var(--gold-light);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.04em}
    .combo-package-items{display:flex;flex-direction:column;gap:3px}
    .combo-package-item{font-size:11px;color:var(--ink);display:flex;align-items:center;gap:6px}
    .combo-package-item .combo-check{color:#22c55e;font-size:10px;font-weight:900}
    .empty-state{text-align:center;color:var(--muted);padding:58px 20px;font-size:14px}
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{color:var(--gold-light);font-size:11px;font-weight:800}
    .field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 11px;outline:0;color:var(--ink);font-size:13px}
    .field textarea{min-height:70px;resize:vertical}
    .chat-privacy-note{font-size:11px;color:var(--muted);background:rgba(212,175,55,.06);border-radius:9px;padding:8px 10px}
    /* Admin - High-End Partner Dashboard (Zomato/Swiggy Style) */
    .admin-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: none; overflow: auto; }
    .admin-overlay::before { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at top left, rgba(212,175,55,0.04), transparent 70%); pointer-events:none; }
    .admin-overlay.open { display: block; animation: fadeUp 0.3s cubic-bezier(0.16,1,0.3,1); }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    /* =========================================================================
       ENTERPRISE SAAS THEME SYSTEM (SUPER ADMIN & RESTAURANT CLIENT ADMIN)
       - Light Mode: Classic White canvas (#f8fafc), crisp white cards, Slate 900 text
       - Dark Mode: Eye-safe Slate Dark canvas (#0f172a), Slate 800 cards, Slate 50 text
       - Flawless contrast, pristine typography, seamless 1-tap live theme toggle
       ========================================================================= */
    .admin-overlay,
    .saas-admin {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* --- ADMIN THEME SYSTEM (LIGHT / DARK) --- */
    html[data-admin-theme="light"],
    body[data-admin-theme="light"],
    body.admin-light-mode,
    .admin-overlay.light-mode,
    .admin-overlay:not(.dark-mode),
    .saas-admin.light-mode,
    .saas-admin:not(.dark-mode) {
      --bg: #f8fafc !important;
      --card: #ffffff !important;
      --card2: #f1f5f9 !important;
      --card3: #e2e8f0 !important;
      --ink: #0f172a !important;
      --muted: #475569 !important;
      --muted2: #64748b !important;
      --line: #e2e8f0 !important;
      --line2: #cbd5e1 !important;
      --shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
      --gold: #2563eb !important;
      --gold-light: #1d4ed8 !important;
      --gold-deep: #1e40af !important;
      --green: #10b981 !important;
      --red: #ef4444 !important;
      
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }

    /* Admin Overlays Base Container in Light Mode */
    .admin-overlay.light-mode,
    .admin-overlay:not(.dark-mode),
    .saas-admin.light-mode,
    .saas-admin:not(.dark-mode) {
      background: #f8fafc !important;
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }

    .admin-overlay.light-mode::before,
    .admin-overlay:not(.dark-mode)::before {
      background: radial-gradient(ellipse at top left, rgba(37, 99, 235, 0.03), transparent 70%) !important;
    }

    /* Header & Navigation in Light Mode */
    .admin-overlay.light-mode .admin-head,
    .admin-overlay:not(.dark-mode) .admin-head {
      background: #ffffff !important;
      border-bottom: 1px solid #e2e8f0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
      padding: 16px 20px !important;
      border-radius: 16px !important;
      margin-bottom: 16px !important;
    }

    .admin-overlay.light-mode .admin-head h2,
    .admin-overlay:not(.dark-mode) .admin-head h2 {
      color: #0f172a !important;
      font-weight: 800 !important;
    }

    /* Vertical Tabs & Navigation (Image 1 & Image 2) */
    .admin-overlay.light-mode .admin-tabs,
    .admin-overlay:not(.dark-mode) .admin-tabs {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 10px 12px !important;
      gap: 3px !important;
      display: flex !important;
      flex-direction: column !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .admin-overlay.light-mode .admin-tab,
    .admin-overlay:not(.dark-mode) .admin-tab {
      background: transparent !important;
      color: #334155 !important;
      font-weight: 600 !important;
      border: none !important;
      border-radius: 8px !important;
      transition: all 0.15s ease !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      padding: 10px 14px !important;
      gap: 12px !important;
      font-size: 14px !important;
      text-align: left !important;
      cursor: pointer !important;
      box-sizing: border-box !important;
    }

    .admin-overlay.light-mode .admin-tab:hover,
    .admin-overlay:not(.dark-mode) .admin-tab:hover {
      background: #f1f5f9 !important;
      color: #0f172a !important;
      box-shadow: none !important;
    }

    /* Image 1 Active State: Deep Emerald Green */
    .admin-overlay.light-mode .admin-tab.active,
    .admin-overlay:not(.dark-mode) .admin-tab.active {
      background: #0d6545 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 8px rgba(13, 101, 69, 0.28) !important;
    }

    .admin-overlay.light-mode .admin-tab.active *,
    .admin-overlay:not(.dark-mode) .admin-tab.active * {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }

    /* Override any body[data-visual-theme] dark styles inside Light Mode Admin */
    html[data-admin-theme="light"] body[data-visual-theme] .admin-card,
    html[data-admin-theme="light"] body[data-visual-theme] .bento-card,
    html[data-admin-theme="light"] body[data-visual-theme] .modal-content,
    html[data-admin-theme="light"] body[data-visual-theme] .hero-mode-card,
    html[data-admin-theme="light"] body[data-visual-theme] .saas-biz-card,
    html[data-admin-theme="light"] body[data-visual-theme] .order-kpi,
    body[data-admin-theme="light"] .admin-card,
    body[data-admin-theme="light"] .bento-card,
    body[data-admin-theme="light"] .modal-content,
    body[data-admin-theme="light"] .hero-mode-card,
    body[data-admin-theme="light"] .saas-biz-card,
    body[data-admin-theme="light"] .order-kpi,
    body.admin-light-mode .admin-card,
    body.admin-light-mode .bento-card,
    body.admin-light-mode .modal-content,
    body.admin-light-mode .hero-mode-card,
    body.admin-light-mode .saas-biz-card,
    body.admin-light-mode .order-kpi,
    .admin-overlay.light-mode .admin-card,
    .admin-overlay.light-mode .bento-card,
    .admin-overlay.light-mode .modal-content,
    .admin-overlay.light-mode .hero-mode-card,
    .admin-overlay.light-mode .saas-biz-card,
    .admin-overlay.light-mode .order-kpi,
    .admin-overlay.light-mode .ops-section-card,
    .admin-overlay.light-mode .table-state-card,
    .admin-overlay.light-mode .payment-group,
    .admin-overlay.light-mode .history-order-row,
    .admin-overlay.light-mode .metric-card,
    .admin-overlay.light-mode .dash-kpi,
    .admin-overlay.light-mode .order-side,
    .admin-overlay.light-mode .sound-status,
    .admin-overlay.light-mode .glance-tile,
    .admin-overlay.light-mode .waiter-calls-card,
    .admin-overlay:not(.dark-mode) .admin-card,
    .admin-overlay:not(.dark-mode) .bento-card,
    .admin-overlay:not(.dark-mode) .modal-content,
    .admin-overlay:not(.dark-mode) .hero-mode-card,
    .admin-overlay:not(.dark-mode) .saas-biz-card,
    .admin-overlay:not(.dark-mode) .order-kpi,
    .admin-overlay:not(.dark-mode) .ops-section-card,
    .admin-overlay:not(.dark-mode) .table-state-card,
    .admin-overlay:not(.dark-mode) .payment-group,
    .admin-overlay:not(.dark-mode) .history-order-row,
    .admin-overlay:not(.dark-mode) .metric-card,
    .admin-overlay:not(.dark-mode) .dash-kpi,
    .admin-overlay:not(.dark-mode) .order-side,
    .admin-overlay:not(.dark-mode) .sound-status,
    .admin-overlay:not(.dark-mode) .glance-tile,
    .admin-overlay:not(.dark-mode) .waiter-calls-card,
    .saas-admin.light-mode .admin-card,
    .saas-admin.light-mode .bento-card,
    .saas-admin.light-mode .saas-biz-card,
    .saas-admin.light-mode .metric-card,
    .saas-admin:not(.dark-mode) .admin-card,
    .saas-admin:not(.dark-mode) .bento-card,
    .saas-admin:not(.dark-mode) .saas-biz-card,
    .saas-admin:not(.dark-mode) .metric-card {
      background: #ffffff !important;
      background-color: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    }

    /* Headings, Text & Labels in Light Mode */
    .admin-overlay.light-mode h1,
    .admin-overlay.light-mode h2,
    .admin-overlay.light-mode h3,
    .admin-overlay.light-mode h4,
    .admin-overlay.light-mode h5,
    .admin-overlay.light-mode h6,
    .admin-overlay.light-mode strong,
    .admin-overlay.light-mode b,
    .admin-overlay:not(.dark-mode) h1,
    .admin-overlay:not(.dark-mode) h2,
    .admin-overlay:not(.dark-mode) h3,
    .admin-overlay:not(.dark-mode) h4,
    .admin-overlay:not(.dark-mode) h5,
    .admin-overlay:not(.dark-mode) h6,
    .admin-overlay:not(.dark-mode) strong,
    .admin-overlay:not(.dark-mode) b,
    .saas-admin.light-mode h1,
    .saas-admin.light-mode h2,
    .saas-admin.light-mode h3,
    .saas-admin.light-mode h4,
    .saas-admin.light-mode strong,
    .saas-admin.light-mode b,
    .saas-admin:not(.dark-mode) h1,
    .saas-admin:not(.dark-mode) h2,
    .saas-admin:not(.dark-mode) h3,
    .saas-admin:not(.dark-mode) h4,
    .saas-admin:not(.dark-mode) strong,
    .saas-admin:not(.dark-mode) b,
    html[data-admin-theme="light"] .admin-card label,
    body[data-admin-theme="light"] .admin-card label,
    body.admin-light-mode .admin-card label,
    .admin-overlay.light-mode .admin-card label,
    .admin-overlay:not(.dark-mode) .admin-card label,
    .saas-admin.light-mode .admin-card label,
    .saas-admin:not(.dark-mode) .admin-card label {
      color: #0f172a !important;
      font-weight: 700;
    }

    /* Override inline gold colors in Light Mode Admin Cards for high AAA contrast */
    html[data-admin-theme="light"] .admin-card [style*="color:var(--gold)"],
    html[data-admin-theme="light"] .admin-card [style*="color:var(--gold-light)"],
    body[data-admin-theme="light"] .admin-card [style*="color:var(--gold)"],
    body[data-admin-theme="light"] .admin-card [style*="color:var(--gold-light)"],
    body.admin-light-mode .admin-card [style*="color:var(--gold)"],
    body.admin-light-mode .admin-card [style*="color:var(--gold-light)"],
    .admin-overlay.light-mode .admin-card [style*="color:var(--gold)"],
    .admin-overlay.light-mode .admin-card [style*="color:var(--gold-light)"],
    .admin-overlay:not(.dark-mode) .admin-card [style*="color:var(--gold)"],
    .admin-overlay:not(.dark-mode) .admin-card [style*="color:var(--gold-light)"],
    .saas-admin.light-mode .admin-card [style*="color:var(--gold)"],
    .saas-admin.light-mode .admin-card [style*="color:var(--gold-light)"],
    .saas-admin:not(.dark-mode) .admin-card [style*="color:var(--gold)"],
    .saas-admin:not(.dark-mode) .admin-card [style*="color:var(--gold-light)"] {
      color: #b45309 !important; /* Deep rich amber gold for 100% legibility on white cards */
    }

    .admin-overlay.light-mode .muted,
    .admin-overlay.light-mode .dash-sub,
    .admin-overlay.light-mode p,
    .admin-overlay.light-mode small,
    .admin-overlay:not(.dark-mode) .muted,
    .admin-overlay:not(.dark-mode) .dash-sub,
    .admin-overlay:not(.dark-mode) p,
    .admin-overlay:not(.dark-mode) small,
    .saas-admin.light-mode .muted,
    .saas-admin.light-mode .dash-sub,
    .saas-admin.light-mode p,
    .saas-admin.light-mode small,
    .saas-admin:not(.dark-mode) .muted,
    .saas-admin:not(.dark-mode) .dash-sub,
    .saas-admin:not(.dark-mode) p,
    .saas-admin:not(.dark-mode) small {
      color: #475569 !important;
    }

    /* Inputs, Selects & Textareas in Light Mode */
    .admin-overlay.light-mode input,
    .admin-overlay.light-mode select,
    .admin-overlay.light-mode textarea,
    .admin-overlay:not(.dark-mode) input,
    .admin-overlay:not(.dark-mode) select,
    .admin-overlay:not(.dark-mode) textarea,
    .saas-admin.light-mode input,
    .saas-admin.light-mode select,
    .saas-admin.light-mode textarea,
    .saas-admin:not(.dark-mode) input,
    .saas-admin:not(.dark-mode) select,
    .saas-admin:not(.dark-mode) textarea,
    html[data-admin-theme="light"] input,
    html[data-admin-theme="light"] select,
    html[data-admin-theme="light"] textarea,
    body[data-admin-theme="light"] input,
    body[data-admin-theme="light"] select,
    body[data-admin-theme="light"] textarea,
    body.admin-light-mode input,
    body.admin-light-mode select,
    body.admin-light-mode textarea {
      background: #ffffff !important;
      background-color: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #cbd5e1 !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
    }

    .admin-overlay.light-mode input:focus,
    .admin-overlay.light-mode select:focus,
    .admin-overlay.light-mode textarea:focus,
    .admin-overlay:not(.dark-mode) input:focus,
    .admin-overlay:not(.dark-mode) select:focus,
    .admin-overlay:not(.dark-mode) textarea:focus,
    .saas-admin.light-mode input:focus,
    .saas-admin.light-mode select:focus,
    .saas-admin.light-mode textarea:focus,
    .saas-admin:not(.dark-mode) input:focus,
    .saas-admin:not(.dark-mode) select:focus,
    .saas-admin:not(.dark-mode) textarea:focus,
    html[data-admin-theme="light"] input:focus,
    html[data-admin-theme="light"] select:focus,
    html[data-admin-theme="light"] textarea:focus,
    body[data-admin-theme="light"] input:focus,
    body[data-admin-theme="light"] select:focus,
    body[data-admin-theme="light"] textarea:focus {
      border-color: #2563eb !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }

    /* Buttons in Light Mode */
    .admin-overlay.light-mode .ghost-btn,
    .admin-overlay:not(.dark-mode) .ghost-btn,
    .saas-admin.light-mode .saas-admin-btn:not(.gold),
    .saas-admin:not(.dark-mode) .saas-admin-btn:not(.gold),
    html[data-admin-theme="light"] .ghost-btn,
    body[data-admin-theme="light"] .ghost-btn {
      background: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #cbd5e1 !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    .admin-overlay.light-mode .ghost-btn:hover,
    .admin-overlay:not(.dark-mode) .ghost-btn:hover,
    .saas-admin.light-mode .saas-admin-btn:not(.gold):hover,
    .saas-admin:not(.dark-mode) .saas-admin-btn:not(.gold):hover,
    html[data-admin-theme="light"] .ghost-btn:hover,
    body[data-admin-theme="light"] .ghost-btn:hover {
      background: #f1f5f9 !important;
      border-color: #94a3b8 !important;
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .primary-btn,
    .admin-overlay:not(.dark-mode) .primary-btn,
    .admin-overlay.light-mode .gold-btn,
    .admin-overlay:not(.dark-mode) .gold-btn,
    .saas-admin.light-mode .gold-btn,
    .saas-admin.light-mode .saas-admin-btn.gold,
    .saas-admin:not(.dark-mode) .gold-btn,
    .saas-admin:not(.dark-mode) .saas-admin-btn.gold,
    html[data-admin-theme="light"] .primary-btn,
    html[data-admin-theme="light"] .gold-btn,
    body[data-admin-theme="light"] .primary-btn,
    body[data-admin-theme="light"] .gold-btn {
      background: #2563eb !important;
      color: #ffffff !important;
      border: 1px solid #2563eb !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22) !important;
    }

    .admin-overlay.light-mode .primary-btn:hover,
    .admin-overlay:not(.dark-mode) .primary-btn:hover,
    .admin-overlay.light-mode .gold-btn:hover,
    .admin-overlay:not(.dark-mode) .gold-btn:hover,
    .saas-admin.light-mode .gold-btn:hover,
    .saas-admin.light-mode .saas-admin-btn.gold:hover,
    .saas-admin:not(.dark-mode) .gold-btn:hover,
    .saas-admin:not(.dark-mode) .saas-admin-btn.gold:hover,
    html[data-admin-theme="light"] .primary-btn:hover,
    html[data-admin-theme="light"] .gold-btn:hover,
    body[data-admin-theme="light"] .primary-btn:hover,
    body[data-admin-theme="light"] .gold-btn:hover {
      background: #1d4ed8 !important;
      border-color: #1d4ed8 !important;
      color: #ffffff !important;
    }

    /* Live Orders Master-Detail & Kanban in Light Mode */
    .admin-overlay.light-mode .md-order-item,
    .admin-overlay:not(.dark-mode) .md-order-item {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .admin-overlay.light-mode .md-order-item:hover,
    .admin-overlay:not(.dark-mode) .md-order-item:hover {
      background: #f8fafc !important;
      border-color: #cbd5e1 !important;
    }

    .admin-overlay.light-mode .md-order-item.active,
    .admin-overlay:not(.dark-mode) .md-order-item.active {
      background: #eff6ff !important;
      border-color: #2563eb !important;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12) !important;
    }

    .admin-overlay.light-mode .md-oi-avatar,
    .admin-overlay:not(.dark-mode) .md-oi-avatar {
      background: #f1f5f9 !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .md-order-details,
    .admin-overlay:not(.dark-mode) .md-order-details {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .admin-overlay.light-mode .md-detail-header,
    .admin-overlay:not(.dark-mode) .md-detail-header {
      border-bottom: 1px solid #e2e8f0 !important;
    }

    .admin-overlay.light-mode .md-stepper,
    .admin-overlay:not(.dark-mode) .md-stepper {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
    }

    .admin-overlay.light-mode .md-step-icon,
    .admin-overlay:not(.dark-mode) .md-step-icon {
      background: #ffffff !important;
      border: 2px solid #cbd5e1 !important;
      color: #64748b !important;
    }

    .admin-overlay.light-mode .md-step.active .md-step-icon,
    .admin-overlay:not(.dark-mode) .md-step.active .md-step-icon {
      background: #2563eb !important;
      border-color: #2563eb !important;
      color: #ffffff !important;
    }

    .admin-overlay.light-mode .order-chat,
    .admin-overlay:not(.dark-mode) .order-chat {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      border-left: 6px solid #2563eb !important;
      color: #0f172a !important;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    .admin-overlay.light-mode .order-chat.ready,
    .admin-overlay:not(.dark-mode) .order-chat.ready {
      border-left-color: #10b981 !important;
    }

    .admin-overlay.light-mode .order-chat.pendingpayment,
    .admin-overlay:not(.dark-mode) .order-chat.pendingpayment {
      border-left-color: #f59e0b !important;
    }

    .admin-overlay.light-mode .order-chat.completed,
    .admin-overlay:not(.dark-mode) .order-chat.completed {
      border-left-color: #94a3b8 !important;
      opacity: 0.85 !important;
    }

    .admin-overlay.light-mode .order-chat.stale-order,
    .admin-overlay:not(.dark-mode) .order-chat.stale-order {
      background: #fffbeb !important;
      border-color: #fde68a !important;
      border-left-color: #d97706 !important;
    }

    .admin-overlay.light-mode .order-chat.urgent-order,
    .admin-overlay:not(.dark-mode) .order-chat.urgent-order {
      background: #fef2f2 !important;
      border-color: #fecaca !important;
      border-left-color: #ef4444 !important;
    }

    .admin-overlay.light-mode .order-kpi,
    .admin-overlay:not(.dark-mode) .order-kpi {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .admin-overlay.light-mode .order-kpi b,
    .admin-overlay:not(.dark-mode) .order-kpi b {
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .orders-toolbar,
    .admin-overlay:not(.dark-mode) .orders-toolbar {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      padding: 12px 16px !important;
      border-radius: 12px !important;
    }

    .admin-overlay.light-mode .order-tool-chip,
    .admin-overlay:not(.dark-mode) .order-tool-chip {
      background: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #cbd5e1 !important;
    }

    .admin-overlay.light-mode .order-tool-chip:hover,
    .admin-overlay:not(.dark-mode) .order-tool-chip:hover {
      background: #f1f5f9 !important;
      border-color: #94a3b8 !important;
    }

    .admin-overlay.light-mode .item-qty-ctrl,
    .admin-overlay:not(.dark-mode) .item-qty-ctrl {
      background: #f1f5f9 !important;
      border: 1px solid #cbd5e1 !important;
    }

    .admin-overlay.light-mode .item-qty-ctrl .qty-val,
    .admin-overlay:not(.dark-mode) .item-qty-ctrl .qty-val {
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .rush-tab-btn,
    .admin-overlay:not(.dark-mode) .rush-tab-btn {
      background: #ffffff !important;
      border: 1px solid #cbd5e1 !important;
      color: #475569 !important;
    }

    .admin-overlay.light-mode .rush-tab-btn.active,
    .admin-overlay:not(.dark-mode) .rush-tab-btn.active {
      background: #2563eb !important;
      color: #ffffff !important;
      border-color: #2563eb !important;
    }

    .admin-overlay.light-mode .rush-tab-btn .tab-count,
    .admin-overlay:not(.dark-mode) .rush-tab-btn .tab-count {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .rush-tab-btn.active .tab-count,
    .admin-overlay:not(.dark-mode) .rush-tab-btn.active .tab-count {
      background: rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important;
    }

    /* Tables Grid & Cards in Light Mode */
    .admin-overlay.light-mode .tm-card,
    .admin-overlay:not(.dark-mode) .tm-card {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    }

    .admin-overlay.light-mode .tm-card.free,
    .admin-overlay:not(.dark-mode) .tm-card.free {
      background: #ffffff !important;
      border-color: #e2e8f0 !important;
    }

    .admin-overlay.light-mode .tm-card.free .tm-title,
    .admin-overlay:not(.dark-mode) .tm-card.free .tm-title {
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .tm-card.occupied,
    .admin-overlay:not(.dark-mode) .tm-card.occupied {
      background: #fffbeb !important;
      border-color: #fde68a !important;
    }

    .admin-overlay.light-mode .tm-card.occupied .tm-title,
    .admin-overlay:not(.dark-mode) .tm-card.occupied .tm-title {
      color: #92400e !important;
    }

    .admin-overlay.light-mode .tm-img,
    .admin-overlay:not(.dark-mode) .tm-img {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
    }

    .admin-overlay.light-mode .admin-menu-row,
    .admin-overlay:not(.dark-mode) .admin-menu-row {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .admin-overlay.light-mode .admin-menu-row:hover,
    .admin-overlay:not(.dark-mode) .admin-menu-row:hover {
      border-color: #cbd5e1 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .admin-overlay.light-mode .amr-name-price,
    .admin-overlay:not(.dark-mode) .amr-name-price {
      color: #0f172a !important;
    }

    .admin-overlay.light-mode .amr-thumb,
    .admin-overlay:not(.dark-mode) .amr-thumb {
      background: #f1f5f9 !important;
      border: 1px solid #e2e8f0 !important;
    }

    .admin-overlay.light-mode .amr-reorder-btn,
    .admin-overlay:not(.dark-mode) .amr-reorder-btn {
      background: #f1f5f9 !important;
      border: 1px solid #cbd5e1 !important;
      color: #475569 !important;
    }

    /* Super Admin in Light Mode */
    .saas-admin.light-mode,
    .saas-admin:not(.dark-mode) {
      background-color: #f8fafc !important;
      color: #0f172a !important;
    }

    .saas-admin.light-mode .saas-admin-nav,
    .saas-admin:not(.dark-mode) .saas-admin-nav {
      background: #ffffff !important;
      color: #0f172a !important;
      border-bottom: 1px solid #e2e8f0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .saas-admin.light-mode .saas-admin-title h1,
    .saas-admin:not(.dark-mode) .saas-admin-title h1 {
      color: #0f172a !important;
    }

    .saas-admin.light-mode .saas-admin-sub,
    .saas-admin:not(.dark-mode) .saas-admin-sub {
      color: #64748b !important;
    }

    .saas-admin.light-mode .saas-tabs,
    .saas-admin:not(.dark-mode) .saas-tabs {
      border-bottom: 1px solid #e2e8f0 !important;
    }

    .saas-admin.light-mode .saas-tab-btn,
    .saas-admin:not(.dark-mode) .saas-tab-btn {
      color: #64748b !important;
    }

    .saas-admin.light-mode .saas-tab-btn:hover,
    .saas-admin:not(.dark-mode) .saas-tab-btn:hover {
      background: #f1f5f9 !important;
      color: #0f172a !important;
    }

    .saas-admin.light-mode .saas-tab-btn.active,
    .saas-admin:not(.dark-mode) .saas-tab-btn.active {
      background: #eff6ff !important;
      color: #2563eb !important;
      font-weight: 800 !important;
      border-bottom: 2px solid #2563eb !important;
    }

    .saas-admin.light-mode .saas-biz-card,
    .saas-admin:not(.dark-mode) .saas-biz-card {
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      color: #0f172a !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .saas-admin.light-mode .saas-biz-card:hover,
    .saas-admin:not(.dark-mode) .saas-biz-card:hover {
      border-color: #cbd5e1 !important;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    }

    /* All Modals & Dialogs in Light Mode */
    html[data-admin-theme="light"] .modal-sheet,
    html[data-admin-theme="light"] .saas-modal-box,
    html[data-admin-theme="light"] .admin-modal-card,
    html[data-admin-theme="light"] .preview-box,
    html[data-admin-theme="light"] .dialog-box,
    body[data-admin-theme="light"] .modal-sheet,
    body[data-admin-theme="light"] .saas-modal-box,
    body[data-admin-theme="light"] .admin-modal-card,
    body[data-admin-theme="light"] .preview-box,
    body[data-admin-theme="light"] .dialog-box,
    body.admin-light-mode .modal-sheet,
    body.admin-light-mode .saas-modal-box,
    body.admin-light-mode .admin-modal-card,
    body.admin-light-mode .preview-box,
    body.admin-light-mode .dialog-box,
    .admin-overlay.light-mode .modal-sheet,
    .admin-overlay.light-mode .saas-modal-box,
    .admin-overlay.light-mode .admin-modal-card,
    .admin-overlay.light-mode .modal-content,
    .admin-overlay:not(.dark-mode) .modal-sheet,
    .admin-overlay:not(.dark-mode) .saas-modal-box,
    .admin-overlay:not(.dark-mode) .admin-modal-card,
    .admin-overlay:not(.dark-mode) .modal-content,
    .saas-admin.light-mode .modal-sheet,
    .saas-admin.light-mode .saas-modal-box,
    .saas-admin.light-mode .admin-modal-card,
    .saas-admin.light-mode .modal-content,
    .saas-admin:not(.dark-mode) .modal-sheet,
    .saas-admin:not(.dark-mode) .saas-modal-box,
    .saas-admin:not(.dark-mode) .admin-modal-card,
    .saas-admin:not(.dark-mode) .modal-content {
      background: #ffffff !important;
      background-color: #ffffff !important;
      color: #0f172a !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15) !important;
    }

    html[data-admin-theme="light"] .modal-sheet h2,
    html[data-admin-theme="light"] .modal-sheet h3,
    html[data-admin-theme="light"] .saas-modal-box h2,
    html[data-admin-theme="light"] .saas-modal-box h3,
    body[data-admin-theme="light"] .modal-sheet h2,
    body[data-admin-theme="light"] .modal-sheet h3,
    body[data-admin-theme="light"] .saas-modal-box h2,
    body[data-admin-theme="light"] .saas-modal-box h3,
    body.admin-light-mode .modal-sheet h2,
    body.admin-light-mode .modal-sheet h3,
    body.admin-light-mode .saas-modal-box h2,
    body.admin-light-mode .saas-modal-box h3 {
      color: #0f172a !important;
    }

    /* --- DARK MODE (SLATE DARK) --- */
    html[data-admin-theme="dark"],
    body[data-admin-theme="dark"],
    body.admin-dark-mode,
    .admin-overlay.dark-mode,
    .saas-admin.dark-mode {
      --bg: #0f172a !important;
      --card: #1e293b !important;
      --card2: #141f32 !important;
      --ink: #f8fafc !important;
      --muted: #94a3b8 !important;
      --muted2: #64748b !important;
      --line: #334155 !important;
      --line2: #475569 !important;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
      --gold: #3b82f6 !important;
      --gold-light: #60a5fa !important;
      --gold-deep: #2563eb !important;
      --green: #34d399 !important;
      --red: #f87171 !important;

      background-color: #0f172a !important;
      color: #f8fafc !important;
    }
    
    .admin-shell { 
      width: min(1300px, 100%); 
      margin: 0 auto; 
      padding: 24px 20px 100px; 
      color: inherit; 
      position: relative; 
      z-index: 1; 
    }
    
    .admin-head { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      gap: 16px; 
      margin-bottom: 24px; 
      padding-bottom: 20px; 
      border-bottom: 1px solid var(--line); 
      flex-wrap: wrap; 
    }
    
    .admin-head h2 { 
      font-family: inherit; 
      margin: 0; 
      font-size: 26px; 
      font-weight: 700;
      letter-spacing: -0.5px;
      color: var(--ink); 
      display: flex; 
      align-items: center; 
    }
    
    .admin-head p { 
      font-size: 13.5px; 
      color: var(--muted); 
      margin: 6px 0 0; 
    }
    
    .back-btn { 
      border: 1px solid var(--line2); 
      background: var(--card); 
      color: var(--ink); 
      border-radius: 8px; 
      padding: 8px 16px; 
      font-size: 13px; 
      font-weight: 600; 
      display: inline-flex; 
      align-items: center; 
      gap: 6px; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
      transition: all 0.2s; 
      cursor: pointer; 
    }
    .back-btn:hover { 
      background: var(--card2); 
      border-color: var(--muted);
    }
    
    /* SaaS Vertical Sidebar & Tabs Architecture (Image 1 & Image 2) */
    .admin-layout-container {
      display: flex;
      width: 100%;
      min-height: 100vh;
      position: relative;
      box-sizing: border-box;
      background: var(--bg);
    }

    .admin-vertical-sidebar {
      width: 256px;
      min-width: 256px;
      height: 100vh;
      height: 100dvh;
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-right: 1px solid #e2e8f0;
      z-index: 1000;
      box-sizing: border-box;
      flex-shrink: 0;
      box-shadow: 1px 0 3px rgba(0, 0, 0, 0.02);
    }

    .admin-overlay.dark-mode .admin-vertical-sidebar,
    body.dark-mode .admin-vertical-sidebar {
      background: #0f172a;
      border-right: 1px solid #1e293b;
    }

    /* Brand Header in Sidebar (Image 1: kali -> restaurant name) */
    .sidebar-brand-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 16px 16px 16px;
      border-bottom: 1px solid #f1f5f9;
      gap: 12px;
      background: inherit;
    }

    .admin-overlay.dark-mode .sidebar-brand-header,
    body.dark-mode .sidebar-brand-header {
      border-bottom-color: #1e293b;
    }

    .sidebar-brand-info {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      flex: 1;
    }

    .sidebar-brand-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #ecfdf5;
      border: 1.5px solid #059669;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #047857;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
    }

    .admin-overlay.dark-mode .sidebar-brand-icon,
    body.dark-mode .sidebar-brand-icon {
      background: rgba(5, 150, 105, 0.2);
      border-color: #10b981;
      color: #34d399;
    }

    .sidebar-brand-text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .sidebar-biz-name {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
      letter-spacing: -0.3px;
    }

    .admin-overlay.dark-mode .sidebar-biz-name,
    body.dark-mode .sidebar-biz-name {
      color: #f8fafc;
    }

    .sidebar-biz-sub {
      font-size: 12.5px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
      line-height: 1.2;
    }

    .admin-overlay.dark-mode .sidebar-biz-sub,
    body.dark-mode .sidebar-biz-sub {
      color: #94a3b8;
    }

    /* Mobile Drawer Close Button (Image 2: 'X') */
    .sidebar-close-btn {
      display: none;
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, color 0.15s ease;
      flex-shrink: 0;
    }

    .sidebar-close-btn:hover {
      background: #fee2e2;
      color: #ef4444;
    }

    /* Vertical Navigation Tabs */
    .admin-tabs { 
      display: flex; 
      flex-direction: column;
      gap: 3px; 
      padding: 12px 10px; 
      overflow-y: auto; 
      overflow-x: hidden;
      flex: 1;
      margin: 0;
      scroll-behavior: smooth; 
      -webkit-overflow-scrolling: touch; 
      box-sizing: border-box;
    }
    .admin-tabs::-webkit-scrollbar { width: 4px; }
    .admin-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

    .admin-tab { 
      display: flex; 
      align-items: center; 
      gap: 12px; 
      width: 100%;
      border: none; 
      background: transparent; 
      color: #334155; 
      border-radius: 8px; 
      padding: 10px 14px; 
      font-size: 14px; 
      font-weight: 600; 
      transition: all 0.15s ease; 
      cursor: pointer; 
      text-align: left;
      box-sizing: border-box;
      position: relative;
    }

    .admin-overlay.dark-mode .admin-tab,
    body.dark-mode .admin-tab {
      color: #cbd5e1;
    }

    .admin-tab:hover { 
      background: #f1f5f9; 
      color: #0f172a; 
    }

    .admin-overlay.dark-mode .admin-tab:hover,
    body.dark-mode .admin-tab:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #ffffff;
    }

    /* Image 1 Active Style: Solid Forest Emerald Green Pill */
    .admin-tab.active { 
      background: #0d6545 !important; 
      color: #ffffff !important; 
      box-shadow: 0 2px 8px rgba(13, 101, 69, 0.28) !important; 
      font-weight: 700 !important;
    }

    .admin-tab.active * {
      color: #ffffff !important;
      stroke: #ffffff !important;
    }

    .admin-tab svg { 
      width: 19px; 
      height: 19px; 
      stroke: currentColor; 
      stroke-width: 2; 
      stroke-linecap: round; 
      stroke-linejoin: round; 
      fill: none; 
      flex-shrink: 0;
      transition: stroke 0.15s ease; 
    }

    .admin-tab .tab-label {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Badge Counter (Image 1 & 2: '2' pill next to Orders) */
    .sidebar-badge {
      background: #e8f5e9;
      color: #1b5e20;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 9999px;
      min-width: 20px;
      text-align: center;
      line-height: 1.4;
      display: inline-block;
      margin-left: auto;
      flex-shrink: 0;
    }

    .sidebar-badge:empty {
      display: none;
    }

    .admin-tab.active .sidebar-badge {
      background: rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important;
    }

    /* Sidebar Footer (Image 1: Tour guide + User profile card) */
    .sidebar-footer {
      padding: 10px 12px 14px 12px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: inherit;
    }

    .admin-overlay.dark-mode .sidebar-footer,
    body.dark-mode .sidebar-footer {
      border-top-color: #1e293b;
    }

    .sidebar-tour-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .sidebar-tour-row .sidebar-tour-btn {
      flex: 1;
      margin-bottom: 0;
    }

    .sidebar-theme-toggle-btn {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 8px;
      background: transparent;
      border: 1px solid #e2e8f0;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .sidebar-theme-toggle-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
      border-color: #cbd5e1;
    }

    .admin-overlay.dark-mode .sidebar-theme-toggle-btn,
    body.dark-mode .sidebar-theme-toggle-btn {
      border-color: #334155;
      color: #94a3b8;
    }

    .admin-overlay.dark-mode .sidebar-theme-toggle-btn:hover,
    body.dark-mode .sidebar-theme-toggle-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #ffffff;
      border-color: #475569;
    }

    .sidebar-tour-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: #475569;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: left;
    }

    .admin-overlay.dark-mode .sidebar-tour-btn,
    body.dark-mode .sidebar-tour-btn {
      color: #94a3b8;
    }

    .sidebar-tour-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }

    .admin-overlay.dark-mode .sidebar-tour-btn:hover,
    body.dark-mode .sidebar-tour-btn:hover {
      background: rgba(255, 255, 255, 0.07);
      color: #ffffff;
    }

    .sidebar-tour-btn svg {
      width: 18px;
      height: 18px;
      color: inherit;
      flex-shrink: 0;
    }

    .sidebar-profile-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
    }

    .admin-overlay.dark-mode .sidebar-profile-card,
    body.dark-mode .sidebar-profile-card {
      background: rgba(255, 255, 255, 0.04);
      border-color: #1e293b;
    }

    .sidebar-avatar-wrapper {
      position: relative;
      flex-shrink: 0;
      cursor: pointer;
    }

    .sidebar-user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #0d6545;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      flex-shrink: 0;
      box-shadow: 0 1px 3px rgba(13, 101, 69, 0.2);
      transition: transform 0.15s ease;
    }

    .sidebar-avatar-wrapper:hover .sidebar-user-avatar {
      transform: scale(1.05);
    }

    /* Google-Style Action Badge on Circle */
    .avatar-action-badge {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      border: 1.5px solid #ffffff;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .admin-overlay.dark-mode .avatar-action-badge,
    body.dark-mode .avatar-action-badge {
      background: #1e293b;
      border-color: #0f172a;
      color: #f1f5f9;
    }

    .avatar-action-badge svg {
      width: 9px;
      height: 9px;
    }

    .avatar-badge-dot {
      position: absolute;
      top: -1px;
      right: -1px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #10b981;
      border: 1px solid #ffffff;
    }

    .avatar-badge-dot.warning {
      background: #f59e0b;
    }

    .avatar-badge-dot.danger {
      background: #ef4444;
    }

    .sidebar-user-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }

    .sidebar-user-name {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.25;
    }

    .admin-overlay.dark-mode .sidebar-user-name,
    body.dark-mode .sidebar-user-name {
      color: #f8fafc;
    }

    .sidebar-user-role {
      font-size: 11.5px;
      color: #64748b;
      font-weight: 500;
      line-height: 1.2;
    }

    .admin-overlay.dark-mode .sidebar-user-role,
    body.dark-mode .sidebar-user-role {
      color: #94a3b8;
    }

    .sidebar-logout-btn {
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }

    .sidebar-logout-btn:hover {
      background: #fee2e2;
      color: #ef4444;
    }

    /* Role Quick-Switcher Popover (Owner, Staff, Waiter, Kitchen, Admin) */
    .sidebar-role-popover {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
      padding: 8px;
      z-index: 10000;
      box-sizing: border-box;
      animation: popoverFadeIn 0.15s ease-out;
    }

    @keyframes popoverFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .admin-overlay.dark-mode .sidebar-role-popover,
    body.dark-mode .sidebar-role-popover {
      background: #1e293b;
      border-color: #334155;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    }

    .role-popover-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px 8px;
      border-bottom: 1px solid #f1f5f9;
      margin-bottom: 6px;
    }

    .admin-overlay.dark-mode .role-popover-header,
    body.dark-mode .role-popover-header {
      border-bottom-color: #334155;
    }

    .role-popover-options {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .role-popover-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 7px 9px;
      border-radius: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
      transition: background 0.15s ease, color 0.15s ease;
      box-sizing: border-box;
      color: #1e293b;
    }

    .admin-overlay.dark-mode .role-popover-item,
    body.dark-mode .role-popover-item {
      color: #f1f5f9;
    }

    .role-popover-item:hover {
      background: #f1f5f9;
    }

    .admin-overlay.dark-mode .role-popover-item:hover,
    body.dark-mode .role-popover-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .role-popover-item.active {
      background: #ecfdf5;
      color: #065f46;
      font-weight: 700;
    }

    .admin-overlay.dark-mode .role-popover-item.active,
    body.dark-mode .role-popover-item.active {
      background: rgba(16, 185, 129, 0.15);
      color: #34d399;
    }

    .role-popover-item .role-icon-svg {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s ease;
    }

    .admin-overlay.dark-mode .role-popover-item .role-icon-svg,
    body.dark-mode .role-popover-item .role-icon-svg {
      background: rgba(255, 255, 255, 0.08);
      color: #cbd5e1;
    }

    .role-popover-item:hover .role-icon-svg {
      background: #e2e8f0;
      color: #0f172a;
    }

    .role-popover-item.active .role-icon-svg {
      background: #d1fae5;
      color: #065f46;
    }

    .role-popover-item .role-icon {
      font-size: 17px;
      flex-shrink: 0;
      width: 24px;
      text-align: center;
    }

    .role-popover-item .role-meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }

    .role-popover-item .role-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .role-popover-item .role-desc {
      font-size: 11px;
      color: #64748b;
      line-height: 1.2;
    }

    .admin-overlay.dark-mode .role-popover-item .role-desc,
    body.dark-mode .role-popover-item .role-desc {
      color: #94a3b8;
    }

    /* Clean, Minimal Role Switch PIN Modal */
    .role-switch-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 100000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
      animation: roleOverlayIn 0.18s ease-out;
    }
    .role-switch-overlay.open {
      display: flex;
    }
    @keyframes roleOverlayIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .role-switch-modal-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: roleCardPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes roleCardPop {
      from { opacity: 0; transform: scale(0.96) translateY(6px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .admin-overlay.dark-mode .role-switch-modal-card,
    body.dark-mode .role-switch-modal-card {
      background: #1e293b;
      border-color: #334155;
      color: #f8fafc;
    }

    /* Staff OneSignal & Device Alerts Modal */
    .staff-notif-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      z-index: 100000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      box-sizing: border-box;
    }
    .staff-notif-overlay.open {
      display: flex;
    }
    .staff-notif-modal-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      width: 100%;
      max-width: 410px;
      max-height: 82vh;
      overflow-y: auto;
      box-shadow: 0 20px 45px -10px rgba(0,0,0,0.3);
      animation: roleCardPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .admin-overlay.dark-mode .staff-notif-modal-card,
    body.dark-mode .staff-notif-modal-card {
      background: #1e293b;
      border-color: #334155;
      color: #f8fafc;
    }

    /* Floating Action Button (FAB) for Settings Save (Light & Dark Mode Perfected) */
    .floating-settings-save-fab {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      border: 1.5px solid rgba(212, 175, 55, 0.45);
      background: linear-gradient(135deg, #d4af37 0%, #b89628 100%);
      color: #0f0f13;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 99999;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(212, 175, 55, 0.4);
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .floating-settings-save-fab:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(212, 175, 55, 0.55);
    }
    .floating-settings-save-fab:active {
      transform: scale(0.95);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    .floating-settings-save-fab .save-fab-icon {
      stroke: #0f0f13;
      transition: transform 0.2s ease;
    }
    .floating-settings-save-fab:hover .save-fab-icon {
      transform: scale(1.06);
    }
    /* Light Mode */
    body:not(.dark-mode) .floating-settings-save-fab {
      background: linear-gradient(135deg, #d4af37 0%, #b89628 100%);
      border-color: rgba(184, 150, 40, 0.5);
      color: #0f0f13;
      box-shadow: 0 8px 26px rgba(184, 150, 40, 0.38), 0 3px 10px rgba(0, 0, 0, 0.12);
    }
    /* Dark Mode */
    body.dark-mode .floating-settings-save-fab,
    .admin-overlay.dark-mode .floating-settings-save-fab {
      background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
      border-color: rgba(234, 179, 8, 0.6);
      color: #0f172a;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(234, 179, 8, 0.35);
    }
    .floating-settings-save-fab .save-fab-pulse {
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      border-radius: 50%;
      border: 1.5px solid rgba(212, 175, 55, 0.4);
      animation: fabPulseRing 3s cubic-bezier(0.24, 0, 0.38, 1) infinite;
      pointer-events: none;
    }
    @keyframes fabPulseRing {
      0% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.15); opacity: 0; }
      100% { transform: scale(1); opacity: 0; }
    }
    @media (max-width: 767px) {
      .floating-settings-save-fab {
        right: 18px;
        bottom: 20px;
        width: 50px;
        height: 50px;
      }
    }

    /* Main Content Area Container */
    .admin-main-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      overflow-y: auto;
      height: 100vh;
      height: 100dvh;
    }
    #adminMainArea {
      font-family: 'Times New Roman', Times, serif;
    }

    /* Mobile Drawer Backdrop & Toggle (Image 2) */
    .admin-sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(2px);
      z-index: 99999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .admin-sidebar-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-sidebar-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #0f172a;
      width: 38px;
      height: 38px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 18px;
      flex-shrink: 0;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .mobile-sidebar-toggle:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      color: #0284c7;
      transform: scale(1.03);
    }

    .admin-overlay.dark-mode .mobile-sidebar-toggle,
    body.dark-mode .mobile-sidebar-toggle {
      background: #1e293b;
      border-color: #334155;
      color: #f8fafc;
    }

    .mobile-only-topbar {
      display: none !important;
    }

    /* Minimal Left Docked Trigger Icon (Replaces the massive top navigation bar block) */
    .mobile-left-dock-trigger {
      display: none;
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 10005;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--surface, #ffffff);
      border: 1px solid var(--border-color, #cbd5e1);
      color: var(--ink, #0f172a);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      touch-action: manipulation;
    }
    .mobile-left-dock-trigger:active {
      transform: scale(0.92);
    }
    .mobile-left-dock-trigger svg {
      width: 20px;
      height: 20px;
    }
    .admin-overlay.dark-mode .mobile-left-dock-trigger,
    body.dark-mode .mobile-left-dock-trigger {
      background: #1e293b;
      border-color: #334155;
      color: #f8fafc;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    }

    @media (max-width: 1024px) {
      .mobile-only-topbar {
        display: none !important;
      }
      .mobile-left-dock-trigger {
        display: inline-flex !important;
      }
      body.sidebar-drawer-open .mobile-left-dock-trigger {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.8);
      }
    }
    @media (min-width: 1025px) {
      .mobile-left-dock-trigger {
        display: none !important;
      }
    }

    /* DESKTOP & TABLETS (>= 768px): SIDEBAR WITH TOGGLE (VISIBLE BY DEFAULT, COLLAPSIBLE VIA SIDEBAR TOGGLE BUTTON) */
    @media (min-width: 768px) {
      .admin-layout-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
      }
      .admin-vertical-sidebar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 240px !important;
        min-width: 240px !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 100 !important;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.03) !important;
        flex-shrink: 0 !important;
        transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, margin 0.25s ease !important;
      }
      /* DESKTOP & TABLETS COLLAPSED STATE (IMAGE 3): SLEEK 68PX ICON RAIL */
      .admin-vertical-sidebar.desktop-collapsed,
      .admin-layout-container.desktop-collapsed .admin-vertical-sidebar {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border-right: 1px solid var(--border-color, #e2e8f0) !important;
        transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
      }

      /* Collapsed Rail Header: Center Logo, Hide Wordmark & Text */
      .admin-vertical-sidebar.desktop-collapsed .sidebar-brand-header,
      .admin-layout-container.desktop-collapsed .sidebar-brand-header {
        padding: 14px 8px !important;
        justify-content: center !important;
        gap: 0 !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-brand-info,
      .admin-layout-container.desktop-collapsed .sidebar-brand-info {
        justify-content: center !important;
        gap: 0 !important;
        width: 100% !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-brand-icon,
      .admin-layout-container.desktop-collapsed .sidebar-brand-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto !important;
        cursor: pointer !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-brand-text,
      .admin-layout-container.desktop-collapsed .sidebar-brand-text,
      .admin-vertical-sidebar.desktop-collapsed .sidebar-desktop-toggle-btn,
      .admin-layout-container.desktop-collapsed .sidebar-desktop-toggle-btn {
        display: none !important;
      }

      /* Collapsed Rail Tabs: Centered Icons with Tooltips */
      .admin-vertical-sidebar.desktop-collapsed .admin-tabs,
      .admin-layout-container.desktop-collapsed .admin-tabs {
        padding: 10px 8px !important;
        align-items: center !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .admin-tab,
      .admin-layout-container.desktop-collapsed .admin-tab {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 4px auto !important;
        border-radius: 12px !important;
        justify-content: center !important;
        gap: 0 !important;
        position: relative !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .admin-tab .tab-label,
      .admin-layout-container.desktop-collapsed .admin-tab .tab-label {
        display: none !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .admin-tab .sidebar-badge,
      .admin-layout-container.desktop-collapsed .admin-tab .sidebar-badge {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border-radius: 50% !important;
        background: #10b981 !important;
        box-shadow: 0 0 0 2px var(--surface, #ffffff) !important;
      }

      /* High Quality Tooltip on Rail Hover */
      .admin-vertical-sidebar.desktop-collapsed .admin-tab::after,
      .admin-layout-container.desktop-collapsed .admin-tab::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%) scale(0.95);
        background: #0f172a;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.25);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999999;
      }
      .admin-vertical-sidebar.desktop-collapsed .admin-tab:hover::after,
      .admin-layout-container.desktop-collapsed .admin-tab:hover::after {
        opacity: 1;
        transform: translateY(-50%) scale(1);
      }

      /* Collapsed Rail Footer */
      .admin-vertical-sidebar.desktop-collapsed .sidebar-footer,
      .admin-layout-container.desktop-collapsed .sidebar-footer {
        padding: 10px 8px !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-tour-row,
      .admin-layout-container.desktop-collapsed .sidebar-tour-row {
        display: none !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-profile-card,
      .admin-layout-container.desktop-collapsed .sidebar-profile-card {
        padding: 4px !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-user-info,
      .admin-layout-container.desktop-collapsed .sidebar-user-info,
      .admin-vertical-sidebar.desktop-collapsed .sidebar-logout-btn,
      .admin-layout-container.desktop-collapsed .sidebar-logout-btn {
        display: none !important;
      }
      .admin-vertical-sidebar.desktop-collapsed .sidebar-avatar-wrapper,
      .admin-layout-container.desktop-collapsed .sidebar-avatar-wrapper {
        margin: 0 auto !important;
      }

      .mobile-only-topbar {
        display: none !important;
      }
      .mobile-sidebar-toggle {
        display: none !important;
      }
      .sidebar-desktop-toggle-btn {
        display: inline-flex !important;
      }
      .sidebar-close-btn {
        display: none !important;
      }
      .admin-sidebar-backdrop {
        display: none !important;
      }
      .admin-layout-container .admin-main-content,
      .admin-layout-container .admin-main-content.admin-shell,
      .admin-layout-container .admin-shell {
        flex: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px 20px 80px !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        transition: all 0.25s ease !important;
        box-sizing: border-box !important;
      }
    }

    /* TABLETS ERGONOMICS (768px to 1024px) */
    @media (min-width: 768px) and (max-width: 1024px) {
      .admin-vertical-sidebar {
        width: 218px !important;
        min-width: 218px !important;
      }
      .admin-tab {
        padding: 8px 10px !important;
        font-size: 13px !important;
        gap: 9px !important;
      }
      .admin-tab svg {
        width: 17px !important;
        height: 17px !important;
      }
      .sidebar-brand-header {
        padding: 13px 12px !important;
      }
      .sidebar-biz-name {
        font-size: 16px !important;
      }
    }

    /* MOBILE PHONES (< 768px): SLIDE-OVER DRAWER WITH 3-BAR HAMBURGER */
    @media (max-width: 767px) {
      .admin-layout-container {
        flex-direction: column;
      }
      .admin-vertical-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 285px;
        max-width: 84vw;
        height: 100vh;
        height: 100dvh;
        z-index: 100000;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.28);
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .admin-vertical-sidebar.open {
        transform: translateX(0);
      }
      .admin-sidebar-backdrop {
        display: block;
      }
      .sidebar-close-btn {
        display: flex;
      }
      .mobile-sidebar-toggle {
        display: inline-flex;
      }
      .admin-main-content {
        height: auto;
        min-height: 100vh;
        overflow-y: visible;
        width: 100% !important;
        max-width: 100% !important;
      }
      .admin-shell,
      .admin-layout-container .admin-main-content.admin-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 10px 12px 70px !important;
        box-sizing: border-box !important;
      }
    }
    
    /* SaaS Panels & Cards (Modern OS Window Manager) */
    .admin-panel { display: none; }
    .admin-panel.active {
      display: block;
      animation: osPanelGlideIn 0.35s var(--os-spring-smooth) forwards;
    }
    @keyframes osPanelGlideIn {
      0% {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    .admin-card,
    .bento-card,
    .saas-biz-card,
    .order-kpi,
    .metric-card,
    .dash-kpi,
    .table-state-card,
    .payment-group,
    .history-order-row,
    .ops-section-card { 
      background: color-mix(in srgb, var(--card) 88%, transparent) !important; 
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      border-radius: 20px !important; 
      padding: 22px !important; 
      margin-bottom: 20px !important; 
      box-shadow: 0 10px 30px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.14) !important; 
      border: 1.5px solid var(--line) !important; 
      color: var(--ink) !important;
      transition: transform 0.24s var(--os-spring-smooth), box-shadow 0.24s var(--os-spring-smooth), border-color 0.2s ease !important; 
    }
    .bento-card:hover, .admin-card:hover, .ops-section-card:hover, .saas-biz-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(212,175,55,0.4) !important;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    }
    
    .admin-card h3,
    .admin-card h4,
    .bento-card h3,
    .saas-biz-name,
    .metric-card h4,
    .table-state-card strong,
    .payment-group-head strong,
    .hor-head strong,
    .pol-title { 
      font-family: inherit; 
      color: var(--ink) !important; 
      margin: 0 0 16px; 
      font-size: 17px; 
      font-weight: 700; 
      display: flex; 
      align-items: center; 
      gap: 10px; 
      letter-spacing: -0.02em;
    }
    .admin-card p,
    .bento-kpi-sub,
    .metric-card p,
    .order-kpi span,
    .dash-kpi span,
    .hor-head small,
    .pol-meta,
    .table-state-card small { 
      color: var(--muted) !important; 
      font-size: 13px; 
      line-height: 1.5; 
      margin: 0 0 14px; 
    }
    
    .bento-kpi-huge,
    .metric-card .val,
    .order-kpi b,
    .dash-kpi b {
      color: var(--ink) !important;
      font-size: 30px;
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 4px;
    }

    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .field.full { grid-column: 1 / -1; }
    
    /* Buttons */
    .primary-btn, .gold-btn, .saas-admin-btn.gold { 
      border: 0 !important; 
      background: #2563eb !important; 
      color: #ffffff !important; 
      border-radius: 8px !important; 
      padding: 9px 18px !important; 
      font-size: 13px !important; 
      font-weight: 700 !important; 
      box-shadow: 0 1px 2px 0 rgba(37, 99, 235, 0.25) !important; 
      transition: all 0.15s !important; 
      cursor: pointer !important; 
    }
    .primary-btn:hover, .gold-btn:hover, .saas-admin-btn.gold:hover { 
      background: #1d4ed8 !important; 
    }
    .admin-overlay.dark-mode .primary-btn,
    .admin-overlay.dark-mode .gold-btn,
    .saas-admin.dark-mode .saas-admin-btn.gold { 
      background: #3b82f6 !important; 
    }
    .admin-overlay.dark-mode .primary-btn:hover,
    .admin-overlay.dark-mode .gold-btn:hover,
    .saas-admin.dark-mode .saas-admin-btn.gold:hover { 
      background: #2563eb !important; 
    }
    
    .ghost-btn, .saas-admin-btn { 
      border: 1px solid var(--line2) !important; 
      background: var(--card) !important; 
      color: var(--ink) !important; 
      border-radius: 8px !important; 
      padding: 8px 16px !important; 
      font-size: 13px !important; 
      font-weight: 600 !important; 
      transition: all 0.15s !important; 
      cursor: pointer !important; 
    }
    .ghost-btn:hover, .saas-admin-btn:hover { 
      background: var(--card2) !important; 
      border-color: var(--muted) !important; 
    }
    
    .danger-btn {
      border: 1px solid transparent !important;
      background: #ef4444 !important;
      color: #fff !important;
      border-radius: 8px !important;
      padding: 8px 16px !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      transition: all 0.15s !important;
      cursor: pointer !important;
    }
    .danger-btn:hover { background: #dc2626 !important; }
    
    .button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

    /* Clean Input, Select, Textarea controls in both themes */
    .admin-shell input[type="text"], 
    .admin-shell input[type="number"], 
    .admin-shell input[type="date"], 
    .admin-shell input[type="password"], 
    .admin-shell select, 
    .admin-shell textarea,
    .saas-admin input,
    .saas-admin select,
    .saas-admin textarea {
       background: var(--card) !important;
       border: 1px solid var(--line2) !important;
       color: var(--ink) !important;
       border-radius: 8px !important;
       padding: 9px 12px !important;
       font-size: 13.5px !important;
       font-family: inherit !important;
       transition: border-color 0.15s, box-shadow 0.15s;
    }
    .admin-shell input::placeholder,
    .saas-admin input::placeholder,
    .admin-shell textarea::placeholder,
    .saas-admin textarea::placeholder {
       color: var(--muted2) !important;
    }
    .admin-shell input:focus, .admin-shell select:focus, .admin-shell textarea:focus,
    .saas-admin input:focus, .saas-admin select:focus, .saas-admin textarea:focus {
       border-color: var(--gold) !important;
       outline: none !important;
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    }
    .admin-overlay.dark-mode .admin-shell input:focus,
    .admin-overlay.dark-mode .admin-shell select:focus,
    .admin-overlay.dark-mode .admin-shell textarea:focus,
    .saas-admin.dark-mode input:focus {
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    }
    
    /* Metric Cards */
    .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
    
    /* Labels */
    .admin-shell .field label,
    .admin-shell label,
    .saas-admin .field label,
    .saas-admin label { 
      font-size: 12.5px !important; 
      font-weight: 600 !important; 
      color: var(--ink) !important; 
      margin-bottom: 6px !important; 
      display: block !important; 
    }
    
    /* Orders Chat Cards */
    .order-chat {
      background: var(--card) !important;
      border: 1px solid var(--line) !important;
      border-left: 5px solid var(--gold) !important;
      color: var(--ink) !important;
      box-shadow: var(--shadow) !important;
    }
    .order-chat.ready { border-left-color: var(--green) !important; }
    .order-chat.pendingpayment { border-left-color: var(--red) !important; }
    .order-chat.completed { border-left-color: var(--muted2) !important; opacity: 0.75; }

    /* Universal Modal & Login Credentials Dialog */
    .admin-modal,
    .saas-modal,
    #saasEditCredsModal {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99999 !important;
      background: rgba(15, 23, 42, 0.75) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 16px !important;
    }
    .admin-modal.open,
    .saas-modal.open,
    #saasEditCredsModal.open {
      display: flex !important;
    }
    .admin-modal-card,
    .saas-modal-box {
      background: var(--card, #ffffff) !important;
      color: var(--ink, #0f172a) !important;
      border: 1px solid var(--line, #e2e8f0) !important;
      border-radius: 16px !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
      max-width: 480px !important;
      width: 95% !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
      box-sizing: border-box !important;
      position: relative !important;
    }
    .modal-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 16px 20px !important;
      border-bottom: 1px solid var(--line, #e2e8f0) !important;
    }
    .modal-header h3 {
      margin: 0 !important;
      font-size: 17px !important;
      font-weight: 700 !important;
      color: var(--ink, #0f172a) !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .close-btn {
      background: transparent !important;
      border: none !important;
      color: var(--muted, #64748b) !important;
      font-size: 20px !important;
      cursor: pointer !important;
      padding: 4px 8px !important;
      border-radius: 6px !important;
      line-height: 1 !important;
    }
    .close-btn:hover {
      background: var(--card2, #f1f5f9) !important;
      color: var(--ink, #0f172a) !important;
    }

    .admin-shell .status-pill { border-radius: 4px; padding: 4px 8px; font-size: 11px; font-weight: 700; }

    .status-pill{display:inline-block;font-size:9px;font-weight:800;border-radius:999px;padding:4px 7px;margin-top:5px;background:rgba(58,194,107,.15);color:var(--green)}
    .status-pill.off{background:rgba(226,86,74,.15);color:var(--red)}
    .qr-layout{display:grid;grid-template-columns:310px 1fr;gap:16px}
    .qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
    .qr-card{background:#fff;color:var(--bg);border-radius:14px;padding:13px;text-align:center;box-shadow:var(--shadow)}
    .qr-box{display:inline-block;background:#fff;border-radius:8px;padding:7px}
    .qr-label{font-family:var(--font-display);color:var(--bg);font-size:15px;font-weight:800;margin-top:8px}
    .qr-url{font-size:9px;color:#665;word-break:break-all;margin:3px 0 9px}
    .qr-print{border:1px solid var(--gold-deep);background:transparent;color:var(--gold-deep);border-radius:7px;padding:6px 10px;font-size:10px;font-weight:800}
    .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .dash-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
    .dash-kpi{background:var(--card);border-radius:13px;padding:14px;border:1px solid var(--line)}
    .dash-kpi b{display:block;font-family:var(--font-display);font-size:23px;color:var(--gold-light)}
    .dash-kpi span{font-size:10px;color:var(--muted);font-weight:700}
    .dash-kpi.highlight{border-color:var(--gold);background:rgba(212,175,55,.06)}
    .dash-chart{display:flex;align-items:flex-end;gap:10px;height:220px;margin-top:15px;padding:12px 4px 0 4px;border-bottom:1.5px solid var(--line);position:relative;overflow-x:auto;border-radius:12px;background:color-mix(in srgb, var(--card) 60%, transparent)}
    .dash-chart-svg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }
    .dash-chart-spline-area {
      fill: url(#dashAreaGradient);
      opacity: 0.85;
      transition: all 0.4s ease;
    }
    .dash-chart-spline-line {
      fill: none;
      stroke: var(--gold, #d4af37);
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.45));
      transition: all 0.4s ease;
    }
    .dash-chart-point {
      fill: var(--card, #121216);
      stroke: var(--gold, #d4af37);
      stroke-width: 2.5;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), r 0.2s ease;
      cursor: pointer;
    }
    .dash-chart-point.peak {
      fill: #22c55e;
      stroke: #ffffff;
      r: 6;
      filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
    }
    .dash-chart-point.active {
      fill: var(--gold-light, #fbbf24);
      stroke: #ffffff;
      r: 7;
      filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.85));
    }
    .dash-chart-col{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;cursor:pointer;position:relative;transition:all 0.18s var(--os-spring-smooth);padding:6px 2px;border-radius:10px;z-index:3}
    .dash-chart-col:hover{background:color-mix(in srgb, var(--gold) 12%, transparent);transform:translateY(-2px)}
    .dash-chart-col.selected{background:color-mix(in srgb, var(--gold) 20%, transparent);border:1px solid var(--gold);box-shadow:0 0 16px rgba(212,175,55,0.25)}
    .dash-chart-val{font-size:10.5px;font-weight:800;color:var(--ink);text-align:center;white-space:nowrap;line-height:1;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
    .dash-chart-bar{width:100%;max-width:28px;background:linear-gradient(180deg, var(--gold-light, #fbbf24) 0%, var(--gold, #d4af37) 50%, rgba(212,175,55,0.2) 100%);border-radius:8px 8px 3px 3px;min-height:6px;transition:height 0.4s var(--os-spring-smooth), filter 0.2s, background 0.2s;box-shadow:0 4px 14px rgba(212,175,55,0.25);border:1px solid rgba(255,255,255,0.18)}
    .dash-chart-col:hover .dash-chart-bar{filter:brightness(1.25);box-shadow:0 6px 20px rgba(212,175,55,0.45);transform:scaleX(1.05)}
    .dash-chart-col.selected .dash-chart-bar{background:linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);box-shadow:0 0 18px rgba(37,99,235,0.6);border-color:rgba(255,255,255,0.4)}
    .dash-chart-label{font-size:10.5px;color:var(--muted);font-weight:700;text-align:center;line-height:1.25}
    .dash-chart-col.selected .dash-chart-label{color:var(--gold-light, #fbbf24);font-weight:800}

    /* Interactive Chart Metric Switcher */
    .chart-metric-bar {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      background: color-mix(in srgb, var(--card2) 80%, transparent);
      border: 1px solid var(--line);
      border-radius: 999px;
    }
    .chart-metric-pill {
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 999px;
      cursor: pointer;
      min-height: unset;
      transition: all 0.18s ease;
    }
    .chart-metric-pill:hover {
      color: var(--ink);
    }
    .chart-metric-pill.active {
      background: var(--card);
      color: var(--gold-light, #fbbf24);
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      border: 1px solid var(--line);
    }
    .dash-day-detail{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px;transition:all 0.2s ease;box-shadow:var(--shadow)}
    .dash-day-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
    .dash-day-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px}
    .dash-day-stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px}
    .dash-day-stat small{font-size:10px;color:var(--muted);display:block;font-weight:600;margin-bottom:2px}
    .dash-day-stat strong{font-size:15px;color:var(--ink);font-weight:800}
    .dash-day-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
    .dash-day-table th{text-align:left;padding:8px;font-size:10.5px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line)}
    .dash-day-table td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
    .dash-top-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
    .dash-top-item .rank{width:22px;height:22px;border-radius:50%;background:rgba(212,175,55,.12);color:var(--gold);display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:0 0 auto}
    .dash-top-item .name{flex:1;margin:0 10px;font-size:13px;color:var(--ink)}
    .dash-top-item .qty{font-size:11px;color:var(--muted);white-space:nowrap}
    .dash-attention-item{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}
    .dash-attention-item.ok{color:var(--green)}
    @media(max-width:700px){.dash-kpis{grid-template-columns:repeat(2,1fr)}}
    .stat{background:var(--card);border-radius:12px;padding:13px;border:1px solid var(--line)}
    .stat b{display:block;font-family:var(--font-display);font-size:22px;color:var(--gold-light)}
    .stat span{font-size:10px;color:var(--muted);font-weight:700}
    /* Dashboard Bento Grid */
    .dash-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-bottom:16px}
    .bento-card { background: var(--card); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0,0,0,0.04); border: 1px solid var(--line); backdrop-filter: blur(12px); transition: transform 0.2s, box-shadow 0.2s; }
    .bento-card:hover { box-shadow: 0 10px 32px rgba(0,0,0,0.08); border-color: rgba(212, 175, 55, 0.25); }
    .bento-card h3 { font-family: var(--font-display); font-size: 15px; color: var(--gold-light); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-weight:700; }
    .bento-col-3{grid-column:span 3}
    .bento-col-4{grid-column:span 4}
    .bento-col-5{grid-column:span 5}
    .bento-col-6{grid-column:span 6}
    .bento-col-7{grid-column:span 7}
    .bento-col-8{grid-column:span 8}
    .bento-col-9{grid-column:span 9}
    .bento-col-12{grid-column:span 12}
    @media(max-width:1100px){
      .bento-col-3,.bento-col-4,.bento-col-5{grid-column:span 6}
      .bento-col-6,.bento-col-7,.bento-col-8,.bento-col-9{grid-column:span 12}
    }
    @media(max-width:768px){
      .dash-bento{display:flex;flex-direction:column;gap:14px}
      .bento-col-3,.bento-col-4,.bento-col-5,.bento-col-6,.bento-col-7,.bento-col-8,.bento-col-9,.bento-col-12{grid-column:span 12}
    }
    .bento-kpi-huge{font-size:32px;font-weight:800;color:var(--ink);line-height:1.1;margin-bottom:4px}
    .bento-kpi-sub{font-size:11px;color:var(--muted)}
    .bento-kpi-trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 6px;border-radius:4px;margin-left:8px}
    .bento-kpi-trend.up{background:rgba(0,200,83,.15);color:#00e676}
    .bento-kpi-trend.down{background:rgba(255,61,0,.15);color:#ff3d00}
    .bento-progress-list{display:flex;flex-direction:column;gap:12px;margin-top:5px}
    .bento-progress-item{display:flex;flex-direction:column;gap:5px}
    .bento-progress-header{display:flex;justify-content:space-between;font-size:11px;color:var(--ink);font-weight:700}
    .bento-progress-bar-bg{width:100%;height:6px;background:rgba(128,128,128,.15);border-radius:99px;overflow:hidden}
    .bento-progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:99px;transition:width 0.4s ease}
    .bento-donut-wrap{display:flex;align-items:center;justify-content:center;margin:auto 0;position:relative;height:140px}
    .bento-donut{width:130px;height:130px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.3s ease}
    .bento-donut-inner{width:86px;height:86px;background:var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
    .bento-donut-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:15px}
    .legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
    .legend-color{width:8px;height:8px;border-radius:2px}

    /* Light Theme Bento & Dashboard Support */
    body[data-visual-theme=classic-light] .bento-card,
    body[data-visual-theme=classic-white] .bento-card {
      background: #ffffff !important;
      border: 1px solid rgba(15,23,42,0.08) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    }
    body[data-visual-theme=classic-light] .bento-card h3,
    body[data-visual-theme=classic-white] .bento-card h3 {
      color: #0f172a !important;
    }
    body[data-visual-theme=classic-light] .bento-progress-bar-bg,
    body[data-visual-theme=classic-white] .bento-progress-bar-bg {
      background: #e2e8f0 !important;
    }
    body[data-visual-theme=classic-light] .dash-day-detail,
    body[data-visual-theme=classic-white] .dash-day-detail {
      background: #ffffff !important;
      border-color: rgba(15,23,42,0.08) !important;
    }
    body[data-visual-theme=classic-light] .dash-day-stat,
    body[data-visual-theme=classic-white] .dash-day-stat {
      background: #f8fafc !important;
      border: 1px solid rgba(15,23,42,0.08) !important;
    }
    body[data-visual-theme=classic-light] .dash-chart-col:hover,
    body[data-visual-theme=classic-white] .dash-chart-col:hover {
      background: rgba(15,23,42,0.04) !important;
    }
    body[data-visual-theme=classic-light] .dash-chart-col.selected,
    body[data-visual-theme=classic-white] .dash-chart-col.selected {
      background: rgba(59,130,246,0.08) !important;
      border: 1px solid rgba(59,130,246,0.3) !important;
      box-shadow: 0 0 12px rgba(59,130,246,0.15) !important;
    }
    body[data-visual-theme=classic-light] .dash-chart-col.selected .dash-chart-bar,
    body[data-visual-theme=classic-white] .dash-chart-col.selected .dash-chart-bar {
      background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    }
    /* Celebration Animation */
    .celeb-particle {position:fixed;pointer-events:none;border-radius:50%;animation:celeb-fall forwards;z-index:10000099;}
    @keyframes celeb-fall {
      0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
      70% { opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(360deg); opacity: 0; }
    }
    .celeb-success-pulse {
      position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);
      width:140px;height:140px;background:var(--gold);border-radius:50%;
      z-index:10000098;display:flex;align-items:center;justify-content:center;
      color:var(--bg);box-shadow:0 0 0 0 rgba(212,175,55,0.7);
      animation:celeb-pulse 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
      pointer-events:none;
    }
    @keyframes celeb-pulse {
      0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; box-shadow: 0 0 0 0 rgba(212,175,55,0.7); }
      30% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; box-shadow: 0 0 0 30px rgba(212,175,55,0); }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 0; box-shadow: 0 0 0 60px rgba(212,175,55,0); }
    }
    /* ==========================================================================
       DYNAMIC ISLAND & LIVE STATUS PILL HUD (APPLE iOS 18 / ANDROID 15)
       ========================================================================== */
    .toast, .dynamic-island-hud {
      position: fixed !important;
      z-index: 10000009 !important;
      top: max(16px, calc(env(safe-area-inset-top, 0px) + 14px)) !important;
      bottom: auto !important;
      left: 50% !important;
      transform: translate(-50%, -30px) scale(0.88);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.4s var(--os-spring-expressive, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.28s ease !important;
      background: rgba(15, 17, 23, 0.94) !important;
      backdrop-filter: blur(28px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
      border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
      color: var(--ink, #ffffff) !important;
      padding: 0 !important;
      border-radius: 9999px !important;
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), 0 0 24px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
      max-width: min(92vw, 440px);
      box-sizing: border-box;
      overflow: hidden;
      display: none;
      flex-direction: column;
    }
    .toast.show, .dynamic-island-hud.show {
      display: flex !important;
      transform: translate(-50%, 0) scale(1) !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .hud-inner {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 18px 8px 12px;
      box-sizing: border-box;
    }
    .hud-emoji-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(212, 175, 55, 0.16);
      border: 1px solid rgba(212, 175, 55, 0.3);
      font-size: 17px;
      line-height: 1;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      animation: hudIconSpringPop 0.35s var(--os-spring-expressive, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
    }
    .hud-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
      animation: hudIconSpringPop 0.35s var(--os-spring-expressive, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
    }
    @keyframes hudIconSpringPop {
      0% { transform: scale(0.4); opacity: 0; }
      70% { transform: scale(1.2); }
      100% { transform: scale(1); opacity: 1; }
    }
    .hud-content-wrap {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
      text-align: left;
    }
    .hud-title {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
      font-size: 13.5px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.25;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hud-subtitle {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
      font-size: 11.5px;
      font-weight: 600;
      color: #cbd5e1;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hud-msg {
      font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.35;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hud-dismiss-btn {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      padding: 4px 6px;
      margin-left: 2px;
      min-height: unset;
      transition: color 0.18s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hud-dismiss-btn:hover {
      color: #ffffff;
    }
    .hud-progress-line {
      height: 2.5px;
      width: 100%;
      background: var(--gold);
      animation: hudCountdown linear forwards;
      transform-origin: left;
    }
    @keyframes hudCountdown {
      from { transform: scaleX(1); }
      to { transform: scaleX(0); }
    }
    .hud-type-success { border-color: rgba(46, 204, 113, 0.5) !important; }
    .hud-type-success .hud-progress-line { background: #2ecc71; }
    .hud-type-warning { border-color: rgba(245, 158, 11, 0.5) !important; }
    .hud-type-warning .hud-progress-line { background: #f59e0b; }
    .hud-type-error { border-color: rgba(239, 68, 68, 0.5) !important; }
    .hud-type-error .hud-progress-line { background: #ef4444; }
    .quick-add-toast {
      position:fixed; z-index:1000008;
      bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 72px));
      left:50%; transform:translate(-50%, 40px) scale(0.9);
      background: var(--card); border:1px solid var(--gold-light);
      border-radius:32px; padding:6px 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      display:none; align-items:center; gap:12px;
      opacity:0; pointer-events:auto;
      transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
    }
    .quick-add-toast.show {
      display:flex; opacity:1; transform:translate(-50%, 0) scale(1);
    }
    .quick-add-toast span {
      font-size: 13px; font-weight: 600; color: var(--ink);
      white-space:nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
    }
    .quick-add-toast .q-stepper {
      display:flex; align-items:center; background:var(--gold-soft);
      border-radius:20px; height:28px; padding:0 4px;
    }
    .quick-add-toast .q-stepper button {
      background:none; border:none; color:var(--gold-light);
      font-size:16px; font-weight:900; width:28px; height:28px;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
    }
    .quick-add-toast .q-stepper strong {
      font-size:13px; color:var(--gold-light); min-width:16px; text-align:center;
    }
    .staff-chat-overlay{z-index:260}
    /* Payment modal */
    .pay-overlay{z-index:100030}
    #payConfirmOverlay{z-index:100060 !important}
    #generalConfirmOverlay{z-index:100070 !important}
    
    #gatewaySimulatorOverlay{z-index:100030}
    .pay-sheet{width:min(440px,100%);text-align:center;box-sizing:border-box}
    .pay-qr-box{background:#fff;border-radius:16px;padding:12px;display:inline-block;margin:10px 0;box-shadow:0 8px 24px rgba(0,0,0,0.12)}
    .pay-amount{font-family:var(--font-display);font-size:34px;font-weight:800;color:var(--gold-light);margin:4px 0}
    .pay-upi-id{font-size:11px;color:var(--muted);margin-bottom:8px}
    .pay-status-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(226,86,74,.12);color:var(--red);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:800;margin:6px 0}
    .pay-status-badge.paid{background:rgba(58,194,107,.15);color:var(--green)}
    .pay-note{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:10px}
    .pay-breakdown{text-align:left;background:var(--card);border-radius:12px;padding:12px 14px;margin:10px 0;border:1px solid var(--line)}
    .direct-upi-chip{
      display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
      text-decoration:none;border:1.5px solid var(--line);background:var(--card);
      transition:all .2s ease;cursor:pointer;box-sizing:border-box;
    }
    .direct-upi-chip:hover{border-color:var(--gold);transform:translateY(-1px)}
    .direct-upi-chip:active{transform:scale(0.98)}
    .upi-chip-icon{
      width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
      justify-content:center;font-size:15px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.15);
    }
    .upi-chip-text{text-align:left;display:flex;flex-direction:column;min-width:0}
    .upi-chip-text strong{font-size:12.5px;color:var(--ink);white-space:nowrap;font-weight:800}
    .upi-chip-text small{font-size:10px;color:var(--muted);white-space:nowrap}
    .upi-chip-gpay{border-color:rgba(26,115,232,0.4);background:rgba(26,115,232,0.05)}
    .upi-chip-gpay:hover{border-color:#1a73e8}
    .upi-chip-phonepe{border-color:rgba(95,37,159,0.4);background:rgba(95,37,159,0.05)}
    .upi-chip-phonepe:hover{border-color:#5f259f}
    .upi-chip-paytm{border-color:rgba(0,185,245,0.4);background:rgba(0,185,245,0.05)}
    .upi-chip-paytm:hover{border-color:#00b9f5}
    .upi-chip-bhim{border-color:rgba(234,99,32,0.4);background:rgba(234,99,32,0.05)}
    .upi-chip-bhim:hover{border-color:#ea6320}
    /* Payments tab (staff) */
    .payment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
    .payment-group{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:var(--card)}
    .payment-group.multi{border-color:var(--gold)}
    .payment-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
    .payment-group-head strong{font-size:13.5px;color:var(--ink)}
    .multi-tag{font-size:9.5px;font-weight:800;color:var(--bg);background:var(--gold);border-radius:999px;padding:4px 9px;white-space:nowrap}
    .payment-order-line{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
    .pol-body{display:flex;flex-direction:column;gap:2px;min-width:0}
    .pol-title{font-size:12.5px;font-weight:700;color:var(--ink)}
    .pol-meta{font-size:10.5px;color:var(--muted)}
    .pay-check{position:relative;flex:0 0 auto;margin-top:2px;cursor:pointer}
    .pay-check input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
    .pay-check span{display:block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:var(--card2)}
    .pay-check input:checked+span{background:var(--gold);border-color:var(--gold)}
    .pay-check input:checked+span:after{content:"✓";display:block;text-align:center;line-height:17px;font-size:12px;color:var(--bg);font-weight:900}
    .payment-group-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
    .pg-total{font-size:13px;font-weight:800;color:var(--gold-light)}
    .history-order-row{border:1px solid var(--line);border-radius:12px;margin-bottom:9px;overflow:hidden;background:var(--card)}
    .hor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer}
    .hor-head strong{font-size:13px;color:var(--ink)}
    .hor-head small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
    .hor-amount{font-size:14px;font-weight:800;color:var(--green);white-space:nowrap}
    .hor-detail{display:none;padding:0 14px 12px;border-top:1px dashed var(--line)}
    .history-order-row.expanded .hor-detail{display:block}
    .hor-item{display:flex;justify-content:space-between;padding:6px 0;font-size:11.5px;color:var(--muted)}
    .hor-item.total{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:800;color:var(--gold-light)}
    .waiter-calls-card{border-color:var(--line)}
    .waiter-calls-card:has(.payment-row){border-color:var(--red);box-shadow:0 0 0 1px rgba(226,86,74,.25)}
    .payment-row .pr-left strong{display:block;font-size:13px;color:var(--ink)}
    .payment-row .pr-left small{color:var(--muted);font-size:11px}
    .confirm-pay-btn{border:0;background:var(--green);color:#04170c;border-radius:10px;padding:10px 14px;font-size:11.5px;font-weight:800;white-space:nowrap}
    .table-pending-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(226,86,74,.14);color:var(--red);border-radius:999px;padding:4px 9px;font-size:10px;font-weight:800}
    @media(min-width:720px){
      .menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
      .hero-stage{height:340px;min-height:300px}
    }
    @media(max-width:800px){.menu-grid{gap:11px}.qr-layout{grid-template-columns:1fr}}
    @media(max-width:420px){.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.card-media{flex:0 0 86px;width:86px;height:86px}}
    /* ===== SAAS SHELL (dark) ===== */
    .saas-gate{position:fixed;inset:0;z-index:1000;background:radial-gradient(circle at 30% 20%,#1a1710,#070709 60%);display:flex;align-items:center;justify-content:center;padding:20px}
    .saas-gate.hidden{display:none !important}
    .saas-login-card{width:min(430px,100%);background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
    .saas-login-card h1{font-family:var(--font-brand);text-align:center;color:var(--gold);font-size:31px;margin:0 0 6px;letter-spacing:.04em}
    .saas-login-card .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 23px}
    .saas-login-form{display:flex;flex-direction:column;gap:13px}
    .saas-field{display:flex;flex-direction:column;gap:6px}
    .saas-field label{font-size:11px;font-weight:800;color:var(--gold-light)}
    .saas-field input,.saas-field select{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:12px;outline:0;color:var(--ink)}
    .saas-submit{border:0;border-radius:11px;padding:13px;background:var(--gold);color:var(--bg);font-weight:800;margin-top:6px}
    .saas-help{text-align:center;color:var(--muted);font-size:10px;line-height:1.45;margin:17px 0 0}
    .saas-error{color:var(--red);font-size:11px;min-height:15px;text-align:center;font-weight:700}
    .saas-admin{position:fixed;inset:0;z-index:900;background:var(--bg);overflow:auto;display:none}.saas-admin.open{display:block}
    .saas-admin-nav{background:var(--card);color:var(--ink);padding:15px clamp(16px,4vw,52px);display:flex;align-items:center;justify-content:space-between;gap:15px;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
    .saas-admin-brand{font-family:var(--font-brand);font-size:20px;letter-spacing:.04em}
    .saas-admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
    .saas-admin-btn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:9px;padding:9px 12px;font-size:11px;font-weight:800}
    .saas-admin-btn.gold{background:var(--gold);color:var(--bg);border-color:var(--gold)}
    .saas-admin-main{max-width:1220px;margin:0 auto;padding:30px 16px 55px}
    .saas-admin-title{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:23px}
    .saas-admin-title h1{font-family:var(--font-display);color:var(--ink);font-size:32px;margin:0;font-weight:800;letter-spacing:-0.02em;}
    .saas-admin-title p{color:var(--muted);margin:5px 0 0;font-size:12px}
    .saas-biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
    .saas-biz-card{background:var(--card);border-radius:18px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
    .saas-biz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .saas-biz-name{font-family:var(--font-display);color:var(--ink);font-size:19px;margin:0}
    .saas-biz-slug{font:11px monospace;color:var(--muted);display:inline-block;background:rgba(212,175,55,.08);padding:4px 6px;border-radius:5px;margin-top:4px}
    .saas-status{font-size:9px;font-weight:800;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
    .saas-status.live{color:var(--green);background:rgba(58,194,107,.14)}.saas-status.suspended{color:var(--red);background:rgba(226,86,74,.14)}.saas-status.closed{color:var(--muted);background:rgba(255,255,255,.06)}.saas-status.draft{color:var(--gold);background:rgba(212,175,55,.12)}
    .saas-biz-meta{color:var(--muted);font-size:11px;line-height:1.55}
    .saas-biz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
    .saas-biz-stat{background:var(--card);border-radius:9px;padding:8px;text-align:center;border:1px solid var(--line)}
    .saas-biz-stat b{display:block;color:var(--gold-light);font-size:17px}
    .saas-biz-stat span{font-size:9px;color:var(--muted);font-weight:700}
    .saas-biz-links{font-size:10px;word-break:break-all;color:var(--gold-light);background:var(--card);border:1px dashed var(--line);padding:8px;border-radius:8px}
    .saas-biz-actions{display:flex;gap:7px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:12px}
    .saas-biz-actions button{flex:1;min-width:90px;border:1px solid var(--line);background:transparent;color:var(--gold-light);border-radius:8px;padding:8px 9px;font-size:10px;font-weight:800}
    .saas-biz-actions button.primary{background:var(--gold);color:var(--bg)}
    .saas-biz-actions button.danger{color:var(--red)}
    .saas-empty{grid-column:1/-1;text-align:center;background:var(--card);border-radius:18px;padding:45px;color:var(--muted)}
    .saas-modal{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px}.saas-modal.open{display:flex}
    .saas-modal-box{width:min(650px,100%);max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:25px}
    .saas-modal-box h2{font-family:var(--font-display);color:var(--ink);margin:0 0 18px;font-weight:700;}
    .saas-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
    .saas-form-field{display:flex;flex-direction:column;gap:5px}
    .saas-form-field.full{grid-column:1/-1}
    .saas-form-field label{color:var(--gold-light);font-size:11px;font-weight:800}
    .saas-form-field input,.saas-form-field select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px;outline:0}
    .saas-modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
    .saas-modal-actions button{border:0;border-radius:9px;padding:10px 14px;font-size:11px;font-weight:800}
    .saas-modal-actions .cancel{background:transparent;border:1px solid var(--line);color:var(--ink)}
    .saas-modal-actions .confirm{background:var(--gold);color:var(--bg)}

    /* BLINKIT SPLIT VIEW & SPACE-OPTIMIZED MENU STYLES */
    .blinkit-split-wrapper {
      display: flex !important;
      gap: 8px !important;
      align-items: flex-start !important;
      position: relative !important;
      width: 100% !important;
    }

    .blinkit-sidebar {
      position: sticky !important;
      top: 100px !important;
      width: 76px !important;
      min-width: 76px !important;
      flex-shrink: 0 !important;
      min-height: calc(100vh - 110px) !important;
      max-height: calc(100vh - 110px) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scrollbar-width: none !important;
      background: var(--card, #ffffff) !important;
      border-radius: 16px !important;
      border: 1px solid var(--line, rgba(0,0,0,0.08)) !important;
      padding: 10px 4px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
      z-index: 25 !important;
    }

    .blinkit-sidebar::-webkit-scrollbar {
      display: none !important;
    }

    .blinkit-cat-item {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      border: none !important;
      background: transparent !important;
      padding: 6px 2px !important;
      border-radius: 12px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      text-align: center !important;
      width: 100% !important;
    }

    .blinkit-cat-avatar {
      width: 44px !important;
      height: 44px !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      background: var(--card2, #f1f5f9) !important;
      border: 2px solid transparent !important;
      display: grid !important;
      place-items: center !important;
      font-size: 18px !important;
      transition: all 0.2s ease !important;
    }

    .blinkit-cat-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    .blinkit-cat-name {
      font-size: 9.5px !important;
      font-weight: 700 !important;
      color: var(--muted, #64748b) !important;
      line-height: 1.15 !important;
      max-width: 68px !important;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      white-space: nowrap !important;
    }

    .blinkit-cat-item.active .blinkit-cat-avatar {
      border-color: #16a34a !important;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25) !important;
      transform: scale(1.06) !important;
    }

    .blinkit-cat-item.active .blinkit-cat-name {
      color: var(--gold-light, #d4af37) !important;
      font-weight: 800 !important;
    }

    .blinkit-dishes-pane {
      flex: 1 !important;
      min-width: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }

    .blinkit-dishes-pane .layout-grid-2col {
      gap: 8px !important;
    }

    /* DESKTOP BIG SCREEN RESPONSIVE RULE: HIDE MOBILE DENSITY TOGGLE BAR & USE DETAILED VIEW */
    @media (min-width: 1024px) {
      #layoutToggleBar {
        display: none !important;
      }
    }

    /* PORTION BOX & SVG BADGES */
    .portion-box-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
      background: rgba(0,0,0,0.03) !important;
      padding: 5px 6px !important;
      border-radius: 8px !important;
      margin-top: 4px !important;
      border: 1px solid var(--line, rgba(0,0,0,0.08)) !important;
      width: 100% !important;
    }

    .portion-row {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 4px !important;
      width: 100% !important;
    }

    .portion-lbl {
      font-size: 10.5px !important;
      font-weight: 600 !important;
      color: var(--ink, #0f172a) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 3px !important;
    }

    .dense-portion-prices {
      font-size: 10.5px !important;
      font-weight: 600 !important;
      color: var(--muted, #64748b) !important;
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      margin-top: 2px !important;
    }

    .dense-action-group {
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      flex-shrink: 0 !important;
    }

    .dense-portion-control {
      display: flex !important;
      align-items: center !important;
      gap: 4px !important;
      justify-content: flex-end !important;
    }

    .portion-micro-lbl {
      font-size: 8.5px !important;
      font-weight: 800 !important;
      color: var(--muted, #64748b) !important;
      text-transform: uppercase !important;
    }

    .discount-pill-mini {
      font-size: 8.5px !important;
      font-weight: 900 !important;
      background: #dc2626 !important;
      color: #ffffff !important;
      padding: 1px 5px !important;
      border-radius: 4px !important;
      letter-spacing: 0.02em !important;
      flex-shrink: 0 !important;
    }

    .price-strikethrough-mini {
      font-size: 10px !important;
      color: var(--muted, #64748b) !important;
      text-decoration: line-through !important;
      opacity: 0.75 !important;
    }

    .food-badge-svg {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important;
    }

    .food-badge-inline-svg {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }

    /* Super Admin Tabs & Studio Styles */
    .saas-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px;overflow-x:auto}
    .saas-tab-btn{background:var(--card);border:1px solid var(--line);color:var(--muted);padding:10px 18px;border-radius:12px;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s ease;white-space:nowrap}
    .saas-tab-btn:hover{border-color:rgba(212,175,55,.5);color:var(--ink)}
    .saas-tab-btn.active{background:var(--gold);color:#0b0f19;border-color:var(--gold);box-shadow:0 4px 16px rgba(212,175,55,.3)}
    .saas-studio-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:20px;position:relative}
    .saas-studio-card.highlight{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.03)}
    .saas-preset-chip{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
    .saas-preset-chip:hover{background:rgba(212,175,55,.15);border-color:var(--gold);color:var(--gold-light)}
    .saas-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
    .saas-menu-card{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
    .saas-action-bar-sticky{position:sticky;bottom:16px;z-index:20;background:rgba(15,19,29,.92);backdrop-filter:blur(10px);border:1.5px solid rgba(212,175,55,.4);border-radius:16px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
    .saas-inactive{position:fixed;inset:0;z-index:1000;background:var(--bg);color:var(--ink);display:none;align-items:center;justify-content:center;text-align:center;padding:25px}.saas-inactive.open{display:flex}
    .saas-inactive-card{width:min(430px,100%);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px}
    .saas-inactive-card h2{font-family:var(--font-display);color:var(--gold-light);margin:0 0 8px}
    .saas-inactive-card p{font-size:13px;color:var(--muted);line-height:1.5}
    .saas-client-badge{display:inline-block;background:var(--gold);color:var(--bg);font-size:9px;font-weight:800;text-transform:uppercase;padding:4px 7px;border-radius:999px;margin-left:8px}
    .saas-public .admin-btn{display:none!important}.saas-public .admin-overlay{display:none!important}.saas-public .history-btn{display:inline-flex!important}
    /* Customer Views Isolation: STRICTLY hidden on SaaS homepage; ONLY visible when body has .saas-public */
    body:not(.saas-public) #hero,
    body:not(.saas-public) #categoryNavStickyWrap,
    body:not(.saas-public) #categoryNav,
    body:not(.saas-public) #nav,
    body:not(.saas-public) #menuRoot,
    body:not(.saas-public) #menuSec,
    body:not(.saas-public) #brandBio,
    body:not(.saas-public) #waiterFab,
    body:not(.saas-public) #customerOrdersFab,
    body:not(.saas-public) #customerBottomBar,
    body:not(.saas-public) .customer-bottom-bar,
    body:not(.saas-public) .customer-orders-fab,
    body:not(.saas-public) #callWaiterBar,
    body:not(.saas-public) #cartBar,
    body:not(.saas-public) #customerOpsBanner,
    body:not(.saas-public) #smartPairingDrawer,
    body:not(.saas-public) #vm9CustomerBackBar {
      display: none !important;
    }
    body.saas-public #saasLandingPage {
      display: none !important;
    }

    /* Brand Bio & Story Section (Footer of Customer Menu) */
    .brand-bio-section{padding:32px 16px 120px;max-width:960px;margin:0 auto;box-sizing:border-box}
    .brand-bio-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 24px;box-shadow:0 12px 36px rgba(0,0,0,0.18);position:relative;overflow:hidden;box-sizing:border-box}
    .brand-bio-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, transparent, var(--gold), transparent)}
    .brand-bio-header{text-align:center;margin-bottom:20px}
    .brand-bio-top-emblem{margin-bottom:14px;display:flex;justify-content:center;align-items:center}
    .brand-bio-custom-logo{width:58px !important;height:58px !important;max-width:58px !important;max-height:58px !important;object-fit:contain !important;border-radius:12px !important;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)) !important;display:block !important;margin:0 auto !important}
    .watermark-logo, .menuqro-free-watermark img{width:24px !important;height:24px !important;max-width:24px !important;max-height:24px !important;object-fit:contain !important;display:inline-block !important}
    .brand-bio-badge{display:inline-block;padding:4px 14px;background:rgba(212,175,55,0.12);border:1px solid rgba(212,175,55,0.3);color:var(--gold-light);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px}
    .brand-bio-title{font-size:24px;font-weight:900;color:var(--ink);margin:0 0 6px;letter-spacing:-0.02em}
    .brand-bio-tagline{font-size:13.5px;color:var(--muted);margin:0;font-style:italic}
    .brand-bio-story{font-size:13.5px;line-height:1.7;color:var(--ink);text-align:center;max-width:720px;margin:18px auto 24px;padding:16px 20px;background:rgba(255,255,255,0.02);border-radius:14px;border:1px solid var(--line)}
    .brand-bio-details-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:12px;margin-bottom:22px}
    .brand-bio-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:rgba(255,255,255,0.02);border:1px solid var(--line);border-radius:12px}
    .brand-bio-item-icon{font-size:20px;flex:0 0 auto;margin-top:2px}
    .brand-bio-item-content strong{display:block;font-size:11px;color:var(--gold-light);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px}
    .brand-bio-item-content p{margin:0;font-size:12.5px;color:var(--ink);line-height:1.45}
    .brand-bio-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
    .brand-bio-top-btn{background:rgba(212,175,55,0.1);border:1px solid var(--gold);color:var(--gold-light);padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
    .brand-bio-top-btn:hover{background:var(--gold);color:var(--bg)}
    .brand-bio-badge-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
    .history-btn{border:1px solid var(--line);color:var(--gold-light);background:var(--card);border-radius:10px;padding:9px 13px;font-size:11px;font-weight:800}
    .history-sheet{max-width:620px}
    .history-entry{border:1px solid var(--line);border-radius:12px;padding:12px;margin:9px 0;background:var(--card)}
    .order-progress{display:flex;align-items:flex-start;margin:10px 0;overflow-x:auto;padding-bottom:2px}
    .progress-step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:52px;position:relative}
    .progress-dot{width:24px;height:24px;border-radius:50%;background:#1a1a1f;border:1.5px solid var(--line);display:grid;place-items:center;font-size:10.5px;color:var(--muted);z-index:1}
    .progress-step.done .progress-dot{background:var(--gold);border-color:var(--gold);color:var(--bg)}
    .progress-step.current .progress-dot{border-color:var(--gold);animation:progressPulse 1.3s ease-in-out infinite}
    @keyframes progressPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.35)}50%{box-shadow:0 0 0 5px rgba(212,175,55,0)}}
    .progress-label{font-size:8.5px;color:var(--muted);margin-top:5px;text-align:center;line-height:1.2}
    .progress-step.done .progress-label{color:var(--gold-light)}
    .progress-line{position:absolute;top:12px;left:50%;right:-50%;height:1.5px;background:var(--line);z-index:0}
    .progress-step.done .progress-line{background:var(--gold)}
    .progress-step:last-child .progress-line{display:none}
    .progress-cancelled{color:var(--red);font-size:12px;font-weight:800;padding:8px 0}
    .history-entry strong{color:var(--ink);font-size:13px}
    .history-entry small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:4px}
    .history-entry .status-pill{margin-top:8px}
    .history-entry button{margin-top:9px;border:1px solid var(--gold);background:rgba(212,175,55,.1);color:var(--gold-light);border-radius:8px;padding:7px 10px;font-size:10px;font-weight:800}
    .charge-note{color:var(--muted);font-size:10px;line-height:1.45;margin:12px 0 0}
    .saas-demo-notice{display:flex;gap:10px;align-items:flex-start;margin:0 0 20px;padding:12px 14px;border:1px solid var(--line);background:rgba(212,175,55,.06);color:var(--gold-light);border-radius:12px;font-size:11px;line-height:1.5}
    .saas-demo-notice strong{white-space:nowrap;color:var(--gold)}
    .saas-demo-notice span{color:var(--muted)}
    .preview-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.82);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:14px}.preview-modal.open{display:flex}
    .preview-box{width:min(1180px,100%);height:min(92vh,820px);background:var(--card);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line)}
    .preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
    .preview-head strong{color:var(--gold-light);font-family:var(--font-display)}
    .preview-head button{border:0;border-radius:8px;padding:8px 11px;background:var(--gold);color:var(--bg);font-size:11px;font-weight:800}
    .preview-box iframe{flex:1;width:100%;border:0;background:var(--bg)}
    .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .guide-step{background:var(--card);border-radius:12px;padding:12px;border:1px solid var(--line)}
    .guide-step b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px;font-weight:700;}
    .guide-step span{display:block;color:var(--muted);font-size:11px;line-height:1.45}
    .link-copy{display:flex;gap:6px;align-items:center;margin-top:12px}
    .link-copy input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:9px;font-size:11px;background:var(--card);color:var(--ink)}
    .table-manager{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px;margin-top:14px}
    
    .table-manager-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 14px;
    }
    
    .tm-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    .tm-card.free {
      background: #ffffff;
      border-color: #e2e8f0;
    }
    .tm-card.free .tm-title { color: #1e293b; }
    .tm-card.free .tm-btn { 
      background: transparent; 
      border: 1px solid #10b981; 
      color: #10b981;
    }
    
    .tm-card.occupied {
      background: #fffbeb;
      border-color: #fcd34d;
    }
    .tm-card.occupied .tm-title { color: #b45309; }
    .tm-card.occupied .tm-btn {
      background: #d97706;
      border: 1px solid #d97706;
      color: white;
    }
    
    .tm-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    
    .tm-title {
      font-size: 16px;
      font-weight: 800;
      margin: 0;
    }
    
    .tm-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 12px;
    }
    .tm-badge.free { background: #dcfce7; color: #15803d; }
    .tm-badge.occupied { background: #fef3c7; color: #b45309; }
    
    .tm-img {
      width: 100%;
      height: 90px;
      object-fit: contain;
      margin-bottom: 12px;
    }
    
    .tm-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 12px;
      font-size: 12px;
      color: #64748b;
    }
    
    .tm-name { font-weight: 700; color: #334155; font-size: 14px; margin-bottom: 2px; }
    
    .tm-btn {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .tm-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    .table-state-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
    .table-state-card strong{display:block;color:var(--ink);font-size:13px}
    .table-state-card select{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:7px;padding:5px;font-size:10px;background:var(--card);color:var(--ink)}
    .table-state-card.has-pending{border-color:var(--red)}
    @media(max-width:700px){.guide-grid{grid-template-columns:1fr}.preview-modal{padding:0}.preview-box{height:100vh;border-radius:0}.preview-head{padding:10px 12px}.admin-card{padding:14px}.qr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:650px){.saas-form-grid{grid-template-columns:1fr}.saas-form-field.full{grid-column:auto}.saas-admin-title{align-items:flex-start;flex-direction:column}.saas-admin-title h1{font-size:27px}.saas-admin-nav{align-items:flex-start;flex-direction:column}.saas-admin-actions{justify-content:flex-start}.saas-biz-grid{grid-template-columns:1fr}}
    /* Orders board */
    .orders-toolbar{display:grid;grid-template-columns:1.3fr .8fr .8fr auto;gap:12px;align-items:end;margin-bottom:20px}.orders-toolbar .field{min-width:0}
    .order-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.order-kpi{border-radius:16px;padding:16px;background:rgba(0,0,0,0.15);color:var(--ink);border:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,0.05)}.order-kpi b{display:block;font-family:var(--font-display);font-size:28px;color:var(--gold-light);font-weight:700;margin-bottom:4px}.order-kpi span{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
    .order-board{display:block;width:100%;}
    @media(max-width:960px){.order-board{display:block;width:100%;}}
    .order-list{display:flex;flex-direction:column;gap:16px;padding-right:4px;padding-bottom:24px;min-height:160px}
    .order-list::-webkit-scrollbar{width:6px}.order-list::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.3);border-radius:10px}
    .order-chat{border:1px solid rgba(255,255,255,0.05);border-left:6px solid var(--gold);border-radius:16px;background:rgba(0,0,0,0.15);padding:18px;box-shadow:0 6px 16px rgba(0,0,0,0.06);transition:transform 0.2s;backdrop-filter:blur(8px)}
    .order-chat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,0.1)}
    .order-chat.ready{border-left-color:var(--green)}.order-chat.completed{border-left-color:var(--muted2);opacity:0.7}.order-chat.pendingpayment{border-left-color:var(--red)}
    .order-chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .order-person{display:flex;gap:12px;align-items:center}
    .table-avatar{width:40px;height:40px;border-radius:12px;background:rgba(212,175,55,.1);color:var(--gold);display:grid;place-items:center;font-size:16px;font-weight:800;flex:0 0 auto}
    .order-person strong{color:var(--gold-light);font-size:15px;display:block;margin-bottom:2px}
    .order-person small{color:var(--muted);font-size:11.5px}
    .order-age{font-size:10px;color:var(--muted);white-space:nowrap}
    .order-time{font-size:10px;color:var(--muted2);margin:6px 0}
    .order-items{margin:8px 0}
    .order-item-line{display:grid;grid-template-columns:36px 1fr auto auto;gap:6px;align-items:center;padding:6px 0;font-size:11.5px;color:var(--muted);border-bottom:1px solid rgba(212,175,55,.06)}
    .order-item-line:last-child{border-bottom:0}
    .order-item-line img{width:36px;height:36px;border-radius:7px;object-fit:cover}
    .order-item-line .qty{color:var(--gold-light);font-weight:800}
    .order-item-line .item-total{color:var(--ink);font-weight:700;min-width:52px;text-align:right}
    .item-qty-ctrl{display:inline-flex;align-items:center;gap:6px;background:#0d121c;border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:3px}
    .item-qty-ctrl button{width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:#38bdf8;font-size:18px;font-weight:900;line-height:1;display:grid;place-items:center;cursor:pointer}
    .item-qty-ctrl button:active{background:rgba(56,189,248,0.2)}
    .item-qty-ctrl .qty-val{min-width:20px;text-align:center;font-weight:900;color:#f8fafc;font-size:13.5px}
    body.kitchen-mode .item-qty-ctrl{display:none}
    .order-note{font-size:11px;color:var(--gold-light);background:rgba(212,175,55,.06);border-radius:8px;padding:6px 9px;margin:6px 0}
    .order-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
    .order-actions select{border:1px solid var(--line);border-radius:8px;padding:8px;font-size:11px;background:var(--card);color:var(--ink)}
    .status-btns{display:flex;gap:6px;flex-wrap:wrap}
    .status-btn{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:10px;padding:10px 14px;font-size:12px;font-weight:800;min-width:90px}
    .status-btn.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
    .status-btn.prep{border-color:rgba(212,175,55,.4)}
    .status-btn.ready{border-color:rgba(58,194,107,.5)}
    .status-btn.ready.active,.status-btn.ready:hover{background:var(--green);color:#04170c;border-color:var(--green)}
    .deliver-btn{border:0;background:var(--green);color:#04170c;border-radius:10px;padding:10px 14px;font-size:12px;font-weight:800}
    .order-empty{text-align:center;color:var(--muted);padding:40px 15px;font-size:12.5px}
    .order-side{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;align-self:flex-start}
    .order-side h4{margin:0 0 8px;color:var(--gold-light);font-size:14px}
    .sound-status{display:none !important}
    .sound-status.on{display:none !important}
    .new-order-alert{animation:pulseAlert 1.4s ease-in-out 3}
    .order-chat.stale-order{border-left-color:#e67e22;box-shadow:0 0 0 1px rgba(230,126,34,.25);background:#140f0a}
    .order-chat.stale-order .order-age{color:#e67e22;font-weight:800}
    .order-chat.urgent-order{border-left-color:#e2564a;box-shadow:0 0 0 1px rgba(226,86,74,.3);background:#1a0c0c}
    .order-chat.urgent-order .order-age{color:#e2564a;font-weight:900}
    /* Urgency aging visuals & rush speed */
    .continuous-alarm-banner{background:linear-gradient(135deg,rgba(226,86,74,.25) 0%,rgba(212,175,55,.18) 100%);border:2px solid #e2564a;border-radius:14px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;animation:alarmPulse 1.2s infinite ease-in-out;box-shadow:0 0 20px rgba(226,86,74,.35)}
    @keyframes alarmPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,86,74,.6)}50%{box-shadow:0 0 0 8px rgba(226,86,74,0)}}
    .alarm-banner-content{display:flex;align-items:center;gap:12px}
    .alarm-icon-pulse{font-size:26px;animation:ringBounce .6s infinite alternate ease-in-out}
    @keyframes ringBounce{from{transform:scale(1)}to{transform:scale(1.25) rotate(12deg)}}
    .alarm-text-wrap strong{display:block;color:#fff;font-size:14px;letter-spacing:.5px}
    .alarm-text-wrap small{color:var(--gold-light);font-size:11px;font-weight:700}
    .alarm-banner-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .alarm-action-btn{background:var(--gold);color:var(--bg);font-weight:900;padding:9px 16px;border-radius:9px;border:0;font-size:12px;cursor:pointer}
    .alarm-silence-btn{background:rgba(0,0,0,.6);color:#ffb8b8;border:1px solid #e2564a;font-weight:700;padding:9px 14px;border-radius:9px;font-size:12px;cursor:pointer}
    .rush-filter-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;scrollbar-width:thin}
    .rush-tab-btn{white-space:nowrap;padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:var(--card2);color:var(--muted);font-size:11.5px;font-weight:700;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:6px}
    .rush-tab-btn:hover{color:var(--ink);border-color:var(--gold)}
    .rush-tab-btn.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:800;box-shadow:0 2px 10px rgba(212,175,55,.25)}
    .rush-tab-btn .tab-count{background:rgba(0,0,0,.25);color:inherit;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:900}
    .rush-tab-btn.active .tab-count{background:var(--ink);color:var(--gold)}
    .order-chat.order-rush-fresh{border-left:5px solid #2ecc71}
    .order-chat.order-rush-warning{border-left:6px solid #f39c12;background:linear-gradient(90deg,rgba(243,156,18,.08) 0%,#0d0d10 60%);box-shadow:0 0 0 1px rgba(243,156,18,.25)}
    .order-chat.order-rush-critical{border-left:6px solid #e74c3c;background:linear-gradient(90deg,rgba(231,76,60,.16) 0%,#150a0a 60%);box-shadow:0 0 0 2px rgba(231,76,60,.4),0 0 16px rgba(231,76,60,.2);animation:urgentGlow 2s infinite ease-in-out}
    @keyframes urgentGlow{0%,100%{border-color:#e74c3c}50%{border-color:#ff7675;box-shadow:0 0 0 3px rgba(255,118,117,.5),0 0 22px rgba(231,76,60,.35)}}
    .urgency-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.3px}
    .urgency-badge.urgency-fresh{background:rgba(46,204,113,.15);color:#2ecc71;border:1px solid rgba(46,204,113,.3)}
    .urgency-badge.urgency-warning{background:rgba(243,156,18,.2);color:#f39c12;border:1px solid rgba(243,156,18,.4)}
    .urgency-badge.urgency-critical{background:rgba(231,76,60,.25);color:#ff6b6b;border:1px solid #e74c3c;font-weight:900;animation:urgentBadgePulse 1s infinite alternate}
    @keyframes urgentBadgePulse{from{transform:scale(1)}to{transform:scale(1.06)}}
    .table-avatar-big{min-width:52px;height:48px;border-radius:12px;background:var(--gold);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-weight:900;padding:2px 4px;box-shadow:0 3px 8px rgba(0,0,0,.3);flex:0 0 auto}
    .table-avatar-big span{font-size:9px;opacity:.8;letter-spacing:.5px;text-transform:uppercase}
    .table-avatar-big b{font-size:17px;font-family:var(--font-display)}
    .primary-step-btn{padding:10px 16px;border-radius:10px;font-size:12.5px;font-weight:900;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .1s ease,box-shadow .15s ease}
    .primary-step-btn:active{transform:scale(.97)}
    .primary-step-btn.step-accept{background:linear-gradient(135deg,var(--gold) 0%,#f1c40f 100%);color:var(--bg);box-shadow:0 4px 14px rgba(212,175,55,.35)}
    .primary-step-btn.step-ready{background:linear-gradient(135deg,#2ecc71 0%,#27ae60 100%);color:#04170c;box-shadow:0 4px 14px rgba(46,204,113,.35)}
    .primary-step-btn.step-deliver{background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);color:#fff;box-shadow:0 4px 14px rgba(52,152,219,.35)}
    .primary-step-btn.step-pay{background:linear-gradient(135deg,#e67e22 0%,#d35400 100%);color:#fff;box-shadow:0 4px 14px rgba(230,126,34,.35)}
    
    /* ===== ULTRA LEVEL GLANCE HUD & WORKFLOW (APPLE / GOOGLE GRADE) ===== */
    .live-glance-hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
    .glance-tile{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:12px 14px;cursor:pointer;transition:all .18s ease;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
    .glance-tile:hover{transform:translateY(-2px);border-color:rgba(212,175,55,0.35);background:rgba(212,175,55,0.05)}
    .glance-tile.active{border-color:var(--gold);background:rgba(212,175,55,0.1);box-shadow:0 0 16px rgba(212,175,55,0.2)}
    .glance-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
    .glance-label{font-size:10px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--muted)}
    .glance-num{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--ink);line-height:1}
    .glance-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .glance-tile.new{border-left:4px solid #f39c12}
    .glance-tile.new.has-new{animation:glanceNewPulse 2s infinite ease-in-out;border-color:#f39c12;background:rgba(243,156,18,0.08)}
    @keyframes glanceNewPulse{0%,100%{box-shadow:0 0 0 0 rgba(243,156,18,0.4)}50%{box-shadow:0 0 0 6px rgba(243,156,18,0)}}
    .glance-tile.prep{border-left:4px solid #3498db}
    .glance-tile.ready{border-left:4px solid #2ecc71}
    .glance-tile.ready.has-ready{animation:glanceReadyPulse 2s infinite ease-in-out;border-color:#2ecc71;background:rgba(46,204,113,0.08)}
    @keyframes glanceReadyPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,0.4)}50%{box-shadow:0 0 0 6px rgba(46,204,113,0)}}
    .glance-tile.unpaid{border-left:4px solid #e74c3c}
    .glance-tile.stat{border-left:4px solid var(--gold)}
    
    /* View Mode Switcher */
    .view-mode-toggle{display:inline-flex;background:rgba(0,0,0,0.4);border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px}
    .vmode-btn{border:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:99px;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:5px}
    .vmode-btn.active{background:var(--gold);color:var(--bg);font-weight:900;box-shadow:0 2px 8px rgba(212,175,55,0.3)}
    
    /* Single-Glance 5-Stage Kanban Board & Matrix (Zero Horizontal Overflow on Desktop & Mobile) */
    .kanban-board{display:flex;flex-direction:row;gap:10px;width:100%;max-width:100%;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch;height:calc(100vh - 165px);align-items:stretch;box-sizing:border-box}
    @media (min-width:1200px){
      .kanban-board{
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:10px;
        overflow-x:hidden;
        padding-bottom:6px;
      }
      .kanban-col{
        min-width:0 !important;
        max-width:100% !important;
        width:100% !important;
      }
    }
    @media (max-width:1023px){
      .kanban-board{
        scroll-snap-type:x mandatory;
        height:auto;
        min-height:500px;
        max-height:calc(100vh - 190px);
        width:100%;
        max-width:100%;
        box-sizing:border-box;
      }
      .kanban-board-solo{
        scroll-snap-type:none;
        overflow-x:hidden;
      }
      .kanban-col{
        min-width:calc(100vw - 32px);
        max-width:calc(100vw - 32px);
        width:calc(100vw - 32px);
        scroll-snap-align:center;
        max-height:70vh;
        min-height:70vh;
        box-sizing:border-box;
      }
      .kanban-col-solo{
        min-width:100% !important;
        max-width:100% !important;
        width:100% !important;
        flex:1 1 100% !important;
      }
    }
    .kanban-col{background:rgba(18,14,10,0.45);border:1px solid rgba(255,255,255,0.08);border-radius:14px;display:flex;flex-direction:column;min-width:260px;max-width:340px;overflow:hidden;backdrop-filter:blur(10px);flex:1;box-shadow:0 8px 30px rgba(0,0,0,0.2);box-sizing:border-box}
    .kanban-card{
      word-break:break-word;
      overflow-wrap:break-word;
      box-sizing:border-box;
      max-width:100%;
    }
    .kanban-card-items{
      word-break:break-word;
      overflow-wrap:break-word;
      white-space:normal;
    }
    .kanban-col-head{position:sticky;top:0;background:rgba(26,20,15,0.96);z-index:2;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.08);border-top-left-radius:14px;border-top-right-radius:14px;display:flex;justify-content:space-between;align-items:center}
    .kanban-col-title{font-size:11.5px;font-weight:900;letter-spacing:0.5px;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:6px}
    .kanban-col-count{background:rgba(255,255,255,0.1);color:var(--ink);padding:2px 8px;border-radius:12px;font-size:11px;font-weight:800;margin-left:auto}
    .kanban-col-sum{font-size:12px;font-weight:800;color:var(--gold-light);margin-left:8px}
    .kanban-col-cards{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1}
    .kanban-col-cards::-webkit-scrollbar{width:5px}
    .kanban-col-cards::-webkit-scrollbar-thumb{background:rgba(212,175,55,0.2);border-radius:4px}
    
    .kanban-card{ 
      background:var(--card); 
      border:1px solid var(--line); 
      border-radius:12px; 
      padding:12px; 
      box-shadow:0 4px 14px rgba(0,0,0,0.2); 
      transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); 
      display:flex; 
      flex-direction:column; 
      gap:8px; 
      cursor:pointer; 
      color:var(--ink);
      position:relative;
    }
    .kanban-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.35);border-color:rgba(212,175,55,0.4)}
    /* Status-Specific Kanban Card Coloring - Light Theme (Default) */
    .kanban-card.stage-new {
      background: #fffbeb !important; /* amber-50 */
      border: 1.5px solid #f59e0b !important;
      border-left: 5px solid #f59e0b !important;
      color: #78350f !important;
    }
    .kanban-card.stage-preparing {
      background: #eff6ff !important; /* blue-50 */
      border: 1.5px solid #3b82f6 !important;
      border-left: 5px solid #3b82f6 !important;
      color: #1e3a8a !important;
    }
    .kanban-card.stage-ready {
      background: #f0fdf4 !important; /* green-50 */
      border: 1.5px solid #10b981 !important;
      border-left: 5px solid #10b981 !important;
      color: #064e3b !important;
    }
    .kanban-card.stage-pendingpayment,
    .kanban-card.stage-unpaid,
    .kanban-card.stage-delivered {
      background: #faf5ff !important; /* purple-50 */
      border: 1.5px solid #8b5cf6 !important;
      border-left: 5px solid #8b5cf6 !important;
      color: #581c87 !important;
    }
    .kanban-card.stage-completed {
      background: #f8fafc !important; /* slate-50 */
      border: 1.5px solid #94a3b8 !important;
      border-left: 5px solid #64748b !important;
      color: #334155 !important;
      opacity: 0.9;
    }

    /* Status-Specific Kanban Card Coloring - Dark Theme */
    .admin-dark-theme .kanban-card.stage-new,
    body.admin-dark-mode .kanban-card.stage-new {
      background: #2d1d07 !important; /* dark amber */
      border: 1.5px solid #d97706 !important;
      border-left: 5px solid #fbbf24 !important;
      color: #fef3c7 !important;
    }
    .admin-dark-theme .kanban-card.stage-preparing,
    body.admin-dark-mode .kanban-card.stage-preparing {
      background: #091d3e !important; /* dark blue */
      border: 1.5px solid #2563eb !important;
      border-left: 5px solid #60a5fa !important;
      color: #dbeafe !important;
    }
    .admin-dark-theme .kanban-card.stage-ready,
    body.admin-dark-mode .kanban-card.stage-ready {
      background: #052e16 !important; /* dark green */
      border: 1.5px solid #059669 !important;
      border-left: 5px solid #34d399 !important;
      color: #d1fae5 !important;
    }
    .admin-dark-theme .kanban-card.stage-pendingpayment,
    body.admin-dark-mode .kanban-card.stage-pendingpayment,
    .admin-dark-theme .kanban-card.stage-unpaid,
    body.admin-dark-mode .kanban-card.stage-unpaid,
    .admin-dark-theme .kanban-card.stage-delivered,
    body.admin-dark-mode .kanban-card.stage-delivered {
      background: #2e1065 !important; /* dark purple */
      border: 1.5px solid #7c3aed !important;
      border-left: 5px solid #a78bfa !important;
      color: #f3e8ff !important;
    }
    .admin-dark-theme .kanban-card.stage-completed,
    body.admin-dark-mode .kanban-card.stage-completed {
      background: #1e293b !important; /* dark slate */
      border: 1.5px solid #475569 !important;
      border-left: 5px solid #64748b !important;
      color: #e2e8f0 !important;
    }
    
    .kanban-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
    .kanban-tbl-pill{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#ffffff;font-weight:800;padding:2px 7px;border-radius:5px;font-size:11px;letter-spacing:0.5px}
    .kanban-paid-pill{background:rgba(34,197,94,0.18);color:#4ade80;border:1px solid rgba(34,197,94,0.35);padding:2px 6px;border-radius:4px;font-size:9.5px;font-weight:900;letter-spacing:0.4px}
    .kanban-prepaid-pending-pill{background:rgba(245,158,11,0.18);color:#fbbf24;border:1px solid rgba(245,158,11,0.35);padding:2px 6px;border-radius:4px;font-size:9.5px;font-weight:900;letter-spacing:0.4px}
    
    .kanban-void-btn{
      background:transparent;
      border:1px solid rgba(239,68,68,0.35);
      color:#f87171;
      border-radius:5px;
      font-size:10px;
      font-weight:800;
      padding:2px 6px;
      cursor:pointer;
      transition:all .15s ease;
      margin-left:auto;
    }
    .kanban-void-btn:hover{background:rgba(239,68,68,0.15);border-color:#ef4444;color:#fff}

    .kanban-card-cust{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:var(--ink)}
    
    .kanban-card-items{ 
      font-size:12px; 
      color:var(--ink); 
      line-height:1.5; 
      background:var(--card2); 
      border-radius:8px; 
      padding:8px 10px; 
      border:1px solid rgba(255,255,255,0.05);
      max-height:85px; 
      overflow-y:auto; 
    }
    
    .kanban-card-foot{display:flex;justify-content:space-between;align-items:center;gap:6px}
    .kanban-card-price{font-weight:800;font-size:14.5px;color:var(--gold-light)}
    
    .kanban-action-btn{ 
      border:1px solid var(--line); 
      background:var(--card2);
      color:var(--ink); 
      border-radius:8px; 
      padding:8px 10px; 
      font-size:12px; 
      font-weight:700; 
      cursor:pointer; 
      display:inline-flex; 
      align-items:center; 
      justify-content:center; 
      gap:5px; 
      transition:all 0.15s; 
      flex:1; 
    }
    .kanban-action-btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(212,175,55,0.4)}
    .kanban-action-btn:active{transform:scale(0.98)}
    
    .kanban-action-accept{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;font-weight:900}
    .kanban-action-accept:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px rgba(37,99,235,0.4)}
    .kanban-action-ready{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-color:transparent;font-weight:900}
    .kanban-action-ready:hover{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px rgba(34,197,94,0.4)}
    .kanban-action-deliver{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-color:transparent;font-weight:900}
    .kanban-action-deliver:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 4px 12px rgba(139,92,246,0.4)}
    .kanban-action-paid{background:rgba(34,197,94,0.15);color:#4ade80;border:1px solid rgba(34,197,94,0.35)}
    
    /* Mobile Single-Glance Stage Bar */
    .mobile-glance-bar{display:none;gap:4px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;-webkit-overflow-scrolling:touch}
    @media (max-width:1023px){
      .mobile-glance-bar{display:flex}
    }
    .mglance-btn{border:1px solid var(--line);background:var(--card2);color:var(--muted);border-radius:99px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease}
    .mglance-btn.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:900;box-shadow:0 2px 8px rgba(212,175,55,0.25)}
    .mglance-btn .mcount{background:rgba(0,0,0,0.25);color:inherit;padding:1px 5px;border-radius:99px;font-size:9.5px}
    .mglance-btn.active .mcount{background:rgba(0,0,0,0.3);color:#fff}

    /* Bill Item Adjustment Modal Controls */
    .adjust-target-chip{background:var(--card2);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:11px;cursor:pointer;transition:all .15s ease}
    .adjust-target-chip:hover,.adjust-target-chip.active{background:rgba(212,175,55,0.12);color:var(--gold-light);border-color:var(--gold)}
    .portion-quick-pill{border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:11.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
    .portion-quick-pill:hover,.portion-quick-pill.active{background:var(--gold);color:var(--bg);border-color:var(--gold);font-weight:900}
    .adjust-reason-chip{background:rgba(255,255,255,0.04);color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:4px 9px;font-size:10.5px;cursor:pointer;transition:all .12s ease}
    .adjust-reason-chip:hover{background:rgba(212,175,55,0.1);color:var(--gold-light);border-color:var(--gold)}

    /* Settle Quick Buttons in Payments */
    .pay-quick-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
    .pay-quick-btn{padding:5px 10px;border-radius:7px;font-size:11px;font-weight:800;border:0;cursor:pointer;transition:transform .1s ease}
    .pay-quick-btn:active{transform:scale(0.96)}
    .pay-quick-upi{background:rgba(212,175,55,0.18);color:var(--gold-light);border:1px solid rgba(212,175,55,0.4)}
    .pay-quick-cash{background:rgba(46,204,113,0.18);color:#2ecc71;border:1px solid rgba(46,204,113,0.4)}
    .pay-quick-card{background:rgba(52,152,219,0.18);color:#3498db;border:1px solid rgba(52,152,219,0.4)}
    .pay-quick-btn:active{transform:scale(0.96)}
    .pay-quick-upi{background:rgba(212,175,55,0.18);color:var(--gold-light);border:1px solid rgba(212,175,55,0.4)}
    .pay-quick-cash{background:rgba(46,204,113,0.18);color:#2ecc71;border:1px solid rgba(46,204,113,0.4)}
    .pay-quick-card{background:rgba(52,152,219,0.18);color:#3498db;border:1px solid rgba(52,152,219,0.4)}
    
    /* ===== PHASE 5: CASHIER SPLIT BILLING, Z-REPORT & ADMIN COMMAND CENTER ===== */
    .split-bill-modal-card {
      background: color-mix(in srgb, var(--card) 88%, transparent) !important;
      backdrop-filter: blur(32px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
      border: 1.5px solid var(--line) !important;
      border-radius: 26px !important;
      box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    }
    
    .eod-modal {
      max-width: 720px;
      width: 95%;
      max-height: 90vh;
      background: color-mix(in srgb, var(--card) 88%, transparent) !important;
      border: 1.5px solid var(--line) !important;
      border-radius: 26px !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18) !important;
      backdrop-filter: blur(32px) saturate(200%) !important;
      -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    }
    .eod-header {
      padding: 20px 26px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: transparent;
    }
    .eod-body {
      padding: 22px 26px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .eod-kpis {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 12px;
    }
    .eod-kpi {
      background: color-mix(in srgb, var(--card2) 65%, transparent) !important;
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      padding: 14px 16px;
      text-align: center;
      backdrop-filter: blur(14px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.12);
      transition: transform 0.18s ease;
    }
    .eod-kpi:hover {
      transform: translateY(-2px);
      border-color: var(--gold);
    }
    .eod-kpi small {
      display: block;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 5px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    .eod-kpi strong,
    .eod-kpi b.val {
      font-size: 20px;
      color: var(--ink);
      font-family: var(--font-display);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .eod-breakdown-card {
      background: color-mix(in srgb, var(--card2) 65%, transparent) !important;
      border: 1px solid var(--line) !important;
      border-radius: 18px !important;
      padding: 16px 20px;
      backdrop-filter: blur(14px);
    }
    .eod-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .eod-row.total {
      border-top: 2px solid var(--gold);
      border-bottom: 0;
      font-weight: 900;
      font-size: 16px;
      color: var(--gold-light);
      padding-top: 12px;
      margin-top: 8px;
    }

    /* Admin Glass Cards & Controls */
    .saas-admin .admin-card,
    .saas-admin .bento-card,
    .saas-admin .saas-biz-card {
      background: color-mix(in srgb, var(--card) 85%, transparent) !important;
      backdrop-filter: blur(24px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
      border: 1px solid var(--line) !important;
      border-radius: 22px !important;
      box-shadow: 0 10px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.14) !important;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .saas-admin .admin-card:hover,
    .saas-admin .bento-card:hover,
    .saas-admin .saas-biz-card:hover {
      border-color: var(--gold) !important;
      box-shadow: 0 14px 40px rgba(212,175,55,0.15) !important;
    }

    .admin-chip-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(212,175,55,.12);color:var(--gold-light);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12px;font-weight:700}
    .admin-chip-tag button{border:0;background:transparent;color:#e74c3c;cursor:pointer;font-weight:900;font-size:14px;padding:0 2px;line-height:1}
    .admin-chip-tag button:hover{color:#ff7675}
    .suggestion-chip{background:var(--card2);color:var(--muted);border:1px dashed var(--line);border-radius:99px;padding:5px 11px;font-size:11px;cursor:pointer;transition:all .15s ease}
    .suggestion-chip:hover{color:var(--gold-light);border-color:var(--gold);background:rgba(212,175,55,.08)}
    .custom-chip-btn.selected{background:var(--gold)!important;color:var(--bg)!important;border-color:var(--gold)!important;font-weight:900}
    body.kitchen-mode .admin-tab:not([data-tab="orders"]),
    body.kitchen-mode .admin-panel:not(#admin-orders),
    body.kitchen-mode .order-side,
    body.kitchen-mode .chat-help-card,
    body.kitchen-mode .waiter-calls-card,
    body.kitchen-mode .kanban-col.unpaid,
    body.kitchen-mode .kanban-col.done,
    body.kitchen-mode .mglance-btn[onclick*="unpaid"],
    body.kitchen-mode .mglance-btn[onclick*="done"]{display:none!important}
    body.kitchen-mode .kanban-board{flex-direction:row!important;width:100%;height:calc(100vh - 120px);padding:0}
    body.kitchen-mode .kanban-col{flex:1;max-width:none}
    body.kitchen-mode .order-card, body.kitchen-mode .kanban-card{border-width:2px;padding:14px;background:var(--card)}
    body.kitchen-mode .kanban-card-title{font-size:16px!important;font-weight:900}
    body.kitchen-mode .kanban-card-items{font-size:15px!important;line-height:1.6;font-weight:700;color:var(--ink)}
    body.kitchen-mode .kanban-card-items b{color:var(--gold-light);font-size:16px}
    body.kitchen-mode .order-items{font-size:16px;font-weight:700;line-height:1.6}
    body.kitchen-mode .order-actions{display:flex!important;gap:8px}
    body.kitchen-mode .kitchen-ready-btn{display:inline-flex!important;flex:1;padding:14px;font-size:15px;font-weight:900;background:var(--green);color:#04170c;border:0;border-radius:12px}
    .waiter-calls-card.has-pending{border:1px solid var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.2)}
    .payment-order-line.claims-paid{background:rgba(212,175,55,.08);border-radius:10px}
    @keyframes pulseAlert{0%,100%{box-shadow:0 0 0 rgba(226,86,74,0)}50%{box-shadow:0 0 0 6px rgba(226,86,74,.12)}}
    .chat-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .chat-live-dot{font-size:10px;color:var(--green);font-weight:900;white-space:nowrap}
    .chat-messages{min-height:200px;max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 2px}
    .chat-bubble{max-width:80%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.4}
    .chat-bubble.customer{align-self:flex-end;background:var(--gold);color:var(--bg);border-bottom-right-radius:4px}
    .chat-bubble.staff{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
    .chat-bubble small{display:block;margin-top:4px;font-size:9.5px;opacity:.7}
    .chat-quick-replies{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
    .chat-compose{display:flex;flex-direction:column;gap:6px;margin-top:6px}
    .chat-compose textarea{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--card);color:var(--ink);resize:vertical}
    @media(max-width:800px){.orders-toolbar{grid-template-columns:1fr 1fr}.orders-toolbar .field:first-child{grid-column:1/-1}.orders-toolbar button{grid-column:1/-1}.order-board{grid-template-columns:1fr}.order-side{position:static}.order-list{max-height:none}}
    /* Mobile Rush & 1-Thumb POS Layout */
    .mobile-tools-toggle{display:none}
    .order-actions-mobile-row{display:flex;gap:6px;width:100%;max-width:100%;flex-wrap:wrap;padding-top:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.05);align-items:center;box-sizing:border-box}
    .order-tool-chip{background:#111623;border:1px solid rgba(255,255,255,0.08);color:#e2e8f0;border-radius:6px;padding:7px 11px;font-size:11.5px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:0 0 auto;transition:background 0.2s}
    .order-tool-chip:hover{background:#1a2130}
    .order-tool-chip:active{background:rgba(212,175,55,0.2)}
    @media(max-width:768px){
      .mobile-tools-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;background:var(--card2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;margin-bottom:10px;width:100%;justify-content:center}
      .orders-toolbar.mobile-collapsed{display:none}
      .orders-toolbar{grid-template-columns:1fr 1fr;gap:6px;padding:12px;background:rgba(0,0,0,0.25);border-radius:14px;margin-bottom:14px;border:1px solid rgba(255,255,255,0.07)}
      .live-glance-hud{grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:12px}
      .glance-tile{padding:10px 12px}
      .glance-num{font-size:20px}
      .rush-filter-tabs{padding-bottom:6px;margin-bottom:10px}
      .rush-tab-btn{padding:8px 12px;font-size:11px}
      
      .order-chat{padding:14px;border-radius:14px;max-width:100%;box-sizing:border-box;overflow:hidden}
      .order-chat-head{flex-wrap:wrap;gap:8px}
      .order-person{max-width:100%;min-width:0}
      .order-items{max-width:100%;box-sizing:border-box}
      .order-item-line{max-width:100%;word-break:break-word;overflow-wrap:break-word}
      .order-actions-mobile-row .status-btns{margin-left:0;width:100%;display:flex;flex-wrap:wrap;gap:6px}
      .order-actions-mobile-row .status-btns .status-btn{flex:1;min-width:70px;text-align:center}
      .table-avatar-big{min-width:48px;height:44px}
      .table-avatar-big b{font-size:16px}
      
      .primary-step-btn{width:100%;min-height:46px;font-size:13px;font-weight:900;letter-spacing:0.3px;justify-content:center;border-radius:12px}
      .pay-quick-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
      .pay-quick-btn{min-height:44px;font-size:12px}
    }
    /* Desktop / Tablet friendly */
    @media(min-width:900px){
      .admin-shell{max-width:1200px;padding:28px 24px 60px}
      .admin-head h2{font-size:28px}
      .status-btn{padding:8px 12px;font-size:11.5px;min-width:100px}
      .order-chat{padding:18px}
      .order-actions{gap:10px}
      .dash-kpis{grid-template-columns:repeat(4,1fr)}
      .menu-root{max-width:980px}
      .menu-card{padding:14px}
      .card-media{width:100px;height:100px;flex-basis:100px}
    }
    @media(min-width:1100px){
      .admin-shell{max-width:1280px}
      .order-board{grid-template-columns:1fr 260px}
    }
  /* Thermal receipt print — 58mm & 80mm */
    #thermalReceipt{display:none}
    .thermal-receipt-doc {
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      font-family: 'Courier New', Courier, monospace;
      font-size: 11.5px;
      line-height: 1.35;
      color: #000;
      background: #fff;
      padding: 6px 8px;
      box-sizing: border-box;
    }
    .thermal-receipt-doc .rc-center { text-align: center; }
    .thermal-receipt-doc .rc-brand { font-size: 15px; font-weight: 800; text-transform: uppercase; margin-bottom: 2px; letter-spacing: 0.5px; color: #000; }
    .thermal-receipt-doc .rc-legal { font-size: 11px; font-weight: 600; margin-bottom: 2px; color: #111; }
    .thermal-receipt-doc .rc-address { font-size: 10.5px; line-height: 1.25; margin-bottom: 2px; color: #111; }
    .thermal-receipt-doc .rc-contact { font-size: 10.5px; margin-bottom: 2px; color: #111; }
    .thermal-receipt-doc .rc-gstin { font-size: 11px; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.5px; color: #000; }
    .thermal-receipt-doc .rc-meta-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; color: #000; }
    .thermal-receipt-doc .rc-dash { border-bottom: 1px dashed #000; margin: 5px 0; height: 0; }
    .thermal-receipt-doc .rc-table { width: 100%; border-collapse: collapse; font-size: 11px; color: #000; }
    .thermal-receipt-doc .rc-table th { padding: 3px 0; font-weight: 700; text-align: right; border-bottom: 1px dashed #000; color: #000; }
    .thermal-receipt-doc .rc-table th:first-child { text-align: left; }
    .thermal-receipt-doc .rc-table td { padding: 3px 0; vertical-align: top; text-align: right; color: #000; }
    .thermal-receipt-doc .rc-table td:first-child { text-align: left; }
    .thermal-receipt-doc .rc-item-note { font-size: 9.5px; color: #333; padding-left: 6px; font-style: italic; display: block; }
    .thermal-receipt-doc .rc-summary-row { display: flex; justify-content: space-between; font-size: 11px; padding: 1.5px 0; color: #000; }
    .thermal-receipt-doc .rc-grand-total { font-size: 13.5px; font-weight: 800; border-top: 1px dashed #000; border-bottom: 1px dashed #000; padding: 4px 0; margin: 4px 0; color: #000; }
    .thermal-receipt-doc .rc-footer { text-align: center; margin-top: 8px; font-size: 11px; font-weight: 700; color: #000; }
    @media print {
      html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
      }
      /* CRITICAL: Collapse all non-receipt elements to 0 height to prevent multi-page / 19-page overflow */
      body > *:not(#thermalReceipt):not(#dynamicThermalPrintStyle) {
        display: none !important;
      }
      #thermalReceipt, #thermalReceipt * {
        visibility: visible !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      #thermalReceipt {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 80mm !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 2mm 1.5mm !important;
        background: #fff !important;
        color: #000 !important;
        font-family: 'Courier New', Courier, monospace, -apple-system, sans-serif !important;
        font-size: 11px;
        line-height: 1.25;
        box-shadow: none !important;
        border: none !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
      }
      /* Ensure individual rows, items, summaries, QR codes & cut lines never get sliced in half horizontally */
      #thermalReceipt table,
      #thermalReceipt tr,
      #thermalReceipt th,
      #thermalReceipt td,
      #thermalReceipt .rc-table tr,
      #thermalReceipt .rc-summary-row,
      #thermalReceipt .rc-grand-total,
      #thermalReceipt .rc-footer,
      #thermalReceipt .receipt-cut-line,
      #thermalReceipt .thermal-receipt-doc > div,
      #thermalReceipt pre {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
      }
      /* Force QR Code and images to print accurately */
      #thermalReceipt img {
        display: block !important;
        max-width: 130px !important;
        max-height: 130px !important;
        margin: 4px auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      @page {
        margin: 0mm !important;
        size: auto;
      }
    }
    /* MODULE C: HYPER-PRECISE ADMIN SETTINGS & OPTIMISTIC TOGGLES */
    .ops-section-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 18px;
      margin-bottom: 20px;
      box-shadow: var(--shadow);
    }
    .ops-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }
    .ops-header h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ops-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 12px;
    }
    .ops-card {
      background: var(--card2);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 13px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      transition: border-color 0.2s, background 0.2s;
    }
    .ops-card:hover {
      border-color: var(--gold);
    }
    .ops-card.active-pause {
      border-color: rgba(239, 68, 68, 0.4);
      background: rgba(239, 68, 68, 0.06);
    }
    .ops-info {
      flex: 1;
      min-width: 0;
    }
    .ops-info-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px;
    }
    .ops-info-sub {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.35;
    }
    .ops-switch-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 5px;
      flex-shrink: 0;
    }
    .ops-switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
      cursor: pointer;
      margin: 0;
    }
    .ops-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .ops-slider {
      position: absolute;
      inset: 0;
      background-color: #27272a;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .ops-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background-color: #ffffff;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }
    .ops-switch input:checked + .ops-slider {
      background-color: #10b981;
      border-color: #10b981;
    }
    .ops-switch input:checked + .ops-slider.danger-slider {
      background-color: #ef4444;
      border-color: #ef4444;
    }
    .ops-switch input:checked + .ops-slider:before {
      transform: translateX(22px);
    }
    .ops-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .ops-badge.on {
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, 0.3);
    }
    .ops-badge.off {
      background: rgba(255, 255, 255, 0.06);
      color: var(--muted);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .ops-badge.danger {
      background: rgba(239, 68, 68, 0.18);
      color: #f87171;
      border: 1px solid rgba(239, 68, 68, 0.35);
    }
    .ops-sync-pill {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .ops-sync-pill.synced {
      background: rgba(16, 185, 129, 0.15);
      color: #10b981;
    }
    .ops-sync-pill.reverted {
      background: rgba(239, 68, 68, 0.18);
      color: #f87171;
      animation: opsShake 0.4s ease;
    }
    @keyframes opsShake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-4px); }
      40%, 80% { transform: translateX(4px); }
    }
    /* ===== SLEEK ULTRA COMPACT QUICK OPS BAR (UNIFIED RESPONSIVE TOOLBAR) ===== */
    .quick-ops-bar {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 8px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      margin-bottom: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      width: 100%;
      box-sizing: border-box;
    }
    .quick-ops-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      white-space: nowrap;
      line-height: 1.3;
      border: 1px solid transparent;
      text-decoration: none;
      font-family: inherit;
    }
    .quick-ops-pill:active {
      transform: scale(0.97);
    }
    .quick-ops-waiter-pad {
      background: #d49b38 !important;
      color: #000000 !important;
      font-weight: 800 !important;
      border: 1px solid #b87c1e !important;
      box-shadow: 0 1px 3px rgba(212,155,56,0.3) !important;
    }
    .quick-ops-push {
      background: rgba(26, 115, 232, 0.08) !important;
      color: #1a73e8 !important;
      border: 1px solid rgba(26, 115, 232, 0.3) !important;
      font-weight: 700 !important;
    }
    .admin-overlay.dark-mode .quick-ops-push,
    body.dark-mode .quick-ops-push {
      background: rgba(26, 115, 232, 0.15) !important;
      color: #8ab4f8 !important;
      border-color: #8ab4f8 !important;
    }
    .quick-ops-sub-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--card2, rgba(255,255,255,0.04));
      border: 1px solid var(--line);
      color: var(--ink);
      font-size: 11.5px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
      white-space: nowrap;
    }
    .quick-ops-sub-btn:hover {
      border-color: var(--gold, #d97706);
    }
    @media (max-width: 640px) {
      .quick-ops-bar {
        gap: 5px 6px;
        padding: 6px 8px;
      }
      .quick-ops-pill {
        font-size: 11px;
        padding: 4px 8px;
      }
      .quick-ops-sub-btn {
        font-size: 10.5px;
        padding: 4px 7px;
      }
    }
    .quick-ops-sub-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .admin-overlay.dark-mode .quick-ops-sub-btn,
    body.dark-mode .quick-ops-sub-btn {
      background: var(--card2);
      border-color: var(--line);
      color: var(--ink);
    }
    .quick-ops-printer-select {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      cursor: pointer;
      outline: none;
      font-family: inherit;
      height: 26px;
    }
    .admin-overlay.dark-mode .quick-ops-printer-select,
    body.dark-mode .quick-ops-printer-select {
      background: var(--card2);
      border-color: var(--line);
      color: var(--ink);
    }

    /* ===== SLEEK COMPACT WAITER CALLING CARD (LOW HEIGHT, FITS WELL) ===== */
    .waiter-calls-compact-card {
      background: rgba(212, 175, 55, 0.08);
      border: 1.5px solid var(--gold);
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(212,175,55,0.12);
      animation: slideInDown 0.2s ease-out;
    }
    .wcr-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(212,175,55,0.2);
    }
    .wcr-bell-ring {
      display: inline-block;
      animation: wcrBellSwing 1s infinite ease-in-out;
    }
    @keyframes wcrBellSwing {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(15deg); }
      75% { transform: rotate(-15deg); }
    }
    .wcr-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .waiter-call-compact-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 5px 10px;
      gap: 8px;
      flex-wrap: wrap;
    }
    .wcr-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      flex: 1;
    }
    .wcr-table-badge {
      font-size: 11.5px;
      font-weight: 800;
      color: #100c02;
      background: var(--gold);
      padding: 2px 8px;
      border-radius: 4px;
    }
    .wcr-reason-badge {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink);
      background: rgba(255,255,255,0.06);
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid var(--line);
    }
    .wcr-time {
      font-size: 10px;
      color: var(--muted);
    }
    .wcr-attend-btn {
      background: #22c55e;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .wcr-attend-btn:hover {
      background: #16a34a;
      transform: scale(1.02);
    }
    .wcr-attend-btn:active {
      transform: scale(0.98);
    }
    .quick-ops-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--ink);
    }
    .customer-ops-banner {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.35);
      color: #fca5a5;
      padding: 10px 16px;
      margin: 10px 16px 0;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.45;
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    .customer-ops-banner.paused {
      border-color: rgba(245, 158, 11, 0.4);
      background: rgba(245, 158, 11, 0.12);
      color: #fde68a;
    }
    .rbac-role-pill {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 999px;
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .rbac-role-pill.super { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
    .rbac-role-pill.manager { background: rgba(212, 175, 55, 0.2); color: #e8c968; border: 1px solid rgba(212, 175, 55, 0.4); }
    .rbac-role-pill.staff { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
    .rbac-role-pill.kitchen { background: rgba(6, 182, 212, 0.2); color: #67e8f9; border: 1px solid rgba(6, 182, 212, 0.4); }
    .rbac-role-pill.customer { background: rgba(255, 255, 255, 0.08); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.12); }

    /* Staff Hands-Free Voice Alert & Independent Sound Bar */
    .staff-voice-soundbar-card {
      background: var(--card);
      border: 1.5px solid rgba(212, 175, 55, 0.35);
      border-radius: 14px;
      padding: 12px 16px;
      margin-bottom: 14px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 2;
    }
    .staff-voice-soundbar-card .tts-sound-range {
      accent-color: var(--gold, #d4af37);
      width: 100%;
      height: 7px;
      border-radius: 4px;
      cursor: pointer;
      background: var(--line);
      outline: none;
    }
    .staff-voice-soundbar-card .tts-sound-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--gold, #d4af37);
      box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
      cursor: pointer;
      border: 2px solid var(--bg);
    }
    .staff-voice-soundbar-card select {
      background: var(--card2);
      color: var(--ink);
      border: 1px solid rgba(212, 175, 55, 0.3);
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      outline: none;
    }
    .staff-voice-soundbar-card select option {
      background: var(--card);
      color: var(--ink);
    }

    /* ===== THEME VARIABLES - STRICTLY APPLIED TO HOME PAGE ONLY ===== */
    /* Primary Theme Color: #E8A07C (Warm Terracotta / Apricot Peach) replacing dark theme on full home page */
    #saasLandingPage,
    .vm9-landing,
    #saasGetStartedModal,
    #saasClientLoginModal {
      /* Primary Theme Color & Harmonious Scale */
      --theme-e8a07c: #fec5bb;
      --theme-e8a07c-light: #fcd5ce;
      --theme-e8a07c-soft: #ffe5d9;
      --theme-e8a07c-dark: #fec89a;
      --theme-e8a07c-deep: #ffd7ba;

      /* Palette Tokens */
      --powder-blush: #fec5bb;
      --almond-silk: #fcd5ce;
      --seashell: #fae1dd;
      --powder-petal: #f8edeb;
      --peach-glow: #e8e8e4;
      --alabaster: #d8e2dc;
      --linen: #ece4db;

      --rgb-powder-blush: 254, 197, 187;
      --rgb-peach-glow: 232, 232, 228;

      /* Palette Gradients */
      --gradient-coolors: linear-gradient(135deg, #fec5bb 0%, #fae1dd 50%, #fec89a 100%);
      --gradient-coolors-h: linear-gradient(90deg, #fec5bb 0%, #fae1dd 50%, #fec89a 100%);
      --gradient-coolors-soft: linear-gradient(135deg, rgba(254, 197, 187, 0.4) 0%, rgba(250, 225, 221, 0.3) 50%, rgba(254, 200, 154, 0.4) 100%);
      --gradient-coolors-border: rgba(254, 197, 187, 0.5);
      --gradient-peach-powder: linear-gradient(135deg, #fcd5ce 0%, #fec5bb 100%);

      /* Scoped Theme Tokens replacing Dark Theme with #fec5bb on Home Page */
      --bg: #f8edeb;
      --card: #ffffff;
      --card2: #fae1dd;
      --ink: #3a2c26;          /* Deep warm espresso for WCAG AA readability */
      --muted: #6b5851;        /* Soft readable warm brown */
      --muted2: #8c7870;
      --line: rgba(254, 197, 187, 0.5); /* Warm terracotta border */
      --gold: #d88e7b;         /* Deep rich terracotta accent */
      --gold-light: #fec89a;   /* Rich warm tone */
      --gold-deep: #ca7660;    /* High-contrast brand accent */
    }

    /* ===== SAAS MARKETING SHOWCASE HOME PAGE (THEMED WITH #E8A07C) ===== */
    .vm9-landing {
      min-height: 100vh;
      background: linear-gradient(135deg, #fec5bb 0%, #fcd5ce 20%, #fae1dd 40%, #f8edeb 60%, #e8e8e4 80%, #d8e2dc 100%);
      color: var(--ink);
      font-family: var(--font-body);
      position: relative;
      overflow-x: hidden;
      display: none;
    }
    .vm9-header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(248, 237, 235, 0.85); /* #f8edeb with opacity */
      border-bottom: 1px solid rgba(254, 197, 187, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px clamp(16px, 4vw, 48px);
      gap: 16px;
      box-shadow: 0 4px 20px rgba(58, 44, 38, 0.05);
    }
    .vm9-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
    }
    .vm9-logo-text {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #3a2c26;
    }
    .vm9-logo-text span {
      color: #ca7660;
    }
    .vm9-badge {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(202, 118, 96, 0.3);
      color: #ca7660;
    }
    .vm9-nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .vm9-nav-links a {
      color: #6b5851;
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 700;
      transition: color .2s;
    }
    .vm9-nav-links a:hover {
      color: #ca7660;
    }
    .vm9-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .vm9-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid transparent;
      transition: all .2s;
      cursor: pointer;
      white-space: nowrap;
      font-family: var(--font-acme);
    }
    .vm9-btn-ghost {
      background: rgba(255, 255, 255, 0.65);
      border-color: rgba(202, 118, 96, 0.3);
      color: #3a2c26;
    }
    .vm9-btn-ghost:hover {
      background: #ffffff;
      border-color: #ca7660;
      color: #ca7660;
    }
    .vm9-btn-primary {
      background: linear-gradient(135deg, #d88e7b 0%, #ca7660 100%);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: 0 4px 18px rgba(202, 118, 96, 0.35);
      font-weight: 800;
    }
    .vm9-btn-primary:hover {
      background: linear-gradient(135deg, #ca7660 0%, #b8604a 100%);
      box-shadow: 0 6px 24px rgba(202, 118, 96, 0.45);
      transform: translateY(-1px);
    }
    .vm9-btn-sm {
      padding: 8px 14px;
      font-size: 11px;
    }
    /* Hero */
    .vm9-hero-container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 48px 20px 32px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 40px;
      align-items: center;
    }
    .vm9-hero-content {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .vm9-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #782c0b;
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.25);
      padding: 6px 14px;
      border-radius: 999px;
      width: fit-content;
      box-shadow: 0 4px 16px rgba(148, 68, 32, 0.12);
      font-family: var(--font-acme);
    }
    .vm9-hero-title {
      font-family: var(--font-acme);
      font-size: clamp(34px, 4.5vw, 54px);
      line-height: 1.12;
      margin: 0;
      color: #261108;
      letter-spacing: -0.01em;
    }
    .vm9-hero-title em {
      font-style: normal;
      background: linear-gradient(135deg, #782c0b 0%, #a2461b 50%, #c45d2d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: var(--font-acme);
    }
    .vm9-hero-desc {
      font-size: 15.5px;
      line-height: 1.65;
      color: #4a2112;
      margin: 0;
      max-width: 560px;
    }
    .vm9-hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }
    /* PURE BORDERLESS 3D MODEL HERO CONTAINER */
    .vm9-hero-stage-pure {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
    }
    .vm9-pure-viewer-wrap {
      width: 100%;
      height: 420px;
      position: relative;
      background: transparent;
      border: none;
      outline: none;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vm9-pure-viewer-wrap model-viewer {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
      outline: none;
      box-shadow: none;
      --poster-color: transparent;
    }
    /* Modern 3D Model Loading Status */
    .vm9-model-loader {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 10;
      display: inline-flex;
      flex-direction: column;
      gap: 6px;
      padding: 9px 15px;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(148, 68, 32, 0.3);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(120, 52, 22, 0.14);
      transition: opacity 0.3s ease, transform 0.3s ease;
      min-width: 145px;
      pointer-events: none;
    }
    .vm9-model-loader.hidden {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
    }
    .vm9-loader-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .vm9-loader-left {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .vm9-loader-spinner {
      width: 14px;
      height: 14px;
      border: 2px solid rgba(148, 68, 32, 0.25);
      border-top-color: #ca7660;
      border-radius: 50%;
      animation: vm9Spin 0.75s linear infinite;
    }
    @keyframes vm9Spin {
      to { transform: rotate(360deg); }
    }
    .vm9-loader-title {
      font-size: 11px;
      font-weight: 700;
      color: #782c0b;
      letter-spacing: 0.02em;
    }
    .vm9-loader-pct {
      font-size: 11px;
      font-weight: 800;
      color: #261108;
      font-variant-numeric: tabular-nums;
    }
    .vm9-loader-track {
      width: 100%;
      height: 3px;
      background: rgba(148, 68, 32, 0.15);
      border-radius: 999px;
      overflow: hidden;
    }
    .vm9-loader-fill {
      height: 100%;
      width: 15%;
      background: linear-gradient(90deg, #ca7660, #fec5bb);
      border-radius: 999px;
      transition: width 0.15s ease-out;
    }
    .vm9-stage-controls {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 8px 4px 4px;
      max-width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }
    .vm9-model-pill {
      border: 1px solid rgba(148, 68, 32, 0.24);
      background: rgba(255, 255, 255, 0.65);
      color: #4a2112;
      font-size: 11px;
      font-weight: 700;
      padding: 7px 14px;
      border-radius: 999px;
      white-space: nowrap;
      transition: all .2s;
      cursor: pointer;
    }
    .vm9-model-pill.active, .vm9-model-pill:hover {
      background: #ffffff;
      border-color: #ca7660;
      color: #ca7660;
      box-shadow: 0 4px 14px rgba(150, 59, 18, 0.18);
    }
    /* Hero Side-Below Paneer Tikka Showcase — Completely BORDERLESS & UNBOXED (No cards, no boxes, no borders) */
    .vm9-hero-substage {
      width: 100%;
      max-width: 440px;
      margin-top: 8px;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }
    .vm9-substage-top {
      display: none !important;
    }
    .vm9-substage-viewer-wrap {
      width: 100%;
      height: 190px;
      position: relative;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vm9-substage-viewer-wrap model-viewer {
      width: 100%;
      height: 100%;
      background: transparent !important;
      outline: none;
      --poster-color: transparent;
      border: none !important;
      box-shadow: none !important;
    }
    .vm9-model-loader-sub {
      top: 6px;
      right: 6px;
      padding: 4px 8px;
      min-width: 110px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(148, 68, 32, 0.25);
    }
    .vm9-substage-caption {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 11.5px;
      color: #4a2112;
      flex-wrap: wrap;
      text-align: center;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
    }
    .vm9-substage-btn {
      background: transparent;
      border: none;
      color: #ca7660;
      font-size: 11.5px;
      font-weight: 700;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .vm9-substage-btn:hover {
      color: #782c0b;
    }
    /* Restaurant Hero Interactive Dish Chips - Hidden per request */
    .hero-chips {
      display: none !important;
    }
    .hero-chip-pill {
      border: 1px solid rgba(148, 68, 32, 0.2);
      background: rgba(255, 255, 255, 0.65);
      color: #4a2112;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all .2s;
      cursor: pointer;
    }
    .hero-chip-pill.active {
      border-color: #ca7660;
      background: #ffffff;
      color: #ca7660;
      box-shadow: 0 2px 10px rgba(150, 59, 18, 0.15);
    }
    /* Metrics bar */
    .vm9-metrics-strip {
      max-width: 1240px;
      margin: 20px auto 40px;
      padding: 0 20px;
    }
    .vm9-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.2);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 12px 35px rgba(120, 52, 22, 0.08);
    }
    .vm9-metric-item {
      text-align: center;
    }
    .vm9-metric-value {
      font-family: var(--font-display);
      font-size: 32px;
      font-weight: 700;
      color: #ca7660;
      margin-bottom: 4px;
    }
    .vm9-metric-label {
      font-size: 12px;
      color: #5e3624;
      font-weight: 600;
    }
    /* Sections */
    .vm9-section {
      max-width: 1240px;
      margin: 0 auto;
      padding: 60px 20px;
    }
    .vm9-section-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 42px;
    }
    .vm9-section-tag {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: #782c0b;
      margin-bottom: 8px;
      display: block;
    }
    .vm9-section-title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.5vw, 40px);
      color: #261108;
      margin: 0 0 12px;
    }
    .vm9-section-desc {
      font-size: 15px;
      color: #4a2112;
      line-height: 1.6;
      margin: 0;
    }
    /* Feature Cards */
    .vm9-grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .vm9-card {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 20px;
      padding: 26px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .2s, border-color .2s, box-shadow .2s;
      box-shadow: 0 10px 30px rgba(120, 52, 22, 0.08);
    }
    .vm9-card:hover {
      transform: translateY(-3px);
      border-color: #ca7660;
      box-shadow: 0 14px 40px rgba(120, 52, 22, 0.14);
    }
    .vm9-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(232, 160, 124, 0.25);
      border: 1px solid rgba(148, 68, 32, 0.25);
      display: grid;
      place-items: center;
      font-size: 22px;
      margin-bottom: 4px;
    }
    .vm9-card-title {
      font-family: var(--font-display);
      font-size: 20px;
      color: #261108;
      margin: 0;
    }
    .vm9-card-desc {
      font-size: 13.5px;
      color: #5e3624;
      line-height: 1.55;
      margin: 0;
    }
    /* Steps */
    .vm9-steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .vm9-step-card {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 20px;
      padding: 24px 20px;
      position: relative;
      box-shadow: 0 8px 24px rgba(120, 52, 22, 0.06);
    }
    .vm9-step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #ca7660;
      color: #ffffff;
      font-weight: 900;
      font-size: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 12px;
    }
    .vm9-step-title {
      font-family: var(--font-display);
      font-size: 18px;
      color: #261108;
      margin: 0 0 6px;
    }
    .vm9-step-desc {
      font-size: 13px;
      color: #5e3624;
      line-height: 1.5;
      margin: 0;
    }
    /* Demo Showcase Cards */
    .vm9-demo-card {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 20px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 10px 30px rgba(120, 52, 22, 0.08);
    }
    .vm9-demo-badge {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      background: linear-gradient(135deg, #ca7660 0%, #b8604a 100%);
      color: #ffffff;
      letter-spacing: 0.05em;
      font-family: var(--font-acme);
      padding: 4px 10px;
      border-radius: 999px;
    }
    .vm9-demo-name {
      font-family: var(--font-acme);
      font-size: 22px;
      color: #261108;
      margin: 0;
    }
    .vm9-demo-meta {
      font-size: 12px;
      color: #5e3624;
      line-height: 1.5;
    }
    .vm9-demo-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    /* Single Featured Demo Showcase (Aura Gourmet) */
    .vm9-single-demo-container {
      max-width: 980px;
      margin: 0 auto;
    }
    .vm9-single-demo-card {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.24);
      border-radius: 24px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      box-shadow: 0 16px 45px rgba(120, 52, 22, 0.12);
      position: relative;
    }
    .vm9-single-demo-badge-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .vm9-demo-live-dot {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #1a7f40;
      font-weight: 700;
      background: rgba(46, 170, 88, 0.15);
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(46, 170, 88, 0.3);
    }
    .vm9-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1a7f40;
      box-shadow: 0 0 8px #1a7f40;
      animation: vm9Pulse 1.8s infinite;
    }
    @keyframes vm9Pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.85); }
    }
    .vm9-single-demo-body {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 26px;
      align-items: center;
    }
    @media (max-width: 768px) {
      .vm9-single-demo-body {
        grid-template-columns: 1fr;
      }
    }
    .vm9-single-demo-title {
      font-family: var(--font-display);
      font-size: 32px;
      color: #261108;
      margin: 0 0 6px;
    }
    .vm9-single-demo-tagline {
      font-size: 14px;
      color: #8e3814;
      font-weight: 700;
      margin: 0 0 12px;
    }
    .vm9-single-demo-desc {
      font-size: 13.5px;
      color: #5e3624;
      line-height: 1.6;
      margin: 0 0 18px;
    }
    .vm9-demo-highlights-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    @media (max-width: 500px) {
      .vm9-demo-highlights-grid {
        grid-template-columns: 1fr;
      }
    }
    .vm9-demo-pill {
      background: #fdf2ea;
      border: 1px solid rgba(148, 68, 32, 0.16);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 12px;
      color: #261108;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
    }
    .vm9-single-demo-preview-card {
      background: #fdf2ea;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 18px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      text-align: center;
    }
    .vm9-demo-preview-header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 12px;
    }
    .vm9-single-demo-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 100%;
      padding-top: 20px;
      border-top: 1px solid rgba(148, 68, 32, 0.18);
    }
    .vm9-btn-large {
      padding: 16px 36px !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      margin: 0 auto !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    /* Gradient Utility & Acme Typography */
    .vm9-gradient-text {
      background: linear-gradient(135deg, #782c0b 0%, #a2461b 50%, #c45d2d 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: var(--font-acme);
      display: inline-block;
    }
    .vm9-tag-gradient {
      background: #ffffff !important;
      color: #782c0b !important;
      font-family: var(--font-acme) !important;
      font-weight: 800 !important;
      border-radius: 999px !important;
      padding: 6px 16px !important;
      display: inline-block !important;
      box-shadow: 0 4px 16px rgba(148, 68, 32, 0.12) !important;
      border: 1px solid rgba(148, 68, 32, 0.25) !important;
      letter-spacing: 0.06em !important;
    }

    /* Owner Comparison Section & Table (Our platform is FIRST) */
    #whyUs {
      position: relative;
      overflow: hidden;
    }
    #whyUs::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 750px;
      height: 380px;
      background: radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.4), rgba(232, 160, 124, 0.2) 60%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }
    .vm9-comparison-wrap {
      max-width: 1040px;
      margin: 0 auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      border-radius: 20px;
      border: 1px solid rgba(148, 68, 32, 0.22);
      background: #ffffff;
      box-shadow: 0 20px 50px rgba(120, 52, 22, 0.12);
      position: relative;
      z-index: 1;
    }
    .vm9-comparison-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      text-align: left;
      font-size: 13.5px;
    }
    .vm9-comparison-table th, .vm9-comparison-table td {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(148, 68, 32, 0.14);
    }
    .vm9-comparison-table th {
      background: #fdf1e8;
      color: #261108;
      font-family: var(--font-acme);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    /* Our column header: FIRST comparison column, styled with theme gradient */
    .vm9-comparison-table th.highlight.ours {
      background: #ca7660;
      color: #ffffff;
      border-left: 2px solid #ca7660;
      border-right: 2px solid #ca7660;
      border-top: 2px solid #ca7660;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      box-shadow: 0 6px 20px rgba(150, 59, 18, 0.3);
      position: relative;
    }
    .vm9-ours-head-box {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .vm9-ours-pill-tag {
      font-size: 9.5px;
      letter-spacing: 0.12em;
      font-weight: 900;
      color: #ffd8c4;
      text-transform: uppercase;
      font-family: var(--font-acme);
    }
    .vm9-ours-title {
      font-size: 17px;
      font-weight: 900;
      color: #ffffff;
      font-family: var(--font-acme);
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    /* Our column cells: soft gradient tint, high contrast */
    .vm9-comparison-table td.highlight.ours {
      background: rgba(232, 160, 124, 0.18);
      border-left: 2px solid #b8604a;
      border-right: 2px solid #b8604a;
      color: #261108;
      font-weight: 600;
    }
    .vm9-comparison-table tr:last-child td.highlight.ours {
      border-bottom: 2px solid #b8604a;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
    }
    .vm9-comparison-table td.highlight.ours strong {
      color: #ca7660;
      font-weight: 800;
    }
    .vm9-check { color: #1a7f40; font-weight: 800; font-size: 15px; margin-right: 4px; }
    .vm9-cross { color: #c0382b; font-weight: 800; font-size: 15px; margin-right: 4px; }

    /* Interactive Profit & ROI Calculator */
    .vm9-roi-container {
      max-width: 980px;
      margin: 0 auto;
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.2);
      border-radius: 22px;
      padding: 32px 28px;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 30px;
      align-items: center;
      box-shadow: 0 16px 45px rgba(120, 52, 22, 0.1);
    }
    @media (max-width: 768px) {
      .vm9-roi-container {
        grid-template-columns: 1fr;
      }
    }
    .vm9-roi-slider-group {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .vm9-roi-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .vm9-roi-label-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #261108;
      font-weight: 600;
    }
    .vm9-roi-val {
      color: #ca7660;
      font-weight: 700;
      font-size: 14px;
    }
    .vm9-roi-slider {
      width: 100%;
      accent-color: #ca7660;
      cursor: pointer;
    }
    .vm9-roi-result-card {
      background: #fdf2ea;
      border: 1px solid rgba(148, 68, 32, 0.22);
      border-radius: 18px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .vm9-roi-metric {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(148, 68, 32, 0.12);
    }
    .vm9-roi-metric:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .vm9-roi-metric-label {
      font-size: 12.5px;
      color: #5e3624;
    }
    .vm9-roi-metric-val {
      font-size: 17px;
      font-weight: 800;
      color: #261108;
    }
    .vm9-roi-metric-val.green {
      color: #1a7f40;
    }
    .vm9-roi-metric-val.gold {
      color: #ca7660;
      font-size: 24px;
    }

    /* Pricing */
    .vm9-price-card {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 22px;
      padding: 30px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      box-shadow: 0 10px 30px rgba(120, 52, 22, 0.08);
    }
    .vm9-price-card.featured {
      border: 2px solid #ca7660;
      background: #fffaf7;
      box-shadow: 0 18px 50px rgba(150, 59, 18, 0.18);
    }
    .vm9-price-badge {
      position: absolute;
      top: -12px;
      right: 20px;
      background: #ca7660;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 999px;
      letter-spacing: 0.05em;
      font-family: var(--font-acme);
      box-shadow: 0 4px 14px rgba(150, 59, 18, 0.35);
    }
    .vm9-price-setup-tag {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #782c0b;
      font-family: var(--font-acme);
    }
    .vm9-price-monthly-note {
      font-size: 12px;
      color: #5e3624;
      background: #fdf2ea;
      border: 1px solid rgba(148, 68, 32, 0.15);
      padding: 6px 10px;
      border-radius: 8px;
    }
    .vm9-pricing-guarantee {
      max-width: 860px;
      margin: 36px auto 0;
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.22);
      border-radius: 18px;
      padding: 22px 26px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      box-shadow: 0 10px 30px rgba(120, 52, 22, 0.08);
    }
    .vm9-guarantee-icon {
      font-size: 28px;
      flex-shrink: 0;
    }
    .vm9-guarantee-title {
      font-family: var(--font-display);
      font-size: 17px;
      color: #261108;
      margin: 0 0 6px;
    }
    .vm9-guarantee-desc {
      font-size: 13px;
      color: #5e3624;
      line-height: 1.6;
      margin: 0;
    }
    .vm9-plan-badge {
      display: inline-block;
      background: rgba(232, 160, 124, 0.28);
      color: #782c0b;
      border: 1px solid rgba(148, 68, 32, 0.28);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .vm9-price-tier {
      font-family: var(--font-display);
      font-size: 22px;
      color: #261108;
      margin: 0;
    }
    .vm9-price-amount {
      font-size: 32px;
      font-weight: 800;
      color: #ca7660;
    }
    .vm9-price-amount span {
      font-size: 13px;
      color: #5e3624;
      font-weight: 500;
    }
    .vm9-price-features {
      list-style: none;
      padding: 0;
      margin: 8px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .vm9-price-features li {
      font-size: 13px;
      color: #261108;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .vm9-price-features li span {
      color: #ca7660;
      font-weight: 800;
    }
    /* FAQ */
    .vm9-faq-list {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .vm9-faq-item {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.18);
      border-radius: 16px;
      padding: 20px 24px;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(120, 52, 22, 0.06);
    }
    .vm9-faq-q {
      font-family: var(--font-display);
      font-size: 17px;
      color: #261108;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
    }
    .vm9-faq-a {
      font-size: 13.5px;
      color: #5e3624;
      line-height: 1.6;
      margin: 10px 0 0;
      display: none;
    }
    .vm9-faq-item.open .vm9-faq-a {
      display: block;
    }
    .vm9-faq-item.open .vm9-faq-toggle {
      transform: rotate(45deg);
      color: #ca7660;
    }
    .vm9-faq-toggle {
      font-size: 18px;
      color: #782c0b;
      transition: transform .2s;
    }
    /* Quick Demo Login Bar in modal */
    .saas-demo-quick-login {
      margin-top: 14px;
      padding: 10px;
      background: rgba(232, 160, 124, 0.18);
      border: 1px dashed rgba(148, 68, 32, 0.35);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    /* Footer */
    .vm9-footer {
      border-top: 1px solid rgba(120, 48, 18, 0.25);
      background: #dc916c;
      padding: 48px 20px 60px;
      margin-top: 40px;
    }
    .vm9-footer-inner {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }
    /* Top Customer Back Bar */
    .vm9-customer-back-bar {
      position: sticky;
      top: 0;
      z-index: 999;
      background: #fec5bb;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(148, 68, 32, 0.2);
      padding: 10px 16px;
      display: none;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 20px rgba(120, 52, 22, 0.15);
    }
    .vm9-cbb-inner {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .vm9-cbb-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #261108;
    }
    .vm9-cbb-title {
      color: #4a2112;
      font-size: 12px;
      font-weight: 600;
    }
    .vm9-cbb-btn {
      border: 1px solid #782c0b;
      background: rgba(120, 44, 11, 0.15);
      color: #782c0b;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 800;
      transition: all .2s;
    }
    .vm9-cbb-btn:hover {
      background: #782c0b;
      color: #ffffff;
    }

    /* Modal styling for home page dialogs */
    #saasGetStartedModal .saas-modal-box,
    #saasClientLoginModal .saas-modal-box {
      background: #ffffff;
      border: 1px solid rgba(148, 68, 32, 0.24);
      color: #261108;
      box-shadow: 0 25px 60px rgba(38, 17, 8, 0.35);
    }
    #saasGetStartedModal input,
    #saasGetStartedModal select,
    #saasClientLoginModal input {
      background: #fdf2ea !important;
      border: 1px solid rgba(148, 68, 32, 0.24) !important;
      color: #261108 !important;
    }
    #saasGetStartedModal label,
    #saasClientLoginModal label {
      color: #782c0b !important;
    }

    @media(max-width: 900px) {
      .vm9-header {
        padding: 10px 12px !important;
        gap: 6px !important;
      }
      .vm9-brand {
        gap: 6px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
      }
      .vm9-logo-img {
        width: 26px !important;
        height: 26px !important;
      }
      .vm9-logo-text {
        font-size: 16px !important;
        letter-spacing: 0 !important;
      }
      .vm9-badge {
        display: none !important;
      }
      .vm9-header-actions {
        gap: 5px !important;
        flex-shrink: 0 !important;
      }
      .vm9-header-actions .vm9-btn,
      .vm9-header-actions button {
        padding: 7px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }
      section#saasLandingPage > header:nth-of-type(1) > div:nth-of-type(1) > button:nth-of-type(2),
      .vm9-header-actions .vm9-btn-primary {
        padding: 7px 11px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        margin-right: 0 !important;
      }
      .vm9-hero-container {
        grid-template-columns: 1fr;
        padding-top: 24px;
        gap: 24px;
      }
      .vm9-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .vm9-steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .vm9-grid-3 {
        grid-template-columns: 1fr;
      }
      .vm9-nav-links {
        display: none;
      }
      .vm9-pure-viewer-wrap {
        height: 320px;
      }
    }
    /* Drag & Drop Sequence Styles */
    .category-sort-pill {
      background: var(--card2);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 14px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: grab;
      font-size: 13px;
      color: var(--ink);
      user-select: none;
      transition: all 0.2s ease;
      min-height: 36px;
      box-sizing: border-box;
    }
    .category-sort-pill:hover {
      border-color: var(--gold);
      background: rgba(212,175,55,0.08);
    }
    .category-sort-pill:active {
      cursor: grabbing;
      opacity: 0.5;
    }
    .sort-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-left: 1px solid var(--line);
      padding-left: 8px;
      margin-left: 2px;
    }
    .sort-action-btn {
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
      color: var(--gold-light);
      cursor: pointer;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
      min-width: 24px;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    .sort-action-btn:hover {
      background: rgba(212,175,55,0.2);
      border-color: var(--gold);
      color: #fff;
    }

    /* Modern Responsive Admin Menu Cards (Zero Overlap on Mobile) */
    .admin-menu-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 14px;
      margin-bottom: 12px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: all 0.18s ease;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      position: relative;
    }
    .admin-menu-row:hover {
      border-color: rgba(212, 175, 55, 0.4);
    }
    .admin-menu-row.drag-over {
      background: rgba(212, 175, 55, 0.08);
      border: 1.5px dashed var(--gold);
    }
    .admin-menu-row.dragging {
      opacity: 0.45;
    }

    .amr-top {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    .amr-drag-handle {
      font-size: 16px;
      color: var(--muted);
      cursor: grab;
      user-select: none;
      padding: 4px 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
    }
    .amr-drag-handle:active {
      cursor: grabbing;
    }
    .amr-thumb {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid var(--line);
      background: var(--card2);
    }
    .amr-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
      overflow: hidden;
    }
    .amr-name-price {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.35;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .amr-meta {
      font-size: 11px;
      color: var(--muted);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 6px;
      line-height: 1.4;
    }
    .amr-reorder-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex-shrink: 0;
      margin-left: auto;
    }
    .amr-reorder-btn {
      background: var(--card2);
      border: 1px solid var(--line);
      color: var(--gold-light);
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 24px;
      min-height: 22px;
      transition: all 0.15s ease;
    }
    .amr-reorder-btn:hover {
      background: rgba(212, 175, 55, 0.18);
      border-color: var(--gold);
    }
    .amr-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      box-sizing: border-box;
    }
    .amr-actions button {
      flex: 1;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      font-size: 11px;
      font-weight: 700;
      border-radius: 8px;
      min-height: 36px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* Tablet & Desktop Layout (>= 680px) */
    @media (min-width: 680px) {
      .admin-menu-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 16px;
      }
      .amr-top {
        width: auto;
        flex: 1;
        min-width: 0;
      }
      .amr-actions {
        width: auto;
        padding-top: 0;
        border-top: none;
        flex-shrink: 0;
        gap: 8px;
      }
      .amr-actions button {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 12px;
      }
    }

    /* Multi-Select Menu Batch Operations */
    .admin-menu-row.selected {
      border-color: var(--gold) !important;
      background: rgba(212, 175, 55, 0.08) !important;
      box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3);
    }
    .menu-item-checkbox-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .menu-item-checkbox {
      width: 19px;
      height: 19px;
      accent-color: var(--gold);
      cursor: pointer;
      margin: 0;
    }
    .menu-batch-bar {
      position: sticky;
      top: 10px;
      z-index: 100;
      background: var(--card2);
      border: 1.5px solid var(--gold);
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    }
    .menu-batch-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .menu-batch-btn {
      padding: 6px 11px;
      font-size: 11.5px;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      transition: all 0.15s ease;
    }
    .menu-batch-btn:hover {
      background: rgba(212, 175, 55, 0.18);
      border-color: var(--gold);
    }
    .menu-batch-btn.danger {
      background: rgba(239, 68, 68, 0.15);
      border-color: rgba(239, 68, 68, 0.4);
      color: #f87171;
    }
    .menu-batch-btn.danger:hover {
      background: var(--danger);
      color: #fff;
    }
/* MODERN MINIMAL LANDING PAGE STYLES */
.modern-minimal {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  color: #1a1f36;
  background-color: #ffffff;
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
}

.modern-minimal h1, .modern-minimal h2, .modern-minimal h3, .modern-minimal h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  margin: 0;
  color: #0a2540;
}

.section-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
}

/* ==========================================
   FLOATING GLASSMORPHISM NAVIGATION
   ========================================== */
.floating-nav-wrapper {
  position: sticky;
  top: 14px;
  z-index: 1000;
  width: 100%;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.floating-glass-nav {
  pointer-events: auto;
  width: 100%;
  max-width: 1160px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(28px) saturate(210%);
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: 
    0 24px 60px -12px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 10px 22px;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-glass-nav:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 
    0 32px 70px -12px rgba(15, 23, 42, 0.15),
    0 6px 18px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.floating-nav-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  min-width: max-content;
  transition: transform 0.2s ease;
}

.brand-logo:hover {
  transform: scale(1.02);
}

.brand-logo img:first-child {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.brand-name {
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  white-space: nowrap;
}

.desktop-nav {
  display: none;
  gap: 26px;
  align-items: center;
}

@media (min-width: 920px) {
  .desktop-nav { display: flex; }
}

.desktop-nav a {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: color 0.15s ease;
  white-space: nowrap;
  padding: 4px 6px;
  border-radius: 6px;
}

.desktop-nav a:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.04);
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
}

.nav-demo-pill {
  background: rgba(37, 99, 235, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(37, 99, 235, 0.2);
  color: #2563eb;
  padding: 8px 16px;
  border-radius: 9999px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-demo-pill:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
  transform: translateY(-2px);
}

.nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav-login-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.16);
}

.nav-start-btn {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 16px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.nav-start-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 6px 22px rgba(37, 99, 235, 0.48);
}

.mobile-menu-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: #0f172a;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.mobile-menu-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

@media (max-width: 919px) {
  .mobile-menu-toggle-btn {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .floating-nav-wrapper {
    top: 8px;
    padding: 0 8px;
  }
  .floating-glass-nav {
    padding: 6px 12px;
    height: 48px;
  }
  .floating-nav-container {
    gap: 6px;
  }
  .brand-logo {
    gap: 6px;
  }
  .brand-name {
    font-size: 16px;
  }
  .brand-logo img:not(.brand-wordmark) {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }
  .brand-logo img.brand-wordmark {
    height: 20px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }
  .nav-demo-pill {
    display: none !important;
  }
  .nav-login-btn {
    display: none !important;
  }
  .nav-start-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
  }
  .mobile-menu-toggle-btn {
    display: inline-flex !important;
    padding: 5px;
    flex-shrink: 0;
  }
}

@media (max-width: 360px) {
  .brand-name {
    font-size: 14.5px;
  }
  .nav-start-btn {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* Mobile Nav Dropdown */
.floating-mobile-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 16px;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
  animation: mobileDropdownSlide .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-mobile-dropdown.show {
  display: flex;
}

@keyframes mobileDropdownSlide {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  transition: all 0.15s ease;
}

.mobile-nav-item:hover, .mobile-nav-item:active {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
}

.nav-item-icon {
  font-size: 16px;
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.mobile-nav-demo-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #2563eb;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.mobile-nav-login-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.mobile-nav-start-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}



/* Ambient Glow Blobs behind floating nav and hero (Strict containment to eliminate CLS layout shift) */
.ambient-blobs-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 800px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  will-change: transform;
  transform: translateZ(0);
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  contain: layout paint;
  will-change: transform;
  transform: translateZ(0);
}

#menuRoot {
  min-height: 360px;
  contain: style layout;
}

#brandBio {
  contain: style layout;
}

.blob-blue {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.24) 0%, rgba(37, 99, 235, 0.05) 70%, transparent 100%);
  top: -100px;
  left: -80px;
}

.blob-amber {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.04) 70%, transparent 100%);
  top: 20px;
  right: -60px;
}

.blob-violet {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 70%);
  top: 240px;
  left: 40%;
}

/* Modern Hero Section */
.hero-section {
  position: relative;
  background: transparent;
  padding: 40px 24px 60px;
  overflow: hidden;
  z-index: 1;
}

.hero-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(37, 99, 235, 0.22);
  padding: 6px 14px;
  border-radius: 9999px;
  margin-bottom: 20px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.hero-headline {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #0f172a;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .hero-headline {
    font-size: 48px;
  }
}

.hero-gradient-text {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  font-size: 17.5px;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 26px;
  max-width: 540px;
}

.hero-metric-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
  width: 100%;
}

.metric-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #334155;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.metric-badge:hover {
  transform: translateX(3px);
  border-color: rgba(37, 99, 235, 0.4);
}

.metric-badge strong {
  color: #0f172a;
  font-weight: 700;
}

.metric-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon-wrap.green {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.metric-icon-wrap.blue {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.metric-icon-wrap.amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  width: 100%;
}

.btn-hero-primary {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 15px 28px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px -4px rgba(37, 99, 235, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 14px 34px -4px rgba(37, 99, 235, 0.58), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.btn-hero-primary .arrow {
  transition: transform 0.2s ease;
}

.btn-hero-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-hero-demo {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 15px 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-demo:hover {
  border-color: rgba(37, 99, 235, 0.5);
  color: #2563eb;
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.16), inset 0 1px 1px rgba(255, 255, 255, 1);
}

.hero-trust-bar {
  display: flex;
  gap: 18px;
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
  flex-wrap: wrap;
  align-items: center;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-trust-item svg {
  color: #10b981;
}

/* Hero Visual: Seamless Borderless Laser QR Transformation Illustration (Free transparent background, zero box/borders) */
.hero-visual-pure {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.hero-laser-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

.hero-laser-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, rgba(37, 99, 235, 0.10) 45%, rgba(139, 92, 246, 0.04) 68%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(48px);
  -webkit-filter: blur(48px);
}

.hero-laser-main-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.08)) drop-shadow(0 6px 16px rgba(245, 158, 11, 0.10));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  animation: heroFloatSubtle 5.5s ease-in-out infinite alternate;
}

.hero-laser-main-img:hover {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 20px 38px rgba(245, 158, 11, 0.20)) drop-shadow(0 10px 24px rgba(37, 99, 235, 0.14));
}

@keyframes heroFloatSubtle {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-laser-main-img {
    animation: none;
  }
}

@media (max-width: 991px) {
  .hero-laser-stage {
    max-width: 480px;
    margin: 12px auto 0;
  }
}

@media (max-width: 540px) {
  .hero-laser-stage {
    max-width: 360px;
    margin: 8px auto 0;
  }
  .hero-laser-ambient-glow {
    filter: blur(24px);
    -webkit-filter: blur(24px);
  }
}

.hero-video-pure-wrap {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-video-pure-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 54px -10px rgba(15, 23, 42, 0.24);
}

.hero-pure-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border: none;
  background: #0f172a;
}

/* Floating Illustrative Badges around Hero Stage Card */
.hero-floating-pill {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 9999px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.16), inset 0 1px 1px rgba(255, 255, 255, 1);
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  animation: floatSubtle 4s ease-in-out infinite alternate;
  pointer-events: none;
  white-space: nowrap;
}

.hero-floating-pill.top-right {
  top: -18px;
  right: -16px;
  animation-delay: 0.4s;
}

.hero-floating-pill.bottom-left {
  bottom: -18px;
  left: -16px;
  animation-delay: 1.2s;
}

@keyframes floatSubtle {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@media (max-width: 640px) {
  .hero-floating-pill {
    display: none;
  }
}

.stage-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stage-tabs {
  display: inline-flex;
  background: rgba(241, 245, 249, 0.9);
  backdrop-filter: blur(12px);
  padding: 4px;
  border-radius: 9999px;
  gap: 4px;
}

.stage-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.stage-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.stage-status-tag {
  font-size: 11px;
  font-weight: 800;
  color: #059669;
  background: rgba(236, 253, 245, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Seamless Borderless Video Showcase in Hero */
.hero-video-showcase {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.hero-video-showcase video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border: none;
}

.video-overlay-ribbon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.88) 100%);
  padding: 24px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  gap: 8px;
}

.ribbon-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ribbon-left strong {
  color: #38bdf8;
}

.ribbon-demo-link {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ribbon-demo-link:hover {
  background: #ffffff;
  color: #0f172a;
}

/* 3D Model Showcase in Hero */
.hero-3d-showcase {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(241, 245, 249, 0.4) 100%);
  border-radius: 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-3d-showcase model-viewer {
  width: 100%;
  height: 100%;
}

.model-caption-pill {
  position: absolute;
  bottom: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.caption-action-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.stage-bottom-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding-top: 4px;
}

/* ZigZag Section */
.zigzag-section {
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.zigzag-row {
  display: flex;
  flex-direction: column-reverse;
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
  width: 100%;
}

@media (min-width: 768px) {
  .zigzag-row {
    flex-direction: row;
    gap: 64px;
  }
  .zigzag-row.reverse {
    flex-direction: row-reverse;
  }
}

.zigzag-image {
  flex: 1;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #f1f5f9;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
}

.zigzag-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  transition: transform 0.4s ease;
}

.zigzag-image:hover img {
  transform: scale(1.03);
}

.zigzag-step-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.zigzag-text {
  flex: 1;
  width: 100%;
}

.zigzag-text .step-label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.zigzag-text h3 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 16px;
  color: #0f172a;
}

.zigzag-text p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #475569;
}

/* Features Grid */
.features-section {
  width: 100%;
  box-sizing: border-box;
}

.bg-blue-dark {
  background-color: #2563eb;
  color: #fff;
}

.text-white { color: #fff !important; }
.text-light { color: rgba(255,255,255,0.9) !important; }

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 32px 28px;
  border-radius: 20px;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.feature-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.feature-card .icon-wrap {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #2563eb;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.feature-card h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Pricing Grid */
.pricing-section {
  background: #f8faff;
  width: 100%;
  box-sizing: border-box;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 40px 32px;
  border-radius: 24px;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.9);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1);
}

.pricing-card.popular {
  border: 2px solid #2563eb;
  box-shadow: 0 24px 48px -10px rgba(37, 99, 235, 0.18), 0 0 0 1px rgba(37, 99, 235, 0.1);
  transform: translateY(-8px);
  background: #ffffff;
}

.pricing-card.popular:hover {
  transform: translateY(-12px);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
}

.pricing-card h3 {
  font-size: 20px;
  margin-bottom: 14px;
  color: #0f172a;
  font-weight: 800;
}

.pricing-card .price {
  font-size: 44px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}

.pricing-card .price span {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
}

.plan-desc {
  color: #475569;
  font-size: 15px;
  margin-bottom: 28px;
  min-height: 44px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  flex: 1;
}

.plan-features li {
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-features li:last-child {
  border-bottom: none;
}

.pricing-card button {
  width: 100%;
}

.pricing-card .btn-primary {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
  width: 100%;
}

.pricing-card .btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.5);
  transform: translateY(-2px);
}

.pricing-card .btn-outline {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #0f172a;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
  width: 100%;
}

.pricing-card .btn-outline:hover {
  border-color: #2563eb;
  color: #2563eb;
  background: #ffffff;
  transform: translateY(-2px);
}

/* SEO Blogs */
.bg-gray-50 { background: #f9fafb; }
.seo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 48px;
}
@media (min-width: 992px) {
  .seo-grid { grid-template-columns: 1.5fr 1fr; }
}
.seo-column h3 {
  font-size: 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e5e7eb;
}
.article-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.article-card {
  display: block;
  text-decoration: none;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: transform 0.2s, box-shadow 0.2s;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.article-meta {
  color: #3b82f6;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.article-card h4 {
  color: #111827;
  font-size: 18px;
  margin-bottom: 8px;
}
.article-card p {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.location-group h4 {
  font-size: 16px;
  color: #111827;
  margin-bottom: 12px;
}
.location-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.location-group li {
  margin-bottom: 8px;
}
.location-group a {
  color: #6b7280;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.location-group a:hover {
  color: #3b82f6;
  text-decoration: underline;
}

/* Modern Footer */
.modern-footer {
  background: #0a2540;
  color: #fff;
  padding: 80px 24px 40px;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) {
  .footer-container { grid-template-columns: 1fr 2fr; }
}
.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 24px;
}
.footer-brand .logo img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}
.footer-brand p {
  color: #adbdcc;
  font-size: 15px;
  margin-bottom: 24px;
  max-width: 300px;
}
.social-links {
  display: flex;
  gap: 16px;
}
.social-links a {
  color: #adbdcc;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.social-links a:hover {
  color: #fff;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
}
.link-group h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 20px;
}
.link-group a {
  display: block;
  color: #adbdcc;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 12px;
  transition: color 0.2s;
}
.link-group a:hover {
  color: #fff;
}
.footer-bottom {
  max-width: 1200px;
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  color: #adbdcc;
  font-size: 14px;
}

/* ZigZag step labels & image tints */
.step-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.zigzag-image.bg-pos-counter {
  background: #fdf4ff; /* Light fuchsia/rose tint matching counter */
}

/* HIGH-CONVERTING "START NOW" POP-UP MODAL (100% Mobile Responsive & Touch Friendly) */
.menupe-popup-overlay,
.menuqro-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 16px;
  box-sizing: border-box;
}

.menupe-popup-overlay.active,
.menuqro-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.menupe-popup-card,
.menuqro-popup-card {
  background: #ffffff;
  border-radius: 22px;
  max-width: 820px;
  width: 100%;
  max-height: min(90vh, 90dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45);
  transform: scale(0.95) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  scrollbar-width: thin;
}

.menupe-popup-overlay.active .menupe-popup-card,
.menuqro-popup-overlay.active .menuqro-popup-card {
  transform: scale(1) translateY(0);
}

/* Prominent, touch-accessible close button (min 44x44px for effortless mobile tapping) */
.popup-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
  touch-action: manipulation;
}

.popup-close-btn:hover, .popup-close-btn:active {
  background: #f1f5f9;
  border-color: #64748b;
  transform: scale(1.08);
}

.popup-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .popup-grid {
    grid-template-columns: 320px 1fr;
  }
}

.popup-visual-side {
  position: relative;
  min-height: 190px;
  background: #0f172a;
  overflow: hidden;
}

.popup-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.popup-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.2) 0%, rgba(15,23,42,0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #ffffff;
}

.popup-badge {
  background: #3b82f6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
  align-self: flex-start;
  letter-spacing: 0.05em;
}

.popup-visual-overlay h3 {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.25;
}

.popup-visual-overlay p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.4;
}

.popup-content-side {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.popup-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2563eb;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.popup-content-side h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.2;
}

.popup-subhead {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 16px;
}

.popup-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.popup-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.4;
}

.p-check {
  width: 18px;
  height: 18px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.popup-actions .btn-primary.w-full {
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.4);
}

.popup-dismiss-text-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  touch-action: manipulation;
}

.popup-dismiss-text-btn:hover, .popup-dismiss-text-btn:active {
  color: #0f172a;
  background: #f1f5f9;
}

.popup-login-prompt {
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
  margin-top: 8px;
}

.popup-login-prompt a {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.popup-trust-notes {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  margin-top: 14px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  flex-wrap: wrap;
  gap: 8px;
}

/* Mobile specific popup tweaks */
@media (max-width: 767px) {
  .menupe-popup-overlay,
  .menuqro-popup-overlay {
    padding: 12px;
  }
  .menupe-popup-card,
  .menuqro-popup-card {
    border-radius: 18px;
    max-height: min(88vh, 88dvh);
  }
  .popup-visual-side {
    display: none; /* Hide heavy banner on small phone screens so user sees offer and actions immediately */
  }
  .popup-content-side {
    padding: 24px 18px 20px;
  }
  .popup-content-side h2 {
    font-size: 19px;
    padding-right: 48px; /* Safe space away from the 44px close button */
  }
  .popup-subhead {
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .popup-feature-list {
    gap: 8px;
    margin-bottom: 14px;
  }
  .popup-feature-item {
    font-size: 12px;
  }
  .popup-trust-notes {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }
}

/* Floating Start Pill */
.floating-start-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 10px 18px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s;
  touch-action: manipulation;
}

.floating-start-pill:hover {
  transform: translateY(-3px) scale(1.02);
  background: #1e293b;
}

.floating-icon {
  font-size: 15px;
}

/* ==========================================
   LIVE 3D DEMO SHOWCASE & STICKY TOP BAR
   ========================================== */

.nav-demo-btn {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #f8fafc;
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 8px 16px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-demo-btn:hover {
  background: linear-gradient(135deg, #334155, #1e293b);
  border-color: #d4af37;
  transform: translateY(-1px);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseGreen 1.8s infinite;
}

@keyframes pulseGreen {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.hero-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #0f172a !important;
  color: #0f172a !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transition: all 0.2s ease;
}

.hero-demo-btn:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}

/* Homepage Demo Spotlight Showcase Bar - Clean White Shade Vibe Matching How QR Code Ordering Works */
.demo-spotlight-bar {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 36px 20px;
  color: #0f172a;
}

.demo-spotlight-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.demo-spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 32px;
}

@media (min-width: 900px) {
  .demo-spotlight-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.demo-spotlight-3d-floating {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #ffffff 20%, #f8fafc 65%, #edf2f7 100%);
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 20px 16px 16px;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.9);
}

.demo-spotlight-3d-floating model-viewer {
  width: 100%;
  height: 320px;
  background: transparent !important;
  --poster-color: transparent !important;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.16));
}

.floating-3d-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 5px 14px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.demo-spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 100px;
  margin-bottom: 12px;
}

.demo-spotlight-content h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  margin: 0 0 10px;
  color: #0f172a;
  line-height: 1.3;
}

.demo-spotlight-content p {
  font-size: 15px;
  color: #475569;
  margin: 0 0 20px;
  max-width: 620px;
  line-height: 1.6;
}

.demo-spotlight-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-demo-glow {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.btn-demo-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}

.btn-demo-secondary {
  background: #ffffff;
  color: #0f172a;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.btn-demo-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* Sticky top bar inside the Aura Gourmet Demo View */
.demo-top-sticky-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: #0f172a;
  border-bottom: 2px solid #d4af37;
  padding: 10px 16px;
  z-index: 99999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  width: 100%;
  box-sizing: border-box;
}

.demo-top-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.demo-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.demo-top-badge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(212, 175, 55, 0.2);
  color: #d4af37;
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.demo-top-text {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-top-text strong {
  color: #ffffff;
}

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

.demo-top-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: transform 0.15s, background 0.15s;
}

@media (max-width: 768px) {
  .demo-top-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .demo-top-actions, .demo-top-left {
    width: 100%;
  }
  .demo-top-text {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .demo-top-btn {
    width: 100%;
  }
}

.demo-top-btn.home {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.demo-top-btn.home:hover {
  background: rgba(255, 255, 255, 0.22);
}

.demo-top-btn.primary {
  background: #2563eb;
  color: #ffffff;
}

.demo-top-btn.primary:hover {
  background: #1d4ed8;
}

@media (max-width: 640px) {
  .demo-top-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
  }
  .demo-top-text {
    display: none;
  }
  .demo-top-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ==========================================
   BLOG SYSTEM & EDITORIAL ARTICLE READER
   ========================================== */

.saas-blog-article-view {
  background: #ffffff;
  color: #1e293b;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
}

.blog-nav-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #e2e8f0;
  z-index: 1000;
  padding: 12px 20px;
}

.blog-nav-container {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blog-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.blog-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.blog-back-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.blog-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-breadcrumbs {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-breadcrumbs a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.blog-breadcrumbs a:hover {
  text-decoration: underline;
}

.blog-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.article-header {
  margin-bottom: 40px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 32px;
}

.article-badge-topic {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.article-main-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.article-deck {
  font-size: clamp(16px, 2vw, 19px);
  color: #475569;
  line-height: 1.6;
  margin: 0 0 24px;
  font-weight: 500;
}

.article-author-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0f172a;
  color: #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid #e2e8f0;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.author-credentials {
  font-size: 12.5px;
  color: #64748b;
}

.article-meta-info {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Article Body Typography */
.article-body h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  color: #0f172a;
  margin: 44px 0 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.article-body h3 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  color: #1e293b;
  margin: 32px 0 14px;
  line-height: 1.4;
}

.article-body p {
  font-size: 16.5px;
  color: #334155;
  line-height: 1.75;
  margin: 0 0 22px;
}

.article-body strong {
  color: #0f172a;
  font-weight: 700;
}

.article-body ul, .article-body ol {
  margin: 0 0 24px;
  padding-left: 24px;
}

.article-body li {
  font-size: 16px;
  color: #334155;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* Callout Highlights & Comparison Tables */
.editorial-quote-box {
  background: #f8fafc;
  border-left: 4px solid #2563eb;
  padding: 20px 24px;
  border-radius: 0 12px 12px 0;
  margin: 32px 0;
  font-style: normal;
}

.editorial-quote-box p {
  font-size: 16px;
  color: #1e293b;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.6;
}

.quote-attribution {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.financial-table-wrap {
  overflow-x: auto;
  margin: 36px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.financial-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  background: #ffffff;
}

.financial-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
  padding: 14px 16px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}

.financial-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

.financial-table tr:last-child td {
  border-bottom: none;
}

.financial-table tr.highlight-winner td {
  background: #f0fdf4;
  color: #15803d;
  font-weight: 700;
}

.financial-table tr.highlight-loser td {
  background: #fef2f2;
  color: #b91c1c;
}

.stat-callout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.stat-callout-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.stat-callout-number {
  font-size: 32px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-callout-label {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  line-height: 1.4;
}

.article-inline-cta {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 36px 32px;
  margin: 48px 0;
  text-align: center;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
}

.article-inline-cta h3 {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

.article-inline-cta p {
  font-size: 15px;
  color: #cbd5e1;
  margin: 0 0 24px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.article-cta-btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.article-faq-item {
  border-bottom: 1px solid #e2e8f0;
  padding: 18px 0;
}

.article-faq-item h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.article-faq-item p {
  font-size: 15px;
  color: #475569;
  margin: 0;
}

/* AI Overview Snippet Box & Step Cards (2026 QR Implementation Guide) */
.ai-overview-snippet-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-left: 5px solid #0284c7;
  border-radius: 14px;
  padding: 22px 24px;
  margin: 28px 0 36px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
}
.ai-overview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ai-overview-badge {
  background: #0284c7;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-overview-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #0369a1;
}
.ai-overview-text {
  font-size: 16px;
  line-height: 1.65;
  color: #0c4a6e;
  margin: 0;
  font-weight: 500;
}
.step-guide-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 20px 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.step-guide-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}
.step-guide-badge {
  display: inline-block;
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.blog-switcher-pills {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-tab-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  white-space: nowrap;
  transition: all 0.2s;
}
.blog-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.blog-tab-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}
/* --- MODERN GLASSMORPHISM ONBOARDING MODAL & CONFIRMATION WINDOW --- */
.modern-glass-modal-card {
  width: 100%;
  max-width: 680px;
  background: rgba(18, 24, 38, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(232, 160, 124, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(232, 160, 124, 0.12);
  border-radius: 20px;
  padding: 34px 36px;
  color: #f8fafc;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 640px) {
  .modern-glass-modal-card {
    padding: 24px 18px;
    border-radius: 16px;
  }
}

.modern-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.modern-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: rotate(90deg);
}

.modal-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 160, 124, 0.16);
  border: 1px solid rgba(232, 160, 124, 0.35);
  color: #f9dcc4;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.modal-headline {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.modal-subtext {
  font-size: 13.5px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 0 20px;
}

/* Modern Form Elements */
.modern-setup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 540px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .form-row-3 { grid-template-columns: 1fr; }
}

.modern-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modern-field label {
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.modern-field label .required,
.modern-field label .required-badge {
  color: #fb923c !important;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

/* Field Feedback Tag (Live Validation) */
.field-feedback-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 4px;
  line-height: 1.3;
}
.field-feedback-tag.valid {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.field-feedback-tag.warning {
  background: rgba(245, 158, 11, 0.22);
  color: #fde047;
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.field-feedback-tag.error {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.input-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2) !important;
}
.input-invalid {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

.modern-form-alert {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #f59e0b;
  color: #fef08a;
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon svg {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  pointer-events: none;
}

.input-with-icon input,
.modern-field input[type="text"],
.modern-field input[type="tel"],
.modern-field input[type="email"],
.modern-select {
  width: 100%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 11px 14px 11px 40px;
  font-size: 13.5px;
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
}

.modern-field > input[type="text"] {
  padding-left: 14px;
}

.modern-select {
  padding-left: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.input-with-icon input:focus,
.modern-field input:focus,
.modern-select:focus {
  border-color: #e8a07c;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 0 3px rgba(232, 160, 124, 0.2);
}

.glass-guarantee-pill {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #86efac;
  line-height: 1.45;
  margin: 4px 0 2px;
}

.btn-submit-concierge {
  width: 100%;
  background: linear-gradient(135deg, #e8a07c 0%, #c46b3f 100%);
  color: #1a0a03;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(232, 160, 124, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit-concierge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(232, 160, 124, 0.5);
  filter: brightness(1.05);
}

/* --- BENTO FEATURES GRID & ULTRA-MODERN FEATURES SEGMENT (LIGHT THEME WITH DISTINCT SHADES OF WHITE) --- */
.ultra-modern-features {
  padding: 40px 24px 70px;
  background: #fbf9f6;
  position: relative;
  overflow: hidden;
  color: #1c1917;
  border-top: 1px solid #eee8e0;
}

/* Streamlined Compact Header (Removes redundant gap) */
.features-streamlined-header {
  max-width: 1200px;
  margin: 0 auto 30px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee7de;
}

.features-header-left {
  flex: 1;
  min-width: 280px;
}

.features-main-title-compact {
  font-size: 28px;
  font-weight: 900;
  color: #181411;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 6px;
}

.features-accent-highlight {
  color: #c25e2e;
  position: relative;
}

.features-sub-lead-compact {
  font-size: 15px;
  color: #574e46;
  margin: 0;
  line-height: 1.5;
}

.features-header-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-launch-tour-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e8a07c 0%, #c46b3f 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196, 107, 63, 0.25);
  transition: all 0.2s ease;
}
.btn-launch-tour-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(196, 107, 63, 0.4);
}

.btn-launch-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #ded6cb;
  color: #261e18;
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.btn-launch-demo-pill:hover {
  background: #fdfbf7;
  border-color: #c25e2e;
  color: #c25e2e;
}

.modern-features-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .modern-features-bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .modern-features-bento-grid { grid-template-columns: 1fr; }
}

/* Base Bento Card */
.bento-card {
  border-radius: 18px;
  padding: 26px 24px;
  position: relative;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(160, 120, 80, 0.12) !important;
  border-color: #c25e2e !important;
}

/* --- DISTINCT SHADES OF WHITE FOR EACH FEATURE --- */
/* Feature 1: Hero 3D Card (Pure Diamond White) */
#feature-3d.bento-hero-card {
  grid-column: span 2;
  background: #ffffff;
  border: 1.5px solid #ded5c8;
  box-shadow: 0 8px 24px rgba(180, 140, 100, 0.07);
}
@media (max-width: 640px) {
  #feature-3d.bento-hero-card { grid-column: span 1; }
}

/* Feature 2: 0% UPI (Pearl Ivory White) */
#feature-upi {
  background: #fdfdfc;
  border: 1px solid #e7dfd4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 3: Table Velocity (Porcelain Linen White) */
#feature-velocity {
  background: #f8f6f1;
  border: 1px solid #e5ded2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 4: KDS (Crisp Studio White) */
#feature-kds {
  background: #ffffff;
  border: 1px solid #e8e2d8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 5: 86'd Out-of-Stock (Alabaster Warm White) */
#feature-86 {
  background: #faf7f2;
  border: 1px solid #e6ded3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 6: Smart AI Pairing (Silk Eggshell White) */
#feature-upsell {
  background: #fbf9f5;
  border: 1px solid #e7e0d5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 7: Multi-Language (Pure Crisp White) */
#feature-translate {
  background: #ffffff;
  border: 1px solid #e7e1d7;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 8: CRM & Remarketing (Ivory Linen White) */
#feature-crm {
  background: #f7f4ed;
  border: 1px solid #e2d9cc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Feature 9: Hardware (Cashmere Soft White) */
#feature-hardware {
  background: #faf8f4;
  border: 1px solid #e5ded3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

/* Light Bento Badges */
.bento-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 14px;
  width: fit-content;
}
#feature-3d .bento-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
#feature-upi .bento-badge { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
#feature-velocity .bento-badge { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
#feature-kds .bento-badge { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
#feature-86 .bento-badge { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
#feature-upsell .bento-badge { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
#feature-translate .bento-badge { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
#feature-crm .bento-badge { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
#feature-hardware .bento-badge { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Light Bento Icons */
.bento-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.bento-icon-wrapper.gold { background: #fef3c7; color: #d97706; }
.bento-icon-wrapper.green { background: #dcfce7; color: #16a34a; }
.bento-icon-wrapper.blue { background: #e0f2fe; color: #0284c7; }
.bento-icon-wrapper.red { background: #fee2e2; color: #dc2626; }
.bento-icon-wrapper.amber { background: #ffedd5; color: #ea580c; }
.bento-icon-wrapper.purple { background: #f3e8ff; color: #9333ea; }

.bento-card h3 {
  font-size: 18.5px;
  font-weight: 800;
  color: #1a1613;
  margin: 0 0 8px;
  line-height: 1.3;
}

.bento-card p {
  font-size: 13.5px;
  color: #4a4239;
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

.bento-footer-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #ece4d9;
}

.bento-footer-stat .stat-num {
  font-size: 19px;
  font-weight: 900;
  color: #c25e2e;
}

.bento-footer-stat .stat-desc {
  font-size: 11.5px;
  color: #5a5147;
  font-weight: 600;
}

/* Features Bottom Banner */
.features-bottom-banner {
  max-width: 1200px;
  margin: 36px auto 0;
  background: #ffffff;
  border: 1.5px solid #ded5c8;
  box-shadow: 0 10px 26px rgba(180, 140, 100, 0.08);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.features-bottom-banner .banner-content h3 {
  font-size: 21px;
  font-weight: 800;
  color: #181411;
  margin: 0 0 6px;
}

.features-bottom-banner .banner-content p {
  font-size: 14px;
  color: #49423b;
  margin: 0;
}

.btn-banner-primary {
  background: linear-gradient(135deg, #c25e2e 0%, #a24618 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(194, 94, 46, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-banner-primary:hover {
  background: #b14e20;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(194, 94, 46, 0.35);
}

/* --- FEATURE TOUR MODAL STYLING --- */
.feature-tour-card {
  width: 100%;
  max-width: 620px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(232, 160, 124, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  padding: 30px;
  color: #ffffff;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tour-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
}

.tour-top-stepper {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-step-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tour-step-pill.active {
  background: #e8a07c;
  color: #1a0a03;
}

.tour-step-pill.done {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.tour-body {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tour-body-icon {
  font-size: 38px;
  margin-bottom: 12px;
}

.tour-body h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

.tour-body p {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 18px;
}

.tour-highlight-box {
  background: rgba(232, 160, 124, 0.12);
  border-left: 3px solid #e8a07c;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: #fcd5ce;
  margin-bottom: 10px;
}

.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-counter {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}

.tour-nav-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.tour-nav-btn.prev {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.tour-nav-btn.demo {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.tour-nav-btn.next {
  background: #e8a07c;
  color: #1a0a03;
}
.tour-nav-btn.next:hover {
  background: #fcd5ce;
}


/* --- CONFIRMATION WINDOW STYLES (CLEAN WHITE THEME & SEAMLESS CONTINUOUS 3D VIDEO) --- */
.white-success-view,
.compact-success-view {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  color: #0f172a;
}

#saasGetStartedModal .modern-glass-modal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05);
  color: #0f172a;
}

#saasGetStartedModal .modern-modal-close {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}
#saasGetStartedModal .modern-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
}

#saasGetStartedModal .modal-headline {
  color: #0f172a;
}

#saasGetStartedModal .modal-header-badge {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

#saasGetStartedModal .modern-field label {
  color: #334155;
}

#saasGetStartedModal .input-with-icon input,
#saasGetStartedModal .modern-field input[type="text"],
#saasGetStartedModal .modern-field input[type="tel"],
#saasGetStartedModal .modern-field input[type="email"],
#saasGetStartedModal .modern-select {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

#saasGetStartedModal .input-with-icon input:focus,
#saasGetStartedModal .modern-field input:focus,
#saasGetStartedModal .modern-select:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#saasGetStartedModal .glass-guarantee-pill {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

#saasGetStartedModal .btn-submit-concierge {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}
#saasGetStartedModal .btn-submit-concierge:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
}

.success-top-hero {
  text-align: center;
  margin-bottom: 12px;
}

.success-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 8px;
}

.success-headline {
  font-size: 21px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.success-lead {
  font-size: 13.5px;
  color: #475569;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto;
}

.concierge-milestone-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 16px;
  margin: 14px 0 16px;
}

.milestone-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.milestone-step.done .step-circle {
  background: #22c55e;
  color: #ffffff;
}

.milestone-step.active .step-circle {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
}

.step-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.milestone-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px 14px;
}

.milestone-line.done {
  background: #22c55e;
}

/* SEAMLESS CONTINUOUS 3D WORKFLOW VIDEO (NO CONTAINER BOX, NO BUTTONS, CONTINUOUS LOOP) */
.seamless-success-video-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 14px 0 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  background: #000000;
  position: relative;
  line-height: 0;
}

.seamless-success-video {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  display: block;
  border: none;
  outline: none;
  pointer-events: none; /* No clickable pause/play buttons on the video */
}

/* Success Action Buttons */
.success-actions-compact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 520px) {
  .success-actions-compact-row {
    grid-template-columns: 1fr;
  }
  .seamless-success-video {
    max-height: 200px;
  }
}

.btn-success-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}

.btn-success-action.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

.btn-success-action.primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38);
}

.btn-success-action.whatsapp {
  background: #22c55e;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.btn-success-action.whatsapp:hover {
  background: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.btn-close-clean {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s ease;
}

.btn-close-clean:hover {
  color: #0f172a;
}

.btn-close-clean:hover {
  color: #0f172a;
  text-decoration: underline;
}


/* =========================================================
   LIGHTNING-FAST HOMEPAGE RENDERING & PERFORMANCE ENHANCEMENTS
   ========================================================= */
html {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GPU Compositing for Sticky Glass Nav & Floating Action Controls */
.floating-glass-nav,
.floating-start-pill {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Modern Chromium / WebKit Content-Visibility: Skips rendering & layout work for deep offscreen blocks */
.zigzag-section,
.features-grid-section,
.pricing-table-section,
.roi-calculator-section,
.saas-faq-section,
.saas-footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 750px;
}

/* Zero Cumulative Layout Shift (CLS) on Images and Videos */
img, video {
  image-rendering: auto;
}

/* Reduce repaint costs on ambient blobs */
.ambient-blobs-layer {
  contain: strict;
  pointer-events: none;
  transform: translateZ(0);
}

/* =========================================================
   ORDER ACTIONS & MOBILE LAYOUT OVERLAP FIX
   ========================================================= */
.order-tools-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
}

.order-tools-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

.order-tool-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 11px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--text, #e2e8f0) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  min-height: 32px !important;
  line-height: 1 !important;
}

.order-tool-chip:hover, .order-tool-chip:focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: var(--gold, #ca7660) !important;
  color: #ffffff !important;
}

.order-status-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

@media (max-width: 480px) {
  .order-status-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.order-status-strip .status-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 8px 4px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Sound Test Action Bar - High Contrast for both Light & Dark Mode */
.sound-test-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  margin-bottom: 12px;
}

.sound-test-bar-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #0f172a;
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sound-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid #94a3b8;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sound-test-btn:hover {
  background: #f1f5f9;
  border-color: #475569;
  color: #000000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.admin-overlay.dark-mode .sound-test-bar,
body.dark-mode .sound-test-bar {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.18);
}

.admin-overlay.dark-mode .sound-test-bar-title,
body.dark-mode .sound-test-bar-title {
  color: #f8fafc;
}

.admin-overlay.dark-mode .sound-test-btn,
body.dark-mode .sound-test-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f8fafc;
  box-shadow: none;
}

.admin-overlay.dark-mode .sound-test-btn:hover,
body.dark-mode .sound-test-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}


/* ===== MASTER-DETAIL POS ORDER VIEW (IMAGE 4 DESIGN) ===== */
.master-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.md-tool-card {
  background: var(--card2, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  text-align: center;
  color: var(--ink, #0f172a);
  transition: all 0.15s ease;
  user-select: none;
  min-width: 0;
  white-space: nowrap;
}
.md-tool-card:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
  transform: translateY(-1px);
}
.md-tool-card:active {
  transform: translateY(0);
}
.md-tool-card svg {
  flex-shrink: 0;
  color: currentColor;
}
.md-tool-card span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-tool-card.md-tool-attended {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.admin-overlay.dark-mode .md-tool-card,
body.dark-mode .md-tool-card {
  background: var(--card2, #1c1917);
  border-color: var(--line, #292524);
  color: var(--ink, #f1f5f9);
}
.admin-overlay.dark-mode .md-tool-card:hover,
body.dark-mode .md-tool-card:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* ===== FLOOR & TABLE MANAGER (IMAGE 2 DESIGN) ===== */
.tm-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  width: 100%;
}

.tm-card-v2 {
  background: var(--card, #1c1917);
  border: 1px solid var(--line, #332f2b);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}
.tm-card-v2:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.tm-card-v2.tm-occupied {
  border-color: rgba(239, 68, 68, 0.3);
}
.tm-card-v2.tm-occupied:hover {
  border-color: rgba(239, 68, 68, 0.55);
}
.tm-card-v2.tm-free {
  border-color: rgba(16, 185, 129, 0.25);
}
.tm-card-v2.tm-free:hover {
  border-color: rgba(16, 185, 129, 0.5);
}

.tm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-bottom: 2px solid var(--line, rgba(255, 255, 255, 0.18));
  color: var(--muted, #94a3b8);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
body:not(.dark-mode) .tm-kbd {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.tm-quick-order-btn {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.28);
  transition: all 0.15s ease;
  user-select: none;
}
.tm-quick-order-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.38);
}
.tm-quick-order-btn:active {
  transform: translateY(0);
}

.tm-tab-btn {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 10px;
  background: var(--card2, #292524);
  color: var(--ink, #ffffff);
  border: 1px solid var(--line, #44403c);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
  user-select: none;
}
.tm-tab-btn:hover {
  background: var(--line, #44403c);
  transform: translateY(-1px);
}
.tm-tab-btn:active {
  transform: translateY(0);
}

.tm-filter-pill-v2 {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  user-select: none;
}
.tm-filter-pill-v2.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

/* Mobile Responsive Master-Detail Toggles */
.mobile-md-tabs {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--line);
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 15px;
}
.mobile-md-tabs .md-tab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mobile-md-tabs .md-tab-btn.active {
  background: var(--gold);
  color: #000 !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}
.md-mobile-back-row {
  display: none;
  margin-bottom: 12px;
}
.md-mobile-back-row .back-btn {
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.md-mobile-back-row .back-btn:hover {
  background: var(--line);
}

@media (min-width: 680px) {
  .master-detail-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .master-detail-layout .md-order-list {
    display: flex !important;
  }
  .master-detail-layout .md-order-details-container,
  .master-detail-layout .md-order-details {
    display: block !important;
  }
  .mobile-md-tabs {
    display: none !important;
  }
  .md-mobile-back-row {
    display: none !important;
  }
}

@media (max-width: 679px) {
  .master-detail-layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    gap: 10px !important;
  }
  .mobile-md-tabs {
    display: grid !important;
    margin-bottom: 8px !important;
    padding: 3px !important;
  }
  .mobile-md-tabs .md-tab-btn {
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
  .md-mobile-back-row {
    display: block !important;
    margin-bottom: 8px !important;
  }
  .md-mobile-back-row .back-btn {
    padding: 6px 10px !important;
    font-size: 11.5px !important;
  }
  .master-detail-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .master-detail-layout.view-list .md-order-list {
    display: flex !important;
    width: 100% !important;
    max-height: none !important;
    min-height: calc(100vh - 130px) !important;
    min-height: calc(100dvh - 130px) !important;
  }
  .master-detail-layout.view-list .md-order-details-container,
  .master-detail-layout.view-list .md-order-details {
    display: none !important;
  }
  .master-detail-layout.view-details .md-order-list {
    display: none !important;
  }
  .master-detail-layout.view-details .md-order-details-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  .master-detail-layout.view-details .md-order-details {
    display: block !important;
    padding: 12px 10px 24px !important;
    border-radius: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100vh - 130px) !important;
    min-height: calc(100dvh - 130px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .md-order-list {
    max-height: none !important;
    min-height: calc(100vh - 130px) !important;
    min-height: calc(100dvh - 130px) !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .tm-header-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .tm-actions-bar {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .tm-actions-bar button {
    padding: 8px 6px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }
  .tm-grid-v2 {
    grid-template-columns: 1fr !important;
  }
}
.md-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  padding-right: 4px;
}
.md-order-list::-webkit-scrollbar {
  width: 5px;
}
.md-order-list::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.25);
  border-radius: 8px;
}
.md-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.md-order-item:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.04);
  transform: translateY(-1px);
}
.md-order-item.active {
  border-color: var(--gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.12);
}
.md-oi-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.md-oi-content {
  flex: 1;
  min-width: 0;
}
.md-order-details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.md-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.md-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 20px;
  background: rgba(0, 0, 0, 0.12);
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.md-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.md-step-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  transition: all 0.2s ease;
}
.md-step.completed .md-step-icon {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.md-step.current .md-step-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: #000;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.md-step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.md-step.completed .md-step-label,
.md-step.current .md-step-label {
  color: var(--ink);
  font-weight: 800;
}
.md-step-line {
  flex: 1;
  height: 2px;
  background: var(--line);
  margin: 0 8px;
  margin-top: -14px;
}
.md-step-line.completed {
  background: #10b981;
}
.md-items-list {
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  max-height: 280px;
  overflow-y: auto;
}
.md-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.md-qty-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 4px;
}
.md-qty-ctrl button {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.md-qty-ctrl button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.md-qty-ctrl .qty-val {
  min-width: 18px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
}
.md-totals {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

/* Embedded Waiter Calls Strip in Queue List (Image 2 Way - No Scrolling) */
.md-waiter-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(217, 119, 6, 0.06));
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
}
.md-wb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.md-wb-bell {
  animation: bellRingAnim 1.8s ease-in-out infinite;
  display: inline-block;
  font-size: 14px;
}
.md-wb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-wb-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--card, #ffffff);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.md-wb-item:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
}
.md-wb-badge {
  background: #f59e0b;
  color: #000000;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.md-wb-attend-btn {
  background: #10b981;
  color: #ffffff;
  border: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.md-wb-attend-btn:hover {
  background: #059669;
  transform: scale(1.03);
}

/* Call Active Badge on Left Order Items */
.md-oi-call-badge {
  background: #f59e0b;
  color: #000;
  font-size: 9.5px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  animation: pulseCallBadge 1.5s infinite;
}
@keyframes pulseCallBadge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.97); }
}

/* Detail Panel Waiter Call Strip (Right inside Active Order Details) */
.md-detail-waiter-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.1));
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.md-dwb-btn {
  background: #10b981;
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.md-dwb-btn:hover {
  background: #059669;
  transform: scale(1.04);
}

/* Unified Compact Receipt Card (Image inspiration & Apple/Google design ergonomics) */
.md-receipt-card {
  background: var(--card2, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.admin-overlay.dark-mode .md-receipt-card,
body.dark-mode .md-receipt-card {
  background: var(--card2, #111827) !important;
  border-color: var(--line, #1f2937) !important;
}
.md-receipt-items-scroll {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}
.md-receipt-items-scroll::-webkit-scrollbar {
  width: 5px;
}
.md-receipt-items-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 4px;
}
.md-receipt-summary-bar {
  border-top: 1px dashed var(--line, #cbd5e1);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Compact Milestone Stepper (Image 2 Design) */
.md-stepper-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 8px;
  padding: 6px 12px;
  background: var(--card2, #f8fafc);
  border-radius: 12px;
  border: 1px solid var(--line, #e2e8f0);
  width: 100%;
  box-sizing: border-box;
}
.admin-overlay.light-mode .md-stepper-compact,
.admin-overlay:not(.dark-mode) .md-stepper-compact {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.admin-overlay.dark-mode .md-stepper-compact,
body.dark-mode .md-stepper-compact {
  background: var(--card2, #1c1917) !important;
  border-color: var(--line, #292524) !important;
}

/* Compact Add Item Button with SVG (User request) */
.md-compact-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: #2563eb;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1;
}
.md-compact-add-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.admin-overlay.dark-mode .md-compact-add-btn,
body.dark-mode .md-compact-add-btn {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}
.admin-overlay.dark-mode .md-compact-add-btn:hover,
body.dark-mode .md-compact-add-btn:hover {
  background: #3b82f6;
  color: #ffffff;
}

/* Compact SVG-Only Action Buttons (Add / Remove) */
.md-compact-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.md-add-item-btn {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #2563eb;
}
.md-add-item-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: scale(1.05);
}
.admin-overlay.dark-mode .md-add-item-btn,
body.dark-mode .md-add-item-btn {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.45);
  color: #60a5fa;
}
.admin-overlay.dark-mode .md-add-item-btn:hover,
body.dark-mode .md-add-item-btn:hover {
  background: #3b82f6;
  color: #ffffff;
}

.md-remove-item-btn {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
.md-remove-item-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: scale(1.05);
}
.admin-overlay.dark-mode .md-remove-item-btn,
body.dark-mode .md-remove-item-btn {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
}
.admin-overlay.dark-mode .md-remove-item-btn:hover,
body.dark-mode .md-remove-item-btn:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Horizontal Quantity Stepper Capsule (Apple / Google Material 3 / Image inspiration) */
.md-horizontal-qty-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #cbd5e1;
  border-radius: 8px;
  padding: 3px 8px;
  gap: 10px;
  min-width: 86px;
  height: 32px;
  user-select: none;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.admin-overlay.dark-mode .md-horizontal-qty-stepper,
body.dark-mode .md-horizontal-qty-stepper {
  background: #334155 !important;
}
.md-hqty-btn {
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  transition: background 0.12s ease, transform 0.1s ease;
}
.admin-overlay.dark-mode .md-hqty-btn,
body.dark-mode .md-hqty-btn {
  color: #f8fafc !important;
}
.md-hqty-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.md-hqty-btn:active {
  transform: scale(0.88);
}
.md-hqty-num {
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
  font-family: inherit;
  min-width: 18px;
  text-align: center;
  line-height: 1;
}
.admin-overlay.dark-mode .md-hqty-num,
body.dark-mode .md-hqty-num {
  color: #f8fafc !important;
}

/* Item Selection Checkbox */
.md-item-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.8px solid #cbd5e1;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.md-item-checkbox:hover {
  border-color: #2563eb;
}
.md-item-checkbox.checked {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}
.admin-overlay.dark-mode .md-item-checkbox,
body.dark-mode .md-item-checkbox {
  background: #1e293b;
  border-color: #475569;
}
.admin-overlay.dark-mode .md-item-checkbox.checked,
body.dark-mode .md-item-checkbox.checked {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

/* Item Card Container */
.md-order-item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.admin-overlay.dark-mode .md-order-item-card,
body.dark-mode .md-order-item-card {
  background: #1e293b;
  border-color: #334155;
}
.md-order-item-card.selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.04);
}

/* Vertical Quantity Stepper (+ on top, count in middle, - on bottom) */
.md-vertical-qty-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 26px;
  height: 58px;
  background: var(--card, #ffffff);
  border: 1.5px solid var(--line, #cbd5e1);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  user-select: none;
  box-sizing: border-box;
}
.admin-overlay.dark-mode .md-vertical-qty-stepper,
body.dark-mode .md-vertical-qty-stepper {
  background: var(--card2, #1e293b) !important;
  border-color: var(--line, #334155) !important;
}
.md-vqty-btn {
  width: 100%;
  height: 19px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink, #0f172a);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.md-vqty-btn:hover {
  background: rgba(37, 99, 235, 0.16);
  color: #2563eb;
}
.md-vqty-btn:active {
  background: rgba(37, 99, 235, 0.32);
  transform: scale(0.92);
}
.md-vqty-num {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--ink, #0f172a);
  font-family: ui-monospace, SFMono-Regular, monospace;
  line-height: 1;
  text-align: center;
  padding: 1px 0;
}

/* Interactive Sheet Cell for Price (Behaves like Excel / Sheets cell) */
.md-sheet-price-cell {
  position: relative;
  background: var(--bg, #f8fafc);
  border: 1.5px solid var(--line, #cbd5e1);
  border-radius: 6px;
  padding: 3px 8px;
  min-width: 66px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}
.md-sheet-price-cell:hover {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.05);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}
.md-sheet-price-cell:active {
  transform: scale(0.97);
}
.admin-overlay.dark-mode .md-sheet-price-cell,
body.dark-mode .md-sheet-price-cell {
  background: #0f172a !important;
  border-color: #334155 !important;
}
.admin-overlay.dark-mode .md-sheet-price-cell:hover,
body.dark-mode .md-sheet-price-cell:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important;
}
.md-sheet-cell-total {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink, #0f172a);
  font-family: ui-monospace, SFMono-Regular, monospace;
  line-height: 1.1;
}
.md-sheet-cell-edit-cue {
  font-size: 9px;
  font-weight: 800;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 1px;
}

/* Milestone Staff Tooltip / Popover on Mobile & Desktop */
.md-step-item {
  position: relative;
}
.md-step-staff-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 100;
  text-align: center;
}
.md-step-staff-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}
.md-step-item:hover .md-step-staff-tooltip,
.md-step-item:focus .md-step-staff-tooltip,
.md-step-item:active .md-step-staff-tooltip {
  display: block;
}

/* Light mode overrides for waiter banners */
.admin-overlay.light-mode .md-wb-item,
.admin-overlay:not(.dark-mode) .md-wb-item {
  background: #ffffff !important;
  border-color: #fde68a !important;
}
.admin-overlay.light-mode .md-receipt-card,
.admin-overlay:not(.dark-mode) .md-receipt-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.admin-overlay.light-mode .md-stepper-compact,
.admin-overlay:not(.dark-mode) .md-stepper-compact {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.staff-resp-card:hover {
  border-color: rgba(59, 130, 246, 0.5) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}
.staff-pick-btn:hover {
  border-color: var(--gold) !important;
  background: rgba(212, 175, 55, 0.16) !important;
}
.md-main-cta {
  width: 100%;
  padding: 13px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.2);
}

.pay-history-row {
  display: grid;
  grid-template-columns: 1.5fr 0.6fr 2fr 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: center;
  font-size: 13px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.pay-history-row:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border-color: var(--gold-light);
}

.pay-history-header {
  display: grid !important;
  grid-template-columns: 1.5fr 0.6fr 2fr 1fr 1fr !important;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg2, rgba(0,0,0,0.02));
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.pay-overview-grid {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.pay-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px;
}

@media (max-width: 900px) {
  .pay-history-header {
    display: none !important;
  }
  .pay-history-row {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }
  .pay-history-row > div:nth-child(2) {
    display: none !important;
  }
  .pay-overview-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .payment-group {
    padding: 12px !important;
  }
  .payment-order-line {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .payment-order-line > div:last-child {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-top: 4px !important;
    border-top: 1px dashed var(--line) !important;
    padding-top: 6px !important;
  }
  .payment-group-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .payment-group-foot > div {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

@media (max-width: 600px) {
  .pay-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .pay-history-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .pay-history-row > div:nth-child(1) {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
  }
  .pay-history-row > div:nth-child(2) {
    display: none !important;
  }
  .pay-history-row > div:nth-child(3) {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    border-top: 1px dashed var(--line) !important;
    padding-top: 6px !important;
    margin-top: 2px !important;
  }
  .pay-history-row > div:nth-child(4) {
    display: none !important;
  }
  .pay-history-row > div:nth-child(5) {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .pay-history-row > div:nth-child(5) b {
    font-size: 16px !important;
  }
}

/* QR Designer Card Frames */
.qr-card {
  position: relative !important;
  overflow: visible !important;
}
.qr-card.frame-classic {
  border: 1.5px solid var(--line);
}
.qr-card.frame-vintage {
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: linear-gradient(135deg, #ffffff 0%, #fffdf9 100%);
}
.qr-card.frame-chef {
  border: 1px solid var(--line);
  background: #ffffff;
  padding-top: 24px;
}
.qr-card.frame-modern {
  border: none !important;
  background: #f8fafc;
  padding-bottom: 24px;
}
.qr-card.frame-floral {
  border: 1px solid rgba(220, 160, 20, 0.15);
  background: linear-gradient(to bottom, #ffffff, #fffefc);
}

/* ===== FLOATING WATERMARK WAITER CALL BADGE (Framer / Lovable / Bolt style) ===== */
.floating-waiter-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
  font-family: inherit;
}

.floating-waiter-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 16px rgba(245, 158, 11, 0.25);
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}

.floating-waiter-fab:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: #f59e0b;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(245, 158, 11, 0.4);
}

.floating-waiter-fab:active {
  transform: translateY(0) scale(0.97);
}

.fwb-ping {
  position: absolute;
  top: 9px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  opacity: 0.75;
  animation: fwbPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.fwb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  box-shadow: 0 0 8px #f59e0b;
}

@keyframes fwbPing {
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.floating-waiter-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 350px;
  max-width: calc(100vw - 32px);
  max-height: 480px;
  background: var(--card, #1c1917);
  border: 1.5px solid var(--line, rgba(255, 255, 255, 0.15));
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000000;
  animation: fwbPopupIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

@keyframes fwbPopupIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fwp-item {
  background: var(--card2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fwp-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fwp-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.fwp-btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fwp-btn-attend {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 8px;
  background: #10b981;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.fwp-btn-snooze {
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  background: var(--card, #1c1917);
  color: var(--muted, #94a3b8);
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  cursor: pointer;
  transition: all 0.15s ease;
}

/* ==========================================================================
   PURE FLOATING 3D MODEL SYSTEM (Seamless In-Air Display, Zero Box/Container)
   ========================================================================== */
.hero-stage,
.hero-stage:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.hero-table-bg,
.hero-stage-top-glow,
.hero-stage:before,
.hero-stage:after {
  display: none !important;
}

#heroModelViewer,
model-viewer {
  --poster-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Subtle contact occlusion shadow beneath floating 3D food item */
.hero-table-contact-shadow {
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 45%, transparent 70%) !important;
  filter: blur(8px) !important;
  pointer-events: none !important;
}

/* ==========================================================================
   MINIMALIST QR CODE CARDS (Pure QR Code & Clean Restro Name, No Heavy Boxes)
   ========================================================================== */
.qr-card-pure,
.qr-card.clean-minimal {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 6px !important;
}

.qr-card-pure .qr-header,
.qr-card-pure .qr-footer,
.qr-card-pure .qr-scan-badge,
.qr-card-pure .qr-decor-top,
.qr-card-pure .qr-decor-bottom {
  display: none !important;
}

.qr-card-pure .qr-restro-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-top: 8px !important;
  letter-spacing: 0.02em !important;
  color: var(--ink, #0f172a) !important;
}

@media print {
  .qr-card-pure,
  .qr-card.clean-minimal {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   ARCHETYPE DECK & ANDROID-TIER MORPHING PROVISIONING PIPELINE (Phase 1)
   Ultra-High-Grade Micro-Interactions, 60fps Animations & Fluid Feedback
   ========================================================================== */

.saas-preset-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

@media(max-width: 640px) {
  .saas-preset-deck {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .saas-preset-card {
    min-width: 170px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

.saas-preset-card {
  position: relative;
  background: var(--card2, rgba(255, 255, 255, 0.03));
  border: 1.5px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.saas-preset-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.saas-preset-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.saas-preset-card:hover::before {
  opacity: 1;
}

.saas-preset-card.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold, #d4af37);
  box-shadow: 0 0 0 2px var(--gold, #d4af37), 0 10px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-3px) scale(1.02);
}

.saas-preset-card .card-art-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.25s ease;
}

.saas-preset-card:hover .card-art-box,
.saas-preset-card.active .card-art-box {
  transform: scale(1.08);
}

.saas-preset-card .card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink, #ffffff);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

.saas-preset-card .card-subtitle {
  font-size: 10.5px;
  color: var(--muted, #a8a29e);
  line-height: 1.3;
  margin-bottom: 8px;
}

.saas-preset-card .card-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 8px;
  align-self: flex-start;
  text-transform: uppercase;
}

/* Plan Selection Cards inside Creation Modal */
.saas-create-plan-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.saas-create-plan-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saas-create-plan-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.saas-create-plan-card.active {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--gold, #d4af37);
  box-shadow: 0 0 0 1.5px var(--gold, #d4af37), 0 8px 20px rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.saas-create-plan-card[data-plan="trial"].active {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
  box-shadow: 0 0 0 1.5px #38bdf8, 0 8px 20px rgba(56, 189, 248, 0.2);
}

.saas-create-plan-card[data-plan="starter"].active {
  background: rgba(248, 113, 113, 0.1);
  border-color: #f87171;
  box-shadow: 0 0 0 1.5px #f87171, 0 8px 20px rgba(248, 113, 113, 0.2);
}

.saas-create-plan-card[data-plan="enterprise"].active {
  background: rgba(192, 132, 252, 0.12);
  border-color: #c084fc;
  box-shadow: 0 0 0 1.5px #c084fc, 0 8px 20px rgba(192, 132, 252, 0.2);
}

.saas-create-plan-card .plan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.saas-create-plan-card .plan-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink, #ffffff);
}

.saas-create-plan-card .plan-price {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-light, #fbbf24);
}

.saas-create-plan-card .plan-desc {
  font-size: 10.5px;
  color: var(--muted, #a8a29e);
  line-height: 1.3;
}

/* ==========================================================================
   PROVISIONING HUD & MORPHING PIPELINE ANIMATIONS
   ========================================================================== */

@keyframes hudPulseRing {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.9; filter: drop-shadow(0 0 16px var(--hud-glow, #d4af37)); }
  100% { transform: scale(0.95); opacity: 0.5; }
}

@keyframes hudSpinOrbital {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes hudShimmerBar {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hudStepSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hudCheckPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.hud-pipeline-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.hud-step-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: hudStepSlideIn 0.35s ease forwards;
}

.hud-step-row.pending {
  opacity: 0.45;
  filter: grayscale(0.5);
}

.hud-step-row.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--gold, #d4af37);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(212, 175, 55, 0.1);
}

.hud-step-row.done {
  opacity: 1;
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.04);
}

.hud-step-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.hud-step-row.active .hud-step-icon-wrap {
  border-color: var(--gold, #d4af37);
  background: rgba(212, 175, 55, 0.15);
  animation: hudPulseRing 1.5s infinite ease-in-out;
}

.hud-step-row.done .hud-step-icon-wrap {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  animation: hudCheckPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hud-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.hud-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37, #f59e0b, #fbbf24, #d4af37);
  background-size: 200% 100%;
  animation: hudShimmerBar 2s linear infinite;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   NEXT-GEN MODERN OS SUITE: WINDOWS, DROPDOWNS, DIALOGS & MICRO-ICONS
   ========================================================================== */

/* 1. Next-Gen Operating System Dropdowns & Selects across All Screens */
#roleSwitcherWrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

#roleSwitcher {
  background: color-mix(in srgb, var(--card) 88%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  background-size: 16px 16px !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 999px !important;
  padding: 8px 36px 8px 18px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.22s var(--os-spring-smooth) !important;
}
#roleSwitcher:hover {
  border-color: var(--gold) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.28) !important;
}

#drawerTableSelect {
  background: color-mix(in srgb, var(--card) 86%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center !important;
  background-size: 16px 16px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 13px 44px 13px 18px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
#drawerTableSelect:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3), inset 0 0 0 1px var(--gold) !important;
}

#dashTrendRange, #adminMenuCatFilter, #adminMenuStockFilter, #orderFilter, #orderSort, #orderToolsSettingsDropdown {
  background: color-mix(in srgb, var(--card) 88%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 14px 14px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 8px 34px 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  transition: all 0.2s var(--os-spring-smooth) !important;
}
#dashTrendRange:hover, #adminMenuCatFilter:hover, #adminMenuStockFilter:hover, #orderFilter:hover, #orderSort:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.18) !important;
  transform: translateY(-1px) !important;
}

#quickPrinterActiveModeSelect, #quickBillPaperSelect, #quickKotPaperSelect, #staffVoiceLangSelect {
  background: color-mix(in srgb, var(--card) 85%, transparent) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 6px 26px 6px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  backdrop-filter: blur(16px) !important;
}

/* 2. Unified Modern OS Modal Windows & Sheets */
.modal-overlay, .modal-backdrop {
  backdrop-filter: blur(24px) saturate(180%) brightness(0.68) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(0.68) !important;
  animation: osModalFadeIn 0.28s var(--os-spring-smooth) forwards !important;
}
@keyframes osModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content, .modal-card, .admin-modal, #tableDetailModal .modal-sheet {
  border-radius: 28px !important;
  border: 1.5px solid var(--line) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  animation: osModalCardSpringIn 0.38s var(--os-spring-expressive) forwards !important;
}
@keyframes osModalCardSpringIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
  }
  70% {
    opacity: 1;
    transform: scale(1.01) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 3. Micro-Icon Animations & Dynamic Badges */
.admin-tab svg, .sub-tab-btn svg, .rush-tab-btn svg, .ghost-btn svg, .category-pill svg {
  transition: transform 0.24s var(--os-spring-expressive) !important;
}
.admin-tab:hover svg, .sub-tab-btn:hover svg, .rush-tab-btn:hover svg, .ghost-btn:hover svg, .category-pill:hover svg {
  transform: scale(1.2) rotate(4deg) !important;
}

/* Spring Badge Counter Pop */
.tab-count, .badge-count, .cart-count, #cartCount, #rushCountBadge, #kdsCountBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  animation: badgeSpringPop 0.35s var(--os-spring-expressive) backwards;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@keyframes badgeSpringPop {
  0% { transform: scale(0.5); opacity: 0; }
  75% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* Dynamic Live Pulsing Indicator Dots */
.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: osPulseDotWave 2s infinite;
}
@keyframes osPulseDotWave {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   MODERN OS FLOATING CONTROL STRIP (QUICK SETTINGS CAPSULE)
   ========================================================================== */
.os-quick-control-strip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--card, #121216) 88%, transparent);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--line, rgba(255,255,255,0.14));
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: all 0.25s var(--os-spring-smooth);
}
.os-quick-control-strip:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(212,175,55,0.22);
}
.os-ctrl-pill-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.18s ease, transform 0.18s var(--os-spring-expressive);
}
.os-ctrl-pill-btn:hover {
  background: color-mix(in srgb, var(--card2) 80%, transparent);
  transform: scale(1.12);
}
.os-ctrl-pill-btn:active {
  transform: scale(0.9);
}

/* ==========================================================================
   GLOBAL CLOUD SYNC & REAL-TIME HEALTH STATUS PILL
   ========================================================================== */
.cloud-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 9999px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.25s var(--os-spring-smooth);
}
.cloud-status-pill.online {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
}
.cloud-status-pill.syncing {
  border-color: rgba(212, 175, 55, 0.4);
  color: var(--gold-light, #fbbf24);
  background: rgba(212, 175, 55, 0.08);
}
.cloud-status-pill.offline {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.cloud-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: osPulseDotWave 1.8s infinite;
}
.cloud-spin-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
  font-weight: 900;
}

/* ==========================================================================
   HIGH-PERFORMANCE LOW-END MOBILE & BUDGET GPU ACCELERATION ENGINE
   (Optimized for Nokia 3.1 Plus, MediaTek, budget Android & 2GB RAM devices)
   ========================================================================== */
@media (max-width: 768px) {
  /* Fast GPU compositing & skip painting off-screen elements until visible */
  .menu-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 320px;
    contain: layout style;
  }

  .vm9-section,
  .saas-feature-grid,
  .saas-pricing-grid,
  .brand-bio-section,
  .vm9-faq-item {
    content-visibility: auto;
    contain-intrinsic-size: 1px 250px;
  }

  /* Eliminate expensive frame-buffer readback from excessive backdrop-filters */
  .menu-list-layout .menu-card,
  .menu-list-layout .menu-card-compact,
  .menu-list-layout .menu-card-dense,
  .hero-card,
  .pricing-plan-card,
  .vm9-feature-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0);
  }

  /* Smooth 60fps scrolling */
  html, body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
  }
}