/* ════════════════════════════════════════════════════════════
   СТРАНИЦЫ ОПЛАТЫ — вид переносится в stranica() server/oplata_stranicy.js.
   Классы прежние, где они уже были (.plashka, .tarif, .tag, .soglasie,
   .knopka, .vtoraya, .poyasnenie, .oshibka, .lead), — новые добавлены.
   ВСЕ ЗНАЧЕНИЯ — из mynorm-app/lib/theme.dart и DIZAYN.md, чисел мимо
   переменных ниже нет.
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:"Bebas Neue Cyrillic";src:url(../fonts/BebasNeueCyrillic-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/Onest-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/Onest-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/Onest-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/Onest-800.woff2) format("woff2");font-weight:800;font-display:swap}
html,body{margin:0;background:#F5F6F6}
/* касание на телефоне — как на главной: без серой вспышки и задержки,
   долгое нажатие не выделяет текст кнопки (сжатие .knopka:active — ниже) */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.pg a,.pg button,.pg label,.pg summary{touch-action:manipulation}
.pg .knopka,.pg .vhod-knopka,.pg .tarif{-webkit-user-select:none;user-select:none}

.pg{
  /* цвет — MnColors */
  --deep:#003E46; --accent:#008A9F; --accent-t:#007688; --hot:#FF7D1F; --line:#77E3ED;
  --paper:#F5F6F6; --card:#FFFFFF; --warm:#F2F3F3; --soft:#E4F7FA;
  --ink:#0E2226; --lead:#3C4145; --muted:#646C6F; --faint:#9AA1A3; --hair:#E6E7E7;
  --ok:#0E8A5C; --ok-t:#0B7A51; --ok-bg:#E4F5EE; --warn-ink:#8A5A20; --warn-bg:#FDF3E8; --over-t:#C62828;
  --google-obvodka:#747775; --google-tekst:#1F1F1F;
  /* текст — MnText */
  --t1:11px; --t2:12px; --t3:13px; --t4:15px; --t5:17px; --t6:22px; --t7:26px;
  --z-razdel:26px; --z-ekran:36px;
  --lh-tight:1.15; --lh-big:1; --lh-name:1.3; --lh-text:1.5;
  --trek-zag:.005em; --trek-chislo:-.08em; --trek-knopka:-.01em;
  /* отступы — MnSpace */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --pole:20px;
  /* форма — MnRadius, MnKnopka, MnShadow */
  --r-xs:14px; --r-card:22px; --r-l:26px; --pill:999px; --knopka:54px; --knopka-m:44px;
  --ten-card:0 2px 10px rgba(14,34,38,.06);
  --ten-knopka:0 3px 12px rgba(0,62,70,.2);
  --bystro:120ms;
  /* шрифты с запасными: если фирменный не догрузился, будет системный без засечек, а не Times */
  --fd:"Bebas Neue Cyrillic","Bebas Neue","Avenir Next Condensed","Roboto Condensed","Arial Narrow",sans-serif-condensed,sans-serif;
  --ft:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  max-width:480px;margin:0 auto;
  background:var(--paper);color:var(--ink);
  font:400 var(--t4)/var(--lh-text) var(--ft);
  -webkit-font-smoothing:antialiased;
  padding:var(--s5) var(--pole) var(--s7);
}
.pg *{box-sizing:border-box}
.pg a{color:var(--accent-t)}
.pg .shapka{display:flex;align-items:center;justify-content:space-between;min-height:var(--knopka-m);margin:0 0 var(--s6)}
.pg .logo{display:block;line-height:0}
.pg .logo img{height:40px;width:auto}
.pg .yazyk{display:inline-flex;align-items:center;min-height:var(--knopka-m);font:600 var(--t4)/1 var(--ft);color:var(--accent-t);text-decoration:none}

/* заголовок экрана — Bebas 36, раздела — Bebas 26 (DIZAYN.md, раздел 3) */
.pg h1,.pg h2{font-family:var(--fd);font-weight:400;line-height:var(--lh-tight);letter-spacing:var(--trek-zag)}
.pg h1{font-size:var(--z-ekran);margin:0 0 var(--s3)}
.pg h2{font-size:var(--z-razdel);margin:var(--s6) 0 var(--s3)}
.pg .lead{color:var(--lead);font-size:var(--t5);margin:0 0 var(--s5)}
.pg p{margin:0 0 var(--s3)}

/* белая карточка — Kartochka.krupnaya: 22, тень card, поля 16 по бокам и 20 сверху-снизу */
.pg .blok{background:var(--card);border-radius:var(--r-card);box-shadow:var(--ten-card);padding:var(--s5) var(--s4);margin:0 0 var(--s3)}
.pg .blok-shapka{display:flex;gap:var(--s3);align-items:center;margin:0 0 var(--s3)}
.pg .blok-shapka svg{flex:none;width:24px;height:24px;color:var(--accent)}
.pg .blok-shapka b{display:block;font:600 var(--t5)/var(--lh-name) var(--ft)}
.pg .birka{display:inline-flex;align-items:center;margin-top:var(--s1);font:600 var(--t2)/1 var(--ft);padding:var(--s1) var(--s2);border-radius:var(--pill);background:var(--ok-bg);color:var(--ok-t)}
.pg .birka.sin{background:var(--soft);color:var(--accent-t)}
.pg .birka.oranzh{background:var(--hot);color:var(--deep)}
.pg .tekst{font-size:var(--t4);line-height:var(--lh-text);color:var(--lead);margin:0}

/* что даёт Pro — значки без подложек (DIZAYN.md, раздел 6) */
.pg .dayot{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.pg .dayot li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t4);line-height:var(--lh-text);color:var(--lead)}
.pg .dayot li b{color:var(--ink);font-weight:600}
.pg .dayot svg{flex:none;width:24px;height:24px;color:var(--accent)}

/* шаги с номерами */
.pg .shagi{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:s}
.pg .shagi li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t4);line-height:var(--lh-text);color:var(--lead);counter-increment:s}
.pg .shagi li:before{content:counter(s);flex:none;width:var(--s6);height:var(--s6);border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font:600 var(--t3)/1 var(--ft)}

/* вход: кнопки Apple и Google рисуют сами Apple и Google — здесь их вид */
.pg .vhod-knopka{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--knopka);border-radius:var(--pill);font:600 var(--t5)/1 var(--ft);letter-spacing:var(--trek-knopka);margin:0 0 var(--s3);text-decoration:none;border:0;transition:transform var(--bystro)}
.pg .vhod-knopka svg{width:20px;height:20px}
.pg .vhod-knopka.apple{background:#000;color:#fff}
.pg .vhod-knopka.google{background:var(--card);color:var(--google-tekst);box-shadow:inset 0 0 0 1px var(--google-obvodka)}
.pg .ili{display:flex;align-items:center;gap:var(--s3);color:var(--muted);font-size:var(--t3);margin:var(--s1) 0 var(--s4)}
.pg .ili:before,.pg .ili:after{content:"";flex:1;height:1px;background:var(--hair)}

/* поля */
.pg label.pole{display:block;font:600 var(--t4)/var(--lh-name) var(--ft);margin:0 0 var(--s2)}
.pg input[type=email],.pg input[type=text]{width:100%;min-height:var(--knopka);font:400 var(--t5)/1.2 var(--ft);padding:0 var(--s4);border:1px solid var(--hair);border-radius:var(--r-card);background:var(--card);color:var(--ink)}
.pg input::placeholder{color:var(--faint)}
.pg input:focus{outline:2px solid var(--accent);outline-offset:1px}

/* кнопки — FilledButton / OutlinedButton темы: 54, таблетка, 17 / 600 */
.pg .knopka{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;min-height:var(--knopka);padding:0 var(--s5);border:0;border-radius:var(--pill);background:var(--deep);color:#fff;font:600 var(--t5)/var(--lh-tight) var(--ft);letter-spacing:var(--trek-knopka);text-align:center;text-decoration:none;cursor:pointer;margin:var(--s4) 0 0;transition:transform var(--bystro)}
.pg .knopka.vtoraya{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.pg .knopka:active,.pg .vhod-knopka:active{transform:scale(.97)}
.pg .knopka:disabled{opacity:.6}

/* кто вошёл */
.pg .kto{display:flex;align-items:center;gap:var(--s2);background:var(--card);border-radius:var(--pill);box-shadow:var(--ten-card);min-height:var(--knopka-m);padding:var(--s1) var(--s1) var(--s1) var(--s4);margin:0 0 var(--s5);font-size:var(--t3);line-height:var(--lh-name);color:var(--lead)}
.pg .kto svg{width:20px;height:20px;color:var(--ok);flex:none}
.pg .kto a{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--knopka-m);padding:0 var(--s3);font-weight:600;font-size:var(--t4);text-decoration:none}

/* тарифы — карточки с кружком выбора (KruzhokVybora) */
.pg .tarify{display:grid;gap:var(--s3);margin:0 0 var(--s2)}
.pg .tarif{position:relative;display:grid;grid-template-columns:var(--s6) 1fr auto;column-gap:var(--s3);align-items:center;background:var(--card);border-radius:var(--r-card);box-shadow:var(--ten-card);padding:var(--s4);cursor:pointer}
.pg .tarif input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border-radius:50%;border:2px solid var(--hair);grid-row:1/3}
.pg .tarif input:checked{border-color:var(--accent-t);background:radial-gradient(circle,var(--accent-t) 0 5px,transparent 6px)}
.pg .tarif:has(input:checked){background:var(--soft);box-shadow:inset 0 0 0 2px var(--accent)}
.pg .tarif .imya{font:600 var(--t5)/var(--lh-name) var(--ft)}
.pg .tarif .cena{grid-column:3;grid-row:1/3;text-align:right;font:800 var(--t6)/var(--lh-big) var(--ft);color:var(--deep);font-variant-numeric:tabular-nums}
.pg .tarif .cena small{display:block;font:400 var(--t2)/var(--lh-name) var(--ft);color:var(--muted);margin-top:var(--s1)}
.pg .tarif .pod{grid-column:2;font-size:var(--t3);color:var(--muted)}
.pg .tag{position:absolute;top:calc(-1 * var(--s3));right:var(--s4);font:600 var(--t2)/1 var(--ft);background:var(--hot);color:var(--deep);border-radius:var(--pill);padding:var(--s1) var(--s2)}

.pg .poyasnenie{color:var(--muted);font-size:var(--t3);line-height:var(--lh-text);margin:var(--s2) 0 0}
.pg .soglasie{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t3);line-height:var(--lh-text);color:var(--lead);margin:var(--s5) 0 0;cursor:pointer}
.pg .soglasie input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent-t)}
.pg .oshibka{color:var(--over-t);font-weight:600;font-size:var(--t4);margin:var(--s3) 0 0}
/* плашка — мелкая плашка 14 */
.pg .plashka{display:flex;gap:var(--s3);align-items:flex-start;background:var(--soft);color:var(--deep);border-radius:var(--r-xs);padding:var(--s3) var(--s4);font:500 var(--t4)/var(--lh-text) var(--ft);margin:var(--s4) 0 0}
.pg .plashka svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--accent-t)}
.pg .plashka.zhdyom{background:var(--warn-bg);color:var(--warn-ink)}
.pg .plashka.zhdyom svg{color:var(--warn-ink)}

/* липкий подвал с кнопкой и растушёвкой (MnPodval) */
.pg .niz{position:sticky;bottom:0;margin:var(--s5) calc(-1 * var(--pole)) 0;padding:var(--s3) var(--pole) calc(var(--s4) + env(safe-area-inset-bottom));background:linear-gradient(rgba(245,246,246,0),var(--paper) 24%)}
.pg .niz .knopka{margin:0;box-shadow:var(--ten-knopka)}
.pg .zamok{display:flex;align-items:center;justify-content:center;gap:var(--s1);font-size:var(--t2);color:var(--muted);margin:var(--s2) 0 0}
.pg .zamok svg{width:14px;height:14px}

/* итог */
.pg .itog{text-align:center;padding:var(--s6) 0 var(--s2)}
.pg .itog .znak{width:72px;height:72px;margin:0 auto var(--s5);border-radius:50%;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok)}
.pg .itog .znak svg{width:36px;height:36px}
.pg .itog .znak.zhdu{background:var(--soft);color:var(--accent)}
.pg .itog .lead{margin:0 auto var(--s1);max-width:320px}
.pg .krutilka{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--deep);animation:kr 1s linear infinite}
@keyframes kr{to{transform:rotate(360deg)}}

/* таблица подписки — Kartochka.spisok: строки с линиями */
.pg table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r-card);box-shadow:var(--ten-card);overflow:hidden}
.pg td{padding:var(--s4);border-bottom:1px solid var(--hair);font-size:var(--t4);line-height:var(--lh-name)}
.pg tr:last-child td{border-bottom:0}
.pg td+td{text-align:right;font-weight:600;white-space:nowrap}
.pg .zhivaya{color:var(--ok-t)}

/* вопросы */
.pg details{background:var(--card);border-radius:var(--r-card);box-shadow:var(--ten-card);margin:0 0 var(--s2)}
.pg summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s3);min-height:var(--knopka);padding:var(--s3) var(--s4);font:600 var(--t4)/var(--lh-name) var(--ft)}
.pg summary::-webkit-details-marker{display:none}
.pg summary:after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.pg details[open] summary:after{transform:translateY(2px) rotate(-135deg)}
.pg details .otvet{padding:0 var(--s4) var(--s4);font-size:var(--t4);line-height:var(--lh-text);color:var(--lead)}

/* подвал */
.pg .podval{text-align:center;font-size:var(--t2);line-height:var(--lh-text);color:var(--muted);margin:var(--s7) 0 0}
.pg .podval a{color:var(--muted)}
.pg .podval .pomosh{font-size:var(--t4);margin:0 0 var(--s2)}
.pg .podval .pomosh a{color:var(--accent-t);font-weight:600;text-decoration:none}

/* справка «Как оформить» */
.pg .blok .knopka{margin-top:var(--s4)}
.pg .blok .knopka + .knopka{margin-top:var(--s3)}
.pg .vrezka{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-xs);background:var(--soft);color:var(--deep);font-size:var(--t3);line-height:var(--lh-text)}
.pg .ceny{display:grid;gap:var(--s2)}
.pg .ceny div{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);background:var(--paper);border-radius:var(--r-xs);padding:var(--s3) var(--s4);font-size:var(--t4)}
.pg .ceny span{display:flex;flex-direction:column;font-weight:600}
.pg .ceny small{font-weight:400;color:var(--muted);font-size:var(--t2)}
.pg .ceny b{font:800 var(--t6)/var(--lh-big) var(--ft);color:var(--deep);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.pg .krutilka{animation:none}.pg *{transition:none!important}}