:root{
  --bg:#15181c; --card:#1a1e23; --line:#2a2f36;
  --ink:#e6e8eb; --ink-dim:#9aa3ad; --ink-faint:#6b7280;
  --accent:#6ea8ff; --good:#5ad19b; --danger:#ff6b6b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 600px at 50% -10%, #1d2430 0%, var(--bg) 60%);
  color:var(--ink); font-family:Inter,system-ui,sans-serif;
  display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:antialiased;
}
.login-shell{width:100%; padding:24px; display:flex; justify-content:center}
.login-card{
  width:100%; max-width:360px; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:34px 30px 28px;
  text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.brand-mark{
  font-size:11px; letter-spacing:.16em; color:var(--accent);
  text-transform:uppercase; font-weight:600; line-height:1.4;
}
.login-card h1{
  font-family:Newsreader,Georgia,serif; font-size:30px; font-weight:500;
  margin:10px 0 4px;
}
.tagline{font-size:13px; color:var(--ink-dim); margin:0 0 26px}

.pattern-grid{
  width:240px; height:240px; margin:0 auto; touch-action:none; user-select:none;
}
.pattern-svg{width:100%; height:100%; display:block}
.pattern-dot{
  fill:#222932; stroke:var(--line); stroke-width:2; transition:fill .12s, stroke .12s;
}
.pattern-dot.active{fill:var(--accent); stroke:var(--accent)}
.pattern-line{
  fill:none; stroke:var(--accent); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85;
}
.login-message{min-height:20px; margin:16px 0 4px; font-size:13px; color:var(--ink-dim)}
.login-message.error{color:var(--danger)}
.login-message.success{color:var(--good)}
.pattern-grid.shake{animation:shake .4s ease}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
.remember-row{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:14px; font-size:12px; color:var(--ink-faint); cursor:pointer;
}
.remember-row input{width:auto; accent-color:var(--accent)}