/* Mini App: главное меню карточками и отдельные экраны разделов.
   Принятая база #101936 / #4A2A6A / #1A2147 / #353D6D / #F4F6FF /
   #B7BED8 / #6B5AE8 задаётся только в palette.css; здесь используются её токены.
   Все правила под body.miniapp. */

body.miniapp {
  --mini-muted: var(--mist-muted);
  --mini-soft: var(--mist-soft);
  --mini-ok: var(--success);
  --mini-bad: var(--danger);
  --mini-bad-bg: var(--danger-bg);
  --mini-ok-bg: var(--success-bg);
  background: var(--mist-canvas) var(--mist-bg);
  background-attachment: fixed;
  color: var(--mist-text);
  overflow-x: hidden;
}

body.miniapp *,
body.miniapp *::before,
body.miniapp *::after { box-sizing: border-box; }

body.miniapp * { -webkit-tap-highlight-color: transparent; }

body.miniapp .site-header.miniapp-header {
  background: var(--mist-surface);
  border-bottom: 1px solid var(--mist-border);
}

body.miniapp .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.miniapp .miniapp-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--mist-text);
  font-weight: 700;
}

body.miniapp .miniapp-brand img {
  width: 190px;
  height: auto;
  object-fit: contain;
  flex: none;
}

body.miniapp .font-btn {
  background: var(--mist-surface);
  color: var(--mist-text);
  border: 1px solid var(--mist-border);
}

body.miniapp .font-btn[aria-pressed="true"] {
  background: var(--mist-accent);
  color: var(--mist-text);
  border-color: var(--mist-accent);
}

body.miniapp :focus { outline: none; }
body.miniapp:not(.mist-ptr) :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--mist-line);
  border-radius: 8px;
}
body.miniapp h2[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

body.miniapp #main {
  padding: 0.75rem 0.75rem 2rem;
  max-width: 40rem;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

body.miniapp h1,
body.miniapp h2,
body.miniapp h3,
body.miniapp h4 { color: var(--mist-text); overflow-wrap: anywhere; }

body.miniapp p,
body.miniapp li,
body.miniapp label,
body.miniapp button,
body.miniapp dd,
body.miniapp dt { overflow-wrap: anywhere; }

body.miniapp .screen { display: block; }
body.miniapp .screen[hidden] { display: none; }

body.miniapp .screen-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

body.miniapp .screen-head h2 {
  margin: 0;
  font-size: 1.25rem;
  min-width: 0;
}

body.miniapp .back-btn {
  flex: none;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid var(--mist-border);
  background: var(--mist-surface);
  color: var(--mist-accent);
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

body.miniapp .menu-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

body.miniapp .menu-card {
  width: 100%;
  min-height: 5.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--mist-surface);
  color: var(--mist-text);
  border: 1px solid var(--mist-border);
  border-radius: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.miniapp .menu-card:hover,
body.miniapp .menu-card:active { background-color: var(--mist-soft); border-color: var(--mist-accent); }
body.miniapp .menu-card .ico { font-size: 1.5rem; line-height: 1; }
body.miniapp .menu-card .ttl { font-weight: 700; }
body.miniapp .menu-card .sub { font-size: 0.85em; color: var(--mist-muted); }
body.miniapp .menu-test { grid-column: 1 / -1; }
body.miniapp .menu-test .menu-card {
  min-height: 3.75rem;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
body.miniapp .menu-test .sub { margin-left: auto; text-align: right; }

body.miniapp .card {
  background: var(--mist-surface);
  border: 1px solid var(--mist-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin: 0 0 0.75rem;
  min-width: 0;
}

body.miniapp .card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
body.miniapp .card h3.sub-actions-title { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--mist-border); font-size: 0.95rem; }
body.miniapp .card > p { margin: 0.35rem 0; }
body.miniapp .muted { color: var(--mist-muted); }

body.miniapp .btn,
body.miniapp .btn-primary,
body.miniapp .btn-secondary {
  min-height: 2.75rem;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
}

body.miniapp .btn-primary {
  background: var(--mist-accent);
  color: var(--mist-text);
  border: 1px solid var(--mist-accent);
}

body.miniapp .btn-secondary {
  background: var(--mist-surface);
  color: var(--mist-accent);
  border: 1px solid var(--mist-accent);
}

body.miniapp .btn[disabled] { opacity: 0.55; cursor: default; }

body.miniapp .actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

body.miniapp .actions.row { flex-direction: row; flex-wrap: wrap; }
body.miniapp .actions.row > .btn { flex: 1 1 8rem; }

body.miniapp input[type="text"],
body.miniapp input[type="search"],
body.miniapp select,
body.miniapp textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--mist-text);
  background: var(--mist-surface);
  border: 1px solid var(--mist-border);
  border-radius: 10px;
}

body.miniapp label { display: block; margin: 0.5rem 0 0.25rem; font-weight: 600; }
body.miniapp .radio-label { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
body.miniapp .radio-label input { margin-top: 0.3rem; flex: none; }
body.miniapp fieldset { border: 1px solid var(--mist-border); border-radius: 10px; margin: 0.6rem 0; min-width: 0; }

body.miniapp .msg { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--mist-soft); }
body.miniapp .msg[hidden] { display: none; }
body.miniapp .msg.bad { background: var(--danger-bg); color: var(--danger); }
body.miniapp .msg.ok { background: var(--success-bg); color: var(--success); }
body.miniapp .msg .hint { display: block; color: var(--mist-muted); margin-top: 0.15rem; }

body.miniapp .rows { margin: 0; padding: 0; list-style: none; }
body.miniapp .rows > li,
body.miniapp .row-line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--mist-soft);
}
body.miniapp .rows > li:last-child { border-bottom: 0; }
body.miniapp .row-line .k { color: var(--mist-muted); flex: none; }
body.miniapp .row-line .v { text-align: right; font-weight: 600; min-width: 0; }

body.miniapp .cat-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

body.miniapp .cat-btn {
  width: 100%;
  height: 100%;
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 1px solid var(--mist-border);
  border-radius: 12px;
  background: var(--mist-surface);
  color: var(--mist-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
body.miniapp .cat-btn[aria-pressed="true"] { background: var(--mist-accent); color: var(--mist-text); border-color: var(--mist-accent); }

body.miniapp .category-block[hidden] { display: none; }
body.miniapp .category-title { margin: 0 0 0.35rem; }
body.miniapp .category-desc { margin: 0 0 0.75rem; color: var(--mist-muted); }
body.miniapp .tariff-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
body.miniapp .tariff-card article {
  background: var(--mist-surface);
  border: 1px solid var(--mist-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
}
body.miniapp .tariff-card h4 { margin: 0 0 0.25rem; }
body.miniapp .tariff-desc { margin: 0 0 0.5rem; color: var(--mist-muted); }
body.miniapp .price-old { text-decoration: line-through; color: var(--mist-muted); margin-right: 0.5rem; }
body.miniapp .price-current { font-weight: 700; font-size: 1.15em; color: var(--mist-text); }
body.miniapp .tariff-card .btn { width: 100%; margin-top: 0.5rem; }

body.miniapp .acc-head {
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: var(--mist-surface);
  border: 1px solid var(--mist-border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  color: var(--mist-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
body.miniapp .acc-body { padding: 0.5rem 0.25rem; }
body.miniapp .acc-body[hidden] { display: none; }
body.miniapp .acc-mark { flex: none; color: var(--mist-accent); }

body.miniapp .hist-item { padding: 0.6rem 0.75rem; }
body.miniapp .hist-line1 { display: flex; justify-content: space-between; gap: 0.5rem; }
body.miniapp .hist-line1 strong:last-child { flex: none; }
body.miniapp .hist-line2 { color: var(--mist-text); margin: 0.15rem 0 0; }
body.miniapp .hist-line3 { color: var(--mist-muted); font-size: 0.85em; margin: 0.15rem 0 0; }
body.miniapp .link-btn { background: none; border: 0; padding: 0.25rem 0; color: var(--mist-accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 2rem; }

body.miniapp .pager { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
body.miniapp .pager .btn { flex: 0 0 auto; padding: 0.4rem 0.8rem; }
html[data-font-size="max"] body.miniapp .pager { gap: 0.25rem; }
html[data-font-size="max"] body.miniapp .pager .btn { padding: 0.4rem 0.5rem; }

body.miniapp .progress { height: 0.75rem; background: var(--mist-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--mist-border); margin: 0.5rem 0; }
body.miniapp .progress > span { display: block; height: 100%; background: var(--mist-accent); }

body.miniapp .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; }
body.miniapp .stat { background: var(--mist-surface); border: 1px solid var(--mist-border); border-radius: 12px; padding: 0.5rem; text-align: center; }
body.miniapp .stat strong { display: block; font-size: 1.1rem; }
body.miniapp .stat span { color: var(--mist-muted); font-size: 0.8em; }
html[data-font-size="max"] body.miniapp .stat { padding: 0.4rem 0.3rem; }
html[data-font-size="max"] body.miniapp .stat strong { font-size: 0.95rem; }
html[data-font-size="max"] body.miniapp .stat span { font-size: 0.7em; }
@media (max-width: 19.99rem) { body.miniapp .stats { grid-template-columns: minmax(0, 1fr); } }

body.miniapp .qr-box { text-align: center; margin: 0.5rem 0; }
body.miniapp .qr-box img { max-width: min(100%, 15rem); height: auto; background: #FFFFFF; padding: 0.5rem; border: 1px solid var(--mist-border); border-radius: 12px; }

body.miniapp .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
body.miniapp .chip { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--mist-accent); border-radius: 999px; background: var(--mist-surface); color: var(--mist-accent); font: inherit; font-weight: 600; cursor: pointer; }

body.miniapp .qty { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
body.miniapp .qty .btn { min-width: 2.75rem; padding: 0; }
body.miniapp .qty output { min-width: 2rem; text-align: center; font-weight: 700; }

body.miniapp .routes { list-style: none; margin: 0.25rem 0; padding: 0; }
body.miniapp .routes li { padding: 0.05rem 0; line-height: 1.3; }

body.miniapp .seg { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; }
body.miniapp .seg .btn { flex: 1 1 0; }
body.miniapp .seg .btn.seg-wide { flex-basis: 100%; }
body.miniapp .routes-toggle { margin-top: .4rem; }
body.miniapp .seg .btn[aria-pressed="true"] { background: var(--mist-accent); color: var(--mist-text); }

body.miniapp .success { text-align: center; }
body.miniapp .success .big { font-size: 2.5rem; line-height: 1; }

body.miniapp .mini-dialog {
  border: 1px solid var(--mist-border);
  border-radius: 16px;
  padding: 1rem;
  width: min(92vw, 26rem);
  max-width: 100%;
  background: var(--mist-surface);
  color: var(--mist-text);
}
body.miniapp .mini-dialog::backdrop { background: rgba(var(--mist-bg-rgb), .8); }
body.miniapp .mini-dialog h3 { margin: 0 0 0.5rem; }

body.miniapp img, body.miniapp table { max-width: 100%; }

body.miniapp .brand-pro { font-size: .8rem; color: var(--mist-muted); }
body.miniapp .menu-card .sub { white-space: pre-line; }
body.miniapp .card, body.miniapp .tariff-card article { padding: .65rem .75rem; }
body.miniapp .card p { margin: .35rem 0; }
body.miniapp .compact-facts { display: flex; flex-wrap: wrap; gap: .3rem; }
body.miniapp .balance-summary { margin: .5rem 0; font-size: 1.1em; }
body.miniapp .subscription-card .actions, body.miniapp .referral-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
}
body.miniapp .subscription-card .btn-primary, body.miniapp .referral-actions .btn-primary { grid-column: 1 / -1; }
body.miniapp .subscription-card .btn, body.miniapp .referral-actions .btn { font-size: .88em; padding: .35rem; }
body.miniapp .referral-more {
  width: 100%; margin-top: .4rem; font-size: .88em; padding: .35rem;
  display: flex; justify-content: center; align-items: center; text-align: center;
}
body.miniapp .sub-actions-title { display: none; }
body.miniapp .addon-row { display: flex; align-items: center; gap: .4rem; }
body.miniapp .addon-row .k { flex: 1; min-width: 0; }
body.miniapp .addon-row .v { flex: none; }
body.miniapp .addon-row .btn { width: auto; padding: .3rem .5rem; font-size: .85em; }
body.miniapp .qty { gap: .4rem; margin: .25rem 0; }
body.miniapp .qty output { min-width: 1rem; }
body.miniapp .qty .btn { min-width: 2.25rem; min-height: 2.75rem; }
body.miniapp .country-flag { display: inline-block; width: 1.35em; height: 1em; vertical-align: -.1em; margin-right: .2em; }
body.miniapp .test-card > .msg:not([hidden]) { display: inline-block; padding: .15rem .4rem; margin: .2rem 0; font-size: .85em; }
body.miniapp .test-card .routes { margin-bottom: .4rem; }
body.miniapp #s-referral .qr-box img { max-width: min(60%, 11rem); }
body.miniapp .chip { padding: 0 .6rem; color: var(--mist-text); }
body.miniapp .link-btn { color: var(--color-link); }
body.miniapp .hist-line2 { font-size: .85em; color: var(--mist-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.miniapp .btn:disabled, body.miniapp button:disabled { background: var(--mist-soft); color: var(--mist-muted); opacity: 1; }
body.miniapp .row-line[hidden] { display: none; }
body.miniapp .btn[hidden], body.miniapp .compact-facts[hidden] { display: none; }
body.miniapp .radio-label:has(input:disabled) { opacity: .55; }
body.miniapp .card.compact { padding: .6rem .75rem; }
body.miniapp .card.compact label { margin-top: 0; }
body.miniapp .card.compact .actions { margin-top: .4rem; }
body.miniapp .test-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
body.miniapp .test-head h3 { margin: 0; }
body.miniapp .badge { flex: none; padding: .15rem .5rem; border-radius: 999px; background: var(--mist-soft); color: var(--mist-muted); font-size: .85em; font-weight: 600; }
body.miniapp .badge.ok { background: var(--success-bg); color: var(--success); }
body.miniapp .with-ico { display: flex; align-items: center; gap: .4rem; }
body.miniapp .btn.with-ico { justify-content: center; }
body.miniapp .promo-ico { flex: none; width: 1.25rem; height: 1.25rem; }
body.miniapp .promo-line { font-weight: 600; }
body.miniapp .dates .row-line { padding: .2rem 0; }
body.miniapp .sub-select, body.miniapp .addon-tabs { flex-wrap: wrap; }
body.miniapp .sub-select .btn { flex: 1 1 auto; }
body.miniapp .device-row { flex-wrap: wrap; align-items: center; }
body.miniapp .device-info { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
body.miniapp .device-name { font-weight: 600; }
body.miniapp .device-row .btn { flex: none; white-space: nowrap; }
body.miniapp .devices-all { grid-column: 1 / -1; margin-top: .5rem; }
body.miniapp .devices-all .btn { width: 100%; }

body.miniapp .btn-secondary, body.miniapp .back-btn { color: var(--color-link); }

body.miniapp { height: auto; background-color: var(--mist-bg); }
body.miniapp .autopay-toggle { margin: .25rem 0; width: auto; }

/* MIST PRO owner visual: local waves, glass icons and calm inner surfaces. */
body.miniapp {
  --mini-edge: #7667BC;
  --mini-radius: 14px;
  isolation: isolate;
  position: relative;
  background-image:
    radial-gradient(ellipse at 0 10%, rgba(0, 157, 255, .12), transparent 44%),
    var(--mist-canvas);
  scrollbar-color: var(--mist-border-lit) var(--mist-bg);
}
body.miniapp::before,
body.miniapp::after {
  content: '';
  position: fixed;
  z-index: -1;
  pointer-events: none;
  width: 160%;
  height: 54vh;
  left: -30%;
  top: 15vh;
  border-radius: 50%;
  border: 1px solid rgba(20, 182, 255, .35);
  border-right-color: rgba(162, 61, 255, .5);
  border-bottom-color: transparent;
  box-shadow: 0 -3px 18px rgba(11, 151, 255, .1), 12px -3px 28px rgba(141, 55, 255, .12);
  transform: rotate(-28deg);
}
body.miniapp::after { top: 66vh; opacity: .28; transform: rotate(24deg); }
body.miniapp:has(#s-menu[hidden])::before { opacity: .35; }
body.miniapp:has(#s-menu[hidden])::after { opacity: .12; }
body.miniapp ::selection { background: var(--mist-accent); color: var(--mist-text); }
body.miniapp .site-header.miniapp-header {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.miniapp .header-inner {
  max-width: 40rem;
  margin: auto;
  padding: .7rem .75rem .55rem;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
body.miniapp .miniapp-brand { padding: 0; gap: .45rem; }
body.miniapp .miniapp-brand img { width: min(16.25rem, 69.5vw); height: auto; }
body.miniapp .brand-pro { font-size: min(1.7rem, 7.2vw); color: #9861FF; letter-spacing: .015em; }
body.miniapp .font-switch {
  width: min(100%, 13.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  gap: .4rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.miniapp .font-btn {
  min-width: 0;
  min-height: 2.75rem;
  padding: .3rem .4rem;
  border-radius: 10px;
  background: var(--mist-depth) var(--mist-shade);
  border-color: var(--mini-edge);
  font-weight: 700;
}
body.miniapp .font-btn[aria-pressed="true"] {
  background: var(--mist-cta) var(--mist-accent);
  border-color: var(--mini-edge);
  box-shadow: none;
}
body.miniapp .font-btn:focus:not(:focus-visible), body.miniapp .cat-btn:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
body.miniapp #main { padding-top: .35rem; }
body.miniapp .menu-grid { gap: .55rem; }
body.miniapp .menu-card {
  position: relative;
  min-height: 7.25rem;
  padding: .65rem .7rem;
  gap: .25rem;
  background: var(--mist-depth) var(--mist-surface);
  border-color: var(--mini-edge);
  border-radius: var(--mini-radius);
  box-shadow: 0 6px 18px rgba(var(--mist-bg-rgb), .35), inset 0 1px 0 var(--mist-highlight);
  line-height: 1.3;
  transition: transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
body.miniapp .menu-card::after {
  content: '';
  position: absolute;
  top: calc(50% - .225rem);
  right: .85rem;
  width: .45rem;
  height: .45rem;
  border-top: 2px solid #B7B2FF;
  border-right: 2px solid #B7B2FF;
  transform: rotate(45deg);
  pointer-events: none;
}
body.miniapp .menu-card .ico {
  display: block;
  font-size: inherit;
  min-height: 2.5rem;
  padding: 0;
  line-height: 0;
  transition: filter .18s ease-out;
}
body.miniapp .menu-card .ico img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
body.miniapp .menu-card .ttl { font-size: 1rem; letter-spacing: -.015em; }
html[data-font-size="max"] body.miniapp .menu-card .ttl { font-size: .9rem; }
body.miniapp .menu-card .sub { font-size: .85rem; color: var(--mist-muted); }
html[data-font-size="max"] body.miniapp .menu-card .sub { font-size: .78rem; }
html[data-font-size="max"] body.miniapp .card, html[data-font-size="max"] body.miniapp .tariff-card article { padding: .6rem .7rem; }
html[data-font-size="max"] :where(body.miniapp .btn) { padding: .5rem .8rem; }
html[data-font-size="max"] body.miniapp .cat-btn { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; min-height: calc(2 * 1.25em + 1rem); overflow: hidden; }
body.miniapp .menu-test .menu-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .2rem .65rem;
  min-height: 5rem;
  padding: .7rem 2rem .7rem .85rem;
  background: linear-gradient(125deg, rgba(var(--mist-accent-rgb), .26), transparent 65%), var(--mist-depth), var(--mist-surface);
  border-color: #9C72FA;
  box-shadow: 0 0 16px rgba(var(--mist-accent-rgb), .22), inset 0 0 10px rgba(var(--mist-accent-rgb), .1), 0 6px 18px var(--mist-shade);
}
body.miniapp .menu-test .ico { grid-row: span 2; align-self: center; }
body.miniapp .menu-test .ico img { width: 3rem; height: 3rem; }
body.miniapp .menu-test .ttl { font-size: 1.25rem; align-self: end; }
html[data-font-size="max"] body.miniapp .menu-test .ttl { font-size: 1.25rem; }
body.miniapp .menu-test .sub { margin: 0; text-align: left; align-self: start; }
body.miniapp .menu-test .menu-card::after { top: calc(50% - .225rem); }
body.miniapp .menu-card .ttl { padding-right: 1.35rem; }
body.miniapp .menu-card::after { top: calc(3.9rem - 1px); }
html[data-font-size="max"] body.miniapp .menu-card::after { top: calc(3.835rem - 1px); }
html[data-font-size="max"] body.miniapp .menu-test .menu-card::after { top: calc(50% - .225rem); }
body.miniapp .menu-footer { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.4rem .25rem .2rem; color: var(--mist-muted); text-align: center; }
body.miniapp .menu-footer-brand { font-size: .75rem; letter-spacing: .45em; padding-left: .45em; }
body.miniapp .menu-footer-line { width: 65%; height: 1px; background: linear-gradient(90deg, transparent, var(--mini-edge) 15%, var(--mini-edge) 85%, transparent); }
body.miniapp .menu-footer-motto { font-size: .58rem; letter-spacing: .18em; line-height: 1.6; }

/* All existing inner screens share a quieter version of the menu surface. */
body.miniapp .screen-head { gap: .65rem; padding: .25rem 0 .6rem; border-bottom: 1px solid var(--mist-border); margin-bottom: .85rem; }
body.miniapp .screen-head h2 { font-size: 1.2rem; letter-spacing: -.02em; }
body.miniapp .screen-head h2::before {
  content: '';
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: .4rem;
  vertical-align: -.35rem;
  background: var(--screen-icon) center / contain no-repeat;
}
body.miniapp #s-test { --screen-icon: url('../img/miniapp/test.svg'); }
body.miniapp #s-tariffs, body.miniapp #s-buy { --screen-icon: url('../img/miniapp/tariffs.svg'); }
body.miniapp #s-cabinet { --screen-icon: url('../img/miniapp/account.svg'); }
body.miniapp #s-balance, body.miniapp #s-history { --screen-icon: url('../img/miniapp/balance.svg'); }
body.miniapp #s-addons { --screen-icon: url('../img/miniapp/addons.svg'); }
body.miniapp #s-promo { --screen-icon: url('../img/miniapp/promo.svg'); }
body.miniapp #s-referral { --screen-icon: url('../img/miniapp/referral.svg'); }
body.miniapp #s-donate { --screen-icon: url('../img/miniapp/support.svg'); }
body.miniapp #s-success .screen-head h2::before { display: none; }
body.miniapp #s-video { --screen-icon: url('../img/miniapp/connect.svg'); }
body.miniapp .card, body.miniapp .tariff-card article, body.miniapp .mini-dialog, body.miniapp .stat {
  background: var(--mist-depth) var(--mist-surface);
  border-color: var(--mist-border);
  border-radius: var(--mini-radius);
  box-shadow: 0 6px 18px rgba(var(--mist-bg-rgb), .3), inset 0 1px 0 var(--mist-highlight);
}
body.miniapp .card, body.miniapp .tariff-card article { padding: .75rem .85rem; }
body.miniapp .card h3, body.miniapp .tariff-card h4 { letter-spacing: -.015em; }
body.miniapp .btn-primary {
  background: var(--mist-cta) var(--mist-accent);
  border-color: var(--mini-edge);
  box-shadow: inset 0 1px 0 var(--mist-highlight), 0 4px 12px var(--mist-shade);
}
body.miniapp .cat-btn[aria-pressed="true"], body.miniapp .seg .btn[aria-pressed="true"] {
  background: var(--mist-cta) var(--mist-accent);
  border-color: var(--mini-edge);
  box-shadow: none;
}
body.miniapp .btn-secondary, body.miniapp .back-btn, body.miniapp .chip, body.miniapp .acc-head, body.miniapp .cat-btn {
  background-image: var(--mist-depth);
  border-color: var(--mist-border);
}
body.miniapp .btn, body.miniapp .back-btn, body.miniapp .chip, body.miniapp .cat-btn, body.miniapp .acc-head {
  transition: transform .18s ease-out, background-color .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}
body.miniapp .cat-btn, body.miniapp .seg .btn { min-width: 0; }
body.miniapp input, body.miniapp textarea { caret-color: var(--color-focus); }
body.miniapp input[type="text"], body.miniapp input[type="search"], body.miniapp select, body.miniapp textarea {
  background-color: var(--mist-shade);
  box-shadow: var(--mist-inset);
}
body.miniapp .row-line, body.miniapp .rows > li { border-bottom-color: var(--mist-border); }
body.miniapp .stat strong, body.miniapp .price-current, body.miniapp .balance-summary, body.miniapp .qty output { font-variant-numeric: tabular-nums; }
body.miniapp .progress > span { background: linear-gradient(90deg, #167ECB, var(--mist-accent)); }
body.miniapp .mini-dialog::backdrop { background: rgba(var(--mist-bg-rgb), .85); }
body.miniapp .mini-dialog { border-color: var(--mini-edge); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); }
body.miniapp button:disabled { background: var(--mist-soft); border-color: var(--mist-border); box-shadow: none; }
body.miniapp .menu-card:active, body.miniapp .btn:not(:disabled):active, body.miniapp .back-btn:active { transform: translateY(1px); box-shadow: var(--mist-inset); }
@media (hover: hover) {
  body.miniapp .menu-card:hover { transform: translateY(-1px); border-color: #9C8DE8; background-color: var(--mist-surface); box-shadow: 0 8px 22px var(--mist-shade), 0 0 12px rgba(var(--mist-accent-rgb), .16); }
  body.miniapp .menu-card:hover .ico { filter: drop-shadow(0 0 4px rgba(61, 163, 255, .3)); }
  body.miniapp .btn-primary:not(:disabled):hover { background-color: var(--color-primary-bg-hover); }
  body.miniapp .btn-secondary:not(:disabled):hover, body.miniapp .back-btn:hover, body.miniapp .chip:hover, body.miniapp .acc-head:hover { border-color: var(--mini-edge); }
}
body.miniapp #s-video .card { margin: 0 0 .5rem; padding: .6rem .75rem; }
body.miniapp #s-video .card h3 { margin: 0 0 .2rem; }
body.miniapp #s-video .card > p { margin: .2rem 0; }
body.miniapp #s-video .actions { margin-top: .35rem; gap: .35rem; }
body.miniapp #s-balance .balance-summary { margin: .3rem 0 .65rem; }
body.miniapp #s-balance label { margin: .35rem 0 .2rem; }
body.miniapp #s-balance .actions { margin-top: .5rem; gap: .4rem; }
@media (max-width: 19.99rem) {
  body.miniapp .menu-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 22rem) {
  body.miniapp .menu-card { padding: .7rem; }
  body.miniapp .menu-card::after { right: .75rem; }
  body.miniapp .screen-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  body.miniapp *, body.miniapp *::before, body.miniapp *::after { transition: none !important; animation: none !important; }
  body.miniapp .menu-card:hover, body.miniapp .menu-card:active, body.miniapp .btn:active, body.miniapp .back-btn:active { transform: none; }
}

/* VISUAL-01: на A++ у телефона слова вроде Подключение и Устройства не влезали по ширине
   и рвались посередине. Меню остается в две колонки: стрелка ближе к краю, место под ней
   меньше, заголовок чуть мельче. Значок категории и вкладки пакетов переносятся строкой
   целиком. Граница 40rem: при 26rem на 417-540 px слова снова рвались, с 600 px штатная верстка A++ влезает сама. */
@media (max-width: 40rem) {
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .ttl { font-size: .85rem; padding-right: .5rem; }
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card::after { right: .55rem; }
  html[data-font-size="max"] body.miniapp .cat-btn { flex-wrap: wrap; }
  html[data-font-size="max"] body.miniapp .addon-tabs .btn { flex: 1 1 auto; }
}

/* VISUAL-01 узкие A++ 2a9 */
/* VISUAL-01: глобальный overflow-wrap: anywhere рвал длинные подписи внутри слова на A++ при
   360 и 375 px (Подключение в меню, подключиться в кабинете, Безлимитные в тарифах). Чуть
   ужимаем кегль и отступы в окне 360-380, чтобы самое длинное слово влезало в строку целиком и
   переноситься ему было незачем. Ниже 360 перенос-страховка остается, две колонки меню и
   читаемость A++ сохраняются. */
@media (min-width: 360px) and (max-width: 380px) {
  /* Селектор не слабее правила max-width 40rem выше (.menu-grid > li:not(.menu-test) .ttl): с коротким
     он проигрывал по специфичности, и кегль .8rem не применялся. */
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card .ttl {
    font-size: .8rem;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  html[data-font-size="max"] body.miniapp .cat-btn {
    font-size: .88em;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  html[data-font-size="max"] body.miniapp #s-cabinet .btn {
    font-size: .82em;
    padding-left: .45rem;
    padding-right: .45rem;
    overflow-wrap: normal;
    word-break: keep-all;
  }
}

/* VISUAL-01, п.10 аудита 62c520be. С настоящим DejaVu Sans, он шире Liberation, длинное слово заголовка
   (Подключение) на 360 и 375 залезало под стрелку, на 390 рвалось, а Безлимитные и подключиться вылезали
   за края кнопок. Стрелке отведена своя полоса справа от заголовка, боковые поля карточки уже, кегль
   заголовка меню, вкладок тарифов и кнопок кабинета идет от ширины окна: самое длинное слово влезает
   целиком на всех трех шрифтах. Меню остается в две колонки, ниже 360 перенос-страховка прежняя. */
@media (max-width: 40rem) {
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card { padding-left: .45rem; padding-right: .45rem; }
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card::after { right: .3rem; }
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card .ttl {
    padding-right: .6rem;
    font-size: clamp(.7rem, calc(6vw - 5.5px), .85rem);
  }
  html[data-font-size="max"] body.miniapp .cat-btn { font-size: min(1em, calc(6vw - 5.5px)); }
  html[data-font-size="max"] body.miniapp #s-cabinet .btn {
    font-size: min(.82em, calc(5vw - 3.5px));
    padding-left: .35rem;
    padding-right: .35rem;
  }
}
@media (min-width: 360px) and (max-width: 40rem) {
  html[data-font-size="max"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card .ttl,
  html[data-font-size="max"] body.miniapp .cat-btn,
  html[data-font-size="max"] body.miniapp #s-cabinet .btn {
    overflow-wrap: normal;
    word-break: keep-all;
  }
  /* мельче кегль, и строка ломалась после дефиса: Показать QR- / код */
  html[data-font-size="max"] body.miniapp .cat-btn,
  html[data-font-size="max"] body.miniapp #s-cabinet .btn { text-wrap: balance; }
}

/* VISUAL-01, остаток 5 по efef250a. Правила выше стоят только под A++, а на A и A+ те же длинные слова
   (Подключение, подключиться, Трафик, Устройства) на DejaVu Sans и Liberation Sans рвались посередине.
   На A+ у стрелки меню своя полоса и поля как у A++, кегль заголовка и кнопок кабинета идет от ширины окна,
   но не крупнее штатного. Вкладки пакетов на A и A+ переносятся целиком, как на A++. Две колонки и A++ прежние. */
@media (max-width: 40rem) {
  html[data-font-size="large"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card { padding-left: .45rem; padding-right: .45rem; }
  html[data-font-size="large"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card::after { right: .3rem; }
  html[data-font-size="large"] body.miniapp .menu-grid > li:not(.menu-test) .menu-card .ttl {
    padding-right: .6rem;
    font-size: clamp(.7rem, calc(6vw - 5.5px), 1rem);
  }
  html[data-font-size="large"] body.miniapp #s-cabinet .btn {
    font-size: min(1em, calc(5vw - 3.5px));
    padding-left: .35rem;
    padding-right: .35rem;
  }
  html:not([data-font-size="max"]) body.miniapp .addon-tabs .btn { flex: 1 1 auto; }
}
@media (min-width: 360px) and (max-width: 40rem) {
  html:not([data-font-size="max"]) body.miniapp .menu-grid > li:not(.menu-test) .menu-card .ttl,
  html:not([data-font-size="max"]) body.miniapp #s-cabinet .btn,
  html:not([data-font-size="max"]) body.miniapp #s-addons .btn {
    overflow-wrap: normal;
    word-break: keep-all;
  }
  html:not([data-font-size="max"]) body.miniapp #s-cabinet .btn { text-wrap: balance; }
}