/* Single mobile design system. Document scrolling except home and temporary modal lock. */
:root {
  --bg:#f2f4f7; --bg-deep:var(--bg); --header:#fff; --surface:#fff; --surface-solid:var(--surface); --card:var(--surface);
  --surface-muted:#e9eef4; --text:#18212c; --muted:#586779; --line:#dce2e9;
  --primary:#176ac4; --primary-dark:#12569f; --primary-soft:#e7f0fc; --button-text:#fff; --success:#147c52; --danger:#bc303c; --warning:#986000;
  --sage:var(--primary-soft); --sand:var(--surface-muted); --sky:var(--primary-soft); --shadow:0 8px 24px #00000010;
  --radius:28px; --radius-control:24px; --column:480px; --header-height:72px;
  --matte:color-mix(in srgb,var(--surface) 82%,transparent);
  --safe-top:max(env(safe-area-inset-top,0px),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)));
  --safe-left:max(env(safe-area-inset-left,0px),calc(var(--tg-safe-area-inset-left,0px) + var(--tg-content-safe-area-inset-left,0px)));
  --safe-right:max(env(safe-area-inset-right,0px),calc(var(--tg-safe-area-inset-right,0px) + var(--tg-content-safe-area-inset-right,0px)));
  --app-height:var(--tg-viewport-stable-height,100dvh); --visible-height:100dvh; --visual-top:0px; --keyboard-offset:0px;
  --top-clearance:calc(var(--safe-top) + var(--header-height)); --bottom-clearance:var(--safe-bottom);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color-scheme:light;
}
html[data-theme="dark"] {
  --bg:#10151c; --header:#18212c; --surface:#18212c; --surface-muted:#222e3d; --text:#f1f5fa; --muted:#a3b0c1; --line:#303e50;
  --primary:#3389df; --primary-dark:#82bdf6; --primary-soft:#203a55; --success:#62d4a4; --danger:#ff8892; --warning:#edbd63; color-scheme:dark;
}
html[data-theme-mode="telegram"] {
  --primary:var(--tg-theme-button-color,#176ac4); --primary-dark:var(--tg-theme-link-color,#12569f);
  --primary-soft:color-mix(in srgb,var(--primary) 12%,var(--surface));
  --button-text:var(--tg-theme-button-text-color,#fff); --line:var(--tg-theme-section-separator-color,#dce2e9);
}
html[data-theme="dark"][data-theme-mode="telegram"] {
  --primary:var(--tg-theme-button-color,#3389df); --primary-dark:var(--tg-theme-link-color,#82bdf6);
  --line:var(--tg-theme-section-separator-color,#303e50);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { min-height:100%; background:var(--bg); scroll-padding-top:calc(var(--top-clearance) + 16px); scroll-padding-bottom:calc(var(--bottom-clearance) + 16px); }
body { margin:0; min-height:var(--app-height); background:radial-gradient(ellipse at 15% 12%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 65%),var(--bg); background-attachment:fixed; color:var(--text); font-size:14px; line-height:1.4; }
button,input,textarea { font:inherit; color:inherit; }
button,a,summary { touch-action:manipulation; }
button { min-height:44px; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:disabled,[aria-disabled="true"] { opacity:.55; cursor:default; }
button:active:not(:disabled),a:active,summary:active { filter:brightness(.92); }
:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
input { min-width:0; font-size:16px; scroll-margin-block:24px; }
input[aria-invalid="true"] { border-color:var(--danger); }
[hidden] { display:none !important; }
svg { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
h1,h2,h3,p { overflow-wrap:anywhere; }
.app { position:relative; width:min(100%,var(--column)); min-height:var(--app-height); margin-inline:auto; }
.topbar { position:fixed; z-index:20; top:0; left:50%; transform:translateX(-50%); width:min(100%,var(--column)); height:var(--top-clearance); padding:var(--safe-top) max(16px,var(--safe-right)) 0 max(16px,var(--safe-left)); display:flex; align-items:center; justify-content:space-between; gap:8px; background:color-mix(in srgb,var(--bg) 76%,transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.topbar__brand,.profile-chip,.profile-name-line { display:flex; align-items:center; gap:8px; min-width:0; }
.topbar__brand { padding:0; border:0; background:transparent; text-align:left; }
.topbar__brand > span:last-child { font-size:18px; font-weight:700; letter-spacing:-.5px; }
.topbar__brand small { color:var(--primary); font-size:inherit; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-control); flex-shrink:0; background:var(--primary); }
.brand-mark img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.brand-mark--large { width:64px; height:64px; border-radius:var(--radius-control); }
.profile-chip { padding:6px 6px 6px 16px; border:1px solid var(--line); border-radius:999px; background:var(--matte); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); text-align:right; box-shadow:0 4px 16px #00000005; }
.profile-chip__text { display:flex; flex-direction:column; max-width:128px; }
.profile-chip__text strong { font-size:13px; }
.profile-chip__text small { color:var(--muted); font-size:11px; }
.profile-name-line strong { min-width:0; overflow-wrap:anywhere; }
.avatar,.referral-avatar { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--primary-soft); color:var(--primary-dark); font-weight:700; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.avatar--large { width:64px; height:64px; font-size:20px; }
.avatar.has-gift-frame { box-shadow:0 0 0 2px var(--gift-frame-main),0 0 0 4px var(--gift-frame-edge); }
.user-decoration { width:20px; height:20px; flex-shrink:0; }
.user-decoration--large { width:24px; height:24px; }
.telegram-media,.telegram-media img,.telegram-media video,.telegram-media svg { display:block; width:100%; height:100%; object-fit:contain; }
.native-emoji { font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif; }
.pages { padding:calc(var(--top-clearance) + 16px) max(16px,var(--safe-right)) calc(var(--bottom-clearance) + 24px) max(16px,var(--safe-left)); }
.page { display:none; min-width:0; }
.page.is-active { display:block; animation:page-reveal .28s ease both; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 16px; }
.page-heading > div { min-width:0; }
.page-heading h1 { margin:0; font-size:26px; line-height:1.15; letter-spacing:-.6px; }
.eyebrow { display:block; color:var(--muted); font-size:11px; font-weight:600; margin-bottom:4px; }
.page-subtitle,.legal-note { color:var(--muted); font-size:13px; line-height:1.5; margin:8px 0 0; }
.legal-note { margin:16px 8px 0; }
.status-pill,.soft-badge,.step-badge { display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-control); padding:4px 8px; background:var(--surface-muted); font-size:12px; font-weight:600; flex-shrink:0; }
.status-pill { color:var(--success); }
.status-pill i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-pill.is-inactive { color:var(--danger); }
.status-pill.is-expiring { color:var(--warning); }
.glass-card,.plan-card,.traffic-custom,.email-card,.info-list,.settings-list,.faq-list details { border:1px solid var(--line); border-radius:var(--radius); background:var(--matte); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
/* Home density is measured against its actual available box, including Telegram insets. */
html.home-page-active,html.home-page-active body { height:var(--app-height); min-height:0; overflow:hidden; }
html.home-page-active .app { height:var(--app-height); min-height:0; }
html.home-page-active .pages { height:100%; padding-block:calc(var(--top-clearance) + 8px) calc(var(--bottom-clearance) + 8px); }
.page--home.is-active { --home-gap:16px; display:flex; flex-direction:column; gap:var(--home-gap); height:100%; }
.page--home > * { flex-shrink:0; margin:0; }
.page-heading--home { align-items:flex-end; padding:20px 4px 24px; }
.page-heading--home h1 { display:flex; flex-direction:column; gap:4px; font-size:clamp(30px,8.6vw,40px); line-height:1.08; letter-spacing:-1.2px; }
#greetingText { font-size:.82em; font-weight:500; color:var(--muted); }
#welcomeName { font-weight:750; }
.page-heading--home .status-pill { margin-bottom:4px; }
#welcomeName:not(:empty)::after { content:"."; }
.hero-card { padding:24px; }
.hero-card__headline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hero-card__plan { font-size:32px; line-height:1.2; letter-spacing:-.5px; overflow-wrap:anywhere; }
.hero-card__meta { margin-top:4px; color:var(--muted); font-size:13px; }
.hero-card__actions { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); margin-top:16px; padding-top:8px; }
.hero-card__actions small { color:var(--muted); font-size:12px; }
.hero-card__balance { font-size:14px; font-variant-numeric:tabular-nums; margin-right:auto; }
.balance-topup { padding:0 12px; min-height:44px; border:0; border-radius:var(--radius-control); background:var(--primary-soft); color:var(--primary-dark); font-weight:600; }
.traffic-usage { margin-top:16px; }
.traffic-line { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:12px; color:var(--muted); }
.traffic-line b { color:var(--text); font-weight:500; }
.progress { height:6px; border-radius:var(--radius-control); background:var(--surface-muted); }
.progress i { display:block; height:100%; width:0; border-radius:inherit; background:var(--primary); }
.home-primary-actions { display:flex; gap:8px; margin-bottom:12px; }
.home-primary-actions > * { min-width:0; flex:1; }
.home-primary-actions .button { font-size:12px; padding:8px; min-height:44px; }
.home-purchase { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:18px 20px; width:100%; min-height:84px; border:0; border-radius:var(--radius-control); background:var(--primary); color:#fff; text-align:left; }
.home-purchase span { display:flex; flex-direction:column; }
.home-purchase strong { font-size:20px; }
.home-purchase em { font-size:12px; font-style:normal; opacity:.9; }
.quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.page--home > .quick-grid { flex:0 0 auto; min-height:0; grid-auto-rows:minmax(72px,1fr); }
.quick-action { display:flex; align-items:center; justify-content:center; flex-direction:row; gap:6px; min-width:0; min-height:72px; padding:10px 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--matte); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); text-align:center; }
.quick-action__icon { display:none; }
.quick-action strong { font-size:14px; line-height:1.2; font-weight:650; }
.quick-action small { display:none; }
.trial-card { display:grid; gap:8px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-control); }
.trial-card__icon { display:none; }
.trial-card__body { display:flex; flex-direction:column; min-width:0; }
.trial-card__body small { color:var(--muted); font-size:11px; }
.trial-card__body strong { font-size:14px; }
.trial-card__body p,.trial-card__body em { margin:4px 0 0; color:var(--muted); font-size:12px; font-style:normal; }
.trial-card__actions { display:flex; gap:8px; }
.trial-card__actions > * { flex:1; }
.trial-compact-action { width:100%; }
html[data-home-density="compact"] .page--home { --home-gap:12px; }
html[data-home-density="compact"] .page-heading--home { padding:8px 4px 12px; }
html[data-home-density="compact"] .page-heading--home h1 { font-size:30px; }
html[data-home-density="compact"] .page--home > .quick-grid { min-height:0; gap:8px; grid-auto-rows:minmax(64px,1fr); }
html[data-home-density="compact"] .quick-action { min-height:64px; padding:8px 6px; }
html[data-home-density="compact"] .hero-card { padding:12px; }
html[data-home-density="compact"] .hero-card__actions,html[data-home-density="compact"] .traffic-usage { margin-top:8px; }
html[data-home-density="compact"] .trial-card__body small { display:none; }
html[data-home-density="tight"] .page--home,html[data-home-density="minimal"] .page--home { --home-gap:8px; }
html[data-home-density="tight"] .hero-card,html[data-home-density="minimal"] .hero-card { padding:8px 12px; }
html[data-home-density="tight"] .hero-card__actions,html[data-home-density="minimal"] .hero-card__actions { margin-top:8px; padding-top:0; }
html[data-home-density="tight"] .traffic-usage,html[data-home-density="minimal"] .traffic-usage { margin-top:8px; }
html[data-home-density="tight"] .page-heading--home { padding:4px; }
html[data-home-density="tight"] .page-heading--home h1 { font-size:26px; }
html[data-home-density="tight"] .hero-card__plan { font-size:24px; }
html[data-home-density="tight"] .quick-grid,html[data-home-density="minimal"] .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
html[data-home-density="tight"] .page--home > .quick-grid,html[data-home-density="minimal"] .page--home > .quick-grid { min-height:0; grid-auto-rows:minmax(44px,1fr); }
html[data-home-density="tight"] .quick-action,html[data-home-density="minimal"] .quick-action { min-height:44px; padding:6px 3px; }
html[data-home-density="tight"] .quick-action strong,html[data-home-density="minimal"] .quick-action strong { font-size:11px; }
html[data-home-density="tight"] .quick-action__icon,html[data-home-density="minimal"] .quick-action__icon,
html[data-home-density="tight"] .home-purchase em,html[data-home-density="minimal"] .home-purchase em { display:none; }
html[data-home-density="tight"] .home-purchase,html[data-home-density="minimal"] .home-purchase { min-height:44px; padding-block:8px; }
html[data-home-density="minimal"] { --header-height:48px; }
html[data-home-density="minimal"] .profile-chip { padding:4px 4px 4px 12px; }
html[data-home-density="minimal"] .profile-chip .avatar { width:32px; height:32px; }
html.home-page-active[data-home-density="minimal"] .topbar__brand { visibility:hidden; }
html[data-home-density="minimal"] .page-heading--home { padding:0; position:fixed; z-index:21; top:var(--safe-top); height:var(--header-height); pointer-events:none; }
html[data-home-density="minimal"] .page-heading--home h1 { display:none; }
#homeActionsContent { display:grid; gap:16px; }
html[data-home-density="minimal"] .hero-card__plan { font-size:20px; }
html[data-home-density="minimal"] .hero-card__actions { border:0; position:absolute; right:8px; top:0; margin:0; }
html[data-home-density="minimal"] .hero-card { position:relative; padding-block:4px; }
html[data-home-density="minimal"] .traffic-usage { margin-top:0; }
html[data-home-density="minimal"] .traffic-line { margin-bottom:4px; font-size:11px; }
html[data-home-density="minimal"] .progress { height:4px; }
html[data-home-density="minimal"] .hero-card__headline { padding-right:48px; }
html[data-home-density="minimal"] .hero-card__actions small,html[data-home-density="minimal"] .hero-card__balance { display:none; }
html[data-home-density="minimal"] .balance-topup { width:44px; padding:0; font-size:0; }
html[data-home-density="minimal"] .balance-topup::after { content:"+ ₽"; font-size:14px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px 16px; border:1px solid transparent; border-radius:var(--radius-control); font-weight:600; text-align:center; }
.button--primary { color:var(--button-text); background:var(--primary); }
.button--soft { background:var(--primary-soft); color:var(--primary-dark); }
.button--danger { background:var(--surface); color:var(--danger); border-color:var(--line); margin-top:24px; }
.button--wide { width:100%; }
.text-button,.icon-button { border:0; border-radius:var(--radius-control); background:transparent; color:var(--primary-dark); padding:8px; }
.text-button { font-size:13px; font-weight:600; flex-shrink:0; }
.icon-button { width:44px; min-width:44px; display:grid; place-items:center; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:24px 0 8px; }
.section-heading h2 { font-size:18px; margin:0; }
.section-heading p { margin:4px 0 0; color:var(--muted); }
.qr-card { padding:16px; text-align:center; }
.qr-card h2 { margin:8px 0; font-size:20px; }
.qr-card > p { margin:0 0 16px; color:var(--muted); font-size:13px; }
.qr-wrap { position:relative; width:min(100%,256px); aspect-ratio:1; padding:12px; margin:0 auto 16px; border:1px solid var(--line); border-radius:var(--radius-control); background:#fff; }
.subscription-qr,.subscription-qr canvas,.subscription-qr img,.subscription-qr svg { width:100% !important; height:100% !important; display:block; }
.qr-placeholder { position:absolute; inset:0; display:grid; place-items:center; background:var(--surface); border-radius:inherit; }
.connect-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.app-button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border:1px solid var(--line); border-radius:var(--radius-control); font-size:12px; }
.app-button > span { font-weight:800; color:var(--primary); }
.app-button > svg { display:none; }
.stack-list,.plans-list,.traffic-options,.one-terms-list,.faq-list { display:grid; gap:8px; }
.list-row,.referral-row { display:flex; align-items:center; gap:8px; min-height:64px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.list-row__icon { color:var(--muted); flex-shrink:0; }
.list-row__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.list-row__body strong { font-size:14px; overflow-wrap:anywhere; }
.list-row__body small,.referral-row__bonus { font-size:12px; color:var(--muted); }
.list-row__action { flex-shrink:0; padding:8px; background:transparent; border:0; border-radius:var(--radius-control); color:var(--danger); font-size:12px; }
.empty-state { padding:24px 16px; text-align:center; background:var(--surface); border-radius:var(--radius-control); }
.empty-state__icon { display:block; color:var(--muted); margin-bottom:8px; }
.empty-state strong { display:block; font-size:15px; }
.empty-state p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.empty-state .button { margin-top:16px; }
.skeleton-row,.skeleton-card { min-height:64px; border-radius:var(--radius-control); background:var(--surface-muted); }
.skeleton-card { min-height:184px; }
.plan-card { padding:16px; }
.plan-card__badge { float:right; padding:4px 8px; border-radius:var(--radius-control); background:var(--primary-soft); color:var(--primary-dark); font-size:11px; }
.plan-card h3 { margin:0; font-size:24px; }
.plan-card > p { margin:8px 0 16px; color:var(--muted); font-size:13px; }
.plan-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.plan-chips span { padding:4px 8px; background:var(--surface-muted); border-radius:var(--radius-control); font-size:12px; }
.plan-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:16px; border-top:1px solid var(--line); }
.plan-price { display:flex; flex-direction:column; min-width:0; }
.plan-price strong { font-size:22px; font-variant-numeric:tabular-nums; }
.plan-price small { color:var(--muted); font-size:12px; }
.is-current,.is-selected,[aria-pressed="true"].one-term,[aria-pressed="true"].traffic-option { border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.traffic-option,.one-term { display:grid; grid-template-columns:minmax(0,1fr) auto 24px; align-items:center; gap:8px; width:100%; min-height:64px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); text-align:left; }
.traffic-option > span,.one-term > span { display:flex; flex-direction:column; gap:4px; }
.traffic-option small,.one-term small { color:var(--muted); font-size:12px; }
.traffic-option b,.one-term b { color:var(--primary-dark); font-variant-numeric:tabular-nums; }
.traffic-custom { display:grid; gap:16px; margin-top:16px; padding:16px; }
.traffic-custom > div:first-child { display:flex; justify-content:space-between; gap:8px; align-items:center; min-height:24px; }
.traffic-custom__label { font-size:13px; color:var(--muted); }
.traffic-custom strong { font-variant-numeric:tabular-nums; min-width:120px; text-align:right; }
.traffic-stepper { display:grid; grid-template-columns:48px 1fr 48px; min-height:48px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface-muted); }
.traffic-stepper button { border:0; border-radius:var(--radius-control); background:transparent; color:var(--primary-dark); font-size:24px; }
.traffic-stepper label { display:flex; justify-content:center; align-items:center; gap:8px; background:var(--surface); }
.traffic-stepper input { width:64px; height:44px; padding:0; border:0; background:transparent; text-align:center; appearance:textfield; }
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button { appearance:none; }
.traffic-stepper label span { color:var(--muted); }
.referral-share { margin-bottom:16px; }
.share-field { display:block; margin-top:16px; }
.share-field > span,.amount-input > span,.email-card label { display:block; color:var(--muted); margin-bottom:8px; font-size:13px; }
.share-field > div { display:flex; gap:8px; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.share-field input { flex:1; width:0; border:0; background:transparent; font-size:13px; }
.share-field button { width:44px; flex-shrink:0; border:0; border-radius:var(--radius-control); background:var(--primary-soft); color:var(--primary-dark); }
.referral-hero { display:flex; align-items:center; gap:16px; padding:16px; }
.referral-hero__icon { display:grid; place-items:center; width:40px; height:40px; color:var(--primary); }
.referral-hero > span:last-child { display:flex; flex-direction:column; gap:4px; }
.referral-hero strong { font-size:22px; }
.referral-hero small,.referral-hero em { color:var(--muted); font-size:12px; font-style:normal; }
.profile-card { display:flex; align-items:center; gap:16px; padding:16px; }
.profile-card > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.profile-card strong { font-size:20px; }
.profile-card small,.profile-card em { color:var(--muted); font-size:12px; font-style:normal; }
.profile-appearance { color:var(--primary-dark); font-size:11px; }
.info-list { margin-top:16px; }
.info-list > div { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:64px; padding:8px 12px; }
.info-list span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.info-list strong { overflow-wrap:anywhere; }
.info-list small,.settings-list small { color:var(--muted); font-size:12px; }
.info-list > div + div,.settings-list > * + * { border-top:1px solid var(--line); }
.email-card { margin-top:16px; padding:16px; }
.email-card input,.amount-input input { width:100%; min-height:48px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); margin-bottom:8px; }
.form-hint { margin:8px 0 0; min-height:18px; color:var(--muted); font-size:12px; }
.settings-list label { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; padding:12px 16px; position:relative; cursor:pointer; }
.settings-list label > span,.theme-setting > span { display:flex; flex-direction:column; gap:4px; }
.settings-list input { position:absolute; opacity:0; width:44px; height:44px; right:16px; }
.settings-list i { width:44px; height:28px; border-radius:var(--radius-control); background:var(--surface-muted); flex-shrink:0; position:relative; pointer-events:none; }
.settings-list i::after { content:""; position:absolute; left:4px; top:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0003; }
.settings-list input:checked + i { background:var(--primary); }
.settings-list input:checked + i::after { transform:translateX(16px); }
.settings-list input:focus-visible + i { outline:3px solid var(--primary); outline-offset:3px; }
.theme-setting { display:grid; gap:16px; padding:16px; }
.theme-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border-radius:var(--radius-control); background:var(--surface-muted); }
.theme-picker button { border:0; border-radius:var(--radius-control); background:transparent; font-size:12px; padding:4px; }
.theme-picker button[aria-pressed="true"] { background:var(--surface); color:var(--primary-dark); font-weight:700; }
.support-card { display:flex; align-items:center; gap:12px; min-height:72px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.support-card__icon { color:var(--primary); }
.support-card > span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:4px; }
.support-card small { color:var(--muted); font-size:12px; }
.chevron { color:var(--muted); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:8px; list-style:none; min-height:56px; padding:12px 16px; font-weight:600; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list details[open] summary svg { transform:rotate(180deg); }
.faq-list p { margin:0; padding:0 16px 16px; line-height:1.6; color:var(--muted); }
.build-label { display:block; margin-top:16px; text-align:center; font-size:11px; color:var(--muted); }
/* JS saves scroll and restores it once; sheets themselves use native scrolling. */
html.modal-open { overflow:hidden; }
body.modal-open { position:fixed; top:var(--scroll-lock-top); left:0; right:0; width:100%; overflow:hidden; }
.sheet-backdrop { position:fixed; z-index:38; inset:0; background:#0007; }
.bottom-sheet { position:fixed; z-index:40; left:50%; bottom:var(--keyboard-offset); transform:translateX(-50%); width:min(100%,var(--column)); max-height:calc(var(--visible-height) - var(--safe-top) - 8px); overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; padding:8px max(16px,var(--safe-right)) calc(16px + var(--safe-bottom)) max(16px,var(--safe-left)); border:1px solid var(--line); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; background:var(--surface); box-shadow:var(--shadow); scroll-padding-block:16px; }
.sheet-handle { width:32px; height:4px; margin:0 auto 16px; border-radius:var(--radius-control); background:var(--line); }
.sheet-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:16px; }
.sheet-heading h2 { font-size:22px; line-height:1.2; margin:0; }
.sheet-heading p { font-size:13px; margin:8px 0 0; color:var(--muted); }
.payment-choice { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; min-height:80px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-control); text-align:left; }
.payment-choice + .payment-choice { margin-top:8px; }
.payment-choice__icon { color:var(--primary); }
.payment-choice > span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }
.payment-choice small { color:var(--muted); font-size:12px; }
.payment-choice b { font-variant-numeric:tabular-nums; }
.amount-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.amount-grid button { border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); }
.amount-grid button[aria-pressed="true"] { border-color:var(--primary); background:var(--primary-soft); }
.amount-input { position:relative; display:block; margin-bottom:8px; }
.amount-input input { padding-right:40px; }
.amount-input em { position:absolute; right:16px; bottom:24px; font-style:normal; color:var(--muted); }
.payment-progress,.launch-screen,.telegram-gate { position:fixed; z-index:60; inset-inline:0; top:var(--visual-top); height:var(--visible-height); overflow-y:auto; background:var(--bg); padding:calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px); }
.payment-progress { display:flex; align-items:safe center; justify-content:center; }
.payment-progress > div { width:min(100%,360px); text-align:center; }
.payment-progress__icon { display:grid; place-items:center; width:64px; height:64px; border-radius:var(--radius-control); background:var(--primary-soft); margin:0 auto 24px; }
.payment-progress__icon i { width:24px; height:24px; border:3px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin 1s linear infinite; }
.payment-progress__icon.is-success::before { content:"✓"; color:var(--success); font-size:32px; }
.payment-progress__icon.is-error::before { content:"!"; color:var(--danger); font-size:32px; }
.payment-progress__icon.is-success i,.payment-progress__icon.is-error i { display:none; }
.payment-progress h2 { font-size:24px; margin:0; }
.payment-progress p { color:var(--muted); margin:16px 0 24px; }
.payment-progress .text-button { margin-top:8px; }
.launch-screen,.telegram-gate { display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:16px; text-align:center; }
.launch-screen strong { font-size:24px; }
.launch-screen.is-leaving { opacity:0; pointer-events:none; }
.telegram-gate h1 { margin:0; font-size:28px; }
.telegram-gate p { color:var(--muted); max-width:360px; margin:0; }
.telegram-gate .button { max-width:360px; }
.loader-dots { display:flex; gap:8px; }
.loader-dots i { width:8px; height:8px; background:var(--primary); border-radius:50%; animation:pulse 1s ease-in-out infinite alternate; }
.loader-dots i:nth-child(2) { animation-delay:.2s; }
.loader-dots i:nth-child(3) { animation-delay:.4s; }
.toast { position:fixed; z-index:80; top:calc(var(--visual-top) + var(--safe-top) + 8px); left:50%; transform:translateX(-50%); width:min(calc(100% - 32px),448px); display:flex; align-items:center; gap:8px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); box-shadow:var(--shadow); pointer-events:none; }
.toast > span { color:var(--success); font-weight:700; }
.toast.is-error > span { color:var(--danger); }
.toast p { margin:0; font-size:13px; }
button,a { transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.quick-action:active:not(:disabled),.home-purchase:active,.profile-chip:active { transform:scale(.98); }
.quick-action,.home-purchase,.profile-chip { transition:transform .18s ease,background-color .2s ease; }
.progress i { transition:width .45s ease; }
.bottom-sheet { animation:sheet-reveal .24s ease both; }
@keyframes page-reveal { from { opacity:0; } to { opacity:1; } }
@keyframes sheet-reveal { from { opacity:0; transform:translate(-50%,16px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { to { opacity:.25; } }
@media (max-width:359px) {
  .profile-chip__text { display:none; }
  .pages { padding-inline:max(8px,var(--safe-left)) max(8px,var(--safe-right)); }
  .page-heading h1 { font-size:24px; }
  .page-heading--home h1 { font-size:30px; }
  .plan-card__footer { flex-wrap:wrap; }
  .plan-card__footer .button { flex:1; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}