:root {
  --color-brand-veridion-primary: #0d9488;
  --color-brand-veridion-secondary: #0b1220;
  --bg-a: #0b1220;
  --bg-b: #14304a;
  --bg-c: #0f766e;
}

.app-shell {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(20, 184, 166, 0.18), transparent 55%),
    radial-gradient(900px 500px at 95% 5%, rgba(37, 99, 235, 0.12), transparent 50%),
    linear-gradient(165deg, #eef3f9 0%, #e2ebf5 45%, #d7e5ef 100%);
  min-height: 100vh;
}

.font-display { font-family: "Space Grotesk", system-ui, sans-serif; }
.font-body { font-family: "Source Sans 3", system-ui, sans-serif; }

.join-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(11, 18, 32, 0.96), rgba(26, 39, 68, 0.92)),
    linear-gradient(120deg, rgba(13, 148, 136, 0.35), transparent 55%);
  color: #fff;
}

.join-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 20%, transparent 70%);
  pointer-events: none;
}

.brand-mark {
  filter: drop-shadow(0 8px 24px rgba(13, 148, 136, 0.25));
}

.module-tile {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.module-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -28px rgba(11, 18, 32, 0.55);
}

.status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  display: inline-block;
}

.status-dot.on { background: #14b8a6; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2); }
.status-dot.off { background: #94a3b8; }

.toggle-track {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-track[data-on="1"] { background: #0d9488; }

.toggle-thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-track[data-on="1"] .toggle-thumb {
  transform: translateX(1.25rem);
}

.admin-shell {
  background: #0b1220;
  min-height: 100vh;
  color: #e2e8f0;
}

.admin-card {
  background: rgba(26, 39, 68, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fade-up 0.55s ease both;
}

.animate-delay-1 { animation-delay: 0.08s; }
.animate-delay-2 { animation-delay: 0.16s; }
.animate-delay-3 { animation-delay: 0.24s; }

.veridion-logo svg,
.veridion-logo {
  height: 1.15rem;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}