:root { --p:#5B21B6; --pd:#3B0A78; --gold:#F5B82E; --bg:#F7F4FC; --text:#1E1240; --muted:#6B6585; --border:#E9E3F5; --danger:#DC2626; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 -apple-system, "Segoe UI", Roboto, Poppins, sans-serif; }
a { color:var(--p); }
.top { display:flex; align-items:center; gap:16px; padding:14px 20px; background:linear-gradient(120deg,var(--pd),var(--p)); flex-wrap:wrap; }
.top .brand { color:#fff; font-weight:700; font-size:20px; text-decoration:none; margin-right:auto; }
.top .brand::first-letter { color:var(--gold); }
.top nav a { color:#fff; opacity:.9; text-decoration:none; margin-left:16px; font-size:14px; }
.doc { max-width:760px; margin:24px auto; padding:28px 22px; background:#fff; border-radius:18px; box-shadow:0 4px 18px rgba(59,10,120,.08); }
@media (max-width:820px) { .doc { margin:0; border-radius:0; } }
h1 { margin:0 0 6px; font-size:28px; line-height:1.25; }
h2 { margin:28px 0 8px; font-size:19px; color:var(--pd); }
h3 { margin:16px 0 6px; font-size:16px; }
.meta { color:var(--muted); margin-top:0; }
li { margin:4px 0; }
code { background:#F1EDF9; padding:1px 6px; border-radius:6px; }
.card { border:1px solid var(--border); border-radius:14px; padding:18px; margin:12px 0 8px; background:#FBF9FF; }
label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; }
label.check { font-weight:400; display:flex; gap:8px; align-items:flex-start; margin:12px 0; }
.row { display:flex; gap:8px; }
input, select { font:inherit; padding:11px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; width:100%; }
select { width:auto; }
button { margin-top:12px; font:inherit; font-weight:600; border:0; border-radius:12px; padding:12px 18px; cursor:pointer; background:linear-gradient(90deg,#F8C94A,#E89B1F); color:#1E0B4B; width:100%; }
button.danger { background:var(--danger); color:#fff; }
button:disabled { opacity:.6; cursor:default; }
.msg { min-height:1.4em; margin:10px 0 0; font-size:14px; color:var(--muted); }
.msg.err { color:var(--danger); }
.ok { color:#16A34A; font-weight:600; margin:0; }
.foot { text-align:center; color:var(--muted); font-size:13px; padding:20px; }
.hero { max-width:760px; margin:40px auto; text-align:center; padding:0 20px; }
.hero img { width:120px; height:120px; border-radius:50%; background:#fff; box-shadow:0 8px 24px rgba(59,10,120,.18); }