/* =====================================================================
   FUSION AUTH SHELL — shared auth-surface primitives (auth-unify Slice C)
   Canon source: login.html (F3 neon family, RELAY-14 rulings).
   SCOPE RULE: every rule lives under .fs-auth (a wrapper class on the
   page's auth container) — NEVER body — so page chrome (scanlines, logo,
   tabs, fusion-header) stays page-local. Skin enters ONLY through the
   --fs-* tokens (R5); structure is platform-wide (R7).
   Primitives only by design: tabs, loading-bar, checkbox, avatar grid,
   toggles, danger zone and the strength meter stay page-local.
   ===================================================================== */

.fs-auth {
  --fs-pink: #ff006e;
  --fs-purple: #8338ec;
  --fs-cyan: #00f5ff;
  --fs-error-text: #ff6b9d;
  --fs-surface: rgba(26, 26, 46, 0.95);
  --fs-muted: #888;
  --fs-font-display: 'Righteous', cursive;
  --fs-font-body: 'Roboto', sans-serif;
  --fs-autofill-fill: #1a1a2e;
}

/* ─── Box ─── */
.fs-auth .auth-box {
  background: var(--fs-surface);
  border: 2px solid var(--fs-purple);
  border-radius: 20px;
  padding: 40px 35px;
  box-shadow: 0 0 30px rgba(131, 56, 236, 0.3), inset 0 0 30px rgba(0, 245, 255, 0.05);
}

/* ─── Form ─── */
.fs-auth .form-group { margin-bottom: 20px; }
.fs-auth .form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--fs-cyan);
  font-size: 14px;
  font-weight: 500;
}
/* (C⑤) text-class inputs ONLY: a checkbox/radio inside a .form-group must
   never inherit the text-field skin. The un-guarded selector out-specified
   the page's .checkbox-label input[type=checkbox] hider on S10 signup —
   the marketing checkbox rendered as a cyan bar and grew the panel (the
   W1/W2 defect, one cause). */
.fs-auth .form-group input:not([type="checkbox"]):not([type="radio"]),
.fs-auth .form-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 14px 18px;
  background: rgba(0, 245, 255, 0.05);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
  font-family: var(--fs-font-body);
  box-sizing: border-box;
}
.fs-auth .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.fs-auth .form-input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: var(--fs-cyan);
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
  background: rgba(0, 245, 255, 0.1);
}
.fs-auth .form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.fs-auth .form-input:not([type="checkbox"]):not([type="radio"])::placeholder { color: #666; }

/* (W4 mirror) WebKit autofill counter on --fs-* tokens: the UA's pale
   autofill paint torches the neon box. Solid-token inset fill (the box
   surface is rgba .95 — alpha would bleed the UA yellow through) + white
   text-fill/caret; focus keeps the cyan glow OUTSIDE the fill. */
.fs-auth .form-group input:-webkit-autofill,
.fs-auth .form-input:-webkit-autofill,
.fs-auth .form-group input:-webkit-autofill:hover,
.fs-auth .form-input:-webkit-autofill:hover {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px var(--fs-autofill-fill) inset;
  box-shadow: 0 0 0 1000px var(--fs-autofill-fill) inset;
  transition: background-color 9999s ease-out 0s;
}
.fs-auth .form-group input:-webkit-autofill:focus,
.fs-auth .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  -webkit-box-shadow: 0 0 15px rgba(0, 245, 255, 0.3), 0 0 0 1000px var(--fs-autofill-fill) inset;
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.3), 0 0 0 1000px var(--fs-autofill-fill) inset;
}

/* Password show/hide toggle (R7 platform structure, C①) */
.fs-auth .password-wrapper { position: relative; }
.fs-auth .password-wrapper input,
.fs-auth .password-wrapper .form-input { padding-right: 58px; }
.fs-auth .password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fs-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 4px;
  font-family: var(--fs-font-body);
  transition: color 0.3s ease;
}
.fs-auth .password-toggle:hover { color: var(--fs-cyan); }

.fs-auth .password-mismatch {
  color: var(--fs-pink);
  font-size: 12px;
  margin-top: 5px;
  display: none;
}
.fs-auth .password-mismatch.show { display: block; }

/* ─── Submit Button ─── */
.fs-auth .submit-btn {
  /* (D17) the sent-state type treatment IS the button standard now:
     mixed case, 15px, 1px tracking — idle/sent/countdown read as one
     family. Size/gradient/weight unchanged. */
  width: 100%;
  padding: 16px;
  background: linear-gradient(90deg, var(--fs-pink), var(--fs-purple));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  font-family: var(--fs-font-body);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
}
.fs-auth .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 0, 110, 0.4); }
.fs-auth .submit-btn:disabled { opacity: 0.8; cursor: not-allowed; transform: none; }
/* (D16) dynamic label swaps must stay in the page family, one line. */
.fs-auth .submit-btn .btn-text { font-family: inherit; }
.fs-auth .submit-btn.sent { white-space: nowrap; }

/* Inline variant for in-page forms (account settings, C④): same skin,
   inline metrics. */
.fs-auth .submit-btn--inline {
  display: inline-flex;
  width: auto;
  min-height: 0;
  padding: 12px 22px;
  font-size: 14px;
  margin-top: 0;
  gap: 8px;
}

/* ─── Neon Spinner ─── */
.fs-auth .spinner {
  display: none;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--fs-cyan);
  border-right-color: var(--fs-pink);
  border-radius: 50%;
  animation: fs-neon-spin 0.8s linear infinite;
}
.fs-auth .submit-btn.loading .spinner { display: inline-block; }
@keyframes fs-neon-spin {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px #00f5ff, 0 0 10px #00f5ff;
  }
  50% {
    box-shadow: 0 0 5px #ff006e, 0 0 10px #ff006e;
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 5px #00f5ff, 0 0 10px #00f5ff;
  }
}

/* ─── Messages ─── */
.fs-auth .message {
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 14px;
  display: none;
}
.fs-auth .message.error {
  display: block;
  background: rgba(255, 0, 110, 0.2);
  border: 1px solid var(--fs-pink);
  color: var(--fs-error-text);
}
.fs-auth .message.success {
  display: block;
  background: rgba(0, 245, 255, 0.2);
  border: 1px solid var(--fs-cyan);
  color: var(--fs-cyan);
}

/* ─── Links / Divider / Info ─── */
.fs-auth .back-link { text-align: center; margin-top: 25px; }
.fs-auth .back-link a {
  color: var(--fs-cyan);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}
.fs-auth .back-link a:hover { color: var(--fs-pink); }

.fs-auth .divider { display: flex; align-items: center; margin: 25px 0; }
.fs-auth .divider::before,
.fs-auth .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(131, 56, 236, 0.5), transparent);
}
.fs-auth .divider span {
  padding: 0 15px;
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.fs-auth .info-text {
  text-align: center;
  color: var(--fs-muted);
  font-size: 13px;
  line-height: 1.6;
}
.fs-auth .info-text strong { color: var(--fs-cyan); }