/* ==========================================================================
   S4U — Login (V1 Cinematic, image-free)
   Page composition only. Tokens + primitives live in design-system.css.
   ========================================================================== */

.s4u-login{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:96px 24px;
  background:var(--ink);
}

/* Elegant dark backdrop — layered gradients + vignette (no photo).
   Cool light pools top-right, a faint plum bottom-left, over a diagonal base. */
.s4u-login__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(95% 75% at 80% 12%, rgba(82,90,116,0.30) 0%, rgba(20,20,30,0) 56%),
    radial-gradient(75% 65% at 8% 92%, rgba(54,46,68,0.22) 0%, rgba(10,10,14,0) 52%),
    linear-gradient(135deg, #16161f 0%, #0c0c12 50%, #070709 100%);
}
.s4u-login__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(135% 105% at 50% 22%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.55) 100%);
}

/* ---- top bar ---- */
.s4u-login__top{
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding:28px 56px;
  display:flex; align-items:center; justify-content:space-between;
}
.s4u-wordmark{ display:flex; align-items:center; gap:10px; }
.s4u-wordmark img{ width:40px; height:auto; }
/* brand wordmark: full metallic gold to match the logo (intentional gold-on-chrome exception) */
.s4u-wordmark .mark{
  font-size:22px; font-weight:500; letter-spacing:-0.01em;
  color:#e9c878; /* fallback if background-clip:text is unsupported */
  background:linear-gradient(180deg, #f7e6ad 0%, #e9c878 38%, #cda154 70%, #b08a3c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.s4u-login__top .top-link{ font-size:13px; color:var(--t-secondary); }
.s4u-login__top .top-link a{ color:var(--accent); border-bottom:1px solid rgba(212,175,107,0.5); padding-bottom:1px; }
.s4u-login__top .top-link a:hover{ border-bottom-color:var(--accent); }

/* ---- glass card ---- */
.s4u-card{
  position:relative; z-index:3;
  width:420px; max-width:100%;
  padding:52px 48px;
  background:rgba(14,14,18,0.62);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
  border:1px solid var(--hairline);
  border-radius:4px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,0.8);
}
.s4u-card .eyebrow{ color:var(--t-muted); margin-bottom:18px; }
.s4u-card h1{ font-size:34px; font-weight:400; line-height:1.05; margin:0 0 8px; }
.s4u-card .lead{ font-size:13.5px; color:var(--t-secondary); margin:0 0 32px; line-height:1.5; }

/* fields */
.s4u .field + .field{ margin-top:22px; }
.s4u-field-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.s4u-field-top a{ font-size:12px; color:var(--t-secondary); }
.s4u-field-top a:hover{ color:#fff; }

/* keep me signed in */
.s4u-remember{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:13px; color:var(--t-secondary); cursor:pointer; }
.s4u-remember input{ width:14px; height:14px; accent-color:var(--accent); }

.s4u-card .btn-primary{ margin-top:28px; }

/* referral promo (S4URef cookie) */
.s4u-promo{
  margin:0 0 24px; padding:14px 16px;
  border-radius:4px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--hairline);
  border-left:2px solid var(--accent);
  font-size:13px; line-height:1.5; color:var(--t-secondary);
  cursor:pointer;
}
.s4u-promo b{ color:#fff; font-weight:600; }

/* secondary link line under a form (e.g. "New to S4U? Create an account") */
.s4u-card__alt{ margin-top:22px; font-size:13px; color:var(--t-secondary); }
.s4u-card__alt a{ color:var(--accent); border-bottom:1px solid rgba(212,175,107,0.45); padding-bottom:1px; }
.s4u-card__alt a:hover{ border-bottom-color:var(--accent); }

/* small muted note (confirmation pages) */
.s4u-note{ margin-top:14px; font-size:12.5px; color:var(--t-tertiary); line-height:1.5; }

/* validation summary spacing */
.s4u-card .validation-summary-errors{ margin:0 0 16px; }

/* thin page-unload progress bar */
.s4u-progress{ height:2px; width:100%; overflow:hidden; margin:0 0 18px; background:rgba(255,255,255,0.08); }
.s4u-progress .bar{ height:100%; width:40%; background:var(--accent); animation:s4u-indeterminate 1.1s infinite ease-in-out; }
@keyframes s4u-indeterminate{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }

/* footer */
.s4u-login__footer{
  position:absolute; bottom:24px; right:56px; z-index:3;
  font-size:11.5px; color:var(--t-tertiary); letter-spacing:0.04em;
}

/* ---- responsive ---- */
@media (max-width:640px){
  .s4u-login{ padding:88px 18px 64px; align-items:flex-start; }
  .s4u-login__top{ padding:20px; }
  .s4u-card{ width:100%; max-width:420px; padding:40px 28px; }
  .s4u-login__footer{ left:0; right:0; bottom:16px; text-align:center; }
}
@media (max-width:380px){
  .s4u-card{ padding:32px 20px; }
}