/* ===== UNRL · Layout shell (последний слой, загружается после design.css и space.css) =====
   Страница — единый экран: шапка, содержимое и вкладки делят высоту окна, документ не прокручивается.
   Порядок адаптации к высоте задаёт fit.js: плотность (data-density) → масштаб (--fit-zoom) →
   прокрутка внутри контейнера без видимой полосы (fit-scroll, только в крайнем случае). */
html.app {
  --app-h: 100vh;
  --gutter: clamp(14px, 4vw, 32px);
  --stack: clamp(10px, 1.8vh, 18px);
  --header-h: 52px;
  --nav-row: 58px;
  --shell-max: 560px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  height: var(--app-h);
  overflow: hidden;
  overscroll-behavior: none;
  scroll-behavior: auto;
  scroll-padding-top: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100dvh) { html.app { --app-h: 100dvh; } }
html.app[style*="--app-h"] { height: var(--app-h); }
html.app body {
  height: 100%;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
}
html.app, html.app body { scrollbar-width: none; }
html.app ::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- Контейнер страницы: вертикальный стек с центровкой по свободной высоте */
html.app body > .container {
  flex: 1 1 0;
  min-height: 0 !important;
  height: auto;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto !important;
  padding: calc(var(--safe-top, 0px) + 6px) var(--gutter) var(--stack) !important;
  display: flex;
  flex-direction: column;
  gap: var(--stack);
  overflow-x: hidden;
  overflow-y: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
html.app.fit-scroll body > .container { overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.app body > .container > * { margin: 0 !important; flex: none; min-width: 0; }
/* Невидимые распорки делят свободное место поровну сверху и снизу содержимого. */
html.app body > .container::before,
html.app body > .container::after { content: ''; flex: 1 0 0; min-height: 0; order: 0; }
html.app body > .container::before { order: -1; }
html.app body > .container > .header,
html.app body > .container > .review-marker { order: -2; }
html.app body > .container > .review-marker:empty { display: none; }

/* ---------- Шапка: обычный ряд; закрепляется только в режиме прокрутки */
html.app body > .container > .header {
  position: relative;
  top: auto;
  z-index: 40;
  height: var(--header-h);
  min-height: 0;
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.app.fit-scroll body > .container > .header {
  position: sticky;
  top: 0;
  background: #05060df2;
  box-shadow: 0 0 0 100vmax #05060df2;
  clip-path: inset(0 -100vmax);
}
html.app .header .logo-icon { width: 30px; height: 30px; }
html.app .header .logo-icon svg { width: 28px; height: 28px; }
html.app .header .logo-text { font-size: 21px; }
html.app .header-actions { min-width: 0; }
html.app .header-actions .user-chip { min-height: 38px; max-width: 160px; }
html.app .review-marker { font-size: 11px; line-height: 1; margin-top: calc(var(--stack) * -0.5) !important; }

/* ---------- Планета: один эталонный рисунок 240×170, размер задаётся масштабом, а не сжатием колец */
html.app .orbit-art { width: 240px !important; height: 170px !important; margin: 0 auto !important; transform: none !important; zoom: var(--orbit-scale, 1); flex: none; }
html.app .orbit-art .orbit-ring { width: 228px; height: 88px; margin: -44px 0 0 -114px; display: block; }
html.app .orbit-art .orbit-ring.second { width: 180px; height: 124px; margin: -62px 0 0 -90px; }
html.app .orbit-art .orbit-ring.third { width: 236px; height: 138px; margin: -69px 0 0 -118px; }
html.app .orbit-art .orbit-core { width: 98px; height: 98px; margin: -49px 0 0 -49px; }
html.app .orbit-art .orbit-letter { font-size: 44px; }
html.app .orbit-art .orbit-dot { left: 21px; top: 104px; width: 7px; height: 7px; }
html.app .orbit-art .orbit-star { right: 35px; top: 30px; }
html.app .hero .orbit-art { --orbit-scale: .78; }
html.app .profile-hero .orbit-art { --orbit-scale: .6; }
@media (min-width: 900px), (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  html.app .hero .orbit-art { --orbit-scale: 1.05; }
  html.app .profile-hero .orbit-art { --orbit-scale: .85; }
}
@media (max-height: 760px) {
  html.app .hero .orbit-art { --orbit-scale: .66; }
  html.app .profile-hero .orbit-art { --orbit-scale: .5; }
}
html.app[data-density] .hero .orbit-art { --orbit-scale: .55; }
html.app[data-density] .profile-hero .orbit-art { --orbit-scale: .42; }
html.app[data-density="2"] .profile-hero .orbit-art { --orbit-scale: .3; }

/* ---------- Масштабируемая область */
html.app body > .container > :is(#selection-screen, .profile-layout, .auth-layout, #wizard-screen) {
  zoom: var(--fit-zoom, 1);
  width: 100%;
}
html.app body > .container > #wizard-screen { width: min(100%, 560px); align-self: center; }

/* ---------- Вкладки (телефон/планшет): полноценная нижняя строка, а не слой поверх содержимого */
html.app body > .bottom-nav {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: none;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px max(10px, calc((100% - 480px) / 2)) calc(6px + var(--safe-bottom, 0px)) !important;
  border-radius: 16px 16px 0 0 !important;
  border-width: 1px 0 0 !important;
  background: #070a1cf2 !important;
  box-shadow: 0 -10px 30px #0007 !important;
  z-index: 30;
}
html.app body > .bottom-nav .nav-item { min-height: calc(var(--nav-row) - 12px) !important; border-radius: 12px; font-size: 11px; }
html.app #checkout-bar { display: none !important; }
html.app body.has-checkout-bar .bottom-nav { border-radius: 16px 16px 0 0 !important; }
html.app #toast-modal { bottom: calc(var(--nav-row) + var(--safe-bottom, 0px) + 14px); }
html.app body:has(:is(input, textarea, select):focus) .bottom-nav { display: grid !important; }

/* ---------- Мобильная раскладка содержимого */
@media (max-width: 899px) {
  html.app .hero { padding: 0 !important; }
  html.app .hero h1 { margin-block: 8px !important; font-size: clamp(30px, 8.6vw, 44px); }
  html.app #selection-screen { display: flex; flex-direction: column; gap: var(--stack); }
  html.app #selection-screen > * { margin: 0 !important; }
  html.app #selection-screen > #divider-box { display: none !important; }
  html.app [data-page=index] #plans { display: none; }
  html.app [data-page=plans] #plans { display: flex; flex-direction: column; gap: 12px; }
  html.app #plans > *, html.app .plans-choice > * { margin: 0 !important; }
  html.app .plans-choice { display: flex; flex-direction: column; gap: 12px; }
  html.app .checkout-column { display: flex; flex-direction: column; gap: 10px; }
  html.app .checkout-column > * { margin: 0 !important; }
  html.app [data-page=plans] .tariff-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.app [data-page=index] .site-footer { padding-top: 12px; }
  html.app .site-footer { flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  html.app .site-footer .support-link { margin: 0; }

  html.app .profile-layout:not(.hidden) { display: flex !important; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 12px; max-width: none; }
  html.app .profile-layout .profile-hero { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
  html.app .profile-layout .profile-hero h1 { text-align: center; align-self: center; font-size: clamp(24px, 6.4vw, 30px); }
  html.app .profile-layout .profile-id-button { align-self: center; justify-content: center; margin: 0; padding: 4px 12px; min-height: 36px; }
  html.app .profile-side, html.app .profile-main { display: contents; }
  html.app .profile-layout .profile-hero { order: 1; }
  html.app .profile-main > * { order: 2; }
  html.app .profile-layout .support-card { order: 3; }
  html.app .profile-layout .account-exit { order: 4; }
  html.app .profile-layout > *, html.app .profile-main > *, html.app .profile-side > * { margin: 0 !important; }
  html.app #profile-content { display: flex; flex-direction: column; gap: 12px; }
  html.app #profile-content.hidden { display: none !important; }
  html.app #profile-content > * { margin: 0 !important; }
  html.app .profile-layout .account-exit { min-height: 40px; padding-block: 6px; }
}

/* ---------- Компьютер, широкий планшет и телефон в горизонтальной ориентации: две колонки, вкладки в шапке */
@media (min-width: 900px), (min-width: 640px) and (max-height: 560px) and (orientation: landscape) {
  html.app { --shell-max: 1180px; --header-h: 64px; --stack: clamp(14px, 2.4vh, 28px); }
  html.app body > .container { padding-top: calc(var(--safe-top, 0px) + 10px) !important; padding-bottom: clamp(14px, 2.4vh, 28px) !important; }
  html.app body > .container > .header { border-bottom: 1px solid var(--line); }
  html.app body > .bottom-nav {
    position: fixed !important;
    top: calc(var(--safe-top, 0px) + 10px + (var(--header-h) - 52px) / 2) !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(400px, calc(100% - 520px)) !important;
    min-width: 340px;
    padding: 4px !important;
    border-radius: 16px !important;
    border-width: 1px !important;
    background: #0b0f2ae6 !important;
    box-shadow: none !important;
    gap: 2px;
    z-index: 45;
  }
  html.app body > .bottom-nav .nav-item { min-height: 42px !important; flex-direction: row; gap: 8px; font-size: 14px; border-radius: 12px; }
  html.app #toast-modal { bottom: 24px; }
  /* Шапка оставляет середину вкладкам: логотип и профиль никогда не заходят под них. */
  html.app .header { padding-inline: 0; }
  html.app .header .logo-box, html.app .header-actions { max-width: calc(50% - 210px); }

  html.app [data-page=index] #selection-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr);
    grid-auto-rows: auto;
    gap: var(--stack) clamp(32px, 5vw, 72px);
    align-items: center;
    padding: 0 clamp(0px, 2vw, 20px);
  }
  html.app [data-page=index] #selection-screen > * { margin: 0 !important; }
  html.app [data-page=index] .hero { grid-column: 1; grid-row: 1 / span 3; padding: 0 !important; }
  html.app [data-page=index] .hero h1 { font-size: clamp(40px, 4.4vw, 56px); margin-block: 10px !important; }
  html.app [data-page=index] :is(#trial-card-box, #home-account) { grid-column: 2; grid-row: 1 / span 3; padding: clamp(22px, 3vh, 32px); }
  html.app [data-page=index] #status-error { grid-column: 1 / -1; }
  html.app [data-page=index] #divider-box { display: none !important; }
  html.app [data-page=index] .site-footer { grid-column: 1 / -1; grid-row: 4; }

  html.app [data-page=plans] #selection-screen { display: flex; flex-direction: column; gap: var(--stack); }
  html.app [data-page=plans] #selection-screen > * { margin: 0 !important; }
  html.app [data-page=plans] #plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    grid-template-areas: "head head" "note note" "choice checkout";
    gap: 14px clamp(24px, 3vw, 40px);
    align-items: start;
  }
  html.app [data-page=plans] #plans > * { margin: 0 !important; }
  html.app [data-page=plans] .section-heading { grid-area: head; }
  html.app [data-page=plans] .section-heading h2 { font-size: clamp(26px, 2.6vw, 34px); }
  html.app [data-page=plans] .payment-notice { grid-area: note; font-size: 13px; }
  html.app [data-page=plans] .plans-choice { grid-area: choice; display: flex; flex-direction: column; gap: 12px; }
  html.app [data-page=plans] .plans-choice > * { margin: 0 !important; }
  html.app [data-page=plans] .checkout-column { grid-area: checkout; position: static; display: flex; flex-direction: column; gap: 12px; }
  html.app [data-page=plans] .checkout-column > * { margin: 0 !important; }
  html.app [data-page=plans] .tariff-card { min-height: 0; padding: 16px 18px; }

  html.app body > .container > .profile-layout:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 18px clamp(28px, 4vw, 56px);
    align-items: center;
    max-width: 1000px;
    margin-inline: auto !important;
  }
  html.app .profile-layout > * { width: auto; }
  html.app .profile-layout > .profile-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: static; }
  html.app .profile-layout > .profile-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  html.app .profile-side > *, html.app .profile-main > * { margin: 0 !important; }
  html.app .profile-layout .profile-hero { padding: 0 !important; margin: 0 !important; text-align: center; display: flex; flex-direction: column; align-items: center; }
  html.app .profile-layout .profile-hero h1 { font-size: clamp(26px, 2.6vw, 34px); }
  html.app #profile-content { display: flex; flex-direction: column; gap: 12px; }
  html.app #profile-content.hidden { display: none !important; }
  html.app #profile-content > * { margin: 0 !important; }

  html.app body > .container > #wizard-screen { width: min(100%, 760px); }
  html.app #wizard-screen .app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.app .auth-layout { max-width: 480px; margin-inline: auto !important; }
}

/* ---------- Плотность 1: компактнее отступы */
html.app[data-density="1"] { --stack: clamp(8px, 1.3vh, 14px); }
html.app[data-density] .glass.trial-card, html.app[data-density] .home-account, html.app[data-density] .status-card,
html.app[data-density] .plans-checkout, html.app[data-density] .wizard-card, html.app[data-density] .auth-card { padding: 14px 16px !important; }
html.app[data-density] .tariff-card { padding-block: 10px !important; }
html.app[data-density] .trial-header { margin-bottom: 10px; }
html.app[data-density] .home-account p { margin: 6px 0 12px; }
html.app[data-density] .setup-progress { margin-bottom: 12px; }
html.app[data-density] .setup-description { margin: 8px 0 12px; }
html.app[data-density] .setup-devices button { padding-block: 12px; }
html.app[data-density] .app-list { gap: 8px; margin-bottom: 14px; }
html.app[data-density] .setup-client .app-item { padding-block: 10px; }
html.app[data-density] .btn-primary { min-height: 46px; padding-block: 10px; }
html.app[data-density] .btn-secondary { min-height: 42px; padding-block: 8px; }
html.app[data-density] .site-footer { padding-top: 10px; }

/* ---------- Плотность 2: убираем декоративное, оставляем всё содержательное */
html.app[data-density="2"] { --stack: 8px; --header-h: 46px; }
html.app[data-density="2"] .hero .orbit-art,
html.app[data-density="2"] .trial-gift,
html.app[data-density="2"] .wizard-heading { display: none !important; }
html.app[data-density="2"] .hero h1 { margin-block: 4px !important; }
html.app[data-density="2"] .hero-description { line-height: 1.45; }
html.app[data-density="2"] .site-footer { padding-top: 8px; font-size: 11px; }
html.app[data-density="2"] .terms-text { margin-top: 8px; line-height: 1.35; }
html.app[data-density="2"] .setup-hint { margin-top: 8px; line-height: 1.4; }
html.app[data-density="2"] .setup-ready { width: 40px; height: 40px; font-size: 21px; margin-bottom: 8px; }
html.app[data-density="2"] .tariff-warning { padding: 10px 12px; }

/* ---------- Плавность: появление без скачков, только прозрачность (не влияет на раскладку) */
@keyframes unrl-fade { from { opacity: 0; } to { opacity: 1; } }
html.app :is(#trial-card-box, #home-account, #tariff-warning, #summary-adjustment, #claim-trial-box, #empty-state,
  #profile-error, #status-error, #profile-content, .ref-body, #summary-standard-price, .account-email):not(.hidden) {
  animation: unrl-fade .32s var(--ease-out) both;
}
html.app [data-setup-step]:not(.hidden) { animation: unrl-fade .3s var(--ease-out) both; }
html.app .hero > * { animation: unrl-fade .5s var(--ease-out) both; }
html.app body.client-navigation :is(#profile-content, .profile-layout, #selection-screen) { animation: none; }
/* Экран загрузки исчезает плавно, а не пропадает в один кадр. */
html.app #app-init-loader { transition: opacity .35s var(--ease-out), visibility 0s linear 0s; }
html.app #app-init-loader.hidden { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease-out), visibility 0s linear .35s; }
/* Пока подгонка не выполнена (первые миллисекунды), содержимое не показываем; через 1.5 с — показываем в любом случае. */
@keyframes unrl-reveal { to { visibility: visible; } }
html.app:not(.fit-ready) body > .container > :not(.header) { visibility: hidden; animation: unrl-reveal 0s linear 1.5s forwards; }
/* Заглушки данных профиля: те же размеры, что у итогового содержимого, — ничего не «превращается». */
html.app .is-pending { color: transparent !important; -webkit-text-fill-color: transparent; border-radius: 8px;
  background: linear-gradient(90deg, #ffffff08, #ffffff14, #ffffff08) 0 0 / 200% 100% !important; animation: unrl-pending 1.4s ease-in-out infinite; }
html.app .is-pending * { visibility: hidden; }
html.app .expiry-pill.is-pending { min-width: 120px; }
html.app .progress-fill.is-pending { animation: none; background: transparent !important; box-shadow: none; }
html.app .progress-fill.is-pending::after { display: none; }
@keyframes unrl-pending { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
/* Стабильная ширина изменяющихся цифр (цены, трафик) */
html.app :is(#summary-total-price, #summary-period-calc, #summary-monthly-rate, [data-tariff-price], #traffic-used, .expiry-pill, #progress-percent) { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  html.app *, html.app *::before, html.app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Приглашение друга: на плотных экранах кнопки в одну строку */
html.app[data-density] .ref-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 14px; }
html.app[data-density] .ref-body > p { grid-column: 1 / -1; margin: 0; }
html.app[data-density] .ref-body > button { margin: 0 !important; min-height: 40px; font-size: 13px; padding: 8px; }
html.app[data-density] .ref-body > [data-referral-claim] { grid-column: 1 / -1; }
html.app[data-density] .referral-card summary { padding-block: 10px; }

/* ---------- Плотность 2 для мастера и профиля на маленьких экранах */
html.app[data-density="2"] .setup-client .app-item { padding: 6px 8px; gap: 8px; }
html.app[data-density="2"] .setup-client .download-btn { width: 36px; height: 36px; border-radius: 12px; }
html.app[data-density="2"] .setup-client .client-initial { width: 24px; height: 24px; font-size: 17px; }
html.app[data-density="2"] .setup-client strong { font-size: 15px; }
html.app[data-density="2"] .setup-client small { margin-top: 1px; }
html.app[data-density="2"] .app-list { gap: 6px; margin-bottom: 10px; }
html.app[data-density="2"] .setup-top { margin-bottom: 6px; }
html.app[data-density="2"] .setup-progress li { padding-block: 10px 6px; }
html.app[data-density="2"] [data-setup-step] h2 { font-size: 21px; }
html.app[data-density="2"] .btn-back { min-height: 34px; padding-block: 5px; }
@media (max-width: 899px) {
  html.app[data-density="2"] .profile-layout .profile-hero .orbit-art { display: none !important; }
}
/* Телефон в горизонтальной ориентации: шапка ниже */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 640px) {
  html.app { --header-h: 48px; --stack: 8px; }
  html.app body > .bottom-nav { top: calc(var(--safe-top, 0px) + 10px + (var(--header-h) - 50px) / 2) !important; }
  html.app body > .bottom-nav .nav-item { min-height: 40px !important; }
}
/* «Шаг N из 3» уже показан в верхней строке мастера — на тесных экранах полосу шагов убираем. */
html.app[data-density="2"] .setup-progress { display: none; }

/* ---------- Документы (terms, privacy, contacts): длинный текст прокручивается внутри оболочки */
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container {
  display: block;
  padding-top: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container::before,
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container::after { content: none; }
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container > * + * { margin-top: var(--stack) !important; }
/* Шапка — во всю ширину оболочки, как на остальных страницах; текст — узкой колонкой. */
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container > :not(.header) { max-width: 760px; margin-inline: auto !important; }
/* Шапка документа остаётся на месте при прокрутке, на десктопе вкладки не наезжают на текст. */
html.app body:is([data-page=terms], [data-page=privacy], [data-page=contacts]) > .container > .header {
  position: sticky;
  top: 0;
  box-sizing: content-box;
  padding-top: calc(var(--safe-top, 0px) + 6px) !important;
  border-bottom: 0 !important;
  background: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* При переходах внутри приложения hero не проигрывает вступление заново. */
html.in-app-nav .hero > * { animation: none; }

/* Первый показ: содержимое появляется вместе со звёздным фоном, а не раньше него.
   Если space.js не загрузится, страница всё равно откроется через секунду. */
html.app:not(.space-ready) body > :is(.container, .bottom-nav) { opacity: 0; animation: unrl-reveal 0s 1s forwards; }
html.app.space-ready body > :is(.container, .bottom-nav) { transition: opacity .2s; }
@keyframes unrl-reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.app:not(.space-ready) body > :is(.container, .bottom-nav) { opacity: 1; } }

/* Подвал: ссылки и «UNRL © 2026» в одной строке по центру. */
html.app .site-footer { flex-direction: row; justify-content: center; }
html.app .site-footer .footer-meta { justify-content: center; font-size: 12px; }