/* 
ODG · app.css
App-shell layer. Loaded by APP PAGES ONLY, after shared.css. Related rules (base + their mobile overrides) are grouped per selector.
 *//* Universal Lucide Icon Styling (Consistent Icon-With-No-Box Pattern) */.lucide, svg.lucide, i[data-lucide], [data-lucide] {
  display: inline-block !important;
  vertical-align: middle !important;
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  /* App controls use flex/grid gaps. A forced icon margin shifts glyphs left
     inside fixed-size coloured icon surfaces such as role and action tiles. */
  margin-right: 0 !important;
  box-shadow: none !important;
}/* Reset wrappers so no double-padding occurs */.brand-mark-icon, .tile-ic, .app-brand-icon, .app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}/* In-app chrome (user / vendor / rider) */.app-body {
  min-height:100vh;
  background:var(--color-bg-base);
  padding-bottom:84px;
}.app-top {
  position:sticky;top:0;z-index:20;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 16px;
  background:rgba(23,19,18,.94);
  border-bottom:1px solid var(--color-border);
}.app-top h1 {
  margin:0;
  min-width:0;
  flex:1;
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.02em;
}.app-top__tools,
.rail-account-tools {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex-shrink:0;
}.app-icon-btn {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 2.25rem;
  width:2.25rem;
  height:2.25rem;
  padding:0;
  line-height:0;
  color:var(--color-text-primary);
  border-radius:4px;
}.app-icon-btn svg, .app-icon-btn i, .app-icon-btn .lucide {
  display:block !important;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}.app-icon-btn__badge {
  position:absolute;
  top:0;
  right:0;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:99px;
  background:var(--color-brand-red);
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  text-align:center;
  pointer-events:none;
}.app-main {padding:20px 16px 32px;max-width:560px;margin:0 auto;
}.app-wide {max-width:960px;
}.app-tabbar {
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
  background:#13100e;
  border-top:1px solid var(--color-border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
}.app-tabbar a {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--color-text-dim);padding:6px 0;
}.app-tabbar a.is-active {color:#fff;
}.app-tabbar svg, .app-tabbar i {width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
}.btn-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}.btn-grid-2 .button, .btn-grid-2 .btn {
  width: 100% !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: center !important;
}.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}.card-status-minimal, .card-tile-minimal, .card-metric-minimal, .card-row-minimal {
  margin-bottom: 1rem;
}.card-row-minimal, .menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 10px;
}.menu-item { border-bottom: 1px solid var(--color-border);
}.menu-item h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px;
}.menu-item .meta { font-size: 12px; color: var(--color-text-muted);
}.menu-item .price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--color-text-primary);
}.vendor-row {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
  gap: 8px;
}.vendor-row h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--color-text-primary);
}/* 3. Square Grid Tile (Cravings & Categories) */.card-tile-minimal, .tile {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: border-color 0.15s ease;
}.card-tile-minimal:hover, .tile:hover {
  border-color: var(--color-border-strong);
}/* 4. Interactive Live Status Tracker (Dispatch / Tracking / Job Card) */.card-status-minimal, .job-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand-red);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}.card-status-minimal:hover {
  background: var(--color-bg-mid);
  border-color: var(--color-border-strong);
}/* 5. Analytical Metric Stat Tile */.card-metric-minimal, .stat-pill {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}.stat-pill b { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.02em;
}.stat-pill span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dim);
}.field-stack {display:flex;flex-direction:column;gap:12px;margin-top:18px;
}.field-stack label {display:flex;flex-direction:column;gap:6px;
}.field-stack .field-label {
  font:500 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-dim);
}.field-stack input, .field-stack select, .field-stack textarea {
  width:100%;background:#151210;border:1px solid var(--color-border-strong);
  border-radius:var(--radius-control);padding:11px 12px;
  font:500 14px var(--font-display);color:var(--color-text-primary);outline:none;
}.field-stack textarea {min-height:88px;resize:vertical;
}.vendor-row, .order-row, .job-card {
  display:flex;gap:12px;padding:12px;border:1px solid var(--color-border);
  border-radius:10px;background:#151210;margin-bottom:10px;
}.vendor-row img, .menu-thumb {
  width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#222;
}.vendor-row h3, .order-row h3, .job-card h3 {font-size:15px;margin-bottom:4px;
}.meta {font-size:12px;color:var(--color-text-muted);
}.price {color:var(--color-brand-red);font-weight:600;
}.chip-row {display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;
}.chip {
  padding:6px 10px;border:1px solid var(--color-border);border-radius:999px;
  font-size:12px;color:var(--color-text-muted);
}.chip.is-on {border-color:#fff;color:#fff;
}.stat-pills {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;
}.stat-pill {background:#151210;border:1px solid var(--color-border);border-radius:10px;padding:12px;
}.stat-pill b {display:block;font-size:20px;letter-spacing:-.03em;
}.stat-pill span {font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim);
}.track-steps {display:flex;flex-direction:column;gap:0;margin:20px 0;
}.track-step {display:grid;grid-template-columns:16px 1fr;gap:12px;
}.track-step i {
  width:10px;height:10px;border-radius:50%;background:var(--color-border-strong);
  margin:6px auto;display:block;position:relative;
}.track-step i::after {
  content:"";position:absolute;left:4px;top:10px;width:1px;height:28px;background:var(--color-border);
}.track-step:last-child i::after {display:none;
}.track-step.is-done i {background:var(--color-brand-red);
}.track-step p {font-size:14px;padding-bottom:18px;
}.track-step small {display:block;color:var(--color-text-dim);margin-top:3px;
}.menu-item {display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-border);
}.qty {
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--color-border);border-radius:6px;padding:4px 8px;
}.banner {
  padding:10px 12px;border-radius:8px;background:#2a1a12;color:#f3d2c4;
  font-size:13px;margin-bottom:16px;border:1px solid #4a2a1c;
}.toggle {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--color-border);
}.app-main .auth-status {color:#c9bfb3;font-size:13px;min-height:1.2em;
}.app-main .auth-status.is-error {color:var(--color-brand-red);
}.app-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;
}.hours-row {
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:16px;
  align-items:center;
  padding:12px 14px;
  background:#12100f;
  border:1px solid #282525;
  border-radius:14px;
}.hours-row b {font-weight:600;letter-spacing:-.02em;
}.hours-times {display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}.hours-times i {font-style:normal;color:#77747b;font-size:12px;
}.hours-row input[type="time"] {
  background:#1a1715;
  color:#f7f5f1;
  border:1px solid #342f2d;
  border-radius:8px;
  padding:8px 10px;
  font:500 13px var(--font-display);
  color-scheme:dark;
  min-width:118px;
}.hours-row input[type="time"]:focus {outline:none;border-color:#555;
}.hours-row.is-shut {opacity:.55;
}.hours-row.is-shut input[type="time"] {pointer-events:none;
}.hours-row .chip {cursor:pointer;user-select:none;min-width:72px;text-align:center;
}@media (max-width:700px) {.hours-row {grid-template-columns:1fr auto;gap:10px;
  }.hours-times {grid-column:1 / -1;
  }
}@media (min-width:800px) {.app-main {padding:28px 24px;
  }.vendor-list, .order-list {display:grid;grid-template-columns:1fr 1fr;gap:12px;
  }
}/* User home — Render dark theme (#0D0D0D base, #141414 elevated) */.home-body {margin:0;height:100vh;overflow:hidden;background:#0D0D0D;color:#F5F5F5;
}.home-shell {
  display:flex;
  justify-content:space-between;
  width:100%;
  height:100vh;
}.home-side {
  width:25%;
  flex:0 0 25%;
  background:#141414;
  border-right:1px solid #262626;
  color:#f7f5f1;
  display:flex;
  flex-direction:column;
  padding:24px 20px;
  min-height:100vh;
}.home-nav {display:flex;flex-direction:column;gap:4px;margin-top:36px;align-items:flex-start;
}.home-nav a, .app-nav-item {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:6px;
  color:#8e8e93;
  font-size:13.5px;
  font-weight:500;
  width:fit-content;
  align-self:flex-start;
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  transition:all .15s ease;
}.home-nav a.is-on, .app-nav-item.is-active {color:#ffffff;background:#202020;border-color:#333333;
}.home-logout {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:#8e8e93;
  font-size:13px;
  padding:8px 12px;
  width:fit-content;
  align-self:flex-start;
  border-radius:6px;
  transition:color .15s ease;
}.home-logout svg, .home-logout i {
  width:18px;
  height:18px;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}.home-main {
  width:70%;
  flex:0 0 70%;
  background:#0D0D0D;
  overflow-y:auto;
  height:100vh;
  padding:24px 28px 44px;
}.home-kicker {
  font:700 12.5px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-text-primary);
  margin:0 0 14px;
}.home-section-head {
  display:flex;justify-content:space-between;align-items:baseline;
  margin:28px 0 12px;
}.home-section-head h3 {font-size:22px;letter-spacing:-.03em;font-weight:600;
}.home-section-head a {color:#8a8480;font-size:13px;
}.set-profile {
  display:flex;align-items:center;gap:16px;
  padding:8px 0 8px;
}.set-avatar {
  width:56px;height:56px;border-radius:50%;
  background:#fff;color:#171311;
  display:grid;place-items:center;
  font:600 16px var(--font-mono);
  flex-shrink:0;
}.set-name {font-size:28px;letter-spacing:-.02em;line-height:1.1;margin:0 0 4px;
}.set-email, .set-meta {color:#aaa5a6;font-size:14px;margin:0;
}.set-meta {margin-top:2px;
}.set-label {
  font:500 11px/1 var(--font-mono);
  letter-spacing:.12em;text-transform:uppercase;
  color:#77747b;
  margin:22px 0 10px;
}.set-group {
  border-top:1px solid #282525;
}.set-row {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:0.5rem;
  padding:12px 0;
  border-bottom:1px solid #262626;
  text-decoration:none;
  text-align:left;
}.set-row span {font-size:15px;font-weight:600;color:var(--color-text-primary);text-align:left;
}.set-row em {font-style:normal;font-size:12px;color:var(--color-text-dim);text-align:left;
}.set-row.is-danger span {color:var(--color-brand-red);
}/* Mobile Top Nav Bar & Slide-down Menu */.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}.nav-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}.nav-toggle-btn i, .nav-toggle-btn svg {
  width: 20px;
  height: 20px;
}@media (max-width:800px) {.nav-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }.home-body {height:auto;overflow:auto;
  }.home-shell {flex-direction:column;height:auto;
  }.home-side {
    width:100%;
    flex:none;
    min-height:0;
    padding:12px 16px;
    flex-direction:column;
    align-items:stretch;
    background:#141414;
    border-bottom:1px solid var(--color-border);
    position:relative;
  }.home-side .brand-mark {align-self:flex-start;
  }

  /* Smooth Collapsible Mobile Nav Bar (the "second nav bar") */

  .home-nav {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    gap:0.5rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    /* Closed state */
    max-height:0;
    opacity:0;
    transform:translateY(-6px);
    overflow-y:hidden;
    pointer-events:none;
    margin-top:0;
    padding-top:0;
    border-top:1px solid transparent;
    /* Smooth easing — opens confidently, closes gently */
    transition:max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
               opacity 0.22s ease,
               transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
               margin-top 0.28s ease,
               padding-top 0.28s ease,
               border-top-color 0.28s ease;
    will-change:max-height, opacity, transform;
  }

  .home-nav::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
  }

  .home-side.is-open .home-nav {
    max-height:140px;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    margin-top:10px;
    padding-top:10px;
    border-top-color:var(--color-border);
  }
  /* Stagger each link so they cascade in like a soft waterfall */
  .home-nav a {
    opacity:0;
    transform:translateY(-4px);
    transition:opacity 0.22s ease, transform 0.22s ease, color .15s ease, background .15s ease;
  }
  .home-side.is-open .home-nav a {
    opacity:1;
    transform:translateY(0);
  }
  .home-side.is-open .home-nav a:nth-child(1) {transition-delay:0.06s;
  }
  .home-side.is-open .home-nav a:nth-child(2) {transition-delay:0.10s;
  }
  .home-side.is-open .home-nav a:nth-child(3) {transition-delay:0.14s;
  }
  .home-side.is-open .home-nav a:nth-child(4) {transition-delay:0.18s;
  }
  .home-side.is-open .home-nav a:nth-child(5) {transition-delay:0.22s;
  }
  .home-side.is-open .home-nav a:nth-child(6) {transition-delay:0.26s;
  }
  .home-side.is-open .home-nav a:nth-child(7) {transition-delay:0.30s;
  }
  .home-nav a {
    flex:0 0 auto;
    text-align:center;
    padding:6px 12px;
    font-size:12px;
    white-space:nowrap;
    width:auto;
    align-self:auto;
  }
  .home-logout {
    display:inline-flex;
    flex:0 0 auto;
    font-size:12px;
    padding:6px 12px;
  }
  .home-main {width:100%;flex:none;height:auto;overflow:visible;padding:16px 16px 32px;
  }
}.bill-row {
  display:flex;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid #282525;font-size:15px;
}.bill-row.is-total {border-bottom:0;padding-top:18px;font-size:18px;
}.wallet-card {
  background:linear-gradient(160deg,#1c1614,#0e0c0b);
  border:1px solid #282525;
  border-radius:18px;
  padding:22px 20px;
  margin:8px 0 20px;
  max-width:380px;
}.wallet-card .set-name {margin:6px 0 4px;
}.home-main .menu-item {padding:16px 0;
}.home-main .qty button {color:inherit;padding:0 6px;
}.job-card {border-radius:16px;padding:14px 16px;
}/* ══════════════════════════════════════════════════════════════
   Polish layer — focus, motion, states (2026-08-24)
   ══════════════════════════════════════════════════════════════ */::selection {background:#ff1a1a;color:#fff;
}a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid #ff1a1a;
  outline-offset:2px;
  border-radius:6px;
}/* Buttons */.button.full {display:flex;width:100%;
}.button[disabled], .button[aria-disabled="true"] {opacity:.45;pointer-events:none;
}/* Side nav *//* ── User pill (avatar + name) — always visible on every page ── */.user-pill {
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;
  background:var(--color-bg-elevated-2);
  border:1px solid var(--color-border-strong);
  border-radius:99px;
  font:500 11px/1 var(--font-mono);
  color:var(--color-text-primary);
  width:fit-content;
  max-width:100%;
  white-space:nowrap;
  flex-shrink:0;
}.user-pill[hidden] {display:none;
}.user-pill .avatar {
  width:22px;height:22px;border-radius:50%;
  background:var(--color-brand-red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--font-display);
  flex-shrink:0;letter-spacing:.02em;
}.user-pill .name {overflow:hidden;text-overflow:ellipsis;max-width:120px;
}.user-pill[role="button"] {cursor:pointer;
}.user-pill[role="button"]:focus-visible {outline:2px solid #f7f5f1;outline-offset:2px;
}

/* Account actions opened from the user pill. The menu is positioned by nav.js;
   list labels retain a 1rem left inset for a consistent mobile reading edge. */
.account-popover {
  position:fixed;
  z-index:100;
  width:min(248px,calc(100vw - 32px));
  overflow:hidden;
  border:1px solid var(--color-border-strong);
  border-radius:12px;
  background:#171312;
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}
.account-popover[hidden] {display:none;
}
.account-popover-list {display:flex;flex-direction:column;margin:0;padding:8px 0;list-style:none;
}
.account-popover-list a {
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  min-height:44px;padding:10px 16px;
  color:var(--color-text-primary);text-align:left;text-decoration:none;
  font:500 13px/1.25 var(--font-display);
  transition:background .15s ease,color .15s ease;
}
.account-popover-list a:hover,.account-popover-list a:focus-visible {background:#211d1b;color:#fff;outline:none;
}
.account-popover-list .lucide {width:17px;height:17px;flex:0 0 17px;margin:0;color:var(--color-brand-red);
}.app-top .user-pill,
.rail-account-tools .user-pill {
  display:flex;
  align-items:center;
  height:2.25rem;
  margin:0;
  box-sizing:border-box;
}
.mobile-nav-top .user-pill {display:flex;flex-shrink:0;
}@media (max-width:800px) {

/* Mobile: pill sits at the right of the top bar, brand on the left.
   The mobile-nav-top uses justify-content:space-between so we need
   margin-left:auto to push the pill past the brand, then the toggle
   follows. */

.mobile-nav-top .user-pill .name {max-width:80px;
  }

.mobile-nav-top .user-pill {padding:4px 10px 4px 4px;
  }
}.home-main {position:relative;
}.home-nav a {transition:color .15s ease,background .15s ease,opacity 0.25s ease,transform 0.25s ease;
}.home-nav a:hover {color:#f7f5f1;background:rgba(247,245,241,.05);
}.home-nav a.is-on:hover {background:#171312;
}.home-logout {transition:color .15s ease;
}.home-logout:hover {color:#f7f5f1;
}.brand-mark {transition:opacity .15s ease;
}.brand-mark:hover {opacity:.85;
}/* Settings rows */.set-row {transition:background .15s ease;
}a.set-row:hover {background:rgba(247,245,241,.035);
}/* Chips */.chip {cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;
}.chip:hover {border-color:#77747b;color:#f7f5f1;
}.chip.is-on:hover {border-color:#fff;
}/* Cards */.job-card, .vendor-row, .order-row {transition:border-color .2s ease;
}.job-card:hover, .vendor-row:hover, .order-row:hover {border-color:#3a352f;
}.menu-item .price {font-variant-numeric:tabular-nums;
}/* Status pills — IBD tickets, jobs, tracking */.pill {
  display:inline-flex;align-items:center;gap:6px;
  font:500 10px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;margin-left:8px;
  border:1px solid var(--color-border-strong);color:#aaa5a6;
  vertical-align:middle;white-space:nowrap;
}.pill::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;
}.pill-ready {color:#ff1a1a;border-color:rgba(255,26,26,.45);
}.pill-done {color:#8fd48a;border-color:#2e4a2a;
}/* Tracking: current step pulse */.track-step.is-now i {background:#ff1a1a;
}/* Qty stepper */.qty {border-radius:999px;padding:2px;
}.qty button {
  width:32px;height:32px;display:inline-grid;place-items:center;
  border-radius:50%;font-size:16px;line-height:1;
  transition:background .15s ease;
}.qty button:hover {background:rgba(247,245,241,.09);
}.qty button:active {background:rgba(247,245,241,.16);
}.qty em {min-width:18px;text-align:center;font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;
}/* Style 02: 45° Diagonal Light Beam Sweep Skeleton Animation */.skeleton, .sk-view-wrap .skeleton {
  position: relative !important;
  background: #1a1a1a !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: block !important;
}.skeleton::after, .sk-view-wrap .skeleton::after {
  content: "" !important;
  position: absolute !important;
  inset: -50% !important;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%) !important;
  animation: odg-shimmer 1.5s infinite linear !important;
}@keyframes odg-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}.sk-view-wrap {
  width: 100%;
  animation: sk-fade-in 0.2s ease;
}@keyframes sk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}.sk-row {display:grid;grid-template-columns:112px 1fr;gap:20px;margin-bottom:18px;
}.sk-lines {display:flex;flex-direction:column;gap:12px;padding-top:8px;
}.sk-lines .skeleton {height:14px;
}.sk-lines .skeleton:nth-child(1) {width:52%;height:18px;
}.sk-lines .skeleton:nth-child(2) {width:34%;
}.sk-lines .skeleton:nth-child(3) {width:18%;
}/* Empty states */.empty {
  padding:36px 20px;border:1px dashed var(--color-border-strong);
  border-radius:14px;text-align:center;color:var(--color-text-muted);font-size:14px;
}.empty b {display:block;color:var(--color-text-primary);font-size:16px;margin-bottom:6px;letter-spacing:-.02em;
}/* Top bar + tab bar depth */.app-top {backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(23,19,18,.82);
}.app-tabbar a {transition:color .15s ease;
}.app-tabbar a svg {transition:transform .2s ease;
}.app-tabbar a.is-active svg {transform:translateY(-1px);
}/* Scrollbars in the app shell */.home-main::-webkit-scrollbar {width:10px;
}.home-main::-webkit-scrollbar-thumb {background:#2b2725;border-radius:8px;border:3px solid #171312;
}.home-main::-webkit-scrollbar-track {background:transparent;
}@media (prefers-reduced-motion: reduce) {

/* Reduced motion */

*:not(.skeleton) {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}@media (max-width:800px) {.sk-row {grid-template-columns:56px 1fr;
  }.home-section-head h3 {font-size:19px;
  }
}/* Sold-out menu rows stay visible but quiet */.menu-item.is-sold {opacity:.55;
}.menu-item.is-sold .price {color:var(--color-text-muted);
}/* ── User home views: AI / orders / wallet / alerts / settings ── *//* Activity amounts */.set-row em {font-variant-numeric:tabular-nums;
}/* ── Choose-role: pixel-identical grid cards ── */.set-name.slim {font-size:22px;margin-bottom:6px !important;
}.tiles {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  margin-top:16px;
  max-width:720px;
}.tile {
  background:#141414;
  border:1px solid #262626;
  border-radius:6px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:#f7f5f1;
  transition:all .15s ease;
  box-sizing:border-box;
}.tile:hover {
  border-color:#333333;
  background:#1a1a1a;
}.tile-ic {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:transparent;
  border:none;
  padding:0;
  width:auto;
  height:auto;
}.tile-ic i, .tile-ic svg {
  width:18px;
  height:18px;
  color:var(--color-brand-red);
}.tile-t {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}.tile-t strong {
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:#ffffff;
}.tile-t em {
  font-family:var(--font-mono);
  font-size:11px;
  font-style:normal;
  color:var(--color-text-dim);
}/* ── Hero strip: thumb + text tiles in a horizontal list ── */.hero-strip {display:flex;flex-wrap:wrap;gap:14px;
}.hero-tile {
  flex:1 1 280px;min-width:0;
  display:flex;align-items:center;gap:14px;
  padding:10px 0;
}.hero-tile img {
  width:118px;height:84px;object-fit:cover;border-radius:10px;
  background:#1a1715;flex-shrink:0;
  transition:filter .25s ease;
}.hero-tile:hover img {filter:brightness(1.12);
}.hero-tile-t {min-width:0;display:flex;flex-direction:column;gap:5px;
}.hero-tile-t small {
  display:flex;align-items:center;gap:6px;
  font:500 12.5px/1.35 var(--font-mono);letter-spacing:0;text-transform:none;
  color:#a9a49f;
}.hero-tile-t small.kick {
  font:600 10px/1.2 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:#6f6b6c;
}.hero-tile-t h2 {
  margin:0;font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}.hero-tile-t em {
  font-style:normal;font-size:12px;font-weight:600;color:var(--color-text-muted);
  display:inline-flex;align-items:center;
  transition:transform .2s ease,color .2s ease;
}.hero-tile:hover .hero-tile-t em {color:#f7f5f1;transform:translateX(3px);
}/* Spacing utilities — replaces inline styles */.gap-t-12 {margin-top:12px;
}.gap-t-16 {margin-top:16px;
}.gap-t-20 {margin-top:20px;
}.gap-t-24 {margin-top:24px;
}.gap-mid {margin:8px 0 22px;
}.gap-b-20 {margin-bottom:20px;
}.gap-who {margin:12px 0 8px;
}.form-narrow {max-width:440px;
}.spacer-36 {width:36px;flex-shrink:0;
}.flush-t {margin-top:0;
}.location-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 20px;
}.loc-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
}.loc-pill i {
  color: var(--color-brand-red);
  width: 16px;
  height: 16px;
}.loc-change-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}.loc-change-link:hover {
  color: var(--color-text-primary);
}/* Redesigned Hero Action Cards */.hero-action-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}.hero-action-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-mid);
}.hero-card-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--color-bg-dark);
}.hero-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}.hero-card-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-red);
  display: flex;
  align-items: center;
  gap: 6px;
}.hero-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.25;
}.hero-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}.hero-card-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand-red);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}.hero-tile.sm img {width:96px;height:72px;border-radius:8px;
}.hero-tile.sm .hero-tile-t {gap:4px;
}.hero-tile-t strong {
  font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  color:var(--color-text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}@media (max-width:560px) {.hero-tile.sm img {width:80px;height:60px;
  }
}@media (max-width:800px) {

/* Mobile: hero tiles stack vertically, image full-width 16:10 */

.hero-strip.stack-y {flex-direction:column;flex-wrap:nowrap;gap:28px;
  }

.hero-strip.stack-y .hero-tile {
    flex:none;width:100%;
    flex-direction:column;align-items:stretch;gap:12px;padding:0;
  }

.hero-strip.stack-y .hero-tile img {
    width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
    border-radius:12px;
  }

  .hero-strip.stack-y .hero-tile .hero-tile-t {padding:0 2px;
  }
}

/* Shared desktop app composition: a stable rail plus a fluid, constrained
   content canvas. Mobile keeps the existing stacked shell below 800px. */
@media (min-width:801px) {
  .home-shell {
    display:grid;
    grid-template-columns:clamp(14rem,20vw,18rem) minmax(0,1fr);
    justify-content:initial;
  }
  .home-side,.home-main {width:auto;flex:none;min-width:0;
  }
  .home-main {padding:clamp(1.5rem,3vw,3rem) clamp(1.5rem,4vw,4rem);
  }
}

/* Operational screen polish -------------------------------------------------
   Vendor, rider and admin interfaces share compact queue/list behavior while
   retaining their existing page-specific markup and data logic. */
.home-main > .home-kicker + .set-name {margin-bottom:var(--space-5)}
.home-main .o-filters,.home-main .a-filters {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0 0 var(--space-5);
}
.home-main .o-filters .chip,.home-main .a-filters .chip {margin:0}
.home-main .job-card,.home-main .card-status-minimal {
  border-left-width:3px;
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.home-main .app-actions {margin-top:var(--space-4)}
.home-main .app-actions .button {min-height:2.25rem}
.app-main {width:min(100% - 2rem,35rem);padding:var(--space-6) 0 calc(var(--space-8) + env(safe-area-inset-bottom,0px))}
.app-main > .home-kicker:first-child {margin-bottom:var(--space-3)}
.app-main > .set-name {margin-bottom:var(--space-4)}
.app-main .stat-pills {margin:var(--space-5) 0}
.app-main .card-metric-minimal,.app-main .job-card,.app-main .card-row-minimal {border-radius:var(--radius-md)}
.app-main .field-stack {margin-top:var(--space-5)}

@media (min-width:801px) {
  .app-main {width:min(100% - 3rem,42rem);padding-top:var(--space-8)}
  .home-main .o-filters,.home-main .a-filters {position:sticky;top:1rem;z-index:2;padding:.25rem 0;background:linear-gradient(90deg,var(--color-bg-base) 88%,transparent)}
}

@media (max-width:800px) {
  .home-main .o-filters,.home-main .a-filters {overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--space-1)}
  .home-main .o-filters .chip,.home-main .a-filters .chip {flex:0 0 auto}
}

/* Shared identity avatar ---------------------------------------------------
   Account initials use a subtle engraved treatment across customer, vendor,
   and rider profiles. Motion is intentionally slow and is disabled by the
   existing reduced-motion rule above. */
.set-avatar {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(120deg,#fff 0%,#f2d1cd 44%,#fff 72%);
  background-size:220% 220%;
  color:#704845;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(95,54,49,.26),0 0 1px rgba(95,54,49,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(0,0,0,.12);
  animation:odgAvatarShift 5s ease-in-out infinite,odgAvatarPulse 3.2s ease-in-out infinite;
}
.set-avatar::after {
  position:absolute;
  inset:3px;
  border:1px solid rgba(188,26,26,.3);
  border-radius:50%;
  content:"";
  pointer-events:none;
  animation:odgAvatarRing 3.2s ease-in-out infinite;
}
@keyframes odgAvatarShift {
  0%,100% {background-position:0% 50%}
  50% {background-position:100% 50%}
}
@keyframes odgAvatarPulse {
  0%,100% {box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 0 rgba(188,26,26,0),0 8px 18px rgba(0,0,0,.12)}
  50% {box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 7px rgba(188,26,26,.1),0 10px 22px rgba(0,0,0,.16)}
}
@keyframes odgAvatarRing {
  0%,100% {opacity:.35;transform:scale(.94)}
  50% {opacity:.8;transform:scale(1)}
}