/* Витрина e-invoice — тот же визуальный язык, что у главной (site/index.html): токены тем, шрифты, панели.
   Кнопки живут контуром, сплошной заливки акцентом нет. Страницы собирает tools/build_einvoice.py. */
:root{--mono:Inter,-apple-system,system-ui,sans-serif;--brandmono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
html[data-theme="dark"]{
  --bg:#12151c;--surface:#1b202b;--tx:#e9edf5;--mut:#aab3c4;--mut2:#79839a;
  --amber:#f0b429;--amber-dim:#cc9414;--phos:#5b8bd0;--line:#252b38;--line2:#3a4356;--veil:rgba(5,8,14,.72);--ok:#6fae7a;--bad:#d08a5b;
  color-scheme:dark}
html[data-theme="light"]{
  --bg:#f4f1ea;--surface:#fbf9f5;--tx:#1c1a17;--mut:#4a463f;--mut2:#6f6a62;
  --amber:#8a5a0e;--amber-dim:#6e4709;--phos:#2f6db5;--line:rgba(28,26,23,.14);--line2:rgba(28,26,23,.28);--veil:rgba(28,26,23,.5);--ok:#3f7d4b;--bad:#9a4f1c;
  color-scheme:only light}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 15px/1.6 var(--mono);letter-spacing:.005em;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--tx);min-height:100vh;overflow-x:hidden}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
a{color:var(--phos);text-decoration:none}a:hover{color:var(--tx)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}.narrow{max-width:760px}
.brand{white-space:nowrap;font-family:var(--brandmono);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--tx);display:inline-flex;align-items:center;gap:8px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px color-mix(in srgb,var(--amber) 55%,transparent)}
.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);font-weight:600}
h1{font-size:clamp(28px,4.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.02em;margin-top:10px}
h2{font-size:clamp(22px,3.2vw,30px);line-height:1.15;font-weight:700;letter-spacing:-.015em}
h3{font-size:16px;font-weight:600}
p.lead{font-size:clamp(15px,2vw,18px);color:var(--mut);max-width:600px;margin-top:12px}
.mut{color:var(--mut2);font-size:13px}.small{font-size:12px}.mono{font-family:var(--brandmono)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;padding:0 16px;min-height:44px;border:1px solid var(--line2);border-radius:8px;color:var(--tx);background:var(--surface);cursor:pointer;white-space:nowrap;transition:border-color .13s,color .13s}
.btn:hover{border-color:var(--amber)}
.btn.pri{border-color:var(--amber);color:var(--amber);background:transparent}
.btn.pri:hover{border-color:var(--amber-dim);color:var(--tx)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.applepay{background:#000;color:#fff;border-color:#000;font-weight:600}
.applepay:hover{border-color:var(--amber)}
.applepay .ap{font-family:-apple-system,system-ui,sans-serif;font-weight:600;letter-spacing:-.01em}
.tag{font-size:12px;color:var(--mut);border:1px solid var(--line2);padding:4px 10px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;min-height:32px}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:10px;overflow:hidden;min-width:0}
.panel>.ph{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);min-height:38px}
.panel>.ph .r{margin-left:auto;display:flex;gap:6px;align-items:center;text-transform:none;letter-spacing:0;font-size:12px}
.panel>.pb{padding:14px}
code,pre{font-family:var(--brandmono);font-size:12.5px}
pre{white-space:pre-wrap;word-break:break-word;line-height:1.55;color:var(--tx)}
.hdr{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:14px;min-height:56px}
.nav{display:flex;gap:2px;margin-left:8px}
.nav a{font-size:13px;color:var(--mut);padding:8px 10px;border-radius:6px}
.nav a:hover{color:var(--tx);background:var(--surface)}
.ctl{margin-left:auto;display:flex;gap:6px;align-items:center}
.ctl .lg{font-size:12px;font-weight:700;color:var(--mut2);padding:0 8px;min-height:36px;display:inline-flex;align-items:center;border:1px solid transparent;border-radius:6px}
.ctl .lg.on{color:var(--tx);border-color:var(--line2);background:var(--surface)}
.tk-th{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--line2);border-radius:6px;background:var(--surface);cursor:pointer}
.tk-th svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
html[data-theme="dark"] .i-sun{display:none}html[data-theme="light"] .i-moon{display:none}
.bal{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;border:1px solid var(--line2);border-radius:6px;min-height:36px;padding:0 10px;background:var(--surface);color:var(--tx)}
.bal b{font-family:var(--brandmono);color:var(--amber)}
section{padding:52px 0}.tight{padding:28px 0}
.hero{padding:36px 0 28px}
.grid,.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.hero .grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.grid>*,.grid2>*{min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sech{margin-bottom:18px}.sech p{color:var(--mut);max-width:640px;margin-top:6px}
.zone{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:132px;padding:16px;border:1.5px dashed var(--line2);border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .13s}
.drop:hover,.drop.over{border-color:var(--amber)}
.drop:focus-within{outline:2px solid var(--phos);outline-offset:2px}
.drop .up{width:26px;height:26px;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.drop b{font-size:15px}.drop span{font-size:12.5px;color:var(--mut2)}
.drop.busy{border-style:solid;border-color:var(--phos)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.note{font-size:12.5px;color:var(--mut2)}
.res .pb{min-height:180px}.res,section{scroll-margin-top:64px}
.verdict{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.verdict i{width:10px;height:10px;border-radius:50%;flex:none}
.verdict.ok i{background:var(--ok)}.verdict.bad i{background:var(--bad)}
.verdict.ok{color:var(--ok)}.verdict.bad{color:var(--bad)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kv>span{min-width:0;overflow-wrap:break-word}.facts .kv>span{flex:0 0 auto;max-width:42%}.kv small{display:block;color:var(--mut2);font-size:12px}
.kv b{font-family:var(--brandmono);font-weight:500;text-align:right;overflow-wrap:anywhere}
.kv.tot{font-weight:700}
.facts{margin-top:10px}
.issues{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.iss{border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:6px;padding:8px 10px;font-size:13px;background:var(--bg)}
.iss.warning{border-left-color:var(--amber)}.iss.info{border-left-color:var(--line2)}
.iss .h{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.iss .h b{font-family:var(--brandmono);font-size:12.5px}
.iss .h span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut2)}
.iss p{margin-top:2px;overflow-wrap:anywhere}
.iss code{display:block;color:var(--mut2);font-size:11.5px;margin-top:3px;overflow-wrap:anywhere}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.steps span{font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:3px 10px;color:var(--mut2)}
.steps span.on{color:var(--amber);border-color:var(--amber)}.steps span.done{color:var(--ok);border-color:var(--ok)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut2)}
.form .full{grid-column:1/-1}
.inp{font-size:16px;color:var(--tx);background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;min-height:44px;width:100%;outline:none;min-width:0}
.inp:focus{border-color:var(--amber)}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.seg label{display:flex;gap:8px;align-items:center;border:1px solid var(--line2);border-radius:8px;padding:0 12px;min-height:44px;font-size:13.5px;cursor:pointer}
.seg label:has(input:checked){border-color:var(--amber);color:var(--amber)}
.seg input{accent-color:var(--amber)}
.dl{gap:0}.dl h3{margin-bottom:6px}
.dr{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dr b{font-family:var(--brandmono);font-weight:500;color:var(--amber);font-size:12.5px}
.dr span{color:var(--mut)}
.dl p{margin-top:10px}.src{font-size:12.5px;margin-top:8px;display:inline-block}
.card{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.packs>p{grid-column:1/-1}
.pack .big{font-family:var(--brandmono);font-size:30px;font-weight:700}
.pack .btn{margin-top:6px;white-space:normal;text-align:center}
.acc .row .inp{flex:1;min-width:180px}
.key{font-family:var(--brandmono);font-size:12.5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;display:flex;justify-content:space-between;gap:8px;align-items:center;overflow-wrap:anywhere}
.code .pb{padding:12px}.links{margin-top:14px;font-size:13.5px;color:var(--mut)}
#about-check p{color:var(--mut);margin-top:12px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.foot{padding:28px 0 calc(40px + env(safe-area-inset-bottom));font-size:12.5px;color:var(--mut2);border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-direction:column;gap:12px}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.paymarks{display:flex;gap:6px;flex-wrap:wrap}
.pm{font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line2);border-radius:4px;padding:3px 7px;font-weight:600;color:var(--mut)}
.modal{position:fixed;inset:0;background:var(--veil);display:none;place-items:center;z-index:50;padding:16px}
.modal.on{display:grid}
.modal .box{background:var(--surface);border:1px solid var(--line2);border-radius:12px;width:min(420px,100%);padding:20px;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto}
.modal .mh{display:flex;justify-content:space-between;align-items:center}
.modal .sheet{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:6px 14px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mut)}
.agree input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--amber)}
.agree-links{font-size:12px;margin:-4px 0 0 28px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--amber);border-radius:8px;padding:10px 16px;font-size:13.5px;display:none;z-index:60;max-width:calc(100% - 32px)}
.toast.on{display:block}
.dlbtn{margin-top:12px}
.note.ladder{color:var(--tx);font-weight:500}
.note.trust{font-size:12px}
.never{font-size:13.5px;font-weight:600;color:var(--tx)}
.gh{margin-top:18px}
.fix{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);color:var(--mut)}
.fix b{color:var(--tx);font-weight:600;margin-right:6px}
.vsub{margin-top:2px}
.rep{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.rep .mut{flex-basis:100%}
.pbar{margin-top:10px;font-size:14px;color:var(--mut)}
.pbar b{font-family:var(--brandmono);color:var(--amber);font-weight:700}
.hero.api .cd{margin-top:12px}
.cd pre{white-space:pre;overflow-x:auto;word-break:normal}
.cd.resp pre{max-height:300px;overflow:auto}
.pricecard{position:sticky;top:76px}
.pricecard .big{font-family:var(--brandmono);font-size:34px;font-weight:700;line-height:1.1}
.pricecard .nosub{font-weight:600;margin-top:4px}
.pricecard .row{margin-top:6px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--amber);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .hero .grid,.grid,.grid2{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:1fr}
  .pricecard{position:static}
  .nav{display:none}
}
@media (max-width:520px){
  .hdr .wrap{gap:8px}.bal span{display:none}.ctl{gap:4px}.ctl .lg{padding:0 6px}
  section{padding:36px 0}.hero{padding:18px 0 24px}
  .hero .eyebrow{display:none}
  .hero.api .lead{display:none}
  .cd.resp pre{max-height:190px}
  .pricecard{position:static}
  h1{font-size:26px;margin-top:0}
  p.lead{font-size:14.5px;margin-top:8px}
  .zone{margin-top:12px;gap:8px}
  .drop{min-height:108px}
  .packs,.form{grid-template-columns:1fr}
  .row .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;animation:none!important}}
