/* Стили сайта-магазина (страницы из shop.py). Шрифт Rubik — свой, static/fonts. */
/* Rubik (SIL Open Font License, static/fonts/OFL.txt) — свой сервер, без Google Fonts. */
@font-face { font-family:Rubik; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/static/fonts/rubik-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:Rubik; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/static/fonts/rubik-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:Rubik; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/static/fonts/rubik-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Оформление «Поп-арт» (макет B, design/shop/b-pop.html): кремовый фон в точку, толстые чёрные рамки,
   жёсткие тени, яркие карточки-стикеры. Только светлая тема. */
:root { --bg:#fff4dc; --card:#fff; --fg:#111; --muted:#4b4b4b; --line:#111; --lime:#c6f432; --pink:#ff9ad5; --sky:#8fd8ff;
  --accent:#1f7a5c; --warn-bg:#ffe27a; --err:#c62f2f; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.5 Rubik, system-ui, sans-serif;
  background-image:radial-gradient(rgba(0,0,0,.09) 1.2px, transparent 1.2px); background-size:18px 18px; }
main { max-width:980px; margin:0 auto; padding:22px 16px 56px; }
nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
nav a { text-decoration:none; }
a { color:var(--fg); font-weight:700; text-decoration-thickness:3px; text-decoration-color:var(--lime); text-underline-offset:3px; }
/* Логотип: иконка приложения стикером (как .app-icon) и название крупно. */
.logo { display:inline-flex; align-items:center; gap:12px; font-weight:900; font-size:32px; line-height:1;
  letter-spacing:-0.03em; color:var(--fg); }
.logo-icon { width:44px; height:44px; flex-shrink:0; border-radius:13px; background:var(--accent); border:2.5px solid var(--line);
  box-shadow:3px 3px 0 var(--line); display:grid; place-items:center; transform:rotate(-6deg); transition:transform .15s; }
.logo-icon svg { width:34px; height:34px; }
.logo:hover .logo-icon { transform:rotate(0); }
select.lang { font:inherit; font-size:14px; font-weight:600; color:var(--fg); background:#fff; border:2.5px solid var(--line);
  border-radius:12px; padding:6px 10px; box-shadow:3px 3px 0 var(--line); cursor:pointer; }
.back { display:inline-flex; align-items:center; gap:6px; color:var(--fg); text-decoration:none; font-weight:800; font-size:15px;
  padding:6px 14px; background:#fff; border:2.5px solid var(--line); border-radius:12px; box-shadow:3px 3px 0 var(--line); margin-bottom:16px; }
.back::before { content:"←"; } [dir=rtl] .back::before { content:"→"; }
.back:active { transform:translate(3px, 3px); box-shadow:none; }
h1 { font-size:30px; font-weight:900; letter-spacing:-0.02em; margin:0 0 10px; }
h2 { font-size:21px; font-weight:800; margin:0 0 8px; }
.muted { color:var(--muted); font-size:15px; }
.card { background:var(--card); border:3px solid var(--line); border-radius:20px; padding:20px; margin:18px 0; box-shadow:6px 6px 0 var(--line); }
.card .card { box-shadow:4px 4px 0 var(--line); }
.headline { font-size:clamp(30px, 6vw, 50px); font-weight:900; line-height:1.08; letter-spacing:-0.03em; margin:10px 0 14px; }
.sub { font-size:18px; font-weight:500; max-width:700px; margin:0 0 16px; }
/* Преимущества под заголовком — текст с галочками, не кнопки. */
.chips { display:flex; flex-wrap:wrap; gap:8px 22px; }
.chip { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.chip::before { content:"✓"; width:22px; height:22px; flex-shrink:0; display:grid; place-items:center; font-size:14px; font-weight:900;
  background:var(--lime); border:2px solid var(--line); border-radius:6px; }
.chip:nth-child(2)::before { background:var(--sky); } .chip:nth-child(3)::before { background:var(--pink); }
/* Конфиденциальность: три блока. */
.privacy { display:grid; gap:20px; margin:26px 0; }
.pv { border:3px solid var(--line); border-radius:20px; padding:18px 22px; box-shadow:6px 6px 0 var(--line); }
.pv.no { background:var(--lime); } .pv.keep { background:#fff; } .pv.share { background:var(--pink); }
.pv h2 { font-size:22px; font-weight:900; }
.pv ul { margin:0; padding-inline-start:22px; } .pv li { margin:6px 0; } .pv p { margin:0; }
.plans { display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:22px; margin:36px 0 26px; }
.plan { position:relative; min-height:44vh; padding:28px 20px; border-radius:24px; border:3px solid var(--line); box-shadow:8px 8px 0 var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; text-align:center;
  background:#fff; transition:transform .15s, box-shadow .15s; }
/* Цвета: пробная — салатовая, платные по порядку — белая, голубая, розовая. */
/* Бесплатная — спокойная (пунктир, без тени), яркие — платные. */
.plan.trial { background:transparent; border-style:dashed; box-shadow:none; }
.plan.trial:hover { transform:none; box-shadow:none; }
.plan.c2 { background:var(--sky); } .plan.c3 { background:var(--pink); }
.plan > button, .plan > .btn { margin-top:auto; white-space:nowrap; }
.plan.trial .btn { font-size:14px; padding:14px 6px; }
.price.free { font-size:clamp(26px, 2.6vw, 32px); letter-spacing:-0.02em; }
.plan .btn { width:100%; font-size:17px; padding:14px 10px; box-shadow:4px 4px 0 #fff; }
.plan:hover { transform:translate(-3px, -3px); box-shadow:11px 11px 0 var(--line); }
.plan.best::after { content:attr(data-badge); position:absolute; top:-15px; right:14px; font-size:13px; font-weight:900;
  background:var(--lime); border:2.5px solid var(--line); border-radius:999px; padding:3px 12px; transform:rotate(3deg); white-space:nowrap; }
.term { font-size:22px; font-weight:800; }
.price { font-size:72px; font-weight:900; line-height:1; letter-spacing:-0.05em; }
.price small { font-size:20px; letter-spacing:0; }
.save { font-weight:800; background:var(--fg); color:var(--lime); border-radius:10px; padding:6px 14px; transform:rotate(-3deg); white-space:nowrap; }
.save.none { background:#fff; color:var(--fg); border:2px solid var(--line); transform:none; }
button, .btn { font:inherit; font-weight:800; color:#fff; background:var(--fg); border:3px solid var(--line); border-radius:14px;
  padding:10px 18px; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; box-shadow:4px 4px 0 var(--lime); }
button:active, .btn:active { transform:translate(3px, 3px); box-shadow:none; }
.plan button { width:100%; font-size:19px; padding:14px; box-shadow:4px 4px 0 #fff; }
/* Кнопки «Копировать» → «Скопировано»: ширина — по самой длинной из обеих надписей, при смене не прыгает
   (обе надписи — невидимые строки нулевой высоты в той же колонке). */
button[data-ok] { display:inline-grid; justify-items:center; }
button[data-ok]::before, button[data-ok]::after { height:0; overflow:hidden; visibility:hidden; }
button[data-ok]::before { content:attr(data-label); }
button[data-ok]::after { content:attr(data-ok); }
.btn.ghost, button.ghost { background:#fff; color:var(--fg); box-shadow:3px 3px 0 var(--line); font-size:15px; padding:8px 14px; }
.section-title { font-size:clamp(24px, 4vw, 32px); font-weight:900; letter-spacing:-0.02em; margin:44px 0 16px; }
/* Шаги — один блок, строки сверху вниз. */
.steps { background:#fff; border:3px solid var(--line); border-radius:20px; box-shadow:6px 6px 0 var(--line); }
.step { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; padding:16px 20px;
  border-top:2.5px dashed var(--line); }
.step:first-child { border-top:0; }
.step .num { grid-row:1 / span 2; width:46px; height:46px; display:grid; place-items:center; font-weight:900; font-size:22px;
  border:3px solid var(--line); border-radius:12px; background:var(--lime); }
.step:nth-child(2) .num { background:var(--sky); } .step:nth-child(3) .num { background:var(--pink); }
.step b { font-size:19px; }
.connects { display:grid; grid-template-columns:1fr; gap:24px; }
.connect { border:3px solid var(--line); border-radius:22px; padding:22px; box-shadow:7px 7px 0 var(--line); }
.connect.app { background:var(--lime); display:flex; gap:28px; align-items:center; padding:32px; box-shadow:9px 9px 0 var(--line); }
.connect.app h3 { font-size:clamp(30px, 5vw, 42px); }
.connect.app p { font-size:clamp(18px, 2.4vw, 22px); font-weight:500; max-width:620px; margin:14px 0 22px; }
.connect.app .btn { font-size:clamp(19px, 2.6vw, 23px); padding:16px 30px; }
.app-icon { width:120px; height:120px; flex-shrink:0; border-radius:30px; background:var(--accent); border:3px solid var(--line);
  box-shadow:6px 6px 0 var(--line); display:grid; place-items:center; transform:rotate(-6deg); }
.app-icon svg { width:86px; height:86px; }
.connect.key { background:var(--sky); }
.tab-panel .connect { border:0; box-shadow:none; background:none; padding:6px 4px; }
.connect-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.connect h3 { font-size:23px; font-weight:900; margin:0; }
.tag { font-size:13px; font-weight:800; background:#fff; border:2px solid var(--line); border-radius:8px; padding:2px 8px; }
.connect .btn { box-shadow:4px 4px 0 #fff; font-size:18px; padding:12px 20px; }
.apps-label { font-weight:900; font-size:15px; margin:16px 0 8px; }
.applinks { display:flex; flex-wrap:wrap; gap:10px; }
.applink { text-decoration:none; background:#fff; border:2.5px solid var(--line); border-radius:12px; padding:7px 12px;
  box-shadow:3px 3px 0 var(--line); line-height:1.25; }
.applink small { font-weight:500; color:var(--muted); }
.applink:active { transform:translate(3px, 3px); box-shadow:none; }
.questions { margin-top:36px; font-weight:600; }
/* Вкладки как в браузере: ярлыки сверху сливаются с открытой панелью. */
.tabs { display:grid; grid-template-columns:1fr 1fr; column-gap:6px; margin:16px 0 10px; }
.tabs > input { position:absolute; opacity:0; pointer-events:none; }
.tabs > label { cursor:pointer; position:relative; z-index:1; margin-bottom:-3px; padding:12px 16px 14px;
  border:3px solid var(--line); border-bottom:0; border-radius:16px 16px 0 0; background:#f2ead6;
  display:flex; flex-direction:column; gap:2px; color:var(--muted); }
.tabs > label b { font-size:18px; font-weight:900; } .tabs > label small { font-weight:600; }
.tabs > label:hover { background:#fff; }
.tabs > input:checked + label { background:var(--lime); color:var(--fg); z-index:3; }
.tabs > input:focus-visible + label { outline:3px solid var(--sky); outline-offset:2px; }
.tab-panel { display:none; grid-column:1 / -1; position:relative; z-index:2; border:3px solid var(--line);
  border-radius:0 0 18px 18px; padding:20px; background:#fff;
  box-shadow:inset 0 6px 0 var(--lime), 6px 6px 0 var(--line); }
#tab-app:checked ~ .panel-app, #tab-key:checked ~ .panel-key { display:block; }
.valid { font-size:18px; margin:-4px 0 10px; }
/* Выдача на странице заказа: вкладки 67Vpn / AmneziaVPN. */
.use-tabs .tab-panel h2 { margin-top:0; }
/* Под тарифами: где покупать, чтобы приложение было без рекламы. */
.buy-note { font-weight:600; max-width:760px; margin:-6px 0 8px; }
.connect.app .trial { font-size:16px; margin:18px 0 0; }
.renew-title { margin:28px 0 10px; }
.renew { display:flex; flex-wrap:wrap; gap:12px; }
.renew button { color:var(--fg); background:#fff; font-size:14px; padding:8px 14px; box-shadow:3px 3px 0 var(--line); }
.renew form:nth-child(2) button { background:var(--sky); } .renew form:nth-child(3) button { background:var(--pink); }
/* Выбор монеты: сетка карточек-кнопок. */
/* Выбор оплаты: вкладки USDT / USDC, внутри — сети строками. */
#coin-USDT:checked ~ .panel-USDT, #coin-USDC:checked ~ .panel-USDC { display:block; }
.coin-panel { padding:6px 20px; }
.netrow { display:flex; align-items:center; gap:14px; padding:14px 0; border-top:2.5px dashed var(--line); }
.netrow:first-child { border-top:0; }
.netrow .grow { flex:1; min-width:0; } .netrow b { font-size:19px; } .netrow .muted { display:block; }
.netrow button { padding:10px 18px; }
.netrow.off { opacity:.55; }
.netdot { width:30px; height:30px; flex-shrink:0; border-radius:999px; border:2.5px solid var(--line); display:grid; place-items:center;
  color:#fff; font-weight:900; font-size:14px; }
.coins { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; margin:14px 0; }
.coins form { display:flex; }
button.coin { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:start;
  color:var(--fg); background:#fff; box-shadow:4px 4px 0 var(--line); padding:12px 14px; }
button.coin b { font-size:22px; font-weight:900; } button.coin small { font-size:13px; font-weight:600; color:var(--muted); }
.coins form:nth-child(3n+1) button.coin { background:var(--lime); } .coins form:nth-child(3n+2) button.coin { background:var(--sky); }
.coins form:nth-child(3n) button.coin { background:var(--pink); }
.coins button.coin.disabled { background:#eee; opacity:.6; pointer-events:none; }
.choice { border:3px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--sky); }
.choice:nth-child(2) { background:var(--pink); }
/* Бесплатно / без рекламы, вопросы, номер заказа, подсветка адреса. */
.cmp-wrap { overflow-x:auto; }
.cmp { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:3px solid var(--line); border-radius:18px;
  box-shadow:6px 6px 0 var(--line); overflow:hidden; }
.cmp th, .cmp td { padding:12px 14px; text-align:start; border-top:2px dashed var(--line); }
.cmp tr:first-child th { border-top:0; font-size:17px; } .cmp th.paid { background:var(--lime); }
.cmp td:last-child { font-weight:800; }
.faq { background:#fff; border:2.5px solid var(--line); border-radius:14px; padding:12px 16px; margin:10px 0; }
.faq summary { margin:0; font-size:17px; } .faq p { margin:10px 0 2px; }
/* Полный UID заказа: моноширинный, чуть мельче заголовка, на узком экране переносится. */
.oid { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.8em; overflow-wrap:anywhere; background:var(--lime);
  border:2.5px solid var(--line); border-radius:10px; padding:0 8px; }
.hl { background:var(--lime); }
.save-link { margin:4px 0 8px; } .save-link .muted { flex:1; min-width:220px; }
.after-pay { font-weight:600; margin-top:18px; }
.apk-btn { white-space:nowrap; } .apk-btn small { font-weight:600; opacity:.75; }
footer { margin-top:44px; font-size:14px; } footer a { font-weight:600; text-decoration-color:var(--fg); text-decoration-thickness:1px; }
.warn { background:var(--warn-bg); border:2.5px solid var(--line); border-radius:12px; padding:10px 14px; margin:12px 0; font-size:15px; font-weight:600; }
.err { color:var(--err); font-weight:700; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:14px; overflow-wrap:anywhere; direction:ltr; text-align:left; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.field { background:#fff; border:2.5px solid var(--line); border-radius:12px; padding:10px 12px; flex:1; min-width:0; }
textarea.field { width:100%; height:84px; resize:vertical; color:var(--fg); margin:8px 0; }
.key-item { margin:14px 0 22px; }
.device-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; border-top:2px solid var(--line); }
.device-row .grow { flex:1; min-width:200px; }
.new-key { margin:16px 0 6px; } .new-keys { gap:8px; }
.key-qrs { margin-top:16px; }
.cg + .cg { margin-left:0.18em; }
.field.big { white-space:nowrap; min-width:max-content; }
.big { font-size:30px; font-weight:900; letter-spacing:0.06em; background:var(--lime); }
.qrs { display:grid; grid-template-columns:minmax(0, 320px); gap:18px; margin-top:12px; }
.qrs .qr { width:100%; max-width:320px; }
.qr { background:#fff; padding:10px; border:3px solid var(--line); border-radius:14px; width:220px; max-width:100%; }
.pill { display:inline-block; padding:2px 10px; border-radius:8px; border:2px solid var(--line); background:#fff; font-size:13px; font-weight:800; }
.pill.ok { background:var(--lime); }
details summary { cursor:pointer; font-weight:700; margin-top:10px; }
@media (max-width: 600px) {
  .plans { grid-template-columns:minmax(0, 1fr); gap:16px; }
  .plan { min-height:15vh; padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:10px 12px;
    grid-template-areas:"term price" "save btn"; align-items:center; text-align:left; box-shadow:6px 6px 0 var(--line); }
  .term { grid-area:term; } .price { grid-area:price; font-size:42px; justify-self:end; }
  .save { grid-area:save; justify-self:start; }
  .plan button, .plan .btn { grid-area:btn; width:auto; font-size:16px; padding:10px 18px; }
  .price.free { font-size:24px; }
  .cmp th, .cmp td { padding:9px 10px; font-size:14px; }
  .cmp tr:first-child th { font-size:15px; }
  .steps, .connects, .qrs, .renew { grid-template-columns:1fr; }
  .coin-tabs .nets { display:none; }
  .coin-panel { padding:2px 14px; }
  .netrow { gap:10px; } .netrow b { font-size:16px; } .netrow .muted { font-size:13px; }
  .netrow button { padding:8px 12px; font-size:15px; }
  .connect.app { flex-direction:column; align-items:flex-start; padding:22px; }
  .app-icon { width:84px; height:84px; border-radius:22px; } .app-icon svg { width:60px; height:60px; }
}