:root {
  color-scheme: dark;
  --bg:#101214;
  --panel:#1b1e22;
  --panel-2:#24282d;
  --text:#f5f7f8;
  --muted:#aeb6be;
  --line:#3a4047;
  --accent:#5ea4ff;
  --accent-hover:#7db6ff;
  --danger:#ffb2b2;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body {
  margin:0; min-height:100vh; color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(94,164,255,.16), transparent 34rem),
    linear-gradient(145deg,#111315,#191c20 58%,#0d0f11);
}
.landing-shell,.login-shell {
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.landing-card,.login-card {
  width:min(580px,100%); padding:clamp(30px,6vw,58px);
  border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(160deg,rgba(38,42,47,.97),rgba(23,26,30,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.login-card { width:min(470px,100%); }
.brand { font-size:.78rem; font-weight:700; letter-spacing:.17em; color:var(--accent); }
.eyebrow { margin:28px 0 8px; color:var(--muted); font-size:.88rem; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(2rem,7vw,3.5rem); line-height:1.02; letter-spacing:-.035em; }
.login-card h1 { font-size:clamp(1.9rem,7vw,2.8rem); }
.intro { margin:22px 0 30px; color:#d7dce0; font-size:1.05rem; line-height:1.65; }
.primary-button {
  display:inline-flex; min-height:48px; align-items:center; justify-content:center;
  padding:0 24px; border:0; border-radius:8px; background:var(--accent); color:#07111c;
  font:700 1rem Arial,Helvetica,sans-serif; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(94,164,255,.2);
}
.primary-button:hover { background:var(--accent-hover); }
.primary-button:focus-visible,.back-link:focus-visible,input:focus-visible { outline:3px solid rgba(94,164,255,.55); outline-offset:3px; }
.access-note { margin:22px 0 0; color:var(--muted); font-size:.86rem; }
.back-link { display:inline-block; margin-bottom:28px; color:#cbd3da; text-decoration:none; }
.back-link:hover { color:#fff; }
form { display:grid; gap:10px; }
label { margin-top:8px; color:#e8ebee; font-weight:700; font-size:.92rem; }
input {
  width:100%; min-height:48px; padding:10px 13px; border:1px solid #505861;
  border-radius:7px; background:#101316; color:#fff; font:1rem Arial,Helvetica,sans-serif;
}
.form-button { width:100%; margin-top:18px; }
.error-message {
  margin:-8px 0 18px; padding:12px 14px; border:1px solid #784646; border-radius:7px;
  background:#3a2022; color:var(--danger); line-height:1.4;
}
@media (max-width:520px) {
  .landing-shell,.login-shell { padding:14px; }
  .landing-card,.login-card { padding:28px 22px; border-radius:13px; }
}