/* Built from src/css by `npm run build` — edit the files there, not this one. */
    /* ===== CAPACITOR / MOBILE PERFORMANCE ===== */
    @media (max-width: 768px),
    (hover: none) {

      /* Kill backdrop-filter on mobile — saves massive GPU */
      .toast,
      .modal-bg,
      .tnav,
      .wallet-chip,
      .bnav,
      .hero-btn-secondary,
      .hero-chip,
      .profile-avatar,
      .vendor-stat,
      .unavail-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      /* Solid backgrounds instead of translucent + blur */
      .tnav {
        background: #140600 !important;
      }

      .bnav {
        background: #fff !important;
      }

      .modal-bg {
        background: rgba(15, 23, 42, .7) !important;
      }

      .toast {
        background: #0F172A !important;
      }

      /* Reduce animation durations */
      *,
      *::before,
      *::after {
        animation-duration: 0.15s !important;
        transition-duration: 0.1s !important;
      }

      /* Disable stagger animations */
      .menu-item,
      .hostel-card,
      .order-card {
        animation: none !important;
      }

      /* Hardware acceleration for scrolling */
      .scroll,
      .page {
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
      }
    }

    /* ===== CAPACITOR SAFE AREA ===== */
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bnav {
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* ===== MOBILE SCROLL NUCLEAR FIX ===== */
    html,
    body {
      overflow-y: scroll !important;
      height: auto !important;
      min-height: 100% !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .screen.active {
      display: block !important;
      min-height: 100vh !important;
      min-height: 100dvh !important;
      height: auto !important;
      overflow: visible !important;
      background: #F2EDE6;
    }

    .page,
    .page-wide {
      height: auto !important;
      overflow: visible !important;
    }

    /* Vendor, Kitchen, Admin — flex column layout with internal scroll */
    #s-vendor.active,
    #s-kitchen.active,
    #s-admin.active {
      display: flex !important;
      flex-direction: column !important;
      height: 100vh !important;
      height: 100svh !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    #s-vendor.active>.scroll,
    #s-kitchen.active>.scroll,
    #s-admin.active>.scroll,
    #s-admin.active>.scroll.page-wide {
      flex: 1 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      min-height: 0 !important;
      height: auto !important;
    }

    #s-vendor.active>.vendor-header,
    #s-vendor.active>.kds-filterbar,
    #s-kitchen.active>.vendor-header,
    #s-kitchen.active>.kds-filterbar,
    #s-admin.active>.admin-header,
    #s-admin.active>.admin-nav {
      flex-shrink: 0 !important;
    }

    /* ===== END SCROLL FIX ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent
    }

    :root {
      --brand: #16A34A;
      --brand2: #0E8A44;
      --brand-l: #E8F6EC;
      --brand-m: #CDEBD8;
      --blue: #1E3A5F;
      --blue2: #0D2137;
      --blue-a: #2563EB;
      --blue-l: #EFF6FF;
      --green: #059669;
      --green-l: #ECFDF5;
      --green2: #047857;
      --amber: #D97706;
      --amber-l: #FFFBEB;
      --red: #DC2626;
      --red-l: #FEF2F2;
      --purple: #7C3AED;
      --purple-l: #F5F3FF;
      --dark: #0F172A;
      --dark2: #1E293B;
      --mid: #64748B;
      --muted: #94A3B8;
      --light: #F7F8FA;
      --light2: #EEF1F6;
      --white: #fff;
      --border: #E2E8F0;
      --border2: #CBD5E1;
      --r: 12px;
      --rl: 16px;
      --rxl: 20px;
      --rxxl: 24px;
      --sh: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .03);
      --shm: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
      --shl: 0 12px 40px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .06);
      --f: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --fh: 'Clash Display', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --ease: cubic-bezier(.4, 0, .2, 1);
      --ease-bounce: cubic-bezier(.34, 1.4, .64, 1);
    }

    /* RESET & BASE */
    body {
      font-family: var(--f);
      background: #F2EDE6;
      color: var(--dark);
      min-height: 100vh;
      overflow-x: hidden;
      font-size: 14px;
      line-height: 1.5
    }

    /* Subtle background pattern */
    .page {
      padding: 14px 14px calc(130px + env(safe-area-inset-bottom, 0px));
      max-width: 520px;
      width: 100%;
      margin: 0 auto;
      position: relative
    }

    #tab-home {
      padding: 0 0 calc(130px + env(safe-area-inset-bottom, 0px))
    }

    /* Hero entrance */
    .hero {
      animation: slideUp .5s var(--ease)
    }

    .search-bar {
      animation: slideUp .5s var(--ease) .1s backwards
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: var(--fh)
    }

    button {
      cursor: pointer;
      font-family: var(--f);
      border: none;
      background: none;
      outline: none
    }

    input,
    select,
    textarea {
      font-family: var(--f);
      outline: none
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .hidden {
      display: none !important
    }

    img {
      display: block
    }

    /* SCREENS */
    .screen {
      display: none;
      background: var(--light)
    }

    .screen.active {
      display: block;
      min-height: 100svh
    }

    /* Mobile scroll fix */
    html {
      height: 100%
    }

    body {
      min-height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .screen-slide {
      animation: slideUp .28s cubic-bezier(.34, 1.2, .64, 1)
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes spinA {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes pulse2 {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.04)
      }
    }

    @keyframes blink2 {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, .35)
      }

      70% {
        box-shadow: 0 0 0 10px rgba(22, 163, 74, 0)
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% 0
      }

      100% {
        background-position: 200% 0
      }
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-4px)
      }
    }

    @keyframes popIn {
      0% {
        transform: scale(.85);
        opacity: 0
      }

      80% {
        transform: scale(1.04)
      }

      100% {
        transform: scale(1);
        opacity: 1
      }
    }

    @keyframes tickle {

      0%,
      100% {
        transform: rotate(0)
      }

      25% {
        transform: rotate(-8deg)
      }

      75% {
        transform: rotate(8deg)
      }
    }

    /* SCROLLBARS */
    .scroll {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain
    }

    .scroll::-webkit-scrollbar {
      width: 3px
    }

    .scroll::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 3px
    }

    .scroll-x {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none
    }

    .scroll-x::-webkit-scrollbar {
      display: none
    }

    /* ─── TOAST SYSTEM ─── */
    #toast-wrap {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      width: calc(100% - 32px);
      max-width: 400px
    }

    .toast {
      background: rgba(15, 23, 42, .92);
      backdrop-filter: blur(12px);
      color: #fff;
      padding: 13px 18px;
      border-radius: 14px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 8px 32px rgba(15, 23, 42, .25);
      animation: slideUp .3s var(--ease-bounce);
      pointer-events: all;
      border-left: 3px solid var(--brand)
    }

    .toast.success {
      border-left-color: var(--green)
    }

    .toast.error {
      border-left-color: var(--red)
    }

    .toast.info {
      border-left-color: var(--blue-a)
    }

    .toast.warn {
      border-left-color: var(--amber)
    }

    .toast-icon {
      font-size: 16px;
      flex-shrink: 0
    }

    .toast-out {
      animation: fadeOut .3s ease forwards
    }

    @keyframes fadeOut {
      to {
        opacity: 0;
        transform: translateY(-8px)
      }
    }

    /* ─── MODAL ─── */
    .modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .55);
      z-index: 800;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: fadeIn .2s ease;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px)
    }

    .modal-bg.center {
      align-items: center;
      padding: 20px
    }

    .modal {
      background: var(--white);
      border-radius: var(--rxxl) var(--rxxl) 0 0;
      width: 100%;
      max-width: 520px;
      max-height: 90svh;
      overflow-y: auto;
      animation: slideUp .35s var(--ease-bounce);
      box-shadow: 0 -8px 40px rgba(15, 23, 42, .15);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    .modal-bg.center .modal {
      border-radius: var(--rxxl);
      max-height: 85svh;
      box-shadow: var(--shl)
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 0;
      margin-bottom: 16px
    }

    .modal-title {
      font-family: var(--fh);
      font-size: 18px;
      font-weight: 700
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--light2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--mid);
      transition: .2s
    }

    .modal-close:hover {
      background: var(--border);
      color: var(--dark)
    }

    .modal-body {
      padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px))
    }

    /* ─── OPENING SCREEN — the SLP Hospitality logo ───
       The logo is the owner's own artwork, cut out of the photo they sent
       (assets/splash/mark.webp + wordmark.webp, white keyed to transparent)
       — never redraw it. The cream, the orange corner curves with their gold
       edge and the food icons are cut from the 2026-09-17 concept image; its
       re-drawn gold logo and baked-in text are deliberately NOT used, so the
       real logo stays the real logo and the words scale on every phone.
       Everything animates once and then stays still: a looping float here
       read as the logo shaking on the owner's phone. */
    #s-loading {
      background: linear-gradient(152deg, #FFFAF2 0%, #FEF5E7 46%, #F4E3CE 100%);
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden
    }

    /* Pinned to the viewport, not laid out in the page: body carries
       padding-bottom: env(safe-area-inset-bottom) for the gesture bar, and a
       full-height child inside it ends that far below the screen — which is
       exactly where the bottom-right curve went on the owner's phone. */
    #s-loading.active {
      display: flex !important;
      position: fixed;
      inset: 0;
      z-index: 9000;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 0
    }

    /* The crops carry their own cream, so they are faded out along their
       inner edge and melt into the page instead of ending on a seam. */
    .sp-corner {
      position: absolute;
      width: 62%;
      max-width: 340px;
      height: auto;
      pointer-events: none;
      opacity: 0
    }

    /* Faded from the corner outwards in BOTH directions — a diagonal fade
       alone leaves the crop's own straight edges showing as a rectangle. */
    .sp-corner-tl {
      top: 0;
      left: 0;
      -webkit-mask-image: radial-gradient(125% 125% at 0% 0%, #000 42%, transparent 86%);
      mask-image: radial-gradient(125% 125% at 0% 0%, #000 42%, transparent 86%)
    }

    .sp-corner-br {
      right: 0;
      bottom: 0;
      width: 52%;
      max-width: 292px;
      -webkit-mask-image: radial-gradient(125% 125% at 100% 100%, #000 42%, transparent 86%);
      mask-image: radial-gradient(125% 125% at 100% 100%, #000 42%, transparent 86%)
    }

    .sp-stage {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 24px
    }

    .sp-mark-wrap {
      position: relative;
      display: inline-block;
      line-height: 0
    }

    .sp-mark {
      display: block;
      width: clamp(152px, 41vw, 224px);
      height: auto;
      opacity: 0;
      transform: scale(.86) translateY(10px);
      filter: drop-shadow(0 12px 24px rgba(234, 88, 12, .18))
    }

    /* A highlight that crosses the monogram once. It is masked by the logo
       itself, so it only lights the orange strokes, never the page. */
    .sp-sheen {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .92) 50%, transparent 64%);
      background-size: 260% 100%;
      background-position: 130% 0;
      -webkit-mask-image: url('/assets/splash/mark.webp?v=ad7192d8b7');
      mask-image: url('/assets/splash/mark.webp?v=ad7192d8b7');
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat
    }

    .sp-wordmark {
      display: block;
      width: clamp(248px, 74vw, 372px);
      height: auto;
      margin: 26px auto 0;
      opacity: 0;
      transform: translateY(12px)
    }

    /* Real progress, not a picture of it: it fills while the app loads. */
    .sp-bar {
      width: min(238px, 58vw);
      height: 5px;
      margin: 34px auto 0;
      border-radius: 999px;
      background: rgba(180, 130, 70, .18);
      overflow: hidden;
      opacity: 0
    }

    .sp-bar-fill {
      display: block;
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #E8380D, #F97316 55%, #FBBF24)
    }

    .sp-loading {
      margin-top: 14px;
      font-family: var(--f);
      font-size: clamp(9.5px, 2.8vw, 11.5px);
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #A9742F;
      opacity: 0
    }

    .sp-icons {
      position: absolute;
      left: 50%;
      /* clear of the bottom-right curve, which starts around 10% up */
      bottom: calc(13% + env(safe-area-inset-bottom, 0px));
      transform: translateX(-50%);
      width: min(304px, 78vw);
      height: auto;
      opacity: 0;
      pointer-events: none;
      -webkit-mask-image: radial-gradient(56% 86% at 50% 50%, #000 34%, transparent 88%);
      mask-image: radial-gradient(56% 86% at 50% 50%, #000 34%, transparent 88%)
    }

    #s-loading.sp-go .sp-corner {
      animation: spFade .9s ease .05s forwards
    }

    #s-loading.sp-go .sp-mark {
      animation: spMark .85s cubic-bezier(.2, .8, .25, 1.05) .05s forwards
    }

    #s-loading.sp-go .sp-sheen {
      animation: spSheen 1.15s ease-in-out .7s 1
    }

    #s-loading.sp-go .sp-wordmark {
      animation: spWord .7s cubic-bezier(.2, .8, .3, 1) .55s forwards
    }

    #s-loading.sp-go .sp-bar {
      animation: spFade .5s ease .95s forwards
    }

    #s-loading.sp-go .sp-bar-fill {
      animation: spFill 2.9s cubic-bezier(.25, .8, .3, 1) 1s forwards
    }

    #s-loading.sp-go .sp-loading {
      animation: spWord .6s ease 1.05s forwards
    }

    #s-loading.sp-go .sp-icons {
      animation: spIcons .8s ease 1.35s forwards
    }

    @keyframes spIcons {
      to { opacity: .85 }
    }

    #s-loading.sp-exit .sp-stage,
    #s-loading.sp-exit .sp-icons {
      animation: spOut .38s ease-in forwards
    }

    @keyframes spMark {
      to { opacity: 1; transform: scale(1) translateY(0) }
    }

    @keyframes spSheen {
      0%   { opacity: 0; background-position: 130% 0 }
      18%  { opacity: 1 }
      82%  { opacity: 1 }
      100% { opacity: 0; background-position: -30% 0 }
    }

    @keyframes spWord {
      to { opacity: 1; transform: translateY(0) }
    }

    @keyframes spFade {
      to { opacity: 1 }
    }

    @keyframes spFill {
      to { width: 100% }
    }

    @keyframes spOut {
      to { opacity: 0; transform: scale(1.06) }
    }

    /* No prefers-reduced-motion override here on purpose: many Android phones
       report it whenever battery saver or "remove animations" is on, and the
       owner wants the SLP Hospitality intro on every phone. */

    /* ─── LOGIN ─── */
    /* ─────────────────────────────────────────────
       LOGIN — white, green, illustrated.
       Brand green is scoped to this screen so the rest
       of the app keeps its existing palette.
       ───────────────────────────────────────────── */
    #s-login {
      --g: #16A34A;
      --g-dk: #0E8A44;
      --g-lt: #E8F6EC;
      --ink: #111827;
      --mut: #6B7280;
      --line: #E5E7EB;
      background: #ffffff;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      flex-direction: column
    }

    #s-login.active { display: flex !important }

    .login-card {
      background: transparent;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
      padding: 22px 20px 26px;
      flex: 1
    }

    /* Sits over the top-right of the card, across both the brand row and
       the welcome text — so both of those reserve room for it. */
    .lg-art {
      position: absolute;
      right: 0;
      top: 4px;
      width: min(186px, 43%);
      z-index: 0;
      display: block
    }

    .lg-art img {
      width: 100%;
      height: auto;
      display: block
    }

    .login-logo {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
      padding-right: 44%
    }

    .login-icon {
      width: 46px;
      height: 46px;
      background: linear-gradient(135deg, #2BC46A, #16A34A);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 8px 18px rgba(22, 163, 74, .30);
      flex-shrink: 0
    }

    .login-brand h2 {
      font-family: var(--fh);
      font-size: 21px;
      color: var(--ink);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -.3px;
      white-space: nowrap
    }

    /* Clash Display sets tight; without this the wordmark read "TribeStays" */
    .login-brand h2 { word-spacing: .14em }

    .login-brand h2 span { color: var(--g) }

    .login-brand p {
      font-size: 12px;
      color: var(--mut);
      margin-top: 3px
    }

    /* little green stroke above "Welcome!" */
    .lg-dash {
      display: block;
      width: 24px;
      height: 4px;
      border-radius: 4px;
      background: var(--g);
      margin-bottom: 12px;
      transform: rotate(-8deg)
    }

    .lg-welcome { position: relative; z-index: 1; padding-right: 42% }

    /* The artwork is absolutely positioned, so on wide phones and tablets
       (where the subtitle fits on one line) it hung below the welcome text
       and sat behind the email and password fields. Reserve its height:
       art width x aspect ratio, minus the brand row above the text. */
    #emp-main-login .lg-welcome { min-height: calc(min(186px, 43vw) * 1.4615 - 80px) }
    #emp-register .lg-welcome { min-height: calc(min(186px, 43vw) * 1.0954 - 80px) }

    .login-greeting {
      font-size: 14px;
      color: var(--g-dk);
      font-weight: 600;
      margin-bottom: 4px
    }

    .login-title {
      font-family: var(--fh);
      font-size: 33px;
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 6px;
      line-height: 1.12;
      letter-spacing: -.8px
    }

    .login-sub {
      font-size: 14.5px;
      color: var(--mut);
      margin-bottom: 20px;
      line-height: 1.45
    }

    /* the OTP and set-password steps have no art, so they get the full width */
    #emp-step2 .lg-welcome,
    #emp-set-pw .lg-welcome { padding-right: 0 }

    .role-tabs {
      display: flex;
      background: #F3F4F6;
      border-radius: 12px;
      padding: 4px;
      gap: 3px;
      margin-bottom: 20px
    }

    .role-tab {
      flex: 1;
      padding: 8px 6px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      color: var(--mut);
      transition: .2s
    }

    .role-tab.active {
      background: var(--g);
      color: #fff;
      box-shadow: 0 2px 10px rgba(22, 163, 74, .35)
    }

    .linp {
      width: 100%;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 15px 14px 15px 46px;
      color: var(--ink);
      font-size: 14.5px;
      font-family: var(--f);
      transition: .2s;
      margin-bottom: 12px;
      box-sizing: border-box
    }

    .linp:focus {
      border-color: var(--g);
      outline: none;
      box-shadow: 0 0 0 4px rgba(22, 163, 74, .10)
    }

    .linp::placeholder { color: #9CA3AF }

    .linp:-webkit-autofill,
    .linp:-webkit-autofill:hover,
    .linp:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
      -webkit-text-fill-color: var(--ink) !important;
      border-color: var(--line) !important;
      caret-color: var(--ink)
    }

    .linp-wrap { position: relative; margin-bottom: 0 }
    .linp-wrap .linp { margin-bottom: 0 }

    .linp-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: var(--g);
      pointer-events: none;
      display: flex;
      align-items: center
    }

    /* show/hide password */
    .linp-eye {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      color: #9CA3AF;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .linp-eye:hover { color: var(--mut) }

    .lg-forgot {
      font-size: 13px;
      color: var(--g);
      cursor: pointer;
      font-weight: 700
    }

    .login-btn {
      width: 100%;
      background: linear-gradient(180deg, #1BA85C 0%, #128C4A 100%);
      color: #fff;
      border: none;
      border-radius: 14px;
      padding: 16px;
      font-size: 16px;
      font-weight: 700;
      font-family: var(--fh);
      cursor: pointer;
      transition: all .25s;
      margin-top: 14px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 26px rgba(22, 163, 74, .32)
    }

    .login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(22, 163, 74, .42)
    }

    .login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none }

    /* "New student? Register here" with rules either side */
    .lg-reg {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 18px
    }

    .lg-reg::before,
    .lg-reg::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line)
    }

    .lg-reg span { font-size: 13px; color: var(--mut); white-space: nowrap }
    .lg-reg b { color: var(--g); cursor: pointer; font-weight: 700 }

    .login-hint {
      margin-top: 20px;
      padding: 12px 14px;
      background: #F9FAFB;
      border-radius: 10px;
      color: var(--mut);
      font-size: 11px;
      text-align: center;
      line-height: 1.7
    }

    .login-hint strong { color: #4B5563 }

    .login-err {
      color: #DC2626;
      font-size: 12px;
      text-align: center;
      line-height: 1.4
    }

    .login-err:not(:empty) { margin-top: 8px }

    /* round tinted icon badge sitting inside a field */
    .linp-badge {
      position: absolute;
      left: 9px;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #E8F6EC;
      color: #16A34A;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none
    }

    .linp.has-badge { padding-left: 58px }

    /* chevron for the hostel select */
    .linp-chev {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: #9CA3AF;
      pointer-events: none
    }

    select.linp {
      appearance: none;
      -webkit-appearance: none;
      background-image: none
    }

    .lg-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 600;
      color: var(--g);
      cursor: pointer;
      margin-bottom: 6px
    }

    .login-title em { font-style: normal; color: var(--g) }

    /* "Powered by" with a rule either side */
    .lg-powered {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px
    }

    .lg-powered::before,
    .lg-powered::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line)
    }

    /* handwritten "Good Food Good Vibes" */
    .lg-hand {
      font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive;
      fill: var(--g-dk)
    }

    @media (prefers-reduced-motion: reduce) {
      .lg-art { animation: none }
    }

    /* ═══ LOGIN v3 — matches the approved mockup (1024×1536) ═══════════
       Sizes are the mockup's pixels scaled by the card width (--cw / 1024),
       so the page keeps the mockup's proportions on every phone; text and
       touch targets have a floor so small phones stay readable. */
    #s-login { background: #FDFDFD }

    #s-login .login-card {
      --cw: min(480px, 100vw);
      padding: calc(var(--cw) * 84 / 1024) calc(var(--cw) * 58 / 1024) 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100dvh
    }

    #s-login .lg3-deco { position: absolute; display: block; height: auto; pointer-events: none; z-index: 0 }
    #s-login .lg3-tl { left: 0; top: 0; width: calc(var(--cw) * 240 / 1024) }
    #s-login .lg3-bl { left: 0; bottom: 0; width: calc(var(--cw) * 220 / 1024) }
    #s-login .lg3-br { right: 0; bottom: 0; width: calc(var(--cw) * 209 / 1024) }
    #s-login .lg3-logo-spark { left: calc(var(--cw) * 498 / 1024); top: calc(var(--cw) * 118 / 1024); width: calc(var(--cw) * 46 / 1024) }

    #s-login .login-logo { gap: calc(var(--cw) * 24 / 1024); margin-bottom: calc(var(--cw) * 20 / 1024); padding-right: 50% }
    #s-login .login-icon {
      width: max(40px, calc(var(--cw) * 112 / 1024));
      height: max(40px, calc(var(--cw) * 112 / 1024));
      border-radius: calc(var(--cw) * 28 / 1024);
      background: linear-gradient(145deg, #34D27B, #16A34A);
      box-shadow: 0 6px 16px rgba(22, 163, 74, .28)
    }
    #s-login .login-brand h2 { font-family: var(--f); font-weight: 800; font-size: max(18px, calc(var(--cw) * 56 / 1024)); letter-spacing: -.02em; word-spacing: 0; color: #0F2A3D }
    #s-login .login-brand h2 span { color: #16A34A }
    #s-login .login-brand p { font-size: max(11.5px, calc(var(--cw) * 29 / 1024)); color: #6B7280; margin-top: 2px }

    #s-login #emp-main-login .lg-art { top: 0; right: 0; width: calc(var(--cw) * 484 / 1024); height: auto }
    #s-login #emp-main-login .lg-welcome { padding-right: 0; min-height: calc(var(--cw) * 405 / 1024) }
    #s-login #emp-main-login .login-greeting { display: none }
    #s-login .lg3-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 }
    #s-login .lg3-goodfood { display: block; width: calc(var(--cw) * 165 / 1024); height: auto; margin-left: calc(var(--cw) * -15 / 1024) }
    #s-login .lg3-welcome { display: block; width: calc(var(--cw) * 530 / 1024); height: auto; margin: calc(var(--cw) * -8 / 1024) 0 0 calc(var(--cw) * -40 / 1024); position: relative; z-index: 1 }
    #s-login .lg3-sub { font-size: max(13px, calc(var(--cw) * 33 / 1024)); line-height: 1.45; color: #4B5563; margin: calc(var(--cw) * 4 / 1024) 0 0 calc(var(--cw) * 18 / 1024); max-width: calc(var(--cw) * 450 / 1024) }
    #s-login .lg3-smiley { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.32em; margin-left: .1em }

    #s-login .lg3-form {
      position: relative;
      z-index: 1;
      background: #fff;
      border: 1px solid #EEF3F0;
      border-radius: calc(var(--cw) * 44 / 1024);
      box-shadow: 0 14px 44px rgba(15, 42, 61, .07);
      padding: calc(var(--cw) * 26 / 1024) calc(var(--cw) * 24 / 1024) calc(var(--cw) * 36 / 1024);
      margin: calc(var(--cw) * 6 / 1024) calc(var(--cw) * -4 / 1024) 0
    }
    #s-login .lg3-form .linp-wrap + .linp-wrap { margin-top: calc(var(--cw) * 34 / 1024) }
    #s-login .lg3-form .linp {
      height: max(52px, calc(var(--cw) * 96 / 1024));
      border-radius: 999px;
      border: 1.5px solid #E6ECE9;
      padding: 0 46px 0 max(58px, calc(var(--cw) * 112 / 1024));
      font-size: max(14px, calc(var(--cw) * 31 / 1024));
      color: #0F2A3D;
      box-shadow: 0 1px 2px rgba(15, 42, 61, .03)
    }
    #s-login .lg3-form .linp::placeholder { color: #8A94A6 }
    #s-login .lg3-form .linp-badge { width: max(38px, calc(var(--cw) * 72 / 1024)); height: max(38px, calc(var(--cw) * 72 / 1024)); left: max(8px, calc(var(--cw) * 16 / 1024)); background: #E4F5EA; color: #16A34A }
    #s-login .lg3-form .linp-eye { right: max(16px, calc(var(--cw) * 40 / 1024)) }

    #s-login .lg3-forgot-row { text-align: right; margin: calc(var(--cw) * 26 / 1024) 0 0 }
    #s-login .lg3-form .lg-forgot { font-size: max(13px, calc(var(--cw) * 30 / 1024)); font-weight: 700; color: #16A34A }

    #s-login .lg3-btn-row { position: relative; display: flex; justify-content: center; margin-top: calc(var(--cw) * 40 / 1024) }
    #s-login .lg3-btn-row .login-btn {
      width: 83%;
      margin: 0;
      height: max(54px, calc(var(--cw) * 106 / 1024));
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, #22B463 0%, #0F8A4B 100%);
      box-shadow: 0 14px 30px rgba(16, 138, 75, .30), inset 0 1px 0 rgba(255, 255, 255, .18);
      font-family: var(--f);
      font-size: max(16px, calc(var(--cw) * 40 / 1024));
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5em
    }
    #s-login .lg3-btn-ico { width: 1.75em; height: 1.75em; border-radius: 50%; background: rgba(4, 64, 36, .38); display: grid; place-items: center; flex-shrink: 0 }
    #s-login .lg3-spark-l,
    #s-login .lg3-spark-r { position: absolute; top: 50%; transform: translateY(-50%); width: calc(var(--cw) * 44 / 1024); height: auto; pointer-events: none }
    #s-login .lg3-spark-l { left: -2px }
    #s-login .lg3-spark-r { right: -2px }

    #s-login .lg3-form .lg-reg { margin-top: calc(var(--cw) * 56 / 1024) }
    #s-login .lg3-form .lg-reg span { font-size: max(13px, calc(var(--cw) * 31 / 1024)); color: #4B5563 }
    #s-login .lg3-form .lg-reg b { color: #16A34A; font-weight: 800 }

    #s-login .lg3-footer { margin-top: auto; padding: calc(var(--cw) * 80 / 1024) 0 calc(var(--cw) * 84 / 1024); text-align: center; position: relative; z-index: 1 }
    #s-login .lg3-footer .p { font-size: max(11px, calc(var(--cw) * 24 / 1024)); color: #6B7280 }
    #s-login .lg3-footer .b { font-size: max(13px, calc(var(--cw) * 32 / 1024)); font-weight: 800; color: #0F2A3D; margin: 3px 0 calc(var(--cw) * 22 / 1024) }
    #s-login .lg3-footer .links { display: flex; justify-content: center; align-items: center; gap: calc(var(--cw) * 22 / 1024); flex-wrap: wrap }
    #s-login .lg3-footer .links a { font-size: max(11px, calc(var(--cw) * 26 / 1024)); color: #4B5563; text-decoration: underline }
    #s-login .lg3-footer .links i { font-style: normal; color: #9CA3AF; font-size: 11px }
    /* v3 refinements — nearer the mockup's proportions; touch floors kept */
    #s-login .lg3-tile { background: none !important; box-shadow: none !important; overflow: visible }
    #s-login .lg3-tile img { width: 110.5%; height: 110.5%; margin: -5.25%; display: block; max-width: none }
    #s-login .lg3-sub { max-width: calc(var(--cw) * 392 / 1024) }
    #s-login .lg3-form .linp { height: max(50px, calc(var(--cw) * 96 / 1024)); font-size: max(13.5px, calc(var(--cw) * 31 / 1024)) }
    #s-login .lg3-form .linp-badge { width: max(36px, calc(var(--cw) * 72 / 1024)); height: max(36px, calc(var(--cw) * 72 / 1024)) }
    #s-login .lg3-form .lg-forgot { font-size: max(12.5px, calc(var(--cw) * 30 / 1024)) }
    #s-login .lg3-btn-row .login-btn { height: max(52px, calc(var(--cw) * 106 / 1024)); font-size: max(15.5px, calc(var(--cw) * 40 / 1024)) }
    #s-login .lg3-form .lg-reg span { font-size: max(12.5px, calc(var(--cw) * 31 / 1024)) }
    #s-login .lg3-footer .links a { font-size: max(10.5px, calc(var(--cw) * 26 / 1024)) }

    #s-login .lg3-footer .c { font-size: max(10px, calc(var(--cw) * 24 / 1024)); color: #9CA3AF; margin-top: calc(var(--cw) * 20 / 1024) }

    /* Spare height on tall phones used to pile up in one gap above the footer
       (336px on a 412x1024 screen). It is now shared: a little above the sign-in
       card, the rest below it, and both collapse to nothing on short phones. */
    /* #emp-login-area wraps the panels and is the card's actual child, so the
       spare height has to be passed down through it first. */
    #s-login #emp-login-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }
    #s-login #emp-main-login { display: flex; flex-direction: column; flex: 1 1 auto }
    #s-login .lg3-gap { flex-basis: 0; min-height: 0; pointer-events: none }
    #s-login .lg3-gap-a { flex-grow: 1; max-height: 84px }
    #s-login .lg3-gap-b { flex-grow: 2 }

    /* …and let the card itself use some of that height instead of leaving it
       blank: on a tall phone the fields sit further apart and the card is
       taller, which also makes them easier to tap. Only above 720px tall —
       below that the screen is already full and a bigger card would start to
       scroll (it did at 360x640). */
    @media (min-height: 720px) {
      #s-login .lg3-form {
        padding-top: max(calc(var(--cw) * 26 / 1024), min(3.2vh, 32px));
        padding-bottom: max(calc(var(--cw) * 36 / 1024), min(4.4vh, 44px))
      }
      #s-login .lg3-form .linp-wrap + .linp-wrap { margin-top: max(calc(var(--cw) * 34 / 1024), min(3.4vh, 34px)) }
      #s-login .lg3-btn-row { margin-top: max(calc(var(--cw) * 40 / 1024), min(3.8vh, 38px)) }
      #s-login .lg3-form .lg-reg { margin-top: max(calc(var(--cw) * 56 / 1024), min(4.4vh, 44px)) }
    }

    .login-specials {
      margin-top: 28px
    }

    .login-specials-title {
      font-family: var(--fh);
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px
    }

    .login-special-cards {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 4px
    }

    .login-special-cards::-webkit-scrollbar {
      display: none
    }

    .login-special-card {
      flex-shrink: 0;
      width: 150px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      cursor: pointer
    }

    .login-special-card img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      display: block
    }

    .login-special-card-body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
      padding: 10px 10px 8px;
      color: #fff
    }

    .login-special-name {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3
    }

    .login-special-price {
      font-size: 11px;
      color: rgba(255, 200, 100, .9);
      font-weight: 600;
      margin-top: 2px
    }


    /* ═══ LOGIN v4 — orange, from the owner's 2026-09-19 mockups ═══════════
       The top and bottom artwork are the mockups themselves (assets/login/
       lg4_*, rg4_*), cut and never redrawn; the footer text was erased from
       the bottom plates because the real footer, with working links, sits on
       them. Everything tappable is real HTML, recoloured to the mockup's
       orange (#F2621B button, #EA580C links, #FFE9D8 icon rings). */
    #s-login { --g: #EA580C; --g-dk: #C2410C; --g-lt: #FFEDD5; background: #FEF0E0 }
    #s-login .login-card { padding: 0; background: linear-gradient(180deg, #FFF3E6 0%, #FEEBD5 55%, #FDEBD9 100%) }
    #s-login .login-card[data-panel="emp-register"] { background: linear-gradient(180deg, #FFF7EC 0%, #FEF5E8 60%, #FDF1E2 100%) }
    #s-login .login-card[data-panel="emp-step2"],
    #s-login .login-card[data-panel="emp-set-pw"] { padding: calc(var(--cw) * 84 / 1024) calc(var(--cw) * 58 / 1024) 0 }

    /* the green artwork is retired */
    #s-login .lg3-deco,
    #s-login #emp-main-login .lg-art,
    #s-login #emp-register .lg-art { display: none }
    #s-login #emp-main-login .lg-welcome { min-height: 0; padding: 0; margin: 0 }
    #s-login #emp-main-login .lg-welcome > :not(.lg3-sr) { display: none }
    /* the logo row is already in both hero pictures */
    #s-login .login-card[data-panel="emp-main-login"] .login-logo,
    #s-login .login-card[data-panel="emp-register"] .login-logo { display: none }

    #s-login .lg4-hero,
    #s-login .rg4-hero {
      display: block;
      width: 100%;
      height: auto;
      -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
      mask-image: linear-gradient(to bottom, #000 90%, transparent)
    }

    #s-login .lg4-bottom {
      display: none;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: auto;
      z-index: 0;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to top, #000 72%, transparent);
      mask-image: linear-gradient(to top, #000 72%, transparent)
    }
    #s-login .login-card[data-panel="emp-main-login"] .lg4-bottom-login,
    #s-login .login-card[data-panel="emp-register"] .lg4-bottom-reg { display: block }
    /* the footer sits exactly where the mockup's footer text was erased */
    #s-login .login-card[data-panel="emp-main-login"] .lg3-footer { padding-bottom: calc(var(--cw) * 150 / 1024) }
    #s-login .login-card[data-panel="emp-register"] .lg3-footer { padding-bottom: calc(var(--cw) * 124 / 1024) }

    /* frosted card, as in the mockup */
    #s-login .lg3-form {
      margin: calc(var(--cw) * 6 / 1024) calc(var(--cw) * 78 / 1024) 0;
      padding-left: calc(var(--cw) * 38 / 1024);
      padding-right: calc(var(--cw) * 38 / 1024);
      background: rgba(255, 255, 255, .62);
      border: 1.5px solid rgba(255, 255, 255, .9);
      box-shadow: 0 18px 44px rgba(194, 84, 20, .10);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px)
    }
    #s-login .rg4-form { margin: 0 calc(var(--cw) * 58 / 1024) }
    #s-login .rg4-form .linp-wrap { margin-bottom: 0 !important }
    #s-login .rg4-form .linp-wrap + .linp-wrap { margin-top: max(10px, calc(var(--cw) * 28 / 1024)) }
    #s-login .rg4-form .lg3-btn-row { margin-top: max(18px, calc(var(--cw) * 40 / 1024)) }

    #s-login .lg3-form .linp { background: rgba(255, 255, 255, .84); border-color: #F2E3D5; box-shadow: 0 1px 2px rgba(120, 60, 20, .04) }
    #s-login .linp:focus,
    #s-login .lg3-form .linp:focus { border-color: #F97316; box-shadow: 0 0 0 4px rgba(249, 115, 22, .12) }
    #s-login .linp-badge,
    #s-login .lg3-form .linp-badge { background: #FFE9D8; color: #F26B1D }
    #s-login .linp-icon,
    #s-login .linp-chev { color: #F26B1D }
    #s-login .lg-forgot,
    #s-login .lg3-form .lg-forgot { color: #EA580C }
    #s-login .lg-reg b,
    #s-login .lg3-form .lg-reg b { color: #EA580C }
    #s-login .lg3-form .lg-reg span { color: #475569 }
    #s-login .login-btn,
    #s-login .lg3-btn-row .login-btn {
      background: linear-gradient(180deg, #FF923E 0%, #F2621B 100%);
      box-shadow: 0 14px 30px rgba(234, 88, 12, .30), inset 0 1px 0 rgba(255, 255, 255, .25)
    }
    #s-login .login-btn:hover { box-shadow: 0 16px 34px rgba(234, 88, 12, .38) }
    #s-login .lg3-btn-ico { background: rgba(150, 45, 5, .30) }
    #s-login .role-tab.active { background: #EA580C; box-shadow: 0 2px 10px rgba(234, 88, 12, .35) }
    #s-login .login-brand h2 span { color: #EA580C }

    /* Create Account: the headline is in the picture, the real text stays for
       screen readers, and the real Back sits exactly over the drawn pill. */
    #s-login #emp-register { position: relative }
    #s-login #emp-register .lg-welcome { position: static; min-height: 0; padding: 0; margin: 0 }
    #s-login #emp-register .login-title,
    #s-login #emp-register .login-sub { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 }
    #s-login #emp-register .lg-back {
      position: absolute;
      z-index: 3;
      left: calc(var(--cw) * 52 / 904);
      top: calc(var(--cw) * 206 / 904);
      width: calc(var(--cw) * 162 / 904);
      height: calc(var(--cw) * 66 / 904);
      min-width: 44px;
      min-height: 36px;
      padding: 0;
      border-radius: 999px;
      background: transparent;
      color: transparent;
      font-size: 0;
      cursor: pointer
    }
    /* "Resend OTP" carries an inline var(--brand) (the app's green) */
    #s-login #resend-otp-btn { color: #EA580C !important }
    /* ─── TOP NAV ─── */
    .tnav {
      background: rgba(20, 6, 0, .72);
      backdrop-filter: blur(20px) saturate(1.8);
      -webkit-backdrop-filter: blur(20px) saturate(1.8);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 10px;
      position: sticky;
      top: 0;
      z-index: 100
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
      min-width: 0
    }

    .nav-icon {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--brand), #2BC46A);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
      flex-shrink: 0
    }

    .nav-title {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 15px;
      color: #fff;
      white-space: nowrap;
      line-height: 1.2
    }

    .nav-sub {
      font-size: 10px;
      color: rgba(255, 200, 150, .55);
      margin-top: -1px;
      white-space: nowrap;
      line-height: 1.2
    }

    .nsp {
      flex: 1
    }

    .wallet-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 22px;
      padding: 6px 14px;
      cursor: pointer;
      transition: all .25s var(--ease);
      backdrop-filter: blur(8px)
    }

    .wallet-chip:hover {
      background: rgba(255, 255, 255, .2);
      transform: scale(1.03)
    }

    .wallet-amt {
      font-weight: 800;
      font-size: 13px;
      color: #fff;
      font-family: var(--fh)
    }

    .wallet-lbl {
      font-size: 9px;
      color: rgba(255, 255, 255, .55);
      font-weight: 600;
      letter-spacing: .3px;
      text-transform: uppercase
    }

    .av-btn {
      width: 34px;
      height: 34px;
      background: var(--brand);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: 12px;
      cursor: pointer;
      flex-shrink: 0;
      font-family: var(--fh);
      transition: .2s
    }

    .av-btn:hover {
      transform: scale(1.08)
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      border: 1px solid rgba(255, 255, 255, .15);
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      transition: .2s;
      flex-shrink: 0;
      cursor: pointer;
      position: relative
    }

    .icon-btn:hover {
      background: rgba(255, 255, 255, .2)
    }

    .icon-btn .notif-dot {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 7px;
      height: 7px;
      background: var(--brand);
      border-radius: 50%;
      border: 1.5px solid #fff
    }

    /* ─── BOTTOM NAV ─── */
    .bnav {
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(24px) saturate(2);
      -webkit-backdrop-filter: blur(24px) saturate(2);
      border-top: 1px solid rgba(226, 232, 240, .6);
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 4px 0 max(4px, env(safe-area-inset-bottom));
      box-shadow: 0 -4px 20px rgba(15, 23, 42, .08)
    }

    .bni {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 2px;
      border: none;
      background: none;
      position: relative;
      transition: all .3s var(--ease)
    }

    .bni-icon {
      font-size: 20px;
      transition: all .3s var(--ease)
    }

    .bni-label {
      font-size: 10px;
      color: var(--muted);
      font-weight: 500;
      transition: all .3s var(--ease)
    }

    .bni.act .bni-label {
      color: var(--brand);
      font-weight: 700
    }

    .bni.act .bni-icon {
      transform: translateY(-3px) scale(1.1)
    }

    /* raised cutlery button in the middle of the bar */
    .bni-fab {
      flex: 0 0 auto;
      width: 58px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      border: none;
      background: none;
      padding: 0;
      position: relative
    }

    .bni-fab i {
      position: absolute;
      top: -20px;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: linear-gradient(180deg, #1BA85C, #128C4A);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(22, 163, 74, .38);
      border: 4px solid #fff;
      transition: transform .2s var(--ease)
    }

    .bni-fab:hover i { transform: translateY(-2px) }

    .bni-badge {
      position: absolute;
      top: 2px;
      right: calc(50% - 16px);
      background: var(--brand);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      border-radius: 10px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
      line-height: 14px;
      border: 1.5px solid #fff
    }

    /* ─── PAGE ─── */
    .page-wide {
      padding: 0 0 90px
    }

    /* Vendor / Kitchen / Admin scroll areas */
    #vendor-body,
    #kds-body,
    #admin-body {
      padding-bottom: 60px
    }

    /* ─── SECTIONS ─── */
    .sec-title {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 12px;
      color: var(--dark);
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .sec-link {
      font-size: 12px;
      color: var(--brand);
      font-weight: 600;
      font-family: var(--f)
    }

    /* ─── CARD ─── */
    .card {
      background: var(--white);
      border-radius: var(--rl);
      border: 1px solid rgba(226, 232, 240, .7);
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: var(--sh);
      transition: all .25s var(--ease)
    }

    .card:hover {
      box-shadow: var(--shm)
    }

    .card-title {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--dark)
    }

    /* ─── BUTTONS ─── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: var(--r);
      padding: 12px 18px;
      font-weight: 700;
      font-size: 13px;
      transition: all .25s var(--ease);
      cursor: pointer;
      border: none;
      font-family: var(--f)
    }

    .btn-primary {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 2px 8px rgba(22, 163, 74, .2)
    }

    .btn-primary:hover {
      background: var(--brand2);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(22, 163, 74, .35)
    }

    .btn-primary:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(22, 163, 74, .2)
    }

    .btn-primary:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none
    }

    .btn-secondary {
      background: var(--white);
      color: var(--brand);
      border: 1.5px solid var(--brand)
    }

    .btn-secondary:hover {
      background: var(--brand-l);
      transform: translateY(-1px)
    }

    .btn-green {
      background: var(--green);
      color: #fff;
      box-shadow: 0 2px 8px rgba(5, 150, 105, .2)
    }

    .btn-green:hover {
      background: var(--green2);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(5, 150, 105, .3)
    }

    .btn-ghost {
      background: var(--light2);
      color: var(--dark)
    }

    .btn-ghost:hover {
      background: var(--border);
      transform: translateY(-1px)
    }

    .btn-danger {
      background: var(--red-l);
      color: var(--red);
      border: 1px solid #fca5a5
    }

    .btn-danger:hover {
      background: #fee2e2;
      transform: translateY(-1px)
    }

    .btn-full {
      width: 100%
    }

    .btn-sm {
      padding: 7px 13px;
      font-size: 11px;
      border-radius: 9px
    }

    .btn-lg {
      padding: 15px 24px;
      font-size: 15px;
      font-family: var(--fh);
      border-radius: 14px
    }

    .btn-loading {
      position: relative;
      pointer-events: none
    }

    .btn-loading::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, .3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spinA .7s linear infinite
    }

    .btn-loading span {
      opacity: 0
    }

    /* ─── FORM ─── */
    .form-group {
      margin-bottom: 14px
    }

    .form-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--mid);
      margin-bottom: 5px;
      display: block;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .form-input {
      width: 100%;
      background: var(--light2);
      border: 1.5px solid var(--border);
      border-radius: var(--r);
      padding: 12px 13px;
      font-size: 14px;
      color: var(--dark);
      transition: .2s
    }

    .form-input:focus {
      border-color: var(--brand);
      background: var(--brand-l)
    }

    .form-input::placeholder {
      color: var(--muted)
    }

    .form-input:disabled {
      opacity: .6;
      cursor: not-allowed
    }

    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%2364748b'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 13px center;
      padding-right: 36px
    }

    .form-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .form-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px
    }

    .form-error {
      font-size: 11px;
      color: var(--red);
      margin-top: 4px;
      font-weight: 600
    }

    .char-count {
      font-size: 10px;
      color: var(--muted);
      text-align: right;
      margin-top: 2px
    }

    /* ─── CHIPS/FILTERS ─── */
    .chip-row {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      margin-bottom: 14px
    }

    .chip-row::-webkit-scrollbar {
      display: none
    }

    .chip {
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      border: 1.5px solid var(--border);
      background: var(--white);
      color: var(--mid);
      transition: all .25s var(--ease);
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(15, 23, 42, .06)
    }

    .chip.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      box-shadow: 0 4px 12px rgba(22, 163, 74, .25)
    }

    .chip:hover:not(.active) {
      border-color: var(--brand-m);
      color: var(--brand);
      background: var(--brand-l)
    }

    /* ─── BADGES ─── */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2px
    }

    .badge-new {
      background: var(--brand-l);
      color: var(--brand)
    }

    .badge-prep {
      background: var(--amber-l);
      color: var(--amber)
    }

    .badge-ready {
      background: var(--green-l);
      color: var(--green2)
    }

    .badge-done {
      background: var(--light2);
      color: var(--muted)
    }

    .badge-open {
      background: var(--green-l);
      color: var(--green2)
    }

    .badge-closed {
      background: var(--light2);
      color: var(--muted)
    }

    .veg-dot {
      border: 2px solid var(--green);
      width: 14px;
      height: 14px;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .veg-dot::after {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--green);
      border-radius: 50%;
      display: block
    }

    .nveg-dot {
      border: 2px solid var(--red);
      width: 14px;
      height: 14px;
      border-radius: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .nveg-dot::after {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--red);
      border-radius: 50%;
      display: block
    }

    /* ─── STATS GRID ─── */
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px
    }

    .stat-card {
      background: var(--white);
      border-radius: var(--rl);
      padding: 18px;
      border: 1px solid rgba(226, 232, 240, .6);
      box-shadow: var(--sh);
      transition: all .3s var(--ease);
      position: relative;
      overflow: hidden
    }

    .stat-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand), var(--blue-a));
      opacity: 0;
      transition: opacity .3s var(--ease);
      pointer-events: none
    }

    .stat-card:hover {
      box-shadow: var(--shm);
      transform: translateY(-2px)
    }

    .stat-card:hover::after {
      opacity: 1
    }

    .stat-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 6px
    }

    .stat-val {
      font-family: var(--fh);
      font-size: 26px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.1
    }

    .stat-sub {
      font-size: 11px;
      font-weight: 600;
      margin-top: 4px
    }

    .stat-up {
      color: var(--green2)
    }

    .stat-dn {
      color: var(--red)
    }

    .stat-neu {
      color: var(--muted)
    }

    /* ─── PROGRESS ─── */
    .progress {
      height: 6px;
      background: var(--light2);
      border-radius: 6px;
      overflow: hidden;
      margin-top: 6px
    }

    .progress-fill {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--brand), #FF6B47);
      transition: width 1.5s var(--ease);
      position: relative
    }

    .progress-fill.green {
      background: linear-gradient(90deg, var(--green), #34D399)
    }

    .progress-fill.amber {
      background: linear-gradient(90deg, var(--amber), #FBBF24)
    }

    .progress-fill.red {
      background: linear-gradient(90deg, var(--red), #F87171)
    }

    /* ─── TOGGLE ─── */
    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 13px;
      background: var(--light2);
      border-radius: 11px;
      margin-bottom: 7px
    }

    .toggle-info {
      font-size: 13px;
      font-weight: 600
    }

    .toggle-info small {
      display: block;
      font-size: 10px;
      color: var(--muted);
      font-weight: 400;
      margin-top: 1px
    }

    .toggle {
      width: 44px;
      height: 24px;
      background: var(--border2);
      border-radius: 20px;
      position: relative;
      cursor: pointer;
      transition: .3s;
      flex-shrink: 0
    }

    .toggle.on {
      background: var(--green)
    }

    .toggle::after {
      content: '';
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      position: absolute;
      top: 3px;
      left: 3px;
      transition: .3s;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
    }

    .toggle.on::after {
      left: 23px
    }

    /* ─── LOADER ─── */
    .loader {
      width: 32px;
      height: 32px;
      border: 3px solid var(--brand-l);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: spinA .8s linear infinite;
      margin: 32px auto
    }

    .skeleton {
      background: linear-gradient(90deg, var(--light2) 25%, var(--border) 50%, var(--light2) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 8px
    }

    /* ─── EMPTY STATE ─── */
    .empty {
      text-align: center;
      padding: 48px 20px
    }

    .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: .6
    }

    .empty-title {
      font-family: var(--fh);
      font-size: 18px;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 5px
    }

    .empty-sub {
      font-size: 13px;
      color: var(--muted)
    }

    /* ─── DIVIDER ─── */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 12px 0
    }

    .divider-dashed {
      border-top: 1px dashed var(--border);
      margin: 12px 0
    }

    /* ═══════════════════════════════
   STUDENT APP
═══════════════════════════════ */

    /* Hero Banner */
    /* Home hero: white, greeting on the left, artwork bleeding off the right */
    .hero {
      background: #fff;
      border-radius: 0;
      padding: 0;
      margin-bottom: 0;
      position: relative;
      overflow: hidden;
      min-height: 172px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end
    }

    .hero-art {
      position: absolute;
      right: -26px;
      top: 2px;
      width: min(300px, 56%);
      z-index: 0;
      pointer-events: none
    }

    .hero-art img { width: 100%; height: auto; display: block }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 16px 18px 20px
    }

    .hero-greet {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 2px;
      font-weight: 500;
      letter-spacing: .3px
    }

    /* the greeting wraps to two lines, so leave the artwork its half */
    .hero-name {
      font-family: var(--fh);
      font-size: 27px;
      font-weight: 800;
      color: #0F172A;
      margin-bottom: 16px;
      line-height: 1.22;
      letter-spacing: -.5px;
      padding-right: 50%
    }

    .hero-name span { color: var(--brand) }

    .hero-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 9px
    }

    /* soft tinted pills, chevron on the right */
    .hero-btn-primary,
    .hero-btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border-radius: 50px;
      padding: 11px 16px;
      font-size: 14px;
      font-weight: 700;
      transition: all .2s;
      cursor: pointer;
      border: none;
      min-width: 190px
    }

    .hero-btn-primary {
      background: #DFF3E6;
      color: #0E7A3D;
      box-shadow: none
    }

    .hero-btn-secondary {
      background: #FEF0DA;
      color: #8A5A12;
      backdrop-filter: none
    }

    .hero-btn-primary:hover,
    .hero-btn-secondary:hover { transform: translateY(-1px); filter: brightness(.97) }

    .hero-btn-chev { margin-left: auto; opacity: .55; font-size: 15px }

    .hero-btn-divider { display: none }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, .1);
      backdrop-filter: blur(8px);
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, .12);
      color: #fff;
      transition: all .2s var(--ease)
    }

    /* Pickup-point cards (Hostel A / Hostel B).
       Only two of them, so these are full-width rows rather than a
       horizontally scrolling strip of counters. */
    .hostel-scroll {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px
    }

    .hostel-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: var(--white);
      border: 2px solid transparent;
      border-radius: 16px;
      cursor: pointer;
      transition: all .2s ease;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .07)
    }

    .hostel-card:hover {
      border-color: var(--brand);
      box-shadow: 0 6px 20px rgba(22, 163, 74, .16)
    }

    .hostel-card.active {
      border-color: var(--brand);
      background: #F2FBF5;
      box-shadow: 0 6px 20px rgba(22, 163, 74, .16)
    }

    .hostel-card.closed {
      opacity: .5;
      cursor: not-allowed
    }

    .hostel-card .hostel-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: linear-gradient(145deg, #E8F6EC, #CDEBD8);
      flex-shrink: 0
    }

    .hostel-card .hostel-body {
      flex: 1;
      min-width: 0
    }

    .hostel-card .hostel-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--dark);
      margin-bottom: 2px
    }

    .hostel-card.active .hostel-name {
      color: var(--brand)
    }

    .hostel-card .hostel-tag {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      color: var(--brand);
      background: var(--brand-l);
      padding: 2px 6px;
      border-radius: 6px;
      margin-left: 4px;
      vertical-align: middle
    }

    .hostel-card .hostel-meta {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .hostel-card .hostel-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0
    }

    .hostel-card.active .hostel-check {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      font-weight: 800;
      border-color: var(--brand);
      color: var(--brand)
    }

    /* ─── VEG-ONLY PILL inside search bar ─── */
    .veg-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 11px;
      border-radius: 50px;
      border: 1.5px solid #cfd8dc;
      background: #fff;
      color: #6b7280;
      font-size: 11.5px;
      font-weight: 700;
      cursor: pointer;
      transition: all .22s var(--ease);
      flex-shrink: 0;
      white-space: nowrap;
      user-select: none;
    }
    .veg-pill:hover {
      border-color: #2e7d32;
      color: #2e7d32;
      background: #f1f8f1;
    }
    .veg-pill .vp-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      border: 1.5px solid #2e7d32;
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .veg-pill .vp-dot::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #2e7d32;
    }
    .veg-pill.active {
      background: #e8f5e9;
      border-color: #2e7d32;
      color: #1b5e20;
      box-shadow: 0 2px 8px rgba(46, 125, 50, .18);
    }
    .veg-pill.active .vp-dot {
      background: #2e7d32;
    }
    .veg-pill.active .vp-dot::after {
      background: #fff;
    }

    /* ─── REORDER LAST LUNCH (one-tap repeat) ─── */
    .reorder-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
      border: 1.5px solid #FED7AA;
      border-radius: 16px;
      padding: 11px 13px;
      margin-bottom: 12px;
      box-shadow: 0 2px 12px rgba(22, 163, 74, .08);
    }
    .reorder-card.hidden { display: none }
    .reorder-card .ro-thumbs {
      display: flex;
      flex-shrink: 0;
    }
    .reorder-card .ro-thumbs img,
    .reorder-card .ro-thumbs .ro-emoji {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fff;
      margin-right: -12px;
      background: linear-gradient(145deg, #FFF3E0, #FFE0B2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    }
    .reorder-card .ro-thumbs > *:last-child { margin-right: 0 }
    .reorder-card .ro-body {
      flex: 1;
      min-width: 0;
      margin-left: 6px;
    }
    .reorder-card .ro-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--brand);
      letter-spacing: .2px;
      margin-bottom: 2px;
      text-transform: uppercase;
    }
    .reorder-card .ro-items {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 1px;
      line-height: 1.3;
    }
    .reorder-card .ro-meta {
      font-size: 11px;
      color: var(--muted);
      font-weight: 600;
    }
    .reorder-card .ro-btn {
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      flex-shrink: 0;
      font-family: inherit;
      transition: all .2s var(--ease);
      box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
    }
    .reorder-card .ro-btn:hover,
    .reorder-card .ro-btn:active {
      background: #C53408;
      transform: scale(1.04);
    }

    /* ─── CUISINE QUICK-PICKS (Zomato-style round chips) ─── */
    .cuisine-section { margin: 6px 0 10px }
    .cuisine-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 4px 2px 8px;
      scrollbar-width: none;
    }
    .cuisine-row::-webkit-scrollbar { display: none }
    .cuisine-pick {
      flex-shrink: 0;
      width: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-align: center;
      transition: transform .2s var(--ease-bounce);
    }
    .cuisine-pick:active { transform: scale(.93) }
    .cuisine-pick .cp-img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(145deg, #FFF3E0, #FFE0B2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      border: 2px solid transparent;
      overflow: hidden;
      transition: all .25s var(--ease);
      box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }
    .cuisine-pick .cp-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .cuisine-pick:hover .cp-img {
      border-color: var(--brand);
      box-shadow: 0 6px 16px rgba(22, 163, 74, .22);
    }
    .cuisine-pick .cp-name {
      font-size: 11px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.2;
    }

    /* ─── POPULAR TODAY (horizontal dish cards) ─── */
    /* Menu Items */
    /* ─── FOOD IMAGES & ZOMATO-STYLE MENU ─── */
    .menu-item {
      background: var(--white);
      border-radius: 18px;
      padding: 0;
      display: flex;
      align-items: stretch;
      gap: 0;
      box-shadow: 0 2px 16px rgba(15, 23, 42, .08), 0 1px 4px rgba(15, 23, 42, .04);
      border: 1px solid rgba(226, 232, 240, .5);
      margin-bottom: 14px;
      transition: all .28s var(--ease);
      position: relative;
      overflow: hidden
    }

    .menu-item:hover {
      box-shadow: 0 10px 32px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .06);
      transform: translateY(-3px)
    }

    .menu-item:active {
      transform: scale(.985)
    }

    .menu-item.unavailable {
      opacity: .5
    }

    .menu-img-wrap {
      width: 150px;
      min-height: 150px;
      /* The card is a stretch flex row, so without this a dish whose name
         wraps to two lines gets a taller card and a visibly taller photo
         than its neighbours. Pinning the square keeps every thumbnail the
         same size no matter how long the name runs. */
      aspect-ratio: 1;
      align-self: stretch;
      max-height: 150px;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
      border-radius: 18px 0 0 18px
    }

    .menu-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s var(--ease)
    }

    .menu-item:hover .menu-img-wrap img {
      transform: scale(1.1)
    }

    .menu-img-emoji {
      width: 100%;
      height: 100%;
      min-height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      background: linear-gradient(145deg, var(--light2), var(--light))
    }

    .menu-body {
      flex: 1;
      padding: 13px 14px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      gap: 4px
    }

    .menu-name {
      font-weight: 700;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.3;
      color: var(--dark)
    }

    .menu-desc {
      font-size: 11.5px;
      color: var(--muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.45;
      margin-top: 2px
    }

    .menu-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 6px
    }

    .menu-price {
      font-weight: 800;
      font-size: 17px;
      color: var(--dark);
      font-family: var(--fh);
      line-height: 1
    }

    .menu-rating {
      font-size: 10px;
      color: var(--amber);
      font-weight: 700;
      margin-top: 1px
    }

    .unavail-badge {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .52);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      letter-spacing: .8px;
      text-transform: uppercase;
      backdrop-filter: blur(3px)
    }

    .bestseller-tag {
      position: absolute;
      top: 9px;
      left: 9px;
      background: linear-gradient(135deg, #16A34A, #2BC46A);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 6px;
      letter-spacing: .4px;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(22, 163, 74, .35)
    }

    .new-tag {
      position: absolute;
      top: 9px;
      left: 9px;
      background: linear-gradient(135deg, var(--blue-a), #3B82F6);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      padding: 3px 9px;
      border-radius: 6px;
      z-index: 2
    }

    /* Stagger animation for menu items */
    @keyframes menuFadeIn {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .menu-item {
      animation: menuFadeIn .38s var(--ease) backwards
    }

    .menu-item:nth-child(1) {
      animation-delay: 0s
    }

    .menu-item:nth-child(2) {
      animation-delay: .05s
    }

    .menu-item:nth-child(3) {
      animation-delay: .1s
    }

    .menu-item:nth-child(4) {
      animation-delay: .15s
    }

    .menu-item:nth-child(5) {
      animation-delay: .2s
    }

    .menu-item:nth-child(6) {
      animation-delay: .25s
    }

    .menu-item:nth-child(7) {
      animation-delay: .3s
    }

    .menu-item:nth-child(8) {
      animation-delay: .35s
    }

    /* Remove old emoji-only styles */
    .menu-emoji {
      display: none
    }

    /* Add to cart button — Zomato orange, pill shape */
    .add-btn {
      background: var(--white);
      color: var(--brand);
      border: 2px solid var(--brand);
      border-radius: 20px;
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: all .2s var(--ease);
      font-family: var(--fh);
      letter-spacing: .2px;
      box-shadow: 0 1px 4px rgba(22, 163, 74, .12)
    }

    .add-btn:hover {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 4px 14px rgba(22, 163, 74, .28);
      transform: scale(1.04)
    }

    .add-btn:active {
      transform: scale(.96)
    }

    .qty-ctrl {
      display: flex;
      align-items: center;
      gap: 0;
      border: 2px solid var(--brand);
      border-radius: 20px;
      overflow: hidden
    }

    .qty-btn {
      width: 30px;
      height: 30px;
      border: none;
      background: var(--brand);
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: .15s;
      flex-shrink: 0
    }

    .qty-btn:hover {
      background: var(--brand2)
    }

    .qty-num {
      font-weight: 800;
      font-size: 14px;
      min-width: 26px;
      text-align: center;
      color: var(--brand);
      font-family: var(--fh);
      background: #fff
    }

    /* Floating Cart */
    .cart-float {
      position: fixed;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      max-width: 492px;
      width: calc(100% - 28px);
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      color: #fff;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .35);
      cursor: pointer;
      animation: slideUp .3s var(--ease-bounce);
      z-index: 110;
      border: 1px solid rgba(255, 255, 255, .08);
      -webkit-transform: translateX(-50%)
    }

    .cart-float.gone {
      display: none
    }

    .cart-float-left {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .cart-float-count {
      background: var(--brand);
      color: #fff;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 11px;
      flex-shrink: 0
    }

    .cart-float-text {
      font-weight: 600;
      font-size: 12px
    }

    .cart-float-sub {
      font-size: 9px;
      opacity: .5
    }

    .cart-float-price {
      font-family: var(--fh);
      font-size: 16px;
      font-weight: 700;
      color: var(--brand)
    }

    /* Cart Screen */
    .cart-item {
      background: var(--white);
      border-radius: var(--rl);
      padding: 13px;
      display: flex;
      align-items: center;
      gap: 11px;
      border: 1px solid var(--border);
      margin-bottom: 8px
    }

    .cart-emoji {
      font-size: 28px;
      width: 42px;
      text-align: center;
      flex-shrink: 0
    }

    .cart-item-body {
      flex: 1
    }

    .cart-item-name {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 2px
    }

    .cart-item-price {
      font-size: 11px;
      color: var(--brand);
      font-weight: 700
    }

    .cart-item-total {
      font-weight: 800;
      font-size: 14px;
      color: var(--dark)
    }

    /* Summary Box */
    .summary-box {
      background: var(--white);
      border-radius: var(--rl);
      padding: 16px;
      border: 1px solid var(--border);
      margin-bottom: 12px
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 9px;
      color: var(--mid)
    }

    .summary-row.green {
      color: var(--green2);
      font-weight: 700
    }

    .summary-row.total {
      font-size: 17px;
      font-weight: 800;
      color: var(--dark);
      font-family: var(--fh);
      border-top: 1px dashed var(--border);
      padding-top: 10px;
      margin-top: 3px;
      margin-bottom: 0
    }

    /* Slot Picker */
    .slot-picker {
      background: var(--white);
      border-radius: var(--rl);
      padding: 16px;
      border: 1px solid var(--border);
      margin-bottom: 12px
    }

    .slot-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-top: 10px
    }

    .slot-item {
      padding: 9px 6px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      border: 1.5px solid var(--border);
      color: var(--mid);
      background: var(--white);
      transition: .2s
    }

    .slot-item.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand)
    }

    .slot-item.peak {
      border-color: var(--amber);
      color: var(--amber)
    }

    .slot-item.peak.active {
      background: var(--amber);
      color: #fff;
      border-color: var(--amber)
    }

    .slot-item:disabled,
    .slot-item.past {
      opacity: .4;
      cursor: not-allowed
    }

    /* Pay Options */
    .pay-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px;
      border-radius: 12px;
      cursor: pointer;
      border: 2px solid var(--border);
      margin-bottom: 8px;
      transition: .2s;
      background: var(--white)
    }

    .pay-option.active {
      border-color: var(--brand);
      background: var(--brand-l)
    }

    .pay-icon {
      font-size: 24px
    }

    .pay-body {
      flex: 1
    }

    .pay-name {
      font-weight: 700;
      font-size: 13px
    }

    .pay-sub {
      font-size: 11px;
      color: var(--muted)
    }

    .pay-radio {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--border);
      transition: .2s;
      flex-shrink: 0
    }

    .pay-option.active .pay-radio {
      background: var(--brand);
      border-color: var(--brand)
    }

    /* Success Screen */
    #s-success {
      background: var(--white);
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .success-wrap {
      max-width: 340px;
      width: 100%;
      text-align: center;
      margin: auto
    }

    .success-anim {
      width: 100px;
      height: 100px;
      background: var(--green-l);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52px;
      margin: 0 auto 20px;
      animation: popIn .5s ease
    }

    .success-title {
      font-family: var(--fh);
      font-size: 26px;
      font-weight: 700;
      margin-bottom: 5px
    }

    .success-sub {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 28px
    }

    .token-card {
      background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, var(--blue2) 100%);
      border-radius: var(--rxxl);
      padding: 28px 24px;
      color: #fff;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(15, 23, 42, .3)
    }

    .token-card::before {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, .04);
      border-radius: 50%;
      top: -70px;
      right: -50px;
      pointer-events: none
    }

    .token-card::after {
      content: '';
      position: absolute;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, rgba(22, 163, 74, .15) 0%, transparent 70%);
      bottom: -20px;
      left: 20px;
      pointer-events: none
    }

    .token-label {
      font-size: 10px;
      opacity: .55;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px
    }

    .token-num {
      font-family: var(--fh);
      font-size: 80px;
      font-weight: 700;
      line-height: .9;
      margin-bottom: 14px;
      color: var(--brand)
    }

    .token-info {
      font-size: 12px;
      opacity: .7;
      margin-bottom: 3px
    }

    .token-time {
      font-size: 11px;
      opacity: .45
    }

    .qr-wrap {
      background: var(--light2);
      border-radius: var(--rl);
      padding: 20px;
      margin-bottom: 20px
    }

    .qr-grid {
      width: 120px;
      height: 120px;
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      gap: 1.5px;
      margin: 0 auto 10px;
      background: var(--dark);
      padding: 8px;
      border-radius: 10px
    }

    .qr-cell {
      border-radius: 1px;
      background: var(--dark)
    }

    .qr-cell.w {
      background: #fff
    }

    .qr-lbl {
      font-size: 11px;
      color: var(--muted);
      text-align: center
    }

    /* Wallet Screen */
    .wallet-hero {
      background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #172554 100%);
      border-radius: var(--rxxl);
      padding: 28px 22px;
      color: #fff;
      margin-bottom: 18px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(15, 23, 42, .25)
    }

    .wallet-hero::before {
      content: '';
      position: absolute;
      width: 300px;
      height: 300px;
      background: rgba(255, 255, 255, .03);
      border-radius: 50%;
      top: -140px;
      right: -80px;
      pointer-events: none
    }

    .wallet-hero::after {
      content: '';
      position: absolute;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(22, 163, 74, .2) 0%, transparent 70%);
      bottom: -20px;
      left: 20px;
      pointer-events: none
    }

    .wallet-hero-label {
      font-size: 10px;
      opacity: .5;
      margin-bottom: 6px;
      letter-spacing: .5px;
      text-transform: uppercase;
      font-weight: 600
    }

    .wallet-hero-amount {
      font-family: var(--fh);
      font-size: 44px;
      font-weight: 700;
      margin-bottom: 4px;
      line-height: 1
    }

    .wallet-hero-id {
      font-size: 11px;
      opacity: .45;
      margin-bottom: 16px
    }

    .wallet-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .wallet-chip2 {
      background: rgba(255, 255, 255, .1);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 11px;
      font-weight: 600;
      border: 1px solid rgba(255, 255, 255, .12)
    }

    .txn-item {
      background: var(--white);
      border-radius: 12px;
      padding: 13px;
      display: flex;
      align-items: center;
      gap: 11px;
      border: 1px solid var(--border);
      margin-bottom: 7px
    }

    .txn-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0
    }

    .txn-icon.credit {
      background: var(--green-l)
    }

    .txn-icon.debit {
      background: var(--brand-l)
    }

    .txn-body {
      flex: 1
    }

    .txn-name {
      font-weight: 700;
      font-size: 13px
    }

    .txn-date {
      font-size: 10px;
      color: var(--muted);
      margin-top: 1px
    }

    .txn-amount {
      font-weight: 800;
      font-size: 14px
    }

    .txn-amount.credit {
      color: var(--green2)
    }

    .txn-amount.debit {
      color: var(--brand)
    }

    /* Orders Tab */
    .order-card {
      background: var(--white);
      border-radius: var(--rl);
      padding: 14px;
      border: 1px solid var(--border);
      border-left: 4px solid var(--blue-a);
      margin-bottom: 10px;
      box-shadow: var(--sh)
    }

    .order-card.status-new {
      border-left-color: var(--brand);
      animation: blink2 2.5s infinite
    }

    .order-card.status-preparing {
      border-left-color: var(--amber)
    }

    .order-card.status-ready {
      border-left-color: var(--green)
    }

    .order-card.status-done {
      border-left-color: var(--border)
    }

    .order-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px
    }

    .order-token {
      font-family: var(--fh);
      font-size: 26px;
      font-weight: 700;
      color: var(--blue);
      line-height: 1
    }

    .order-token.ready {
      color: var(--green2)
    }

    /* ── Pickup OTP styles ── */
    .pickup-otp-box {
      background: linear-gradient(135deg, var(--green) 0%, var(--green2) 100%);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      margin: 10px 0
    }

    .pickup-otp-code {
      font-family: var(--fh);
      font-size: 48px;
      font-weight: 700;
      color: #fff;
      letter-spacing: 10px;
      line-height: 1
    }

    .pickup-otp-timer {
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
      margin-top: 6px
    }

    .pickup-otp-label {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: .5px;
      font-weight: 700
    }

    /* Token stamp animation */
    .token-stamp {
      position: relative;
      display: inline-block
    }

    .token-stamp.stamped::after {
      content: 'COLLECTED';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-20deg);
      font-size: 11px;
      font-weight: 800;
      color: var(--green2);
      border: 2px solid var(--green2);
      border-radius: 4px;
      padding: 2px 6px;
      opacity: .9;
      letter-spacing: 1px;
      animation: stampIn .3s cubic-bezier(.34, 1.5, .64, 1)
    }

    @keyframes stampIn {
      from {
        transform: translate(-50%, -50%) rotate(-20deg) scale(2);
        opacity: 0
      }

      to {
        transform: translate(-50%, -50%) rotate(-20deg) scale(1);
        opacity: .9
      }
    }

    .otp-input-field {
      font-family: var(--fh);
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 8px;
      width: 100%;
      background: var(--light2);
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      color: var(--dark)
    }

    .otp-input-field:focus {
      border-color: var(--green);
      background: var(--green-l)
    }

    .order-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    .order-item-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 3px
    }

    .order-item-row strong {
      color: var(--dark)
    }

    .order-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--border)
    }

    .order-savings {
      font-size: 11px;
      color: var(--muted)
    }

    .order-actions {
      display: flex;
      gap: 7px;
      margin-top: 8px
    }

    /* Profile */
    .profile-hero {
      background: linear-gradient(135deg, var(--brand) 0%, #15803D 50%, var(--brand2) 100%);
      border-radius: var(--rxxl);
      padding: 24px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      box-shadow: 0 8px 24px rgba(22, 163, 74, .25);
      position: relative;
      overflow: hidden
    }

    .profile-hero::before {
      content: '';
      position: absolute;
      width: 160px;
      height: 160px;
      background: rgba(255, 255, 255, .06);
      border-radius: 50%;
      top: -50px;
      right: -30px;
      pointer-events: none
    }

    .profile-avatar {
      width: 66px;
      height: 66px;
      background: rgba(255, 255, 255, .2);
      backdrop-filter: blur(8px);
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      font-family: var(--fh);
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, .3)
    }

    .profile-name {
      font-family: var(--fh);
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 2px
    }

    .profile-id {
      font-size: 11px;
      opacity: .65
    }

    .profile-dept {
      font-size: 10px;
      opacity: .45;
      margin-top: 1px
    }

    .meal-pass-card {
      background: var(--white);
      border-radius: var(--rl);
      padding: 16px;
      border: 1px solid var(--border);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 14px
    }

    .meal-pass-icon {
      font-size: 40px
    }

    .meal-pass-info {
      flex: 1
    }

    .meal-pass-title {
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 2px
    }

    .meal-pass-month {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 8px
    }

    .meal-pass-remaining {
      font-size: 11px;
      color: var(--green2);
      font-weight: 700;
      margin-top: 4px
    }

    /* Rating Modal */
    .star-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 16px 0
    }

    .star {
      font-size: 36px;
      cursor: pointer;
      transition: .2s;
      opacity: .3
    }

    .star.active,
    .star:hover {
      opacity: 1;
      transform: scale(1.2);
      animation: tickle .3s ease
    }

    /* ═══════════════════════════════
   VENDOR / KITCHEN
═══════════════════════════════ */
    .vendor-header {
      background: linear-gradient(135deg, #0F172A 0%, #1a2540 50%, #0F172A 100%);
      padding: 20px 16px;
      color: #fff;
      position: relative
    }

    .vendor-header::before {
      content: '';
      position: absolute;
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(22, 163, 74, .12) 0%, transparent 70%);
      top: -80px;
      right: -40px;
      pointer-events: none;
      z-index: 0
    }

    .vendor-title {
      font-family: var(--fh);
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 2px
    }

    .vendor-sub {
      font-size: 11px;
      opacity: .45;
      margin-bottom: 16px
    }

    .vendor-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px
    }

    .vendor-stat {
      background: rgba(255, 255, 255, .06);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      padding: 14px;
      text-align: center;
      transition: all .2s var(--ease)
    }

    .vendor-stat:hover {
      background: rgba(255, 255, 255, .1)
    }

    .vendor-stat-val {
      font-family: var(--fh);
      font-size: 22px;
      font-weight: 700;
      color: var(--brand)
    }

    .vendor-stat-lbl {
      font-size: 10px;
      opacity: .45;
      margin-top: 1px
    }

    .live-dot {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: var(--green);
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700
    }

    .live-dot::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      animation: pulse2 1.5s infinite
    }

    /* Kitchen Order Card */
    .kitchen-card {
      background: var(--white);
      border-radius: var(--rl);
      border: 1px solid rgba(226, 232, 240, .6);
      padding: 16px;
      margin-bottom: 10px;
      box-shadow: var(--sh);
      transition: all .3s var(--ease)
    }

    .kitchen-card:hover {
      box-shadow: var(--shm);
      transform: translateY(-1px)
    }

    .kitchen-card.new-order {
      border-left: 4px solid var(--brand);
      animation: blink2 2s infinite
    }

    .kitchen-card.preparing {
      border-left: 4px solid var(--amber)
    }

    .kitchen-card.ready {
      border-left: 4px solid var(--green)
    }

    .kitchen-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px
    }

    .kitchen-token {
      font-family: var(--fh);
      font-size: 30px;
      font-weight: 700;
      line-height: 1
    }

    .kitchen-token.new-order {
      color: var(--brand)
    }

    .kitchen-token.preparing {
      color: var(--amber)
    }

    .kitchen-token.ready {
      color: var(--green2)
    }

    .kitchen-meta {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    .kitchen-items {
      margin-bottom: 10px
    }

    .kitchen-item-row {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      margin-bottom: 4px;
      padding: 6px 10px;
      background: var(--light2);
      border-radius: 8px
    }

    .kitchen-item-row strong {
      font-weight: 700
    }

    .kitchen-actions {
      display: flex;
      gap: 7px
    }

    .kitchen-timer {
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
      font-weight: 600
    }

    .kitchen-timer.warn {
      color: var(--amber)
    }

    .kitchen-timer.over {
      color: var(--red)
    }

    /* KDS Filter Bar */
    .kds-filterbar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 12px 14px;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
      flex-shrink: 0;
      z-index: 10
    }

    .kds-filterbar::-webkit-scrollbar {
      display: none
    }

    /* The hostel chips are injected into a wrapper; it must not become a
       flex item of its own, or its children stack and stretch the whole bar. */
    #kds-hostel-chips { display: contents }

    /* ═══════════════════════════════
   ADMIN DASHBOARD
═══════════════════════════════ */
    .admin-header {
      background: linear-gradient(135deg, #0F172A 0%, #1a0a2e 50%, #0F172A 100%);
      padding: 22px 18px;
      color: #fff;
      position: relative
    }

    .admin-header::before {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(124, 58, 237, .15) 0%, transparent 70%);
      top: -60px;
      right: -30px;
      pointer-events: none;
      z-index: 0
    }

    .admin-title {
      font-family: var(--fh);
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 3px
    }

    .admin-sub {
      font-size: 11px;
      opacity: .45
    }

    .admin-nav {
      display: flex;
      gap: 2px;
      overflow-x: auto;
      padding: 0 14px;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      scrollbar-width: none;
      flex-shrink: 0;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth
    }

    .admin-nav::-webkit-scrollbar {
      display: none
    }

    .admin-nav::-webkit-scrollbar-button {
      display: none
    }

    .admin-tab {
      padding: 14px 16px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      border-bottom: 2.5px solid transparent;
      transition: all .25s var(--ease);
      white-space: nowrap;
      flex-shrink: 0;
      position: relative
    }

    .admin-tab:hover {
      color: var(--dark)
    }

    .admin-tab.active {
      color: var(--brand);
      border-bottom-color: var(--brand)
    }

    /* Menu Management */
    .menu-mgmt-item {
      background: var(--white);
      border-radius: var(--rl);
      padding: 13px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--border);
      margin-bottom: 8px;
      box-shadow: var(--sh)
    }

    .mgmt-emoji {
      font-size: 28px;
      width: 44px;
      text-align: center;
      flex-shrink: 0
    }

    .mgmt-body {
      flex: 1;
      min-width: 0
    }

    .mgmt-name {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 2px
    }

    .mgmt-meta {
      font-size: 11px;
      color: var(--muted)
    }

    .mgmt-price {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 14px;
      color: var(--brand);
      margin-right: 8px
    }

    .mgmt-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0
    }

    .action-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border: 1px solid var(--border);
      background: var(--white);
      cursor: pointer;
      transition: .2s;
      flex-shrink: 0
    }

    .action-btn:hover {
      background: var(--light2)
    }

    .action-btn.danger:hover {
      background: var(--red-l);
      border-color: #fca5a5
    }

    /* Revenue Report */
    .revenue-chart {
      background: var(--white);
      border-radius: var(--rl);
      padding: 16px;
      border: 1px solid var(--border);
      margin-bottom: 12px
    }

    .bar-chart {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .bar-label {
      font-size: 11px;
      color: var(--muted);
      min-width: 60px;
      flex-shrink: 0;
      font-weight: 600
    }

    .bar-track {
      flex: 1;
      height: 8px;
      background: var(--light2);
      border-radius: 4px;
      overflow: hidden
    }

    .bar-fill {
      height: 100%;
      border-radius: 4px;
      background: var(--brand);
      transition: width 1.5s cubic-bezier(.34, 1.2, .64, 1)
    }

    .bar-val {
      font-size: 11px;
      font-weight: 700;
      min-width: 44px;
      text-align: right;
      color: var(--dark)
    }

    /* Inventory Alert */
    .inventory-item {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 12px 13px;
      background: var(--white);
      border-radius: 11px;
      border: 1px solid var(--border);
      margin-bottom: 7px;
      box-shadow: var(--sh)
    }

    .inv-icon {
      font-size: 22px;
      width: 40px;
      text-align: center;
      flex-shrink: 0
    }

    .inv-body {
      flex: 1
    }

    .inv-name {
      font-weight: 700;
      font-size: 13px
    }

    .inv-stock {
      font-size: 11px;
      margin-top: 1px
    }

    .inv-stock.low {
      color: var(--red);
      font-weight: 700
    }

    .inv-stock.medium {
      color: var(--amber);
      font-weight: 600
    }

    .inv-stock.ok {
      color: var(--green2)
    }

    .inv-progress {
      margin-top: 5px
    }

    .alert-badge {
      padding: 3px 9px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      flex-shrink: 0
    }

    .alert-critical {
      background: var(--red-l);
      color: var(--red)
    }

    .alert-low {
      background: var(--amber-l);
      color: var(--amber)
    }

    .alert-ok {
      background: var(--green-l);
      color: var(--green2)
    }

    /* Pickup point management */
    .hostel-mgmt-card {
      background: var(--white);
      border-radius: var(--rl);
      padding: 14px;
      border: 1px solid var(--border);
      margin-bottom: 9px;
      box-shadow: var(--sh)
    }

    .hostel-mgmt-head {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-bottom: 10px
    }

    .hostel-mgmt-icon {
      font-size: 26px
    }

    .hostel-mgmt-name {
      font-weight: 700;
      font-size: 14px
    }

    .hostel-mgmt-loc {
      font-size: 11px;
      color: var(--muted)
    }

    .hostel-mgmt-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px
    }

    .cms-item {
      background: var(--light2);
      border-radius: 9px;
      padding: 9px;
      text-align: center
    }

    .cms-val {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 16px
    }

    .cms-lbl {
      font-size: 9px;
      color: var(--muted);
      margin-top: 1px;
      text-transform: uppercase;
      letter-spacing: .3px
    }

    /* Student management */
    .emp-row {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 13px;
      background: var(--white);
      border-radius: 11px;
      border: 1px solid var(--border);
      margin-bottom: 7px;
      cursor: pointer;
      transition: .2s
    }

    .emp-row:hover {
      background: var(--light2)
    }

    .emp-av {
      width: 36px;
      height: 36px;
      background: var(--blue);
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: 12px;
      flex-shrink: 0;
      font-family: var(--fh)
    }

    .emp-body {
      flex: 1
    }

    .emp-name {
      font-weight: 700;
      font-size: 13px
    }

    .emp-detail {
      font-size: 10px;
      color: var(--muted);
      margin-top: 1px
    }

    .emp-balance {
      font-weight: 800;
      font-size: 13px;
      color: var(--green2);
      font-family: var(--fh)
    }

    .sub-input-row {
      display: flex;
      gap: 8px;
      margin-top: 14px
    }

    .sub-input {
      background: rgba(255, 255, 255, .15);
      border: 1.5px solid rgba(255, 255, 255, .25);
      border-radius: 10px;
      padding: 10px 13px;
      color: #fff;
      font-size: 15px;
      font-family: var(--fh);
      font-weight: 700;
      width: 120px
    }

    .sub-input::placeholder {
      color: rgba(255, 255, 255, .3)
    }

    /* ─── NOTIFICATION PANEL ─── */
    .notif-panel {
      position: fixed;
      top: 60px;
      right: 14px;
      width: 300px;
      max-width: calc(100vw - 28px);
      background: var(--white);
      border-radius: var(--rl);
      border: 1px solid var(--border);
      box-shadow: var(--shl);
      z-index: 200;
      animation: slideUp .25s ease;
      max-height: 400px;
      overflow-y: auto
    }

    .notif-header {
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .notif-title {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 14px
    }

    .notif-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 10px;
      cursor: pointer;
      transition: .2s
    }

    .notif-item:hover {
      background: var(--light2)
    }

    .notif-item.unread {
      background: var(--brand-l)
    }

    .notif-icon {
      font-size: 20px;
      flex-shrink: 0
    }

    .notif-body {
      flex: 1
    }

    .notif-text {
      font-size: 12px;
      font-weight: 600;
      color: var(--dark);
      margin-bottom: 2px
    }

    .notif-time {
      font-size: 10px;
      color: var(--muted)
    }

    .notif-empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
      font-size: 13px
    }

    /* ─── SEARCH ─── */
    .search-bar {
      display: flex;
      align-items: center;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: 13px 18px;
      gap: 10px;
      margin-bottom: 18px;
      transition: all .3s var(--ease);
      box-shadow: 0 2px 12px rgba(15, 23, 42, .08)
    }

    .search-bar:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .1)
    }

    .search-bar input {
      flex: 1;
      font-size: 14px;
      color: var(--dark);
      background: none;
      border: none
    }

    .search-bar input::placeholder {
      color: var(--muted)
    }

    .search-icon {
      font-size: 18px;
      color: var(--muted);
      flex-shrink: 0
    }

    /* ─── MISC ─── */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px
    }

    .section-title {
      font-family: var(--fh);
      font-weight: 700;
      font-size: 18px;
      color: var(--dark)
    }

    .section-action {
      font-size: 12px;
      color: var(--brand);
      font-weight: 700;
      cursor: pointer;
      transition: color .2s
    }

    .section-action:hover {
      color: var(--brand2)
    }

    .home-content {
      background: #fff;
      border-radius: 28px 28px 0 0;
      margin-top: -18px;
      position: relative;
      z-index: 2;
      padding: 20px 16px 0;
      min-height: 70vh
    }

    /* Hostel card entrance */
    @keyframes hostelPop {
      from {
        opacity: 0;
        transform: scale(.9) translateY(8px)
      }

      to {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    .hostel-card {
      animation: hostelPop .4s var(--ease-bounce) backwards
    }

    .hostel-card:nth-child(1) {
      animation-delay: 0s
    }

    .hostel-card:nth-child(2) {
      animation-delay: .06s
    }

    .divider-text {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 0;
      color: var(--muted);
      font-size: 12px
    }

    .divider-text::before,
    .divider-text::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border)
    }

    .color-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 4px
    }

    .refresh-hint {
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      padding: 8px;
      animation: fadeIn .3s ease
    }

    /* Scrollspy top tab */
    .sticky-topbar {
      position: sticky;
      top: 58px;
      z-index: 10;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 0 14px
    }

    /* ─── Back Button ─── */
    .back-btn {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: var(--mid);
      cursor: pointer;
      transition: .2s;
      flex-shrink: 0
    }

    .back-btn:hover {
      background: var(--light2);
      color: var(--dark)
    }

    /* ─── RESPONSIVE ─── */
    @media(min-width:600px) {

      .page,
      .page-padded {
        max-width: 560px;
        margin: 0 auto
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr 1fr
      }
    }

    /* ═══ ADMIN: dashboard + menu ═══════════════════════════════════════
       Both pages use the full laptop width (the rest of admin keeps its
       narrow column) and collapse to phone layouts below 640px. */
    #s-admin #admin-body[data-tab="overview"],
    #s-admin #admin-body[data-tab="menu"] {
      max-width: 1180px !important;
      padding: 18px 18px 40px !important
    }

    #s-admin .progress-fill { background: linear-gradient(90deg, var(--brand), #2BC46A) }

    .ad-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 2px 16px }
    .ad-greet { font-family: var(--fh); font-size: clamp(21px, 4.4vw, 28px); font-weight: 700; color: var(--dark); line-height: 1.15 }
    .ad-date { font-size: 12.5px; color: var(--muted); margin-top: 4px }
    .ad-pills { display: flex; flex-wrap: wrap; gap: 8px }
    .ad-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand-l); color: var(--brand2); border: 1px solid var(--brand-m); cursor: pointer }
    .ad-pill.warn { background: #FEF2F2; color: #B91C1C; border-color: #FECACA }
    .ad-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block }

    .ad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px }
    .ad-kpi { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--sh); min-width: 0 }
    .ad-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px }
    .ad-kpi-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px }
    .ad-kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--brand-l); flex-shrink: 0 }
    .ad-kpi-val { font-family: var(--fh); font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; color: var(--dark); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .ad-delta { display: block; font-size: 11.5px; font-weight: 700; margin-top: 6px }
    .ad-up { color: #15803D }
    .ad-down { color: #B91C1C }
    .ad-flat { color: var(--muted) }

    .ad-section-t { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--dark); margin: 0 2px 8px }
    .ad-live { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px }
    .ad-live-item { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; box-shadow: var(--sh); transition: transform .15s var(--ease); font-family: var(--f) }
    .ad-live-item:hover { transform: translateY(-2px) }
    .ad-live-item b { display: block; font-family: var(--fh); font-size: 24px; color: var(--dark); line-height: 1.1 }
    .ad-live-item span { font-size: 11.5px; font-weight: 700; color: var(--muted) }
    .ad-live-item.new b { color: #2563EB }
    .ad-live-item.prep b { color: #D97706 }
    .ad-live-item.ready b { color: #15803D }

    .ad-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start }
    .ad-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--sh); min-width: 0 }
    .ad-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px }
    .ad-card-h h3 { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--dark); margin: 0 }
    .ad-card-h small { font-size: 12px; color: var(--muted); font-weight: 600; text-align: right }

    .ad-card { position: relative }
    .ad-chart-empty { position: absolute; left: 16px; right: 16px; top: 46%; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted) }
    .ad-bars { display: flex; align-items: stretch; gap: 8px; height: 180px }
    .ad-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px }
    .ad-bar-val { font-size: 10.5px; font-weight: 700; color: var(--dark); white-space: nowrap; height: 14px }
    .ad-bar-track { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border) }
    .ad-bar-fill { width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #2BC46A, var(--brand)) }
    .ad-bar.today .ad-bar-fill { background: linear-gradient(180deg, #FB923C, #EA580C) }
    .ad-bar-lbl { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap }
    .ad-bars.hours { height: 130px; gap: 4px }
    .ad-bars.hours .ad-bar-fill { max-width: 22px; border-radius: 5px 5px 2px 2px }
    .ad-bars.hours .ad-bar-lbl { font-size: 9.5px }

    .ad-hostel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border) }
    .ad-card-h + .ad-hostel { border-top: 0; padding-top: 2px }
    .ad-hostel-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--brand-l); flex-shrink: 0 }
    .ad-hostel-body { flex: 1; min-width: 0 }
    .ad-hostel-name { font-weight: 700; font-size: 14px; color: var(--dark) }
    .ad-hostel-meta { font-size: 12px; color: var(--muted) }
    .ad-hostel-rev { text-align: right; font-family: var(--fh); font-weight: 700; font-size: 16px; color: var(--dark); white-space: nowrap }

    .ad-split { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--light2); margin: 10px 0 8px }
    .ad-split i { display: block; height: 100% }
    .ad-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600 }
    .ad-legend b { color: var(--dark) }
    .ad-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle }

    .ad-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 }
    .ad-top-rank { width: 20px; font-weight: 800; color: var(--muted); font-size: 12px }
    .ad-top-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
    .ad-top-track { width: 34%; height: 8px; border-radius: 6px; background: var(--light2); overflow: hidden }
    .ad-top-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #2BC46A); border-radius: 6px }
    .ad-top-qty { width: 34px; text-align: right; font-weight: 800; font-size: 13px; color: var(--dark) }

    .ad-attn-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; margin-bottom: 8px; cursor: pointer }
    .ad-attn-row.bad { background: #FEF2F2; border-color: #FECACA }
    .ad-attn-row.ok { background: var(--brand-l); border-color: var(--brand-m); cursor: default }
    .ad-attn-row .t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--dark) }
    .ad-attn-row .t small { display: block; font-weight: 600; color: var(--muted); font-size: 11.5px; margin-top: 1px }
    .ad-attn-row .go { font-size: 12px; font-weight: 800; color: var(--brand2); white-space: nowrap }

    .ad-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
    .ad-action { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 14px 8px; text-align: center; cursor: pointer; font-family: var(--f); font-size: 12px; font-weight: 700; color: var(--dark); transition: transform .15s var(--ease), border-color .15s }
    .ad-action:hover { transform: translateY(-2px); border-color: var(--brand-m) }
    .ad-action span { display: block; font-size: 22px; margin-bottom: 6px }
    .ad-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 18px 0 }

    /* menu */
    .am-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 2px 14px }
    .am-title { font-family: var(--fh); font-size: clamp(21px, 4.4vw, 28px); font-weight: 700; color: var(--dark) }
    .am-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px }
    .am-add { padding: 11px 18px !important; border-radius: 12px !important; white-space: nowrap }
    .am-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px }
    .am-stat { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 14px; text-align: left; cursor: pointer; box-shadow: var(--sh); font-family: var(--f) }
    .am-stat b { display: block; font-family: var(--fh); font-size: 22px; color: var(--dark); line-height: 1.1 }
    .am-stat span { font-size: 11.5px; font-weight: 700; color: var(--muted) }
    .am-stat.warn b { color: #B45309 }
    .am-stat.on { border-color: var(--brand); background: var(--brand-l) }
    .am-tools { margin-bottom: 6px }
    .am-search { margin-bottom: 10px !important }
    .am-cats .chip small { opacity: .6; margin-left: 3px }
    .am-group { margin-bottom: 20px }
    .am-group-h { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--dark); margin: 8px 2px 10px }
    .am-group-h span { font-family: var(--f); font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 4px }
    .am-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px }
    .am-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--sh); display: flex; flex-direction: column; transition: box-shadow .2s var(--ease) }
    .am-card:hover { box-shadow: var(--shm) }
    .am-card.is-off .am-photo img,
    .am-card.is-off .am-emoji { filter: grayscale(.85); opacity: .7 }
    .am-photo { position: relative; aspect-ratio: 16 / 10; background: #F1F5F9; cursor: pointer; overflow: hidden; flex-shrink: 0 }
    .am-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
    .am-emoji { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; gap: 6px }
    .am-emoji span { font-size: 11.5px; font-weight: 700; color: var(--brand2); background: var(--white); padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--brand-m) }
    .am-veg { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; border-radius: 4px; background: var(--white); border: 2px solid #16A34A }
    .am-veg::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #16A34A }
    .am-veg.nonveg { border-color: #B91C1C }
    .am-veg.nonveg::after { background: #B91C1C }
    .am-best { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 800; color: #92400E; background: #FEF3C7; padding: 3px 8px; border-radius: 999px }
    .am-off { position: absolute; left: 10px; bottom: 10px; font-size: 11px; font-weight: 800; color: #fff; background: rgba(15, 23, 42, .78); padding: 3px 9px; border-radius: 999px }
    .am-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0 }
    .am-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
    .am-name { font-weight: 800; font-size: 14.5px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
    .am-price { font-family: var(--fh); font-weight: 700; font-size: 17px; color: var(--brand2); white-space: nowrap }
    .am-cat { font-size: 12px; color: var(--muted); margin-top: -4px }
    .am-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px }
    .am-stock { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden }
    .am-stock button { width: 30px; height: 30px; font-size: 16px; font-weight: 800; color: var(--dark); background: var(--light) }
    .am-stock button:active { background: var(--brand-l) }
    .am-stock span { min-width: 40px; text-align: center; font-weight: 800; font-size: 13px }
    .am-avail { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted) }
    .am-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px }
    .am-btn { padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border) !important; background: var(--white); font-size: 12.5px; font-weight: 700; color: var(--dark) }
    .am-btn:hover { border-color: var(--brand-m) !important; background: var(--brand-l) }
    .am-btn.danger { color: #B91C1C }
    .am-btn.danger:hover { background: #FEF2F2; border-color: #FECACA !important }
    .am-hint { font-size: 12px; color: var(--muted); margin-top: 10px }
    .am-edit-photo { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: #F1F5F9; margin-bottom: 14px; cursor: pointer }
    .am-edit-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
    .am-edit-photo > span { position: absolute; right: 10px; bottom: 10px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px }

    @media (max-width: 900px) {
      .ad-grid { grid-template-columns: minmax(0, 1fr) }
      .ad-live { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    }

    @media (max-width: 640px) {
      #s-admin #admin-body[data-tab="overview"],
      #s-admin #admin-body[data-tab="menu"] { padding: 14px 12px 32px !important }
      .ad-kpis, .am-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
      .ad-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
      .ad-action { padding: 10px 4px; font-size: 10.5px }
      .ad-action span { font-size: 20px; margin-bottom: 4px }
      .ad-live { grid-template-columns: repeat(3, minmax(0, 1fr)) }
      .ad-live-item { padding: 10px }
      .ad-live-item b { font-size: 20px }
      .ad-bars { height: 150px; gap: 5px }
      .ad-bar-val { font-size: 9px }
      .ad-bars.hours .ad-bar-lbl:not(.show) { visibility: hidden }
      .am-head { align-items: center }
      .am-cards { grid-template-columns: minmax(0, 1fr) }
      .am-card { flex-direction: row }
      .am-photo { aspect-ratio: auto; width: 108px; min-height: 100% }
      .am-emoji { font-size: 30px }
      .am-emoji span { display: none }
      .am-best { top: auto; bottom: 8px; right: auto; left: 8px; font-size: 9.5px; padding: 2px 6px }
      .am-off { bottom: auto; top: 8px; left: auto; right: 8px; font-size: 9.5px; padding: 2px 6px }
      .am-body { padding: 10px 12px 12px; gap: 7px }
      .am-actions .am-btn { padding: 7px 6px; font-size: 12px }
    }

    /* ═══ HOME v2 — matches the approved home mockup (1024×1536) ═══════
       --u is one mockup pixel at the current page width, so every size here
       is the mockup's own measurement; text and tap targets keep a floor. */
    #s-home { --u: calc(min(520px, 100vw) / 1024) }
    #s-home.active { background: linear-gradient(180deg, #FEFAF4 0%, #FEFBF7 45%, #FDF6EC 100%) !important }

    /* header */
    #s-home > .hm-nav {
      background: transparent !important;
      border: 0;
      height: auto;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      padding: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 12);
      gap: calc(var(--u) * 18);
      position: relative;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      color: #0F2A3D
    }
    #s-home .hm-nav .nav-logo { gap: calc(var(--u) * 24) }
    #s-home .hm-tile { width: max(38px, calc(var(--u) * 104)); height: auto; display: block; flex-shrink: 0 }
    #s-home .hm-nav .nav-title { font-family: var(--f); font-size: max(17px, calc(var(--u) * 50)); font-weight: 800; color: #0F2A3D; letter-spacing: -.02em; line-height: 1.15 }
    #s-home .hm-nav .nav-title span { color: #16A34A }
    #s-home .hm-loc { color: #4B5563; font-size: max(12px, calc(var(--u) * 30)); margin-top: 3px; white-space: nowrap }
    #s-home .hm-loc svg { vertical-align: -2px }
    #s-home .hm-loc svg:first-child { color: #6B7280; margin-right: 4px }
    #s-home .hm-loc svg:last-child { margin-left: 4px }

    #s-home .hm-wallet {
      background: #fff !important;
      border: 1px solid #F0EAE1;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
      border-radius: 999px;
      padding: 7px 10px 7px 10px;
      gap: 8px;
      backdrop-filter: none
    }
    #s-home .hm-wallet .wallet-amt { color: #0F2A3D; font-family: var(--f); font-weight: 800; font-size: 15px; line-height: 1.1 }
    #s-home .hm-wallet .wallet-lbl { color: #6B7280; font-size: 10px; letter-spacing: .6px }
    #s-home .hm-chev { color: #6B7280; flex-shrink: 0 }
    #s-home .hm-refresh { display: none !important }
    #s-home .hm-bell {
      width: 44px; height: 44px; border-radius: 50%;
      background: #fff !important; border: 1px solid #F0EAE1;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06)
    }
    #s-home .hm-bell .notif-dot { top: 8px; right: 10px }
    #s-home .hm-av { width: 44px; height: 44px; background: #0E5A43; color: #fff; font-family: var(--f); font-weight: 800; font-size: 15px }

    /* hero */
    #s-home .hm-hero { background: transparent; min-height: 0; overflow: visible; display: block; position: relative; padding: 0; animation: none }
    #s-home .hm-hero-art { position: absolute; right: 0; top: calc(var(--u) * -40); width: calc(var(--u) * 469); height: auto; z-index: 0; pointer-events: none }
    #s-home .hm-hero .hero-content { position: relative; z-index: 2; padding: calc(var(--u) * 6) calc(var(--u) * 40) 0 }
    #s-home .hm-goodfood { display: block; width: calc(var(--u) * 156); height: auto; margin: 0 0 0 calc(var(--u) * -12) }
    #s-home .hm-hero .hero-greet { display: none }
    #s-home .hm-hero .hero-name {
      font-family: var(--f);
      font-weight: 800;
      font-size: max(23px, calc(var(--u) * 58));
      line-height: 1.12;
      letter-spacing: -.02em;
      color: #0F2A3D;
      padding-right: 0;
      margin: calc(var(--u) * 2) 0 calc(var(--u) * 14) calc(var(--u) * 8);
      max-width: calc(var(--u) * 560)
    }
    #s-home .hm-hero .hero-name span { color: #16A34A }
    #s-home .hm-sub { font-size: max(13px, calc(var(--u) * 30)); color: #4B5563; margin: 0 0 calc(var(--u) * 34) calc(var(--u) * 30); max-width: calc(var(--u) * 560) }
    #s-home .hm-hero .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 32); margin-left: calc(var(--u) * 8) }
    #s-home .hm-hero .hero-btn-primary,
    #s-home .hm-hero .hero-btn-secondary {
      min-width: 0;
      gap: calc(var(--u) * 16);
      padding: max(9px, calc(var(--u) * 18)) max(14px, calc(var(--u) * 28));
      font-size: max(13px, calc(var(--u) * 30));
      font-weight: 600;
      color: #1F2937;
      border-radius: 999px;
      box-shadow: none
    }
    #s-home .hm-hero .hero-btn-primary { background: #FED7A6 }
    #s-home .hm-hero .hero-btn-secondary { background: #E6E8FF }
    #s-home .hm-hero .hero-btn-primary .hero-btn-chev { color: #C2410C; opacity: 1 }
    #s-home .hm-hero .hero-btn-secondary .hero-btn-chev { color: #4F46E5; opacity: 1 }
    #s-home .hm-ico { display: inline-grid; place-items: center; line-height: 0 }

    /* content area: no white sheet — the mockup is one continuous page */
    #s-home .home-content { background: transparent; margin-top: 0; padding: 0 calc(var(--u) * 40); border-radius: 0; min-height: 0 }

    /* search */
    #s-home .home-content .search-bar {
      background: #fff;
      border: 1px solid #EFE9E1;
      border-radius: 999px;
      height: max(52px, calc(var(--u) * 86));
      padding: 0 calc(var(--u) * 12) 0 calc(var(--u) * 32);
      gap: calc(var(--u) * 26);
      margin: calc(var(--u) * 30) 0 calc(var(--u) * 26);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
      animation: none
    }
    #s-home .hm-search-ico { line-height: 0 }
    #s-home .home-content .search-bar input { font-size: max(14px, calc(var(--u) * 30)); color: #0F2A3D }
    #s-home .home-content .search-bar input::placeholder { color: #8A94A6 }
    #s-home .hm-veg {
      display: inline-flex; align-items: center; gap: 6px;
      border: 1.5px solid #D6EDDF; background: #fff; color: #0E6B4F;
      font-weight: 700; font-size: max(12.5px, calc(var(--u) * 28));
      padding: 6px 10px 6px 7px; border-radius: 999px; box-shadow: none
    }
    #s-home .hm-leaf { width: 22px; height: 22px; border-radius: 50%; background: #16A34A; display: grid; place-items: center; flex-shrink: 0 }
    #s-home .hm-veg-chev { line-height: 0; color: #0E6B4F }
    #s-home .hm-veg.active { background: #E8F6EC; border-color: #16A34A; color: #0E6B4F }

    /* five picks */
    #s-home .cuisine-section { margin: 0 0 calc(var(--u) * 10) }
    #s-home .cuisine-row { gap: 0; justify-content: space-between; overflow: visible; padding: 0 }
    #s-home .cuisine-pick { width: calc(var(--u) * 180); gap: calc(var(--u) * 12); flex-shrink: 1 }
    #s-home .cuisine-pick .cp-img { width: calc(var(--u) * 136); height: calc(var(--u) * 136); background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; font-size: 0 }
    #s-home .cuisine-pick .cp-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 }
    #s-home .cuisine-pick .cp-name { font-size: max(11px, calc(var(--u) * 28)); font-weight: 600; color: #1F2937; line-height: 1.2; white-space: normal; text-align: center }

    /* collect from */
    #s-home .hm-sec { margin: calc(var(--u) * 30) 0 calc(var(--u) * 18) }
    #s-home .hm-sec .section-title { display: flex; align-items: center; gap: calc(var(--u) * 16); font-family: var(--f); font-weight: 800; font-size: max(18px, calc(var(--u) * 44)); color: #0F2A3D }
    #s-home .hm-sec .section-action { font-size: max(13px, calc(var(--u) * 30)); font-weight: 700; color: #16A34A }
    #s-home .hostel-scroll { gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 26) }
    #s-home .hostel-card {
      gap: calc(var(--u) * 28);
      padding: calc(var(--u) * 14) calc(var(--u) * 28) calc(var(--u) * 14) calc(var(--u) * 26);
      border-radius: calc(var(--u) * 30);
      border: 1.5px solid #F0EAE1;
      background: #fff;
      box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
      animation: none
    }
    #s-home .hostel-card.active { border: 2px solid #3BB984; background: #F1FAF3; box-shadow: 0 8px 22px rgba(22, 163, 74, .12) }
    #s-home .hostel-card .hostel-icon { width: max(46px, calc(var(--u) * 112)); height: auto; background: none; font-size: 28px; display: grid; place-items: center; flex-shrink: 0 }
    #s-home .hostel-card .hostel-icon img { width: 100%; height: auto; display: block }
    #s-home .hostel-card .hostel-name { font-family: var(--f); font-size: max(15px, calc(var(--u) * 38)); font-weight: 700; color: #0F2A3D; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px }
    #s-home .hostel-card .hostel-tag { background: #E3F4EA; color: #0E7A4B; font-size: max(9.5px, calc(var(--u) * 22)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin: 0 }
    #s-home .hostel-card .hostel-meta { font-size: max(12px, calc(var(--u) * 29)); color: #6B7280; margin-top: 3px }
    #s-home .hostel-card .hostel-check {
      width: max(28px, calc(var(--u) * 46)); height: max(28px, calc(var(--u) * 46));
      border-radius: 50%; border: 2px solid #D1D5DB; background: transparent;
      display: grid; place-items: center; color: #9CA3AF; font-size: 13px; flex-shrink: 0
    }
    #s-home .hostel-card .hostel-check.on { background: #16A34A; border-color: #16A34A; color: #fff }

    /* Today's Menu banner */
    #s-home .hm-banner {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      min-height: max(84px, calc(var(--u) * 148));
      margin: 0 0 calc(var(--u) * 34);
      border-radius: calc(var(--u) * 34);
      background: linear-gradient(100deg, #07393D 0%, #045A58 42%, #0B6656 68%, #1E7E55 100%);
      box-shadow: 0 12px 28px rgba(7, 57, 61, .22);
      cursor: pointer
    }
    #s-home .hm-banner-art {
      position: absolute; right: 0; top: 0; height: 100%; width: auto;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
      mask-image: linear-gradient(90deg, transparent 0, #000 16%);
      pointer-events: none
    }
    #s-home .hm-banner-leaf { position: absolute; left: calc(var(--u) * 16); bottom: calc(var(--u) * -2); width: calc(var(--u) * 62); height: auto; pointer-events: none }
    #s-home .hm-banner-text { position: relative; z-index: 1; padding-left: calc(var(--u) * 40) }
    #s-home .hm-banner-title { display: flex; align-items: center; gap: calc(var(--u) * 12); color: #fff; font-family: var(--f); font-weight: 800; font-size: max(17px, calc(var(--u) * 44)); white-space: nowrap }
    #s-home .hm-banner-title img { width: max(18px, calc(var(--u) * 48)); height: auto }
    #s-home .hm-banner-sub { color: rgba(255, 255, 255, .9); font-size: max(12px, calc(var(--u) * 30)); margin-top: 4px; padding-left: calc(var(--u) * 58); white-space: nowrap }
    #s-home .hm-banner-btn {
      position: relative; z-index: 1;
      margin-left: calc(var(--u) * 50);
      display: inline-flex; align-items: center; gap: 6px;
      background: #FDE047; color: #1F2937;
      font-weight: 700; font-size: max(12px, calc(var(--u) * 26));
      padding: max(7px, calc(var(--u) * 12)) max(12px, calc(var(--u) * 24));
      border-radius: 999px; white-space: nowrap
    }

    /* floating bottom navigation */
    #main-bnav.hm-bnav {
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%);
      width: calc(min(520px, 100vw) - 24px) !important;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      border-radius: 34px;
      background: #fff !important;
      border: 1px solid #F0EAE1;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
      padding: 8px 8px !important;
      height: auto
    }
    #main-bnav .bni { color: #6B7280; isolation: isolate; padding: 8px 2px 6px }
    #main-bnav .bni .bni-icon { font-size: 0; line-height: 0; transform: none }
    #main-bnav .bni .bni-label { color: inherit; font-size: 12px; font-weight: 600; margin-top: 2px }
    #main-bnav .bni.act { color: #0E6B4F }
    #main-bnav .bni.act .bni-label { color: #0E6B4F; font-weight: 700 }
    #main-bnav .bni.act::before { content: ''; position: absolute; inset: 0 8%; background: #E3F4EA; border-radius: 24px; z-index: -1 }
    #main-bnav .hm-fill { fill: currentColor }
    #main-bnav .bni:not(.act) .hm-fill { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round }
    #main-bnav .bni-fab i { width: 64px; height: 64px; top: -30px; border: 5px solid #fff; background: linear-gradient(180deg, #19A565, #0E6B4F); box-shadow: 0 10px 24px rgba(14, 107, 79, .35) }

    /* small phones: keep the header on one line */
    @media (max-width: 380px) {
      #s-home > .hm-nav { padding-left: 12px; padding-right: 12px; gap: 6px }
      #s-home .hm-nav .nav-logo { gap: 8px }
      #s-home .hm-tile { width: 36px }
      #s-home .hm-nav .nav-title { font-size: 15.5px }
      #s-home .hm-wallet { padding: 5px 8px; gap: 5px }
      #s-home .hm-wallet .hm-wallet-ico { width: 22px; height: 22px }
      #s-home .hm-chev { display: none }
      #s-home .hm-bell, #s-home .hm-av { width: 36px; height: 36px }
      #s-home .hm-av { font-size: 13px }
      #s-home .hm-hero .hero-name { font-size: 21px }
      #s-home .hm-hero .hero-btn-primary,
      #s-home .hm-hero .hero-btn-secondary { font-size: 12.5px; padding: 8px 12px }
      #s-home .hm-banner-sub { display: none }
    }

    /* HOME v2 refinements — nearer the mockup's proportions */
    #s-home .hm-bell, #s-home .hm-av { width: 38px; height: 38px }
    #s-home .hm-av { font-size: 14px }
    #s-home .hm-bell .notif-dot { top: 6px; right: 8px }
    #s-home .hm-wallet { padding: 5px 9px; gap: 7px }
    #s-home .hm-wallet .wallet-amt { font-size: 14px }
    #s-home .hm-sub { white-space: nowrap; max-width: none; font-size: max(12.5px, calc(var(--u) * 30)) }
    #s-home .home-content .search-bar { height: max(44px, calc(var(--u) * 86)) }
    #s-home .hm-veg { padding: 4px 9px 4px 5px; font-size: max(12px, calc(var(--u) * 28)) }
    #s-home .hm-leaf { width: 20px; height: 20px }
    #s-home .cuisine-pick .cp-name { font-size: max(10.5px, calc(var(--u) * 28)); white-space: nowrap }
    #s-home .hostel-card { padding-top: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 10) }
    #s-home .hostel-card .hostel-icon { width: max(40px, calc(var(--u) * 104)) }
    #s-home .hostel-card .hostel-meta { font-size: max(11.5px, calc(var(--u) * 29)); margin-top: 1px }
    #s-home .hostel-card .hostel-check { width: max(24px, calc(var(--u) * 46)); height: max(24px, calc(var(--u) * 46)); font-size: 12px }
    #main-bnav.hm-bnav { padding: 5px 8px !important; border-radius: 30px }
    #main-bnav .bni { padding: 5px 2px 4px }
    #main-bnav .bni .bni-label { font-size: 11px; margin-top: 1px }
    #main-bnav .bni .bni-icon svg { width: 22px; height: 22px }
    #main-bnav .bni-fab i { width: 54px; height: 54px; top: -22px; border-width: 4px }
    @media (max-width: 380px) {
      #s-home .cuisine-pick .cp-name { white-space: normal; font-size: 10px }
      #s-home .hm-sub { white-space: normal }
    }

    /* HOME v2 second pass — header fit and banner layout */
    #s-home > .hm-nav { gap: 8px }
    #s-home .hm-nav .nav-title { font-size: max(16px, calc(var(--u) * 50)) }
    #s-home .hm-wallet { padding: 4px 7px 4px 8px; gap: 5px }
    #s-home .hm-wallet .hm-wallet-ico { width: 21px; height: 21px }
    #s-home .hm-wallet .wallet-amt { font-size: 13px }
    #s-home .hm-wallet .wallet-lbl { font-size: 8.5px; letter-spacing: .4px }
    #s-home .hm-chev { width: 14px; height: 14px }
    #s-home .hm-bell, #s-home .hm-av { width: 34px; height: 34px }
    #s-home .hm-bell svg { width: 18px; height: 18px }
    #s-home .hm-av { font-size: 12.5px }
    #s-home .hm-banner-art { width: 44%; object-fit: cover; object-position: 50% center }
    #s-home .hm-banner-title { font-size: max(16px, calc(var(--u) * 44)) }
    #s-home .hm-banner-sub { font-size: max(11px, calc(var(--u) * 30)) }
    #s-home .hm-banner-btn { margin-left: 10px; font-size: max(11.5px, calc(var(--u) * 26)); padding: 6px 11px }
    @media (max-width: 380px) {
      #s-home .hm-banner-sub { display: block; padding-left: 0 }
      #s-home .hm-banner-art { width: 40% }
      #s-home .hm-wallet .wallet-lbl { display: none }
    }

    /* ═══ HOME — orange (2026-09-19) ════════════════════════════════════
       The owner moved login to orange and asked for the home screen to
       match. The brand tokens are overridden only on the student home
       screen (all four tabs), its bottom bar and the cart button, so the
       kitchen, desk and admin screens keep their colours. Green stays where
       it means something: the Pure Veg pill, veg dots, "ready" and refund
       notes (those use --green / --green2, which are not touched here). */
    #s-home, #main-bnav, #cart-float {
      --brand: #EA580C;
      --brand2: #C2410C;
      --brand-l: #FFF1E6;
      --brand-m: #FED7AA
    }

    /* header + hero */
    #s-home .hm-nav .nav-title span,
    #s-home .hm-hero .hero-name span { color: #EA580C }
    #s-home .hm-av { background: linear-gradient(145deg, #F97316, #C2410C) }

    /* collect from */
    #s-home .hm-sec .section-action { color: #EA580C }
    #s-home .hostel-card:hover { box-shadow: 0 8px 22px rgba(234, 88, 12, .12) }
    #s-home .hostel-card.active { border-color: #FB923C; background: #FFF4EA; box-shadow: 0 8px 22px rgba(234, 88, 12, .14) }
    #s-home .hostel-card .hostel-tag { background: #FFEDD5; color: #C2410C }
    #s-home .hostel-card .hostel-check.on { background: #EA580C; border-color: #EA580C }

    /* Today's Menu banner: warm brown into orange instead of teal */
    #s-home .hm-banner {
      background: linear-gradient(100deg, #5A2208 0%, #8A320B 40%, #B8420C 70%, #D9560F 100%);
      box-shadow: 0 12px 28px rgba(154, 52, 18, .25)
    }

    /* menu, chips, reorder */
    #s-home .chip.active { box-shadow: 0 4px 12px rgba(234, 88, 12, .25) }
    #s-home .reorder-card { box-shadow: 0 2px 12px rgba(234, 88, 12, .08) }
    #s-home .reorder-card .ro-btn { box-shadow: 0 4px 12px rgba(234, 88, 12, .25) }
    #s-home .cuisine-pick:hover .cp-img { box-shadow: none }
    #s-home .bestseller-tag { background: linear-gradient(135deg, #EA580C, #F97316); box-shadow: 0 2px 8px rgba(234, 88, 12, .35) }
    #s-home .add-btn { box-shadow: 0 1px 4px rgba(234, 88, 12, .12) }
    #s-home .add-btn:hover { box-shadow: 0 4px 14px rgba(234, 88, 12, .28) }
    #s-home .btn-primary { box-shadow: 0 2px 8px rgba(234, 88, 12, .2) }
    #s-home .btn-primary:hover { box-shadow: 0 8px 24px rgba(234, 88, 12, .35) }
    #s-home .search-bar:focus-within { border-color: #FDBA74; box-shadow: 0 0 0 3px rgba(234, 88, 12, .12), 0 8px 24px rgba(15, 23, 42, .05) }

    /* orders / wallet / profile tabs */
    #s-home .token-card::after { background: radial-gradient(circle, rgba(234, 88, 12, .15) 0%, transparent 70%) }
    #s-home .wallet-hero::after { background: radial-gradient(circle, rgba(249, 115, 22, .28) 0%, transparent 70%) }
    #s-home .profile-hero {
      background: linear-gradient(135deg, #F97316 0%, #EA580C 50%, #C2410C 100%);
      box-shadow: 0 8px 24px rgba(234, 88, 12, .25)
    }

    /* bottom bar */
    #main-bnav .bni.act,
    #main-bnav .bni.act .bni-label { color: #EA580C }
    #main-bnav .bni.act::before { background: #FFEDD5 }
    #main-bnav .bni-fab i { background: linear-gradient(180deg, #FB923C, #EA580C); box-shadow: 0 10px 24px rgba(234, 88, 12, .35) }
    /* profile: settings switches and the "This month" label are brand, not
       success, so they follow the orange too */
    #s-home .toggle.on { background: #EA580C }
    #s-home #tab-profile .stat-sub.stat-up { color: #EA580C }
    /* ═══ CROSS-DEVICE CONSISTENCY — kept LAST in the sheet on purpose:
       these override base rules (.tnav, .hero-name, .search-bar…) that are
       declared further down, and equal-specificity rules resolve by order. ═══════════════════════════════════
       Android Chrome, Samsung Internet and some WebViews enlarge text on
       their own ("font boosting"), so the same screen rendered at different
       sizes on different phones. Pin it. */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%
    }

    /* Dark top bars: text inside defaults to white (the cart title was
       dark-on-dark and nearly invisible). */
    .tnav { color: #fff }

    /* A flex input's default min-width is its intrinsic width, which pushed
       the Pure Veg pill out of the search box on narrow phones. */
    .search-bar input { min-width: 0; flex: 1 }

    #kds-toggle-btn { white-space: nowrap }

    /* ── narrow phones (most budget Androids, iPhone SE) ── */
    @media (max-width: 400px) {
      .hero-name {
        font-size: clamp(21px, 6.6vw, 27px);
        padding-right: 40%
      }
      .hero-art { width: min(300px, 50%) }

      .cart-item { flex-wrap: wrap; row-gap: 10px }
      .cart-controls { width: 100%; justify-content: flex-end }

      /* staff headers: let the actions drop under the title instead of
         crushing it into three lines */
      .vendor-header > div:first-child { flex-wrap: wrap; gap: 10px }
      .vendor-header > div:first-child > div:first-child { flex: 1 1 170px; min-width: 0 }
      .vendor-title { font-size: clamp(18px, 5.6vw, 22px) }
    }

    @media (max-width: 380px) {
      .tnav { padding: 0 10px; gap: 6px }
      .nav-logo { gap: 7px }
      .nav-title { font-size: 13.5px }
      .nav-sub { display: none }
      .wallet-chip { padding: 5px 9px; gap: 4px }
      .wallet-lbl { display: none }
      .icon-btn { width: 32px; height: 32px; font-size: 14px; border-radius: 9px }
      .av-btn { width: 30px; height: 30px; font-size: 11px }
      .search-bar { padding: 11px 12px; gap: 8px }
      .veg-pill { padding: 5px 8px; font-size: 11px }
    }

    /* the smallest phones: the wordmark goes, every button stays */
    @media (max-width: 340px) {
      .nav-logo > div:last-child { display: none }
    }