:root {
  --ink:#0f172a; --muted:#64748b; --line:#e8edf3; --accent:#2563eb;
  --bg1:#eef3fb; --bg2:#f7f4ff;
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100vh; color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display:flex; justify-content:center; align-items:flex-start; padding:56px 20px;
}
.card {
  width:100%; max-width:600px; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:44px 44px 40px;
  box-shadow:0 24px 60px -28px rgba(15,23,42,.28);
}
.avatar {
  display:block; width:112px; height:112px; border-radius:50%; object-fit:cover;
  object-position:center 20%; margin:0 auto 18px; border:4px solid #fff;
  box-shadow:0 8px 24px -8px rgba(15,23,42,.35), 0 0 0 1px var(--line);
}
.badge { display:flex; justify-content:center; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--muted); margin:0 0 18px; }
.dot { width:9px; height:9px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15); }
h1 { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:0 0 18px; text-align:center; }
.intro { font-size:16px; color:#334155; margin:0 0 28px; text-align:center; }
.chips-label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px; }
.chips { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:7px; }
.chip { font-size:13px; padding:5px 11px; border-radius:999px; background:#f1f5f9;
  color:#475569; border:1px solid #e8edf3; }
hr { border:0; border-top:1px solid var(--line); margin:28px 0; }
label { display:block; font-size:13px; font-weight:600; margin:0 0 7px; color:#334155; }
.req { color:var(--accent); }
input, textarea {
  width:100%; padding:12px 14px; border:1px solid #d6deea; border-radius:11px;
  font:inherit; background:#fbfcfe; color:var(--ink); margin-bottom:18px;
}
textarea { min-height:120px; resize:vertical; }
input:focus, textarea:focus {
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
button {
  width:100%; background:var(--accent); color:#fff; border:0; border-radius:11px;
  padding:13px; font:inherit; font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(37,99,235,.6);
}
button:disabled { opacity:.6; cursor:default; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.status { margin:14px 0 0; font-size:14px; text-align:center; min-height:1.2em; outline:none; }
.status.ok { color:#15803d; }
.status.err { color:#b91c1c; }
.foot { text-align:center; margin:18px 0 0; font-size:12px; color:#94a3b8; }

@media (max-width:480px) {
  body { padding:24px 12px; }
  .card { padding:30px 22px 26px; border-radius:16px; }
  h1 { font-size:28px; }
}