/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES — Hot 4D glass
   Shared by login.php and register.php
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --hot-pink:#ff2d95; --hot-orange:#ff6b35; --hot-purple:#a855f7; --hot-cyan:#00e5ff;
  --hot-lime:#a3e635; --hot-yellow:#fbbf24; --hot-red:#ef4444;
  --hot-card:rgba(20,20,35,.72); --hot-border:rgba(255,255,255,.08);
  --hot-text:#eaeaf5; --hot-muted:#8b8ba7;
  --hot-glow-pink:  0 0 24px -6px rgba(255,45,149,.75);
  --hot-glow-cyan:  0 0 24px -6px rgba(0,229,255,.75);
  --hot-glow-purple:0 0 24px -6px rgba(168,85,247,.75);
}

/* ── Page wrapper ────────────────────────────────────────────────── */
.auth-wrap,
.login-wrap {
  max-width: 440px;
  margin: 3.5rem auto 4rem;
  position: relative;
  z-index: 1;
}

/* ── Card with animated gradient border ─────────────────────────── */
.auth-card,
.login-card {
  position: relative;
  padding: 2px;
  border-radius: 22px;
  background: linear-gradient(135deg,
              rgba(255,45,149,.6),
              rgba(168,85,247,.6),
              rgba(0,229,255,.6),
              rgba(255,45,149,.6));
  background-size: 300% 300%;
  animation: authBorder 14s linear infinite;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 80px -30px rgba(255,45,149,.55),
    0 10px 30px -14px rgba(0,229,255,.4);
}
@keyframes authBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.auth-card-inner,
.login-card-inner {
  position: relative;
  border-radius: 20px;
  padding: 2rem 1.75rem 1.5rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,45,149,.10), transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(0,229,255,.10), transparent 55%),
    linear-gradient(160deg, rgba(20,20,35,.97), rgba(12,12,24,.99));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  overflow: hidden;
}
.auth-card-inner::before,
.login-card-inner::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
  opacity: .65;
}

/* ── Head / logo ─────────────────────────────────────────────────── */
.auth-head,
.login-head {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 1.5rem;
}
.auth-logo,
.login-logo {
  width: 56px; height: 56px;
  border-radius: 16px;
  margin: 0 auto .8rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--hot-pink), var(--hot-purple));
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -3px 0 rgba(0,0,0,.25) inset,
    0 12px 32px -10px rgba(255,45,149,.85);
  transform: perspective(200px) rotateX(2deg);
}
.auth-head h1,
.login-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #fff;
}
.auth-head p,
.login-head p {
  margin: .35rem 0 0;
  font-size: .88rem;
  color: var(--hot-muted);
}

/* ── Notices / errors ────────────────────────────────────────────── */
.auth-msg,
.login-msg {
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .5rem;
}
.auth-msg.err,
.login-msg.err  {
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(217,46,136,.18));
  border: 1px solid rgba(239,68,68,.45);
  color: #ffd7e0;
}
.auth-msg.ok,
.login-msg.ok   {
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(0,229,255,.14));
  border: 1px solid rgba(34,197,94,.45);
  color: #d7ffe6;
}
.auth-msg.info {
  background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(168,85,247,.14));
  border: 1px solid rgba(0,229,255,.4);
  color: #d6f7ff;
}
.auth-msg .am-icon,
.login-msg .lm-icon { font-size: 1rem; flex-shrink: 0; }

/* ── Social buttons ──────────────────────────────────────────────── */
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  position: relative; z-index: 1;
  margin-bottom: 1.25rem;
}
.social-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--hot-text);
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
  white-space: nowrap;
}
.social-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.9);
  text-decoration: none;
  color: #fff;
}
.social-btn:active { transform: translateY(0) scale(.97); }

.social-btn .sb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-weight: 900;
  font-size: .95rem;
  flex-shrink: 0;
}
.social-btn .sb-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-provider tint on hover */
.social-btn[data-p="google"]:hover    { border-color: #4285f4; box-shadow: 0 12px 28px -12px rgba(66,133,244,.9); }
.social-btn[data-p="facebook"]:hover  { border-color: #1877f2; box-shadow: 0 12px 28px -12px rgba(24,119,242,.9); }
.social-btn[data-p="apple"]:hover     { border-color: #ffffff; box-shadow: 0 12px 28px -12px rgba(255,255,255,.6); }
.social-btn[data-p="github"]:hover    { border-color: #8b949e; box-shadow: 0 12px 28px -12px rgba(139,148,158,.8); }
.social-btn[data-p="twitter"]:hover   { border-color: #ffffff; box-shadow: 0 12px 28px -12px rgba(255,255,255,.6); }
.social-btn[data-p="discord"]:hover   { border-color: #5865f2; box-shadow: 0 12px 28px -12px rgba(88,101,242,.9); }
.social-btn[data-p="linkedin"]:hover  { border-color: #0a66c2; box-shadow: 0 12px 28px -12px rgba(10,102,194,.9); }
.social-btn[data-p="microsoft"]:hover { border-color: #0078d4; box-shadow: 0 12px 28px -12px rgba(0,120,212,.9); }
.social-btn[data-p="tiktok"]:hover    { border-color: #25f4ee; box-shadow: 0 12px 28px -12px rgba(37,244,238,.8); }

/* ── Divider ─────────────────────────────────────────────────────── */
.auth-divider,
.login-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.1rem 0 1rem;
  position: relative; z-index: 1;
  color: var(--hot-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
}
.auth-divider::before,
.auth-divider::after,
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* ── Form ────────────────────────────────────────────────────────── */
.auth-form,
.login-form {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: .85rem;
}
.af-group,
.lf-group { position: relative; }

.af-label,
.lf-label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--hot-muted);
  margin-bottom: .35rem;
}
.af-input-wrap,
.lf-input-wrap { position: relative; }

.af-input,
.lf-input {
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: var(--hot-text);
  font-family: inherit;
  font-size: .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-sizing: border-box;
}
.af-input::placeholder,
.lf-input::placeholder { color: rgba(139,139,167,.6); }
.af-input:focus,
.lf-input:focus {
  outline: none;
  border-color: var(--hot-cyan);
  background: rgba(0,0,0,.5);
  box-shadow: 0 0 0 3px rgba(0,229,255,.15), var(--hot-glow-cyan);
}
.af-input.has-error,
.lf-input.has-error {
  border-color: rgba(239,68,68,.6);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.af-input.has-success {
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}
.af-input[type="password"],
.lf-input[type="password"] { padding-right: 3rem; }

.af-eye,
.lf-eye {
  position: absolute;
  right: .35rem; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--hot-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: color .15s, background .15s;
}
.af-eye:hover,
.lf-eye:hover { color: var(--hot-text); background: rgba(255,255,255,.06); }

/* ── Row / checkbox / links ──────────────────────────────────────── */
.af-row,
.lf-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  font-size: .82rem;
  margin-top: .15rem;
}
.af-check,
.lf-check {
  display: inline-flex; align-items: center; gap: .45rem;
  cursor: pointer;
  color: var(--hot-muted);
  font-weight: 600;
  user-select: none;
  line-height: 1.35;
}
.af-check input,
.lf-check input {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.af-check input:checked,
.lf-check input:checked {
  background: linear-gradient(135deg, var(--hot-pink), var(--hot-purple));
  border-color: transparent;
}
.af-check input:checked::after,
.lf-check input:checked::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem; font-weight: 900;
}
.af-check input:focus-visible,
.lf-check input:focus-visible { outline: 2px solid var(--hot-cyan); outline-offset: 2px; }
.af-check:hover,
.lf-check:hover { color: var(--hot-text); }

.af-link,
.lf-forgot {
  color: var(--hot-cyan);
  text-decoration: none;
  font-weight: 700;
}
.af-link:hover,
.lf-forgot:hover { text-decoration: underline; }

/* ── Submit button ───────────────────────────────────────────────── */
.af-submit,
.lf-submit {
  position: relative;
  margin-top: .35rem;
  padding: .8rem 1.2rem;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--hot-pink), var(--hot-purple) 55%, var(--hot-cyan));
  background-size: 200% 200%;
  animation: authBtn 6s ease-in-out infinite;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 0 rgba(0,0,0,.25) inset,
    0 14px 32px -12px rgba(255,45,149,.85);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s ease;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
@keyframes authBtn {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.af-submit:hover,
.lf-submit:hover    { filter: brightness(1.1); transform: translateY(-1px); }
.af-submit:active,
.lf-submit:active   { transform: translateY(0) scale(.98); }
.af-submit:disabled,
.lf-submit:disabled {
  filter: grayscale(.4) brightness(.8);
  cursor: not-allowed;
  animation: none;
}
.af-submit .af-spinner,
.lf-submit .lf-spinner {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: authSpin .7s linear infinite;
  display: none;
}
.af-submit.loading .af-spinner,
.lf-submit.loading .lf-spinner { display: inline-block; }
.af-submit.loading .af-text,
.lf-submit.loading .lf-text    { opacity: .7; }
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ── Caps-lock warning ───────────────────────────────────────────── */
.af-caps,
.lf-caps {
  display: none;
  align-items: center; gap: .35rem;
  font-size: .75rem;
  color: var(--hot-yellow);
  margin-top: .35rem;
  font-weight: 600;
}
.af-caps.show,
.lf-caps.show { display: inline-flex; }

/* ── Password strength meter (register) ─────────────────────────── */
.pw-meter {
  margin-top: .45rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}
.pw-meter > span {
  display: block; height: 100%; width: 0%;
  border-radius: inherit;
  background: var(--hot-red);
  transition: width .3s ease, background .3s ease;
}
.pw-meter[data-score="1"] > span { width: 25%;  background: var(--hot-red); }
.pw-meter[data-score="2"] > span { width: 50%;  background: var(--hot-orange); }
.pw-meter[data-score="3"] > span { width: 75%;  background: var(--hot-yellow); }
.pw-meter[data-score="4"] > span { width: 100%; background: var(--hot-lime); }
.pw-hint {
  display: block;
  font-size: .72rem;
  color: var(--hot-muted);
  margin-top: .3rem;
  font-weight: 600;
}

/* ── Terms row ───────────────────────────────────────────────────── */
.af-terms {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .85rem;
  border-radius: 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--hot-muted);
  cursor: pointer;
}
.af-terms input {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  cursor: pointer;
  margin-top: .1rem;
  flex-shrink: 0;
  position: relative;
  transition: background .15s, border-color .15s;
}
.af-terms input:checked {
  background: linear-gradient(135deg, var(--hot-pink), var(--hot-purple));
  border-color: transparent;
}
.af-terms input:checked::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 900;
}
.af-terms a { color: var(--hot-cyan); text-decoration: none; font-weight: 700; }
.af-terms a:hover { text-decoration: underline; }

/* ── Footer links ────────────────────────────────────────────────── */
.auth-foot,
.login-foot {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--hot-muted);
  position: relative; z-index: 1;
}
.auth-foot a,
.login-foot a {
  color: var(--hot-cyan);
  font-weight: 700;
  text-decoration: none;
}
.auth-foot a:hover,
.login-foot a:hover { text-decoration: underline; }
.auth-foot .sep { opacity: .4; margin: 0 .35rem; }

/* ── Legal line ──────────────────────────────────────────────────── */
.auth-legal,
.login-legal {
  text-align: center;
  font-size: .72rem;
  color: var(--hot-muted);
  margin-top: 1rem;
  line-height: 1.5;
  position: relative; z-index: 1;
}
.auth-legal a,
.login-legal a { color: var(--hot-muted); text-decoration: underline; }

/* ── Success / sent state (register → check your inbox) ─────────── */
.auth-sent {
  text-align: center;
  padding: 1rem .5rem .5rem;
  position: relative; z-index: 1;
}
.auth-sent .as-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  margin: 0 auto .85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  background: linear-gradient(135deg, var(--hot-lime), var(--hot-cyan));
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 12px 32px -10px rgba(0,229,255,.85);
}
.auth-sent h1 {
  margin: 0 0 .5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
}
.auth-sent p {
  margin: 0 0 .5rem;
  color: var(--hot-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.auth-sent strong { color: var(--hot-cyan); }
.auth-sent .as-actions {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1rem;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .login-card,
  .af-submit,
  .lf-submit,
  .social-btn,
  .af-input,
  .lf-input {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-wrap,
  .login-wrap { margin: 1.5rem auto 3rem; padding: 0 1rem; }
  .auth-card-inner,
  .login-card-inner { padding: 1.5rem 1.15rem 1.25rem; }
  .auth-head h1,
  .login-head h1 { font-size: 1.3rem; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .social-btn { font-size: .8rem; padding: .55rem .65rem; }
}