@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#fbfaff; --ink:#13112b; --ink2:#5b5874; --line:rgba(20,18,45,.10);
  --violet:#6b5cff; --purple:#a855f7; --pink:#f472b6; --orange:#fb923c; --cyan:#22d3ee;
  --grad:linear-gradient(120deg,#6b5cff,#a855f7 40%,#f472b6 72%,#fb923c);
  --glass:rgba(255,255,255,.66); --radius:22px;
  --head:"Outfit",system-ui,sans-serif; --body:"Plus Jakarta Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--body);color:var(--ink);line-height:1.5;background:var(--bg);min-height:100vh;overflow-x:hidden;position:relative}
/* animated aurora background */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(560px circle at 12% 12%, rgba(107,92,255,.55), transparent 60%),
    radial-gradient(520px circle at 88% 18%, rgba(244,114,182,.5), transparent 60%),
    radial-gradient(560px circle at 20% 88%, rgba(34,211,238,.5), transparent 60%),
    radial-gradient(520px circle at 86% 84%, rgba(251,146,60,.45), transparent 60%);
  filter:blur(20px);animation:floaty 20s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-20px,18px)}}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.03em;line-height:1.1}
a{color:var(--violet);text-decoration:none}a:hover{text-decoration:underline}

nav{position:fixed;inset:0 0 auto 0;height:64px;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:rgba(255,255,255,.6);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid var(--line)}
nav .brand{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--ink);display:flex;align-items:center;gap:9px}
nav .brand:hover{text-decoration:none}
nav .brand::before{content:"";width:26px;height:26px;border-radius:8px;background:url('/static/brand/icon-192.png') center/cover,#0b0a18;box-shadow:0 4px 14px rgba(107,92,255,.5)}
nav .links{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:500}
nav .links a:not(.pill){color:var(--ink2)}nav .links a:not(.pill):hover{color:var(--ink);text-decoration:none}
.pill{background:var(--grad);color:#fff!important;padding:9px 20px;border-radius:980px;font-weight:600;
  box-shadow:0 8px 22px rgba(107,92,255,.32);transition:transform .25s,box-shadow .25s}
.pill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(168,85,247,.42);text-decoration:none}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:104px 22px 60px}
.box{width:100%;max-width:420px;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 36px;backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(60,40,140,.18)}
.box h1{font-size:34px;font-weight:800;letter-spacing:-.04em}
.box .sub{color:var(--ink2);margin:8px 0 26px;font-weight:500}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;font-family:var(--head);margin-bottom:7px;color:var(--ink)}
.field input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font-family:var(--body);font-size:15.5px;
  background:rgba(255,255,255,.8);color:var(--ink);transition:border-color .2s,box-shadow .2s;outline:none}
.field input:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(107,92,255,.15)}
.field input::placeholder{color:#a6a3bd}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--head);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:980px;border:none;cursor:pointer;background:var(--grad);color:#fff;background-size:200% 200%;
  box-shadow:0 12px 30px rgba(107,92,255,.38);transition:transform .25s,box-shadow .25s,opacity .2s;animation:shift 6s ease infinite}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(168,85,247,.48);text-decoration:none}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-block{width:100%;margin-top:6px}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.msg{display:none;margin-top:14px;font-size:14px;font-weight:500;padding:11px 14px;border-radius:12px}
.msg.show{display:block}
.msg.error{background:rgba(244,63,94,.1);color:#e11d48;border:1px solid rgba(244,63,94,.25)}
.msg.ok{background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.28)}
.alt{margin-top:22px;text-align:center;font-size:14px;color:var(--ink2)}

/* footer (matches the landing page) */
footer{border-top:1px solid var(--line);padding:40px 24px;background:rgba(255,255,255,.5)}
footer .inner{max-width:1140px;margin:0 auto;color:var(--ink2);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink2);font-weight:500}
footer a:hover{color:var(--ink)}
footer .flinks{display:flex;gap:16px;flex-wrap:wrap}