:root{--bg:#f5f6f8;--card:#fff;--ink:#15171a;--soft:#5b6169;--line:#e3e6ea;--blue:#2563eb;--green:#137333;--red:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#16181c;--card:#1f2227;--ink:#eceef1;--soft:#a2a9b3;--line:#31353c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue)}
.wrap{max-width:900px;margin:0 auto;padding:28px 20px 72px}
.narrow{max-width:460px}
header.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card)}
header.bar b{font-size:17px}
h1{font-size:30px;margin:0 0 8px;line-height:1.25}
h2{font-size:19px;margin:0 0 6px}
p.sub{color:var(--soft);margin:0 0 26px;font-size:17px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px}
.hint{color:var(--soft);font-size:14px;margin:0 0 14px}
label{display:block;font-size:14px;font-weight:600;margin:12px 0 6px}
input,select{width:100%;padding:11px 13px;font-size:16px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-family:inherit}
button{font:inherit;font-weight:600;padding:11px 18px;border-radius:9px;border:1px solid transparent;cursor:pointer}
.primary{background:var(--blue);color:#fff}
.ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.danger{background:transparent;color:var(--red);border-color:var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.msg{margin-top:14px;padding:12px 14px;border-radius:9px;font-size:15px;display:none}
.msg.show{display:block}
.msg.ok{background:#e6f4ea;color:#0d652d}.msg.bad{background:#fce8e6;color:#a50e0e}.msg.info{background:#e8f0fe;color:#174ea6}
@media (prefers-color-scheme:dark){.msg.ok{background:#0f2a17;color:#8fd3a4}.msg.bad{background:#33110f;color:#f2a9a2}.msg.info{background:#12233f;color:#9dbdf5}}
.item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item small{color:var(--soft);display:block}
code,pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:13px}
code{padding:2px 6px}
pre{padding:12px 14px;overflow-x:auto;margin:10px 0}
.bar-meter{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:8px 0}
.bar-meter i{display:block;height:100%;background:var(--blue)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps{counter-reset:s;padding-left:0;list-style:none;margin:0}
.steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:10px}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:99px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}