@font-face{font-family:"Orbit";src:url(/static/fonts/orbitron-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-cyr-400.woff2) format("woff2");font-weight:400;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-lat-400.woff2) format("woff2");font-weight:400;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-cyr-600.woff2) format("woff2");font-weight:600;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-lat-600.woff2) format("woff2");font-weight:600;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Mono";src:url(/static/fonts/jbm-cyr-400.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Mono";src:url(/static/fonts/jbm-lat-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF}

:root{
  --void:#070B09;      /* фон: чёрный с зелёным подтоном, как коридор стоек */
  --panel:#0D1411;     /* панели шагов */
  --trace:#1C3326;     /* дорожки платы, рамки */
  --signal:#45D483;    /* «матричный» зелёный: индикатор «ключ готов» и выбор устройства */
  --amber:#FF9B3D;     /* цифры: номер, цена, сумма — светодиоды табло */
  --amber-dim:#5A3416; /* погашенные сегменты */
  --amber-glow:rgba(255,155,61,.30);
  --text:#DCE6DF;
  --muted:#8C9C92;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;background:var(--void);color:var(--text);
  font:400 16px/1.55 "Onest",system-ui,sans-serif;
}
/* дорожки платы по краям — фон, не украшение поверх текста */
.traces{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.traces svg{width:100%;height:100%}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 30%,transparent 0%,var(--void) 85%)}

main{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:20px 16px 48px}

.top{display:flex;justify-content:space-between;align-items:center;
  font:400 12px/1 "Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand b{color:var(--text);font-weight:400}
.brand b.v3{color:var(--signal);font-weight:700;text-shadow:0 0 10px rgba(69,212,131,.55)}   /* «V3 клика» = «в три клика», как логотип */
.status{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal)}

/* ── подпись страницы: табло с кодом доступа ── */
.readout{margin:28px 0 8px;padding:22px 20px 18px;border:1px solid var(--trace);border-radius:var(--r);
  background:linear-gradient(#050806,#0A100D);box-shadow:inset 0 0 40px #000}
.readout .label{font:400 11px/1 "Mono",monospace;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
/* код подключения: широкий технический Orbitron вместо табло калькулятора (06.10, Аззариум) */
.codebig{margin:12px 0 10px;font:700 clamp(44px,14vw,64px)/1.05 "Orbit",sans-serif;letter-spacing:.08em;
  color:var(--amber);text-shadow:0 0 6px rgba(255,155,61,.55),0 0 24px rgba(255,155,61,.22)}
.readout .meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font:400 12px/1.4 "Mono",monospace;color:var(--muted)}

h1{font:600 26px/1.2 "Onest",sans-serif;margin:30px 0 6px;letter-spacing:-.01em}

/* выбор устройства */
.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;
  border:1px solid #23503A;border-radius:var(--r);margin-bottom:22px}
.devices button{all:unset;cursor:pointer;text-align:center;padding:10px 0;border-radius:7px;
  font:400 13px/1 "Mono",monospace;color:var(--muted)}
.devices button[aria-selected="true"]{background:rgba(69,212,131,.08);color:var(--signal);
  box-shadow:inset 0 0 0 1px var(--signal),0 0 12px rgba(69,212,131,.18);text-shadow:0 0 8px rgba(69,212,131,.5)}
.devices button:hover{color:var(--signal)}
.devices button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.detected{font:400 12px/1.4 "Mono",monospace;color:var(--muted);margin:-14px 0 22px}

/* шаги — настоящая последовательность, поэтому номера */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 18px 18px 14px;
  background:var(--panel);border:1px solid var(--trace);border-radius:var(--r)}
.num{font:700 28px/1 "Orbit",sans-serif;color:var(--amber);text-align:center;padding-top:2px;
  text-shadow:0 0 10px rgba(255,155,61,.45)}
.step h2{font:600 18px/1.3 "Onest",sans-serif;margin:2px 0 6px}
.step p{margin:0 0 12px;color:var(--muted)}
.step p:last-child{margin-bottom:0}
.step ol{margin:0;padding-left:20px;color:var(--muted)}
.step ol li{margin:2px 0}
.step ol b, .step p b{color:var(--text);font-weight:600}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;
  padding:0 18px;border-radius:8px;border:1px solid var(--amber);background:transparent;color:var(--amber);
  font:600 16px/1 "Onest",sans-serif;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,box-shadow .2s,text-shadow .2s}
/* кнопка — рамка без заливки; загорается свечением при наведении (на телефоне — при нажатии). 07.10, Аззариум */
.btn:hover,.btn:active{color:#FFC48A;box-shadow:0 0 0 1px var(--amber),0 0 22px var(--amber-glow);
  text-shadow:0 0 10px var(--amber-glow)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn svg{width:18px;height:18px}
.btn-meta{font:400 12px/1.5 "Mono",monospace;color:var(--muted);margin:10px 0 0;text-align:center}
/* шаг 2: два способа получить ключ — файл (главный) и QR (тихая кнопка) */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 0}
/* 07.10: все кнопки одной оранжевой рамкой — отдельного вида «тихой» кнопки больше нет */
.btn-quiet:disabled{cursor:default;color:var(--muted);border-color:var(--trace)}
.note{font:400 12.5px/1.5 "Mono",monospace;color:var(--muted);margin:12px 0 0}
.note b{color:var(--text);font-weight:400}
.qrslot{margin-top:14px;text-align:center}
/* QR ключа ≈ 61×61 точка: меньше ~4 px на точку камера не читает (132 px не читались, 06.10).
   Белый фон и поля 4 точки — по стандарту QR, иначе тёмная тема глушит контраст. */
.qrbox{width:min(400px,100%);aspect-ratio:1;margin:0 auto;background:#fff;border-radius:8px}
.qrbox svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.how{display:inline-block;min-width:36px;font:400 11px/1.6 "Mono",monospace;color:var(--amber);
  border:1px solid var(--amber-dim);border-radius:4px;padding:0 5px;margin-right:6px;text-align:center}
.step ol li+li{margin-top:6px}
.alt{font:400 13px/1.5 "Mono",monospace;margin:8px 0 0;color:var(--muted);text-align:center}
.file{white-space:nowrap}
.alt a{color:var(--text);text-underline-offset:3px}

details{margin-top:12px;border-top:1px dashed var(--trace);padding-top:10px}
summary{cursor:pointer;color:var(--text);font-size:14px;list-style:none;display:flex;gap:8px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:"Mono",monospace;color:var(--amber);width:12px}
details[open] summary::before{content:"−"}
summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
details p{font-size:14px;margin:8px 0 0 20px}
.shot{margin:10px 0 0 20px;aspect-ratio:9/7;border:1px dashed var(--trace);border-radius:8px;
  display:grid;place-items:center;font:400 11px/1.4 "Mono",monospace;color:var(--muted);text-align:center;padding:8px}

/* второй экран: QR */
footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--trace)}
footer h3{font:600 16px/1.3 "Onest",sans-serif;margin:0 0 4px}
footer p{margin:0 0 12px;color:var(--muted);font-size:14px}
.fine{margin-top:20px;font:400 11px/1.6 "Mono",monospace;color:#5E6C64}
.fine a{color:inherit}

[hidden]{display:none!important}

@media (max-width:420px){
  .step{grid-template-columns:32px 1fr;gap:10px;padding:16px 14px 16px 10px}
  .num{font-size:24px}
  .choice{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* состояние «ссылка закрыта» */
.gone{margin-top:28px;padding:22px 20px;border:1px solid var(--trace);border-radius:var(--r);background:var(--panel)}
.gone h1{margin-top:0}
.gone p{color:var(--muted);margin:0 0 10px}

/* ── витрина и оплата (S1, цепочка v1, 07.10) ── */
/* табло витрины: номер ещё не выдан — сегменты погашены; на странице оплаты тот же блок горит номером клиента */
.codebig.unlit{color:#2B1A0D;text-shadow:none}           /* погашено сильнее табло: номер ещё не выдан */
.codebig.unlit span{letter-spacing:.14em}
.price{margin:10px 0 18px;color:var(--muted)}
.price b{color:var(--amber);font:700 20px/1 "Orbit",sans-serif;letter-spacing:.04em;margin-right:4px}
.facts{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;color:var(--text)}
.facts li{display:flex;align-items:baseline}
.facts .how{min-width:52px}
.btn-solid{border-width:1.5px}                         /* главное действие — та же рамка, чуть плотнее */
/* «Подключить» — зелёная, как индикатор «сеть в работе» в шапке */
.btn-go{border:1.5px solid var(--signal);color:var(--signal)}
.btn-go:hover,.btn-go:active{color:#9BF0BE;box-shadow:0 0 0 1px var(--signal),0 0 22px rgba(69,212,131,.32);
  text-shadow:0 0 10px rgba(69,212,131,.4)}
/* оплата: на телефоне — кнопка в банк, на компьютере — ещё и QR для телефона */
.paylink{margin-top:14px}
.payqr{display:none;margin:14px auto 0;width:260px;aspect-ratio:1;background:#fff;border-radius:8px}
.payqr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
@media (min-width:700px){.payqr{display:block}}
.block{margin-top:26px;padding:18px;border:1px solid var(--trace);border-radius:var(--r);background:var(--panel)}
.block h2{font:600 17px/1.3 "Onest",sans-serif;margin:0 0 4px}
.block p{margin:0 0 12px;color:var(--muted);font-size:14px}
.row{display:grid;grid-template-columns:1fr auto;gap:8px}
.row .btn{width:auto;min-height:48px}
.ask,.paid{display:grid;gap:8px}
input,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--trace);border-radius:8px;
  background:#060A08;color:var(--text);font:400 15px/1.4 "Onest",sans-serif;resize:vertical}
input#label{font:700 18px/1 "Orbit",sans-serif;letter-spacing:.08em;color:var(--amber);text-transform:uppercase}
input::placeholder,textarea::placeholder{color:#5E6C64}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dot-amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.paybox{border:1px solid var(--trace);border-radius:var(--r);background:var(--panel);margin:6px 0 0}
.payrow{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;padding:12px 14px}
.payrow+.payrow{border-top:1px dashed var(--trace)}
.payrow .k{font:400 11px/1.3 "Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.payrow .v{font-weight:600;overflow-wrap:anywhere}
.payrow .v.bank{color:var(--signal);text-shadow:0 0 10px rgba(69,212,131,.55)}   /* банк — зелёным, как «V3» в шапке */
.payrow .amount{font:700 22px/1 "Orbit",sans-serif;color:var(--amber);letter-spacing:.03em}
.copy{all:unset;cursor:pointer;font:400 11px/1 "Mono",monospace;color:var(--amber);border:1px solid var(--amber-dim);
  border-radius:4px;padding:6px 7px}
.copy:hover,.copy:active{border-color:var(--amber);box-shadow:0 0 10px var(--amber-glow)}
.copy:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.paid{margin-top:18px}
@media (max-width:420px){.payrow{grid-template-columns:78px 1fr auto;padding:12px 10px}}

/* ── беседа на странице (S1-Э7) ── */
.chat{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.msg{max-width:86%;padding:10px 14px;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.5}
.msg.me{align-self:flex-end;background:var(--panel);border:1px solid var(--trace);border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;border:1px solid var(--amber-dim);border-bottom-left-radius:4px;color:var(--text)}
.msg .who{display:block;font:400 11px/1.4 "Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
/* пришёл ответ — поле раскрывается (заранее места не держим) */
.msg.fresh{animation:grow .6s ease-out;box-shadow:0 0 18px var(--amber-glow)}
@keyframes grow{from{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:600px}}
.chat-state{text-align:right;margin-top:6px}
.chat-form{margin-top:18px}

/* плашка «У вас есть разговор» (thread.js): та же оранжевая рамка без заливки, что у кнопок */
.thread-bar{display:block;margin:14px 0 0;padding:12px 14px;border:1px solid var(--amber);border-radius:var(--r);
  color:var(--text);text-decoration:none;font:400 14px/1.4 "Mono",monospace;text-align:center}
.thread-bar:hover,.thread-bar:focus-visible{box-shadow:0 0 0 1px var(--amber),0 0 22px var(--amber-glow);outline:none}