/* App shell displayed before React hydrates */
:root {
  --shell-bg: var(--color-surface-2, #f8fbfa);
  --shell-bg-top: color-mix(
    in srgb,
    var(--color-surface-1, #ffffff) 92%,
    var(--color-primary-50, #f1f9f8)
  );
  --shell-bg-bottom: color-mix(
    in srgb,
    var(--color-surface-3, #eef5f4) 88%,
    var(--color-primary-100, #dcefed)
  );
  --shell-surface: color-mix(in srgb, var(--color-surface-1, #ffffff) 84%, transparent);
  --shell-surface-strong: color-mix(in srgb, var(--color-surface-1, #ffffff) 94%, transparent);
  --shell-border: var(--color-border-primary, rgba(15, 46, 47, 0.12));
  --shell-border-highlight: color-mix(in srgb, var(--color-surface-1, #ffffff) 74%, transparent);
  --shell-card-highlight: color-mix(in srgb, var(--color-surface-1, #ffffff) 72%, transparent);
  --shell-text: var(--color-text-primary, #173033);
  --shell-muted: var(--color-text-secondary, #35565a);
  --shell-kicker: var(--color-primary-700, #2e6266);
  --shell-accent: var(--btn-primary-bg, var(--color-primary-600, #3f7f83));
  --shell-accent-soft: color-mix(in srgb, var(--shell-accent) 14%, transparent);
  --shell-accent-warm: color-mix(in srgb, var(--color-warning-500, #f59e0b) 12%, transparent);
  --shell-glow: color-mix(in srgb, var(--color-primary-500, #64afb3) 16%, transparent);
  --shell-logo-filter: drop-shadow(
    0 16px 28px color-mix(in srgb, var(--color-neutral-900, #0f172a) 10%, transparent)
  );
  --shell-mascot-filter: drop-shadow(
    0 18px 28px color-mix(in srgb, var(--color-neutral-900, #0f172a) 18%, transparent)
  );
  --shell-shadow:
    0 24px 72px color-mix(in srgb, var(--color-neutral-900, #0f172a) 12%, transparent),
    var(--shadow-md, 0 8px 18px rgba(15, 23, 42, 0.08));
}

html.dark,
html[data-theme='dark'] {
  --shell-bg: #0f1418;
  --shell-bg-top: #1c1f24;
  --shell-bg-bottom: #0d1013;
  --shell-surface: rgba(7, 40, 45, 0.76);
  --shell-surface-strong: rgba(7, 40, 45, 0.88);
  --shell-border: rgba(234, 250, 247, 0.16);
  --shell-border-highlight: rgba(255, 255, 255, 0.08);
  --shell-card-highlight: rgba(255, 255, 255, 0.07);
  --shell-text: #f5f7f4;
  --shell-muted: rgba(234, 250, 247, 0.78);
  --shell-kicker: #b9efe4;
  --shell-accent: #64afb3;
  --shell-accent-soft: rgba(100, 175, 179, 0.22);
  --shell-accent-warm: rgba(201, 125, 197, 0.18);
  --shell-glow: rgba(142, 215, 191, 0.22);
  --shell-logo-filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.26));
  --shell-mascot-filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
  --shell-shadow: 0 38px 128px rgba(0, 0, 0, 0.48);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme='light']) {
    --shell-bg: #0f1418;
    --shell-bg-top: #1c1f24;
    --shell-bg-bottom: #0d1013;
    --shell-surface: rgba(7, 40, 45, 0.76);
    --shell-surface-strong: rgba(7, 40, 45, 0.88);
    --shell-border: rgba(234, 250, 247, 0.16);
    --shell-border-highlight: rgba(255, 255, 255, 0.08);
    --shell-card-highlight: rgba(255, 255, 255, 0.07);
    --shell-text: #f5f7f4;
    --shell-muted: rgba(234, 250, 247, 0.78);
    --shell-kicker: #b9efe4;
    --shell-accent: #64afb3;
    --shell-accent-soft: rgba(100, 175, 179, 0.22);
    --shell-accent-warm: rgba(201, 125, 197, 0.18);
    --shell-glow: rgba(142, 215, 191, 0.22);
    --shell-logo-filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.26));
    --shell-mascot-filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28));
    --shell-shadow: 0 38px 128px rgba(0, 0, 0, 0.48);
  }
}

.app-shell[data-shell-tone='discover'] {
  --shell-accent: #0f766e;
  --shell-kicker: #0f766e;
  --shell-accent-soft: rgba(15, 118, 110, 0.18);
  --shell-accent-warm: rgba(245, 158, 11, 0.16);
  --shell-glow: rgba(15, 118, 110, 0.16);
}

.app-shell[data-shell-tone='owner'] {
  --shell-accent: #0f766e;
  --shell-kicker: #155e75;
  --shell-accent-soft: rgba(21, 94, 117, 0.16);
  --shell-accent-warm: rgba(14, 165, 233, 0.16);
  --shell-glow: rgba(14, 165, 233, 0.14);
}

.app-shell[data-shell-tone='bookings'] {
  --shell-accent: #2563eb;
  --shell-kicker: #1d4ed8;
  --shell-accent-soft: rgba(37, 99, 235, 0.16);
  --shell-accent-warm: rgba(59, 130, 246, 0.14);
  --shell-glow: rgba(37, 99, 235, 0.14);
}

.app-shell[data-shell-tone='messages'] {
  --shell-accent: #0f766e;
  --shell-kicker: #7c3aed;
  --shell-accent-soft: rgba(124, 58, 237, 0.14);
  --shell-accent-warm: rgba(16, 185, 129, 0.14);
  --shell-glow: rgba(124, 58, 237, 0.12);
}

.app-shell[data-shell-tone='pets'] {
  --shell-accent: #0f766e;
  --shell-kicker: #ca8a04;
  --shell-accent-soft: rgba(16, 185, 129, 0.14);
  --shell-accent-warm: rgba(202, 138, 4, 0.16);
  --shell-glow: rgba(202, 138, 4, 0.12);
}

.app-shell[data-shell-tone='professional'] {
  --shell-accent: #c2410c;
  --shell-kicker: #c2410c;
  --shell-accent-soft: rgba(194, 65, 12, 0.14);
  --shell-accent-warm: rgba(15, 118, 110, 0.16);
  --shell-glow: rgba(194, 65, 12, 0.14);
}

.app-shell[data-shell-tone='support'] {
  --shell-accent: #0284c7;
  --shell-kicker: #0369a1;
  --shell-accent-soft: rgba(2, 132, 199, 0.16);
  --shell-accent-warm: rgba(14, 165, 233, 0.14);
  --shell-glow: rgba(2, 132, 199, 0.14);
}

html.dark .app-shell[data-shell-tone],
html[data-theme='dark'] .app-shell[data-shell-tone] {
  --shell-kicker: color-mix(in srgb, white 88%, var(--shell-accent) 12%);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme='light']) .app-shell[data-shell-tone] {
    --shell-kicker: color-mix(in srgb, white 88%, var(--shell-accent) 12%);
  }
}

.app-shell[data-shell-tone='pricing'] {
  --shell-accent: #0f766e;
  --shell-kicker: #b45309;
  --shell-accent-soft: rgba(15, 118, 110, 0.14);
  --shell-accent-warm: rgba(180, 83, 9, 0.16);
  --shell-glow: rgba(180, 83, 9, 0.14);
}

.app-shell[data-shell-tone='error'] {
  --shell-accent: #c2410c;
  --shell-kicker: #c2410c;
  --shell-accent-soft: rgba(194, 65, 12, 0.18);
  --shell-accent-warm: rgba(217, 119, 6, 0.18);
  --shell-glow: rgba(194, 65, 12, 0.14);
}

.app-shell {
  font-family: var(--font-family-brand, 'Alan Sans', system-ui, sans-serif);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  /* Bootstrap exception: this stylesheet loads before the app's canonical safe-area tokens. */
  padding: max(18px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  isolation: isolate;
  background:
    radial-gradient(circle at 16% 16%, var(--shell-glow), transparent 26%),
    radial-gradient(circle at 84% 12%, var(--shell-accent-warm), transparent 24%),
    radial-gradient(
      circle at 50% 100%,
      color-mix(in srgb, var(--shell-accent) 16%, transparent),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      var(--shell-bg-top) 0%,
      var(--shell-bg) 56%,
      var(--shell-bg-bottom) 100%
    ),
    var(--shell-bg);
  transition: opacity 0.3s ease;
}

.app-shell--boot-hidden {
  display: none;
}

.noscript-fallback {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px;
  line-height: 1.6;
}

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

.app-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, var(--shell-glow), transparent 24%),
    radial-gradient(circle at 82% 22%, var(--shell-accent-warm), transparent 24%),
    radial-gradient(circle at 50% 76%, var(--shell-accent-soft), transparent 32%);
  opacity: 1;
  filter: blur(40px);
  pointer-events: none;
}

.app-shell::after {
  content: '';
  position: absolute;
  inset: auto 10% 10% 10%;
  height: 22%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--shell-accent) 10%, transparent),
    transparent 68%
  );
  filter: blur(34px);
  opacity: 0.58;
  pointer-events: none;
}

.app-shell.hidden {
  opacity: 0;
  pointer-events: none;
}

.app-shell--preview {
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 40px);
}

.app-shell--system {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  z-index: 2147483646;
}

.shell-card {
  position: relative;
  width: min(100%, 32rem);
  max-height: calc(100dvh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(20px, 4vw, 30px);
  border-radius: clamp(24px, 4vw, 36px);
  background:
    linear-gradient(180deg, var(--shell-card-highlight) 0%, transparent 100%),
    linear-gradient(180deg, var(--shell-surface-strong), var(--shell-surface));
  box-shadow: var(--shell-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vw, 18px);
  text-align: center;
  scrollbar-width: thin;
}

.shell-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(clamp(24px, 4vw, 36px) - 1px);
  border: 1px solid color-mix(in srgb, var(--shell-border) 88%, var(--shell-border-highlight));
  pointer-events: none;
}

.shell-gus-mark {
  position: relative;
  z-index: 1;
  width: clamp(4.75rem, 24vw, 6rem);
  height: clamp(4.75rem, 24vw, 6rem);
  max-width: 100%;
  flex: 0 0 auto;
  object-fit: contain;
  filter: var(--shell-mascot-filter);
}

:root[data-gus-enabled='false'] .shell-gus-mark {
  display: none;
}

.shell-logo-stack {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: clamp(8.75rem, 44vw, 13.25rem);
  aspect-ratio: 212 / 56;
  flex: 0 0 auto;
}

.shell-logo {
  grid-area: 1 / 1;
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: var(--shell-logo-filter);
  transition: opacity 0.2s ease;
}

.shell-logo--light {
  opacity: 1;
}

.shell-logo--dark {
  opacity: 0;
}

html.dark .shell-logo--light,
html[data-theme='dark'] .shell-logo--light {
  opacity: 0;
}

html.dark .shell-logo--dark,
html[data-theme='dark'] .shell-logo--dark {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme='light']) .shell-logo--light {
    opacity: 0;
  }

  :root:not(.light):not([data-theme='light']) .shell-logo--dark {
    opacity: 1;
  }
}

.shell-card--error {
  width: min(100%, 560px);
}

.shell-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: clamp(6px, 1.8vw, 8px);
  align-items: center;
}

.shell-kicker {
  margin: 0;
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--shell-border) 88%, transparent);
  background: color-mix(in srgb, var(--shell-accent) 12%, rgba(255, 255, 255, 0.02));
  color: var(--shell-kicker);
  font-size: clamp(0.68rem, 1.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

.shell-heading {
  margin: 0;
  width: 100%;
  color: var(--shell-text);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.08;
  font-weight: 700;
  max-width: min(100%, 13ch);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.shell-subtext {
  margin: 0;
  width: 100%;
  max-width: min(100%, 32rem);
  color: var(--shell-muted);
  font-size: clamp(0.92rem, 2.5vw, 1.05rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.shell-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.shell-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shell-accent) 70%, white 20%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--shell-accent) 18%, transparent);
}

.shell-dot:nth-child(2) {
  opacity: 0.82;
}

.shell-dot:nth-child(3) {
  background: color-mix(in srgb, var(--shell-accent-warm) 82%, #d97706 14%);
}

.shell-status {
  margin: 0;
  color: var(--shell-muted);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@keyframes shell-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shell-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes shell-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0) scale(0.92);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
  }
}

.shell-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shell-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 18px;
  padding: 0 18px;
  font-size: 0.98rem;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.shell-button:hover {
  transform: translateY(-1px);
}

.shell-button--primary {
  color: white;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--shell-accent) 88%, white 8%),
    color-mix(in srgb, var(--shell-accent) 94%, black 8%)
  );
  box-shadow: 0 16px 34px color-mix(in srgb, var(--shell-accent) 18%, transparent);
}

.shell-button--secondary {
  color: var(--shell-text);
  background: color-mix(in srgb, var(--shell-surface-strong) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--shell-border) 88%, transparent);
}

.shell-details {
  width: 100%;
  text-align: left;
}

.shell-details-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--shell-muted);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.shell-details-toggle:hover {
  color: var(--shell-text);
}

.shell-details-panel {
  margin-top: 12px;
  max-height: 220px;
  overflow: auto;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--shell-border) 88%, transparent);
  background: color-mix(in srgb, var(--shell-surface) 92%, transparent);
  padding: 16px;
  color: var(--shell-muted);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.shell-support-text {
  max-width: 34ch;
  color: var(--shell-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.shell-support-text a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--shell-text);
}

@media (max-width: 640px) {
  .app-shell {
    align-items: center;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
      max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }

  .app-shell--preview {
    min-height: 100dvh;
    padding: 14px;
  }

  .shell-card {
    max-height: calc(100dvh - 28px);
    padding: 20px 16px 18px;
    gap: 14px;
  }

  .shell-gus-mark {
    width: clamp(4.5rem, 28vw, 5.75rem);
    height: clamp(4.5rem, 28vw, 5.75rem);
  }

  .shell-logo-stack {
    width: clamp(8.5rem, 58vw, 11.5rem);
  }

  .shell-heading {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
    max-width: min(100%, 12ch);
  }

  .shell-kicker {
    letter-spacing: 0.08em;
  }

  .shell-subtext {
    max-width: min(100%, 28ch);
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .shell-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 560px) {
  .app-shell {
    align-items: start;
  }

  .shell-card {
    max-height: none;
    margin-block: 12px;
    padding: 18px 16px;
    gap: 12px;
  }

  .shell-gus-mark {
    width: clamp(4rem, 22vh, 5.25rem);
    height: clamp(4rem, 22vh, 5.25rem);
  }

  .shell-logo-stack {
    width: clamp(7.75rem, 34vw, 10.5rem);
  }

  .shell-heading {
    font-size: clamp(1.45rem, 7vh, 2rem);
  }

  .shell-subtext {
    font-size: 0.9rem;
    line-height: 1.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell,
  .shell-card,
  .shell-gus,
  .shell-dot,
  .shell-orbit-trail {
    animation: none !important;
    transition: none !important;
  }
}