/* ── Sign-in page layout ───────────────────────────────────────────────── */

html, body { height: 100%; }

.signin-body {
  background-color: #faf7f2;
  position: relative;
  overflow-x: hidden;
}

[data-bs-theme="dark"] .signin-body {
  background-color: #13110e;
}

/* Subtle noise texture */
.signin-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .015;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Ambient glow blob */
.signin-glow {
  position: fixed;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  border-radius: 50%;
  background: rgba(16, 30, 69, 0.06);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: signin-breathe 8s ease-in-out infinite;
}

[data-bs-theme="dark"] .signin-glow {
  background: rgba(79, 96, 190, 0.08);
}

@keyframes signin-breathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;  transform: translate(-50%, -50%) scale(1.06); }
}

/* ── Main container ─────────────────────────────────────────────────────── */

.signin-main {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */

.signin-logo-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #101e45, #3f509e);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(16, 30, 69, 0.25);
}

.signin-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Title & subtitle ───────────────────────────────────────────────────── */

.signin-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bs-body-color);
  margin-bottom: 0;
}

.signin-subtitle {
  font-size: 1.125rem;
  color: var(--bs-secondary-color);
  max-width: 380px;
}

/* ── Feature highlights ─────────────────────────────────────────────────── */

.signin-features {
  max-width: 560px;
  width: 100%;
}

.signin-feature-icon {
  line-height: 1;
}

.signin-feature-title {
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--bs-body-color);
}

.signin-feature-desc {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  margin: 0;
  line-height: 1.5;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.signin-btn-am,
.signin-btn-google {
  font-size: .9375rem;
  border-radius: .5rem;
  transition: box-shadow .2s ease, transform .15s ease;
}

.signin-btn-am:not(:disabled):hover {
  box-shadow: 0 6px 18px rgba(16, 30, 69, 0.3);
  transform: translateY(-1px);
}

.signin-btn-google:not(:disabled):hover {
  transform: translateY(-1px);
}

/* ── Footer note ────────────────────────────────────────────────────────── */

.signin-footer-note {
  font-size: .8125rem;
  color: var(--bs-tertiary-color);
  margin-bottom: 0;
}

/* ── Turnstile ──────────────────────────────────────────────────────────── */

#turnstile {
  min-height: 65px;
}

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes signin-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

.signin-anim-fade-in {
  animation: signin-fade-in .6s ease-out both;
}

.signin-anim-fade-up {
  animation: signin-fade-up .6s ease-out both;
}

/* ── External login form ────────────────────────────────────────────────── */

.signin-external {
  /* inherits width from parent flex column */
}

/* ── Theme toggle ───────────────────────────────────────────────────────── */

/* .signin-main has z-index:1 and spans the full viewport; the toggle must sit above it */
.signin-theme-toggle {
  z-index: 10;
}