/* Стили страниц раздела /widget/ из tools/site, без шапки и подвала. Собирает perenos-lendinga.py --cms. */
:root{
  --bg:#eef1f4; --paper:#ffffff; --ink:#14233a; --muted:#56657a; --line:#c9d1dc;
  --accent:#0f5bd8; --tape:#e2a400; --accent-ink:#ffffff; --soft:#e3eaf5; --warn:#b4570b;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d141f; --paper:#152030; --ink:#e7edf5; --muted:#9aa8bb; --line:#2a3a50;
  --accent:#5b9bff; --tape:#f2b824; --accent-ink:#0b1320; --soft:#1a2a40; --warn:#f0a35a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d141f; --paper:#152030; --ink:#e7edf5; --muted:#9aa8bb; --line:#2a3a50;
  --accent:#5b9bff; --tape:#f2b824; --accent-ink:#0b1320; --soft:#1a2a40; --warn:#f0a35a; color-scheme:dark}
.cms-page h1,.cms-page h2,.cms-page h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0}
.cms-page h1{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700}
.cms-page p{margin:0}
.cms-page .label{font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cms-page :focus-visible{outline:3px solid var(--tape);outline-offset:2px}

.cms-page .intro{padding-block:12px 28px;display:grid;gap:12px}
.cms-page .intro p{color:var(--muted);max-width:68ch}
.cms-page .src{font:.8rem var(--f-mono);color:var(--muted)}
.cms-page .grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding-bottom:40px}
.cms-page .steps{display:grid;gap:18px;min-width:0}
.cms-page fieldset.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:20px;margin:0;display:grid;gap:14px;min-width:0}
.cms-page fieldset.card legend{font:600 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:0 6px}
.cms-page .row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cms-page .row.r2{grid-template-columns:repeat(2,1fr)}
.cms-page label.f{display:grid;gap:5px;font-size:.88rem;font-weight:500;min-width:0}
.cms-page input[type=number],.cms-page input[type=text],.cms-page select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px;width:100%;font-variant-numeric:tabular-nums}
.cms-page .opts{display:flex;flex-wrap:wrap;gap:8px}
.cms-page .opt{position:relative}
.cms-page .opt input{position:absolute;opacity:0;width:1px;height:1px}
.cms-page .opt span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:.86rem;cursor:pointer;background:var(--paper)}
.cms-page .opt input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cms-page .opt input:focus-visible+span{outline:3px solid var(--tape);outline-offset:2px}
.cms-page [hidden]{display:none!important}
.cms-page .opt input:disabled+span{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.cms-page .hint{color:var(--muted);font-size:.84rem}
.cms-page .derived{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 .84rem var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.cms-page .derived b{color:var(--ink)}
.cms-page aside.receipt{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cms-page .r-head{background:var(--ink);color:var(--bg);padding:16px 20px;display:grid;gap:4px}
.cms-page .r-head .label{color:var(--tape)}
.cms-page .r-total{font:700 2rem var(--f-display);font-variant-numeric:tabular-nums;color:var(--bg)}
.cms-page .r-per{font:.85rem var(--f-mono);opacity:.8}
.cms-page .lines{list-style:none;margin:0;padding:8px 20px 14px}
.cms-page .lines li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.cms-page .lines li:last-child{border-bottom:0}
.cms-page .lines small{display:block;color:var(--muted);font:.76rem var(--f-mono)}
.cms-page .lines .v{font:600 .92rem var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cms-page .lines .v.warn{color:var(--warn);white-space:normal;max-width:12ch}
.cms-page .r-foot{padding:0 20px 18px;display:grid;gap:10px}
.cms-page .btn{display:inline-flex;align-items:center;justify-content:center;font:600 .95rem var(--f-body);padding:12px 18px;border-radius:4px;border:2px solid var(--accent);cursor:pointer;background:var(--accent);color:var(--accent-ink);text-decoration:none}
.cms-page .btn.ghost{background:transparent;color:var(--accent)}
@media (max-width:960px){.cms-page .grid{grid-template-columns:1fr}.cms-page aside.receipt{position:static}}
@media (max-width:620px){.cms-page .row{grid-template-columns:repeat(2,1fr)}.cms-page .row.r2{grid-template-columns:1fr}}
.cms-page .ac{position:relative}
.cms-page .ac ul{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px 0;list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.cms-page .ac li{padding:8px 12px;cursor:pointer;font-size:.92rem}
.cms-page .ac li small{display:block;color:var(--muted);font-size:.78rem}
.cms-page .ac li[aria-selected=true],.cms-page .ac li:hover{background:var(--soft)}
.cms-page .res{display:grid;gap:10px}
.cms-page .res .it{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.cms-page .res .it b{font:700 1.25rem var(--f-display);font-variant-numeric:tabular-nums}
.cms-page .res .it .k{font:600 .72rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.cms-page .res .it.best{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.cms-page .res .msg{color:var(--muted);font-size:.9rem}
.cms-page .res .err{color:var(--warn);font-size:.9rem}

.cms-page .hero{padding-block:12px 28px;display:grid;gap:14px}
.cms-page .hero p{color:var(--muted);max-width:68ch}
.cms-page .badge{display:inline-block;font:600 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--tape);color:#14233a;padding:6px 8px;border-radius:3px;justify-self:start}
.cms-page section.blk{padding-block:28px;border-top:1px solid var(--line);display:grid;gap:16px}
.cms-page section.blk h2{font-size:clamp(1.15rem,2.4vw,1.5rem)}
.cms-page .demo{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media (max-width:820px){.cms-page .demo{grid-template-columns:1fr}}
.cms-page .cart{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:4px;min-width:0}
.cms-page .line{display:flex;justify-content:space-between;gap:12px;padding-block:9px;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.cms-page .line small{display:block;color:var(--muted);font-size:.8rem}
.cms-page .line.total{border-bottom:0;font-weight:600}
.cms-page .sel{background:var(--soft);border-radius:4px;padding:10px 12px;font-size:.92rem}
.cms-page .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.cms-page .btn{font:600 .95rem var(--f-body);background:var(--accent);color:var(--accent-ink);border:0;border-radius:4px;padding:11px 18px;cursor:pointer}
.cms-page .btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.cms-page .side{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px;display:grid;gap:10px}
.cms-page .side label{display:grid;gap:5px;font-size:.88rem;font-weight:500}
.cms-page .side input[type=number]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:9px 10px;width:100%}
.cms-page .chk{display:flex;gap:8px;align-items:center;font-size:.92rem}
.cms-page .note{color:var(--muted);font-size:.85rem}
.cms-page #inline{margin-top:8px}
.cms-page pre{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px 16px;overflow-x:auto;font:.84rem/1.55 var(--f-mono);margin:0;max-width:100%}
.cms-page .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
@media (max-width:820px){.cms-page .steps3{grid-template-columns:1fr}}
.cms-page .step{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:6px;align-content:start}
.cms-page .step b{font-family:var(--f-display);font-size:1rem}
.cms-page .step .n{font:600 .72rem var(--f-mono);color:var(--accent);letter-spacing:.12em}
.cms-page .step p{color:var(--muted);font-size:.92rem}
.cms-page table.t{border-collapse:collapse;width:100%;font-size:.9rem;background:var(--paper)}
.cms-page .tw{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.cms-page table.t th,.cms-page table.t td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cms-page table.t th{font:600 .72rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cms-page table.t tr:last-child td{border-bottom:0}
.cms-page code{font-family:var(--f-mono);font-size:.88em}
.cms-page .cms{display:flex;flex-wrap:wrap;gap:8px}
.cms-page .cms span{border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:.88rem;background:var(--paper)}
.cms-page a{color:var(--accent)}