/* Витрина: своя лёгкая тема, отдельная от тёмной внутренней панели. */
:root {
  --bg:#f6f6f4; --panel:#fff; --text:#17181a; --muted:#6f7580; --line:#e4e6ea;
  --accent:#17181a; --err:#b3261e; --err-bg:#fbe6e6;
  --shadow:0 1px 2px rgba(16,17,20,.04), 0 8px 24px rgba(16,17,20,.06);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif; }

.top { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 28px; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand-mark { width:34px; height:34px; border-radius:10px; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-weight:700; }
.brand-text { display:flex; flex-direction:column; line-height:1.2; }
.brand-text small { color:var(--muted); font-size:12px; }
.top-right { display:flex; align-items:center; gap:14px; font-size:14px; }
.org { color:var(--muted); }
.link-btn { background:none; border:0; padding:0; font:inherit; color:var(--muted);
  cursor:pointer; text-decoration:underline; }
.link-btn:hover { color:var(--text); }

.wrap { max-width:1100px; margin:0 auto; padding:28px; }
body.narrow .wrap { max-width:520px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:28px; }
.card h1 { margin:0 0 10px; font-size:22px; }
.muted { color:var(--muted); font-size:14px; }
.error { background:var(--err-bg); color:var(--err); border-radius:10px;
  padding:10px 14px; margin:0 0 16px; font-size:14px; }

.form { display:flex; flex-direction:column; gap:14px; margin:20px 0 16px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:14px;
  color:var(--muted); }
.form small { color:var(--muted); font-size:12px; }
/* Подпись — один блок: иначе звёздочка «обязательно» становится отдельным
   рядом флекс-колонки и уезжает под текст. */
.lbl { display:block; }
.req { color:var(--err); }
.form input, .form textarea { font:inherit; color:var(--text); padding:10px 12px;
  border:1px solid #cbd5e1; border-radius:10px; background:#fff; }
.form input:focus, .form textarea:focus { outline:2px solid var(--accent);
  outline-offset:-2px; border-color:transparent; }
.form textarea { resize:vertical; }

button[type=submit], .btn { display:inline-block; font:inherit; font-weight:600;
  padding:11px 18px; border:0; border-radius:10px; background:var(--accent);
  color:#fff; cursor:pointer; text-decoration:none; }
button[type=submit]:hover, .btn:hover { opacity:.9; }

/* Поле-ловушка: невидимо и недостижимо для человека, но не display:none —
   часть ботов такие поля намеренно пропускает. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.foot { max-width:1100px; margin:0 auto; padding:8px 28px 32px;
  color:var(--muted); font-size:13px; }

@media (max-width:560px) { .wrap { padding:18px; } .card { padding:20px; } }