/* ============================================================
   ASSEMBLE — Auth pages (login.html / register.html)
   Additive styles on top of css/style.css — same dark hero
   theme: blood red + amber accents, mono labels, Anton display.
   ============================================================ */

/* ---------- split-shell layout ---------- */
.auth-shell{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  min-height:100vh;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(224,41,62,0.12), transparent 70%),
    #0a0a0d;
}

/* ---------- left visual panel ---------- */
.auth-visual{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px 48px;
  overflow:hidden;
  border-right:1px solid #232028;
}
.auth-visual .img-slot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:saturate(0.9) brightness(0.55);
}
/* fade the photo into the panel so text stays readable */
.auth-visual::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.55) 0%, transparent 35%, transparent 60%, rgba(10,10,13,0.85) 100%);
  pointer-events:none;
}
.auth-visual .quote{
  font-family:'Anton', sans-serif;
  font-size:clamp(26px, 3.2vw, 42px);
  line-height:1.08;
  text-transform:uppercase;
  color:#eee9e4;
  max-width:22ch;
}
.auth-visual .quote span{ color:var(--blood, #e0293e); }
.auth-visual .quote-by{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.14em;
  color:#9a949c; margin-top:18px;
}

/* ---------- right form panel ---------- */
.auth-form-side{
  display:flex; align-items:center; justify-content:center;
  padding:64px 40px;
  position:relative; z-index:2;
}
.auth-form h1{
  font-family:'Anton', sans-serif;
  font-weight:400; text-transform:uppercase;
  font-size:clamp(32px, 4vw, 44px);
  letter-spacing:.5px;
  color:#eee9e4;
}
.auth-form .sub{ color:#9a949c; line-height:1.6; }

/* ---------- fields ---------- */
.field label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#9a949c;
}
.field input, .field select{
  background:#131217;
  border:1px solid #232028;
  border-radius:4px;
  color:#eee9e4;
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus{
  outline:none;
  border-color:var(--blood, #e0293e);
  box-shadow:0 0 0 3px rgba(224,41,62,0.15);
}
.field.invalid input, .field.invalid select{
  border-color:var(--blood, #e0293e);
  box-shadow:0 0 0 3px rgba(224,41,62,0.12);
}

/* ---------- registration success card ---------- */
.reg-result{
  margin-top:30px;
  padding:24px;
  border:1px solid rgba(242,165,65,0.35);
  border-left:2px solid var(--amber, #f2a541);
  border-radius:4px;
  background:linear-gradient(90deg, rgba(242,165,65,0.07), rgba(224,41,62,0.05));
  animation:flicker .4s ease;
}
@keyframes flicker{
  0%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 880px){
  .auth-shell{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .auth-form-side{ padding:48px 24px; }
}