:root {
  --cs-auth-bg: #030303;
  --cs-auth-ink: #f3f1ee;
  --cs-auth-muted: #a6a39e;
  --cs-auth-accent: #e11d2e;
  --cs-auth-accent-deep: #b91020;
  --cs-auth-accent-glow: rgba(225, 29, 46, 0.45);
  --cs-auth-card-bg: rgba(12, 12, 14, 0.88);
  --cs-auth-card-border: rgba(255, 255, 255, 0.08);
  --cs-auth-brand-bg: rgba(6, 6, 8, 0.92);
  --cs-auth-input-bg: rgba(255, 255, 255, 0.04);
  --cs-auth-input-border: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--cs-auth-bg);
  color: var(--cs-auth-ink);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, sans-serif;
}

.cs-auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Ambient background uses shared .cs-preview-bg layers from site-chrome.css. */

/* ── Layout ── */
.cs-auth-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem 2rem;
}

.cs-auth-card {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  width: min(100%, 62rem);
  min-height: min(34rem, 88dvh);
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--cs-auth-card-border);
  background: var(--cs-auth-card-bg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 80px rgba(0, 0, 0, 0.55);
}

/* ── WZRD page-load: left from-left, right form as one group from-bottom ── */
@keyframes cs-auth-card-in {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Left brand: horizontal enter (negative X → 0). */
@keyframes cs-auth-from-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Right form / panel switch: one group rises from below. */
@keyframes cs-auth-from-bottom {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cs-auth-fade-out-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.cs-auth:not(.is-entered) .cs-auth-card {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
}

.cs-auth.is-entered .cs-auth-card {
  animation: cs-auth-card-in 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Brand: from-left. Header nearly together; features slight stagger (video ~140ms). */
.cs-auth:not(.is-entered) .cs-auth-brand-enter {
  opacity: 0;
  transform: translateX(-28px);
}

.cs-auth.is-entered .cs-auth-brand-enter {
  animation: cs-auth-from-left 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(50ms + (var(--cs-enter-i, 0) * 40ms));
}

.cs-auth.is-entered .cs-auth-features .cs-auth-brand-enter {
  animation-delay: calc(220ms + ((var(--cs-enter-i, 3) - 3) * 140ms));
}

.cs-auth.is-entered .cs-auth-orb-wrap.cs-auth-brand-enter {
  animation-delay: 50ms;
}

.cs-auth.is-entered .cs-auth-brand__name.cs-auth-brand-enter {
  animation-delay: 90ms;
}

.cs-auth.is-entered .cs-auth-brand__tagline.cs-auth-brand-enter {
  animation-delay: 130ms;
}

/* Right panel: whole panel as one group (no child stagger). Hidden until boot/reveal. */
.cs-auth:not(.is-entered) .cs-auth-panel.is-active {
  opacity: 0;
  transform: translateY(26px);
}

/* ── Left brand column ── */
.cs-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  background: var(--cs-auth-brand-bg);
  border-right: 1px solid var(--cs-auth-card-border);
}

.cs-auth-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.25rem;
}

.cs-auth-orb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(5.5rem, 14vw, 7rem);
  height: clamp(5.5rem, 14vw, 7rem);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.cs-auth-orb:focus-visible {
  outline: 2px solid var(--cs-auth-accent);
  outline-offset: 6px;
}

.cs-auth-orb__halo,
.cs-auth-orb__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.cs-auth-orb__halo {
  background: radial-gradient(circle, var(--cs-auth-accent-glow) 0%, transparent 70%);
  filter: blur(2px);
}

.cs-auth-orb__halo--a {
  animation: cs-auth-halo-pulse-a 4.5s ease-in-out infinite;
}

.cs-auth-orb__halo--b {
  animation: cs-auth-halo-pulse-b 5.2s ease-in-out infinite;
}

@keyframes cs-auth-halo-pulse-a {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.12);
  }
}

@keyframes cs-auth-halo-pulse-b {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1.06);
  }
  50% {
    opacity: 0.58;
    transform: scale(1.22);
  }
}

.cs-auth-orb__ping {
  border: 2px solid rgba(225, 29, 46, 0.55);
  animation: cs-auth-ping 5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes cs-auth-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70%, 100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

.cs-auth-orb__icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.cs-auth-orb:hover .cs-auth-orb__icon {
  transform: scale(1.04);
  filter: drop-shadow(0 0 28px rgba(225, 29, 46, 0.4));
}

.cs-auth-orb:active .cs-auth-orb__icon {
  transform: scale(0.97);
}

.cs-auth-brand__name {
  margin: 0 0 0.65rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ff4d5a 0%, var(--cs-auth-accent) 45%, #ff8a94 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-auth-brand__tagline {
  margin: 0 0 2rem;
  max-width: 18rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cs-auth-muted);
}

.cs-auth-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  text-align: left;
  width: min(100%, 17rem);
}

.cs-auth-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(243, 241, 238, 0.92);
}

.cs-auth-features__icon {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(225, 29, 46, 0.12);
  color: #ff6b76;
}

.cs-auth-features__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ── Right forms column ── */
.cs-auth-forms {
  display: flex;
  /* flex-start so panels height = content (not column stretch). Stretch hid morph. */
  align-items: flex-start;
  padding: 2.25rem 2.5rem;
  /* No overflow:hidden here — horizontal clip was cropping inputs during panel morph.
     Height morph sets overflow on .cs-auth-panels only while animating. */
  overflow: visible;
}

/* All three panels stay stacked in this one grid cell and in flow, so the box is
   always as tall as the tallest panel. Nothing here ever changes size, which is
   what keeps the card — and the left brand column — pixel-stable across switches. */
.cs-auth-panels {
  display: grid;
  width: 100%;
  align-content: start;
  align-self: flex-start;
}

/* Inactive panels keep their layout box but are removed from paint, tab order and
   the a11y tree. Never `display:none`/`hidden` — that would shrink the card. */
.cs-auth-panel {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  opacity: 0;
  transform: none;
  pointer-events: none;
  visibility: hidden;
  transition: none;
  animation: none;
}

.cs-auth-panel.is-exiting {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  animation: cs-auth-fade-out-up 0.13s cubic-bezier(0.4, 0, 1, 1) both;
  will-change: transform, opacity;
}

/* Resting state of the live panel. Identical to the last frame of every entrance
   animation, so dropping .is-revealing can never nudge anything. */
.cs-auth-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: none;
}

/* Panel switch: incoming rises as one group from the bottom (WZRD). */
.cs-auth-panel.is-active.is-revealing {
  animation: cs-auth-from-bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

/* Path/hash boot until auth-preview.js marks ready. Panels stay in flow so the
   card is already at its final height on the very first paint. */
html[data-cs-auth-panel="signup"]:not(.cs-auth-ready) #cs-auth-login,
html[data-cs-auth-panel="forgot"]:not(.cs-auth-ready) #cs-auth-login,
html[data-cs-auth-panel="login"]:not(.cs-auth-ready) #cs-auth-signup,
html[data-cs-auth-panel="forgot"]:not(.cs-auth-ready) #cs-auth-signup,
html[data-cs-auth-panel="login"]:not(.cs-auth-ready) #cs-auth-forgot,
html[data-cs-auth-panel="signup"]:not(.cs-auth-ready) #cs-auth-forgot {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-cs-auth-panel="signup"]:not(.cs-auth-ready) #cs-auth-signup,
html[data-cs-auth-panel="forgot"]:not(.cs-auth-ready) #cs-auth-forgot,
html[data-cs-auth-panel="login"]:not(.cs-auth-ready) #cs-auth-login {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.cs-auth-panel__title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ff4d5a 0%, var(--cs-auth-accent) 50%, #ff8a94 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-auth-panel__lead {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  color: var(--cs-auth-muted);
}

.cs-auth-flash {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.cs-auth-flash.is-error {
  background: rgba(225, 29, 46, 0.12);
  border: 1px solid rgba(225, 29, 46, 0.35);
  color: #ffb4bb;
}

.cs-auth-flash.is-ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #b8f0c8;
}

.cs-auth-form {
  display: grid;
  gap: 1rem;
}

.cs-auth-form__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cs-auth-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.35rem 0 0;
}

.cs-auth-form__row .cs-auth-check {
  margin: 0;
}

.cs-auth-form__row .cs-auth-forgot-link {
  margin: 0;
  flex-shrink: 0;
}

.cs-auth-field {
  display: grid;
  gap: 0.4rem;
}

.cs-auth-field__label {
  font-size: 0.8125rem;
  color: var(--cs-auth-muted);
}

.cs-auth-field input {
  width: 100%;
  padding: 0.72rem 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid var(--cs-auth-input-border);
  background: var(--cs-auth-input-bg);
  color: var(--cs-auth-ink);
  font: inherit;
}

.cs-auth-field input::placeholder {
  color: rgba(166, 163, 158, 0.75);
}

.cs-auth-field input:focus {
  outline: none;
  border-color: rgba(225, 29, 46, 0.55);
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);
}

.cs-auth-field.is-invalid .cs-auth-field__wrap input,
.cs-auth-check-block.is-invalid .cs-auth-check input[type="checkbox"] {
  border-color: rgba(225, 29, 46, 0.7);
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.14);
}

.cs-auth-field__error {
  display: block;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #ff8a94;
}

.cs-auth-field__error[hidden] {
  display: none;
}

.cs-auth-check-block {
  display: grid;
  gap: 0.35rem;
}

.cs-auth-check-block .cs-auth-field__error {
  padding-left: 1.65rem;
}

.cs-auth-field__wrap {
  position: relative;
  display: block;
}

.cs-auth-field__wrap input {
  padding-left: 2.5rem;
}

.cs-auth-field__wrap--pwd input {
  padding-right: 2.35rem;
}

.cs-auth-field__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--cs-auth-accent);
  pointer-events: none;
}

.cs-auth-field__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cs-auth-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--cs-auth-muted);
  cursor: pointer;
  line-height: 1.35;
}

.cs-auth input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.05rem 0 0;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.cs-auth input[type="checkbox"]:hover {
  border-color: rgba(225, 29, 46, 0.65);
}

.cs-auth input[type="checkbox"]:checked {
  border-color: var(--cs-auth-accent);
  background-color: var(--cs-auth-accent);
  box-shadow: 0 0 0 2px rgba(225, 29, 46, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l2.8 2.8 6.2-6.2'/%3E%3C/svg%3E");
  background-size: 0.85rem 0.85rem;
  background-position: center;
  background-repeat: no-repeat;
}

.cs-auth input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(225, 29, 46, 0.55);
  outline-offset: 2px;
}

.cs-auth-check a {
  color: #ff6b76;
}

.cs-auth-pwd-inline {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.cs-auth-pwd-inline[hidden] {
  display: none;
}

.cs-auth-pwd-inline__bar {
  display: grid;
  grid-template-columns: repeat(4, 3px);
  gap: 2px;
  height: 0.85rem;
  align-items: end;
}

.cs-auth-pwd-inline__bar i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  height: 35%;
  transition: height 0.15s ease, background 0.15s ease;
}

.cs-auth-pwd-inline__bar[data-score="1"] i:nth-child(-n+1),
.cs-auth-pwd-inline__bar[data-level="weak"] i:nth-child(-n+1) {
  background: #e24a4a;
  height: 45%;
}

.cs-auth-pwd-inline__bar[data-score="2"] i:nth-child(-n+2),
.cs-auth-pwd-inline__bar[data-level="fair"] i:nth-child(-n+2) {
  background: #e6b43c;
  height: 60%;
}

.cs-auth-pwd-inline__bar[data-score="3"] i:nth-child(-n+3),
.cs-auth-pwd-inline__bar[data-level="good"] i:nth-child(-n+3) {
  background: #3ecf8e;
  height: 75%;
}

.cs-auth-pwd-inline__bar[data-score="4"] i,
.cs-auth-pwd-inline__bar[data-level="strong"] i {
  background: #3ecf8e;
  height: 100%;
}

.cs-auth-pwd-inline__tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  min-width: 10rem;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--cs-auth-ink);
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  z-index: 2;
}

.cs-auth-pwd-inline__tip.is-bad { color: #ffb4bb; }
.cs-auth-pwd-inline__tip.is-ok { color: #b8f0c8; }

.cs-auth-field__wrap--pwd:focus-within .cs-auth-pwd-inline:not([hidden]) .cs-auth-pwd-inline__tip:not(:empty) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.cs-auth-link {
  color: #ff6b76;
  text-decoration: none;
}

.cs-auth-forgot-link {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  color: #ff6b76;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}

.cs-auth-forgot-link:hover {
  text-decoration: underline;
}

.cs-auth-link:hover {
  text-decoration: underline;
}

.cs-auth-turnstile {
  min-height: 0;
}

/* Every panel reserves the widget footprint from first paint, so the iframe can
   land whenever it likes without ever resizing the card. line-height:0 plus a
   block-level iframe removes the inline descender that otherwise made the widget
   land 4px taller than the reserve. */
.cs-auth-turnstile.is-reserved {
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.cs-auth-turnstile iframe {
  display: block;
}

@media (max-width: 399px) {
  .cs-auth-turnstile.is-reserved {
    min-height: 140px; /* Turnstile compact */
  }
}

.cs-auth-btn {
  margin-top: 0.25rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4d5a 0%, var(--cs-auth-accent) 50%, var(--cs-auth-accent-deep) 100%);
  box-shadow: 0 8px 28px rgba(225, 29, 46, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cs-auth-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(225, 29, 46, 0.42);
}

.cs-auth-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.cs-auth-switch {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--cs-auth-muted);
}

.cs-auth-link-btn {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: #ff6b76;
  cursor: pointer;
  text-decoration: none;
}

.cs-auth-link-btn:hover {
  text-decoration: underline;
}

/* Mobile / tablet: form-only card (hide left brand column). */
@media (max-width: 860px) {
  .cs-auth-main {
    padding: 1.25rem 1rem 1.75rem;
  }

  .cs-auth-card {
    grid-template-columns: 1fr;
    width: min(100%, 26.5rem);
    min-height: 0;
  }

  .cs-auth-brand {
    display: none;
  }

  .cs-auth-forms {
    padding: 1.85rem 1.35rem 2rem;
  }
}

@media (max-width: 520px) {
  .cs-auth-main {
    padding: 1rem 0.85rem 1.5rem;
  }

  .cs-auth-card {
    width: 100%;
    border-radius: 1.15rem;
  }

  .cs-auth-forms {
    padding: 1.5rem 1.15rem 1.75rem;
  }

  .cs-auth-form__split {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-auth:not(.is-entered) .cs-auth-card,
  .cs-auth.is-entered .cs-auth-card,
  .cs-auth:not(.is-entered) .cs-auth-brand-enter,
  .cs-auth.is-entered .cs-auth-brand-enter,
  .cs-auth:not(.is-entered) .cs-auth-panel.is-active,
  .cs-auth.is-entered .cs-auth-panel.is-active,
  .cs-auth-panel.is-exiting,
  .cs-auth-panel.is-active.is-revealing {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .cs-auth-orb__halo--a,
  .cs-auth-orb__halo--b,
  .cs-auth-orb__ping {
    animation: none !important;
  }

  .cs-auth-orb__halo--a { opacity: 0.5; }
  .cs-auth-orb__halo--b { opacity: 0.3; }
  .cs-auth-orb__ping { opacity: 0; }

  .cs-auth-orb__icon,
  .cs-auth-orb:hover .cs-auth-orb__icon,
  .cs-auth-orb:active .cs-auth-orb__icon {
    transition: none;
    transform: none;
    filter: none;
  }

  .cs-auth-panel {
    transition: none;
  }

  .cs-auth-btn {
    transition: none;
  }
}