/* ================================================
   Luminus Design Tokens - shared by all role apps
   ================================================ */

@font-face {
  font-family:'Poppins';
  src:url('../shared/assets/Poppins-Bold.ttf') format('truetype');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face {
  font-family:'Pacifico';
  src:url('../shared/assets/Pacifico-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:block;
}

@font-face {
  font-family:'Grand Hotel';
  src:url('../shared/assets/GrandHotel-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:block;
}
@font-face {
  font-family:'Pinyon Script';
  src:url('../shared/assets/PinyonScript-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:block;
}

:root {
  /* Luminus neon spectrum. Lotus pink carries identity, selection and primary
     actions; chartreuse appears only inside the expressive gradient, never as a
     text or state colour, so it can never be confused with success green. */
  --lumi-50:  #FFFFFF;
  --lumi-100: #F7F8FB;
  --lumi-300: #B4A1CF;
  --lumi-500: #5C3B8A;
  --lumi-600: #503174;
  --lumi-700: #302044;

  --violet-950: #302044;
  --violet-900: #41285F;
  --violet-800: #503174;
  --violet-700: #5C3B8A;
  --violet-600: #6E4C9A;
  --violet-500: #8063AB;
  --violet-400: #9B82BD;
  --violet-300: #B4A1CF;
  --violet-200: #D9CDE8;
  --violet-100: #EEE9F5;
  --violet-50: #F7F4FA;

  /* Legacy variable names (violet-*, action-pink-*) remain because every role
     app already consumes them. Their values now resolve to the lotus-pink ramp. */
  --action-pink: #5C3B8A;
  --action-pink-strong: #503174;
  --action-pink-ink: #FFFFFF;
  --action-pink-soft: #F7F4FA;
  --ig-1: #5C3B8A;
  --ig-2: #6E4C9A;
  --ig-3: #8063AB;
  --ig-4: #B4A1CF;
  --ig-5: #5C3B8A;
  --ig-6: #503174;
  --brand-lime: #6E4C9A;
  --brand-pink: #5C3B8A;
  --brand-ink: #FFFFFF;
  --brand-lime-soft: #F7F4FA;
  --brand-pink-soft: #EEE9F5;
  /* Expressive identity spectrum: chartreuse to neon lotus pink, routed through
     warm yellow and coral because a direct green-to-magenta blend is near-
     complementary and turns muddy brown at its midpoint. The conic form is
     reserved for circular story rings; controls use the solid accent. */
  --ig-gradient: linear-gradient(118deg, #A8EB12 0%, #E9F542 26%, #FF74B8 55%, #FF149A 100%);
  /* The same ramp as the launch-screen wordmark, wrapped into a ring. The old
     version added a coral stop that greyed out the middle of the sweep; these
     are the splash stops at their splash positions, with a final return to
     chartreuse so the loop closes without a seam. */
  --lumi-story-gradient: conic-gradient(from 215deg at 50% 50%, #A8EB12 0deg, #E9F542 94deg, #FF74B8 198deg, #FF149A 300deg, #A8EB12 360deg);
  --ig-gradient-soft: linear-gradient(118deg, #F4FDE0 0%, #FFF6E6 52%, #FFEAF5 100%);

  /* Compatibility names remain for legacy components. Customer theme
     surfaces are owned by the explicit Customer tokens. */
  --luxury-ivory: #FBFCFF;
  --luxury-surface: #FFFFFF;
  --luxury-navy: #0D0E12;
  --luxury-champagne: #D9CDE8;
  --luxury-gold: #5C3B8A;
  --luxury-stone: #6F7380;
  --luxury-line: #E5E7ED;
  --luxury-soft: #F7F8FB;

  /* Neutrals */
  --ink-900: #0D0E12;
  --ink-700: #2F323B;
  --ink-500: #6F7380;
  --ink-300: #A4A8B2;
  --ink-100: #ECEEF2;
  --ink-50:  #F7F8FB;
  --paper:   #FFFFFF;

  /* Semantic */
  --ok:   #2E9665;
  --warn: #C88B3D;
  --err:  #D94A58;
  --info: #2563EB;
  --like: #ED4956;

  /* Type */
  /* One script face carries the Luminus identity. Pacifico is a thick, round
     brush script with a large x-height, so it stays legible at navigation
     size where a fine copperplate face does not. */
  --font-display: 'Pacifico', cursive;
  /* The launch screen keeps the Pinyon Script the owner asked to have back.
     The top navigator uses Pacifico: Poppins Bold read as too rigid there, and
     Pinyon is too fine at bar size. Both faces are locally bundled and OFL. */
  --font-wordmark: 'Pinyon Script', cursive;
  --font-wordmark-top: 'Pacifico', cursive;
  /* The navigation wordmark needs a face distinct from the Inter body text,
     otherwise the logo reads as ordinary UI copy rather than a brand mark. */
  --font-brand: 'Pacifico', cursive;
  --font-sans:    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-vi:      Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lumi-screen-title-size: 22px;
  --lumi-screen-title-weight: 700;
  --lumi-screen-title-line: 1.15;
  --lumi-screen-title-tracking: -0.02em;
  --lumi-section-title-size: 15px;
  --lumi-section-title-weight: 700;
  --lumi-body-size: 13px;
  --lumi-meta-size: 11px;

  /* Customer social-commerce primitives. These are scoped semantic values,
     so the operational role apps can retain their denser dashboard type. */
  --lumi-customer-screen-title-size: 16px;
  --lumi-customer-screen-title-line: 20px;
  --lumi-customer-section-title-size: 14px;
  --lumi-customer-section-title-line: 18px;
  --lumi-customer-username-size: 13px;
  --lumi-customer-body-size: 13px;
  --lumi-customer-meta-size: 11px;
  --lumi-customer-control-height: 44px;

  /* Customer shell dimensions. Individual screens consume these values
     instead of inventing their own navigation and commerce geometry. */
  /* Specification section 95. The top bar token claimed 56px while every bar
     actually rendered at 48px, so anything laid out from the token was 8px
     out. These are now the real, shipped dimensions. */
  --lumi-top-bar-height: 48px;
  --lumi-bottom-nav-height: 56px;
  --lumi-search-height: 36px;
  --lumi-feed-max-width: 470px;
  --lumi-profile-max-width: 935px;
  --lumi-feed-avatar: 34px;
  --lumi-profile-avatar: 86px;
  /* The specification asks for a 64px ring over a 58px avatar. Luminus ships an
     exact 88px story circle that predates it and is locked by its own contract
     and render check, so the established geometry is kept deliberately. */
  --lumi-story-ring: 88px;
  --lumi-story-avatar: 80px;
  --lumi-button-compact: 32px;
  --lumi-button-standard: 40px;
  --lumi-profile-tabs-height: 44px;
  --lumi-page-padding-feed: 12px;
  --lumi-page-padding-standard: 16px;
  --lumi-icon-xs: 14px;
  --lumi-icon-sm: 18px;
  --lumi-icon-md: 20px;
  --lumi-icon-lg: 24px;
  --lumi-product-radius: 8px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(13,14,18,0.04);
  --sh-2: 0 6px 18px rgba(61,10,34,0.07);
  --sh-3: 0 14px 36px rgba(61,10,34,0.10);
  --sh-pop: 0 24px 60px rgba(61,10,34,0.18);

  /* Interaction and stacking contracts. Keep role apps on one predictable scale. */
  /* Specification section 23 sets 44px as the floor for any real control; the
     previous 40px floor was below it. Surfaces that must stay tight - inline
     identity text, for instance - opt out explicitly rather than lowering it. */
  --lumi-hit-min: 44px;
  --lumi-hit-comfortable: 44px;
  --lumi-z-content: 1;
  --lumi-z-map: 10;
  --lumi-z-map-control: 24;
  --lumi-z-sticky: 40;
  --lumi-z-context: 110;
  --lumi-z-nav: 190;
  --lumi-z-popover: 260;
  --lumi-z-sheet-backdrop: 300;
  --lumi-z-sheet: 310;
  --lumi-z-sheet-raised-backdrop: 320;
  --lumi-z-sheet-raised: 330;
  --lumi-z-toast: 360;

  /* Spacing scale (4-base) */
  --s-1: 4px;  --s-1-5: 6px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
}

/* Dark theme (Shipper app default) */
[data-theme="dark"] {
  /* The tinted ramp is a LIGHT ramp. Left unchanged it turned soft chips such
     as the filter button into near-white glare (16.25:1 against the page), so
     dark mode gets its own restrained lotus tints at the same relative steps. */
  --violet-50:  #1C1726;
  --violet-100: #221B2E;
  --violet-200: #2E2440;
  --violet-300: #8063AB;
  --action-pink-soft: #221B2E;
  --brand-lime-soft: #1C1726;
  --brand-pink-soft: #221B2E;
  --ig-gradient-soft: linear-gradient(118deg, #1C1726 0%, #221B2E 52%, #2A2038 100%);
}
[data-theme="dark"] {
  --paper:   #0D0E12;
  --ink-50:  #111217;
  --ink-100: #1B1C23;
  --ink-300: #30323B;
  --ink-500: #A4A8B2;
  --ink-700: #F0F1F4;
  --ink-900: #FFFFFF;
  --luxury-champagne: #8063AB;
  --luxury-gold: #B4A1CF;
}

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.text-ig-gradient {
  background: var(--ig-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--action-pink-strong);
}
.bg-ig-gradient { background: var(--ig-gradient); }
.bg-brand-gradient-soft { background: var(--ig-gradient-soft); }
.text-brand-ink { color: var(--brand-ink); }
.text-brand-pink { color: var(--brand-pink); }
.text-brand-lime { color: var(--action-pink-strong); }
.border-brand-lime { border-color: var(--action-pink); }

.font-display { font-family: var(--font-display); }
.font-vi { font-family: var(--font-vi); }
.lumi-screen-title {
  margin:0;
  font-family:var(--font-vi);
  font-size:var(--lumi-screen-title-size);
  font-weight:var(--lumi-screen-title-weight);
  line-height:var(--lumi-screen-title-line);
  letter-spacing:var(--lumi-screen-title-tracking);
}

.lumi-touch-target {
  min-width:var(--lumi-hit-min);
  min-height:var(--lumi-hit-min);
}
.lumi-touch-target-comfortable {
  min-width:var(--lumi-hit-comfortable);
  min-height:var(--lumi-hit-comfortable);
}
/* System hit-area floor: visual glyphs can stay compact while the actual
   interactive box remains usable on touch devices across every role. */
button,
[role="button"] {
  min-width:var(--lumi-hit-min);
  min-height:var(--lumi-hit-min);
}
button[aria-label],
[role="button"][aria-label] { min-width:var(--lumi-hit-min); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea { min-height:var(--lumi-hit-min); }
.lumi-z-map { z-index:var(--lumi-z-map); }
.lumi-z-map-control { z-index:var(--lumi-z-map-control); }
.lumi-z-sticky { z-index:var(--lumi-z-sticky); }
.lumi-z-context { z-index:var(--lumi-z-context); }
.lumi-z-nav { z-index:var(--lumi-z-nav); }
.lumi-z-popover { z-index:var(--lumi-z-popover); }
.lumi-z-sheet-backdrop { z-index:var(--lumi-z-sheet-backdrop); }
.lumi-z-sheet { z-index:var(--lumi-z-sheet); }
.lumi-z-sheet-raised-backdrop { z-index:var(--lumi-z-sheet-raised-backdrop); }
.lumi-z-sheet-raised { z-index:var(--lumi-z-sheet-raised); }
.lumi-z-toast { z-index:var(--lumi-z-toast); }

/* Shared sheet material. FullSheet/BottomSheet are cross-role primitives, so
   their opacity cannot depend on a Customer-only stylesheet. Role apps may
   override these semantic variables while retaining an opaque modal layer. */
.lumi-bottom-sheet,
.lumi-full-sheet {
  isolation:isolate;
  background:var(--lumi-sheet-surface, var(--paper, #FFFFFF));
  color:var(--lumi-sheet-text, var(--ink-900, #0A0A0A));
  overscroll-behavior:contain;
}
.lumi-full-sheet-header {
  position:relative;
  z-index:1;
  background:inherit;
  border-color:var(--lumi-sheet-line, var(--ink-100, #EEEEEE));
}
.lumi-full-sheet-back {
  background:var(--lumi-sheet-control, var(--ink-50, #F7F7F7));
  color:inherit;
}

/* Pin pulse */
@keyframes lumi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176,27,99,0.30); }
  70%  { box-shadow: 0 0 0 18px rgba(176,27,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,27,99,0); }
}
.lumi-pulse { animation: lumi-pulse 2s infinite; }

/* Shimmer skeleton */
@keyframes lumi-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.lumi-shimmer {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 40%, #f3f4f6 80%);
  background-size: 800px 100%;
  animation: lumi-shimmer 1.4s infinite linear;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.22); }
  65% { transform: scale(0.94); }
}

@keyframes heartPop {
  0% { opacity: 0; transform: scale(0.45) rotate(-12deg); filter: drop-shadow(0 16px 30px rgba(0,0,0,.18)); }
  18% { opacity: 1; transform: scale(1.12) rotate(0deg); }
  55% { opacity: .96; transform: scale(.94); }
  100% { opacity: 0; transform: scale(1.55); filter: drop-shadow(0 20px 42px rgba(239,68,68,.22)); }
}

/* Smooth nav */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}

/* Full-height app shell that follows mobile browser toolbars.
   The legacy 100vh declaration is only a fallback; svh/dvh must win. */
.lumi-app-shell {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  height: var(--lumi-viewport-height, 100dvh);
  min-height: 0;
}

/* Native/web first-frame handoff. It is paint-only and never blocks app
   startup, but remains opaque until React reports a committed first frame. */
.luminus-brand-handoff {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #070707;
  color: #fff;
  opacity: 1;
  visibility: visible;
}
.luminus-cold-start .luminus-brand-handoff {
  display: grid;
}
.luminus-brand-handoff__lockup {
  position: relative;
  top: -3vh;
  display: grid;
  justify-items: center;
  gap: 10px;
  will-change: transform, opacity;
  animation: luminus-handoff-mark 620ms cubic-bezier(.16,1,.3,1) both;
}
.luminus-brand-handoff__mark {
  width: clamp(148px, 45vw, 202px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.34));
}
.luminus-brand-handoff__name {
  padding: 0 5px 6px;
  background: var(--ig-gradient,linear-gradient(118deg,#8b5cf6 0%,#d946ef 36%,#fb7185 66%,#d9f99d 100%));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-wordmark);
  font-size: clamp(48px, 16vw, 74px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .92;
  text-indent: 0;
  text-transform: none;
  opacity: 1;
}
.luminus-brand-handoff.is-leaving {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 240ms step-end;
}
@keyframes luminus-handoff-mark {
  0% { opacity: 0; transform: scale(.94) translateY(7px); }
  48% { opacity: 1; transform: scale(1.012) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes luminus-handoff-exit {
  0%, 62% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* ================================================
   Universal polish layer (shared by 4 apps)
   Additive only — does not change the design language.
   ================================================ */

/* Kill the grey mobile tap-flash + 300ms double-tap zoom delay on tappable UI. */
* { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], [onclick], label, input[type="button"], input[type="submit"] {
  touch-action: manipulation;
}

/* Momentum scrolling on iOS for scroll regions. */
.no-scrollbar, main, [data-scroll] { -webkit-overflow-scrolling: touch; }

/* Images shouldn't be draggable/selectable on touch — feels native. */
img, svg { -webkit-user-drag: none; user-select: none; }

/* Brand selection colour. */
::selection { background: rgba(176, 27, 99, 0.22); }
::-moz-selection { background: rgba(176, 27, 99, 0.22); }

/* Accessible keyboard focus ring (keyboard nav only — never shows on tap/mouse). */
:focus-visible {
  outline: 2px solid var(--brand-pink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respect reduced-motion preference (accessibility). */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================
   Verified-badge congratulation (shown once per award)
   ================================================ */
.lumi-verified-celebration {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 10, 18, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lumi-verified-fade .22s ease-out both;
}
.lumi-verified-celebration__card {
  position: relative;
  width: min(320px, 100%);
  padding: 26px 22px 20px;
  border-radius: 26px;
  background: var(--customer-surface, #fff);
  color: var(--customer-text, #111318);
  box-shadow: 0 26px 70px rgba(12, 10, 18, .38);
  text-align: center;
  animation: lumi-verified-pop .34s cubic-bezier(.2, .9, .3, 1.2) both;
}
.lumi-verified-celebration__badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--ig-gradient);
  color: #fff;
}
.lumi-verified-celebration__title { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.3; }
.lumi-verified-celebration__body {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--customer-muted, #716c7c);
}
.lumi-verified-celebration__action {
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  border: 0;
  border-radius: 16px;
  background: var(--ig-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.lumi-verified-celebration__sparks { position: absolute; inset: 0; overflow: hidden; border-radius: 26px; pointer-events: none; }
.lumi-verified-celebration__sparks span {
  position: absolute;
  top: 42px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ig-gradient);
  opacity: 0;
  animation: lumi-verified-spark .95s ease-out both;
  animation-delay: calc(var(--i) * 26ms);
  transform: rotate(calc(var(--i) * 26deg));
}
@keyframes lumi-verified-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lumi-verified-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lumi-verified-spark {
  0% { opacity: 1; transform: rotate(calc(var(--i) * 26deg)) translateY(0) scale(.6); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 26deg)) translateY(-104px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lumi-verified-celebration,
  .lumi-verified-celebration__card { animation: none; }
}

/* ================================================
   Solid accent action (replaces the gradient fill)
   ================================================ */
.lumi-solid-accent-button {
  background: var(--customer-accent, var(--violet-700));
  color: var(--customer-accent-ink, #fff);
  box-shadow: none;
}
.lumi-solid-accent-button:hover { background: var(--customer-accent-hover, var(--violet-600)); }

/* ================================================
   In-app call overlay (WebRTC 1:1)
   ================================================ */
.lumi-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 6, 14, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.lumi-call-card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px;
  background: var(--customer-surface, #fff);
  color: var(--customer-text, #111318);
  text-align: center;
}
.lumi-call-title { margin: 0; font-size: 19px; font-weight: 800; }
.lumi-call-status { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--customer-muted, #737373); }
.lumi-call-media {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--customer-soft, #f2f2f5);
}
.lumi-call-media.is-audio { min-height: 96px; }
.lumi-call-media.is-video { aspect-ratio: 3 / 4; }
.lumi-call-remote { width: 100%; height: 100%; object-fit: cover; }
.lumi-call-local {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 88px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .75);
}
.lumi-call-actions { display: flex; justify-content: center; gap: 12px; }
.lumi-call-button {
  min-height: 48px;
  min-width: 128px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 800 13px/1 var(--font-vi, system-ui);
  cursor: pointer;
}
.lumi-call-button.is-accept { background: #2E9665; color: #fff; }
.lumi-call-button.is-decline { background: #DC2626; color: #fff; }
.lumi-call-button:focus-visible { outline: 2px solid var(--customer-accent); outline-offset: 3px; }

/* Errand ("Đi chợ hộ bạn") launcher */
.lumi-errand-launcher {
  width: calc(100% - 24px);
  min-height: 72px;
  margin: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--customer-line, #ececf0);
  border-radius: 20px;
  background: var(--customer-surface, #fff);
  color: var(--customer-text, #111318);
  text-align: left;
  cursor: pointer;
}
.lumi-errand-launcher-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--customer-soft, #f2f2f5);
  color: var(--customer-accent);
}
.lumi-errand-launcher-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.lumi-errand-launcher-copy strong { font-size: 13.5px; font-weight: 800; }
.lumi-errand-launcher-copy small { font-size: 10.5px; line-height: 1.4; color: var(--customer-muted, #737373); }
.lumi-errand-launcher:focus-visible { outline: 2px solid var(--customer-accent); outline-offset: 2px; }

/* ================================================
   Selectable card treatment
   ------------------------------------------------
   In dark mode a card that is only slightly lighter than the page reads as a
   flat block. Instead of lightening the fill - which washes the whole theme
   out - separation comes from a lit brand-tinted rim plus a real shadow, so a
   shop or conversation obviously is a tappable object.

   Resting elevation is the default state, not the hover state. This app is
   driven by a thumb: on a phone :hover never fires, so a card whose shadow
   only appeared on hover had no elevation at all for the people actually
   using it. Hover and focus now only deepen an object that already reads as
   one.
   ================================================ */
.lumi-card-selectable {
  position: relative;
  border: 1px solid var(--customer-line);
  border-radius: 20px;
  background: var(--customer-surface);
  box-shadow: var(--customer-shadow-rest, 0 6px 18px color-mix(in srgb, #000 22%, transparent));
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.lumi-card-selectable::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--ig-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.lumi-card-selectable:hover,
.lumi-card-selectable:focus-within {
  border-color: transparent;
  box-shadow: var(--customer-shadow-raised, 0 10px 28px color-mix(in srgb, #000 32%, transparent));
}
.lumi-card-selectable:hover::after,
.lumi-card-selectable:focus-within::after { opacity: .85; }
.lumi-card-selectable:active {
  transform: scale(.994);
  box-shadow: var(--customer-shadow-rest, 0 6px 18px color-mix(in srgb, #000 22%, transparent));
}

html.dark .lumi-card-selectable,
:root[data-theme="dark"] .lumi-card-selectable {
  /* The resting rim already glows so cards separate from the near-black page
     before the reader touches anything. Against #070707 a hairline alone is
     not enough light to describe an edge. */
  border-color: var(--customer-line-strong);
}
html.dark .lumi-card-selectable::after,
:root[data-theme="dark"] .lumi-card-selectable::after { opacity: .42; }
html.dark .lumi-card-selectable:hover::after,
html.dark .lumi-card-selectable:focus-within::after,
:root[data-theme="dark"] .lumi-card-selectable:hover::after,
:root[data-theme="dark"] .lumi-card-selectable:focus-within::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lumi-card-selectable,
  .lumi-card-selectable::after { transition: none; }
  .lumi-card-selectable:active { transform: none; }
}