:root{
  --accent:#18a957;
  --bg:#ffffff;
  --text:#0e1626;
  --muted:#5f6b7a;
  --line:rgba(15,23,42,.10);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.topbar{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand__dot{width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(24,169,87,.16)}
.brand__text{font-weight:800}
.pill{border:1px solid var(--line);padding:8px 12px;border-radius:999px;background:#fff;color:rgba(14,22,38,.75);font-weight:700}

.wrap{max-width:1120px;margin:0 auto;padding:34px 18px 90px}

.kicker{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(14,22,38,.55);
}
h1{
  margin:10px 0 10px;
  font-family:ui-serif,Georgia,"Times New Roman",Times,serif;
  font-weight:900;
  letter-spacing:-.02em;
  font-size:clamp(34px,4.2vw,62px);
  line-height:1.02;
}
.muted{color:var(--muted);max-width:70ch;line-height:1.6;margin:0}

.hero{padding:12px 0 18px}

.auth{display:flex;justify-content:center;margin-top:18px}
.auth__card{
  width:min(520px,100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  padding:18px;
}

.tabs{display:flex;gap:10px;margin-bottom:14px}
.tab{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  color:rgba(14,22,38,.85);
  font-weight:800;
  background:#fff;
}
.tab.active{
  border-color:rgba(24,169,87,.35);
  background:rgba(24,169,87,.08);
}

.form__row{display:flex;justify-content:flex-end;margin-top:10px}
.smalllink{
  color:rgba(14,22,38,.75);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.smalllink:hover{color:var(--text);text-decoration:underline}

.form label{display:block;margin:12px 0 6px;font-weight:700;color:rgba(14,22,38,.75)}
.form input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  outline:none;
  font-size:15px;
}
.form input:focus{border-color:rgba(24,169,87,.55);box-shadow:0 0 0 4px rgba(24,169,87,.14)}

.btn{
  width:100%;
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{filter:brightness(.98)}

.msg{margin:10px 0 12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);font-weight:700}
.msg.err{background:rgba(255,0,60,.06);border-color:rgba(255,0,60,.22);color:rgba(120,0,22,.95)}
.msg.ok{background:rgba(24,169,87,.08);border-color:rgba(24,169,87,.28);color:rgba(8,70,32,.95)}