/* Оболочка личного кабинета — ОДНА на все его страницы: разделы кабинета,
   оплата, подключение (/connect), подарки (/gift), инструкция (/guide/apple).
   Раньше подключение и подарки открывались в своей шапке, и переход из
   кабинета выглядел переходом на другой сайт (замечание владельца 21.10.2026).

   Во всю ширину экрана: меню прижато к левому краю, содержимое занимает всё
   остальное (до 1560 px — дальше строки становятся нечитаемо длинными).
   На телефоне меню — панель вкладок снизу, сверху — строка с маркой.
   В Telegram (html.in-tg) — та же оболочка, без подвала.

   Цвета — только из brand.css (--b-*). */
:root{--sh-tap:68px}
/* Место под полосу прокрутки — всегда: страницы разной высоты, и без этого
   при переходе между ними всё смещалось вбок на её ширину. */
html{scrollbar-gutter:stable}

.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;display:flex;flex-direction:column;
  padding:24px 16px 20px;gap:4px;border-right:1px solid var(--b-line);
  background:var(--b-glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:20}
.side-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.015em;
  padding:4px 12px 22px;color:var(--b-ink);text-decoration:none}
.side-brand b{font-weight:700}
.side-brand .blogo{display:flex;color:var(--b-ink)}
.side-brand i{font-style:normal;color:var(--b-ink-3)}
.snav{display:flex;flex-direction:column;gap:2px;min-width:0}
.snav-item{position:relative;display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;
  color:var(--b-ink-2);font-weight:500;font-size:15px;cursor:pointer;text-decoration:none;
  transition:background .2s,color .2s,box-shadow .2s}
.snav-item:hover{background:color-mix(in srgb,var(--b-ink) 5%,transparent);color:var(--b-ink)}
.snav-item.on{color:var(--b-accent-ink);font-weight:600;background:var(--b-accent-soft);
  box-shadow:inset 0 0 0 1px var(--b-accent-line)}
.snav-item .ic{flex:0 0 auto;width:20px;height:20px}
.snav-item .badge{margin-left:auto;font-size:12px;font-weight:600;color:var(--b-ink-3);font-variant-numeric:tabular-nums}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:14px}
.snav-support{display:flex;align-items:center;gap:11px;height:46px;padding:0 14px;border-radius:12px;
  border:1px solid var(--b-line-2);color:var(--b-ink-2);font-weight:500;font-size:14.5px;text-decoration:none;
  transition:border-color .2s,color .2s}
.snav-support:hover{border-color:var(--b-ink-3);color:var(--b-ink)}
.snav-support .ic{width:18px;height:18px;flex:0 0 auto}
.side-tools{display:flex;align-items:center;gap:8px;padding:0 2px}
.icbtn,.lang,.logout{position:relative;display:inline-flex;align-items:center;justify-content:center;font:600 13px/1 Inter,system-ui,sans-serif;
  color:var(--b-ink-2);border:1px solid var(--b-line-2);border-radius:999px;background:var(--b-glass);cursor:pointer;
  text-decoration:none;transition:border-color .2s,color .2s}
.icbtn,.logout{width:36px;height:36px;flex:0 0 auto;padding:0}
.lang{height:36px;padding:0 13px;flex:0 0 auto}
.icbtn:hover,.lang:hover,.logout:hover{border-color:var(--b-ink-3);color:var(--b-ink)}
/* Палец шире значка: область нажатия 44×44, видимый размер прежний. */
.icbtn::after,.lang::after,.logout::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max(100%,44px);height:max(100%,44px)}
.icbtn svg{width:17px;height:17px;display:none}
.logout .ic,.logout svg{width:18px;height:18px}
/* Значок показывает выбранный режим темы, а не текущий цвет. */
:root[data-mode="system"] .icbtn .ic-sys,:root:not([data-mode]) .icbtn .ic-sys{display:block}
:root[data-mode="light"] .icbtn .ic-sun{display:block}
:root[data-mode="dark"] .icbtn .ic-moon{display:block}

.main{min-width:0;width:100%;max-width:1560px;justify-self:center;
  padding:32px clamp(20px,3.2vw,56px) 44px;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* Верхняя строка: на компьютере — только у страниц без меню (вход и т. п.),
   на телефоне — у всех. */
.tbar{display:none}

/* Подвал повторяет сайт: марка с обещанием, ссылки колонками, нижняя строка. */
.cfoot{margin-top:auto;padding-top:44px;border-top:1px solid var(--b-line);color:var(--b-ink-3);font-size:13.5px}
.cfoot a{text-decoration:none}
.cfoot__in{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;justify-content:space-between}
.cfoot__brand{max-width:280px;min-width:200px}
.cfoot__brand .side-brand{padding:0 0 10px;font-size:17px}
.cfoot__claim{margin:0;color:var(--b-ink-3);font-size:13.5px;line-height:1.6}
.cfoot__cols{display:flex;gap:clamp(24px,5vw,60px);flex-wrap:wrap}
.ft__col h3{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--b-ink-3)}
.ft__col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft__col a{color:var(--b-ink-2);transition:color .2s}
.ft__col a:hover{color:var(--b-ink)}
.cfoot__bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;padding-top:18px;
  border-top:1px solid var(--b-line);font-size:12.5px}

/* Страница без меню (вход, удалённый аккаунт): марка и кнопки сверху. */
.app--bare{grid-template-columns:minmax(0,1fr)}
.app--bare .side{display:none}
.app--bare .tbar{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.app--bare .tbar .side-brand{padding:0;margin-right:auto}

@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* Меню — панель вкладок снизу. Высота фиксирована: от неё считается отступ
     содержимого снизу (--sh-tap). */
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:40;flex-direction:row;
    border-right:0;border-top:1px solid var(--b-line);min-height:var(--sh-tap);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--b-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .side>.side-brand,.side-foot{display:none}
  .snav{flex-direction:row;width:100%;gap:2px}
  /* Ширина вкладки — от подписи: «Подключение» помещается и на 320. */
  .snav-item{flex:1 1 auto;min-width:0;height:auto;flex-direction:column;gap:4px;padding:8px 1px;
    font-size:10px;font-weight:600;letter-spacing:-.025em;text-align:center;border-radius:12px}
  .snav-item.on{background:none;box-shadow:none}
  .snav-item .ic{width:19px;height:19px}
  .snav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .snav-item .badge{display:none}
  /* В нижней панели — шесть вкладок не помещаются: «Подарки» живут на обзоре. */
  .snav-item.snav--wide{display:none}
  /* Засечка над выбранной вкладкой. */
  .snav-item::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:0;height:2.5px;
    border-radius:0 0 3px 3px;background:var(--b-accent);transition:width .24s cubic-bezier(.2,.7,.2,1)}
  .snav-item.on::before{width:20px}
  /* Шапка прибита к верху; черта — только когда под неё что-то заехало. */
  .tbar{display:flex;align-items:center;gap:10px;margin:0 -16px 14px;
    padding:calc(10px + env(safe-area-inset-top)) 16px 10px;position:sticky;top:0;z-index:30;
    background:color-mix(in srgb,var(--b-bg) 88%,transparent);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .2s}
  .tbar.stuck{border-bottom-color:var(--b-line)}
  .tbar .side-brand{display:flex;padding:0;margin-right:auto}
  .main{padding:0 16px calc(var(--sh-tap) + env(safe-area-inset-bottom) + 24px)}
  /* Страницы-шаги (оплата, подключение, подарки) — без нижней панели: у них
     свои кнопки внизу, а вернуться можно из шапки. */
  .app--sub .side{display:none}
  .app--sub .main,.app--bare .main{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
  .app--bare .tbar{margin:0 -16px 14px}
  /* Подвал на телефоне — только на страницах без меню. */
  .app:not(.app--bare) .main .cfoot{display:none}
  .cfoot{padding-top:34px;font-size:13px}
  .cfoot__in{gap:26px}
  .cfoot__bot{margin-top:22px}
}

/* Возврат в кабинет — у страниц-шагов на телефоне, в шапке. */
.tback{display:none}
@media(max-width:900px){
  .app--sub .tback{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px 0 8px;border-radius:999px;
    border:1px solid var(--b-line-2);color:var(--b-ink-2);font:600 13px/1 Inter,system-ui,sans-serif;text-decoration:none;
    background:var(--b-glass)}
  .app--sub .tback svg{width:16px;height:16px}
  .app--sub .tbar .side-brand{display:none}
  .app--sub .tbar .tback{margin-right:auto}
}

/* В Telegram оболочка та же, что на сайте: меню снизу, марка сверху. Раньше
   её прятали у подключения и подарков — а кабинет показывал, и переход из
   кабинета в подключение выглядел переходом в другое приложение (23.10.2026).
   Без подвала: у мини-приложения нет «сайта», ссылки на документы — в боте. */
html.in-tg .cfoot{display:none!important}