/* Mini-app v2 — one layout, 18 themes (a..h from the design source, i..r the strict set).
   body[data-variant=a..r] picks the theme, body[data-mode=light|dark] the scheme.
   a Минимал · b Прайват · c Бадди · d Нативный · e Терминал · f Журнал · g Неон · h Поп
   i Оникс · j Швейцарский · k Гроссбух · l Графит · m Атлас · n Нуар · o Сталь
   p Слоновая кость · q Соболь · r Кварц */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  transition: background 0.25s;
}

/* ---------- palettes (from design P.a..P.h) ---------- */
body[data-variant="a"][data-mode="light"] { --bg:#F5F6F8; --card:#FFFFFF; --ink:#161A20; --sub:#7A828E; --line:#E8EAEF; --acc:#2E63E7; --accInk:#FFFFFF; --soft:#EDF2FE; --chip:#F0F2F6; --tabbg:#FFFFFF; --ok:#189A62; --warn:#C4483A; --ringoff:#D3D8DF; }
body[data-variant="a"][data-mode="dark"]  { --bg:#0E1013; --card:#181B21; --ink:#EFF1F5; --sub:#8D96A3; --line:#272C34; --acc:#6E96FF; --accInk:#0D1117; --soft:#1D2636; --chip:#20242C; --tabbg:#14171C; --ok:#3ECF8E; --warn:#FF7A66; --ringoff:#3A4149; }

body[data-variant="b"][data-mode="light"] { --bg:#F4F2EC; --card:#FFFFFF; --ink:#1D1A14; --sub:#8A8272; --line:#E6E1D2; --acc:#1E4B39; --accInk:#F4F1E6; --soft:#EDE9DC; --chip:#EDE9DC; --tabbg:#FFFFFF; --ok:#2E7D5B; --warn:#B0442F; --gold:#A5824A; }
body[data-variant="b"][data-mode="dark"]  { --bg:#121310; --card:#1B1D19; --ink:#ECE7DA; --sub:#95907E; --line:#2B2E27; --acc:#C9A45C; --accInk:#191510; --soft:#232620; --chip:#232620; --tabbg:#171914; --ok:#5CBB8F; --warn:#E06B52; --gold:#C9A45C; }

body[data-variant="c"][data-mode="light"] { --bg:#FBF1E7; --card:#FFFFFF; --ink:#3B2E3E; --sub:#9A8CA0; --line:#F0E2D4; --acc:#EF7048; --accInk:#FFFFFF; --soft:#FCE9DE; --chip:#F7EFE6; --tabbg:#FFFFFF; --ok:#3FBF97; --warn:#D64545; }
body[data-variant="c"][data-mode="dark"]  { --bg:#1B1526; --card:#271F38; --ink:#F5EFF8; --sub:#A99DB8; --line:#39304E; --acc:#FF8B5C; --accInk:#2B1508; --soft:#3C2A24; --chip:#2E2540; --tabbg:#211A2F; --ok:#4FD3A8; --warn:#FF6B6B; }

body[data-variant="d"][data-mode="light"] { --bg:#EFEFF4; --card:#FFFFFF; --ink:#0A0A0A; --sub:#8E8E93; --line:#E5E5EA; --acc:#2AA0DC; --accInk:#FFFFFF; --soft:#E7F4FC; --chip:#F2F2F7; --tabbg:#F9F9F9; --ok:#34C759; --warn:#FF3B30; }
body[data-variant="d"][data-mode="dark"]  { --bg:#000000; --card:#1C1C1E; --ink:#FFFFFF; --sub:#98989E; --line:#2C2C2E; --acc:#4FB4E8; --accInk:#06202E; --soft:#0F2A3D; --chip:#2A2A2C; --tabbg:#121212; --ok:#30D158; --warn:#FF453A; }

body[data-variant="e"][data-mode="light"] { --bg:#F2F4F1; --card:#FFFFFF; --ink:#17201B; --sub:#6F7D74; --line:#DFE5DF; --acc:#0C8F4E; --accInk:#FFFFFF; --soft:#E3F3E9; --chip:#EAEFEA; --tabbg:#FFFFFF; --ok:#0C8F4E; --warn:#C74E39; }
body[data-variant="e"][data-mode="dark"]  { --bg:#0A0F0C; --card:#101712; --ink:#D9E6DC; --sub:#74907F; --line:#1F2D24; --acc:#3DF08C; --accInk:#06130B; --soft:#133021; --chip:#172219; --tabbg:#0D130F; --ok:#3DF08C; --warn:#FF6B5E; }

body[data-variant="f"][data-mode="light"] { --bg:#F7F3EA; --card:#F7F3EA; --ink:#191512; --sub:#857D70; --line:#D8D0C0; --acc:#C03B2D; --accInk:#FFF9EF; --soft:#F0E8D8; --chip:#EFE9DB; --tabbg:#F7F3EA; --ok:#2F7A4D; --warn:#C03B2D; }
body[data-variant="f"][data-mode="dark"]  { --bg:#171310; --card:#171310; --ink:#EDE6D9; --sub:#94897A; --line:#332C22; --acc:#E05B4B; --accInk:#1A0F0C; --soft:#262017; --chip:#221D15; --tabbg:#151110; --ok:#6DBB8C; --warn:#E06B52; }

body[data-variant="g"][data-mode="light"] { --bg:linear-gradient(160deg,#EEE9FF,#E6F0FF 50%,#F3E8FF); --card:rgba(255,255,255,0.6); --ink:#221A3A; --sub:#7B729A; --line:rgba(124,92,255,0.22); --acc:#7C5CFF; --acc2:#1FC7E0; --accInk:#FFFFFF; --soft:rgba(124,92,255,0.16); --chip:rgba(255,255,255,0.55); --tabbg:rgba(255,255,255,0.65); --ok:#22B573; --warn:#E1495A; }
body[data-variant="g"][data-mode="dark"]  { --bg:linear-gradient(160deg,#150E33,#1A1243 45%,#2B1254); --card:rgba(255,255,255,0.07); --ink:#F1EDFF; --sub:#9C93C4; --line:rgba(255,255,255,0.16); --acc:#9D7BFF; --acc2:#33E0F2; --accInk:#10082A; --soft:rgba(157,123,255,0.22); --chip:rgba(255,255,255,0.10); --tabbg:rgba(20,13,45,0.75); --ok:#3BE39B; --warn:#FF6B84; }

body[data-variant="h"][data-mode="light"] { --bg:#F6F4EC; --card:#FFFFFF; --ink:#101010; --sub:#62625A; --line:#101010; --acc:#C8F04B; --accInk:#101010; --soft:#ECF7C8; --chip:#EFEDE0; --tabbg:#FFFFFF; --ok:#1F9D55; --warn:#E0442E; }
body[data-variant="h"][data-mode="dark"]  { --bg:#141410; --card:#1D1D16; --ink:#F2F1E6; --sub:#9A9A8C; --line:#EDEBDC; --acc:#D3F55C; --accInk:#131308; --soft:#2C301A; --chip:#24241B; --tabbg:#191912; --ok:#7FD86B; --warn:#FF6B5E; }

/* ---------- per-theme typography & shape ---------- */
body[data-variant="b"] { --font: Georgia, "Times New Roman", serif; --radius: 10px; }
body[data-variant="b"] .big-num, body[data-variant="f"] .big-num { font-family: "Instrument Serif", Georgia, serif; }
body[data-variant="c"] { --font: "Nunito", system-ui, sans-serif; --radius: 22px; }
body[data-variant="d"] { --radius: 10px; }
body[data-variant="e"] { --font: "JetBrains Mono", ui-monospace, monospace; --radius: 6px; font-size: 13.5px; }
body[data-variant="f"] { --font: Georgia, serif; --radius: 0px; }
body[data-variant="f"] .card { border-left: 0; border-right: 0; box-shadow: none; }
body[data-variant="g"] { --radius: 20px; }
body[data-variant="g"] .card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); }
body[data-variant="g"] .btn.primary { background: linear-gradient(135deg, var(--acc), var(--acc2, var(--acc))); box-shadow: 0 8px 22px -8px var(--acc); }
body[data-variant="h"] { --font: "Unbounded", "Archivo Black", system-ui, sans-serif; --radius: 14px; font-size: 13.5px; }
body[data-variant="h"] .card { border: 2px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
body[data-variant="h"] .btn.primary { border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--line); }

/* ---------- strict set (i..r): restrained business palettes, no gradients ---------- */

/* i Оникс — уголь и серебро, тонкая линия */
body[data-variant="i"][data-mode="light"] { --bg:#EFEFEF; --card:#FAFAFA; --ink:#1A1B1D; --sub:#77797E; --line:#DCDDE0; --acc:#3A3D45; --accInk:#F5F5F5; --soft:#E4E5E8; --chip:#E9EAEC; --tabbg:#FAFAFA; --ok:#2E7D5B; --warn:#B5483C; --ringoff:#D0D1D5; }
body[data-variant="i"][data-mode="dark"]  { --bg:#0F1012; --card:#17181B; --ink:#E8E9EB; --sub:#8B8E95; --line:#26282C; --acc:#C3C6CE; --accInk:#141518; --soft:#202225; --chip:#1D1F22; --tabbg:#141517; --ok:#4CAF82; --warn:#D96B5C; --ringoff:#33363B; }
body[data-variant="i"] { --radius: 8px; }

/* j Швейцарский — белый лист, чёрная типографика, красная точка */
body[data-variant="j"][data-mode="light"] { --bg:#FFFFFF; --card:#FFFFFF; --ink:#111111; --sub:#6E6E6E; --line:#111111; --acc:#D91F26; --accInk:#FFFFFF; --soft:#F2F2F2; --chip:#F5F5F5; --tabbg:#FFFFFF; --ok:#1F7A46; --warn:#D91F26; }
body[data-variant="j"][data-mode="dark"]  { --bg:#161616; --card:#161616; --ink:#F2F2F2; --sub:#9B9B9B; --line:#F2F2F2; --acc:#FF4B4B; --accInk:#161616; --soft:#242424; --chip:#202020; --tabbg:#161616; --ok:#57B87F; --warn:#FF4B4B; }
body[data-variant="j"] { --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --radius: 0px; }
body[data-variant="j"] .card { border-width: 0 0 1px; box-shadow: none; }
body[data-variant="j"] .h-cap { letter-spacing: 0.14em; }

/* k Гроссбух — банковская зелень и кремовая бумага */
body[data-variant="k"][data-mode="light"] { --bg:#F4F1E8; --card:#FCFAF3; --ink:#20261F; --sub:#7C8073; --line:#DED9C8; --acc:#1F4D36; --accInk:#F4F1E6; --soft:#E8E4D4; --chip:#EDE9DB; --tabbg:#FCFAF3; --ok:#1F4D36; --warn:#9E3B2C; --gold:#8C7443; }
body[data-variant="k"][data-mode="dark"]  { --bg:#141712; --card:#1B1F19; --ink:#E7E4D6; --sub:#8F937F; --line:#2C312A; --acc:#7FAE93; --accInk:#121710; --soft:#232921; --chip:#20251E; --tabbg:#171B15; --ok:#7FAE93; --warn:#CE7257; --gold:#A98F58; }
body[data-variant="k"] { --radius: 6px; }
body[data-variant="k"] .big-num { font-family: Georgia, "Times New Roman", serif; }

/* l Графит — матовый тёмно-серый, стальной синий */
body[data-variant="l"][data-mode="light"] { --bg:#ECEDEF; --card:#F7F8F9; --ink:#22262B; --sub:#7A8087; --line:#D8DBDF; --acc:#44576B; --accInk:#F5F7F9; --soft:#E1E5E9; --chip:#E6E9EC; --tabbg:#F7F8F9; --ok:#33795E; --warn:#AF4E3E; }
body[data-variant="l"][data-mode="dark"]  { --bg:#131518; --card:#1A1D21; --ink:#E4E7EA; --sub:#878D95; --line:#282C31; --acc:#8CA6BE; --accInk:#12161A; --soft:#212529; --chip:#1E2226; --tabbg:#16191C; --ok:#4FA57F; --warn:#D2705C; }
body[data-variant="l"] { --radius: 10px; }

/* m Атлас — глубокий нави и латунь */
body[data-variant="m"][data-mode="light"] { --bg:#EEF0F4; --card:#FBFCFD; --ink:#18243A; --sub:#6E7A8E; --line:#D9DEE7; --acc:#1B3358; --accInk:#F3F5F9; --soft:#E2E7EF; --chip:#E7EBF1; --tabbg:#FBFCFD; --ok:#276A4C; --warn:#A94A38; --gold:#9A7B3F; }
body[data-variant="m"][data-mode="dark"]  { --bg:#0E1420; --card:#151C2B; --ink:#E3E8F0; --sub:#8391A6; --line:#232C3E; --acc:#C2A566; --accInk:#131A28; --soft:#1D2534; --chip:#1A2230; --tabbg:#111827; --ok:#4FA57F; --warn:#D2705C; --gold:#C2A566; }
body[data-variant="m"] { --radius: 8px; }

/* n Нуар — чистое ч/б, без цветного акцента */
body[data-variant="n"][data-mode="light"] { --bg:#F5F5F5; --card:#FFFFFF; --ink:#0A0A0A; --sub:#707070; --line:#E0E0E0; --acc:#0A0A0A; --accInk:#FFFFFF; --soft:#ECECEC; --chip:#F0F0F0; --tabbg:#FFFFFF; --ok:#2E2E2E; --warn:#6E6E6E; }
body[data-variant="n"][data-mode="dark"]  { --bg:#0A0A0A; --card:#141414; --ink:#F5F5F5; --sub:#8F8F8F; --line:#262626; --acc:#F5F5F5; --accInk:#0A0A0A; --soft:#1E1E1E; --chip:#1A1A1A; --tabbg:#101010; --ok:#D6D6D6; --warn:#8F8F8F; }
body[data-variant="n"] { --radius: 4px; }
body[data-variant="n"] .pill.ok { color: var(--ink); }

/* o Сталь — холодный светлый металл, приборный синий */
body[data-variant="o"][data-mode="light"] { --bg:#E9ECEF; --card:#F6F8FA; --ink:#1D2530; --sub:#71808F; --line:#D2D9E0; --acc:#245A8D; --accInk:#F2F6FA; --soft:#DDE5EC; --chip:#E2E8EE; --tabbg:#F6F8FA; --ok:#2D7A55; --warn:#AE4B3B; }
body[data-variant="o"][data-mode="dark"]  { --bg:#11151A; --card:#181E25; --ink:#DFE5EB; --sub:#7E8B99; --line:#252D36; --acc:#6FA3D0; --accInk:#10161C; --soft:#1F262E; --chip:#1C232B; --tabbg:#141A20; --ok:#4CA47C; --warn:#D06F5B; }
body[data-variant="o"] { --radius: 6px; }

/* p Слоновая кость — тёплый светлый тон, тёмный кофе */
body[data-variant="p"][data-mode="light"] { --bg:#F7F3EC; --card:#FDFBF6; --ink:#2C2419; --sub:#8C8272; --line:#E5DECF; --acc:#4A3826; --accInk:#F7F3EA; --soft:#EFE9DC; --chip:#F1ECDF; --tabbg:#FDFBF6; --ok:#4E6E4C; --warn:#A2543C; }
body[data-variant="p"][data-mode="dark"]  { --bg:#171310; --card:#1E1915; --ink:#EAE3D6; --sub:#96897A; --line:#2E2820; --acc:#C9B18C; --accInk:#191410; --soft:#272119; --chip:#241E17; --tabbg:#1A1512; --ok:#7FA478; --warn:#CB7A5B; }
body[data-variant="p"] { --font: Georgia, "Times New Roman", serif; --radius: 10px; }

/* q Соболь — почти чёрный и бронза */
body[data-variant="q"][data-mode="light"] { --bg:#EFEDEA; --card:#F9F8F5; --ink:#211E1A; --sub:#7E786E; --line:#DDD8CF; --acc:#7A5C34; --accInk:#F7F4EE; --soft:#E7E2D8; --chip:#EBE7DE; --tabbg:#F9F8F5; --ok:#3E6B4F; --warn:#A44E37; --gold:#7A5C34; }
body[data-variant="q"][data-mode="dark"]  { --bg:#0E0D0B; --card:#161411; --ink:#E6E1D8; --sub:#8C8578; --line:#262219; --acc:#B08D57; --accInk:#141008; --soft:#1F1B15; --chip:#1C1813; --tabbg:#121109; --ok:#6E9B77; --warn:#C77455; --gold:#B08D57; }
body[data-variant="q"] { --radius: 8px; }

/* r Кварц — нейтральный серый, приглушённый индиго */
body[data-variant="r"][data-mode="light"] { --bg:#F1F1F3; --card:#FBFBFC; --ink:#212227; --sub:#797B84; --line:#DFDFE4; --acc:#4A4E69; --accInk:#F4F4F8; --soft:#E5E5EA; --chip:#E9E9ED; --tabbg:#FBFBFC; --ok:#31795A; --warn:#AC4D40; }
body[data-variant="r"][data-mode="dark"]  { --bg:#121317; --card:#1A1B20; --ink:#E5E5E9; --sub:#888A93; --line:#27282F; --acc:#9FA3C1; --accInk:#14151B; --soft:#212228; --chip:#1E1F25; --tabbg:#16171C; --ok:#4EA37D; --warn:#D0705E; }
body[data-variant="r"] { --radius: 12px; }

/* ---------- layout ---------- */
.screen {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 14px 8px;
  display: grid;
  /* single definite column: min 0 lets children shrink, 1fr caps at container width
     so long content (referral h1, 3-col stats) wraps instead of overflowing. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  padding: 16px;
}
.h-cap {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 8px;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.spread {
  justify-content: space-between;
}
.sub {
  color: var(--sub);
}
.big-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}
.dot.off {
  background: var(--sub);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  text-decoration: none; /* connect buttons are <a href="happ://…"> — no underline */
  border: 0;
  cursor: pointer;
  font: 600 15px/1 var(--font, system-ui);
  border-radius: calc(var(--radius, 14px) - 2px);
  padding: 14px 16px;
  min-height: 44px;
  transition: transform 0.08s, opacity 0.15s;
}
.btn:active {
  transform: scale(0.985);
}
.btn.primary {
  background: var(--acc);
  color: var(--accInk);
}
.btn.ghost {
  background: var(--chip);
  color: var(--ink);
}
.btn.sm {
  width: auto;
  padding: 9px 14px;
  font-size: 13px;
  min-height: 36px;
}
.btn:disabled {
  opacity: 0.5;
}

.prog {
  height: 8px;
  border-radius: 99px;
  background: var(--ringoff, var(--chip));
  overflow: hidden;
}
.prog > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--acc);
  transition: width 0.5s ease;
}

/* plan cards */
.plans-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.plan-opt {
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius, 14px) - 2px);
  background: var(--card);
  padding: 11px 8px;
  text-align: center;
  cursor: pointer;
}
.plan-opt.on {
  border-color: var(--acc);
  background: var(--soft);
}
.plan-opt .m {
  font-size: 12px;
  color: var(--sub);
}
.plan-opt .p {
  font-weight: 700;
  margin-top: 4px;
  font-size: 14.5px;
}
.plan-opt .d {
  font-size: 10.5px;
  color: var(--ok);
  margin-top: 2px;
  min-height: 13px;
}
.badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--acc);
  color: var(--accInk);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

/* premium period cards (Подписка «Срок») — ported from hiorbit-miniapp-final #s-sub */
.periods { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.period {
  position:relative; padding:16px 15px 15px; border-radius:calc(var(--radius,14px) - 2px);
  cursor:pointer; background:var(--card); border:1.5px solid var(--line);
  transition:border-color .2s, background .2s, transform .2s;
}
.period:active { transform:translateY(-1px); }
.period.on { border-color:var(--acc); background:var(--soft); }
.period .term { font-size:13px; color:var(--sub); font-weight:560; }
.period .pm { margin-top:9px; font-size:23px; font-weight:700; letter-spacing:-.6px; color:var(--ink); }
.period .pm span { font-size:13px; font-weight:550; color:var(--sub); letter-spacing:0; }
.period.on .pm span { color:var(--acc); }
.period .tot { font-size:11.5px; color:var(--faint,var(--sub)); margin-top:3px; }
.period .tag {
  position:absolute; top:-9px; right:12px; font-size:10.5px; font-weight:680; letter-spacing:.02em;
  padding:3px 8px; border-radius:100px; background:var(--acc); color:var(--accInk);
}
.period .check {
  position:absolute; top:13px; right:13px; color:var(--acc);
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.period.on .check { opacity:1; }

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  border: 1.5px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chip.on {
  border-color: var(--acc);
  background: var(--soft);
}
.chip:disabled {
  opacity: 0.45;
}

/* Устройства — premium tier selector (Подписка) */
.tiers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 15px 5px 13px;
  border-radius: calc(var(--radius,14px) - 4px);
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  transition: border-color .2s, background .2s, transform .12s;
}
.tier:active { transform: translateY(-1px); }
.tier.on { border-color: var(--acc); background: var(--soft); }
.tier.locked { opacity: .34; }
.tier.locked .tglyph, .tier.locked .tnum, .tier.locked .tlabel { color: var(--sub); }
.tier .tglyph { color: var(--sub); opacity: .8; margin-bottom: 1px; }
.tier.on .tglyph { color: var(--acc); opacity: 1; }
.tier .tnum {
  font-size: 20px; font-weight: 780; line-height: 1;
  letter-spacing: -.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tier .tlabel { font-size: 10.5px; font-weight: 560; color: var(--sub); letter-spacing: .01em; }
.tier.on .tlabel { color: var(--acc); }
.tier .tcheck {
  position: absolute; top: 5px; right: 5px; color: var(--acc);
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tier.on .tcheck { opacity: 1; }
.tier-more {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: 9px; padding: 11px 14px;
  border-radius: calc(var(--radius,14px) - 4px);
  background: var(--chip); border: 1.5px solid var(--line);
  color: var(--sub); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.tier-more:active { transform: translateY(-1px); }
.tier-more .svg-ico { color: var(--sub); }

/* Подписка — more breathing room between sections (Срок → Устройства → Промокод →
   Итого → Способ оплаты). Scoped to the sub tab so other screens keep their density. */
#screen[data-tab="sub"] { gap: 18px; }
#screen[data-tab="sub"] .tier-more { margin-top: 13px; }

/* connect steps */
.step {
  display: flex;
  gap: 12px;
}
.step-num {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--soft);
  color: var(--acc);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  word-break: break-all;
}
.link-box {
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius, 14px) - 4px);
  padding: 10px 12px;
}

/* account list */
.li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.li:last-child {
  border-bottom: 0;
}

.inp {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius, 14px) - 4px);
  background: var(--card);
  color: var(--ink);
  font: 500 16px/1.3 var(--font, system-ui);
  padding: 11px 13px;
  outline: none;
}
.inp:focus {
  border-color: var(--acc);
}

/* tabs */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: var(--tabbg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 10;
}
.tabs button {
  flex: 1;
  background: none;
  border: 0;
  color: var(--sub);
  font: 500 10.5px/1.2 var(--font, system-ui);
  padding: 8px 0 10px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  justify-items: center;
}
.tabs button.on {
  color: var(--acc);
}
.t-ico {
  font-size: 20px;
  line-height: 1;
}

/* toast + skeleton */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 60;
  max-width: 90vw;
  text-align: center;
}
body[data-variant="g"] .toast {
  background: #10082a;
  color: #f1edff;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.skel {
  min-height: 70vh;
  display: grid;
  place-items: center;
  color: var(--sub);
}
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--chip);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.fade {
  animation: fade 0.35s ease both;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- guided connection wizard ---------- */
.wiz {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 6px 6px;
}
.wiz-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.wiz-sub {
  color: var(--sub);
  font-size: 14.5px;
  line-height: 1.45;
  margin-top: 10px;
}
.wiz-cap {
  color: var(--sub);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 14px 0 8px;
}
.wiz-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}
.wiz-chip {
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: calc(var(--radius, 14px) + 6px);
  cursor: pointer;
}
.wiz-chip.on {
  background: var(--acc);
  color: var(--accInk);
  border-color: var(--acc);
}
.wiz-hero {
  position: relative;
  width: min(62vw, 240px);
  aspect-ratio: 1;
  margin: 26px auto;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
/* outer guide rings echo the hero circles of the reference design */
.wiz-hero::before,
.wiz-hero::after {
  content: "";
  position: absolute;
  inset: -13%;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
}
.wiz-hero::after {
  inset: -27%;
  opacity: 0.3;
}
.wiz-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.wiz-icon {
  width: 44%;
  color: var(--ink);
}
.wiz-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wiz-actions {
  margin-top: auto;
  width: 100%;
  display: grid;
  gap: 10px;
  padding-top: 18px;
}
.btn.wiz-btn {
  width: 100%;
  padding: 15px 18px;
  font-size: 15.5px;
  font-weight: 700;
  border-radius: calc(var(--radius, 14px) + 10px);
}
.wiz-back {
  color: var(--sub);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px;
}
.wiz-link {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}
.wiz-home-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  font-weight: 700;
}
.wiz-confetti {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0.9;
  animation: wiz-fall 2.8s linear forwards;
  pointer-events: none;
}
@keyframes wiz-fall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0.15; }
}
/* strict/flat themes keep their character: square chips + no rounded pills */
body[data-variant="j"] .wiz-chip,
body[data-variant="j"] .btn.wiz-btn,
body[data-variant="n"] .wiz-chip,
body[data-variant="n"] .btn.wiz-btn {
  border-radius: var(--radius, 0px);
}

/* hiOrbit — brand variant (senior palette ported to active app/) */
body[data-variant="hiorbit"][data-mode="dark"]  { --bg:#0a0b12; --card:#151827; --ink:#f2f4fb; --sub:#9aa0b8; --line:rgba(255,255,255,.08); --acc:#5fe0c8; --accInk:#04120e; --soft:rgba(95,224,200,.12); --chip:#1a1e30; --tabbg:#0f1120; --ok:#5fe0c8; --warn:#ffbf6b; --ringoff:#272c34; }
body[data-variant="hiorbit"][data-mode="light"] { --bg:#eef1f6; --card:#ffffff; --ink:#141827; --sub:#5a6178; --line:rgba(20,24,40,.09); --acc:#2bbfa3; --accInk:#ffffff; --soft:rgba(95,224,200,.14); --chip:#f4f6fb; --tabbg:#ffffff; --ok:#2bbfa3; --warn:#f0a94b; --ringoff:#d3d8df; }
body[data-variant="hiorbit"] { --radius:18px; }
body[data-variant="hiorbit"] .btn.primary { background:linear-gradient(180deg,#68e8cf,#41c9ad); color:#04120e; box-shadow:0 10px 26px -8px rgba(65,201,173,.4); }

/* ============================================================
   hiOrbit PREMIUM (emerald) — active on default variant `a`.
   Design tokens ported from hiorbit-miniapp-final.html.
   ============================================================ */
body[data-variant="a"][data-mode="dark"] {
  --bg:#0B0F0E; --card:#141A18; --surface2:#1B2320; --surface3:#222B27;
  --ink:#EAF2EE; --sub:#8A968F; --faint:#5E6862;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.045);
  --acc:#34E0A1; --acc2:#2BC98D; --accInk:#04120C; --soft:rgba(52,224,161,.12);
  --chip:#1B2320; --tabbg:#0B0F0E; --ok:#34E0A1; --warn:#E8C06A; --bad:#F27A72; --ringoff:#222B27;
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 8px 24px -14px rgba(0,0,0,.7);
  --sh-3:0 22px 48px -22px rgba(0,0,0,.75); --sh-accent:0 14px 34px -16px rgba(52,224,161,.5);
}
body[data-variant="a"][data-mode="light"] {
  --bg:#EEF2F0; --card:#FFFFFF; --surface2:#F5F8F6; --surface3:#EDF2EF;
  --ink:#0E1613; --sub:#5C6B64; --faint:#93A099;
  --line:rgba(12,26,20,.09); --line2:rgba(12,26,20,.055);
  --acc:#12B981; --acc2:#0E9E6E; --accInk:#FFFFFF; --soft:rgba(18,185,129,.10);
  --chip:#F5F8F6; --tabbg:#FFFFFF; --ok:#12B981; --warn:#C98A2B; --bad:#E0654F; --ringoff:#EDF2EF;
  --sh-1:0 1px 2px rgba(18,40,30,.06); --sh-2:0 10px 26px -18px rgba(18,40,30,.28);
  --sh-3:0 22px 46px -24px rgba(18,40,30,.24); --sh-accent:0 14px 30px -16px rgba(18,185,129,.4);
}
body[data-variant="a"] {
  --radius:16px; --r-lg:22px; --r-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(72% 48% at 50% -6%, var(--soft), transparent 60%), var(--bg);
}
body[data-variant="a"] .btn.primary, body[data-variant="a"] .btn.pay {
  background:var(--acc); color:var(--accInk); box-shadow:var(--sh-accent);
}
/* premium tab-bar icons (set from app.js) */
body[data-variant="a"] .t-ico { font-size:0; }
body[data-variant="a"] .t-ico svg { display:block; }

/* ---------- inline SVG icon helper ---------- */
.svg-ico { display:inline-flex; align-items:center; justify-content:center; }
.svg-ico svg { display:block; }

/* ---------- Home: hero ---------- */
.ho-hero {
  position:relative; text-align:center; padding:24px 20px 26px;
  border-radius:var(--r-lg,22px);
  background:radial-gradient(120% 90% at 50% -20%, var(--soft), transparent 62%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2); overflow:hidden;
}
.ho-emblem { width:168px; height:168px; margin:2px auto 6px; }
.ho-emblem svg { width:100%; height:100%; display:block; overflow:visible; }
.ring-rot { animation:ho-spin 60s linear infinite; transform-origin:50% 50%; }
.ring-rot.rev { animation-duration:90s; animation-direction:reverse; }
@keyframes ho-spin { to { transform:rotate(360deg); } }
.spark-orbit { transform-box:view-box; transform-origin:93px 93px; animation:ho-orbit 14s linear infinite; }
@keyframes ho-orbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.spark-star { fill:#EAFFF6; }
body[data-mode="light"] .spark-star { fill:#0AA575; }
.spark-glow { fill:var(--acc); opacity:.34; }
body[data-mode="light"] .spark-glow { opacity:.55; }

.ho-pill {
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 11px;
  border-radius:100px; background:var(--soft);
  border:1px solid color-mix(in srgb, var(--acc) 24%, transparent);
  font-size:12.5px; font-weight:600; color:var(--acc); letter-spacing:.01em; margin-bottom:13px;
}
.ho-pill .ho-pilldot { width:7px; height:7px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
.ho-pill.off { color:var(--sub); background:var(--surface2); border-color:var(--line); }
.ho-pill.off .ho-pilldot { background:var(--faint); box-shadow:none; }
.ho-pill.warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent); }
.ho-pill.warn .ho-pilldot { background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

.ho-until { font-size:15px; color:var(--ink); font-weight:560; }
.ho-until b { font-weight:670; }
.ho-subline { font-size:13px; color:var(--sub); margin-top:5px; }
.ho-subline .sep { opacity:.4; margin:0 7px; }
.ho-devrow { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.ho-devrow .ho-devchip { margin-top:0; }
.ho-promo { margin-top:2px; }
.ho-promo .inp { flex:1; min-width:0; }
.ho-expand { font-size:12.5px; color:var(--faint); cursor:pointer; white-space:nowrap; }
.ho-expand:active { opacity:.6; }
.ho-nosub { color:var(--sub); font-size:14px; margin-top:6px; }
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.ho-devchip {
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  padding:7px 13px; border-radius:100px; background:var(--surface2); border:1px solid var(--line);
  font-size:12.5px; color:var(--sub); font-weight:550; cursor:pointer;
  transition:border-color .2s, background .2s, transform .2s;
}
.ho-devchip:active { transform:scale(.97); }
.ho-devchip svg { display:block; }
.ho-devchip .ho-chev { color:var(--faint); margin-left:1px; }

.ho-btn-ico { display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* ---------- Home: section header + quick-access rows ---------- */
.section-h { display:flex; align-items:baseline; justify-content:space-between; margin:22px 2px 12px; }
.section-h .sh-t { font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--sub); }
.ho-rows {
  display:flex; flex-direction:column; gap:1px; background:var(--line2);
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
}
.ho-row { display:flex; align-items:center; gap:14px; padding:15px 16px; background:var(--card);
  cursor:pointer; transition:background .2s; }
.ho-row:active { background:var(--surface3); }
.ho-row-ic { width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--surface2); color:var(--acc); border:1px solid var(--line); }
.ho-row-tx { flex:1; min-width:0; }
.ho-row-tx .tt { display:block; font-size:14.5px; font-weight:570; letter-spacing:-.1px; }
.ho-row-tx .ds { display:block; font-size:12.5px; color:var(--sub); margin-top:2px; line-height:1.35; }
.ho-chev { color:var(--faint); flex:none; }

/* ---------- Home: hero status group (pill + antiglushilka badge) ---------- */
.ho-statusgroup { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px; }
.ho-statusgroup .ho-pill { margin-bottom:0; }
/* Quiet reassurance badge — slim, subtly emerald, readable in both themes. */
.ho-antibadge {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:4px 11px 4px 9px; border-radius:100px;
  background:color-mix(in srgb, var(--acc) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--acc) 20%, transparent);
  font-size:11.5px; font-weight:560; color:var(--acc); letter-spacing:.005em; line-height:1;
}
.ho-antibadge svg { display:block; flex:none; }
.ho-antibadge span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Home: referral premium card ---------- */
.ho-refcard { position:relative; overflow:hidden; cursor:pointer; padding:14px 16px 15px;
  border-radius:var(--r-lg,22px);
  background:linear-gradient(135deg,#34E0A1 0%,#26C79A 42%,#E3B667 100%);
  box-shadow:0 18px 42px -18px rgba(52,224,161,.55); transition:transform .24s; }
.ho-refcard:active { transform:scale(.997); }
.ho-refcard .rc-glow { position:absolute; right:-34px; top:-46px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 70%); pointer-events:none; }
.ho-refcard .rc-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ho-refcard .rc-badge { font-size:11px; font-weight:720; letter-spacing:.03em; color:#06231A;
  background:rgba(4,20,13,.16); padding:5px 11px; border-radius:100px; }
.ho-refcard .rc-ic { color:#06231A; opacity:.92; display:grid; place-items:center; }
.ho-refcard .rc-h { position:relative; margin-top:10px; font-size:18px; font-weight:720; letter-spacing:-.3px; color:#06231A; }
.ho-refcard .rc-sub { position:relative; margin-top:4px; font-size:11.5px; font-weight:560; color:#06231A; opacity:.85; }
.ho-refcard .rc-sub b { font-weight:720; opacity:1; }
.ho-refcard .rc-btn { position:relative; width:100%; margin-top:12px; border:none; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:680; letter-spacing:.01em; padding:14px 18px; border-radius:13px;
  background:#08251B; color:#EBFCF4; box-shadow:0 10px 24px -12px rgba(0,0,0,.5); transition:transform .24s; }
.ho-refcard .rc-btn:active { transform:scale(.99); }
.ho-refcard .rc-btn svg { color:#34E0A1; }

/* ---------- Home: save-to-home-screen card ---------- */
.ho-savecard { margin-top:12px; display:flex; align-items:flex-start; gap:13px; padding:15px 16px;
  border-radius:var(--radius); background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-1); }
.ho-savecard .sv-ic { width:40px; height:40px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--soft); color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 18%, transparent); }
.ho-savecard .sv-tx { flex:1; min-width:0; }
.ho-savecard .sv-tx b { display:block; font-size:14px; font-weight:600; letter-spacing:-.1px; line-height:1.35; }
.ho-savecard .sv-tx .sv-ds { display:block; font-size:12.5px; color:var(--sub); margin-top:5px; line-height:1.5; }
.ho-savecard .sv-tx .sv-ds b { color:var(--ink); font-weight:600; display:inline; font-size:inherit; margin:0; line-height:inherit; }

/* ---------- Home: pay chips + inline proxy get icons ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; }
.ho-ic-inline { color:var(--acc); display:inline-flex; }
.badge .svg-ico { display:flex; }
.badge-star svg { fill:currentColor; stroke:none; }

/* hiOrbit — signature day-ring (Home) */
.ringbox{display:flex;justify-content:center}
.ring-wrap{position:relative;width:132px;height:132px;margin:2px auto 2px}
.ring-svg{width:132px;height:132px;display:block;animation:ringIn .9s cubic-bezier(.22,1,.36,1) both}
@keyframes ringIn{from{opacity:0;transform:scale(.9) rotate(-6deg)}to{opacity:1;transform:none}}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.ring-num{font-size:42px;font-weight:800;line-height:1;letter-spacing:-1.5px;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 45%, var(--acc)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ring-lbl{font-size:11px;color:var(--sub);font-weight:600}
.ring-wrap.warn .ring-num{background:linear-gradient(180deg,var(--ink),var(--warn));-webkit-background-clip:text;background-clip:text}
.ring-wrap.bad .ring-num{background:linear-gradient(180deg,#ffd3d9,var(--bad,#ff7a8a));-webkit-background-clip:text;background-clip:text}

/* ============================================================
   Connect (premium) — approved simple design. Reuses Home rows
   (.ho-rows/.ho-row), section headers (.section-h/.sh-t) and the
   save-card (.ho-savecard). Tokens mirror hiorbit-miniapp-final.html.
   ============================================================ */
.conn-hero{
  text-align:center; padding:22px 18px 22px; border-radius:var(--r-lg,22px);
  background:radial-gradient(120% 90% at 50% 0%, var(--soft), transparent 60%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2);
}
.conn-emblem{width:78px; height:78px; margin:0 auto 14px}
.conn-emblem svg{width:100%; height:100%; display:block; overflow:visible}
.conn-hero h3{font-size:18px; font-weight:650; letter-spacing:-.3px; color:var(--ink)}
.conn-hero p{font-size:13px; color:var(--sub); margin:6px auto 0; line-height:1.45; max-width:280px}

.dbtns{display:flex; flex-direction:column; gap:10px; margin-top:20px; text-align:left}
.dbtn{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px 16px; border-radius:14px; cursor:pointer; border:1px solid var(--line);
  background:var(--surface2,var(--chip)); color:var(--ink); font-family:inherit;
  transition:transform .18s, border-color .18s, background .18s;
}
.dbtn:active{transform:scale(.99)}
.dbtn .lg{width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--line); color:var(--acc)}
.dbtn .tx{flex:1; min-width:0}
.dbtn .tt{display:block; font-size:15px; font-weight:640}
.dbtn .ds{display:block; font-size:12px; color:var(--sub); margin-top:2px}
.dbtn .go{color:var(--faint); flex:none}
.dbtn.primary{background:var(--acc); border-color:transparent; box-shadow:var(--sh-accent)}
.dbtn.primary .tt{color:var(--accInk)}
.dbtn.primary .ds{color:color-mix(in srgb, var(--accInk) 66%, transparent)}
.dbtn.primary .lg{background:color-mix(in srgb, var(--accInk) 14%, transparent);
  border-color:color-mix(in srgb, var(--accInk) 14%, transparent); color:var(--accInk)}
.dbtn.primary .go{color:color-mix(in srgb, var(--accInk) 70%, transparent)}

/* download pill inside list rows */
.dl-pill{flex:none; padding:8px 14px; border-radius:99px; font-size:12.5px; font-weight:600;
  background:var(--surface2,var(--chip)); border:1px solid var(--line); color:var(--ink); cursor:pointer}
.dl-pill:active{transform:scale(.96)}

/* note card */
.conn-note{display:flex; gap:9px; align-items:center; margin-top:10px; padding:10px 13px;
  border-radius:var(--radius); background:var(--surface2,var(--chip)); border:1px solid var(--line)}
.conn-note.sm{margin-top:8px; padding:8px 12px}
.conn-note .svg-ico{color:var(--faint); flex:none}
.conn-note p{font-size:12.5px; color:var(--sub); line-height:1.4}
.conn-note.sm p{font-size:12px}
.conn-note p b{color:var(--ink); font-weight:600}
.devbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:12px 15px; border-radius:var(--radius); background:var(--surface2,var(--chip)); border:1px solid var(--line); cursor:pointer; font-size:14px}
.devbar b{font-weight:700; color:var(--ink)}
.devbar .devcount{font-weight:800; color:var(--acc)}
.devbar .devcount.full{color:#ff6b6b}
.devbar:active{transform:scale(.99)}

/* «Как подключиться» — numbered steps with a connecting rail */
.steps{counter-reset:st; display:flex; flex-direction:column; gap:2px}
.step{display:flex; gap:14px; padding:5px 2px}
.step .n{counter-increment:st; width:27px; height:27px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:12.5px; font-weight:680; color:var(--acc);
  background:var(--soft); border:1px solid color-mix(in srgb, var(--acc) 20%, transparent); position:relative}
.step .n::before{content:counter(st)}
.step:not(:last-child) .n::after{content:""; position:absolute; top:29px; left:50%; transform:translateX(-50%);
  width:1.5px; height:calc(100% + 5px); background:var(--line)}
.step .st-tx{padding-top:2px; padding-bottom:14px}
.step .st-tx .tt{font-size:14px; font-weight:580; color:var(--ink)}
.step .st-tx .ds{font-size:12.5px; color:var(--sub); margin-top:3px; line-height:1.45}

/* manual key: ghostlink toggle + revealed key + copy button */
.keyline{margin-top:14px; text-align:center}
.ghostlink{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; font-weight:560;
  color:var(--sub); padding:8px 12px; border-radius:10px; transition:color .18s, background .18s}
.ghostlink:active{color:var(--ink); background:var(--surface2,var(--chip))}
.ghostlink .svg-ico{display:inline-flex}
.keyreveal{display:none; margin-top:12px; padding:13px 15px; border-radius:var(--radius);
  background:var(--card); border:1px dashed var(--line); font-size:12px; color:var(--sub);
  word-break:break-all; line-height:1.6; text-align:left; font-family:ui-monospace,"SF Mono",Menlo,monospace}
.keyreveal.open{display:block; animation:fade .24s ease both}
.keyreveal .kbtn{margin-top:10px; font-size:12px; color:var(--acc); cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font, system-ui)}

/* ============================================================
   Рефералы (referral) — progress-ring hero + cashback-level
   ladder + invite actions + steps. Ported from
   hiorbit-miniapp-final.html (#s-ref) to the fork's tokens.
   ============================================================ */
/* header */
.ref-head{padding:2px 2px 0}
.ref-eyebrow{font-size:11px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ref-h1{font-size:21px; font-weight:700; letter-spacing:-.5px; line-height:1.1; margin-top:3px; color:var(--ink)}
.ref-lead{font-size:12.5px; color:var(--sub); margin-top:4px; line-height:1.45}

/* progress-ring hero */
.ref-hero{position:relative; overflow:hidden; text-align:center; margin-top:8px;
  padding:24px 20px 22px; border-radius:var(--r-lg,22px);
  background:radial-gradient(120% 100% at 50% -12%, var(--soft), transparent 62%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2)}
.ref-hero::before{content:""; position:absolute; left:50%; top:-64px; transform:translateX(-50%);
  width:230px; height:190px; background:radial-gradient(circle, var(--soft), transparent 66%); pointer-events:none}
.progress-ring{position:relative; width:124px; height:124px; margin:0 auto; z-index:1}
.progress-ring svg{transform:rotate(-90deg); overflow:visible; width:124px; height:124px; display:block}
.progress-ring .pr-fg{transition:stroke-dashoffset 1.4s cubic-bezier(.22,.75,.28,1);
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--acc) 45%, transparent))}
.progress-ring .pr-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.progress-ring .pr-c .lvl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:720; color:var(--acc)}
.progress-ring .pr-c .cb{font-size:27px; font-weight:760; line-height:1; letter-spacing:-1px; margin-top:3px; color:var(--ink)}
.progress-ring .pr-c .pr-sub{font-size:11px; color:var(--sub); margin-top:5px; font-weight:560}
.ref-hero .ref-next{position:relative; z-index:1; font-size:12.5px; color:var(--sub); margin-top:8px}
.ref-hero .ref-next b{color:var(--acc); font-weight:720}

/* stats row */
.refstats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px}
.rstat{padding:11px 9px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line); text-align:center}
.rstat .rv{font-size:18px; font-weight:720; letter-spacing:-.5px; color:var(--ink)}
.rstat .rv.accent{color:var(--acc)}
.rstat .rl{font-size:11px; color:var(--sub); margin-top:5px; font-weight:560; line-height:1.25}

/* invite box */
.invitebox{display:flex; align-items:center; gap:11px; padding:11px 11px 11px 15px; border-radius:var(--radius);
  background:radial-gradient(120% 130% at 100% 0%, var(--soft), transparent 55%), var(--card); border:1px solid var(--line)}
.invitebox .lk{flex:1; min-width:0}
.invitebox .lk small{font-size:10.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.invitebox .lk b{font-size:12.5px; font-weight:600; display:block; margin-top:4px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,"SF Mono",Menlo,monospace; color:var(--ink)}
.invitebox .cp{width:auto; flex:none; padding:11px 15px; font-size:13px; gap:7px; min-height:0; border-radius:12px}
.ref-share{margin-top:10px; gap:9px}

/* cashback levels ladder */
.levels{display:flex; flex-direction:column; gap:10px}
.level{display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:var(--radius);
  position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line)}
.level.cur{border-color:color-mix(in srgb, var(--acc) 42%, transparent);
  background:linear-gradient(135deg, var(--soft), transparent 58%), var(--card)}
.level.locked{opacity:.6}
.level .chest{width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; background:var(--surface2,var(--chip))}
.level .chest svg{display:block}
.level .lt{flex:1; min-width:0}
.level .lt .lh{display:flex; align-items:center; gap:9px}
.level .lt b{font-size:14.5px; font-weight:640; color:var(--ink)}
.level .lt .pct{font-size:13px; font-weight:720}
.level .lt p{font-size:11.5px; color:var(--faint); margin-top:3px}
.level .lstate{font-size:10px; font-weight:720; letter-spacing:.04em; padding:4px 9px; border-radius:20px;
  text-transform:uppercase; flex:none; white-space:nowrap}
.lstate.now{color:var(--accInk); background:var(--acc)}
.lstate.done{color:var(--acc); background:var(--soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent)}
.lstate.lock{color:var(--faint); background:var(--surface2,var(--chip)); box-shadow:inset 0 0 0 1px var(--line)}

/* section header accent link (e.g. «Сейчас: Бронза») */
.section-h .sh-a{font-size:13px; font-weight:600; color:var(--acc)}

/* ============================================================
   Appbar (persistent header) + Настройки/Устройства sheets.
   Ported from hiorbit-miniapp-final.html; fork variables with
   fallbacks so non-`a` variants still render cleanly.
   ============================================================ */
.appbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(8px + env(safe-area-inset-top)) 16px 12px;
  /* Transparent so the page background (incl. variant-a radial tint) shows through
     seamlessly — no fill mismatch/strip. A subtle blur frosts content scrolled under. */
  background:transparent;
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
  backdrop-filter:blur(12px) saturate(1.06);
  transition:background .25s;
}
body[data-variant="a"] .appbar{ background:transparent; }
.appbar .brand{ display:flex; align-items:center; gap:11px; }
.appbar .brand .mark{ width:34px; height:34px; flex:none; }
.appbar .brand .mark svg{ width:100%; height:100%; display:block; overflow:visible; }
.appbar .brand .name{ font-size:18px; font-weight:650; letter-spacing:-.2px; color:var(--ink); }
/* «hi» reads crisp — pure white on dark, near-black --ink on light; «Orbit» stays emerald. */
body[data-mode="dark"] .appbar .brand .name{ color:#fff; }
.appbar .brand .name b{ color:var(--acc); font-weight:700; }
.appbar .tools{ display:flex; align-items:center; gap:8px; }
.iconbtn{
  width:38px; height:38px; border-radius:12px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:var(--card); border:1px solid var(--line); color:var(--sub);
  transition:color .2s, background .2s, border-color .2s, transform .2s;
}
.iconbtn svg{ display:block; }
.iconbtn:hover{ color:var(--ink); transform:translateY(-1px); }
.iconbtn:active{ transform:translateY(0); }
.iconbtn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }

/* ---------- Home: «Продлить» hero CTA ---------- */
.ho-hero-cta{ margin-top:20px; gap:6px; }
.ho-cta-price{ margin-left:0; opacity:.9; font-weight:700; }
.ho-devchip .dev-active{ color:var(--faint,var(--sub)); }

/* ---------- Home: support quick-link (askcard) ---------- */
.ho-askcard{
  display:flex; align-items:center; gap:13px; padding:14px 15px;
  border-radius:var(--radius,16px); background:var(--card); border:1px solid var(--line);
  box-shadow:var(--sh-1); cursor:pointer; transition:transform .2s, border-color .2s;
}
.ho-askcard:active{ transform:scale(.995); }
.ho-askcard .ic{
  position:relative; width:44px; height:44px; border-radius:13px; flex:none;
  display:grid; place-items:center; background:var(--soft); color:var(--acc);
  border:1px solid color-mix(in srgb, var(--acc) 18%, transparent);
}
.ho-askcard .ic svg{ display:block; }
.ho-askcard .livedot{
  position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%;
  background:var(--ok,var(--acc)); box-shadow:0 0 0 3px var(--card);
}
.ho-askcard .tx{ flex:1; min-width:0; }
.ho-askcard .tx .tt{ display:block; font-size:14px; font-weight:600; letter-spacing:-.1px; }
.ho-askcard .tx .ds{ display:block; font-size:12.5px; color:var(--sub); margin-top:2px; }

/* ---------- bottom sheets ---------- */
.sheet-scrim{
  position:fixed; inset:0; z-index:60; background:rgba(4,8,7,.58);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.sheet-scrim.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  max-width:520px; margin:0 auto;
  background:var(--card); color:var(--ink);
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--line);
  box-shadow:0 -18px 48px -20px rgba(0,0,0,.55);
  padding:8px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:86vh; overflow-y:auto;
  transform:translateY(102%); transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.sheet.open{ transform:none; }
.sheet::-webkit-scrollbar{ width:0; }
.sheet .grab{ width:38px; height:4px; border-radius:3px; background:var(--line2,var(--line)); margin:6px auto 14px; }
.sheet-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); }
.sheet h3{ font-size:18px; font-weight:750; letter-spacing:-.01em; margin:0 2px 2px; }
.set-sub{
  font-size:10.5px; color:var(--faint,var(--sub)); text-transform:uppercase; letter-spacing:.09em;
  font-weight:700; margin:18px 2px 4px;
}
.set-row{ display:flex; align-items:center; gap:13px; padding:13px 2px; }
.set-row + .set-row{ border-top:1px solid var(--line2,var(--line)); }
.set-row.tap{ cursor:pointer; }
.set-row .si{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--surface2,var(--chip)); color:var(--acc); border:1px solid var(--line);
}
.set-row .si svg{ width:18px; height:18px; display:block; }
.set-row .t{ flex:1; min-width:0; }
.set-row .t b{ display:block; font-size:14.5px; font-weight:650; color:var(--ink); }
.set-row .t p{ display:block; font-size:11.5px; color:var(--faint,var(--sub)); margin-top:2px; }
.set-row .set-chev{ color:var(--faint,var(--sub)); flex:0 0 auto; display:flex; }
.set-row .set-chev svg{ display:block; }

/* toggle switch */
.ho-switch{
  width:47px; height:28px; border-radius:20px; flex:none; position:relative; cursor:pointer;
  background:var(--surface3,var(--chip)); border:1px solid var(--line);
  transition:background .22s, border-color .22s;
}
.ho-switch.on{ background:var(--acc); border-color:transparent; }
.ho-switch i{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.ho-switch.on i{ transform:translateX(19px); }

/* device rows inside sheets */
.dev-list{ margin-top:2px; }
.set-devrow{ display:flex; align-items:center; gap:13px; padding:12px 2px; }
.set-devrow + .set-devrow{ border-top:1px solid var(--line2,var(--line)); }
.set-devrow .di{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--surface2,var(--chip)); color:var(--acc); border:1px solid var(--line);
}
.set-devrow .di svg{ width:19px; height:19px; display:block; }
.set-devrow .t{ flex:1; min-width:0; }
.set-devrow .t b{ display:block; font-size:14px; font-weight:650; color:var(--ink); }
.set-devrow .t p{ display:block; font-size:11px; color:var(--faint,var(--sub)); margin-top:2px; }
.dstat{ display:inline-block; width:6px; height:6px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.dstat.on{ background:var(--ok,var(--acc)); box-shadow:0 0 0 2px color-mix(in srgb, var(--acc) 20%, transparent); }
.dstat.off{ background:var(--faint,var(--sub)); }
.dev-unbind{
  flex:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
  padding:8px 13px; border-radius:100px;
  background:transparent; color:var(--sub); border:1px solid var(--line);
  transition:color .2s, border-color .2s, background .2s;
}
.dev-unbind:hover{ color:var(--bad,var(--warn)); border-color:color-mix(in srgb, var(--warn) 40%, transparent); }
.dev-unbind:active{ transform:scale(.96); }
.dev-empty{ font-size:13px; color:var(--sub); text-align:center; padding:18px 8px; }
.dev-add{
  display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px 14px;
  border-radius:var(--radius,16px); background:var(--surface2,var(--chip));
  border:1px dashed color-mix(in srgb, var(--acc) 40%, transparent); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.dev-add:active{ transform:scale(.995); }
.dev-add .ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--soft); color:var(--acc); }
.dev-add .ic svg{ display:block; }
.dev-add .t{ flex:1; min-width:0; }
.dev-add .t b{ display:block; font-size:14px; font-weight:650; color:var(--ink); }
.dev-add .t p{ display:block; font-size:11.5px; color:var(--faint,var(--sub)); margin-top:2px; }
.dev-add .set-chev{ color:var(--faint,var(--sub)); flex:none; display:flex; }
.dev-add .set-chev svg{ display:block; }

/* ============================================================
   Кабинет (account) — premium restyle. Reuses Home/Подписка
   tokens (--acc/--card/--surface2/--soft/--line/--r*/--sh*),
   .section-h/.sh-t, .ho-rows/.ho-row/.ho-pill. Support block
   ported from hiorbit-miniapp-final.html (#s-support).
   ============================================================ */

/* balance hero */
.acc-hero{position:relative; overflow:hidden; padding:20px; border-radius:var(--r-lg,22px);
  background:radial-gradient(120% 100% at 100% -12%, var(--soft), transparent 60%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2,0 8px 24px -14px rgba(0,0,0,.4))}
.acc-prof{display:flex; align-items:center; gap:13px}
.acc-ava{width:48px; height:48px; border-radius:15px; flex:none; display:grid; place-items:center;
  font-size:19px; font-weight:750; color:var(--acc); background:var(--soft);
  border:1px solid color-mix(in srgb, var(--acc) 20%, transparent)}
.acc-prof-tx{flex:1; min-width:0}
.acc-prof-tx b{display:block; font-size:16px; font-weight:660; letter-spacing:-.2px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acc-prof-tx .un{display:block; font-size:12.5px; color:var(--sub); margin-top:2px}
.acc-bal{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.acc-bal .bl{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--sub); font-weight:600}
.acc-bal .bv{display:block; margin-top:7px; font-size:30px; font-weight:770; letter-spacing:-1px; line-height:1;
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 42%, var(--acc)));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* generic account card (subscription / promo / history / email / mtproto) */
.acc-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius,16px);
  padding:16px; box-shadow:var(--sh-1,none)}
.acc-ch{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.acc-ch .ci{width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--surface2,var(--chip)); color:var(--acc); border:1px solid var(--line)}
.acc-ch .ci svg{display:block}
.acc-ch .ct{flex:1; min-width:0; font-size:15px; font-weight:640; letter-spacing:-.2px; color:var(--ink)}
.acc-rows{margin:-2px 0 2px}
.acc-cta{margin-top:14px}
.acc-promo{margin-top:0}

/* payment history rows */
.pay-list{margin:-2px 0}
.pay-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line2,var(--line))}
.pay-row:first-child{padding-top:2px}
.pay-row:last-child{border-bottom:0; padding-bottom:0}
.pay-row .pi{width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:var(--surface2,var(--chip)); color:var(--acc); border:1px solid var(--line)}
.pay-row .pi svg{display:block}
.pay-row .pt{flex:1; min-width:0}
.pay-row .pt b{display:block; font-size:13.5px; font-weight:580; color:var(--ink)}
.pay-row .pt span{display:block; font-size:11.5px; color:var(--sub); margin-top:2px}
.pay-row .pv{font-size:14px; font-weight:680; color:var(--ink); flex:none; white-space:nowrap}
.pay-row .pt .pay-bad{font-weight:700}
.pay-row .pt .pay-bad.bad{color:#e5484d}
.pay-row .pt .pay-bad.warn{color:#d99a00}
.pay-row .pv.off{color:var(--faint); text-decoration:line-through; opacity:.75}

/* online-assistant intro (support) */
.assistant{display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r-lg,22px);
  background:radial-gradient(130% 120% at 0% 0%, var(--soft), transparent 58%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2,0 8px 24px -14px rgba(0,0,0,.4))}
.assistant .ava{position:relative; width:52px; height:52px; border-radius:16px; flex:none; display:grid; place-items:center;
  background:var(--soft); color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 20%, transparent)}
.assistant .ava svg{display:block}
.assistant .livedot{position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border-radius:50%;
  background:var(--acc); border:3px solid var(--card); animation:acc-livepulse 2.4s ease infinite}
@keyframes acc-livepulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}
  70%{box-shadow:0 0 0 6px transparent}
  100%{box-shadow:0 0 0 0 transparent}}
.assistant .info{flex:1; min-width:0}
.assistant .nm{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:650; letter-spacing:-.2px; color:var(--ink)}
.assistant .nm .on{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--acc)}
.assistant .nm .on .d{width:6px; height:6px; border-radius:50%; background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.assistant .ln{font-size:12.5px; color:var(--sub); margin-top:5px; line-height:1.45}

/* support chat thread */
.sup-chat{margin-top:12px; padding:14px; border-radius:var(--radius,16px); background:var(--card); border:1px solid var(--line)}
.sup-thread{display:flex; flex-direction:column; gap:8px}
.sup-row{display:flex}
.sup-row.you{justify-content:flex-end}
.sup-bubble{max-width:85%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; white-space:pre-line}
.sup-row.you .sup-bubble{background:var(--acc); color:var(--accInk); border-bottom-right-radius:5px}
.sup-row.them .sup-bubble{background:var(--surface2,var(--chip)); color:var(--ink); border-bottom-left-radius:5px}
.sup-empty{font-size:13px; color:var(--sub); text-align:center; padding:8px 4px}
.sup-typing{font-size:12px; color:var(--sub); margin-top:9px; padding-left:2px}
.sup-inrow{display:flex; gap:10px; margin-top:12px}
.sup-send{flex:none; width:auto; gap:7px}

/* FAQ accordion */
.faq{display:flex; flex-direction:column; gap:1px; background:var(--line2,var(--line));
  border-radius:var(--radius,16px); overflow:hidden; border:1px solid var(--line)}
.qa{background:var(--card)}
.qa .q{display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer; transition:background .2s}
.qa .q:active{background:var(--surface2,var(--chip))}
.qa .qt{flex:1; font-size:13.5px; font-weight:560; line-height:1.4; color:var(--ink)}
.qa .pm{width:20px; height:20px; flex:none; color:var(--faint,var(--sub));
  display:grid; place-items:center; transition:transform .3s ease, color .2s}
.qa .pm svg{display:block}
.qa.open .pm{transform:rotate(45deg); color:var(--acc)}
.qa .a{max-height:0; overflow:hidden; transition:max-height .32s ease}
.qa.open .a{max-height:360px}
.qa .a .inner{padding:0 16px 16px; font-size:12.5px; color:var(--sub); line-height:1.6}
.qa .a .inner b{color:var(--ink); font-weight:600}

/* «Нужен живой оператор?» card (support escalate) — ported from #s-support .supcard */
.supcard{margin-top:16px; padding:18px 16px; border-radius:var(--r-lg,22px); text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, var(--soft), transparent 60%), var(--card);
  border:1px solid var(--line); box-shadow:var(--sh-2,0 8px 24px -14px rgba(0,0,0,.4))}
.supcard .sc-ic{width:52px; height:52px; margin:0 auto 12px; border-radius:15px; display:grid; place-items:center;
  background:var(--soft); color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 18%, transparent)}
.supcard .sc-ic svg{display:block}
.supcard h4{margin:0; font-size:16px; font-weight:640; letter-spacing:-.2px; color:var(--ink)}
.supcard p{font-size:12.5px; color:var(--sub); margin:6px auto 16px; max-width:260px; line-height:1.5}
.supcard .sc-btn{gap:8px}

/* compact inline copy button (ID пользователя) */
.id-copy{flex:none; cursor:pointer; font-family:inherit; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; background:var(--surface2,var(--chip)); color:var(--sub);
  border:1px solid var(--line); transition:color .2s, border-color .2s, transform .2s}
.id-copy:hover{color:var(--acc); border-color:color-mix(in srgb, var(--acc) 40%, transparent)}
.id-copy:active{transform:scale(.94)}
.id-copy svg{display:block}

/* install: platform selector (connect screen) */
.instwrap{display:flex;flex-direction:column;gap:11px}
.platsel{display:flex;gap:8px}
.platchip{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:700;padding:9px 6px;border-radius:11px;cursor:pointer;background:var(--surface2,var(--chip));border:1px solid var(--line);color:var(--sub);transition:background .15s,border-color .15s,color .15s}
.platchip.on{background:var(--soft);border-color:var(--acc);color:var(--acc)}
.platchip .pchip-ic{display:inline-flex}
.platchip svg{width:14px;height:14px;display:block}
.instrow{display:flex;gap:10px}
.instbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;border-radius:13px;background:var(--surface2,var(--chip));border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.instbtn .instbtn-ic{display:inline-flex;color:var(--acc)}
.instbtn svg{width:15px;height:15px;display:block}

/* ===== web-cabinet auth screen (browser login / register / reset) ===== */
.authwrap { max-width: 100%; width: 100%; margin: 10px 0 0; padding: 0 4px; --acc: #34E0A1; --accInk: #04120C; --soft: rgba(52,224,161,.14); }
body[data-mode="light"] .authwrap { --acc: #12B981; --accInk: #FFFFFF; --soft: #E3F6EE; }
.authcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 18px; }
.authcard .btn { margin-top: 12px; }
.authtabs { display: flex; gap: 6px; margin-bottom: 6px; }
.authtab { flex: 1; border: 0; background: var(--chip); color: var(--sub); font: 800 14px/1 var(--font, system-ui); padding: 11px; border-radius: calc(var(--radius, 14px) - 4px); cursor: pointer; }
.authtab.on { background: var(--soft); color: var(--acc); }
.authlbl { display: block; font-size: 12.5px; color: var(--sub); font-weight: 700; margin: 12px 0 5px; }
.authrow { display: flex; gap: 8px; margin-top: 12px; }
.authrow .btn { margin-top: 0; }
.authdiv { text-align: center; color: var(--sub); font-size: 12px; margin: 16px 0 6px; opacity: .65; }
.authlink { color: var(--acc); font-size: 13px; font-weight: 700; cursor: pointer; }
.authhint { color: var(--sub); font-size: 12.5px; margin: 8px 0; line-height: 1.5; }

/* connect: two key-copy buttons in a row */
.keybtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.keybtns .kbtn{flex:1;min-width:120px;justify-content:center}
/* connect wizard */
.connprog{margin:12px 2px 10px}
.connprog .cp-step{font:800 12px/1 var(--font,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.connprog .cp-ttl{font:800 17px/1.1 var(--font,system-ui);letter-spacing:-.01em;margin-top:6px}
.connprog .cp-bar{height:5px;border-radius:99px;background:var(--chip);overflow:hidden;margin-top:9px}
.connprog .cp-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc));border-radius:99px;transition:width .35s}
.stepcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius,14px);padding:13px;margin-top:2px}
.stepcard .steptitle{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.stepcard .stepnum{width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--acc);display:grid;place-items:center;font:800 15px/1 var(--font,system-ui);flex:none}
.stepcard .steptitle b{font:800 17px/1.2 var(--font,system-ui)}
.stepcard .stepdesc{color:var(--sub);font-size:13.5px;line-height:1.5;margin:4px 0 14px 42px}
.stepcard .orline2{text-align:center;color:var(--sub);font-size:12px;margin:12px 0 4px;opacity:.7}
.stepcard .keyhint2{display:flex;gap:8px;align-items:flex-start;color:var(--sub);font-size:12.5px;line-height:1.5;margin-top:12px}
.stepcard .keyhint2 .svg-ico{flex:none;color:var(--acc);margin-top:1px}
.stepcard .instrow{margin-top:2px}
.stepcard .btn{margin-top:10px}
.stepcard .instrow .btn{margin-top:0}
.stepcard .btn.big{min-height:56px;font-size:16px;box-shadow:0 12px 30px -12px var(--acc)}
.stepcard .instbtn-ic{display:inline-flex;color:var(--acc)}
.stepcard .instbtn-ic svg{width:16px;height:16px;display:block}
.connnav{display:flex;gap:10px;margin-top:16px}
.connnav .btn{margin:0}

/* #26 QR key-sharing */
.qrshare{margin-top:10px}
.qrbox{background:#fff;border-radius:20px;padding:16px;width:min(74vw,280px);height:min(74vw,280px);margin:16px auto 2px;box-shadow:0 10px 34px rgba(0,0,0,.22)}
.qrbox svg{display:block;width:100%;height:100%;border-radius:8px}
.qrfail{display:flex;align-items:center;justify-content:center;height:100%;color:#c0392b;font-weight:700;font-size:14px}