:root { --bg:#f3f4fb; --card:#fff; --text:#161a3a; --dim:#5b6087; --border:#dcdff2; --accent:#6d5cf6; --ok:#12a150; --err:#d63b3b; }
@media (prefers-color-scheme: dark) { :root { --bg:#05061a; --card:#0d0f2e; --text:#eef0ff; --dim:#a4a9d9; --border:#23264f; } }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); color:var(--text); font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(20,20,60,.12); }
.head { padding:20px 28px; background:linear-gradient(135deg,#2b6cff,#8b5cf6); color:#fff; font-weight:700; font-size:18px; display:flex; justify-content:space-between; align-items:center; }
.body { padding:28px; }
h1 { margin:0 0 10px; font-size:21px; }
p { margin:0 0 16px; line-height:1.6; color:var(--dim); }
label { display:block; margin:14px 0 6px; font-size:13px; font-weight:600; }
input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); font-size:15px; }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.btn { display:inline-block; width:100%; margin-top:20px; padding:13px 18px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:15px; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; }
.btn:disabled { opacity:.6; cursor:wait; }
.msg { margin-top:14px; padding:11px 14px; border-radius:10px; font-size:14px; }
.msg.err { background:rgba(214,59,59,.12); color:var(--err); }
.msg.ok { background:rgba(18,161,80,.12); color:var(--ok); }
.icon { font-size:40px; margin-bottom:8px; }
.foot { padding:14px 28px 22px; font-size:12px; color:var(--dim); border-top:1px solid var(--border); }
[hidden] { display:none !important; }
.lang-select { background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:8px; padding:5px 8px; font-weight:600; font-size:13px; cursor:pointer; }
.lang-select option { color:#161a3a; }
body:has(.card.wide) { align-items:flex-start; }
.card.wide { max-width:820px; margin:16px auto; }
.doc h1 { font-size:26px; }
.doc h2 { margin:28px 0 8px; font-size:17px; }
.doc p, .doc li { color:var(--text); opacity:.86; line-height:1.7; font-size:15px; }
.doc ul { margin:0 0 16px; padding-left:22px; }
.doc a { color:var(--accent); }
.doc .meta { font-size:13px; color:var(--dim); opacity:1; margin-bottom:22px; }
.doc details { border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.doc summary { cursor:pointer; font-weight:600; color:var(--text); }
.doc details[open] summary { margin-bottom:10px; }
.nav { display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:10px; }
.nav a { color:var(--accent); text-decoration:none; font-weight:600; font-size:13px; }
.nav a:hover { text-decoration:underline; }