:root{
  --bg:#141414; --surface:#1f1f1f; --surface-2:#2a2a2a; --border:#383838;
  --text:#f2f2ee; --muted:#a2a29a; --accent:#bae900; --accent-ink:#1a1d00; --err:#ff6b6b; --ok:#7be495;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f5ef; --surface:#ffffff; --surface-2:#eef0e4; --border:#dcdfcf; --text:#1c1d17; --muted:#6a6c5c; --accent:#a9d200; --err:#c93636; --ok:#1c8a49; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); }
.wrap{ max-width:1040px; margin:0 auto; padding:0 20px; }
header.top{ border-bottom:1px solid var(--border); }
header.top .wrap{ display:flex; align-items:center; gap:24px; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--text); text-decoration:none; }
.brand i{ width:32px; height:32px; border-radius:9px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-style:normal; font-weight:800; }
nav.main{ display:flex; gap:20px; margin-left:auto; flex-wrap:wrap; }
nav.main a{ color:var(--text); text-decoration:none; font-weight:600; font-size:15px; }
nav.main a:hover{ color:var(--accent); }
.hero{ padding:72px 0 48px; }
.hero h1{ font-size:clamp(30px,5vw,52px); line-height:1.1; margin:0 0 16px; letter-spacing:-.02em; max-width:14em; }
.hero p{ font-size:19px; color:var(--muted); max-width:38em; margin:0 0 28px; }
.btn{ display:inline-block; background:var(--accent); color:var(--accent-ink); font-weight:700; padding:13px 22px; border-radius:12px; text-decoration:none; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn + .btn{ margin-left:10px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:12px 0 48px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px; }
.card h3{ margin:0 0 8px; font-size:18px; }
.card p{ margin:0; color:var(--muted); }
h2{ font-size:26px; margin:40px 0 14px; letter-spacing:-.01em; }
.steps{ counter-reset:s; list-style:none; padding:0; margin:0 0 32px; display:grid; gap:12px; }
.steps li{ counter-increment:s; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px 14px 56px; position:relative; }
.steps li::before{ content:counter(s); position:absolute; left:16px; top:12px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-weight:800; display:grid; place-items:center; }
.live a{ display:block; padding:10px 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); }
.live a span{ color:var(--muted); font-size:14px; margin-left:8px; }
footer{ border-top:1px solid var(--border); margin-top:56px; padding:24px 0 40px; color:var(--muted); font-size:14px; }
/* форма */
form.f{ display:grid; gap:16px; max-width:640px; }
form.f label{ display:grid; gap:6px; font-weight:600; font-size:15px; }
form.f small{ color:var(--muted); font-weight:400; }
input[type=text],input[type=email],input[type=url],input[type=password],textarea,select{
  width:100%; background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font:inherit; }
input[type=color]{ width:64px; height:42px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); padding:2px; }
textarea{ min-height:90px; resize:vertical; }
.check{ display:flex !important; grid-template-columns:none; gap:10px; align-items:flex-start; font-weight:400 !important; }
.err{ color:var(--err); } .ok{ color:var(--ok); }
.note{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; color:var(--muted); margin:0 0 20px; }
.hp{ position:absolute; left:-9999px; }
/* документация */
.doc{ max-width:820px; padding:32px 0; }
.doc h1{ font-size:34px; letter-spacing:-.02em; }
.doc h2{ margin-top:36px; padding-top:8px; border-top:1px solid var(--border); }
.doc table{ border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; display:block; overflow-x:auto; }
.doc th,.doc td{ border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; }
.doc th{ background:var(--surface); }
.doc pre{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; overflow-x:auto; font-size:13.5px; }
.doc code{ background:var(--surface); padding:2px 6px; border-radius:6px; font-size:.92em; }
.doc pre code{ background:none; padding:0; }
.doclist{ list-style:none; padding:0; display:grid; gap:12px; }
.doclist a{ display:block; text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.doclist a b{ display:block; font-size:18px; color:var(--accent); } .doclist a span{ color:var(--muted); }
/* админка */
table.adm{ width:100%; border-collapse:collapse; font-size:14px; }
table.adm th,table.adm td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; vertical-align:top; }
.tag{ display:inline-block; padding:2px 8px; border-radius:99px; font-size:12px; background:var(--surface-2); }
.tag.new{ background:#3a3300; color:#ffd84a; } .tag.approved{ background:#16351d; color:var(--ok); } .tag.rejected{ background:#3a1a1a; color:var(--err); } .tag.done{ background:#1c2a3a; color:#8fb4ff; }
pre.cmd{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; overflow-x:auto; font-size:12.5px; margin:8px 0 0; white-space:pre-wrap; }