/* Sign in / Sign up — design v1 ("Aurora"): violet aurora on both sides, bright form card.
   Chosen by /auth/design.js (open /sign-in?design=v1). Loaded after auth.css.
   */

/* ---------- tokens: violet accent on a soft lavender page ---------- */
.auth-body {
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-soft: #f3e8ff;
  --accent-text: #6d28d9;
  --focus: 0 0 0 4px rgba(124, 58, 237, .22);
  --bg: #faf8ff;
  background:
    radial-gradient(700px 420px at 100% 0%, rgba(167, 139, 250, .16), transparent 70%),
    radial-gradient(600px 380px at 70% 100%, rgba(251, 146, 60, .10), transparent 70%),
    #faf8ff;
}

/* ---------- brand panel: midnight → indigo → violet, with an orange glow ---------- */
.auth-brand {
  border-right: 0;
  color: #fff;
  background: linear-gradient(150deg, #0b0a24 0%, #1e1b4b 38%, #4c1d95 72%, #7c3aed 100%);
  background-size: 180% 180%;
  animation: auroraDrift 16s ease-in-out infinite;
  /* the demo cards on this panel read the dashboard tokens: make them glass on dark */
  --surface: rgba(255, 255, 255, .08);
  --surface-2: rgba(255, 255, 255, .1);
  --surface-3: rgba(255, 255, 255, .14);
  --border: rgba(255, 255, 255, .16);
  --border-strong: rgba(255, 255, 255, .32);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .8);
  --text-3: rgba(255, 255, 255, .6);
  --accent: #c4b5fd;
  --accent-text: #e9d5ff;
  --accent-soft: rgba(196, 181, 253, .18);
}
@keyframes auroraDrift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.auth-brand .auth-brand-glow {
  position: absolute; inset: 0; /* auth.css lets every panel child flow in place; the glow must cover the panel */
  background:
    radial-gradient(420px 320px at 85% 12%, rgba(251, 146, 60, .38), transparent 65%),
    radial-gradient(520px 380px at 8% 92%, rgba(56, 189, 248, .22), transparent 70%),
    radial-gradient(360px 260px at 45% 55%, rgba(236, 72, 153, .16), transparent 70%);
  animation: auroraGlow 10s ease-in-out infinite alternate;
}
@keyframes auroraGlow { from { opacity: .75; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(-2%, 2%, 0) scale(1.05); } }
.auth-brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.auth-logo { color: #fff; }
.auth-logo-mark { box-shadow: 0 6px 18px rgba(251, 146, 60, .45); }
.auth-headline { color: #fff; text-shadow: 0 2px 24px rgba(15, 10, 50, .35); }
.auth-brand .h-word.accent {
  background: linear-gradient(90deg, #fdba74, #f472b6, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-sub { color: rgba(255, 255, 255, .78); }

/* glass demo cards */
.auth-brand .v-prompt, .auth-brand .v-model, .auth-brand .v-pref {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.auth-brand .v-model.thinking .v-line { background: linear-gradient(90deg, rgba(255, 255, 255, .1) 0%, rgba(196, 181, 253, .45) 50%, rgba(255, 255, 255, .1) 100%); background-size: 400px 100%; }
.auth-brand .v-model.done .v-line { background: rgba(255, 255, 255, .28); }
.auth-brand .v-model.picked { border-color: rgba(253, 186, 116, .75); box-shadow: 0 14px 34px -14px rgba(251, 146, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .15); }
.auth-brand .v-model.picked .v-line { background: rgba(253, 186, 116, .6); }
.auth-brand .v-pick.best { background: linear-gradient(135deg, #fb923c, #ec4899); }
.auth-brand .v-pref-legend .lead b { color: #fdba74; }
.auth-brand .v-badge.m-google { box-shadow: none; }

/* ---------- form side ---------- */
.auth-title { background: linear-gradient(90deg, #1e1b4b, #6d28d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-input:hover { border-color: #c4b5fd; }
.auth-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .16); }
.auth-check input:focus-visible + .auth-checkbox { box-shadow: 0 0 0 4px rgba(124, 58, 237, .22); }
.auth-submit {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #4f46e5 100%); background-size: 160% 100%;
  box-shadow: 0 6px 18px -6px rgba(109, 40, 217, .55);
  transition: background-position .4s ease, box-shadow .2s ease, transform .2s ease;
}
.auth-submit:hover:not(:disabled) { background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #4f46e5 100%); background-size: 160% 100%; background-position: 100% 0; box-shadow: 0 14px 28px -10px rgba(109, 40, 217, .6); }
.auth-submit:active:not(:disabled) { box-shadow: 0 4px 10px -4px rgba(109, 40, 217, .5); }
.auth-submit:focus-visible { box-shadow: 0 0 0 4px rgba(124, 58, 237, .3); }
.auth-social:hover:not(:disabled) { border-color: #c4b5fd; box-shadow: 0 6px 16px -8px rgba(109, 40, 217, .3); }
.auth-alert.info { border-color: #d8b4fe; color: #4c1d95; }
.auth-strength-label.s3 { color: #6d28d9; }
.auth-strength-bars span.on.s3 { background: #8b5cf6; }

/* ---------- form side (temporary): aurora background + a glowing glass card ---------- */
.auth-main {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(520px 420px at 82% 8%, rgba(236, 72, 153, .30), transparent 65%),
    radial-gradient(560px 460px at 10% 96%, rgba(251, 146, 60, .26), transparent 65%),
    radial-gradient(640px 520px at 50% 50%, rgba(124, 58, 237, .38), transparent 70%),
    linear-gradient(160deg, #1b1145 0%, #2a1468 45%, #1e1b4b 100%);
}
/* drifting light and a faint grid behind the card */
.auth-main::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(260px 260px at 30% 30%, rgba(196, 181, 253, .28), transparent 70%),
    radial-gradient(220px 220px at 70% 70%, rgba(253, 186, 116, .22), transparent 70%);
  filter: blur(10px); animation: auroraSwirl 18s ease-in-out infinite alternate;
}
@keyframes auroraSwirl { from { transform: translate3d(-4%, -2%, 0) rotate(0deg); } to { transform: translate3d(4%, 3%, 0) rotate(8deg); } }
.auth-main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 70%);
}

/* the card: bright glass with a spinning gradient border and a soft glow */
.auth-card {
  position: relative; max-width: 460px; padding: 34px 34px 30px; border-radius: 26px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 30px 80px -24px rgba(10, 6, 40, .75), 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 60px -10px rgba(167, 139, 250, .45);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-card::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--cp-angle), rgba(251, 146, 60, .95), rgba(236, 72, 153, .9), rgba(139, 92, 246, .95), rgba(56, 189, 248, .7), rgba(251, 146, 60, .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cp-beam-spin 8s linear infinite;
}
.auth-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
}

/* inside the card */
.auth-head { gap: 8px; }
.auth-title { font-size: 30px; background: linear-gradient(90deg, #1e1b4b, #6d28d9 55%, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-lead { color: #5b5874; }
.auth-input { background: #faf8ff; border-color: #e4def7; }
.auth-input:hover { background: #fff; }
.auth-input:focus { background: #fff; }
.auth-control-icon { color: #8b7fb8; }
.auth-check .auth-checkbox { border-color: #c9bdf0; }
.auth-divider::before, .auth-divider::after { background: linear-gradient(90deg, transparent, #ddd3f7, transparent); }
.auth-divider { color: #8b7fb8; }
.auth-social { background: #fff; border-color: #e4def7; }

/* button: gradient with a light sweep */
.auth-submit { position: relative; overflow: hidden; min-height: 52px; border-radius: 14px;
  background: linear-gradient(120deg, #f97316 0%, #ec4899 38%, #8b5cf6 72%, #6366f1 100%); background-size: 180% 100%;
  box-shadow: 0 12px 28px -10px rgba(236, 72, 153, .55), 0 6px 16px -8px rgba(99, 102, 241, .5); }
.auth-submit:hover:not(:disabled) { background: linear-gradient(120deg, #f97316 0%, #ec4899 38%, #8b5cf6 72%, #6366f1 100%); background-size: 180% 100%; background-position: 100% 0;
  box-shadow: 0 18px 36px -12px rgba(236, 72, 153, .6), 0 10px 22px -10px rgba(99, 102, 241, .55); }
.auth-submit::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg);
  animation: auroraSweep 3.6s ease-in-out 1.2s infinite;
}
@keyframes auroraSweep { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.auth-submit:focus-visible { box-shadow: 0 0 0 4px rgba(236, 72, 153, .3); }
.auth-link, .auth-switch a { background: linear-gradient(90deg, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-check input:checked + .auth-checkbox { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-color: transparent; }

/* outside the card: light text on the aurora */
.auth-footer { color: rgba(255, 255, 255, .62); }
.auth-footer a { color: rgba(255, 255, 255, .72); }
.auth-footer a:hover { color: #fff; }
.auth-mobile-brand .auth-logo { color: #fff; }

@media (max-width: 860px) {
  .auth-card { padding: 26px 22px 24px; border-radius: 22px; }
}
@media (prefers-color-scheme: dark) {
  .auth-card { background: rgba(22, 17, 52, .92); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(124, 58, 237, .4); }
  .auth-card::after { background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .6), transparent); }
  .auth-title { background: linear-gradient(90deg, #ffffff, #c4b5fd 55%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .auth-lead { color: #b9b3d6; }
  .auth-input, .auth-social { background: rgba(255, 255, 255, .05); border-color: rgba(196, 181, 253, .22); }
  .auth-input:hover, .auth-input:focus { background: rgba(255, 255, 255, .08); }
  .auth-link, .auth-switch a { background: linear-gradient(90deg, #c4b5fd, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-main::before, .auth-card::before, .auth-submit::after { animation: none; }
}

/* ---------- dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .auth-body {
    --accent: #a78bfa; --accent-hover: #c4b5fd; --accent-soft: #2a1f4d; --accent-text: #c4b5fd;
    background: radial-gradient(700px 420px at 100% 0%, rgba(124, 58, 237, .18), transparent 70%), var(--bg);
  }
  .auth-brand { background: linear-gradient(150deg, #07061a 0%, #1a1745 40%, #3b1678 75%, #5b21b6 100%); background-size: 180% 180%; }
  .auth-title { background: linear-gradient(90deg, #ffffff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .auth-alert.info { background: #1f1640; border-color: #4c1d95; color: #ddd6fe; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand, .auth-brand-glow { animation: none; }
}

/* ---------- one background for both sides (the left panel's look, across the whole page) ---------- */
.auth-shell {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(150deg, #0b0a24 0%, #1e1b4b 38%, #4c1d95 72%, #7c3aed 100%);
  background-size: 180% 180%;
  animation: auroraDrift 16s ease-in-out infinite;
}
/* the glows: orange near the top, sky blue bottom-left, pink in the middle, violet on the right */
.auth-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 360px at 42% 10%, rgba(251, 146, 60, .34), transparent 65%),
    radial-gradient(560px 420px at 6% 94%, rgba(56, 189, 248, .22), transparent 70%),
    radial-gradient(460px 320px at 30% 55%, rgba(236, 72, 153, .14), transparent 70%),
    radial-gradient(600px 460px at 86% 40%, rgba(167, 139, 250, .22), transparent 70%);
  animation: auroraGlow 10s ease-in-out infinite alternate;
}
/* the faint dot grid, over the whole page */
.auth-shell::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
/* both halves are see-through now, with no line between them */
.auth-brand, .auth-main { background: transparent; animation: none; border: 0; }
.auth-brand .auth-brand-glow, .auth-brand::after, .auth-main::before, .auth-main::after { display: none; }
@media (prefers-color-scheme: dark) {
  .auth-shell { background: linear-gradient(150deg, #07061a 0%, #1a1745 40%, #3b1678 75%, #5b21b6 100%); background-size: 180% 180%; }
  .auth-brand { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .auth-shell, .auth-shell::before { animation: none; } }

/* ---------- the winner rises (with a crown) and the "Same prompt → … → Better decisions" wave ---------- */
/* The entrance uses `translate`, so a card's `transform` (the rise) is not overwritten when it ends. */
.auth-brand .v-model { animation-name: v1CardIn; transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease, border-color .55s ease, opacity .55s ease; position: relative; }
@keyframes v1CardIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.auth-brand .v-models { padding-top: 10px; }
.auth-brand .v-model.picked {
  transform: translateY(-10px) scale(1.045);
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #4a2a9a, #33197a) padding-box, /* solid, so the gradient shows only on the edge */
    linear-gradient(135deg, #fdba74, #f472b6, #c4b5fd) border-box;
  box-shadow: 0 26px 50px -18px rgba(251, 146, 60, .65), 0 0 40px -10px rgba(244, 114, 182, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  z-index: 2;
}
.auth-brand .v-model.muted { opacity: .72; }
.auth-brand .v-model.picked .v-pick { opacity: 0; }
.v2-crown {
  position: absolute; top: -1px; right: -1px; width: 32px; height: 30px; display: grid; place-items: center;
  border-radius: 0 14px 0 12px; color: #fff; background: linear-gradient(135deg, #fb923c, #ec4899);
  box-shadow: 0 6px 14px -4px rgba(236, 72, 153, .7); animation: authPop .45s ease both;
}
.auth-brand .v-status { display: none; }

.v2-flow { position: relative; width: 100%; height: 54px; margin-top: 12px; display: grid; place-items: center; }
.v2-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v2-wave path { fill: none; stroke: url(#v2wave); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 10; animation: v1Flow 2.4s linear infinite; filter: drop-shadow(0 0 6px rgba(244, 114, 182, .7)); }
.v2-wave path.w2 { stroke-width: 1.3; opacity: .55; animation-duration: 3.4s; animation-direction: reverse; }
@keyframes v1Flow { to { stroke-dashoffset: -64; } }
/* v1 colours for the wave: orange → pink → lavender (the SVG's gradient stops) */
.v2-wave stop:nth-child(1), .v2-wave stop:nth-child(2) { stop-color: #fdba74; }
.v2-wave stop:nth-child(3) { stop-color: #f472b6; }
.v2-wave stop:nth-child(4) { stop-color: #c4b5fd; }
.v2-wave circle { fill: #f9a8d4; filter: drop-shadow(0 0 6px #f472b6); animation: v1Pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.v2-wave circle.d1, .v2-wave circle.d4 { fill: #fdba74; filter: drop-shadow(0 0 6px #fb923c); }
.v2-wave circle.d2 { animation-delay: .4s; } .v2-wave circle.d3 { animation-delay: .8s; } .v2-wave circle.d4 { animation-delay: 1.2s; }
@keyframes v1Pulse { 0%, 100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.v2-steps {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px;
  background: rgba(30, 20, 70, .7); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
}
.v2-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, .58); transition: color .35s ease, background .35s ease, box-shadow .35s ease; }
.v2-step.on { color: #fff; background: linear-gradient(90deg, rgba(251, 146, 60, .4), rgba(236, 72, 153, .4)); box-shadow: inset 0 0 0 1px rgba(253, 186, 116, .5), 0 0 18px -6px rgba(244, 114, 182, .8); }
.v2-step-arrow { display: inline-flex; color: rgba(255, 255, 255, .45); margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .auth-brand .v-model { transition: none; } }

/* ---------- 3D tilt (as in v2): outer cards angled toward the middle; the winner keeps its tilt as it rises ---------- */
.auth-brand .v-models { perspective: 1100px; gap: 14px; padding: 12px 6px 4px; }
.auth-brand .v-model { transform: var(--tilt, none); transform-style: preserve-3d; }
.auth-brand .v-model:nth-child(1) { --tilt: rotateY(9deg) rotateZ(-2deg) translateY(8px); }
.auth-brand .v-model:nth-child(2) { --tilt: translateY(-6px); }
.auth-brand .v-model:nth-child(3) { --tilt: rotateY(-9deg) rotateZ(2deg) translateY(8px); }
.auth-brand .v-model.picked { transform: var(--tilt) translateY(-18px) scale(1.045); }
.auth-brand .v-model:hover { transform: var(--tilt) translateY(-3px); }
.auth-brand .v-model.picked:hover { transform: var(--tilt) translateY(-20px) scale(1.05); }

/* ---------- v1 card labels ("Fastest reply" / "Lowest cost" / "Most detailed" / "Best response") ----------
   To undo: delete this block and set V1_LABELS = false in /auth/layout.js. */
.v2-tag {
  align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .01em; color: #ffe4c7; background: rgba(251, 146, 60, .16); border: 1px solid rgba(253, 186, 116, .38);
  opacity: 0; transform: translateY(4px) scale(.95); transition: opacity .4s ease, transform .4s ease;
}
.v2-tag.on { opacity: 1; transform: none; }
.v2-tag.best { color: #fff; background: linear-gradient(90deg, #fb923c, #ec4899); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(236, 72, 153, .8); }