/* Blueprint login — same drafting-paper world as the board: near-white ground,
   faint blue grid, blueprint-blue accent, amber pop, playful + modern. */
:root{
  --paper:#ffffff; --bg:#f4f7fd; --bg-2:#eaf0fb;
  --grid:rgba(37,99,235,.06); --grid-strong:rgba(37,99,235,.11);
  --blue:#2563eb; --blue-deep:#1d4ed8; --blue-soft:#eef4ff; --blue-line:#dbe6fb;
  --ink:#0f1c3f; --soft:#5b6b8c; --line:#e4e9f2;
  --amber:#ff9f1c; --coral:#ff6b5e;
  --spring:cubic-bezier(.34,1.4,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}   /* author display rules must not override the hidden attr */
body{
  font-family:'Space Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); min-height:100dvh;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    radial-gradient(130% 100% at 50% -20%, var(--bg) 0%, var(--bg-2) 100%);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px,100% 100%;
  background-attachment:fixed;
  display:grid; place-items:center; padding:24px;
}
.login-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px}
.card{
  width:100%; background:var(--paper); border:1px solid var(--line);
  border-radius:22px; padding:34px 28px 30px; text-align:center;
  box-shadow:0 2px 4px rgba(15,28,63,.05),0 24px 50px -18px rgba(37,99,235,.24);
}
.logo{
  width:62px;height:62px;margin:0 auto 16px;border-radius:18px;
  background:linear-gradient(150deg,#fff,var(--blue-soft));
  border:1px solid var(--blue-line);box-shadow:0 1px 2px rgba(15,28,63,.06);
  display:grid;place-items:center;font-size:2rem;
}
h1{font-family:'Fredoka',sans-serif;font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.sub{color:var(--soft);font-size:.92rem;margin-top:10px;line-height:1.4}
.err{
  margin-top:16px;background:#fff1ef;border:1px solid #ffd7d1;color:#c0392b;
  border-radius:12px;padding:10px 12px;font-size:.85rem;font-weight:600;
}
.btn{
  display:block;width:100%;border:none;border-radius:14px;padding:15px 18px;
  font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;
  transition:transform .14s var(--spring),box-shadow .14s,background .14s;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  margin-top:22px;background:var(--blue);color:#fff;
  box-shadow:0 8px 18px -6px rgba(37,99,235,.55);
}
.btn.primary:hover{background:var(--blue-deep)}
.btn.ghost{
  background:var(--blue-soft);color:var(--blue-deep);border:1px solid var(--blue-line);
}
.btn.ghost:hover{background:#e3edff}
.btn.link{background:none;color:var(--soft);border:1px solid var(--line);margin-top:10px;font-weight:500}
.btn.link:hover{background:var(--blue-soft);color:var(--blue-deep)}
.ok{margin-top:14px;background:var(--blue-soft);border:1px solid var(--blue-line);color:var(--blue-deep);border-radius:12px;padding:10px 12px;font-size:.85rem;font-weight:600}
.hint{color:var(--soft);font-size:.78rem;margin-top:12px;line-height:1.4}
.or{display:flex;align-items:center;gap:12px;margin:18px 2px 4px;color:var(--soft)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.or span{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#pwForm{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pw{
  width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fbfcfe;
  transition:border-color .14s,box-shadow .14s;
}
.pw:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.foot{color:var(--soft);font-size:.78rem;font-weight:600}
.spin{display:flex;gap:7px;justify-content:center;margin-top:20px}
.spin .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);animation:bounce 1s infinite ease-in-out}
.spin .dot:nth-child(2){animation-delay:.15s;background:var(--amber)}
.spin .dot:nth-child(3){animation-delay:.3s;background:var(--coral)}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}