:root{
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --surface-muted:#F0F1F4;
  --ink:#11131A;
  --ink-soft:#565B68;
  --ink-faint:#8B909C;
  --line:#E4E6EB;
  --line-strong:#D1D4DC;
  --accent:#3652E8;
  --accent-dark:#2A40C4;
  --accent-soft:#EAEDFD;
  --success:#17864F;
  --success-soft:#E7F5EE;
  --danger:#D0392B;
  --danger-soft:#FCEAE8;
  --radius:12px;
  --shadow:0 1px 2px rgba(17,19,26,.04), 0 12px 32px -16px rgba(17,19,26,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:'Sora', sans-serif; margin:0; letter-spacing:-.01em;}
a{color:var(--accent);}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:.5;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 70%);
}
.input, input[type=text], input[type=email], input[type=password]{
  width:100%; padding:11px 13px; border:1px solid var(--line-strong); border-radius:9px;
  background:var(--surface); font-family:'Work Sans'; font-size:14.5px; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, input:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field-label{
  font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--ink-soft);
  margin-bottom:7px; display:block;
}
.btn{
  border:none; border-radius:9px; padding:12px 18px; font-family:'Work Sans'; font-weight:600;
  font-size:14.5px; cursor:pointer; transition:background .15s ease, transform .05s ease;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-primary:disabled{opacity:.5; cursor:default;}
.btn-ghost{background:transparent; border:1px solid var(--line-strong); color:var(--ink);}
.btn-ghost:hover{background:var(--surface-muted);}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600;}
.badge-success{background:var(--success-soft); color:var(--success);}
.badge-danger{background:var(--danger-soft); color:var(--danger);}
.error-text{color:var(--danger); font-size:13px; margin-top:8px;}