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

html,
body,
#root {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* CSS variables for JobToaster component - using complete hex values */
:root {
  --background: #f9fafb;
  --foreground: #1e1b4b;
  --primary: #252370;
  --muted: #f9fafb;
  --muted-foreground: #6b7280;
  --destructive: #ef4444;

  --color-job-toast-accent: #2ec6ff;
  --color-job-toast-error: #ef4444;
  --color-job-toast-surface: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  --color-job-toast-fg: #ffffff;
  --color-job-toast-fg-strong: rgba(255, 255, 255, 0.9);
  --color-job-toast-fg-muted: rgba(255, 255, 255, 0.5);
  --color-job-toast-fg-subtle: rgba(255, 255, 255, 0.6);
  --color-job-toast-border: rgba(255, 255, 255, 0.1);
  --color-job-toast-divider: rgba(255, 255, 255, 0.05);
  --color-job-toast-track: rgba(255, 255, 255, 0.1);
  --color-job-toast-icon-muted: rgba(255, 255, 255, 0.2);
  --color-job-toast-accent-soft: rgba(46, 198, 255, 0.2);
  --color-job-toast-accent-subtle: rgba(46, 198, 255, 0.1);
  --color-job-toast-accent-border: rgba(46, 198, 255, 0.3);
  --color-job-toast-error-soft: rgba(239, 68, 68, 0.1);
  --color-job-toast-error-border: rgba(239, 68, 68, 0.3);

  /* Sense brand palette (HSL — mirrors apps/web/src/index.css). Used by AuthShell. */
  --brand-violet: 267 100% 67%;
  --brand-magenta: 265 69% 42%;
  --brand-cyan: 194 72% 21%;
  --brand-deep-blue: 242 47% 19%;
  --brand-surface-dark: 242 47% 19%;
  --brand-surface-deep: 263 67% 35%;
  --brand-surface-mid: 241 52% 29%;
  --brand-surface-glow: 243 55% 41%;

  /* Auth surface tokens — drive the branded login/loading screen. */
  --auth-surface: var(--brand-surface-dark);
  --auth-foreground: 0 0% 100%;
  --auth-muted: 0 0% 100%;
  --auth-subtle: 0 0% 100%;
  --auth-panel: 241 45% 14%;
  --auth-border: 0 0% 100%;
  --sense-map-login-bg: #0c0d1f;
  --sense-map-login-panel: #101224;
  --sense-map-logo-core: 267 100% 77%;
  --sense-map-logo-mid: 258 90% 66%;
  --sense-map-logo-edge: 263 83% 58%;
}

.text-auth-foreground {
  color: hsl(var(--auth-foreground));
}
.text-auth-muted {
  color: hsl(var(--auth-muted));
}
.text-auth-subtle {
  color: hsl(var(--auth-subtle));
}

.auth-panel {
  background: hsl(var(--auth-panel) / 0.08);
  border: 1px solid hsl(var(--auth-border) / 0.15);
  backdrop-filter: blur(20px);
}

.login-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: hsl(var(--auth-surface));
}

.login-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  isolation: isolate;
}

.login-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(1200px 900px at 78% 18%, hsl(var(--brand-cyan) / 0.55), transparent 60%),
    radial-gradient(1400px 1000px at 18% 32%, hsl(var(--brand-deep-blue) / 0.7), transparent 62%),
    radial-gradient(900px 900px at 88% 86%, hsl(var(--brand-magenta) / 0.55), transparent 60%),
    radial-gradient(1100px 900px at 40% 92%, hsl(var(--brand-violet) / 0.55), transparent 62%),
    linear-gradient(
      180deg,
      hsl(var(--brand-surface-glow) / 0.65),
      hsl(var(--brand-surface-deep) / 0.7)
    );
  animation: driftA 14s ease-in-out infinite alternate;
}

.login-bg::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(1300px 900px at 70% 22%, hsl(var(--brand-cyan) / 0.62), transparent 58%),
    radial-gradient(1500px 1100px at 22% 40%, hsl(var(--brand-deep-blue) / 0.65), transparent 62%),
    radial-gradient(950px 950px at 92% 90%, hsl(var(--brand-magenta) / 0.6), transparent 60%),
    radial-gradient(1200px 900px at 50% 92%, hsl(var(--brand-violet) / 0.6), transparent 62%),
    linear-gradient(
      180deg,
      hsl(var(--brand-surface-mid) / 0.62),
      hsl(var(--brand-surface-deep) / 0.72)
    );
  mix-blend-mode: screen;
  opacity: 0.65;
}

.login-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.08;
}

@keyframes driftA {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(4%, 3%, 0) scale(1.1);
  }
}

/* AuthShell layout — no Tailwind in Kepler, so the AuthShell card layout is
   expressed as plain CSS classes that mirror what main app's Tailwind produces. */
.auth-shell-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem 1rem 2.5rem 1rem;
}

.auth-shell-card {
  width: 100%;
  max-width: 28rem; /* matches max-w-md */
  padding: 2.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .auth-shell-card {
    padding: 3rem;
  }
}

.auth-shell-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-shell-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
  height: 14rem;
  margin: 0 auto 1rem auto;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.auth-shell-logo-img {
  width: 12rem;
  height: 12rem;
  object-fit: contain;
}

.auth-shell-brand-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--auth-foreground));
}

.auth-shell-brand-subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--auth-muted) / 0.6);
}

.auth-shell-body {
  margin-bottom: 1rem;
}

.auth-shell-spinner-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

.auth-shell-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom-color: #ffffff;
  border-radius: 9999px;
  animation: spin 0.8s linear infinite;
}

.auth-shell-status-title {
  margin: 0.5rem 0 0.25rem 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--auth-foreground));
}

.auth-shell-status-subtitle {
  margin: 0;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--auth-muted) / 0.7);
}

.auth-shell-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: hsl(var(--auth-subtle) / 0.4);
}

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

/* Standalone GeoSense authentication — mirrors the platform portal login. */
.sense-map-login-page {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--sense-map-login-bg);
  color: white;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
}

.sense-map-login-background,
.sense-map-login-background canvas,
.sense-map-login-static-field,
.sense-map-login-bloom,
.sense-map-login-vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100svh;
  pointer-events: none;
}

.sense-map-login-background {
  z-index: 0;
  background: var(--sense-map-login-bg);
}

.sense-map-login-background canvas,
.sense-map-login-static-field {
  z-index: 0;
}

.sense-map-login-static-field {
  background:
    radial-gradient(circle at 20% 20%, hsl(var(--sense-map-logo-edge) / 0.1), transparent 42%),
    radial-gradient(circle at 80% 70%, hsl(var(--brand-violet) / 0.07), transparent 38%),
    var(--sense-map-login-bg);
}

.sense-map-login-bloom {
  z-index: 1;
  inset: -20%;
  background:
    radial-gradient(circle at 58% 46%, hsl(var(--sense-map-logo-edge) / 0.2), transparent 24%),
    radial-gradient(circle at 38% 52%, hsl(var(--sense-map-logo-edge) / 0.12), transparent 22%),
    radial-gradient(circle at 50% 48%, hsl(var(--sense-map-logo-core) / 0.14), transparent 26%);
  filter: blur(48px);
  animation: senseMapLoginDrift 18s ease-in-out infinite alternate;
}

.sense-map-login-vignette {
  z-index: 2;
  background: radial-gradient(
    ellipse 100% 80% at 50% 55%,
    transparent 42%,
    rgb(8 9 26 / 0.42) 100%
  );
}

.sense-map-login-brand {
  position: absolute;
  z-index: 4;
  top: 2rem;
  left: clamp(1.5rem, 4vw, 4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: rgb(255 255 255 / 0.93);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sense-map-login-brand-mark {
  width: 2.25rem;
  height: 2.25rem;
}

.sense-map-login-content {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 3rem;
}

.sense-map-login-status {
  display: flex;
  width: min(100%, 24rem);
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--sense-map-login-panel) 62%, transparent);
  box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.2);
  backdrop-filter: blur(18px);
}

.auth-shell-body {
  width: 100%;
  margin-bottom: 0;
}

.sense-map-login-loading-mark,
.sense-map-animated-logo {
  position: relative;
  display: block;
}

.sense-map-login-loading-mark {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
}

.sense-map-animated-logo-mark,
.sense-map-animated-logo-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.sense-map-animated-logo-mark {
  object-fit: contain;
}

.sense-map-animated-logo-dots {
  opacity: 0;
  transform-origin: 49.85% 58.85%;
}

.sense-map-animated-logo-dot {
  position: absolute;
  width: 16.667%;
  aspect-ratio: 1;
  border-radius: 9999px;
  background: radial-gradient(
    circle,
    hsl(var(--sense-map-logo-core)) 0%,
    hsl(var(--sense-map-logo-mid)) 52%,
    hsl(var(--sense-map-logo-edge)) 100%
  );
  box-shadow: 0 0 0.45rem hsl(var(--sense-map-logo-core) / 0.28);
  transform: translate(-50%, -50%);
}

.sense-map-animated-logo-dot-top {
  left: 48.5%;
  top: 27.5%;
}

.sense-map-animated-logo-dot-right {
  left: 76%;
  top: 74.5%;
}

.sense-map-animated-logo-dot-left {
  left: 25%;
  top: 76.5%;
}

.sense-map-login-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgb(255 255 255 / 0.68);
  font-size: 0.875rem;
}

.sense-map-login-progress .auth-shell-spinner {
  width: 1rem;
  height: 1rem;
  border-color: rgb(255 255 255 / 0.2);
  border-bottom-color: white;
}

.sense-map-login-status .auth-shell-status-subtitle {
  margin-top: 0.625rem;
  color: rgb(255 255 255 / 0.38);
}

.sense-map-login-status .auth-shell-footer {
  margin-top: 1.5rem;
  color: rgb(255 255 255 / 0.3);
}

@keyframes senseMapLoginDrift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 1.5%, 0) scale(1.08);
  }
}

@keyframes senseMapLogoPetalMorph {
  0%,
  12%,
  88%,
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  34%,
  70% {
    opacity: 0;
    transform: rotate(180deg) scale(0.28);
  }
}

@keyframes senseMapLogoDotOrbit {
  0%,
  18% {
    opacity: 0;
    transform: rotate(0deg) scale(0.28);
  }
  34% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  70% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
  88%,
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0.28);
  }
}

.sense-map-animated-logo:hover .sense-map-animated-logo-mark {
  animation: senseMapLogoPetalMorph 2.1s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.sense-map-animated-logo:hover .sense-map-animated-logo-dots {
  animation: senseMapLogoDotOrbit 2.1s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.sense-map-animated-logo-auto .sense-map-animated-logo-mark {
  animation: senseMapLogoPetalMorph 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.sense-map-animated-logo-auto .sense-map-animated-logo-dots {
  animation: senseMapLogoDotOrbit 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sense-map-login-bloom,
  .sense-map-animated-logo-mark,
  .sense-map-animated-logo-dots,
  .sense-map-login-progress .auth-shell-spinner {
    animation: none;
  }
}