:root {
  --background: #030008;
  --foreground: #ece8f4;
  --surface: #0a0614;
  --surface-elevated: #130a1e;
  --border: rgba(255, 46, 138, 0.22);
  --accent: #ff2e8a;
  --accent-dim: #ff5ca8;
  --accent-glow: rgba(255, 46, 138, 0.45);
  --accent-soft: rgba(255, 46, 138, 0.12);
  --nebula: rgba(124, 58, 237, 0.35);
  --muted: #9a8fad;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Orbitron', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -25%, rgba(255, 46, 138, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 10%, var(--nebula), transparent 50%),
    radial-gradient(ellipse 45% 40% at 0% 85%, rgba(76, 29, 149, 0.28), transparent 55%),
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 44% 34%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 61% 8%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 73% 56%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 86% 24%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 91% 78%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1px 1px at 7% 91%, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1px 1px at 52% 91%, rgba(255, 255, 255, 0.28), transparent);
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.35;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.14) 3px,
    rgba(0, 0, 0, 0.14) 4px
  );
}

#app-root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  margin: 0;
}

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

.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-accent-dim { color: var(--accent-dim); }

.glass-panel {
  background: linear-gradient(145deg, rgba(19, 10, 30, 0.92) 0%, rgba(10, 6, 20, 0.88) 100%);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 24px rgba(255, 46, 138, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.glow-border {
  box-shadow: 0 0 0 1px var(--border), 0 0 28px var(--accent-glow), inset 0 0 20px rgba(255, 46, 138, 0.04);
}

.neon-text {
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow), 0 0 22px rgba(255, 46, 138, 0.25);
}

.btn-neon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(255, 46, 138, 0.45);
  box-shadow: 0 0 16px rgba(255, 46, 138, 0.18), inset 0 0 12px rgba(255, 46, 138, 0.06);
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
  font-weight: 500;
}

.btn-neon:hover {
  background: rgba(255, 46, 138, 0.2);
  border-color: rgba(255, 46, 138, 0.65);
  box-shadow: 0 0 24px rgba(255, 46, 138, 0.32), inset 0 0 16px rgba(255, 46, 138, 0.1);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  transition: color 0.2s;
}

.btn-ghost:hover { color: var(--foreground); }

.terminal-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.input-field {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(3, 0, 8, 0.85);
  padding: 0.625rem 0.875rem;
  color: var(--foreground);
  font: inherit;
}

.input-field:focus {
  outline: none;
  border-color: rgba(255, 46, 138, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 46, 138, 0.15);
}

.input-field::placeholder { color: rgba(154, 143, 173, 0.65); }

.prose-rich p { margin-bottom: 0.75rem; }
.prose-rich p:last-child { margin-bottom: 0; }
.prose-rich h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 1.25rem 0 0.5rem;
  color: var(--foreground);
}
.prose-rich h2:first-child { margin-top: 0; }
.prose-rich ul,
.prose-rich ol {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding-left: 0.75rem;
}
.prose-rich li { margin-bottom: 0.35rem; }
.prose-rich strong { font-weight: 600; color: var(--foreground); }
.prose-rich em { font-style: italic; }
.prose-rich img,
.prose-rich .wysiwyg-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin: 1rem 0;
}
.prose-rich a { color: var(--accent-dim); text-decoration: underline; }

/* ── WYSIWYG editor ── */
.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem;
}

.wysiwyg-btn {
  border: none;
  border-radius: 0.375rem;
  padding: 0.35rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.wysiwyg-btn:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.05);
}

.wysiwyg-btn.is-active {
  color: var(--accent);
  background: rgba(255, 46, 138, 0.15);
}

.wysiwyg-body {
  min-height: 12.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--foreground);
  outline: none;
}

.wysiwyg-body:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.leaflet-container {
  font-family: inherit;
}

.map-picker {
  height: 14rem;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
}

.map-picker .leaflet-container {
  height: 100%;
  width: 100%;
  border: none;
  border-radius: 0;
}

/* Layout */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(3, 0, 8, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.site-header-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
}

@media (min-width: 640px) {
  .site-header-inner { padding: 0.75rem 1rem; }
}

.brand {
  display: flex;
  shrink: 0;
  align-items: center;
  gap: 0.625rem;
}

.brand-mark {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: rgba(255, 46, 138, 0.1);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.4);
}

.brand-logo {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.brand-logo--badge {
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 46, 138, 0.25);
}

.brand-name {
  display: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 640px) { .brand-name { display: inline; } }

.nav-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

.nav-desktop { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 768px) { .nav-desktop { display: flex; } }

.nav-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: var(--muted);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.nav-link[aria-expanded="true"] {
  background: var(--surface-elevated);
  color: var(--foreground);
}

.nav-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-link:hover {
  background: var(--surface-elevated);
  color: var(--foreground);
}

.nav-link-highlight {
  background: rgba(255, 46, 138, 0.15);
  color: var(--accent);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3);
}

.nav-link-highlight:hover {
  background: rgba(255, 46, 138, 0.25);
  color: var(--accent);
}

.nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--accent);
  transition: background 0.2s;
}

.nav-icon-link:hover { background: rgba(255, 46, 138, 0.1); }

.nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #ef4444;
  color: white;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--background);
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #3ddc78;
  background: rgba(37, 211, 102, 0.15);
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.3);
  transition: background 0.2s;
}

.whatsapp-link:hover { background: rgba(37, 211, 102, 0.25); }

.account-btn {
  display: none;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.15);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3);
  border: none;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.account-btn--avatar {
  background: rgba(255, 255, 255, 0.06);
}

.account-btn-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) { .account-btn { display: flex; } }

.auth-links { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .auth-links { display: flex; } }

.signup-link {
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3);
  transition: background 0.2s;
}

.signup-link:hover { background: rgba(255, 46, 138, 0.25); }

.menu-toggle {
  display: flex;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.5rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

@media (min-width: 768px) { .menu-toggle { display: none; } }

.menu-toggle svg { width: 1.25rem; height: 1.25rem; }

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  min-width: 11rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.dropdown.hidden { display: none; }

.dropdown-item {
  display: block;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}

.dropdown-item:hover {
  background: var(--surface-elevated);
  color: var(--foreground);
}

.dropdown-label {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  border-bottom: 1px solid var(--border);
  background: rgba(3, 0, 8, 0.95);
  backdrop-filter: blur(12px);
}

.mobile-menu.open { display: block; }

@media (min-width: 768px) { .mobile-menu { display: none !important; } }

.mobile-menu-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.75rem;
}

.mobile-menu-inner a {
  display: block;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--foreground);
  transition: background 0.2s;
}

.mobile-menu-inner a:hover { background: var(--surface-elevated); }

.site-main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.site-main-inner {
  flex: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 0.75rem;
  width: 100%;
}

@media (min-width: 640px) { .site-main-inner { padding: 1.5rem 1rem; } }

.site-main-inner--home {
  max-width: 72rem;
  min-height: calc(100dvh - 4.5rem);
  display: flex;
  flex-direction: column;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .site-main-inner--home { padding-top: 3.5rem; padding-bottom: 4rem; }
}

.landing {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

@media (min-width: 768px) {
  .landing { gap: 4.5rem; }
}

.landing-hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .landing-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
  }
}

.landing-title {
  margin-top: 0.75rem;
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
}

.landing-tagline {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--muted);
}

.landing-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.landing-btn-primary {
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  font-weight: 500;
}

.landing-btn {
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
}

.landing-link {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  transition: color 0.2s;
}

.landing-link:hover { color: var(--foreground); }

.landing-inline-courier {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.landing-inline-courier a {
  margin-left: 0.25rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s;
}

.landing-inline-courier a:hover { color: var(--accent-dim); }

.landing-pricing {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.landing-whatsapp-note {
  margin: 0;
  padding-top: 0.5rem;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: rgba(154, 143, 173, 0.75);
}

.landing-whatsapp-link {
  margin-left: 0.2rem;
  color: rgba(37, 211, 102, 0.7);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  transition: color 0.2s;
}

.landing-whatsapp-link:hover {
  color: rgb(37, 211, 102);
}

.landing-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  contain: layout style;
}

.landing-orbit {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  contain: layout style paint;
}

.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-aura,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-ring,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-dot,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-planet,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-shine,
.landing-hero-visual:not(.landing-hero-visual--live) .landing-orbit-spark {
  animation: none;
}

.landing-hero-visual--live .landing-orbit {
  animation: landing-planet-float 7s ease-in-out infinite;
}

.landing-orbit-aura {
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 46, 138, 0.32) 0%, rgba(255, 46, 138, 0.08) 42%, transparent 72%);
  opacity: 0.75;
  transform: translateZ(0);
}

.landing-hero-visual--live .landing-orbit-aura {
  animation: landing-aura-pulse 4.5s ease-in-out infinite;
}

.landing-orbit-aura--violet {
  inset: 18%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.28) 0%, transparent 68%);
  animation-delay: -2.2s;
}

.landing-orbit-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.22);
  transform: translateZ(0);
}

.landing-hero-visual--live .landing-orbit-ring--outer {
  animation: landing-orbit-spin 16s linear infinite;
}

.landing-orbit-ring--outer {
  inset: 0;
  border-color: rgba(255, 46, 138, 0.28);
  box-shadow: 0 0 24px rgba(255, 46, 138, 0.08);
}

.landing-hero-visual--live .landing-orbit-ring--mid {
  animation: landing-orbit-spin-mid 11s linear infinite reverse;
}

.landing-orbit-ring--mid {
  inset: 12%;
  border-style: dashed;
  border-color: rgba(167, 139, 250, 0.45);
}

.landing-hero-visual--live .landing-orbit-ring--inner {
  animation: landing-orbit-spin 22s linear infinite;
}

.landing-orbit-ring--inner {
  inset: 24%;
  border-color: rgba(255, 92, 168, 0.22);
}

.landing-orbit-dot {
  position: absolute;
  top: -0.3rem;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  border-radius: 999px;
  box-shadow: 0 0 14px currentColor;
}

.landing-orbit-dot--pink {
  color: var(--accent);
  background: var(--accent);
}

.landing-hero-visual--live .landing-orbit-dot--pink {
  animation: landing-dot-pulse 2.4s ease-in-out infinite;
}

.landing-orbit-dot--violet {
  color: #a78bfa;
  background: #a78bfa;
}

.landing-hero-visual--live .landing-orbit-dot--violet {
  animation: landing-dot-pulse 2.4s ease-in-out infinite -1.1s;
}

.landing-orbit-planet {
  position: relative;
  z-index: 2;
  width: 6.75rem;
  height: 6.75rem;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(255, 46, 138, 0.35),
    0 0 36px rgba(255, 46, 138, 0.35),
    0 0 72px rgba(124, 58, 237, 0.18),
    inset -10px -12px 28px rgba(0, 0, 0, 0.55);
}

.landing-orbit-planet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 40px rgba(255, 46, 138, 0.45);
  opacity: 0.35;
}

.landing-hero-visual--live .landing-orbit-planet::after {
  animation: landing-planet-glow-pulse 3.6s ease-in-out infinite;
}

.landing-orbit-planet--logo {
  width: 7.5rem;
  height: 7.5rem;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.06), rgba(3, 0, 8, 0.92) 68%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 0 0 3px rgba(255, 46, 138, 0.28),
    0 0 40px rgba(255, 46, 138, 0.32),
    0 0 80px rgba(124, 58, 237, 0.16);
}

.landing-orbit-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.landing-orbit-surface {
  position: absolute;
  inset: -35%;
  background:
    conic-gradient(
      from 210deg,
      #130a1e 0deg,
      #3b0f4a 55deg,
      #ff2e8a 110deg,
      #7c3aed 165deg,
      #130a1e 220deg,
      #ff5ca8 280deg,
      #130a1e 360deg
    );
  animation: landing-surface-spin 14s linear infinite;
}

.landing-orbit-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 18%, transparent 42%),
    radial-gradient(circle at 72% 78%, rgba(255, 46, 138, 0.18) 0%, transparent 38%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.landing-hero-visual--live .landing-orbit-shine {
  animation: landing-shine-drift 8s ease-in-out infinite;
}

.landing-orbit-shine--logo {
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 38%),
    radial-gradient(circle at 80% 85%, rgba(255, 46, 138, 0.12) 0%, transparent 42%);
}

.landing-orbit-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--foreground);
  text-shadow:
    0 0 12px rgba(255, 46, 138, 0.65),
    0 0 28px rgba(255, 46, 138, 0.35);
  animation: landing-core-pulse 3s ease-in-out infinite;
}

.landing-orbit-spark {
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

.landing-hero-visual--live .landing-orbit-spark {
  animation: landing-spark-twinkle 3.2s ease-in-out infinite;
}

.landing-orbit-spark--1 { top: 14%; left: 10%; animation-delay: 0s; }
.landing-orbit-spark--2 { top: 22%; right: 8%; animation-delay: -1.4s; }
.landing-orbit-spark--3 { bottom: 16%; left: 18%; animation-delay: -2.1s; }

@media (prefers-reduced-motion: reduce) {
  .landing-hero-visual--live .landing-orbit,
  .landing-hero-visual--live .landing-orbit-aura,
  .landing-hero-visual--live .landing-orbit-ring,
  .landing-hero-visual--live .landing-orbit-dot,
  .landing-hero-visual--live .landing-orbit-planet::after,
  .landing-hero-visual--live .landing-orbit-shine,
  .landing-hero-visual--live .landing-orbit-spark {
    animation: none;
  }
}

.landing-spots,
.landing-steps,
.landing-join {
  content-visibility: auto;
  contain-intrinsic-size: auto 28rem;
}

.landing-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 22rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-hero-stats li {
  padding: 0.875rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.14);
  background: rgba(10, 6, 20, 0.55);
  text-align: center;
}

.landing-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.landing-stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.landing-section-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
}

.landing-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.landing-section-link {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  transition: color 0.2s;
}

.landing-section-link:hover { color: var(--accent-dim); }

/* ── Landing section scroll reveals ── */
.landing-section-fx {
  position: relative;
  isolation: isolate;
}

.landing-section-fx::before {
  content: "";
  position: absolute;
  inset: -2.5rem -1.25rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 55% at 20% 0%, rgba(255, 46, 138, 0.14), transparent 62%),
    radial-gradient(ellipse 60% 45% at 85% 20%, rgba(124, 58, 237, 0.12), transparent 58%);
  transition: opacity 1.4s ease;
}

.landing-section-fx.landing-reveal--visible::before {
  opacity: 1;
}

.landing-section-intro {
  min-width: 0;
}

.landing-section-intro .landing-section-title,
.landing-steps-intro .landing-section-title {
  opacity: 0;
}

.landing-reveal--visible .landing-section-intro .landing-section-title,
.landing-reveal--visible .landing-steps-intro .landing-section-title {
  animation: landing-title-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.landing-label-fx {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.75rem);
}

.landing-reveal--visible .landing-label-fx {
  animation: landing-label-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.landing-title-line {
  display: block;
  height: 2px;
  width: 0;
  max-width: 14rem;
  margin-top: 0.875rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 20%,
    #c084fc 50%,
    var(--accent) 80%,
    transparent
  );
  background-size: 200% 100%;
}

.landing-reveal--visible .landing-title-line {
  animation:
    landing-line-expand 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards,
    landing-line-shimmer 2.8s linear 1.1s infinite;
}

.landing-link-fx {
  opacity: 0;
  transform: translateX(1.25rem);
}

.landing-reveal--visible .landing-link-fx {
  animation: landing-link-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.landing-reveal .landing-reveal-item {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

.landing-reveal--visible .landing-reveal-item {
  opacity: 1;
  transform: translateY(0);
}

/* Shops & spots grid */
.landing-spots-grid--fx {
  perspective: 1400px;
}

.landing-spot-card {
  position: relative;
  height: 100%;
  opacity: 0;
  overflow: hidden;
}

.landing-spot-card:nth-child(4n + 1) { --card-tilt: -5deg; --card-x: -1.5rem; }
.landing-spot-card:nth-child(4n + 2) { --card-tilt: 4deg; --card-x: 1rem; }
.landing-spot-card:nth-child(4n + 3) { --card-tilt: -3deg; --card-x: 0.75rem; }
.landing-spot-card:nth-child(4n) { --card-tilt: 5deg; --card-x: -1rem; }

.landing-spots.landing-reveal--visible .landing-spot-card {
  animation: landing-card-deal 0.95s cubic-bezier(0.34, 1.35, 0.64, 1) both;
  animation-delay: calc(0.2s + var(--reveal-i, 0) * 120ms);
}

.landing-spot-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 62%
  );
  transform: translateX(-130%) skewX(-12deg);
  opacity: 0;
}

.landing-spots.landing-reveal--visible .landing-spot-card::after {
  animation: landing-card-shine 1s ease calc(0.55s + var(--reveal-i, 0) * 120ms) both;
}

.landing-spots.landing-reveal--visible .landing-spot-card:hover {
  transform: translateY(-6px) scale(1.025);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* How it works */
.landing-steps-intro {
  margin-bottom: 0.25rem;
}

.landing-steps-track {
  position: relative;
  margin-top: 1.5rem;
}

.landing-steps-line {
  display: none;
}

.landing-step-list {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .landing-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .landing-steps-line {
    display: block;
    position: absolute;
    top: 1.85rem;
    left: 10%;
    right: 10%;
    height: 2px;
    z-index: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 46, 138, 0.35) 15%,
      rgba(167, 139, 250, 0.45) 50%,
      rgba(255, 46, 138, 0.35) 85%,
      transparent
    );
    box-shadow: 0 0 18px rgba(255, 46, 138, 0.25);
  }

  .landing-steps.landing-reveal--visible .landing-steps-line {
    animation: landing-steps-line-draw 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  }
}

.landing-step {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.125rem;
  overflow: hidden;
  opacity: 0;
}

.landing-step::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.1) 0%, transparent 52%);
  transition: opacity 0.6s ease;
}

.landing-steps.landing-reveal--visible .landing-step::before {
  opacity: 1;
  transition-delay: calc(0.35s + var(--reveal-i, 0) * 160ms);
}

.landing-steps.landing-reveal--visible .landing-step-fx {
  animation: landing-step-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.25s + var(--reveal-i, 0) * 160ms);
}

.landing-step-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.1);
  box-shadow: 0 0 20px rgba(255, 46, 138, 0.15);
}

.landing-steps.landing-reveal--visible .landing-step-num {
  animation: landing-step-ring 1s cubic-bezier(0.22, 1, 0.36, 1) calc(0.45s + var(--reveal-i, 0) * 160ms) both;
}

.landing-step-body {
  min-width: 0;
  opacity: 0;
  transform: translateX(-0.75rem);
}

.landing-steps.landing-reveal--visible .landing-step-body {
  animation: landing-step-body-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(0.5s + var(--reveal-i, 0) * 160ms) both;
}

.landing-step h3 {
  font-size: 0.9375rem;
  font-weight: 600;
}

.landing-step p {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.landing-spots-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .landing-spots-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.shop-picker-delivery-badge--discount {
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.35);
  color: #86efac;
}

@keyframes landing-label-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
    letter-spacing: 0.2em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.08em;
  }
}

@keyframes landing-title-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes landing-line-expand {
  from { width: 0; opacity: 0.4; }
  to { width: min(14rem, 100%); opacity: 1; }
}

@keyframes landing-line-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes landing-link-in {
  from {
    opacity: 0;
    transform: translateX(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes landing-card-deal {
  0% {
    opacity: 0;
    transform:
      translateX(var(--card-x, 0))
      translateY(3.5rem)
      rotateX(22deg)
      rotateZ(var(--card-tilt, 0deg))
      scale(0.86);
    filter: blur(8px);
  }
  55% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotateX(0) rotateZ(0) scale(1);
    filter: blur(0);
  }
}

@keyframes landing-card-shine {
  0% {
    transform: translateX(-130%) skewX(-12deg);
    opacity: 0;
  }
  20% { opacity: 1; }
  100% {
    transform: translateX(130%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes landing-steps-line-draw {
  from { transform: scaleX(0); opacity: 0.3; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes landing-step-rise {
  0% {
    opacity: 0;
    transform: translateY(2.5rem) scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes landing-step-ring {
  0% {
    transform: scale(0.6);
    box-shadow: 0 0 0 0 rgba(255, 46, 138, 0.55);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(255, 46, 138, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 46, 138, 0.15);
  }
}

@keyframes landing-step-body-in {
  from {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-section-fx::before {
    opacity: 1;
    transition: none;
  }

  .landing-reveal .landing-reveal-item,
  .landing-label-fx,
  .landing-link-fx,
  .landing-step-body,
  .landing-section-intro .landing-section-title,
  .landing-steps-intro .landing-section-title {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
  }

  .landing-spots .landing-spot-card,
  .landing-steps .landing-step {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .landing-spot-card::after {
    display: none;
  }

  .landing-title-line,
  .landing-steps-line {
    width: min(14rem, 100%);
    transform: none;
    opacity: 1;
    animation: none !important;
  }

  .landing-join-fx,
  .landing-join-fx *,
  .landing-join-fx::before,
  .landing-join-fx::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .landing-join-side:hover {
    transform: none;
  }

  .landing-join-scan,
  .landing-join-slash-spark {
    display: none;
  }
}

.landing-courier {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border-color: rgba(255, 46, 138, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 46, 138, 0.12), transparent 45%),
    rgba(10, 6, 20, 0.55);
}

@media (min-width: 768px) {
  .landing-courier {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.25rem;
  }
}

.landing-courier-title {
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.landing-courier-text {
  margin: 0.75rem 0 0;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.landing-courier-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.landing-join-fx .landing-reveal-item {
  opacity: 0;
  transform: none;
  transition: none !important;
}

.landing-join-fx.landing-reveal--visible .landing-reveal-item {
  opacity: 1;
}

.landing-join {
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 46, 138, 0.32);
  background:
    radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.14), transparent 52%),
    radial-gradient(circle at 100% 50%, rgba(255, 46, 138, 0.14), transparent 52%),
    rgba(10, 6, 20, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 46, 138, 0.12),
    0 0 40px rgba(255, 46, 138, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.landing-join-fx.landing-reveal--visible {
  animation: landing-join-panel-glow 4s ease-in-out infinite;
}

.landing-join-corner {
  position: absolute;
  z-index: 3;
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
  opacity: 0;
}

.landing-join-corner--tl { top: 0.65rem; left: 0.65rem; border-top: 1px solid rgba(167, 139, 250, 0.75); border-left: 1px solid rgba(167, 139, 250, 0.75); }
.landing-join-corner--tr { top: 0.65rem; right: 0.65rem; border-top: 1px solid rgba(255, 46, 138, 0.75); border-right: 1px solid rgba(255, 46, 138, 0.75); }
.landing-join-corner--bl { bottom: 0.65rem; left: 0.65rem; border-bottom: 1px solid rgba(167, 139, 250, 0.55); border-left: 1px solid rgba(167, 139, 250, 0.55); }
.landing-join-corner--br { bottom: 0.65rem; right: 0.65rem; border-bottom: 1px solid rgba(255, 46, 138, 0.55); border-right: 1px solid rgba(255, 46, 138, 0.55); }

.landing-join-fx.landing-reveal--visible .landing-join-corner {
  animation: landing-join-corner-pulse 2.8s ease-in-out infinite;
}

.landing-join-fx.landing-reveal--visible .landing-join-corner--tr,
.landing-join-fx.landing-reveal--visible .landing-join-corner--br {
  animation-delay: 1.4s;
}

.landing-join-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(167, 139, 250, 0.2) 20%,
    rgba(255, 46, 138, 0.85) 50%,
    rgba(167, 139, 250, 0.2) 80%,
    transparent
  );
  box-shadow: 0 0 18px rgba(255, 46, 138, 0.45);
}

.landing-join-fx.landing-reveal--visible .landing-join-scan {
  animation: landing-join-scan-sweep 5.5s linear infinite;
}

.landing-join-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.landing-join-orb--business {
  width: min(16rem, 42vw);
  height: min(16rem, 42vw);
  left: -4rem;
  bottom: -5rem;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.34) 0%, rgba(139, 92, 246, 0.08) 55%, transparent 72%);
}

.landing-join-orb--courier {
  width: min(16rem, 42vw);
  height: min(16rem, 42vw);
  right: -4rem;
  top: -5rem;
  background: radial-gradient(circle, rgba(255, 46, 138, 0.32) 0%, rgba(255, 46, 138, 0.08) 55%, transparent 72%);
}

.landing-join-fx.landing-reveal--visible .landing-join-orb {
  animation: landing-join-orb-drift 7s ease-in-out infinite;
}

.landing-join-fx.landing-reveal--visible .landing-join-orb--courier {
  animation-delay: 3.5s;
}

.landing-join-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
}

.landing-join-grid--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.landing-join-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 3rem;
  pointer-events: none;
  transform: translateX(-50%);
}

.landing-join-slash,
.landing-join-slash-glow,
.landing-join-slash-spark {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%) rotate(17deg);
  transform-origin: center center;
}

.landing-join-slash {
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(167, 139, 250, 0.55) 22%,
    rgba(255, 46, 138, 0.95) 50%,
    rgba(167, 139, 250, 0.55) 78%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(255, 46, 138, 0.55);
}

.landing-join-slash-glow {
  width: 14px;
  margin-left: -7px;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 46, 138, 0.18) 50%,
    transparent
  );
  filter: blur(6px);
}

.landing-join-slash-spark {
  width: 8px;
  height: 8px;
  top: auto;
  bottom: 12%;
  margin-left: -4px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow:
    0 0 10px #fff,
    0 0 22px rgba(255, 46, 138, 0.95),
    0 0 36px rgba(167, 139, 250, 0.65);
}

.landing-join-fx.landing-reveal--visible .landing-join-slash {
  animation: landing-join-slash-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.landing-join-fx.landing-reveal--visible .landing-join-slash-glow {
  animation: landing-join-slash-glow 3s ease-in-out 0.9s infinite;
}

.landing-join-fx.landing-reveal--visible .landing-join-slash-spark {
  animation: landing-join-spark-travel 2.8s cubic-bezier(0.45, 0, 0.55, 1) 1.1s infinite;
}

.landing-join-side {
  position: relative;
  overflow: hidden;
}

.landing-join-side-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-14deg);
  opacity: 0;
}

.landing-join-side:hover .landing-join-side-shine {
  animation: landing-join-side-shine 0.85s ease;
}

.landing-join-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  transition:
    background 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-join-item--business {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06), transparent 58%);
}

.landing-join-item--courier {
  background: linear-gradient(225deg, rgba(255, 46, 138, 0.06), transparent 58%);
}

.landing-join-side:hover {
  transform: translateY(-2px);
}

.landing-join-item--business:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.02) 70%);
}

.landing-join-item--courier:hover {
  background: linear-gradient(225deg, rgba(255, 46, 138, 0.14), rgba(255, 46, 138, 0.02) 70%);
}

.landing-join-grid--split .landing-join-item--business {
  padding-right: clamp(1.25rem, 4vw, 2.75rem);
}

.landing-join-grid--split .landing-join-item--courier {
  padding-left: clamp(1.25rem, 4vw, 2.75rem);
}

.landing-join-fx.landing-reveal--visible .landing-join-item--business {
  animation: landing-join-side-in-left 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.landing-join-fx.landing-reveal--visible .landing-join-item--courier {
  animation: landing-join-side-in-right 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

.landing-join-label {
  opacity: 0;
}

.landing-join-fx.landing-reveal--visible .landing-join-label {
  animation: landing-label-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-join-item--business .landing-join-label {
  animation-delay: 0.28s !important;
}

.landing-join-item--courier .landing-join-label {
  animation-delay: 0.38s !important;
}

@media (min-width: 768px) {
  .landing-join-item {
    padding: 2rem 2.25rem;
  }

  .landing-join-grid--split .landing-join-item--business {
    padding-right: clamp(1.75rem, 5vw, 3.25rem);
  }

  .landing-join-grid--split .landing-join-item--courier {
    padding-left: clamp(1.75rem, 5vw, 3.25rem);
  }
}

@media (max-width: 767px) {
  .landing-join-grid--split {
    grid-template-columns: 1fr;
  }

  .landing-join-divider {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 3.5rem;
    margin: 0;
    transform: none;
    order: 2;
  }

  .landing-join-slash,
  .landing-join-slash-glow,
  .landing-join-slash-spark {
    top: 50%;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 2px;
    margin: 0;
    transform: translateY(-50%) rotate(-8deg);
    transform-origin: center center;
  }

  .landing-join-slash-glow {
    height: 14px;
    margin-top: -7px;
  }

  .landing-join-slash-spark {
    width: 8px;
    height: 8px;
    top: 50%;
    bottom: auto;
    left: 12%;
    margin-top: -4px;
    margin-left: 0;
  }

  .landing-join-fx.landing-reveal--visible .landing-join-slash-spark {
    animation-name: landing-join-spark-travel-mobile;
  }

  .landing-join-item--business { order: 1; }
  .landing-join-item--courier { order: 3; }

  .landing-join-grid--split .landing-join-item--business,
  .landing-join-grid--split .landing-join-item--courier {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.landing-join-title {
  margin-top: 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  transition: text-shadow 0.35s ease;
}

.landing-join-side:hover .landing-join-title {
  text-shadow: 0 0 18px rgba(255, 46, 138, 0.25);
}

.landing-join-text {
  margin: 0;
  flex: 1;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.landing-join-btn {
  align-self: flex-start;
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
}

.landing-join-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
}

.landing-join-btn:hover::after {
  animation: landing-join-btn-shimmer 0.75s ease;
}

@keyframes landing-join-panel-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 46, 138, 0.12),
      0 0 32px rgba(255, 46, 138, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 46, 138, 0.28),
      0 0 48px rgba(167, 139, 250, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

@keyframes landing-join-corner-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes landing-join-scan-sweep {
  0% { top: 0; opacity: 0; }
  6% { opacity: 0.85; }
  94% { opacity: 0.85; }
  100% { top: calc(100% - 2px); opacity: 0; }
}

@keyframes landing-join-orb-drift {
  0%, 100% { opacity: 0.45; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.85; transform: translate(0.75rem, -0.5rem) scale(1.08); }
}

@keyframes landing-join-slash-in {
  from {
    opacity: 0;
    transform: translateX(-50%) rotate(17deg) scaleY(0.15);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) rotate(17deg) scaleY(1);
  }
}

@keyframes landing-join-slash-glow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@keyframes landing-join-spark-travel {
  0% {
    bottom: 10%;
    opacity: 0;
  }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% {
    bottom: 88%;
    opacity: 0;
  }
}

@keyframes landing-join-spark-travel-mobile {
  0% {
    left: 10%;
    opacity: 0;
  }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% {
    left: 90%;
    opacity: 0;
  }
}

@keyframes landing-join-side-in-left {
  from {
    opacity: 0;
    transform: translateX(-2rem) translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes landing-join-side-in-right {
  from {
    opacity: 0;
    transform: translateX(2rem) translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes landing-join-side-shine {
  from { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  30% { opacity: 1; }
  to { opacity: 0; transform: translateX(120%) skewX(-14deg); }
}

@keyframes landing-join-btn-shimmer {
  from { transform: translateX(-130%); }
  to { transform: translateX(130%); }
}

.site-main--minimal {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main-inner--minimal {
  flex: 1;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.business-apply-header {
  margin-bottom: 1.5rem;
}

.business-apply-brand {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-display, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
}

.business-apply-brand:hover {
  color: var(--accent);
}

.business-apply-title {
  margin-top: 0.5rem;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
}

.business-apply-lead {
  margin-top: 0.75rem;
  max-width: 38rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

.business-apply-progress {
  margin-bottom: 1rem;
}

.business-apply-card-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.business-apply-card-preview:not(.hidden) {
  display: block;
}

.business-apply-save-status {
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.business-apply-save-status.is-saving {
  color: var(--accent);
}

.business-apply-save-status.is-saved {
  color: #86efac;
}

.business-apply-save-status.is-error {
  color: #fca5a5;
}

.business-apply-status-banner--pending {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.business-apply-field-block {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.02);
}

.business-apply-field-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.business-apply-field-hint {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.business-apply-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.business-apply-category-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.business-apply-category-chip:hover {
  border-color: rgba(255, 46, 138, 0.28);
  color: var(--foreground);
}

.business-apply-category-chip.is-active {
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.14);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 46, 138, 0.12);
}

.business-apply-category-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.business-apply-category-chip-label {
  line-height: 1.2;
}

.business-apply-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.business-apply-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.business-apply-toggle-switch {
  flex-shrink: 0;
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.business-apply-toggle-knob {
  position: absolute;
  top: 0.14rem;
  left: 0.14rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, background 0.2s;
}

.business-apply-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.business-apply-toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.business-apply-toggle-hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.business-apply-toggle:hover .business-apply-toggle-switch {
  border-color: rgba(255, 46, 138, 0.3);
}

.business-apply-toggle-input:checked + .business-apply-toggle-switch {
  border-color: rgba(255, 46, 138, 0.5);
  background: rgba(255, 46, 138, 0.22);
  box-shadow: inset 0 0 12px rgba(255, 46, 138, 0.15);
}

.business-apply-toggle-input:checked + .business-apply-toggle-switch .business-apply-toggle-knob {
  transform: translateX(1.25rem);
  background: #fff;
}

.business-apply-toggle-input:focus-visible + .business-apply-toggle-switch {
  box-shadow: 0 0 0 2px rgba(255, 46, 138, 0.25);
}

.business-apply-toggle:has(.business-apply-toggle-input:checked) .business-apply-toggle-label {
  color: var(--accent);
}

.business-app-card-thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
}

@media (min-width: 480px) {
  .landing-courier-actions {
    flex-direction: row;
    align-items: center;
  }
}

@keyframes landing-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-orbit-spin-mid {
  from { transform: rotate(18deg); }
  to { transform: rotate(378deg); }
}

@keyframes landing-planet-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes landing-aura-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96) translateZ(0); }
  50% { opacity: 1; transform: scale(1.04) translateZ(0); }
}

@keyframes landing-planet-glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.85; }
}

@keyframes landing-surface-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-shine-drift {
  0%, 100% { opacity: 0.85; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(3%, -2%); }
}

@keyframes landing-core-pulse {
  0%, 100% { opacity: 0.92; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

@keyframes landing-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes landing-spark-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.page-subheading {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.9375rem;
}

/* ── Coverage sector readout ── */
.sector-readout {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 46, 138, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 46, 138, 0.06) 0%, transparent 45%),
    rgba(8, 4, 16, 0.72);
  padding: 1rem 1.125rem 1.125rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 12px 32px rgba(0, 0, 0, 0.28);
}

.sector-readout-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 46, 138, 0.07) 48%,
    transparent 100%
  );
  transform: translateY(-100%);
  animation: sector-scan 4.5s linear infinite;
}

.sector-readout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.sector-readout-feed {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86efac;
}

.sector-feed-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.75);
  animation: sector-feed-pulse 2s ease-in-out infinite;
}

.sector-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 0, 8, 0.45);
}

.sector--active {
  border-color: rgba(74, 222, 128, 0.22);
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.06);
}

.sector--pending {
  border-color: rgba(251, 191, 36, 0.18);
  opacity: 0.92;
}

.sector-signal {
  display: flex;
  align-items: flex-end;
  gap: 0.15rem;
  height: 1.125rem;
}

.sector-signal-bar {
  width: 0.2rem;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.85);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
  animation: sector-signal-pulse 1.2s ease-in-out infinite;
}

.sector-signal-bar:nth-child(1) { height: 35%; animation-delay: 0s; }
.sector-signal-bar:nth-child(2) { height: 55%; animation-delay: 0.15s; }
.sector-signal-bar:nth-child(3) { height: 78%; animation-delay: 0.3s; }
.sector-signal-bar:nth-child(4) { height: 100%; animation-delay: 0.45s; }

.sector-signal--idle .sector-signal-bar {
  background: rgba(251, 191, 36, 0.45);
  box-shadow: none;
  animation: sector-signal-idle 2.4s ease-in-out infinite;
}

.sector-info {
  min-width: 0;
}

.sector-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sector-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.sector-badge {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sector-badge--active {
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.12);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.15);
}

.sector-badge--pending {
  color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  animation: sector-pending-blink 2.8s ease-in-out infinite;
}

.sector-readout--compact {
  margin-top: 0;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
}

.sector-readout--compact .sector-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.sector-readout--compact .sector {
  flex: 1 1 10rem;
  padding: 0.5rem 0.75rem;
  grid-template-columns: 1fr auto;
}

.sector-readout--compact .sector-signal {
  display: none;
}

.sector-readout--compact .sector-name {
  font-size: 0.8125rem;
}

@keyframes sector-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes sector-feed-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes sector-signal-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes sector-signal-idle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.55; }
}

@keyframes sector-pending-blink {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; box-shadow: 0 0 12px rgba(251, 191, 36, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .sector-readout-scan,
  .sector-feed-dot,
  .sector-signal-bar,
  .sector-badge--pending {
    animation: none;
  }
}

.site-footer {
  flex-shrink: 0;
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 0.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid rgba(255, 46, 138, 0.14);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-footer a { transition: color 0.2s; }
.site-footer a:hover { color: var(--accent); }

.page-heading {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.form-panel {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1rem;
}

.form-panel h1 { margin-bottom: 1rem; font-size: 1.5rem; }

.form-stack { display: flex; flex-direction: column; gap: 1rem; }

.form-error {
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  font-size: 0.875rem;
}

.card-grid {
  display: grid;
  gap: 1rem;
}

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

.location-card {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  transition: box-shadow 0.2s;
}

.location-card:hover { box-shadow: 0 0 28px var(--accent-glow); }

.location-card img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.location-card-body { padding: 1rem; }

.location-card-body h2 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.location-card-fallback {
  display: flex;
  height: 10rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: rgba(236, 232, 244, 0.88);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 46, 138, 0.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.28), transparent 50%),
    linear-gradient(145deg, rgba(19, 10, 30, 0.95), rgba(8, 4, 16, 0.92));
}

.mgr-loc-edit-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-dim);
}

.location-card:hover .mgr-loc-edit-hint {
  color: var(--accent);
}

.whatsapp-label { display: none; }
@media (min-width: 1024px) {
  .whatsapp-label { display: inline; }
}

@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.neon-pulse { animation: neon-pulse 2.8s ease-in-out infinite; }

@keyframes order-arrive-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 46, 138, 0); border-color: var(--border); transform: translateY(0); }
  20% { box-shadow: 0 0 28px 6px var(--accent-glow); border-color: rgba(255, 46, 138, 0.55); transform: translateY(-3px); }
  40% { box-shadow: 0 0 20px 4px var(--accent-glow); border-color: rgba(255, 46, 138, 0.35); }
}

.order-arrive-glow { animation: order-arrive-glow 1.1s ease-out 3; }

@keyframes order-status-upgrade {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.06); filter: brightness(1.25); text-shadow: 0 0 14px var(--accent-glow); }
  100% { transform: scale(1); filter: brightness(1); }
}

.order-status-upgrade {
  animation: order-status-upgrade 0.85s ease-out;
}

@keyframes order-messages-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes order-courier-pop {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.order-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.85rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.order-card--live {
  border-color: rgba(255, 46, 138, 0.2);
}

.order-card--delivery {
  border-color: rgba(74, 222, 128, 0.2);
}

.order-card-fx {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.order-card-aurora {
  position: absolute;
  inset: -50% -25%;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 46, 138, 0.12), transparent 40%),
    radial-gradient(circle at 82% 85%, rgba(124, 58, 237, 0.1), transparent 42%);
  animation: order-card-aurora 10s ease-in-out infinite alternate;
}

.order-card--delivery .order-card-aurora {
  background:
    radial-gradient(circle at 12% 20%, rgba(74, 222, 128, 0.1), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(255, 46, 138, 0.08), transparent 42%);
}

@keyframes order-card-aurora {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(1.5%, -0.5%, 0); }
}

.order-card-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 46, 138, 0.025) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: order-card-scan 7s linear infinite;
  opacity: 0.4;
}

@keyframes order-card-scan {
  from { background-position: 0 -100%; }
  to { background-position: 0 100%; }
}

.order-card-body {
  position: relative;
  z-index: 1;
  padding: 0.875rem 1rem;
}

.orders-list .order-card {
  animation: order-card-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--order-card-i, 0) * 60ms);
}

@keyframes order-card-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.order-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
}

.order-card-meta {
  min-width: 0;
}

.order-card-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.order-card-number {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.2;
}

.order-card-top-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

.order-card-total {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 46, 138, 0.2);
  white-space: nowrap;
}

.order-card-progress {
  display: flex;
  align-items: center;
  margin: 0.625rem 0 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}

.order-card-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 3.25rem;
}

.order-card-progress-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s, box-shadow 0.2s;
}

.order-card-progress-step.is-done .order-card-progress-dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 46, 138, 0.4);
}

.order-card-progress-step.is-active .order-card-progress-dot {
  background: #86efac;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.45);
  animation: order-progress-pulse 1.8s ease-in-out infinite;
}

@keyframes order-progress-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.order-card-progress-label {
  font-size: 0.5625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.order-card-progress-step.is-active .order-card-progress-label {
  color: #86efac;
}

.order-card-progress-line {
  flex: 1;
  height: 1px;
  margin: 0 0.15rem 0.75rem;
  background: linear-gradient(90deg, rgba(255, 46, 138, 0.3), rgba(255, 255, 255, 0.06));
}

.order-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.order-courier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.75rem;
}

.order-courier-chip--pop {
  animation: order-courier-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.order-courier-avatar {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.order-courier-avatar.chat-avatar {
  width: 1.5rem;
  height: 1.5rem;
}

.order-courier-chip-text {
  color: var(--muted);
}

.order-courier-chip-text .font-mono {
  color: var(--accent);
}

.order-cash-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.order-customer-cash-glance {
  margin: 0;
}

.order-cash-nudge--edit {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}

.order-cash-nudge--edit:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

.order-cash-wrap--edit {
  margin-top: 0;
}

.order-cash-wrap {
  margin-top: 0.5rem;
}

.order-cash-wrap--prompt {
  width: 100%;
}

.order-cash-nudge {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.04);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.order-cash-nudge:hover {
  border-color: rgba(255, 46, 138, 0.38);
  background: rgba(255, 46, 138, 0.08);
}

.order-cash-nudge-icon {
  flex-shrink: 0;
  line-height: 1.2;
  font-size: 0.9rem;
}

.order-cash-nudge-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.order-cash-nudge-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.3;
}

.order-cash-nudge-hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.order-cash-nudge--edit .order-cash-nudge-title {
  font-weight: 500;
  color: var(--muted);
}

.order-cash-nudge-cta {
  flex-shrink: 0;
  font-size: 0.875rem;
  color: var(--accent);
}

.order-cash-body-change {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fbbf24;
}

.order-cash-nudge-panel {
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.order-cash-nudge-panel.has-value {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.04);
}

.order-cash-change-preview {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fbbf24;
}

.order-cash-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.order-cash-toggle:hover,
.order-cash-toggle.has-value {
  border-color: rgba(255, 46, 138, 0.25);
  color: var(--foreground);
}

.order-cash-toggle.has-value {
  background: rgba(255, 46, 138, 0.06);
}

.order-cash-body {
  margin-top: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 46, 138, 0.14);
  background: rgba(0, 0, 0, 0.15);
}

.order-cash-body-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: center;
}

.order-cash-panel-input {
  padding: 0.4rem 0.6rem !important;
  font-size: 0.8125rem !important;
}

.order-cash-readout {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  color: var(--muted);
}

.order-cash-field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: center;
}

.order-cash-wizard-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.order-cash-wizard-toggle:hover {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.04);
}

.order-cash-wizard-toggle.has-value,
.order-cash-wizard-toggle[aria-expanded="true"] {
  border-color: rgba(251, 191, 36, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.55) 0%, rgba(8, 4, 16, 0.35) 100%);
}

.order-cash-wizard-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

.order-cash-wizard-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.order-cash-wizard-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-cash-wizard-toggle-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
}

.order-cash-wizard-toggle.has-value .order-cash-wizard-toggle-meta {
  color: var(--foreground);
}

.order-cash-wizard-toggle-chevron {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin-right: 0.15rem;
  transition: transform 0.15s;
}

.order-cash-wizard-toggle[aria-expanded="true"] .order-cash-wizard-toggle-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.order-cash-wizard-body {
  margin-top: 0.45rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(251, 191, 36, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.order-cash-wizard-body .order-wizard-hint {
  margin: 0 0 0.55rem;
}

.order-card-notes {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.625rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: pre-wrap;
  color: rgba(236, 232, 244, 0.92);
}

.order-messages-btn {
  padding: 0.3rem 0.65rem !important;
  font-size: 0.75rem !important;
  text-decoration: none;
  white-space: nowrap;
}

.order-bid-line {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--accent-dim);
}

.orders-page-head {
  margin-bottom: 1.25rem;
}

.orders-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
}

.orders-page-sub {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.orders-page-tabs {
  margin-bottom: 1.125rem;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .order-card-aurora,
  .order-card-scanline,
  .order-card-progress-step.is-active .order-card-progress-dot,
  .orders-list .order-card {
    animation: none !important;
  }
}

.order-cash-input {
  min-width: 0;
}

.order-cash-suffix {
  padding: 0 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.order-status-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.order-status-badge--finding {
  color: var(--accent-dim);
  background: rgba(255, 46, 138, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.22);
}

.order-status-badge--accepted {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.order-status-badge--completed {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.order-status-badge--cancelled {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.22);
}

.order-status-live-dot {
  position: relative;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
}

.order-status-live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.4);
  animation: live-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.order-status-live-dot::after {
  content: "";
  position: relative;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.85);
}

.order-status-alert {
  margin-bottom: 0.875rem;
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.order-status-alert--release {
  border: 1px solid rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.12);
  color: var(--foreground);
}

.order-status-alert--release p:first-child {
  color: var(--accent);
}

.order-status-alert--cancelled {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.order-status-alert--completed {
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
}

.order-status-alert--updated {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: start;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.08);
  color: var(--foreground);
}

.order-total-update-title {
  margin: 0;
  font-weight: 600;
  color: #fde047;
}

.order-total-update-detail {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
}

.order-total-update-delta {
  margin-left: 0.35rem;
  color: #fde047;
  font-weight: 600;
}

.order-total-update-receipt-line {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.order-total-update-receipt {
  display: block;
  width: 4.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.order-total-update-receipt-img {
  display: block;
  width: 100%;
  height: 4.5rem;
  object-fit: cover;
}

.order-total-update-dismiss {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.orders-page-toast--updated {
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.1);
  color: #fde047;
}

.orders-page-toast {
  margin-bottom: 1rem;
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  animation: order-arrive-glow 1.1s ease-out 2;
}

.orders-page-toast--release {
  border: 1px solid rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.12);
  color: var(--accent);
}

.orders-page-toast--cancelled {
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

.orders-page-toast--completed {
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
}

.order-proof-image {
  margin-top: 0.5rem;
  max-height: 12rem;
  width: auto;
  max-width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  object-fit: cover;
}

.order-chat-proof {
  padding: 1rem 1.25rem;
}

.order-chat-proof-link {
  display: block;
  margin-top: 0.75rem;
}

.order-chat-proof-image {
  width: 100%;
  max-width: 20rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  object-fit: cover;
}

.order-messages-btn--pop {
  animation: order-messages-pop 0.55s ease-out;
}

.order-courier-reveal--pop {
  animation: order-courier-pop 0.65s ease-out 0.1s both;
}

@keyframes available-badge-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.available-badge-pop { animation: available-badge-pop 0.45s ease-out; }

/* ── Layout utilities (Tailwind replacements) ── */
.hidden { display: none !important; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.block { display: block; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-row-reverse { flex-direction: row-reverse; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-amber-400 { color: #fbbf24; }
.text-background { color: var(--background); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.whitespace-pre-wrap { white-space: pre-wrap; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-32 { width: 8rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-\[85\%\] { max-width: 85%; }
.max-w-\[75\%\] { max-width: 75%; }
.h-\[28rem\] { height: 28rem; }
.h-\[32rem\] { height: 32rem; }
.h-\[36rem\] { height: 36rem; }
.h-48 { height: 12rem; }
.h-56 { height: 14rem; }

.map-picker--register {
  height: 20rem;
  margin-top: 0.75rem;
  border-radius: 0.75rem;
}

.map-picker--order {
  height: 16rem;
  margin-top: 0.75rem;
}

/* ── Order wizard ── */
#order-page {
  padding-bottom: 1.5rem;
  max-width: 56rem;
}

.order-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 46, 138, 0.12);
}

.order-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.order-page-price {
  margin: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.08);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.order-page-error {
  margin-bottom: 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: #fca5a5;
}

.order-wizard {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 46, 138, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 48px rgba(0, 0, 0, 0.32),
    0 0 40px rgba(255, 46, 138, 0.06);
}

.order-wizard-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(255, 46, 138, 0.12);
  background: linear-gradient(180deg, rgba(255, 46, 138, 0.04) 0%, transparent 100%);
}

.order-wizard-track-line {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  top: 1.85rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.order-wizard-track-line span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), rgba(255, 46, 138, 0.55));
  transition: width 0.35s ease;
}

.order-wizard-track-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}

.order-wizard-track-step:hover:not(.is-active) {
  color: var(--foreground);
}

.order-wizard-track-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 4, 16, 0.92);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.order-wizard-track-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.order-wizard-track-step.is-active {
  color: var(--accent);
}

.order-wizard-track-step.is-active .order-wizard-track-dot {
  border-color: var(--accent);
  background: rgba(255, 46, 138, 0.16);
  box-shadow: 0 0 0 4px rgba(255, 46, 138, 0.1), 0 0 14px rgba(255, 46, 138, 0.35);
  animation: order-step-pulse 2.4s ease-in-out infinite;
}

@keyframes order-step-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 46, 138, 0.1), 0 0 14px rgba(255, 46, 138, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(255, 46, 138, 0.16), 0 0 22px rgba(255, 46, 138, 0.5); }
}

.order-wizard-track-step.is-done {
  color: var(--accent-dim);
}

.order-wizard-track-step.is-done .order-wizard-track-dot {
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.12);
  color: var(--accent);
}

.order-wizard-stage {
  padding: 1.25rem 1.25rem 0.5rem;
}

.order-wizard-kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-wizard-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.order-wizard-desc {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

.order-wizard-body {
  padding: 0.25rem 1.25rem 0.5rem;
}

.order-wizard-panel {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.order-wizard-field {
  display: flex;
  flex-direction: column;
}

.order-wizard-label {
  display: block;
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-wizard-label--inline {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

.order-wizard-optional {
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--muted);
}

.order-wizard-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted);
}

.order-wizard-callout {
  margin: 0.35rem 0 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.order-wizard .order-wizard-input {
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.order-wizard-callsign {
  max-width: 7rem;
}

.order-wizard-subtabs {
  gap: 0.3rem;
  margin-bottom: 0;
}

.order-wizard .subtab-btn {
  padding: 0.4rem 0.65rem;
  font-size: 0.75rem;
}

.order-shops-panel {
  margin-top: 0.35rem;
  padding: 0.875rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(255, 46, 138, 0.1), transparent 40%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.55) 0%, rgba(8, 4, 16, 0.35) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 28px rgba(0, 0, 0, 0.22);
}

.order-shops-categories {
  margin-top: 0;
}

.order-shops-search-wrap {
  position: relative;
  margin-top: 0.5rem;
}

.order-shops-search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--accent-dim);
  pointer-events: none;
}

.order-shops-search {
  padding-left: 2.25rem;
  border-color: rgba(255, 46, 138, 0.22);
  background: linear-gradient(165deg, rgba(19, 10, 30, 0.72) 0%, rgba(8, 4, 16, 0.5) 100%);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.order-shops-search:focus {
  border-color: rgba(255, 46, 138, 0.45);
  box-shadow: 0 0 22px rgba(255, 46, 138, 0.14);
}

.order-shops-scroll-wrap {
  position: relative;
  margin-top: 0.5rem;
}

.order-shops-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5rem;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.order-shops-scroll-fade--top {
  top: 0;
  background: linear-gradient(180deg, rgba(8, 4, 16, 0.96) 0%, transparent 100%);
}

.order-shops-scroll-fade--bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(8, 4, 16, 0.96) 0%, transparent 100%);
}

.order-shops-scroll-wrap.is-scrollable-top .order-shops-scroll-fade--top,
.order-shops-scroll-wrap.is-scrollable-bottom .order-shops-scroll-fade--bottom {
  opacity: 1;
}

.order-wizard-shops {
  max-height: none;
  overflow: visible;
  margin-top: 0;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.order-shops-scroll-wrap .order-wizard-shops {
  max-height: 24rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem 0.25rem 0.2rem 0;
  scroll-behavior: smooth;
}

@media (max-width: 639px) {
  .order-shops-scroll-wrap .order-wizard-shops {
    max-height: 22rem;
    padding-right: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 46, 138, 0.65) rgba(255, 46, 138, 0.1);
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar {
    width: 7px;
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar-track {
    margin: 0.35rem 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 46, 138, 0.08), rgba(124, 58, 237, 0.08));
    border: 1px solid rgba(255, 46, 138, 0.12);
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(124, 58, 237, 0.9) 100%);
    box-shadow: 0 0 10px rgba(255, 46, 138, 0.45);
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff4da6 0%, #8b5cf6 100%);
  }
}

@media (min-width: 640px) {
  .order-shops-scroll-wrap .order-wizard-shops {
    max-height: 26rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 46, 138, 0.35) transparent;
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar {
    width: 6px;
  }

  .order-shops-scroll-wrap .order-wizard-shops::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 46, 138, 0.35);
  }
}

@media (min-width: 768px) {
  .order-wizard-shops {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.order-wizard-shops .shop-picker-card,
.order-wizard-shops .order-shop-card {
  position: relative;
  border-radius: 0.85rem;
  animation: order-shop-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--shop-card-i, 0) * 0.045s);
}

.order-wizard-shops .shop-picker-card-media {
  aspect-ratio: 5 / 4;
}

.order-wizard-shops .shop-picker-card-body {
  padding: 0.875rem 1rem;
  min-height: 0;
  gap: 0.3rem;
}

.order-wizard-shops .shop-picker-card-title {
  font-size: 0.9375rem;
  min-height: 0;
  -webkit-line-clamp: 2;
}

.order-wizard-shops .shop-picker-card-meta {
  font-size: 0.6875rem;
  min-height: 0;
  -webkit-line-clamp: 2;
}

@keyframes order-shop-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }

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

.order-wizard-shops .shop-picker-card.selected {
  border-color: rgba(255, 46, 138, 0.62);
  box-shadow:
    0 0 0 1px rgba(255, 46, 138, 0.45),
    0 0 32px rgba(255, 46, 138, 0.22),
    inset 0 0 24px rgba(255, 46, 138, 0.06);
}

.order-shops-load-more {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.6rem 1rem;
  border-radius: 0.55rem;
  border: 1px dashed rgba(255, 46, 138, 0.38);
  background: linear-gradient(180deg, rgba(255, 46, 138, 0.08) 0%, rgba(124, 58, 237, 0.05) 100%);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.order-shops-load-more:hover {
  border-color: rgba(255, 46, 138, 0.55);
  background: linear-gradient(180deg, rgba(255, 46, 138, 0.12) 0%, rgba(124, 58, 237, 0.08) 100%);
  box-shadow: 0 0 18px rgba(255, 46, 138, 0.14);
  transform: translateY(-1px);
}

.order-shops-load-more:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .order-wizard-shops .shop-picker-card,
  .order-wizard-shops .order-shop-card {
    animation: none;
  }

  .order-wizard-track-step.is-active .order-wizard-track-dot {
    animation: none;
  }

  .order-shops-scroll-wrap .order-wizard-shops {
    scroll-behavior: auto;
  }
}

.order-wizard-dropoff {
  margin-top: 0;
}

.order-wizard-dropoff .home-location-summary {
  margin-top: 0;
  align-items: stretch;
}

.order-dropoff-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
  padding: 0.65rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 46, 138, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 138, 0.1), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.72) 0%, rgba(8, 4, 16, 0.55) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.order-dropoff-chip.is-empty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.order-dropoff-chip--home {
  border-color: rgba(255, 46, 138, 0.24);
}

.order-dropoff-chip--custom {
  border-color: rgba(124, 58, 237, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.72) 0%, rgba(8, 4, 16, 0.55) 100%);
}

.order-dropoff-chip-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.12);
  color: var(--accent);
}

.order-dropoff-chip.is-empty .order-dropoff-chip-icon {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
}

.order-dropoff-chip--home .order-dropoff-chip-icon {
  border-color: rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.12);
  color: var(--accent);
}

.order-dropoff-chip--custom .order-dropoff-chip-icon {
  border-color: rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.14);
  color: #c4b5fd;
}

.order-dropoff-chip-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.order-dropoff-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.order-dropoff-chip-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
}

.order-dropoff-chip.is-empty .order-dropoff-chip-label {
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
}

.order-dropoff-chip-detail {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-wizard-dropoff .home-location-toggle {
  align-self: center;
}

.order-wizard .map-picker--order {
  height: 12rem;
  margin-top: 0.5rem;
  border-radius: 0.55rem;
}

.order-wizard-review {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(165deg, rgba(12, 6, 22, 0.55) 0%, rgba(6, 3, 12, 0.35) 100%);
  overflow: hidden;
}

.order-wizard-review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.order-wizard-review-row:last-child {
  border-bottom: 0;
}

.order-wizard-review-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-wizard-review-value {
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--foreground);
}

.order-wizard-review-value--total {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.order-wizard-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255, 46, 138, 0.14);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 46, 138, 0.03) 100%);
}

.order-wizard-back {
  flex-shrink: 0;
}

.order-wizard-next,
.order-wizard-submit {
  flex: 1;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (min-width: 640px) {
  .order-wizard-track {
    padding: 1.125rem 1.5rem 0.875rem;
  }

  .order-wizard-stage,
  .order-wizard-body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .order-wizard-actions {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.order-section {
  display: flex;
  flex-direction: column;
}

.pickup-mode-bar {
  margin-bottom: 0.5rem;
}

.pickup-location-notice {
  margin: 0 0 0.25rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(250, 204, 21, 0.35);
  background: rgba(250, 204, 21, 0.1);
}

.pickup-location-notice-label {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(253, 224, 71, 0.92);
}

.pickup-location-notice-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--foreground);
}

.pickup-selected-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.375rem 0 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 46, 138, 0.28);
  background: rgba(255, 46, 138, 0.08);
  padding: 0.45rem 0.625rem;
}

.pickup-map-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.1), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.72) 0%, rgba(8, 4, 16, 0.55) 100%);
}

.pickup-map-coord-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.pickup-map-coord-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(124, 58, 237, 0.14);
  color: #c4b5fd;
}

.pickup-map-coord-icon svg {
  width: 1rem;
  height: 1rem;
}

.pickup-map-coord-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.pickup-map-saved-details {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
}

.pickup-map-details-field {
  display: flex;
  flex-direction: column;
  margin-top: 0.75rem;
}

.pickup-map-details-field .order-wizard-label {
  margin-bottom: 0.35rem;
}

.pickup-map-details-field .order-wizard-hint {
  margin-top: 0.35rem;
}

.pickup-map-coords {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--foreground);
  word-break: break-word;
}

.pickup-map-coords.is-empty {
  font-family: inherit;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
}

.pickup-map-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pickup-map-actions .btn-sm {
  flex-shrink: 0;
  min-width: 5.5rem;
}

.pickup-map-actions .btn-sm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.delivery-schedule {
  position: relative;
  margin-top: 0.45rem;
}

.delivery-schedule-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: rgba(3, 0, 8, 0.55);
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.delivery-schedule-trigger:hover {
  border-color: rgba(255, 46, 138, 0.35);
  color: var(--foreground);
}

.delivery-schedule-trigger.is-set {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.28);
  box-shadow: 0 0 18px rgba(255, 46, 138, 0.08);
}

.delivery-schedule-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--accent-dim);
}

.delivery-schedule-trigger.is-set .delivery-schedule-icon {
  color: var(--accent);
}

.schedule-picker {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  border-radius: 0.875rem;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(19, 10, 30, 0.98) 0%, rgba(10, 6, 20, 0.96) 100%);
  padding: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 46, 138, 0.1);
}

.schedule-picker-title {
  margin: 0 0 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.schedule-picker-fields {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .schedule-picker-fields {
    grid-template-columns: 1fr 1fr;
  }
}

.schedule-picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.schedule-picker-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.schedule-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.schedule-picker .input-field[type="date"],
.schedule-picker .input-field[type="time"] {
  cursor: pointer;
}

.shop-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .shop-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .shop-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.shop-picker-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: linear-gradient(165deg, rgba(19, 10, 30, 0.92) 0%, rgba(8, 4, 16, 0.88) 100%);
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.28);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

.shop-picker-card:hover {
  border-color: rgba(255, 46, 138, 0.38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 46, 138, 0.12),
    0 12px 32px rgba(255, 46, 138, 0.14);
  transform: translateY(-2px);
}

.shop-picker-card:focus-visible {
  outline: 2px solid rgba(255, 46, 138, 0.55);
  outline-offset: 2px;
}

.shop-picker-card.selected {
  border-color: rgba(255, 46, 138, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 46, 138, 0.45),
    0 0 28px rgba(255, 46, 138, 0.18);
}

.shop-picker-card-media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.shop-picker-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 0, 8, 0.05) 0%,
    rgba(3, 0, 8, 0.55) 100%
  );
  opacity: 0.72;
  transition: opacity 0.22s ease;
}

.shop-picker-card:hover .shop-picker-card-media::after {
  opacity: 0.9;
}

.shop-picker-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.shop-picker-card:hover .shop-picker-card-media img {
  transform: scale(1.06);
}

.shop-picker-card-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(236, 232, 244, 0.88);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 46, 138, 0.22), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.28), transparent 50%),
    linear-gradient(145deg, rgba(19, 10, 30, 0.95), rgba(8, 4, 16, 0.92));
}

.shop-picker-featured {
  position: absolute;
  left: 0.625rem;
  top: 0.625rem;
  z-index: 2;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 46, 138, 0.92);
  padding: 0.2rem 0.55rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--background);
  box-shadow: 0 4px 12px rgba(255, 46, 138, 0.35);
}

.shop-picker-delivery-badge {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  z-index: 2;
  max-width: calc(100% - 1.25rem);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(34, 197, 94, 0.94);
  padding: 0.2rem 0.55rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--background);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}

.shop-picker-selected-mark {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  z-index: 2;
  display: flex;
  width: 1.625rem;
  height: 1.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--accent);
  color: var(--background);
  box-shadow: 0 4px 14px rgba(255, 46, 138, 0.45);
}

.shop-picker-selected-mark svg {
  width: 0.875rem;
  height: 0.875rem;
}

.shop-picker-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.375rem;
  min-height: 5.5rem;
  padding: 0.875rem 1rem 1rem;
}

.shop-picker-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4375rem;
}

.shop-picker-card-meta {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2rem;
}

#dropoff-section .home-location-summary {
  margin-top: 0;
}

/* ── Location menu order ── */
.location-menu-order {
  border-radius: 1rem;
  padding: 1.5rem;
}

.location-menu-order-title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.location-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.location-menu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(3, 0, 8, 0.35);
  padding: 1rem;
}

.location-menu-item-body {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.location-menu-item-photo {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.625rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.location-menu-item-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-menu-item-info {
  min-width: 0;
  flex: 1 1 12rem;
}

.location-menu-item-name {
  margin: 0;
  font-weight: 500;
}

.location-menu-item-desc {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.location-menu-item-price {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--accent);
}

.location-menu-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.location-menu-qty-btn {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.location-menu-qty-btn:hover {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.35);
}

.location-menu-qty-btn--add:hover {
  color: var(--accent);
  background: rgba(255, 46, 138, 0.08);
}

.location-menu-qty-value {
  width: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.location-menu-cart {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
}

.location-menu-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.location-menu-cart-line--item {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.location-menu-cart-line-main {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.location-menu-line-note {
  width: 100%;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
}

.location-menu-cart-line--muted {
  color: var(--muted);
}

.location-menu-cart-line--total {
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.location-menu-cart-line--total span:last-child {
  color: var(--accent);
}

.location-menu-notes {
  margin-top: 1rem;
}

.location-menu-error {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: #f87171;
}

.location-menu-submit {
  margin-top: 0.75rem;
}

.location-menu-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Location detail page ── */
.location-detail-page {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

.location-detail-back {
  font-size: 0.875rem;
  color: var(--muted);
  transition: color 0.2s;
}

.location-detail-back:hover {
  color: var(--accent);
}

.location-detail-hero {
  margin-top: 1.5rem;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
}

.location-detail-hero-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.03);
}

.location-detail-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--background);
}

.location-detail-hero-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(3, 0, 8, 0.5);
  color: var(--muted);
}

.location-detail-hero-body {
  padding: 1.5rem 2rem;
}

.location-detail-hero-body h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

.location-detail-summary {
  margin-top: 0.5rem;
  color: var(--muted);
}

.location-detail-address {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.location-detail-about {
  margin-top: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
}

.location-detail-about summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.location-detail-about .prose-rich {
  margin-top: 1rem;
}

.location-detail-fallback {
  margin-top: 1.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.location-detail-fallback a {
  color: var(--accent);
}

.location-detail-fallback a:hover {
  text-decoration: underline;
}

.order-menu-totals {
  margin: 0 0 0.5rem;
  padding: 0;
  border-top: none;
  font-size: 0.8125rem;
}

.order-menu-totals-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--muted);
}

.order-menu-totals-row--total {
  font-weight: 600;
  color: var(--foreground);
}

.order-menu-totals-row--total span:last-child {
  color: var(--accent);
}

/* ── Admin locations panel ── */
.admin-locations-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .admin-locations-grid {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Sidebar */
.admin-loc-sidebar-card {
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(145deg, rgba(255, 46, 138, 0.04), rgba(3, 0, 8, 0.5));
}

.admin-loc-sidebar-card + .admin-loc-sidebar-card {
  margin-top: 0.65rem;
}

.admin-loc-sidebar-card-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.admin-loc-sidebar-inline {
  display: flex;
  gap: 0.45rem;
}

.admin-loc-sidebar-inline .input-field {
  flex: 1;
  min-width: 0;
}

.admin-loc-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.admin-loc-sidebar-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.6875rem;
  color: var(--foreground);
}

.admin-loc-sidebar-tag button {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0 0.15rem;
}

.admin-loc-sidebar-tag button:hover {
  color: #f87171;
}

.admin-loc-sidebar-list-wrap {
  margin-top: 0.85rem;
}

.admin-loc-sidebar-list-label {
  margin: 0 0 0.45rem;
  padding: 0 0.15rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.admin-loc-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-loc-sidebar-empty {
  margin: 0;
  padding: 0.5rem 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-loc-list-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 0, 8, 0.45);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.admin-loc-list-item:hover {
  border-color: rgba(255, 46, 138, 0.2);
  background: rgba(255, 46, 138, 0.04);
}

.admin-loc-list-item.is-selected {
  border-color: rgba(255, 46, 138, 0.45);
  background: linear-gradient(90deg, rgba(255, 46, 138, 0.14), rgba(3, 0, 8, 0.5));
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-loc-list-item.is-dragging {
  opacity: 0.5;
}

.admin-loc-drag {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--muted);
  cursor: grab;
  user-select: none;
}

.admin-loc-select {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.75rem 0.65rem 0.35rem;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.admin-loc-select-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.admin-loc-select-name {
  font-weight: 500;
}

.admin-loc-select-slug {
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-loc-featured-badge {
  display: inline-block;
  margin-left: 0.35rem;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.85);
  padding: 0.1rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--background);
}

.admin-loc-hidden-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #f87171;
}

.admin-loc-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(160deg, rgba(255, 46, 138, 0.03) 0%, rgba(3, 0, 8, 0.55) 40%);
}

.admin-loc-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-loc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
}

.admin-loc-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.admin-loc-tab:hover:not(.is-active) {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.03);
}

.admin-loc-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--muted);
}

.admin-loc-tab.is-active {
  border-color: rgba(255, 46, 138, 0.35);
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.16), rgba(255, 46, 138, 0.06));
  color: var(--foreground);
  box-shadow: 0 0 20px rgba(255, 46, 138, 0.12);
}

.admin-loc-tab.is-active .admin-loc-tab-num {
  border-color: rgba(255, 46, 138, 0.5);
  background: rgba(255, 46, 138, 0.25);
  color: var(--foreground);
}

.admin-loc-tab-label {
  white-space: nowrap;
}

.admin-loc-tab-panel {
  min-height: 12rem;
  padding-top: 0.35rem;
}

/* Basics tab (step 1) */
.admin-loc-basics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-loc-basics-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 46, 138, 0.18);
  background: linear-gradient(125deg, rgba(255, 46, 138, 0.1), rgba(3, 0, 8, 0.6));
  overflow: hidden;
}

.admin-loc-basics-hero-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 138, 0.22), transparent 70%);
  pointer-events: none;
}

.admin-loc-basics-hero-body {
  position: relative;
  z-index: 1;
}

.admin-loc-basics-hero-kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-loc-basics-hero-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 28rem;
  line-height: 1.45;
}

.admin-loc-basics-hero-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-loc-hero-pill {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-loc-hero-pill.is-on {
  border-color: rgba(134, 239, 172, 0.35);
  background: rgba(134, 239, 172, 0.1);
  color: #86efac;
}

.admin-loc-basics-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 720px) {
  .admin-loc-basics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-loc-basics-card--wide {
    grid-column: 1 / -1;
  }
}

.admin-loc-basics-card {
  padding: 0.95rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 0, 8, 0.4);
  transition: border-color 0.2s;
}

.admin-loc-basics-card:hover {
  border-color: rgba(255, 46, 138, 0.14);
}

.admin-loc-basics-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.admin-loc-basics-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 46, 138, 0.25);
  background: rgba(255, 46, 138, 0.08);
  font-size: 0.75rem;
  color: var(--accent);
}

.admin-loc-basics-card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-loc-basics-card-hint {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.admin-loc-basics-fields {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .admin-loc-basics-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-loc-basics-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-loc-basics-field.hidden {
  display: none;
}

.admin-loc-basics-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.admin-loc-basics-hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-loc-basics-input-suffix {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-loc-basics-input-suffix .input-field {
  flex: 1;
  min-width: 0;
  max-width: 8rem;
}

.admin-loc-basics-suffix {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.admin-loc-basics-toggles {
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 560px) {
  .admin-loc-basics-toggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-loc-toggle-card {
  display: block;
  cursor: pointer;
}

.admin-loc-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-loc-toggle-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.2);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.admin-loc-toggle-card:hover .admin-loc-toggle-card-inner {
  border-color: rgba(255, 46, 138, 0.2);
}

.admin-loc-toggle-card:has(.admin-loc-toggle-input:checked) .admin-loc-toggle-card-inner {
  border-color: rgba(255, 46, 138, 0.4);
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.12), rgba(3, 0, 8, 0.5));
  box-shadow: 0 0 16px rgba(255, 46, 138, 0.1);
}

.admin-loc-toggle-indicator {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.admin-loc-toggle-card:has(.admin-loc-toggle-input:checked) .admin-loc-toggle-indicator {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 46, 138, 0.45);
}

.admin-loc-toggle-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.admin-loc-toggle-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.admin-loc-basics-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-loc-detail-empty {
  display: flex;
  min-height: 20rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  padding: 2rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.admin-loc-menu-item {
  display: grid;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(3, 0, 8, 0.35);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.menu-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.menu-editor-saved-msg {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
}

.admin-loc-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-loc-saved-msg {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.admin-loc-saved-msg.hidden {
  display: none;
}

.menu-editor-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.menu-editor-item {
  display: grid;
  gap: 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(3, 0, 8, 0.35);
  padding: 1rem;
}

@media (min-width: 768px) {
  .menu-editor-item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
  }
}

.menu-editor-photo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.menu-editor-photo-preview {
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.menu-editor-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-editor-photo-empty {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.625rem;
  color: var(--muted);
}

.menu-editor-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  position: relative;
}

.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-editor-fields {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .menu-editor-fields {
    grid-template-columns: 1fr 1fr;
  }

  .menu-editor-desc,
  .menu-editor-available,
  .menu-editor-remove {
    grid-column: 1 / -1;
  }
}

.menu-editor-available {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
}

.menu-editor-remove {
  justify-self: start;
}

.admin-loc-category-chip {
  display: inline-flex;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.admin-loc-category-chip.is-active {
  border-color: rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.12);
  color: var(--accent);
}

.admin-loc-category-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.admin-loc-manager-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 46, 138, 0.3);
  background: rgba(255, 46, 138, 0.1);
  padding: 0.25rem 0.35rem 0.25rem 0.75rem;
  font-size: 0.875rem;
  color: var(--accent);
}

.admin-loc-manager-chip button {
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}

.admin-loc-manager-chip button:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, 0.06);
}

.admin-loc-map {
  height: 18rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
}

.admin-loc-section-title {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-loc-section-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.admin-loc-field-label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}

.admin-loc-order-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-loc-order-panel .admin-loc-basics-card {
  margin-bottom: 0;
}

.admin-loc-field-label input,
.admin-loc-field-label textarea,
.admin-loc-field-label select {
  margin-top: 0.35rem;
}

.admin-loc-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-loc-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
}

.admin-loc-pin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.65rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.admin-loc-pin-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-loc-pin-coords {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.admin-loc-pin-coords.is-set {
  color: #86efac;
}

.admin-loc-save-row--sticky {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-loc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-loc-field-add-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.admin-loc-field-add-select {
  min-width: 9rem;
}

.admin-loc-fields-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-loc-fields-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.admin-loc-field-row {
  padding: 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(0, 0, 0, 0.2);
}

.admin-loc-field-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.admin-loc-field-row-type {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-loc-field-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.admin-loc-field-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
}

.pickup-location-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pickup-location-fields.hidden {
  display: none;
}

.order-loc-field-box {
  display: flex;
  flex-direction: column;
}

.order-loc-field-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.order-loc-field-toggle:hover {
  border-color: rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.04);
}

.order-loc-field-toggle.has-value,
.order-loc-field-toggle[aria-expanded="true"] {
  border-color: rgba(255, 46, 138, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 138, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.55) 0%, rgba(8, 4, 16, 0.35) 100%);
}

.order-loc-field-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.08);
  color: var(--accent);
}

.order-loc-field-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.order-loc-field-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-loc-field-required {
  color: #f87171;
}

.order-loc-field-toggle-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.35;
}

.order-loc-field-toggle.has-value .order-loc-field-toggle-meta {
  color: var(--foreground);
}

.order-loc-field-toggle-chevron {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin-right: 0.15rem;
  transition: transform 0.15s;
}

.order-loc-field-toggle[aria-expanded="true"] .order-loc-field-toggle-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.order-loc-field-body {
  margin-top: 0.45rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 46, 138, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.order-loc-field-body .order-wizard-hint {
  margin: 0.45rem 0 0;
}

.pickup-location-field--checkbox .order-wizard-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

.pickup-location-field--checkbox .order-wizard-label--inline {
  margin: 0;
}

.pickup-field--checkbox input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.pickup-field-image-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.pickup-field-image-name {
  margin: 0;
}

.courier-location-fields {
  margin: 0.5rem 0 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.courier-location-field + .courier-location-field {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.courier-location-field-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-location-field-value {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.courier-location-field-img {
  display: block;
  margin-top: 0.35rem;
  max-width: 100%;
  max-height: 8rem;
  border-radius: 0.45rem;
  object-fit: cover;
}

.courier-accepted-section-panel--fields .courier-location-fields {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.courier-location-field--image .courier-location-field-img {
  max-height: 14rem;
}

.courier-location-field-image-link {
  display: block;
}

.courier-location-field--courier-note .courier-location-field-value {
  color: #fde68a;
}

.courier-accepted-section-icon--customerDetails.has-data {
  border-color: rgba(96, 165, 250, 0.35);
}

.admin-loc-card-preview {
  width: 9rem;
  height: 6rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.admin-loc-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-logo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.admin-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.admin-page--wide {
  max-width: 72rem;
}

.map-picker-loading {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--muted);
}

.map-picker-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
}

.map-coords {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.map-locate-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #f87171;
}

.phone-field-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: rgba(3, 0, 8, 0.85);
  overflow: hidden;
}

.phone-field-group:focus-within {
  border-color: rgba(255, 46, 138, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 46, 138, 0.15);
}

.phone-field-group .phone-country-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7rem;
  max-width: 9.5rem;
  padding: 0.625rem 1.75rem 0.625rem 0.75rem;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.phone-field-group .phone-local-input {
  flex: 1 1 0%;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.phone-field-group .phone-local-input:focus {
  box-shadow: none;
}

.phone-field-group .whatsapp-toggle--inline {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 0.375rem;
  border-left: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.phone-field-group .whatsapp-toggle--inline .whatsapp-toggle-ui {
  border: none;
  border-radius: 0.375rem;
  padding: 0.3125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.phone-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.phone-country-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 8.5rem;
  max-width: 42%;
  padding-right: 1.75rem;
  cursor: pointer;
}

.phone-input-row .input-field:last-child {
  flex: 1;
  min-width: 0;
}

.whatsapp-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.whatsapp-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.whatsapp-toggle-ui {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.whatsapp-toggle-ui::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--muted);
  opacity: 0.45;
  transition: background 0.2s, opacity 0.2s;
}

.whatsapp-toggle input:checked + .whatsapp-toggle-ui {
  border-color: rgba(37, 211, 102, 0.45);
  background: rgba(37, 211, 102, 0.1);
  color: #3ddc78;
}

.whatsapp-toggle input:checked + .whatsapp-toggle-ui::before {
  background: #3ddc78;
  opacity: 1;
}

.whatsapp-toggle input:focus-visible + .whatsapp-toggle-ui {
  box-shadow: 0 0 0 2px rgba(255, 46, 138, 0.25);
}

.whatsapp-order-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3ddc78;
  transition: opacity 0.2s;
}

.whatsapp-order-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.reg-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.reg-progress-step {
  flex: 1;
  height: 0.25rem;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.18);
  transition: background 0.2s;
}

.reg-progress-step.active {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 46, 138, 0.35);
}

/* ── Customer registration ── */
.customer-register {
  position: relative;
}

.customer-register-header {
  margin-bottom: 1.25rem;
  animation: customer-reg-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.customer-register-subtitle {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.customer-register-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  list-style: none;
  padding: 0;
  animation: customer-reg-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.customer-register-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.customer-register-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.customer-register-step.is-active {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.35);
  box-shadow: 0 0 18px rgba(255, 46, 138, 0.12);
  transform: translateY(-1px);
}

.customer-register-step.is-active span,
.customer-register-step.is-done span {
  background: rgba(255, 46, 138, 0.22);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 46, 138, 0.25);
}

.customer-register-step.is-done {
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(167, 139, 250, 0.22);
}

.customer-register-error {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  font-size: 0.875rem;
  color: rgb(252, 165, 165);
}

.customer-register-panel {
  position: relative;
  overflow: hidden;
  animation: customer-reg-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.customer-register-panel--step-2 {
  animation: customer-reg-panel-shift 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.customer-register-corner {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
  opacity: 0.55;
}

.customer-register-corner--tl { top: 0.75rem; left: 0.75rem; border-top: 1px solid rgba(167, 139, 250, 0.75); border-left: 1px solid rgba(167, 139, 250, 0.75); }
.customer-register-corner--tr { top: 0.75rem; right: 0.75rem; border-top: 1px solid rgba(255, 46, 138, 0.75); border-right: 1px solid rgba(255, 46, 138, 0.75); }
.customer-register-corner--bl { bottom: 0.75rem; left: 0.75rem; border-bottom: 1px solid rgba(167, 139, 250, 0.55); border-left: 1px solid rgba(167, 139, 250, 0.55); }
.customer-register-corner--br { bottom: 0.75rem; right: 0.75rem; border-bottom: 1px solid rgba(255, 46, 138, 0.55); border-right: 1px solid rgba(255, 46, 138, 0.55); }

.customer-register-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 46, 138, 0.05) 48%, transparent 100%);
  transform: translateY(-120%);
  animation: customer-reg-scan 6s linear infinite;
}

.customer-register-step-panel {
  position: relative;
  z-index: 1;
}

.customer-register-step-panel.is-active {
  animation: customer-reg-step-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.customer-register-step-head {
  margin-bottom: 0.35rem;
}

.customer-register-step-title {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.customer-register-step-line {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(167, 139, 250, 0.35));
  animation: customer-reg-line-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.customer-register-step-desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.customer-register-map {
  position: relative;
  border: 1px solid rgba(255, 46, 138, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 24px rgba(255, 46, 138, 0.08);
}

.customer-register-map-hint {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: var(--muted);
  transition: color 0.25s;
}

.customer-register-map-hint.is-set {
  color: rgb(74, 222, 128);
}

.customer-register-step-head--compact {
  margin-bottom: 0;
}

.customer-register-step-head--compact .customer-register-step-title {
  margin-top: 0;
}

.customer-register-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}

.customer-register-form > * {
  animation: customer-reg-field-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.customer-register-form > *:nth-child(1) { animation-delay: 0.05s; }
.customer-register-form > *:nth-child(2) { animation-delay: 0.1s; }
.customer-register-form > *:nth-child(3) { animation-delay: 0.15s; }

.customer-register-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.customer-register-phone .phone-country-select {
  min-width: 4.5rem;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .customer-register-form-row {
    grid-template-columns: 1fr;
  }
}

.customer-register-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.customer-register-cta {
  position: relative;
  overflow: hidden;
}

.customer-register-cta:not(:disabled):hover {
  box-shadow: 0 0 24px rgba(255, 46, 138, 0.28);
}

@keyframes customer-reg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes customer-reg-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes customer-reg-field-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes customer-reg-line-grow {
  from { width: 0; opacity: 0; }
  to { width: 3.5rem; opacity: 1; }
}

@keyframes customer-reg-panel-shift {
  0% { box-shadow: 0 0 0 rgba(255, 46, 138, 0); }
  40% { box-shadow: 0 0 28px rgba(255, 46, 138, 0.14); }
  100% { box-shadow: 0 0 0 rgba(255, 46, 138, 0); }
}

@keyframes customer-reg-scan {
  0% { transform: translateY(-120%); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(120%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-register-header,
  .customer-register-steps,
  .customer-register-panel,
  .customer-register-step-panel.is-active,
  .customer-register-form > *,
  .customer-register-step-line,
  .customer-register-scan,
  .customer-register-panel--step-2 {
    animation: none !important;
  }
}

.reg-panel { padding: 1.25rem; }
@media (min-width: 640px) { .reg-panel { padding: 2rem; } }

.reg-step-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reg-step-desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.reg-step-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.flex-1 { flex: 1 1 0%; }

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-photo {
  position: relative;
  flex-shrink: 0;
  height: 4rem;
  width: 4rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-elevated);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.profile-photo-upload {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--accent);
}

.profile-photo-upload:hover { text-decoration: underline; }

.profile-photo--panel {
  height: 4.5rem;
  width: 4.5rem;
}

.courier-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.courier-panel-avatar-block {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.courier-panel-avatar-upload {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.courier-panel-avatar-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
}

.courier-panel-avatar-label:hover {
  text-decoration: underline;
}

.courier-panel-avatar-hint {
  font-size: 0.6875rem;
  color: var(--muted);
  max-width: 11rem;
  line-height: 1.35;
}

.courier-forum-rank-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  text-decoration: none;
}

.courier-forum-rank-link:hover .courier-forum-rank-hint {
  color: var(--foreground);
}

.courier-forum-rank-hint {
  font-size: 0.6875rem;
  color: var(--muted);
  transition: color 0.2s;
}

.vb-forum-rank-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
  border: 1px solid rgba(255, 46, 138, 0.28);
  white-space: nowrap;
}

.vb-forum-rank-badge--override {
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

/* ── Driver forum (modern card layout) ── */
.courier-forum.vb-forum {
  font-size: 0.9375rem;
}

.vb-forum-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
}

.vb-forum-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vb-forum-subtitle {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.vb-forum-topnav {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.vb-forum-topnav a {
  color: var(--accent);
  text-decoration: none;
}

.vb-forum-topnav a:hover {
  text-decoration: underline;
}

.vb-forum-announce {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 46, 138, 0.18);
  border-radius: 0.875rem;
  background: rgba(10, 6, 20, 0.55);
  font-size: 0.9375rem;
}

/* Lounge chatbox */
.vb-forum-chatbox {
  margin-bottom: 1rem;
  border-radius: 1rem;
  overflow: hidden;
}

.vb-forum-chatbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.12), rgba(139, 92, 246, 0.08));
}

.vb-forum-chatbox-head-copy {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.vb-forum-chatbox-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.vb-forum-chatbox-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.vb-forum-chatbox-live-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  animation: vb-chatbox-pulse 2s ease-in-out infinite;
}

@keyframes vb-chatbox-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

.vb-forum-chatbox-expand {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.vb-forum-chatbox-expand:hover {
  text-decoration: underline;
}

.vb-forum-chatbox-panel {
  display: flex;
  flex-direction: column;
}

.vb-forum-chatbox-log {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 13rem;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.08), transparent 45%),
    rgba(0, 0, 0, 0.22);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 46, 138, 0.35) transparent;
}

.vb-chatbox-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  max-width: 92%;
}

.vb-chatbox-msg--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.vb-chatbox-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255, 46, 138, 0.22);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.vb-chatbox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-chatbox-avatar-initials {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
}

.vb-chatbox-bubble {
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.vb-chatbox-msg--mine .vb-chatbox-bubble {
  border-color: rgba(255, 46, 138, 0.28);
  background: rgba(255, 46, 138, 0.12);
}

.vb-chatbox-bubble-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.2rem;
}

.vb-chatbox-user {
  font-size: 0.75rem;
  font-weight: 600;
  color: #c4b5fd;
}

.vb-chatbox-msg--mine .vb-chatbox-user {
  color: var(--accent);
}

.vb-chatbox-time {
  font-size: 0.6875rem;
  color: var(--muted);
}

.vb-chatbox-text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--foreground);
  word-break: break-word;
}

.vb-chatbox-line--empty {
  align-self: center;
  margin: auto 0;
  color: var(--muted);
  font-style: italic;
  font-size: 0.875rem;
}

.vb-chatbox-line--system {
  align-self: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.vb-chatbox-image-link {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: underline;
}

.vb-chatbox-delete {
  margin-left: 0.35rem;
  border: none;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
  color: rgba(252, 165, 165, 0.65);
  cursor: pointer;
}

.vb-chatbox-delete:hover {
  color: #fca5a5;
}

.vb-forum-chatbox-form {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.18);
}

.vb-forum-chatbox-error {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: #fca5a5;
}

.vb-forum-chatbox-error:empty {
  display: none;
}

.vb-forum-chatbox-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.vb-forum-chatbox-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.875rem;
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.28);
}

.vb-forum-chatbox-input:focus {
  outline: none;
  border-color: rgba(255, 46, 138, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 46, 138, 0.12);
}

.vb-forum-chatbox-input-row .vb-forum-btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Breadcrumb */
.vb-forum-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.8125rem;
}

.vb-forum-crumb {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
}

.vb-forum-crumb--link {
  cursor: pointer;
}

.vb-forum-crumb--link:hover {
  text-decoration: underline;
}

.vb-forum-crumb--active {
  color: var(--foreground);
  font-weight: 600;
}

.vb-forum-crumb-sep {
  color: var(--muted);
  opacity: 0.6;
}

/* Board & topic lists */
.vb-forum-board-list,
.vb-forum-topic-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vb-forum-board-card,
.vb-forum-topic-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  background: rgba(10, 6, 20, 0.55);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.vb-forum-board-card:hover,
.vb-forum-topic-card:hover {
  border-color: rgba(255, 46, 138, 0.28);
  background: rgba(255, 46, 138, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.vb-forum-topic-card.forum-open-topic {
  cursor: pointer;
}

.vb-forum-topic-card.forum-open-topic:focus-visible {
  outline: 2px solid rgba(255, 46, 138, 0.45);
  outline-offset: 2px;
}

.vb-forum-topic-card--sticky {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(10, 6, 20, 0.55));
}

.vb-forum-board-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.vb-forum-board-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
  border: 1px solid rgba(255, 46, 138, 0.22);
}

.vb-forum-board-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}

.vb-forum-board-main:hover .vb-forum-board-name {
  color: var(--accent);
}

.vb-forum-board-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.vb-forum-board-meta,
.vb-forum-topic-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  min-width: 8.5rem;
  text-align: right;
}

.vb-forum-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vb-forum-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vb-forum-badge--sticky {
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.vb-forum-badge--locked {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.vb-forum-topic-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.vb-forum-topic-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--foreground);
}

.vb-forum-topic-card:hover .vb-forum-topic-title {
  color: var(--accent);
}

.vb-forum-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 0.875rem;
}

.vb-forum-error {
  color: #fca5a5;
}

.vb-forum-muted {
  color: var(--muted);
  font-size: 0.8125rem;
}

.vb-forum-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
}

.vb-forum-link:hover {
  text-decoration: underline;
}

.vb-forum-last-topic {
  font-size: 0.8125rem;
}

.vb-forum-last-meta {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.vb-forum-topic-byline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.45rem;
}

.vb-forum-topic-byline-copy,
.vb-forum-topic-last-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.vb-forum-topic-byline-label,
.vb-forum-topic-last-name {
  font-size: 0.8125rem;
  color: var(--foreground);
}

.vb-forum-topic-byline-time,
.vb-forum-topic-last-time {
  font-size: 0.75rem;
  color: var(--muted);
}

.vb-forum-topic-avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0;
  border: 1px solid rgba(255, 46, 138, 0.22);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.vb-forum-topic-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-forum-topic-avatar .vb-forum-user-initials {
  font-size: 0.75rem;
}

.vb-forum-topic-last {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

.vb-forum-topic-last-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.vb-forum-topic-no-replies {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.vb-forum-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.5rem 0 0.85rem;
}

.vb-forum-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.vb-forum-section-desc {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.vb-forum-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 46, 138, 0.35);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--foreground);
  background: linear-gradient(180deg, rgba(255, 46, 138, 0.18) 0%, rgba(255, 46, 138, 0.08) 100%);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.vb-forum-btn:hover {
  border-color: rgba(255, 46, 138, 0.55);
  transform: translateY(-1px);
}

.vb-forum-btn--ghost {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.vb-forum-compose {
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 46, 138, 0.18);
  border-radius: 0.875rem;
  background: rgba(10, 6, 20, 0.55);
  overflow: hidden;
}

.vb-forum-compose-head {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 46, 138, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.vb-forum-field {
  display: block;
  padding: 0.85rem 1rem 0;
}

.vb-forum-field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.vb-forum-field input,
.vb-forum-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.28);
}

.vb-forum-field input:focus,
.vb-forum-field textarea:focus {
  outline: none;
  border-color: rgba(255, 46, 138, 0.4);
}

.vb-forum-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1rem 1rem;
}

.vb-forum-footer {
  display: flex;
  justify-content: center;
  padding: 0.85rem 0;
}

/* Thread posts */
#forum-thread-posts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vb-forum-post-card {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  overflow: hidden;
  background: rgba(10, 6, 20, 0.55);
}

.vb-forum-post-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  text-align: center;
}

.vb-forum-user-avatar {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.55rem;
  border: 2px solid rgba(255, 46, 138, 0.25);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.vb-forum-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vb-forum-user-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted);
}

.vb-forum-user-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  max-width: 100%;
}

.vb-forum-user-name {
  font-weight: 700;
  font-size: 0.875rem;
  word-break: break-word;
}

.vb-forum-user-callsign {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.vb-forum-user-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--muted);
}

.vb-forum-post-head {
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vb-forum-post-date {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vb-forum-post-body {
  padding: 1rem 1.15rem;
}

.vb-forum-post-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  word-break: break-word;
}

.vb-forum-compose .wysiwyg-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.vb-forum-compose .wysiwyg-toolbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.vb-forum-compose .wysiwyg-body {
  min-height: 8.5rem;
  padding: 0.75rem 1rem;
  border: none;
  background: rgba(0, 0, 0, 0.22);
}

.vb-forum-compose .wysiwyg-btn {
  font-size: 0.75rem;
}

.vb-forum-post-content.prose-rich img,
.vb-forum-post-content.prose-rich .wysiwyg-img {
  border-radius: 0.65rem;
  margin: 0.75rem 0;
}

.vb-forum-modbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.vb-forum-modbtn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.vb-forum-modbtn:hover {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.35);
}

.vb-forum-modbtn--danger:hover {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

.vb-forum-locked-note {
  margin-bottom: 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 0.65rem;
  background: rgba(245, 158, 11, 0.08);
  font-size: 0.875rem;
  color: rgb(251, 191, 36);
}

@media (max-width: 768px) {
  .vb-forum-board-card,
  .vb-forum-topic-card {
    grid-template-columns: 1fr;
  }

  .vb-forum-board-meta,
  .vb-forum-topic-stats {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
  }

  .vb-forum-topic-last {
    justify-content: flex-start;
  }

  .vb-forum-post-card {
    grid-template-columns: 1fr;
  }

  .vb-forum-post-user {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
  }

  .vb-forum-user-avatar {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0;
  }

  .vb-forum-user-stat {
    display: none;
  }

  .vb-forum-post-head {
    display: block;
  }
}
/* ── Community display gate ── */
.community-gate {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: auto;
}

.community-gate.hidden {
  display: none;
}

.community-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.community-gate-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  padding: 1.25rem 1.35rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(145deg, rgba(19, 10, 30, 0.98) 0%, rgba(10, 6, 20, 0.96) 100%);
}

.community-gate-title {
  margin: 0.35rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.community-gate-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
}

.community-gate-callsign {
  margin: 0.85rem 0 0;
  font-size: 0.875rem;
}

.community-gate-callsign strong {
  font-family: var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.08em;
}

.community-gate-field {
  display: block;
  margin-top: 1rem;
}

.community-gate-field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.community-gate-hint {
  margin: 0.35rem 0 0;
  font-size: 0.6875rem;
  color: var(--muted);
}

.community-gate-error {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #fca5a5;
}

.community-gate-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.community-gate-actions .btn-secondary,
.community-gate-actions .btn-neon {
  flex: 1;
}

body.community-gate-open .site-main-inner {
  pointer-events: none;
  user-select: none;
}

.home-location-block {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(3, 0, 8, 0.35);
}

.home-location-block.is-editing {
  border-color: rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.04);
}

.home-location-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.625rem;
}

.home-location-coords {
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--foreground);
}

.home-location-coords.is-empty {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
}

.home-location-toggle {
  flex-shrink: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.home-location-toggle:hover {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.08);
}

.home-location-block.is-editing .home-location-toggle {
  color: var(--accent);
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.12);
}

.home-location-map {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}

.home-location-hint {
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.right-4 { right: 1rem; }
.top-4 { top: 1rem; }
.cursor-pointer { cursor: pointer; }
.break-words { overflow-wrap: break-word; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-border { border-color: var(--border); }
.border-red-500\/30 { border-color: rgba(239, 68, 68, 0.3); }
.border-red-500\/40 { border-color: rgba(239, 68, 68, 0.4); }
.border-amber-500\/40 { border-color: rgba(245, 158, 11, 0.4); }
.bg-surface-elevated { background: var(--surface-elevated); }
.bg-accent\/10 { background: rgba(255, 46, 138, 0.1); }
.bg-accent\/15 { background: rgba(255, 46, 138, 0.15); }
.bg-accent\/20 { background: rgba(255, 46, 138, 0.2); }
.bg-amber-500\/10 { background: rgba(245, 158, 11, 0.1); }
.bg-red-500\/10 { background: rgba(239, 68, 68, 0.1); }
.bg-surface\/80 { background: rgba(10, 6, 20, 0.8); }
.bg-background { background: var(--background); }
.bg-background\/40 { background: rgba(3, 0, 8, 0.4); }
.bg-background\/60 { background: rgba(3, 0, 8, 0.6); }
.ring-1 { box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3); }
.ring-accent\/30 { box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3); }
.ring-accent\/40 { box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.4); }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:border-accent\/30:hover { border-color: rgba(255, 46, 138, 0.3); }
.hover\:border-accent\/50:hover { border-color: rgba(255, 46, 138, 0.5); }
.hover\:bg-red-500\/10:hover { background: rgba(239, 68, 68, 0.1); }
.hover\:bg-accent\/25:hover { background: rgba(255, 46, 138, 0.25); }
.hover\:glow-border:hover { box-shadow: 0 0 28px var(--accent-glow); }
.hover\:underline:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:max-w-\[75\%\] { max-width: 75%; }
  .sm\:h-9 { height: 2.25rem; }
  .sm\:w-9 { width: 2.25rem; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Tabs ── */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab-btn,
.subtab-btn {
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-transform: capitalize;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.tab-btn:hover,
.subtab-btn:hover { color: var(--foreground); }

.tab-btn.active,
.subtab-btn.active {
  background: rgba(255, 46, 138, 0.15);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3);
}

.subtab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-order-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-order-day-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.35);
}

.admin-order-job-badge {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(167, 139, 250, 0.35);
}

.admin-jobs-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 36rem;
}

.admin-jobs-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-jobs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

.admin-jobs-image-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-job-image-preview {
  width: 5rem;
  height: 5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-job-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-jobs-location-details summary {
  cursor: pointer;
}

.admin-order-lookup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.admin-order-lookup .input-field {
  max-width: 12rem;
}

.admin-order-lookup--search .input-field {
  flex: 1;
  min-width: 12rem;
  max-width: none;
}

.admin-order-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.admin-order-dialog {
  border: none;
  border-radius: 1rem;
  padding: 0;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  background: var(--card, #1a1a2e);
  color: var(--foreground, #fff);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.admin-order-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.admin-order-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
}

.admin-order-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-order-dialog-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.15rem;
}

.admin-order-dialog-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.admin-order-dialog-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.admin-order-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
}

.admin-order-field {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-order-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.admin-order-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.admin-order-dialog-actions {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Admin grouped nav ── */
.admin-nav {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
  .admin-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .admin-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.admin-nav-group {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  background: rgba(0, 0, 0, 0.16);
}

.admin-nav-label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-nav-tabs .tab-btn {
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  text-transform: none;
}

/* ── Admin backups ── */
.admin-backups {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-backups-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.admin-backups-create {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
  min-width: min(100%, 18rem);
}

.admin-backup-name-field {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.admin-backup-status {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

.admin-backup-status--info {
  border: 1px solid rgba(167, 139, 250, 0.25);
  background: rgba(167, 139, 250, 0.08);
  color: rgb(196, 181, 253);
}

.admin-backup-status--success {
  border: 1px solid rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.08);
  color: rgb(134, 239, 172);
}

.admin-backup-status--error {
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.08);
  color: rgb(252, 165, 165);
}

.admin-backup-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-backup-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-backup-kind {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
  margin-bottom: 1rem;
}

/* ── Buttons ── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-secondary:hover {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.3);
}

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.3);
  cursor: pointer;
  transition: background 0.2s;
}

.btn-accent:hover { background: rgba(255, 46, 138, 0.25); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-accent.w-auto { width: auto; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: #f87171;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover { background: rgba(239, 68, 68, 0.1); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-photo {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
}

.btn-photo:hover { color: var(--foreground); }

.btn-link-muted {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
}

.btn-link-muted:hover { color: var(--foreground); }
.btn-link-muted:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Order chat ── */
.order-chat-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.order-chat-heading-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.order-chat-heading-avatar {
  height: 3rem;
  width: 3rem;
}

.order-chat-heading-text {
  min-width: 0;
}

.conversation-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.conversation-avatar {
  height: 3rem;
  width: 3rem;
}

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

.conversation-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.conversation-preview {
  margin: 0.25rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-chat-back {
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.order-chat-heading {
  min-width: 0;
  flex: 1;
}

.order-chat-totals {
  margin-bottom: 1rem;
  border-radius: 0.875rem;
  padding: 1rem 1.125rem;
}

.order-chat-totals-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.order-chat-totals-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.order-chat-add-receipt-btn {
  border-radius: 9999px;
  padding: 0.35rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.order-chat-totals-badge {
  border-radius: 9999px;
  padding: 0.2rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-dim);
  background: rgba(255, 46, 138, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.2);
}

.order-chat-totals-rows {
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.order-chat-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--muted);
}

.order-chat-totals-row--receipt {
  color: var(--foreground);
}

.order-chat-totals-row--subtotal {
  padding-top: 0.125rem;
  font-weight: 500;
  color: var(--foreground);
}

.order-chat-receipt-row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.order-chat-receipt-thumb-link {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.order-chat-receipt-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  object-fit: cover;
}

.order-chat-receipt-row-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.order-receipt-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}

.order-receipt-delete:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

.order-receipt-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.order-chat-totals-row--total {
  margin-top: 0.25rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border);
  font-weight: 600;
  color: var(--foreground);
}

.order-chat-totals-row--total span:last-child {
  color: var(--accent);
  font-size: 1rem;
}

.order-chat-totals--updated {
  animation: order-arrive-glow 1.1s ease-out 2;
}

.order-receipt-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.order-receipt-modal.hidden {
  display: none;
}

.order-receipt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.order-receipt-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  border-radius: 0.875rem;
  padding: 1.125rem 1.25rem;
}

.order-receipt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.order-receipt-modal-close {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
}

.order-receipt-modal-hint {
  margin: 0 0 1rem;
}

.order-receipt-modal-form {
  display: grid;
  gap: 0.875rem;
}

.order-receipt-modal-field {
  display: grid;
  gap: 0.375rem;
}

.order-receipt-modal-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-receipt-file-name {
  display: block;
  margin-top: 0.375rem;
}

.order-receipt-preview {
  margin-top: 0.5rem;
}

.order-receipt-preview img {
  width: 100%;
  max-height: 10rem;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  object-fit: cover;
}

.order-receipt-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* ── Chat ── */
.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.75rem;
}

.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem;
}

@media (min-width: 640px) { .chat-messages { padding: 1rem; } }
.chat-messages > * + * { margin-top: 0.75rem; }

.chat-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 0.75rem;
}

.chat-composer-row { display: flex; gap: 0.5rem; align-items: center; }

.chat-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

@media (min-width: 640px) { .chat-row { gap: 0.75rem; } }
.chat-row.mine { flex-direction: row-reverse; }

.chat-avatar {
  position: relative;
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--surface-elevated);
}

@media (min-width: 640px) {
  .chat-avatar { height: 2.25rem; width: 2.25rem; }
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-avatar-fallback {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.chat-bubble {
  max-width: 88%;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

@media (min-width: 640px) { .chat-bubble { max-width: 80%; } }

.chat-bubble-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.chat-delete-btn {
  flex-shrink: 0;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  color: #f87171;
  background: transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}

.chat-delete-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
}
.chat-bubble.mine {
  background: rgba(255, 46, 138, 0.15);
  color: var(--foreground);
}

.chat-bubble.theirs { background: var(--surface-elevated); }

.chat-bubble-label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.chat-bubble-header .chat-bubble-label { margin-bottom: 0; }

.chat-bubble img {
  margin-top: 0.5rem;
  max-height: 13rem;
  width: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

.chat-time {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.625rem;
  color: rgba(154, 143, 173, 0.8);
  font-variant-numeric: tabular-nums;
}

.chat-system { padding: 0.25rem 0; text-align: center; }

.chat-system-pill {
  display: inline-block;
  border-radius: 9999px;
  background: var(--surface-elevated);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.chat-system .chat-time { margin-top: 0.25rem; color: rgba(154, 143, 173, 0.7); }

/* ── Courier panel ── */
.courier-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .courier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.courier-available-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background:
    linear-gradient(165deg, rgba(124, 58, 237, 0.1) 0%, rgba(3, 0, 8, 0.72) 42%, rgba(3, 0, 8, 0.92) 100%);
  border: 1px solid rgba(255, 46, 138, 0.2);
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.courier-available-card:hover {
  border-color: rgba(255, 46, 138, 0.38);
  box-shadow:
    0 14px 40px rgba(255, 46, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.courier-available-card-accent {
  height: 3px;
  background: linear-gradient(90deg, #6d28d9 0%, #ff2e8a 50%, #fbbf24 100%);
  background-size: 200% 100%;
  animation: courier-xp-shimmer 5s ease-in-out infinite;
}

.courier-available-card--new .courier-available-card-accent {
  animation: courier-card-accent-pulse 1.8s ease-in-out infinite;
}

@keyframes courier-card-accent-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.85; filter: brightness(1.25); }
}

.courier-available-route-map {
  position: relative;
  height: 7rem;
  margin-bottom: 0.75rem;
  border-radius: 0.7rem;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 46, 138, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.25);
  background: #1a1028;
}

.courier-available-route-map::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 2.5rem;
  background: linear-gradient(180deg, transparent, rgba(3, 0, 8, 0.72));
  pointer-events: none;
}

.courier-available-card-map-host {
  position: absolute;
  inset: 0;
}

.courier-available-card-map-host .leaflet-container {
  width: 100%;
  height: 100%;
  background: #1a1028;
  pointer-events: auto;
  touch-action: none;
}

.courier-available-card-map-host .leaflet-control-zoom {
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.courier-available-card-map-host .leaflet-control-zoom a {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.875rem;
  color: var(--foreground);
  background: rgba(3, 0, 8, 0.82);
  border-color: rgba(255, 46, 138, 0.2);
}

.courier-available-card-map-host .leaflet-marker-icon,
.courier-available-card-map-host .leaflet-marker-shadow {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.courier-available-route-legend {
  position: absolute;
  left: 0.5rem;
  bottom: 0.375rem;
  z-index: 2;
  display: flex;
  gap: 0.375rem;
  pointer-events: none;
}

.courier-route-legend-item {
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(3, 0, 8, 0.72);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.courier-route-legend-item--pickup {
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
}

.courier-route-legend-item--dropoff {
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
}

.courier-route-marker-wrap {
  background: transparent;
  border: none;
}

.courier-route-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}

.courier-route-pin--pickup {
  background: #22c55e;
}

.courier-route-pin--dropoff {
  background: var(--accent);
}

.courier-available-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem 1rem;
}

.courier-available-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.courier-available-header-main {
  min-width: 0;
  flex: 1;
}

.courier-available-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.courier-available-order-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.1);
  border: 1px solid rgba(255, 46, 138, 0.24);
}

.courier-available-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: rgba(3, 0, 8, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.courier-available-timer::before {
  content: "⏱";
  font-size: 0.7em;
  line-height: 1;
  opacity: 0.85;
}

.courier-available-customer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.courier-available-new {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #ff2e8a, #7c3aed);
  box-shadow: 0 2px 10px rgba(255, 46, 138, 0.4);
}

.courier-available-earn {
  flex-shrink: 0;
  text-align: right;
  padding: 0.5rem 0.65rem;
  border-radius: 0.7rem;
  background:
    linear-gradient(145deg, rgba(34, 197, 94, 0.16) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 1px solid rgba(34, 197, 94, 0.35);
  box-shadow:
    0 0 24px rgba(34, 197, 94, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.courier-available-earn-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.2rem;
  margin: 0;
  line-height: 1;
}

.courier-available-earn-amount {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ecfdf5 0%, #86efac 42%, #22c55e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.45));
}

.courier-available-earn-currency {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #4ade80;
  opacity: 0.95;
}

.courier-available-meta {
  margin-bottom: 0.75rem;
}

.courier-available-location-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.courier-available-location {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  letter-spacing: 0.01em;
}

.courier-delivery-timing {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

.courier-delivery-timing-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
}

.courier-delivery-timing-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courier-delivery-timing-badge--now {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}

.courier-delivery-timing-badge--flexible {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.courier-delivery-timing-badge--scheduled {
  color: #fcd34d;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
}

.courier-custom-job-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.32);
}

.courier-custom-job-image-wrap {
  margin-top: 0.65rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.courier-custom-job-image {
  display: block;
  width: 100%;
  max-height: 10rem;
  object-fit: cover;
}

.courier-custom-job-panel {
  margin-bottom: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background: rgba(139, 92, 246, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.courier-available-card--custom-job .courier-available-card-accent {
  background: linear-gradient(90deg, #5b21b6 0%, #8b5cf6 50%, #c4b5fd 100%);
}

.courier-custom-job-hero {
  position: relative;
  height: 9rem;
  background: #1a1028;
}

.courier-custom-job-hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.courier-custom-job-hero-placeholder {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.courier-custom-job-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.courier-custom-job-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
}

.courier-custom-job-detail-label {
  margin: 0 0 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-custom-job-detail-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--foreground);
  white-space: pre-wrap;
}

.courier-available-menu-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.28);
}

.courier-order-indicators {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.courier-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.courier-category-badge--shop {
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}

.courier-category-badge--temu {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.14);
  box-shadow: inset 0 0 0 1px rgba(251, 146, 60, 0.38);
}

.courier-category-badge--food {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.32);
}

.courier-category-badge--default {
  color: var(--accent);
  background: rgba(255, 46, 138, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.28);
}

.courier-shopping-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}

.courier-shopping-callout {
  margin: 0.35rem 0 0.5rem;
  padding: 0.4rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.courier-accepted-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.courier-accepted-head-main {
  min-width: 0;
  flex: 1;
}

.courier-accepted-customer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
}

.courier-accepted-messages-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 46, 138, 0.28);
  background: rgba(255, 46, 138, 0.08);
  color: var(--accent);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.courier-accepted-messages-btn:hover {
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.14);
  color: #fff;
}

.courier-accepted-messages-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.95);
  background: var(--accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.courier-accepted-location-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.courier-available-menu-budget {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.6rem;
  background: rgba(255, 46, 138, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.16);
}

.courier-available-menu-budget-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.courier-available-menu-budget-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-available-menu-budget-amount {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent);
}

.courier-accepted-menu {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: rgba(255, 46, 138, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.18);
}

.courier-accepted-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.courier-accepted-menu-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.courier-accepted-menu-item-main {
  flex: 1;
  min-width: 0;
}

.courier-accepted-menu-item-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

.courier-accepted-menu-item + .courier-accepted-menu-item {
  border-top: 1px solid rgba(255, 46, 138, 0.12);
}

.courier-accepted-menu-item-name {
  min-width: 0;
}

.courier-accepted-menu-item-price {
  flex-shrink: 0;
  color: var(--foreground);
  opacity: 0.9;
}

.courier-accepted-menu-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(255, 46, 138, 0.22);
}

.courier-accepted-menu-total-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-accepted-menu-total-amount {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.courier-accepted-location {
  margin: 0.375rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.courier-accepted-collect {
  margin: 0.75rem 0 0.5rem;
  padding: 0.875rem 0.5rem;
  text-align: center;
}

.courier-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.75rem 0 0.5rem;
}

.courier-money-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 5rem;
  padding: 0.75rem 0.5rem;
  border-radius: 0.75rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.courier-money-box-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}

.courier-money-box-value {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--foreground);
}

.courier-money-box-value--alert {
  color: #fbbf24;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}

.courier-money-box--collect {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(59, 130, 246, 0.08);
}

.courier-money-box--collect .courier-money-box-value {
  color: #93c5fd;
}

.courier-money-box--change {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.06);
}

.courier-accepted-head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.courier-accepted-earn-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: rgba(134, 239, 172, 0.9);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.22);
}

.courier-accepted-earn-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.5625rem;
  color: rgba(134, 239, 172, 0.75);
}

.courier-accepted-earn-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
}

.courier-accepted-collect-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(134, 239, 172, 0.85);
}

.courier-accepted-collect-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: #4ade80;
  text-shadow: 0 0 28px rgba(74, 222, 128, 0.45);
}

.courier-accepted-collect-sub {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.courier-customer-cash--combined .courier-customer-cash-main {
  font-size: 1.25rem;
}

.courier-customer-cash-breakdown {
  margin: 0.25rem 0 0;
  font-size: 0.625rem;
  color: rgba(154, 143, 173, 0.85);
}

.courier-customer-cash {
  margin: 0.45rem 0 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.06);
  text-align: center;
}

.courier-customer-cash-section + .courier-customer-cash-section {
  margin-top: 0;
}

.courier-customer-cash-divider {
  height: 1px;
  margin: 0.45rem 0;
  background: rgba(255, 255, 255, 0.08);
}

.courier-customer-cash-main {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fbbf24;
}

.courier-customer-cash-main--shop {
  font-size: 1rem;
  color: #86efac;
}

.courier-customer-cash-main--short {
  color: #fca5a5;
}

.courier-customer-cash-label {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(154, 143, 173, 0.9);
}

.courier-customer-cash-sub {
  margin: 0.2rem 0 0;
  font-size: 0.6875rem;
  color: var(--muted);
}

.courier-customer-cash-section--shop .courier-customer-cash-sub {
  margin-bottom: 0;
}

.courier-accepted-sections {
  margin: 0.5rem 0 0.75rem;
}

.courier-accepted-section-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.courier-accepted-section-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.625rem;
  background: rgba(15, 23, 42, 0.45);
  color: rgba(226, 232, 240, 0.92);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.courier-accepted-section-icon:hover {
  border-color: rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.65);
  color: #f8fafc;
}

.courier-accepted-section-icon.is-active {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
}

.courier-accepted-section-icon--shopCash.is-active {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

.courier-accepted-section-icon-dot {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.9);
}

.courier-accepted-section-icon--shopCash.has-data .courier-accepted-section-icon-dot {
  background: #fbbf24;
}

.courier-accepted-section-icon--shopping.is-active {
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.1);
  color: var(--accent);
}

.courier-shopping-list-hint {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

.courier-shopping-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.courier-shopping-item {
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.courier-shopping-item.is-done {
  opacity: 0.75;
  border-color: rgba(255, 46, 138, 0.2);
  background: rgba(255, 46, 138, 0.05);
}

.courier-shopping-item-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
}

.courier-shopping-item-label input {
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.courier-shopping-item-text {
  font-size: 0.8125rem;
  line-height: 1.35;
}

.courier-shopping-item.is-done .courier-shopping-item-text {
  text-decoration: line-through;
  color: var(--muted);
}

.courier-shopping-list-status {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  color: var(--muted);
}

.order-shopping-panel {
  margin-top: 0.5rem;
}

.order-shopping-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.order-shopping-toggle:hover {
  border-color: rgba(255, 46, 138, 0.22);
  background: rgba(255, 46, 138, 0.04);
}

.order-shopping-toggle.has-items,
.order-shopping-toggle[aria-expanded="true"] {
  border-color: rgba(255, 46, 138, 0.24);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 138, 0.08), transparent 55%),
    linear-gradient(165deg, rgba(19, 10, 30, 0.55) 0%, rgba(8, 4, 16, 0.35) 100%);
}

.order-shopping-toggle-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.2);
  background: rgba(255, 46, 138, 0.1);
  color: var(--accent);
}

.order-shopping-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.order-shopping-toggle-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.order-shopping-toggle-meta {
  font-size: 0.8125rem;
  color: var(--muted);
}

.order-shopping-toggle.has-items .order-shopping-toggle-meta {
  color: var(--foreground);
}

.order-shopping-toggle-chevron {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  margin-right: 0.15rem;
  transition: transform 0.15s;
}

.order-shopping-toggle[aria-expanded="true"] .order-shopping-toggle-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.order-shopping-body {
  margin-top: 0.45rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 46, 138, 0.14);
  background: rgba(255, 255, 255, 0.02);
}

.order-shopping-add-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: stretch;
}

.order-shopping-input {
  padding: 0.45rem 0.65rem !important;
  font-size: 0.8125rem !important;
  border-color: rgba(255, 46, 138, 0.18);
  background: rgba(3, 0, 8, 0.65);
}

.order-shopping-input:focus {
  border-color: rgba(255, 46, 138, 0.5);
  box-shadow: 0 0 0 2px rgba(255, 46, 138, 0.12);
}

.order-shopping-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.45rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s;
}

.order-shopping-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.order-shopping-btn--add {
  min-width: 4.25rem;
  color: var(--accent);
  border: 1px solid rgba(255, 46, 138, 0.45);
  background: var(--accent-soft);
  box-shadow: 0 0 12px rgba(255, 46, 138, 0.16), inset 0 0 10px rgba(255, 46, 138, 0.05);
}

.order-shopping-btn--add:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 46, 138, 0.65);
  background: rgba(255, 46, 138, 0.24);
  box-shadow: 0 0 18px rgba(255, 46, 138, 0.28), inset 0 0 12px rgba(255, 46, 138, 0.1);
}

.order-shopping-btn--save {
  width: 100%;
  margin-top: 0.45rem;
  color: var(--accent-dim);
  border: 1px solid rgba(255, 46, 138, 0.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 46, 138, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.02);
}

.order-shopping-btn--save:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.1);
  box-shadow: 0 0 14px rgba(255, 46, 138, 0.12);
}

.order-shopping-items {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.order-shopping-items.is-empty {
  display: none;
}

.order-shopping-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.2rem 0.25rem 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.2);
  background: rgba(255, 46, 138, 0.08);
  font-size: 0.75rem;
  line-height: 1.3;
}

.order-shopping-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-shopping-chip-remove {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.order-shopping-chip-remove:hover {
  color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
}

.order-shopping-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.order-shopping-saved-select {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  color: var(--muted);
}

.order-shopping-manage-link {
  flex-shrink: 0;
  font-size: 0.75rem;
}

.order-shopping-manage-panel {
  max-height: min(85vh, 720px);
  overflow: auto;
}

.order-shopping-manage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.order-shopping-manage-card {
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.order-shopping-manage-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.order-shopping-manage-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.order-shopping-manage-count {
  font-size: 0.6875rem;
  color: var(--muted);
}

.order-shopping-manage-preview {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.order-shopping-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.order-shopping-manage-new {
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.courier-accepted-section-panels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.courier-accepted-section-panel {
  animation: courier-section-in 0.18s ease-out;
}

.courier-accepted-section-panel--dispatch .courier-custom-job-panel {
  margin-bottom: 0;
}

@keyframes courier-section-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.courier-accepted-trip {
  margin-bottom: 0;
}

.courier-accepted-footer {
  margin: 0.75rem 0 0.5rem;
}

.courier-accepted-support-link {
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(154, 143, 173, 0.85);
  text-decoration: none;
  transition: color 0.15s;
}

.courier-accepted-support-link:hover {
  color: var(--muted);
  text-decoration: underline;
}

.courier-accepted-finish {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.courier-accepted-proof-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.courier-accepted-proof-row .btn-accent,
.courier-accepted-proof-row .btn-secondary {
  padding: 0.625rem 0.5rem;
  font-size: 0.8125rem;
}

.courier-accepted-proof-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.1);
  font-size: 0.75rem;
  color: #f87171;
}

.courier-accepted-proof-done {
  margin: 0;
  font-size: 0.8125rem;
  color: #4ade80;
}

.courier-accepted-rating-label {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.95);
}

.courier-accepted-notes {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.95);
}

.courier-accepted-contact {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

.courier-accepted-release-hint {
  margin: 0.375rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(148, 163, 184, 0.85);
}

.courier-shop-cash {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.05);
}

.courier-shop-cash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.courier-shop-cash-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
}

.courier-shop-cash-mode-badge--oop {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.28);
}

.courier-shop-cash-change-mode {
  padding: 0;
  border: none;
  background: none;
  color: rgba(148, 163, 184, 0.95);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.courier-shop-cash-change-mode:hover:not(:disabled) {
  color: #e2e8f0;
}

.courier-shop-cash-picker-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f8fafc;
}

.courier-shop-cash-picker-hint {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.95);
}

.courier-shop-cash-picker-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.courier-shop-cash-mode-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.625rem;
  background: rgba(15, 23, 42, 0.45);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.courier-shop-cash-mode-btn:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(15, 23, 42, 0.65);
}

.courier-shop-cash-mode-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.courier-shop-cash-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.courier-shop-cash-mode-label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.courier-shop-cash-mode-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
}

.courier-shop-cash-cash-row {
  margin-bottom: 0.75rem;
}

.courier-shop-cash-cash-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.courier-shop-cash-add-cash-btn {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px dashed rgba(251, 191, 36, 0.45);
  border-radius: 0.5rem;
  background: rgba(251, 191, 36, 0.06);
  color: #fbbf24;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.courier-shop-cash-add-cash-btn:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.65);
}

.courier-shop-cash-cash-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 0.5rem;
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  cursor: pointer;
  text-align: left;
}

.courier-shop-cash-cash-chip-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}

.courier-shop-cash-cash-chip-amount {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fde68a;
}

.courier-shop-cash-info-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.45);
  color: rgba(148, 163, 184, 0.95);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.courier-shop-cash-info-btn:hover,
.courier-shop-cash-info-btn.is-active {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
}

.courier-shop-cash-info-hint {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.08);
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(253, 230, 138, 0.95);
}

.courier-shop-cash-info-hint.hidden {
  display: none;
}

.courier-shop-cash-add-cash-btn:disabled,
.courier-shop-cash-cash-chip:disabled,
.courier-shop-cash-info-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.courier-shop-cash-field--full {
  grid-column: 1 / -1;
}

.courier-shop-cash-receipts {
  margin: 0.75rem 0;
}

.courier-shop-cash-receipts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.courier-shop-cash-receipts-empty {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.9);
}

.courier-shop-cash-oop-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.25rem;
  text-align: center;
}

.courier-shop-cash-oop-add-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.55rem;
  border: 1px dashed rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.courier-shop-cash-oop-add-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.65);
}

.courier-shop-cash-oop-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.courier-shop-cash-oop-hint {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(148, 163, 184, 0.85);
}

.courier-shop-cash-receipt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.courier-shop-cash-receipt-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.35);
}

.courier-shop-cash-receipt-thumb-link {
  flex-shrink: 0;
}

.courier-shop-cash-receipt-thumb {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  object-fit: cover;
}

.courier-shop-cash-receipt-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.courier-shop-cash-receipt-title {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courier-shop-cash-receipt-price {
  font-size: 0.75rem;
  color: #4ade80;
}

.courier-shop-cash-receipt-remove {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 0.375rem;
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.courier-shop-cash-receipt-remove:hover:not(:disabled) {
  background: rgba(248, 113, 113, 0.16);
}

.courier-shop-cash-spent {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #e2e8f0;
}

.courier-shop-cash-hint {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
}

.courier-shop-cash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}

.courier-shop-cash-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.courier-shop-cash-field--cost {
  grid-column: span 1;
}

.courier-shop-cash-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.courier-shop-cash-receipt-btn {
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.courier-shop-cash-receipt-btn:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.55);
}

.courier-shop-cash-receipt-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.courier-shop-cash-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}

.courier-shop-cash-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.55);
  color: #f8fafc;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.courier-shop-cash-input:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.15);
}

.courier-shop-cash-input:disabled {
  opacity: 0.65;
}

.courier-shop-cash-summary {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.courier-shop-cash-summary--compact {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.courier-shop-cash-compact-line {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

.courier-shop-cash-compact-hint {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  color: rgba(154, 143, 173, 0.85);
}

.courier-food-receipt-hint,
.courier-food-receipt-status {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.courier-food-receipt-hint {
  color: var(--muted);
}

.courier-food-receipt-status {
  color: var(--foreground);
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 46, 138, 0.2);
  background: rgba(255, 46, 138, 0.06);
}

.courier-shop-cash-summary--hero {
  align-items: center;
  text-align: center;
  gap: 0.15rem;
}

.courier-shop-cash-hero {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
}

.courier-shop-cash-hero--change {
  color: #4ade80;
}

.courier-shop-cash-hero--reimburse {
  color: #fbbf24;
}

.courier-shop-cash-hero-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}

.courier-shop-cash-hero-sub {
  margin: 0.15rem 0 0;
  font-size: 0.6875rem;
  color: rgba(148, 163, 184, 0.85);
}

.courier-shop-cash-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.courier-shop-cash-summary-label {
  font-size: 0.8125rem;
  color: rgba(148, 163, 184, 0.95);
}

.courier-shop-cash-change,
.courier-shop-cash-reimburse-amount {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.courier-shop-cash-change {
  color: #4ade80;
}

.courier-shop-cash-reimburse-amount {
  color: #fbbf24;
}

.courier-shop-cash-status {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
}

.courier-shop-cash-error {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #f87171;
}

.courier-shop-cash-reimburse.hidden {
  display: none;
}

.courier-available-orderline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.875rem;
}

.courier-available-dot {
  color: rgba(154, 143, 173, 0.65);
}

.courier-available-rating {
  font-size: 0.75rem;
  color: var(--accent-dim);
}

.courier-available-notes {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--muted);
  background: rgba(3, 0, 8, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.courier-available-trip {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.6rem;
  background: rgba(3, 0, 8, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.14);
}

.courier-available-dropoff,
.courier-available-pickup {
  margin: 0 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--foreground);
}

.courier-available-trip-tag {
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-trip-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.courier-trip-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 3.25rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.5rem 0.4rem;
  border-radius: 0.55rem;
}

.courier-trip-btn-label {
  line-height: 1.1;
}

.courier-trip-btn--pickup {
  color: #fbbf24;
}

.courier-trip-btn--pickup.btn-secondary {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.06);
}

.courier-trip-btn--pickup.btn-secondary:hover {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.1);
  color: #fde68a;
}

.courier-trip-btn--dropoff {
  color: #86efac;
}

.courier-trip-btn--dropoff.btn-secondary {
  border-color: rgba(74, 222, 128, 0.28);
  background: rgba(74, 222, 128, 0.06);
}

.courier-trip-btn--dropoff.btn-secondary:hover {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.1);
  color: #bbf7d0;
}

.courier-trip-btn--disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(3, 0, 8, 0.35);
  color: var(--muted);
  cursor: not-allowed;
}

.courier-trip-btn--disabled.courier-trip-btn--pickup {
  color: rgba(251, 191, 36, 0.45);
}

.courier-available-zone {
  margin: 0.125rem 0 0;
  font-size: 0.6875rem;
  color: var(--accent-dim);
}

.courier-available-service-bid {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
}

.order-service-bid {
  border: 1px solid rgba(255, 46, 138, 0.12);
  border-radius: 0.75rem;
  background: rgba(255, 46, 138, 0.03);
  overflow: hidden;
}

.order-service-bid-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.order-service-bid-toggle:hover {
  background: rgba(255, 46, 138, 0.06);
}

.order-service-bid-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.order-service-bid-toggle-hint {
  font-size: 0.6875rem;
  color: var(--muted);
  text-transform: none;
  font-weight: 400;
}

.order-service-bid-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.order-service-bid-toggle-summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

.order-service-bid-chevron {
  display: inline-block;
  font-size: 0.625rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.order-service-bid-toggle--open .order-service-bid-chevron {
  transform: rotate(180deg);
}

.order-service-bid-panel {
  padding: 0 0.875rem 0.75rem;
  border-top: 1px solid rgba(255, 46, 138, 0.1);
}

.order-service-bid-panel.hidden {
  display: none;
}

.order-service-bid-copy {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.order-service-bid-copy strong {
  font-weight: 600;
  color: var(--foreground);
}

.order-service-bid-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

.order-service-bid-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.courier-available-accept {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
  padding: 0.625rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 46, 138, 0.4);
  background: linear-gradient(
    180deg,
    rgba(255, 46, 138, 0.2) 0%,
    rgba(124, 58, 237, 0.1) 100%
  );
  color: #fce7f3;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 6px 20px rgba(255, 46, 138, 0.12);
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s,
    opacity 0.2s;
}

.courier-available-accept::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 48%,
    transparent 100%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.courier-available-accept:not(:disabled):hover {
  border-color: rgba(255, 46, 138, 0.62);
  background: linear-gradient(
    180deg,
    rgba(255, 46, 138, 0.3) 0%,
    rgba(124, 58, 237, 0.16) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 26px rgba(255, 46, 138, 0.2);
  transform: translateY(-1px);
}

.courier-available-accept:not(:disabled):hover::before {
  transform: translateX(120%);
}

.courier-available-accept:not(:disabled):active {
  transform: translateY(0) scale(0.985);
}

.courier-available-accept:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.courier-available-accept-label {
  position: relative;
  z-index: 1;
}

.courier-available-accept-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: #fce7f3;
  background: rgba(255, 255, 255, 0.1);
  transition: transform 0.2s, background 0.2s;
}

.courier-available-accept:not(:disabled):hover .courier-available-accept-arrow {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.16);
}

.courier-available-card .accept-btn,
#accepted-orders .release-btn,
#accepted-orders .proof-btn,
#accepted-orders .signature-btn,
#accepted-orders .complete-btn {
  touch-action: manipulation;
}

.courier-available-card--new .courier-available-earn {
  animation: courier-earn-pulse 2.4s ease-in-out infinite;
}

@keyframes courier-earn-pulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

.courier-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.courier-badge {
  border-radius: 9999px;
  background: rgba(3, 0, 8, 0.6);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font-variant-numeric: tabular-nums;
}

.courier-badge-new {
  background: rgba(255, 46, 138, 0.2);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.4);
}

.courier-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.courier-live-dot {
  position: relative;
  display: flex;
  height: 0.5rem;
  width: 0.5rem;
}

.courier-live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.4);
  animation: live-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.courier-live-dot::after {
  content: "";
  position: relative;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 46, 138, 0.7);
}

@keyframes live-ping {
  0% { transform: scale(1); opacity: 0.75; }
  75%, 100% { transform: scale(2); opacity: 0; }
}

.stat-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.14);
  background: rgba(3, 0, 8, 0.4);
  padding: 1rem;
}

.stat-card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stat-card-value {
  margin-top: 0.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-card-detail {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.platform-fee-pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stat-warn { color: var(--accent); }
.stat-danger { color: #f87171; }
.stat-credit { color: #86efac; }

.order-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.order-card-divider {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.rating-stars { display: flex; gap: 0.25rem; }

.rating-star {
  border-radius: 0.25rem;
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.rating-star.selected {
  border-color: var(--accent);
  color: var(--accent);
}

.alert-banner {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 46, 138, 0.3);
  background: rgba(255, 46, 138, 0.1);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--accent);
}

.alert-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.admin-notif-page {
  max-width: 42rem;
}

.admin-notif-prefs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-notif-prefs-title {
  margin-top: 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.admin-notif-prefs-desc {
  margin-top: 0.35rem;
  max-width: 34rem;
}

.admin-notif-prefs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.85rem;
}

@media (max-width: 640px) {
  .admin-notif-prefs-grid {
    grid-template-columns: 1fr;
  }
}

.admin-notif-pref {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.admin-notif-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-notif-row--unread {
  border: 1px solid rgba(255, 46, 138, 0.22);
}

.admin-notif-unread-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}

.admin-notif-list-footer {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.admin-alert-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}

.admin-alert-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(255, 46, 138, 0.28);
  cursor: pointer;
  animation: admin-alert-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-alert-toast.is-leaving {
  animation: admin-alert-out 0.22s ease forwards;
}

.admin-alert-toast-body {
  min-width: 0;
  flex: 1;
}

.admin-alert-toast-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-alert-toast-text {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.admin-alert-toast-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.admin-alert-toast-close:hover {
  color: var(--foreground);
}

@keyframes admin-alert-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes admin-alert-out {
  to {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.proof-input {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signature-dialog {
  border: none;
  border-radius: 1rem;
  padding: 1.25rem;
  max-width: calc(100vw - 2rem);
  width: 28rem;
}

.signature-dialog::backdrop {
  background: rgba(6, 12, 24, 0.55);
}

.signature-canvas {
  display: block;
  width: 100%;
  height: 10rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #fff;
  touch-action: none;
}

.signature-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ── Admin panels ── */
.admin-messages-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .admin-messages-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.admin-chat-wrap {
  min-height: 28rem;
}

@media (min-width: 1024px) {
  .admin-chat-wrap { min-height: calc(100vh - 12rem); }
}

.faq-item-card {
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.14);
  background: rgba(3, 0, 8, 0.4);
  padding: 1rem;
}

.forum-cat-icon-row {
  padding: 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.forum-cat-icon-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.forum-cat-icon-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.forum-cat-icon-preview {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  font-size: 1.25rem;
  line-height: 1;
  background: rgba(255, 46, 138, 0.12);
  border: 1px solid rgba(255, 46, 138, 0.22);
}

.forum-cat-icon {
  max-width: 8rem;
  text-align: center;
  font-size: 1.125rem;
}

.forum-cat-icon-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.forum-cat-icon-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.forum-cat-icon-preset:hover {
  border-color: rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.08);
}

.forum-cat-icon-preset.is-active {
  border-color: rgba(255, 46, 138, 0.5);
  background: rgba(255, 46, 138, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 46, 138, 0.12);
}

.faq-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-category {
  border-radius: 0.85rem;
  overflow: hidden;
}

.faq-category-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.faq-category-summary::-webkit-details-marker {
  display: none;
}

.faq-category-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.faq-category-chevron {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent-dim);
  border-bottom: 2px solid var(--accent-dim);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-category[open] .faq-category-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.faq-category-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(255, 46, 138, 0.12);
}

.faq-category[open] .faq-category-body {
  padding-top: 0.85rem;
}

.faq-entry {
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  padding: 0.85rem 0.95rem;
}

.faq-entry-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.faq-entry-answer {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
}

.faq-category-empty {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.admin-content-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-content-section {
  border-radius: 0.85rem;
  overflow: hidden;
}

.admin-content-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}

.admin-content-section-summary::-webkit-details-marker {
  display: none;
}

.admin-content-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.admin-content-section-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.admin-content-section-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.admin-content-section-chevron {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent-dim);
  border-bottom: 2px solid var(--accent-dim);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.admin-content-section[open] .admin-content-section-chevron {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

.admin-content-section-body {
  padding: 0 1.15rem 1.15rem;
  border-top: 1px solid rgba(255, 46, 138, 0.12);
}

.admin-content-section[open] .admin-content-section-body {
  padding-top: 0.85rem;
}

.admin-content-section-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

.admin-content-section .wysiwyg-editor {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.driver-fee-block {
  width: 100%;
  min-width: 220px;
  border-top: 1px solid rgba(255, 46, 138, 0.14);
  padding-top: 0.75rem;
}

@media (min-width: 640px) {
  .driver-fee-block {
    width: auto;
    border-top: none;
    border-left: 1px solid rgba(255, 46, 138, 0.14);
    padding-top: 0;
    padding-left: 1rem;
  }
}

.role-badge {
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.25);
  color: var(--accent);
  background: rgba(255, 46, 138, 0.1);
}

.role-badge--customer { color: #93c5fd; background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25); }
.role-badge--driver { color: var(--accent); }
.role-badge--admin { color: #fbbf24; background: rgba(245, 158, 11, 0.12); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25); }
.role-badge--manager { color: #86efac; background: rgba(34, 197, 94, 0.12); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25); }

.user-banned-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}

.user-ban-block {
  padding-top: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.users-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .users-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.user-card {
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.user-card:hover {
  border-color: rgba(255, 46, 138, 0.25);
}

.user-card--selected {
  border-color: rgba(255, 46, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 46, 138, 0.2), 0 0 20px rgba(255, 46, 138, 0.08);
}

.user-detail {
  min-height: 16rem;
}

.user-detail--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pending-applications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pending-applications-title {
  margin-top: 0.35rem;
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  font-weight: 600;
}

.pending-applications-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: rgb(251, 191, 36);
  font-size: 0.875rem;
  font-weight: 600;
}

.pending-applications-count--muted {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.pending-applications-list {
  display: grid;
  gap: 1rem;
}

.pending-app-card {
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.pending-app-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pending-app-badge {
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: rgb(251, 191, 36);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pending-app-docs {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.pending-app-doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.pending-app-actions {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pending-app-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.pending-app-reject {
  padding: 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.06);
}

.pending-applications-empty {
  text-align: left;
}

.driver-summary-row {
  align-items: flex-start;
}

@media (max-width: 899px) {
  .user-detail--empty { display: none; }
  .user-detail:not(.user-detail--empty) { margin-top: 0.5rem; }
}

.fee-payment-history {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 46, 138, 0.14);
}

.fee-payment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
}

.fee-payment-row {
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 46, 138, 0.12);
  background: rgba(3, 0, 8, 0.35);
  padding: 0.625rem 0.75rem;
}

.fee-payment-type {
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fee-payment-type--cash {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.fee-payment-type--card {
  color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 46, 138, 0.25);
}

.fee-payment-type--credit {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.text-lg { font-size: 1.125rem; }
.text-foreground { color: var(--foreground); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-20 { width: 5rem; }
.max-w-md { max-width: 28rem; }
@media (min-width: 1024px) {
  .lg\:min-h-\[calc\(100vh-12rem\)\] { min-height: calc(100vh - 12rem); }
}

.courier-register-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

.courier-register-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.7rem;
  text-align: center;
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.courier-register-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
}

.courier-register-step.is-active {
  color: var(--foreground);
  border-color: rgba(255, 46, 138, 0.35);
  background: rgba(255, 46, 138, 0.08);
}

.courier-register-step.is-active span,
.courier-register-step.is-done span {
  background: rgba(255, 46, 138, 0.2);
  color: var(--accent);
}

.courier-register-step.is-done {
  color: var(--foreground);
}

.courier-agreement-scroll {
  max-height: min(50vh, 24rem);
  overflow-y: auto;
  padding: 1.1rem 1.15rem;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 46, 138, 0.35) transparent;
}

.courier-agreement-panel {
  position: relative;
  overflow: hidden;
  animation: courier-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.courier-agreement-head {
  margin-bottom: 1.15rem;
}

.courier-agreement-title {
  margin-top: 0.35rem;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.courier-agreement-head-line {
  display: block;
  margin-top: 0.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(124, 58, 237, 0.6), transparent);
  transform-origin: left center;
  animation: courier-head-line-grow 0.8s ease-out 0.2s both;
}

.courier-agreement-frame {
  position: relative;
  border-radius: 0.65rem;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 46, 138, 0.45), rgba(124, 58, 237, 0.25), rgba(255, 46, 138, 0.15));
  box-shadow: 0 0 28px rgba(255, 46, 138, 0.08), inset 0 0 24px rgba(255, 46, 138, 0.04);
}

.courier-agreement-frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(0.65rem - 1px);
  background: rgba(3, 0, 8, 0.88);
  pointer-events: none;
  z-index: 0;
}

.courier-agreement-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.85;
  animation: courier-corner-pulse 2.8s ease-in-out infinite;
}

.courier-agreement-corner--tl { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.courier-agreement-corner--tr { top: 6px; right: 6px; border-width: 2px 2px 0 0; animation-delay: -0.7s; }
.courier-agreement-corner--bl { bottom: 6px; left: 6px; border-width: 0 0 2px 2px; animation-delay: -1.4s; }
.courier-agreement-corner--br { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; animation-delay: -2.1s; }

.courier-agreement-frame-scan {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  top: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 46, 138, 0.15), var(--accent), rgba(124, 58, 237, 0.8), transparent);
  box-shadow: 0 0 12px var(--accent-glow);
  opacity: 0.55;
  animation: courier-frame-scan 4.5s linear infinite;
}

.courier-agree-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.courier-agree-toggle:hover {
  border-color: rgba(255, 46, 138, 0.28);
  background: rgba(255, 46, 138, 0.04);
}

.courier-agree-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.courier-agree-toggle-box {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 46, 138, 0.45);
  background: rgba(3, 0, 8, 0.9);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 10px rgba(255, 46, 138, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.courier-agree-toggle-mark {
  width: 0.45rem;
  height: 0.75rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s;
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

.courier-agree-toggle-input:checked + .courier-agree-toggle-box {
  border-color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
  box-shadow: 0 0 14px rgba(255, 46, 138, 0.25), inset 0 0 12px rgba(255, 46, 138, 0.12);
}

.courier-agree-toggle-input:checked + .courier-agree-toggle-box .courier-agree-toggle-mark {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

.courier-agree-toggle-input:focus-visible + .courier-agree-toggle-box {
  outline: 2px solid rgba(255, 46, 138, 0.45);
  outline-offset: 2px;
}

.courier-agree-toggle:has(.courier-agree-toggle-input:checked) {
  border-color: rgba(255, 46, 138, 0.4);
  background: rgba(255, 46, 138, 0.06);
  box-shadow: 0 0 20px rgba(255, 46, 138, 0.1);
}

.courier-agree-toggle-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground);
}

.courier-agree-toggle-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.courier-agree-toggle.is-shake {
  animation: courier-agree-shake 0.45s ease;
}

.courier-agreement-error {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: #fca5a5;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.courier-agree-btn {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.45;
  transition: opacity 0.3s, transform 0.25s;
}

.courier-agree-btn.is-ready {
  cursor: pointer;
  opacity: 1;
}

.courier-agree-btn.is-ready:hover {
  transform: translateY(-1px);
}

.courier-agree-btn.is-ready:active {
  transform: translateY(0) scale(0.985);
}

.courier-agree-btn.is-launching .courier-agree-btn-inner {
  animation: courier-btn-launch 0.28s ease forwards;
}

.courier-agree-btn-glow,
.courier-agree-btn-scan,
.courier-agree-btn-inner {
  border-radius: 0.65rem;
}

.courier-agree-btn-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(255, 46, 138, 0.16) 0%, rgba(255, 46, 138, 0.08) 100%);
  border: 1px solid rgba(255, 46, 138, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.courier-agree-btn-glow {
  position: absolute;
  inset: -2px;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(255, 46, 138, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.courier-agree-btn.is-ready .courier-agree-btn-glow {
  opacity: 1;
  animation: courier-btn-glow-pulse 2.4s ease-in-out infinite;
}

.courier-agree-btn-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0.65rem;
  opacity: 0;
}

.courier-agree-btn.is-ready .courier-agree-btn-scan {
  opacity: 1;
}

.courier-agree-btn.is-ready .courier-agree-btn-scan::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: courier-btn-shimmer 2.8s ease-in-out infinite;
}

.courier-agree-btn.is-ready .courier-agree-btn-inner {
  box-shadow: 0 0 24px rgba(255, 46, 138, 0.22), inset 0 0 18px rgba(255, 46, 138, 0.08);
}

.courier-agree-btn.is-ready:hover .courier-agree-btn-inner {
  color: #fff;
  border-color: rgba(255, 92, 168, 0.75);
  box-shadow: 0 0 32px rgba(255, 46, 138, 0.38), inset 0 0 22px rgba(255, 46, 138, 0.14);
}

.courier-agree-btn-arrow {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 0.25s ease;
}

.courier-agree-btn.is-ready:hover .courier-agree-btn-arrow {
  transform: translateX(4px);
}

@keyframes courier-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes courier-head-line-grow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes courier-corner-pulse {
  0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 2px transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px var(--accent-glow)); }
}

@keyframes courier-frame-scan {
  0% { top: 4%; opacity: 0; }
  8% { opacity: 0.65; }
  92% { opacity: 0.65; }
  100% { top: calc(100% - 6px); opacity: 0; }
}

@keyframes courier-agree-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes courier-btn-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes courier-btn-shimmer {
  0% { left: -50%; }
  100% { left: 120%; }
}

@keyframes courier-btn-launch {
  to { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .courier-agreement-panel,
  .courier-agreement-head-line,
  .courier-agreement-corner,
  .courier-agreement-frame-scan,
  .courier-agree-btn.is-ready .courier-agree-btn-glow,
  .courier-agree-btn.is-ready .courier-agree-btn-scan::after {
    animation: none !important;
  }

  .courier-agree-toggle.is-shake {
    animation: none !important;
  }
}

.courier-register-pending {
  text-align: left;
}

.courier-register-rejected {
  text-align: left;
}

.courier-register-rejected-reason {
  text-align: left;
}

.courier-reapply-error:not(.hidden) {
  display: block;
}

.courier-details-panel {
  animation: courier-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.courier-details-head {
  margin-bottom: 1rem;
}

.courier-details-title {
  margin-top: 0.35rem;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.courier-details-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.courier-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.7rem;
}

.courier-details-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.courier-details-field--full {
  grid-column: 1 / -1;
}

.courier-details-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: stretch;
}

.courier-details-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.courier-whatsapp-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(37, 211, 102, 0.18);
  background: rgba(37, 211, 102, 0.04);
}

.courier-whatsapp-head {
  margin-bottom: 0.55rem;
}

.courier-whatsapp-desc {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(61, 220, 120, 0.85);
}

.courier-whatsapp-hint {
  margin-top: 0.45rem;
}

.courier-whatsapp-box .phone-field-group {
  margin-top: 0.15rem;
}

.courier-details-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.input-field--compact {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}

.courier-callsign-box {
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(124, 58, 237, 0.06);
}

.courier-callsign-head {
  margin-bottom: 0.55rem;
}

.courier-callsign-desc {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}

.courier-callsign-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.courier-callsign-input {
  width: 5.5rem;
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 1.05rem !important;
}

.courier-callsign-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.courier-callsign-status--idle {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.courier-callsign-status--typing {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
}

.courier-callsign-status--checking {
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  animation: courier-callsign-pulse 1s ease-in-out infinite;
}

.courier-callsign-status--available {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}

.courier-callsign-status--taken,
.courier-callsign-status--error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}

.courier-callsign-hint {
  margin: 0.45rem 0 0;
}

.courier-details-error {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: #fca5a5;
  font-family: var(--font-mono);
}

.courier-details-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1rem;
}

.courier-details-actions .btn-secondary,
.courier-details-actions .btn-neon {
  flex: 1;
}

@keyframes courier-callsign-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (max-width: 520px) {
  .courier-details-grid {
    grid-template-columns: 1fr;
  }

  .courier-details-split {
    grid-template-columns: 1fr;
  }

  .courier-callsign-row {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courier-details-panel {
    animation: none !important;
  }

  .courier-callsign-status--checking {
    animation: none !important;
  }
}

.courier-docs-panel {
  animation: courier-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.courier-docs-intro {
  margin: 0 0 1rem;
  line-height: 1.45;
}

.courier-docs-grid {
  display: grid;
  gap: 0.75rem;
}

.courier-doc-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px dashed rgba(255, 46, 138, 0.28);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.courier-doc-upload:hover {
  border-color: rgba(255, 46, 138, 0.45);
  background: rgba(255, 46, 138, 0.04);
}

.courier-doc-upload-hint {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.courier-doc-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.courier-doc-filename {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  word-break: break-all;
}

.courier-doc-filename.is-set {
  color: var(--accent-dim);
}

.admin-doc-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.admin-doc-viewer.hidden {
  display: none;
}

.admin-doc-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.admin-doc-viewer-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 56rem);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem 1.125rem;
}

.admin-doc-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.admin-doc-viewer-close {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}

.admin-doc-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-doc-viewer-frame {
  width: 100%;
  height: min(72vh, 760px);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: #0a0614;
}

.admin-doc-viewer-img {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 760px);
  width: auto;
  height: auto;
  border-radius: 0.625rem;
  border: 1px solid var(--border);
  object-fit: contain;
}

/* Courier settings */
.courier-settings {
  animation: courier-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.courier-settings-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.courier-settings-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.courier-settings-identity {
  min-width: 0;
}

.courier-settings-title {
  margin-top: 0.25rem;
  font-size: 1.75rem;
  font-weight: 600;
}

.courier-settings-name {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88);
}

.courier-settings-callsign {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: var(--accent);
}

.courier-settings-back {
  flex-shrink: 0;
}

.courier-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.courier-settings-panel {
  padding: 1.15rem 1.2rem;
  animation: courier-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.courier-settings-panel:nth-of-type(1) { animation-delay: 0s; }
.courier-settings-panel:nth-of-type(2) { animation-delay: 0.04s; }
.courier-settings-panel:nth-of-type(3) { animation-delay: 0.08s; }
.courier-settings-panel:nth-of-type(4) { animation-delay: 0.12s; }

.courier-settings-panel-head {
  margin-bottom: 0.85rem;
}

.courier-settings-panel-title {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.courier-settings-panel-desc {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.courier-settings-char-count {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}

.courier-settings-community-preview {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 46, 138, 0.18);
  background: rgba(3, 0, 8, 0.35);
}

.courier-settings-preview-avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(255, 46, 138, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.courier-settings-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.courier-settings-preview-avatar .profile-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  color: var(--muted);
}

.courier-settings-preview-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-settings-preview-name {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 600;
}

.courier-settings-preview-sub {
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.courier-settings-community-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.courier-settings-callsign-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.courier-settings-callsign-toggle-input {
  margin-top: 0.2rem;
  accent-color: var(--accent);
}

.courier-settings-callsign-toggle-ui {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.courier-settings-callsign-toggle-label {
  font-size: 0.875rem;
}

.courier-settings-callsign-toggle-sub {
  font-size: 0.75rem;
  color: var(--muted);
}

#community-name.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.courier-settings-password {
  border: none;
}

.courier-settings-password-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.courier-settings-password-summary::-webkit-details-marker {
  display: none;
}

.courier-settings-password-summary > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.courier-settings-password-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.courier-settings-password[open] .courier-settings-password-chevron {
  transform: rotate(-135deg) translateY(-2px);
}

.courier-settings-password-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.courier-settings-footer {
  position: sticky;
  bottom: 0.75rem;
  z-index: 2;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 46, 138, 0.2);
  background: rgba(8, 2, 16, 0.92);
  backdrop-filter: blur(10px);
}

.courier-settings-error:not(.hidden) {
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
  color: #f87171;
}

.courier-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.courier-settings-saved {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #86efac;
  animation: courier-panel-in 0.3s ease both;
}

.courier-settings-save {
  min-width: 10rem;
  border-radius: 0.65rem;
  padding: 0.65rem 1.25rem;
}

/* ---- Web push: enable-alerts FAB + toast ---- */
.pe-push-fab {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: stretch;
  gap: 1px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  background: #ec2c78;
}
.pe-push-fab-main {
  border: 0;
  background: #ec2c78;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
}
.pe-push-fab-main:disabled { opacity: 0.7; cursor: default; }
.pe-push-fab-x {
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.85rem;
  cursor: pointer;
}
.site-main-inner--courier-app {
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.site-main--minimal:has(.site-main-inner--courier-app) .site-footer {
  display: none;
}

.courier-panel-app {
  padding-bottom: 1rem;
}

.courier-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.courier-toolbar-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}

.courier-toolbar-photo-link {
  flex-shrink: 0;
  text-decoration: none;
  margin-top: 1.35rem;
}

.courier-toolbar-photo {
  width: 3rem;
  height: 3rem;
  box-shadow:
    0 0 0 2px rgba(255, 46, 138, 0.4),
    0 0 18px rgba(124, 58, 237, 0.25);
}

.courier-toolbar-photo-link:hover .courier-toolbar-photo {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 22px rgba(255, 46, 138, 0.35);
}

.courier-toolbar-main {
  min-width: 0;
  flex: 1;
}

.courier-toolbar-eyebrow {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.courier-xp-card {
  display: block;
  margin-top: 0.35rem;
  padding: 0.7rem 0.8rem 0.65rem;
  border-radius: 0.8rem;
  text-decoration: none;
  color: inherit;
  background:
    linear-gradient(145deg, rgba(124, 58, 237, 0.14) 0%, rgba(255, 46, 138, 0.08) 48%, rgba(3, 0, 8, 0.55) 100%);
  border: 1px solid rgba(255, 46, 138, 0.22);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.courier-xp-card:hover {
  border-color: rgba(255, 46, 138, 0.45);
  box-shadow:
    0 6px 28px rgba(255, 46, 138, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.courier-xp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.courier-callsign-display {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: #f5f0ff;
  text-shadow: 0 0 18px rgba(196, 181, 253, 0.45);
}

.courier-callsign-display::before {
  content: "//";
  margin-right: 0.2rem;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}

.courier-rank-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--accent);
  background: rgba(255, 46, 138, 0.14);
  border: 1px solid rgba(255, 46, 138, 0.32);
  box-shadow: 0 0 12px rgba(255, 46, 138, 0.15);
  white-space: nowrap;
}

.courier-rank-chip--override {
  color: rgb(251, 191, 36);
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.38);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

.courier-xp-track {
  position: relative;
  height: 0.55rem;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: rgba(3, 0, 8, 0.72);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.courier-xp-fill {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d28d9 0%, #ff2e8a 55%, #fbbf24 100%);
  background-size: 200% 100%;
  animation: courier-xp-shimmer 4s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 46, 138, 0.45);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.courier-xp-fill--max {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 45%, #fde68a 100%);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
}

.courier-xp-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: courier-xp-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

.courier-xp-label {
  margin: 0.4rem 0 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.3;
}

.courier-xp-label--max {
  color: rgb(251, 191, 36);
}

@keyframes courier-xp-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes courier-xp-sweep {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(200%); }
}

.courier-toolbar-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  margin-top: 1.35rem;
  flex-shrink: 0;
}

.courier-toolbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.courier-toolbar-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.courier-toolbar-link--active {
  border-color: rgba(255, 46, 138, 0.55);
  color: var(--accent);
  background: rgba(255, 46, 138, 0.12);
}

.courier-xp-card--subpage:hover {
  border-color: rgba(255, 46, 138, 0.45);
}

.courier-panel-section-desc {
  margin: -0.35rem 0 1rem;
}

.courier-forum-app .vb-forum-announce {
  margin-bottom: 1rem;
}

.courier-forum-app .vb-forum-chatbox {
  margin-bottom: 1rem;
}

.courier-panel-section {
  margin-bottom: 1.25rem;
}

.courier-section-header--compact {
  margin-bottom: 0.65rem;
}

.courier-stats-page #stats-section {
  margin-top: 0.25rem;
}

.pe-push-toast {
  position: fixed;
  left: 50%;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px);
  z-index: 1300;
  background: #0c2b4a;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0.7rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.pe-push-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- PEUI in-app modal dialogs ---- */
.pe-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 12, 24, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.pe-modal-overlay[hidden] { display: none; }
.pe-modal-overlay.is-open { opacity: 1; }
body.pe-modal-open { overflow: hidden; }

.pe-modal {
  width: 100%;
  max-width: 26rem;
  background: #fff;
  color: #0c2b4a;
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 1.4rem 1.4rem 1.15rem;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}
.pe-modal-overlay.is-open .pe-modal { transform: translateY(0) scale(1); }

.pe-modal-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}
.pe-modal-title[hidden] { display: none; }

.pe-modal-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #33465c;
  white-space: pre-wrap;
}
.pe-modal-message[hidden] { display: none; }

.pe-modal-input {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.65rem 0.8rem;
  font-size: 1rem;
  color: #0c2b4a;
  background: #f3f6fb;
  border: 1px solid #cfd9e6;
  border-radius: 0.6rem;
}
.pe-modal-input[hidden] { display: none; }
.pe-modal-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }

.pe-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.pe-modal-btn {
  border: 0;
  border-radius: 0.6rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.pe-modal-cancel { background: #e8edf4; color: #33465c; }
.pe-modal-cancel:hover { background: #dde4ee; }
.pe-modal-cancel[hidden] { display: none; }
.pe-modal-ok { background: #2563eb; color: #fff; }
.pe-modal-ok:hover { background: #1d4ed8; }
.pe-modal-btn--danger { background: #dc2626; }
.pe-modal-btn--danger:hover { background: #b91c1c; }