/* настройки и оплата: на ПК раздел рядом с меню, на телефоне лист почти на весь экран */
.only-narrow { display: block; }
.only-narrow-flex { display: flex; }
.only-wide, .only-wide-flex { display: none !important; }
.settings-modal [hidden], .checkout-page [hidden] { display: none !important; }

/* у настроек свой фон и в PWA, и в Telegram: общий чёрный туда не проходит */
html:not([data-theme="light"]) :is(.billing-screen,.modal-layer.settings-open .modal,.plans-modal,.checkout-page) { --bg: #141414; }

/* общий фон: как у разделов, карточки на панели */
.modal-layer.settings-open .modal, html[data-theme="light"] .modal-layer.settings-open .modal { background: var(--bg); }
.settings-modal .modal-top, html[data-theme="light"] .settings-modal .modal-top { background-color: transparent; }

/* шапка как у Голосов: содержимое уходит под неё, затухание растёт вместе с прокруткой */
.plans-modal { --pl-head: 52px; timeline-scope: --plans-scroll; }
.checkout-page { --bill-head: 52px; timeline-scope: --bill-scroll; }
.settings-modal .modal-top::before, .pl-top::before, .bill-head::before { content: ''; position: absolute; left: 0; right: 0; top: -64px; bottom: -30px; height: auto; z-index: -1; pointer-events: none; background: linear-gradient(var(--bg) calc(100% - 32px), color-mix(in srgb,var(--bg) 70%,transparent) calc(100% - 18px), color-mix(in srgb,var(--bg) 0%,transparent)); }
@supports (animation-timeline: scroll()) {
  /* у короткой страницы прокрутки нет, таймлайн неактивен: без этого затухание стоит включённым */
  .settings-modal .modal-top::before, .pl-top::before, .bill-head::before { opacity: var(--head-fade-hold,0); animation: section-header-fade linear both; animation-range: 0 80px; }
  .settings-modal .modal-top::before { animation-timeline: scroll(nearest block); }
  .pl-top::before { animation-timeline: --plans-scroll; }
  .bill-head::before { animation-timeline: --bill-scroll; }
}

/* нижняя панель как в Еде: затухание над кнопкой, до самого края листа, без прозрачной полосы под ней */
.settings-modal { --sheet-x: 18px; }
.modal-layer.settings-open .modal:not(.settings-navigating) { padding-bottom: 0; }
.settings-navigating > .settings-nav-old, .settings-navigating > .settings-nav-new { padding-bottom: 0; }
.set-root { padding-bottom: max(24px,var(--app-safe-bottom,0px)); }
.settings-page-content:has(.set-bar,.set-memory-hold,.set-logout-wrap) { padding-bottom: 0; }
.set-bar, .set-memory-hold, .set-logout-wrap { position: sticky; bottom: 0; z-index: 3; margin-inline: calc(0px - var(--sheet-x)); padding: 24px var(--sheet-x) max(14px,calc(var(--app-safe-bottom,0px) + 4px)); background: linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent), var(--bg) 24px); pointer-events: none; }
:is(.set-bar,.set-memory-hold,.set-logout-wrap) > * { pointer-events: auto; }
@media (max-width: 760px) { .settings-modal { --sheet-x: 16px; } }
/* iphone в pwa: отступ над скруглением и полоской только у кнопки, затухание идёт до самого края */
html.ios-iphone-standalone body.web-app .modal-layer.settings-open .modal:not(.settings-navigating) { padding-bottom: 0; }
html.ios-iphone-standalone body.web-app .settings-navigating > :is(.settings-nav-old,.settings-nav-new) { padding-bottom: 0; }
html.ios-iphone-standalone body.web-app :is(.set-bar,.set-memory-hold,.set-logout-wrap) { padding-bottom: 30px; }
html.ios-iphone-standalone body.web-app .set-root { padding-bottom: 30px; }
/* память на телефоне: кнопка внизу листа, даже если записей мало */
@media (max-width: 799px) {
  :is(.modal-layer.settings-open .modal:not(.settings-navigating),.settings-navigating > .settings-nav-old,.settings-navigating > .settings-nav-new):has(> .settings-page-content .set-memory) { display: flex; flex-direction: column; }
  .settings-page-content:has(.set-memory) { flex: 1 0 auto; display: flex; flex-direction: column; }
  .settings-page-content .set-memory { flex: 1; grid-template-rows: auto 1fr auto; }
}

/* скелетоны страниц настроек */
.set-skel i { display: block; border-radius: 14px; background: linear-gradient(100deg,var(--panel) 25%,var(--hover) 43%,var(--panel) 62%) 0 0 / 220% 100%; animation: projectSkeletonSweep 1.25s ease-in-out infinite; }
.set-skel-stack { display: grid; gap: 10px; align-content: start; min-width: 0; }
.set-skel .sk-center { justify-items: center; }
.set-skel .sk-row { width: 100%; height: 56px; }
.set-skel .sk-tall { width: 100%; height: 68px; }
.set-skel .sk-line { width: 42%; height: 14px; border-radius: 7px; }
.set-skel .sk-long { width: 80%; }
.set-skel .sk-wide { width: 100%; }
.set-skel .sk-title { width: 130px; height: 34px; }
.set-skel .sk-avatar { width: 96px; height: 96px; border-radius: 50%; }
.set-skel .sk-preview { width: 100%; height: 124px; }
.set-skel .sk-price { width: 170px; height: 56px; margin-top: 10px; }
.set-skel .sk-ruler { width: 100%; height: 52px; }
.set-skel .sk-cta { width: min(340px,100%); height: 50px; border-radius: 25px; }
.set-skel .sk-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 14px 20px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .set-skel i { animation: none; } }
.setting-group, html[data-theme="light"] .setting-group, .settings-profile, html[data-theme="light"] .settings-profile { border: 0; background: var(--panel); }
.settings-profile { width: 100%; }
.settings-section { margin-bottom: 20px; }
.settings-option { background: var(--panel); border-color: transparent; }
.settings-option[aria-pressed="true"] { background: color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.settings-usage-note { padding-inline: 15px; }

/* высота листа на телефоне: 12px от верха */
@media (max-width: 799px) {
  .modal-layer.settings-open .modal { width: 100%; height: calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap,0px) - 12px); max-height: calc(var(--browser-viewport-height,100dvh) - var(--app-safe-top) - var(--tg-ui-gap,0px) - 12px); }
  :root[data-telegram-miniapp="true"] .modal-layer.settings-open .modal { height: max(1px,calc(var(--settings-rest-height,100dvh) - var(--tg-controls-top) - 12px)); max-height: max(1px,calc(var(--settings-rest-height,100dvh) - var(--tg-controls-top) - 12px)); }
  .set-root-back { display: none; }
  .set-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible; border-radius: 0; background: transparent !important; }
  .set-tiles .setting-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; min-height: 96px; padding: 13px 14px; border: 0; border-radius: 17px; background: var(--panel); }
  .set-tiles .setting-chevron { display: none; }
  .set-tiles .setting-main { width: 100%; }
  .set-foot { padding: 6px 0 12px; text-align: center; }
  .set-foot > b { display: block; margin-bottom: 8px; font: 600 14px/1.2 'Unbounded', -apple-system, BlinkMacSystemFont, sans-serif; }
  .set-foot .settings-legal-links { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 0; border: 0; }
}

/* кольцо остатка */
.set-plan-row { min-height: 74px; }
.set-ring { --p: 0; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%),var(--hover) 0); }
.set-ring b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.set-ring-icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--hover); }
.set-usage-notes { padding: 0 0 10px; }

/* тема значками прямо в строке */
.set-icon-seg { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--hover); }
.set-icon-seg button { width: 36px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.set-icon-seg button svg, .set-icon-seg button .ui-icon { width: 17px; height: 17px; }
.set-icon-seg { position: relative; }
.set-icon-seg::before { content: ""; position: absolute; top: 3px; left: 3px; width: 36px; height: 32px; border-radius: 9px; background: var(--bg); transition: transform .24s cubic-bezier(.22,1,.36,1); }
.set-icon-seg:has(button:nth-child(2)[aria-pressed="true"])::before { transform: translateX(38px); }
.set-icon-seg:has(button:nth-child(3)[aria-pressed="true"])::before { transform: translateX(76px); }
.set-icon-seg button { position: relative; transition: color .2s; }
.set-icon-seg button[aria-pressed="true"] { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .set-icon-seg::before { transition: none; } }
#pushRows.set-loading [aria-checked] { visibility: hidden; }

/* мини-окна темы и схемы ширины */
.set-themes, .set-widths { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.set-themes button, .set-widths button { display: grid; gap: 8px; justify-items: center; padding: 0; border: 0; background: none; color: var(--text); font-size: 13px; cursor: pointer; }
.set-win { width: 100%; aspect-ratio: 1.45; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.set-win u { width: 26%; }
.set-win s { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 8px; text-decoration: none; }
.set-win em { display: block; height: 6px; border-radius: 4px; }
.set-win em:last-child { width: 70%; }
.set-win em.a { width: 46%; align-self: flex-end; }
.set-win.dk { background: #141414; } .set-win.dk u { background: #101010; } .set-win.dk em { background: #454545; } .set-win.dk em.a { background: #244b75; }
.set-win.lt { background: #fff; } .set-win.lt u { background: #f5f5f5; } .set-win.lt em { background: #d7d7d7; } .set-win.lt em.a { background: #dbeaff; }
.set-win.auto { background: linear-gradient(110deg,#141414 50%,#fff 50%); } .set-win.auto u { background: #101010; } .set-win.auto em { background: #8a8a8a; } .set-win.auto em.a { background: #438dff; }
.set-themes button[aria-pressed="true"] .set-win { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-widths button { padding: 14px 8px; border-radius: 15px; background: var(--panel); }
.set-widths button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--accent); background: color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.set-lines { width: 100%; display: grid; justify-items: center; gap: 5px; }
.set-lines i { display: block; width: var(--w); height: 5px; border-radius: 3px; background: var(--faint); }
.set-lines i:last-child { width: calc(var(--w) * .7); }

/* аккаунт */
.set-account-me { display: grid; justify-items: center; gap: 10px; margin-bottom: 20px; }
.set-account-name { font-size: 18px; font-weight: 650; }
.set-name-form { width: 100%; display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.set-name-field { display: flex; gap: 8px; }
.set-name-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); color: var(--text); font-size: 15px; }
.set-name-field button { flex: none; padding: 0 14px; border: 0; border-radius: 13px; background: var(--text); color: var(--bg); font-weight: 600; cursor: pointer; }
.set-name-form small { font-size: 12px; }
.set-account .account-status { flex: none; font-size: 12px; }
.set-account .setting-row > svg:last-child { flex: none; width: 17px; height: 17px; color: var(--faint); }
.set-logout-wrap .account-logout { width: 100%; min-height: 46px; margin: 0; border: 1px solid var(--line); border-radius: 23px; background: transparent; color: var(--text); font-size: 14px; font-weight: 550; cursor: pointer; }

/* источники и полнота */
.set-pref { display: grid; gap: 12px; }
.set-preview { padding: 12px 14px; border-radius: 16px; background: var(--panel); font-size: 14px; line-height: 1.5; }
.set-preview > small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.set-preview-src { margin-left: 2px; padding: 0 5px; border-radius: 6px; background: var(--hover); color: var(--muted); font-size: 10px; }
.set-preview-list { display: grid; gap: 1px; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb,var(--text) 8%,transparent); color: var(--muted); font-size: 12px; }
.set-preview-list b { font-weight: 600; }

/* память */
.set-memory { display: grid; gap: 14px; }
.set-memory-side { display: grid; gap: 12px; }
.set-memory-sum small { display: block; color: var(--muted); font-size: 13px; }
.set-memory-sum span { color: var(--muted); }
.set-memory-sum b { color: var(--text); font-size: 30px; font-weight: 680; font-variant-numeric: tabular-nums; }
.set-memory .memory-group ul { display: block; margin: 0; padding: 0; list-style: none; }
.set-memory .memory-group li { padding: 12px 15px; border-bottom: 1px solid color-mix(in srgb,var(--text) 8%,transparent); font-size: 14px; }
.set-memory .memory-group li:last-child { border-bottom: 0; }
.set-memory .memory-groups { display: block; }
.set-memory-ask { display: grid; gap: 10px; padding: 14px 15px; }
.set-memory-ask p { margin: 0; font-size: 14px; }
.set-memory-ask div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-ask-no, .set-ask-yes { min-height: 40px; border-radius: 20px; font-size: 14px; font-weight: 550; cursor: pointer; }
.set-ask-no { border: 1px solid var(--line); background: transparent; color: var(--text); }
.set-ask-yes { border: 0; background: #e5484d; color: #fff; }
.set-hold { position: relative; width: 100%; min-height: 48px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: transparent; color: var(--text); font-size: 14px; font-weight: 550; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.set-hold i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: color-mix(in srgb,#e5484d 45%,transparent); }
.set-hold.holding i { transform: scaleX(1); transition: transform 1.4s linear; }
.set-hold span { position: relative; }

/* уведомления */
.stack-12 { display: grid; gap: 12px; }
.set-device { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-radius: 17px; background: var(--panel); }
.set-device span { display: grid; gap: 2px; min-width: 0; }
.set-device b { font-size: 14px; font-weight: 600; }
.set-device small { color: var(--muted); font-size: 12px; }
.set-device.on b { color: #34c26a; }
.set-small-action { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; }
.set-off { opacity: .42; pointer-events: none; transition: opacity .2s ease; }

/* помощь */
.set-help { display: grid; gap: 14px; }
.set-help-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.set-help-tile { min-width: 0; min-height: 88px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 13px 14px; border: 0; border-radius: 17px; background: var(--panel); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.set-help-tile:first-child { grid-column: 1 / -1; }
.set-help-tile > span:last-child { display: grid; gap: 2px; min-width: 0; }
.set-help-tile b { font-size: 14px; font-weight: 600; }
.set-help-tile small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; }
.set-faq details { border-bottom: 1px solid color-mix(in srgb,var(--text) 8%,transparent); }
.set-faq details:last-child { border-bottom: 0; }
.set-faq summary { padding: 14px 15px; font-size: 14px; font-weight: 550; list-style: none; cursor: pointer; }
.set-faq summary::-webkit-details-marker { display: none; }
.set-faq p { margin: 0; padding: 0 15px 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* страницы оплаты: шапка и касса на месте, листается только контент */
.checkout-page { display: flex; flex-direction: column; width: 100%; overflow: hidden; padding: max(10px,var(--app-safe-top)) 0 0; }
.bill-head { position: relative; z-index: 3; flex: none; box-sizing: border-box; height: var(--bill-head); margin-bottom: calc(0px - var(--bill-head)); padding: 0 16px 8px; }
.bill-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bill-main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--bill-head) + 8px) 16px 44px; scrollbar-width: none; scroll-timeline: --bill-scroll block; }
.bill-cash { position: relative; z-index: 2; flex: none; display: grid; gap: 10px; margin-top: -24px; padding: 24px 16px max(14px,var(--app-safe-bottom),env(safe-area-inset-bottom)); background: linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent), var(--bg) 24px); pointer-events: none; }
.bill-cash > * { pointer-events: auto; }
.bill-eyebrow { margin: 0 0 2px; color: var(--muted); font-size: 13px; }
.bill-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 680; text-wrap: balance; }
.bill-title i { color: var(--faint); font-style: normal; font-weight: 400; }
.bill-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.bill-cap { margin: 20px 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.bill-gap { margin-top: 14px; }
.bill-features li { margin: 10px 0; }
.bill-dim li { color: var(--muted); }
.bill-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.bill-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bill-total span:first-child { flex: 1; color: var(--muted); font-size: 14px; }
.bill-total strong { font-size: 24px; font-weight: 680; font-variant-numeric: tabular-nums; }
.bill-kv { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.bill-kv b { color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }
.bill-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; cursor: pointer; }
.bill-consent input { flex: none; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--accent); }
.bill-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.bill-renew { margin: 0; min-height: 2.9em; font-size: 13px; line-height: 1.45; }
.bill-cash .checkout-pay { min-height: 50px; }
.bill-cash .checkout-legal-note { margin: 0; color: var(--faint); }
.bill-compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.bill-compare th { padding: 6px 4px 10px; text-align: center; font-weight: 600; }
.bill-compare td { padding: 10px 4px; border-top: 1px solid color-mix(in srgb,var(--text) 8%,transparent); text-align: center; color: var(--muted); }
.bill-compare td:first-child { padding-left: 0; text-align: left; color: var(--text); }
.bill-compare td:last-child b { color: var(--text); font-weight: 600; }
.bill-center { text-align: center; }
.bill-center .bill-note { text-align: center; }
.bill-big { margin-top: 6px; font-size: 64px; line-height: 1.05; font-weight: 680; font-variant-numeric: tabular-nums; }
.bill-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin-top: 22px; padding: 3px; border-radius: 16px; background: var(--panel); }
.bill-seg button { min-height: 42px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 550; cursor: pointer; }
.bill-seg button[aria-pressed="true"] { background: var(--hover); color: var(--text); }
.bill-offer { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 13px 14px; border: 0; border-radius: 17px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.bill-offer > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bill-offer small { color: var(--muted); font-size: 12px; }
.bill-offer strong { flex: none; font-variant-numeric: tabular-nums; }
.bill-offer svg { flex: none; width: 17px; height: 17px; color: var(--faint); }
.bill-choice { gap: 8px; }
.bill-keep, .bill-off { min-height: 48px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
.bill-keep { border: 0; background: var(--text); color: var(--bg); }
.bill-off { border: 1px solid var(--line); background: transparent; color: var(--text); }
/* при открытой клавиатуре остаётся только кнопка */
@media (max-height: 520px) { .bill-cash .bill-consent, .bill-cash .bill-renew, .bill-cash .checkout-legal-note, .bill-cash .bill-kv { display: none; } }

/* планы со шкалой */
.plans-modal.plans-modal { display: flex; flex-direction: column; overflow: hidden; padding: max(10px,var(--app-safe-top)) 0 0; background: var(--bg); }
html[data-theme="light"] .plans-modal.plans-modal { background: var(--bg); }
.pl-top.pl-top { position: relative; z-index: 3; flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--pl-head); margin: 0 0 calc(0px - var(--pl-head)); padding: 0 16px 8px; pointer-events: auto; }
.pl-top .modal-title { flex: 1; text-align: center; }
.round-back, .round-back-spacer { flex: none; width: 40px; height: 40px; }
.plans-modal .pl-top > .round-back-spacer { display: block; }
.round-back { display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--panel); color: var(--text); cursor: pointer; }
.round-back svg { width: 19px; height: 19px; }
.pl-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; scroll-timeline: --plans-scroll block; }
.pl-inner { position: relative; display: flex; flex-direction: column; padding: 0 16px 44px; }
.pl-inner.pl-inner { padding-top: var(--pl-head); }
.pl-ghost { position: absolute; margin: 0; pointer-events: none; }
.pl-ruler { order: -2; position: relative; display: flex; justify-content: space-between; padding: 4px 0 2px; }
.pl-ruler > button { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.pl-ruler .plan-badge, .bill-offer .plan-badge { font-size: inherit; line-height: inherit; font-weight: inherit; }
.pl-ruler small { color: var(--muted); font-size: 11px; font-weight: 400; }
/* у Free шесть шагов: на узком телефоне Premium иначе наезжает на соседей */
@media (max-width: 380px) { .pl-ruler[style*="--pl-n:6"] > button { font-size: 12px; } }
@media (max-width: 340px) { .pl-ruler[style*="--pl-n:6"] > button { font-size: 11px; } }
.pl-line { position: absolute; top: 15px; height: 2px; background: var(--line); left: calc(100% / var(--pl-n,4) / 2); right: calc(100% / var(--pl-n,4) / 2); }
.pl-line i { display: block; height: 100%; width: 0; background: var(--faint); transition: width .25s var(--ease,ease); }
.pl-dot { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); transition: border-color .2s ease,background .2s ease; }
.pl-dot .ui-icon { width: 13px; height: 13px; opacity: 0; color: var(--bg); }
.pl-ruler button.done .pl-dot, .pl-dot.done { border-color: var(--faint); background: var(--faint); }
.pl-ruler button.done .pl-dot .ui-icon, .pl-dot.done .ui-icon { opacity: 1; }
.pl-ruler button[aria-checked="true"] .pl-dot { border: 7px solid var(--accent); }
.pl-hero { order: -1; margin-top: 16px; text-align: center; }
.pl-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; font-size: 44px; line-height: 1.1; font-weight: 680; font-variant-numeric: tabular-nums; }
.pl-discount:empty { display: none; }
.pl-discount { font-size: 13px; font-weight: 500; }
.pl-for { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.pl-desc { order: -1; margin: 10px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; }
.pl-grid { display: grid; }
.pl-feature { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: help; }
.pl-feature .ui-icon { flex: none; width: 18px; height: 18px; color: var(--accent); }
.pl-feature.was .ui-icon { color: var(--muted); }
.pl-prior { margin: 14px 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.pl-foot { position: relative; z-index: 2; flex: none; display: grid; gap: 8px; margin-top: -24px; padding: 24px 16px max(14px,var(--app-safe-bottom),env(safe-area-inset-bottom)); background: linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent), var(--bg) 24px); pointer-events: none; }
.pl-foot > * { pointer-events: auto; }
.pl-upgrade { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.plans-modal .plan-cta { width: 100%; min-height: 50px; margin: 0; }
.plans-modal .plan-renewal-button { width: 100%; margin-top: 8px; }
.plans-modal .plan-footnote { margin: 12px 0 0; text-align: center; }
.plans-modal .plan-legal-links { margin-top: 8px; }

/* широкий экран: раздел рядом с меню, без затемнения и окна */
@media (min-width: 800px) {
  .only-narrow, .only-narrow-flex { display: none !important; }
  .only-wide { display: block !important; }
  .bill-kv.only-wide, .bill-consent.only-wide { display: flex !important; }
  .only-wide-flex { display: flex !important; }
  .modal-layer.settings-open, .modal-layer.plans-open, .nested-plans-layer.plans-open, .checkout-layer { left: var(--section-left,0px); right: 0; width: auto; padding: 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-shell.plans-background { transform: none; border-radius: 0; }
  .modal-layer.settings-open.plans-behind .modal { transform: none; opacity: 1; }
  .modal-layer.settings-open .modal { width: 100%; height: 100%; max-height: 100%; padding: 0 28px 40px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .modal-layer.settings-open .modal.settings-navigating { padding: 0; }
  .settings-navigating > .settings-nav-old, .settings-navigating > .settings-nav-new { padding: 0 28px 40px; }
  .settings-modal .modal-top { min-height: 64px; margin: 0 -28px 8px; padding: 12px 16px; }
  .settings-modal .modal-title { flex: 1; text-align: center; }
  .set-root-back { visibility: hidden; }
  .set-root { width: min(640px,100%); margin: 0 auto; }
  .settings-page-content { width: min(640px,100%); margin: 0 auto; }
  .settings-page-content:has(.set-wide) { width: min(920px,100%); }
  .set-account { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 28px; align-items: start; }
  .set-logout-wrap { position: static; margin: 0; padding: 0; background: none; pointer-events: auto; }
  .set-pref { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px 24px; align-items: start; }
  .set-pref .settings-page-hint { grid-column: 1 / -1; margin: 0; }
  .set-bar { top: 72px; bottom: auto; margin: 0; padding: 0; background: none; pointer-events: auto; }
  .set-memory { grid-template-columns: 280px minmax(0,1fr); gap: 24px; align-items: start; }
  .set-memory-side { position: sticky; top: 72px; }
  .set-help-tiles { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .set-help-tile:first-child { grid-column: auto; }
  .set-help-docs .settings-legal-links { display: grid; justify-items: start; gap: 6px; margin: 0; padding: 0; border: 0; }

  .checkout-page { --bill-head: 64px; height: 100%; padding-top: 0; }
  .bill-head { min-height: 64px; padding: 12px 16px; }
  .bill-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-content: start; align-items: start; width: min(920px,100%); margin: 0 auto; overflow-y: auto; padding: calc(var(--bill-head) + 8px) 24px 32px; scroll-timeline: --bill-scroll block; scrollbar-width: none; }
  .bill-main { overflow: visible; padding: 0; scroll-timeline: none; }
  .bill-cash { position: sticky; top: calc(var(--bill-head) + 8px); margin-top: 0; padding: 18px; border: 0; border-radius: 20px; background: var(--panel); pointer-events: auto; }
  .bill-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .bill-narrow { display: flex; flex-direction: column; width: min(520px,100%); align-items: stretch; gap: 20px; }
  .bill-narrow .bill-main { flex: none; }
  .bill-narrow .bill-features { grid-template-columns: 1fr; }
  .bill-narrow .bill-cash { position: static; padding: 0; background: none; }
  .bill-choice { grid-template-columns: 1fr 1fr; }
  .bill-choice .bill-off { order: -1; }

  .plans-modal { --pl-head: 64px; }
  .plans-modal.plans-modal { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; padding-top: 0; background: var(--bg); box-shadow: none; }
  .pl-top.pl-top { padding: 12px 16px; }
  .pl-top .pl-close.only-wide { flex: none; display: grid !important; }
  #modalLayer .pl-top .round-back, .bill-solo .checkout-back { visibility: hidden; }

  /* раздел вместо чата: шапка и кнопки те же, что у Еды и Запланированного */
  /* clip, а не hidden: страница при въезде расширяет раздел, и фокус мог сдвинуть его вбок вместе с меню */
  .main-panel.section-active.billing-active { overflow: clip; }
  .projects-workspace.billing-screen { z-index: 13; padding: 0; overflow: clip; container: billing / inline-size; }
  .billing-screen > * { --nav-w: 264px; }
  .billing-screen > .section-page { display: none; }
  .billing-screen > :is(.modal-layer,.checkout-layer) { position: absolute; inset: 0 0 0 var(--nav-w); width: auto; height: 100%; overflow: clip; }
  .billing-screen .modal-layer .modal.content-entering { animation: none; }
  /* смена пункта меню: гаснет и появляется только содержимое */
  .billing-screen .modal.pane-out :is(.settings-page-content,.pl-scroll,.modal-title) { opacity: 0; transition: opacity .12s ease; }
  .billing-screen .modal.pane-in :is(.settings-page-content,.pl-scroll,.modal-title) { animation: paneIn .2s ease backwards; }
  @media (prefers-reduced-motion: reduce) { .billing-screen .modal.pane-in :is(.settings-page-content,.pl-scroll,.modal-title) { animation: none; } }

  /* левое меню настроек: пункт открывается справа, меню остаётся на месте */
  .set-side { position: absolute; inset: 0 auto 0 0; width: var(--nav-w); overflow-y: auto; padding: 0 12px 20px; background: color-mix(in srgb,var(--panel) 40%,var(--bg)); scrollbar-width: none; }
  .set-side-title { display: flex; align-items: center; height: 64px; padding: 0 10px; font-size: 20px; font-weight: 600; }
  .set-side-group { margin: 16px 0 5px; padding: 0 10px; color: var(--muted); font-size: 12px; }
  .set-side-item { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  .set-side-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-side-item :is(svg,.ui-icon) { flex: none; width: 20px; height: 20px; color: var(--muted); }
  .set-side-item .avatar { flex: none; width: 26px; height: 26px; margin-inline: -3px; font-size: 12px; }
  @media (hover: hover) and (pointer: fine) { .set-side-item:hover { background: var(--panel); } }
  .set-side-item[aria-current="page"] { background: var(--hover); font-weight: 550; }
  .set-side-item[aria-current="page"] :is(svg,.ui-icon) { color: var(--text); }
  .set-side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  /* в светлой теме основное меню тоже светло-серое: меню настроек темнее, иначе они сливаются */
  html[data-theme="light"] .set-side { background: #e6e6e6; }
  @media (hover: hover) and (pointer: fine) { html[data-theme="light"] .set-side-item:hover { background: #dcdcdc; } }
  html[data-theme="light"] .set-side-item[aria-current="page"] { background: #d3d3d3; }
  .set-pane-root .settings-back, .billing-screen .pl-top .round-back { visibility: hidden; }
  .pl-status { order: -4; margin: 0 0 18px; }

  /* узкое окно: от меню остаются значки, страницы в одну колонку */
  @container billing (max-width: 1100px) {
    .bill-features, .pl-grid { grid-template-columns: 1fr 1fr; }
    .bill-layout .bill-features { grid-template-columns: 1fr; }
    .pl-price { font-size: 52px; }
  }
  @container billing (max-width: 800px) {
    .billing-screen > * { --nav-w: 68px; }
    .set-side-title, .set-side-group { display: none; }
    .set-side { padding-top: 12px; }
    .set-side-item { justify-content: center; padding: 0; }
    .set-side-item > span:last-child:not(.ui-icon):not(.avatar) { display: none; }
    .set-side-item .avatar { margin: 0; }
    .bill-layout, .set-account, .set-pref, .set-memory { grid-template-columns: minmax(0,1fr); }
    .bill-cash, .set-preview, .set-memory-side { position: static; }
    .pl-grid { grid-template-columns: 1fr; }
  }
  .billing-screen > :is(.modal-layer,.checkout-layer):not(.closing) { animation: none; }
  .checkout-layer.bill-first .checkout-page { animation: none; }
  .settings-modal .modal-title, .pl-top .modal-title, .bill-head > span { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: normal; text-align: center; }
  :root :is(.settings-modal .modal-top button,.pl-top button,.bill-head button) { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--text); }
  :root :is(.settings-modal .modal-top button,.pl-top button,.bill-head button) :is(svg,.ui-icon) { width: 21px; height: 21px; }
  .pl-inner { width: min(860px,100%); margin: 0 auto; padding: 0 28px 32px; }
  .pl-hero { order: -3; margin-top: 2px; }
  .pl-price { font-size: 60px; }
  .pl-ruler { order: -2; margin-top: 22px; }
  .pl-desc { order: -1; }
  .pl-cta-wide { order: 0; width: min(340px,100%); margin: 0 auto 24px; }
  .pl-features { order: 1; }
  .pl-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 20px; }
  .plans-modal .plan-footnote, .plans-modal .plan-legal-links { order: 2; }
}

/* в Telegram назад ведёт нативная кнопка, место оставляем, чтобы заголовок был по центру */
:root[data-telegram-miniapp="true"] .round-back { visibility: hidden; }
:root[data-telegram-miniapp="true"] .set-root-back { display: none; }

/* кнопки окна приложения лежат поверх шапки */
html.app-surface .settings-modal .modal-top, html.app-surface .bill-head, html.app-surface .pl-top.pl-top { padding-left: max(16px,var(--surface-inset-left,0px)); padding-right: max(16px,var(--surface-inset-right,0px)); }
@keyframes paneIn { from { opacity: 0; } }