/* Антенка: общие части всех страниц. Шапка и подвал, кнопки и формы, диалог, сообщения, флаги, разделы, текст.
   Основа (цвета, шрифты, кнопки .btn) в base.css, приёмник в radio.css. */

.logo .lg-n, .plate-badge .lg-n { fill: var(--needle); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--alu); text-decoration: none; font-weight: 600; }
.skip:focus { top: 10px; color: var(--alu); }

[hidden] { display: none !important; }
h1, h2, h3 { overflow-wrap: break-word; }   /* длинное слово в заголовке не раздвигает страницу на узком экране */

/* ---------- шапка ---------- */
.nav a[aria-current="page"] { color: var(--enamel); text-decoration: underline 2px var(--needle); text-underline-offset: 9px; }
.top .acc .btn { min-height: 48px; padding: 0 22px; }
.top .balance { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px 0 12px; box-shadow: inset 0 2px 4px rgba(15,42,39,.16); }
.top .balance svg { width: 22px; height: 22px; color: var(--ink-2); }
.top .balance:hover { color: var(--enamel); }
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; gap: 0 16px; min-height: 0; padding-top: 10px; }
  .top .logo { min-height: 52px; }
  .top .logo svg { width: 34px; height: 34px; }
  .top .logo b { font-size: 29px; }
  .nav { display: flex; order: 3; width: 100%; margin: 2px 0 0; gap: 0 22px; padding: 0 0 6px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 0 10px; white-space: nowrap; }
  .top .acc .btn, .top .balance { min-height: 44px; }
}

/* ---------- кнопки и ссылки ---------- */
.btn.small { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 15px; box-shadow: 0 3px 0 var(--b2); }
.btn.ghost.small { box-shadow: inset 0 0 0 2px var(--line); }
.btn.block { display: flex; width: 100%; }
.btn .ic { width: 22px; height: 22px; flex: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn.ghost[disabled] { opacity: .55; }
.linkish { padding: 6px 0; border: 0; background: none; color: var(--enamel); font: 500 15px/1.3 var(--f-text); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.linkish:hover { color: var(--enamel-2); }
.linkish[disabled] { color: var(--ink-2); text-decoration: none; cursor: default; }
.more { font-weight: 600; }

/* ---------- формы ---------- */
.stack { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.field > span { color: var(--ink-2); }
.field input, .field textarea, .inp {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px;
  background: var(--plate); color: var(--ink); font: 400 17px/1.35 var(--f-text);
}
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .inp:focus-visible, .find input:focus-visible {
  outline: none; border-color: var(--enamel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--enamel) 30%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink-2) 75%, transparent); }
/* код из письма вводится на «табло», как частота на шкале */
.field input.code-input {
  height: 76px; padding: 0 0 0 .44em; border-color: var(--glass); border-radius: 14px; background: linear-gradient(180deg, var(--glass-2), var(--glass));
  color: var(--amber); caret-color: var(--amber); text-align: center; letter-spacing: .44em;
  font: 500 46px/1 var(--f-led); text-shadow: 0 0 12px rgba(255,178,63,.45);
}
.field input.code-input::placeholder { color: rgba(255,178,63,.3); text-shadow: none; }
.err { margin: 0; color: var(--needle-2); font-size: 15px; font-weight: 500; max-width: none; }
:root[data-theme="dark"] .err { color: var(--needle); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err { color: var(--needle); } }
.fine { margin: 16px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--ink-2); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wait { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--needle); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- диалог: пластина по центру, на телефоне выезжает снизу ---------- */
.dlg { width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.dlg::backdrop { background: rgba(4, 12, 10, .58); }
.dlg-face {
  position: relative; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 28px 28px 26px; border-radius: var(--r-plate); background: var(--plate);
  box-shadow: var(--shadow-plate), 0 30px 80px -30px rgba(0,0,0,.65);
}
.dlg[open] .dlg-face { animation: dlg-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px); } }
.dlg-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; }
.dlg-x:hover { background: var(--alu-2); color: var(--ink); }
.dlg-x svg { width: 22px; height: 22px; }
.dlg-title { margin: 0 52px 14px 0; font-size: 42px; }
.dlg-lead { margin: 0 0 18px; color: var(--ink-2); }
.dlg-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; }
@media (max-width: 600px) {
  .dlg { width: 100%; margin: auto 0 0; max-height: 94dvh; }
  .dlg-face { max-height: 94dvh; padding: 24px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .dlg[open] .dlg-face { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: .4; } }
  .dlg-title { font-size: 38px; }
}

/* оформление заказа */
.co-item { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; border-bottom: 1px solid var(--line); }
.co-item b { display: block; font: 700 27px/1.02 var(--f-display); }
.co-item span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.co-flag { flex: none; width: 52px; height: 39px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15,42,39,.14); }
.co-note { margin: 14px 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.co-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; font-weight: 500; }
.co-qty .muted { font-size: 14.5px; font-weight: 400; }
.dlg-co .field { margin-bottom: 4px; }
.co-sum {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 16px; margin: 18px 0 14px; padding: 16px 18px 15px;
  border-radius: 14px; background: linear-gradient(180deg, var(--glass-2), var(--glass)); color: #E4ECE7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 8px 18px rgba(0,0,0,.45);
}
.co-total, .co-bal { display: contents; }
.co-sum span { color: #93A8A2; font-size: 15px; }
.co-total b { font: 500 42px/1 var(--f-led); color: var(--amber); text-align: right; text-shadow: 0 0 12px rgba(255,178,63,.4); }
.co-bal b { font: 500 24px/1 var(--f-led); text-align: right; }
.co-short { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--needle) 10%, transparent); }
.co-short p { margin: 0 0 10px; font-size: 15px; }
.co-short .muted { margin: 10px 0 0; }
.dlg-co .err { margin: 0 0 12px; }
.co-pay { display: grid; gap: 12px; }

/* ---------- всплывающее сообщение ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 100; max-width: min(460px, calc(100% - 32px));
  padding: 13px 18px 13px 40px; border-radius: 12px; background: var(--glass); color: #E4ECE7; font-size: 15px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.toast.ok::before { background: var(--eye); box-shadow: 0 0 8px var(--eye); }
.toast.bad::before { background: var(--needle); box-shadow: 0 0 8px var(--needle); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- флаги и «магический глаз» ---------- */
.flag { display: inline-block; flex: none; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; vertical-align: -3px; background: var(--alu-2); box-shadow: 0 0 0 1px rgba(15,42,39,.14); }
.meye { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #06120f; box-shadow: 0 0 0 4px var(--alu-2), inset 0 2px 6px #000; }
.meye svg { width: 82%; height: 82%; }
.meye .fan { fill: var(--eye); transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.2,.8,.2,1), fill .3s, opacity .3s; filter: drop-shadow(0 0 3px var(--eye)); }
.meye .l { transform: rotate(-38deg); }
.meye .r { transform: rotate(38deg); }
.meye[data-st="done"] .l { transform: rotate(-6deg); }
.meye[data-st="done"] .r { transform: rotate(6deg); }
.meye[data-st="paid"] .l, .meye[data-st="work"] .l { animation: eye-l 2.4s ease-in-out infinite; }
.meye[data-st="paid"] .r, .meye[data-st="work"] .r { animation: eye-r 2.4s ease-in-out infinite; }
@keyframes eye-l { 50% { transform: rotate(-18deg); } }
@keyframes eye-r { 50% { transform: rotate(18deg); } }
.meye[data-st="new"] .fan, .meye[data-st="pending"] .fan { fill: var(--amber); filter: drop-shadow(0 0 3px var(--amber)); opacity: .85; }
.meye[data-st="cancelled"] .fan, .meye[data-st="refunded"] .fan, .meye[data-st="declined"] .fan, .meye[data-st="off"] .fan { fill: #5d6f69; filter: none; opacity: .55; }

/* ---------- разделы и заголовки страниц ---------- */
.sec { padding: clamp(64px, 8vw, 112px) 0 0; }
.sec-head { display: grid; align-content: start; gap: 14px; }
.sec-head p { margin: 0; }
.page-head { padding: clamp(18px, 3vw, 40px) 0 clamp(26px, 3.4vw, 44px); }
.page-head h1 { margin-bottom: 18px; font-size: clamp(52px, 7.2vw, 100px); }
.page-head .lead { max-width: 62ch; margin: 0; }
.crumbs { margin: 0 0 14px; font-size: 15px; }
.load-err { padding: 26px; border-radius: var(--r-plate); background: var(--plate); box-shadow: var(--shadow-plate); }
.load-err p { margin: 0 0 16px; }
.noscript { margin: 16px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--plate); }
.empty { padding: 22px 0; color: var(--ink-2); }

/* ---------- текст: помощь и документы ---------- */
.prose { max-width: 74ch; }
.prose h2 { margin: 56px 0 14px; font-size: clamp(36px, 4.2vw, 52px); scroll-margin-top: 20px; }
.prose h3 { margin: 30px 0 10px; font-size: 30px; scroll-margin-top: 20px; }
.prose p, .prose li { max-width: 70ch; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--enamel); }
.mono, .prose code { padding: 1px 6px; border-radius: 6px; background: var(--alu-2); font: 500 .9em/1.4 var(--f-code); overflow-wrap: anywhere; }

/* ---------- подвал: задняя крышка приёмника ---------- */
.foot { margin-top: clamp(80px, 10vw, 136px); padding: 52px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--alu-2); box-shadow: inset 0 1px 0 var(--line), inset 0 10px 18px -12px rgba(15,42,39,.25); font-size: 15px; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 36px 56px; }
.foot-brand p { margin: 12px 0 0; color: var(--ink-2); max-width: 38ch; }
.foot-brand a:not(.logo) { font-weight: 500; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.foot-nav h2 { margin: 0 0 10px; font-size: 27px; }
.foot-nav a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; }
.foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--enamel); text-decoration: underline; }
.foot-req { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: none; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 900px) { .foot .wrap { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .foot-nav { grid-template-columns: 1fr 1fr; }
  .foot-nav > div:last-child { grid-column: 1 / -1; }
}

/* ---------- помощь: оглавление сбоку, шаги с цифрами табло ---------- */
.help { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.toc { position: sticky; top: 24px; display: grid; gap: 2px; padding-left: 16px; border-left: 2px solid var(--ink); }
.toc a { padding: 7px 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.toc a:hover { color: var(--enamel); text-decoration: underline; }
.help-body > section:first-child h2 { margin-top: 0; }
.prose .howto { list-style: none; counter-reset: h; padding-left: 0; }
.howto li { counter-increment: h; position: relative; margin-bottom: 12px; padding-left: 46px; }
.howto li::before { content: counter(h); position: absolute; left: 0; top: -1px; font: 500 30px/1 var(--f-led); color: var(--enamel); }
.note { padding: 14px 18px; border-left: 4px solid var(--amber); border-radius: 0 12px 12px 0; background: var(--plate); }
@media (max-width: 860px) {
  .help { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 2px 20px; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- 404: приёмник поймал только шум ---------- */
.nf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; padding-top: clamp(12px, 4vw, 48px); }
.nf-art .engr { --src: url("/art/radio.webp"); display: block; aspect-ratio: 1400 / 933; }
.nf-scale { position: relative; height: 70px; margin-top: 22px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, var(--glass-2), var(--glass) 55%, #020605);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 8px 18px rgba(0,0,0,.5); }
.nf-scale::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255,178,63,.5) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(255,178,63,.9) 0 2px, transparent 2px 60px);
  background-size: auto 6px, auto 12px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; }
.nf-scale b { position: absolute; left: 22%; top: 12px; color: var(--amber); font: 500 28px/1 var(--f-led); opacity: .55; text-shadow: 0 0 10px rgba(255,178,63,.45); }
.nf-scale i { position: absolute; left: 61%; top: 6px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--needle); box-shadow: 0 0 10px 1px rgba(229,67,44,.75); }
.nf h1 { margin-bottom: 18px; font-size: clamp(56px, 7vw, 100px); }
.nf .lead { margin-bottom: 26px; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .nf { grid-template-columns: minmax(0, 1fr); } .nf-art { max-width: 460px; } }

/* ---------- документы: оферта, политика, контакты (собираются tools/build_legal.py) ---------- */
.legal { max-width: 820px; padding-top: clamp(18px, 3vw, 40px); }
.legal h1 { margin-bottom: 12px; font-size: clamp(38px, 6.4vw, 88px); }
.legal .meta { margin: 0 0 30px; color: var(--ink-2); }
.legal h2 { margin: 44px 0 12px; font-size: clamp(30px, 3.4vw, 40px); }
.legal > p:not(.meta), .legal li { font-size: 16.5px; }
.req-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 28px; margin: 0 0 1em; padding: 18px 20px; border-radius: 14px; background: var(--plate); }
.req-list dt { color: var(--ink-2); }
.req-list dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.todo { color: var(--warn); font-weight: 500; }
@media (max-width: 560px) { .req-list { grid-template-columns: minmax(0, 1fr); gap: 2px; } .req-list dd { margin-bottom: 10px; } }