:root{
  --bg:#0a0c10;
  --surf:#12161d;
  --surf-2:#0e1218;
  --line:#242933;
  --ink:#ffffff;
  --muted:#9aa0ad;
  /* Dark surface -> the PALE form of the brand accent, the same inversion the landing's
     .beat section makes. See landing.css :root. */
  --accent:#b8c4dc;
  --accent-2:#8fa0c4;
  --accent-ink:#0d1420;
  --accent-rgb:184,196,220;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  /* Black canvas with warm yellow light bleeding in from the corners. */
  background:
    radial-gradient(60% 55% at 0% 0%, rgba(var(--accent-rgb),.20), transparent 60%),
    radial-gradient(60% 55% at 100% 100%, rgba(var(--accent-rgb),.16), transparent 60%),
    radial-gradient(45% 45% at 100% 0%, rgba(var(--accent-rgb),.08), transparent 60%),
    radial-gradient(45% 45% at 0% 100%, rgba(var(--accent-rgb),.08), transparent 60%),
    var(--bg);
}
.card{
  width:100%;
  max-width:400px;
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px 32px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* row, not column: the mark + wordmark are one lockup, not two stacked elements */
.brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:center;margin-bottom:26px;
}
.brand img{height:26px;filter:brightness(0) invert(1);display:block}
/* The mark keeps its own brand colours — see the same rule in landing.css.
   The shared brand fragment ships TWO marks: brand-mark.svg (ink, for light surfaces) and
   brand-mark-light.svg (white, for dark ones). This card is DARK, so it shows the light one
   and hides the ink one - the «LS24» logo's ink shapes would vanish on it. (The navy shield it
   replaced read on both, which is why this used to be the other way round.)
   The selector has to OUT-SPECIFY `.brand img{display:block}` two rules up: a bare one is
   (0,1,0) and loses to (0,1,1), which once rendered both marks side by side here. */
.brand .brand-mark:not(.brand-mark-light){display:none}

.brand .brand-mark{height:46px;width:46px;flex:none;filter:none}
/* brand display font, wordmark only — no Cyrillic in it, see fonts.css */
h1{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  margin:0 0 4px;text-align:center;
}
.hint{color:var(--muted);font-size:.9rem;margin:0 0 24px;text-align:center}
.field{margin-bottom:16px}
.field label{
  display:block;font-size:.82rem;font-weight:600;
  color:var(--muted);margin-bottom:7px;letter-spacing:.01em;
}
.field input{
  width:100%;
  background:var(--surf-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  padding:12px 14px;
  font-size:16px; /* 16px avoids iOS zoom-on-focus */
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:#5c626e}
.field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
button{
  width:100%;
  margin-top:8px;
  background:var(--accent);
  color:var(--accent-ink);
  border:0;
  border-radius:10px;
  padding:13px 16px;
  font-size:.98rem;font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}
button:hover{background:var(--accent-2)}
button:active{transform:translateY(1px)}
.alert{
  border-radius:10px;
  padding:11px 14px;
  font-size:.88rem;
  margin-bottom:20px;
  line-height:1.4;
}
.alert.error{
  color:#ffd5d5;
  background:rgba(255,107,107,.10);
  border:1px solid rgba(255,107,107,.35);
}
.alert.info{
  color:#cfe9ff;
  background:rgba(120,180,255,.10);
  border:1px solid rgba(120,180,255,.30);
}