/* Батон VPN — интерфейс по эталону. Грузится последним (кабинет, Mini App, PWA, сайт).
   Композиция, размеры и шрифт — с эталонных экранов; цвета — гамма логотипа Батона.
   Светлая и тёмная тема — одни компоненты, разные токены. */
@font-face { font-family: Roboto; font-weight: 400 800; font-display: swap; src: url("fonts/roboto-latin-400-800.woff2") format("woff2"); unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Roboto; font-weight: 400 800; font-display: swap; src: url("fonts/roboto-cyrillic-400-800.woff2") format("woff2"); unicode-range: U+0400-052F, U+20BD; }

:root,
html body,
html body[data-mode],
html body[data-mode][data-accent] {
  --font: Roboto, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --refBg: #ffffff;
  --refGlow: rgb(255 150 60 / 0.2);
  --refGray: #f3f2f1;
  --refLine: #d9d5d1;
  --refInk: #141414;
  --refMuted: #77706a;
  --refCard: #ffffff;
  --refCardLine: #f0ece8;
  --refDark: #0d0d0e;
  --refDarkInk: #ffffff;
  --refCardTop: linear-gradient(135deg, #ff8a24 0%, #f26b00 55%, #e85d02 100%);
  --refTint: #fff4ea;
  --refStars: linear-gradient(90deg, #5b8cff 0%, #a35cff 60%, #d94cf5 100%);
  --refR: 26px;
  --refRSmall: 22px;
  --refShadow: 0 10px 30px rgb(40 20 0 / 0.07);
  --refNavShadow: 0 14px 40px rgb(40 20 0 / 0.14);
  --refLinesOpacity: 0.28;
  --refDarkLines: 0.22;
  --refPillBg: rgb(255 255 255 / 0.24);
  --refWhiteSoft: rgb(255 255 255 / 0.9);
  --refCircle: #ffffff;
  --refCircleInk: #141414;
  --refToggleOff: #ecebea;
  --navBg: rgb(255 255 255 / 0.96);
  --card: #ffffff;
  --markHero: 0.95;
  --markSoft: 0.35;
}
html body[data-mode="dark"],
html body[data-mode="dark"][data-accent] {
  --outer: #0c0c0d;
  --bg: #0c0c0d;
  --side: #121214;
  --surface: #18181a;
  --raised: #222225;
  --field: #18181a;
  --text: #f4f4f4;
  --muted: #9d9da2;
  --subtle: #6e6e74;
  --white: #f4f4f4;
  --whiteInk: #0c0c0d;
  --card: #18181a;
  --cardLine: #232326;
  --fieldLine: #2c2c30;
  --accentSoft: #34200f;
  --accentText: #ff9a3c;
  --shadow: 0 24px 60px rgb(0 0 0 / 0.4);
  --shadowCard: 0 12px 34px rgb(0 0 0 / 0.3);
  --shadowNav: 0 18px 50px rgb(0 0 0 / 0.5);
  --refBg: #0c0c0d;
  --refGlow: rgb(255 120 30 / 0.12);
  --refGray: #18181a;
  --refLine: #3a3a3e;
  --refInk: #f4f4f4;
  --refMuted: #9d9da2;
  --refCard: #18181a;
  --refCardLine: #232326;
  --refDark: #18181a;
  --refTint: #1d140d;
  --refShadow: 0 10px 30px rgb(0 0 0 / 0.35);
  --refNavShadow: 0 14px 40px rgb(0 0 0 / 0.55);
  --refLinesOpacity: 0.1;
  --refCircle: #ffffff;
  --refCircleInk: #141414;
  --refToggleOff: #2c2c30;
  --navBg: rgb(24 24 26 / 0.96);
  color-scheme: dark;
}

/* ── База: шрифт эталона, белый (или чёрный) фон, свечение сверху, тонкие волны снизу ── */
html, body, button, input, select, textarea { font-family: var(--font); }
html, body { background: var(--refBg); color: var(--refInk); }
body::after { background: radial-gradient(70vmax 40vmax at 50% -6%, var(--refGlow), transparent 62%); }
body::before {
  background: url(assets/lines.svg) center bottom / cover no-repeat;
  opacity: var(--refLinesOpacity);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 60%);
}
body[data-mode="dark"]::before { filter: invert(1); }

/* ── Шапка: имя и аватар по центру ── */
.bt-top { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 26px; }
.bt-name { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--refInk); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-ava.avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; font-size: 17px; box-shadow: 0 6px 16px rgb(40 20 0 / 0.14); }
.bt-head { margin: 0 0 18px; }
.bt-head h1, .bt-title { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--refInk); margin: 0 0 20px; }
.bt-head p { margin-top: 8px; font-size: 15px; color: var(--refMuted); }
body[data-surface="telegram"] .pagehead, body[data-surface="pwa"] .pagehead { display: none; }
.bt-sec { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--refInk); margin: 30px 0 14px; }

/* ── Карточка бренда: оранжевый верх со знаком + серый низ ── */
.bt-card { position: relative; border-radius: var(--refR); overflow: hidden; background: var(--refGray); margin-bottom: 30px; }
.bt-card-top {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: start; align-content: start;
  min-height: 178px; padding: 22px 24px; background: var(--refCardTop); color: #fff;
}
.bt-card-top::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 230px; height: 230px; right: -58px; top: -34px;
  background: url(assets/mark-glass.webp) center / contain no-repeat; opacity: var(--markHero);
}
.bt-card-label { font-size: 15px; line-height: 1.3; text-transform: lowercase; color: var(--refWhiteSoft); max-width: 62%; }
.bt-card-title { margin: auto 0 0; padding-top: 34px; font-size: 28px; line-height: 1.1; font-weight: 400; color: #fff; max-width: 66%; }
.bt-card-pill { position: relative; z-index: 1; margin-top: 12px; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: var(--pill); background: var(--refPillBg); font-size: 13px; font-weight: 500; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bt-card-pill::first-letter { text-transform: lowercase; }
.bt-card-solo .bt-card-top { min-height: 0; padding-bottom: 20px; }
.bt-card-solo .bt-card-title { padding-top: 22px; font-size: 34px; }
.bt-card-solo { margin-bottom: 24px; }
.bt-card-bottom { padding: 22px 24px 24px; }
.bt-card-bottom h3 { font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--refInk); }
.bt-card-bottom > p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--refMuted); }
.bt-card-bottom .bt-btn { margin-top: 18px; }
.bt-card-bottom .bt-btn + .bt-btn { margin-top: 10px; }

/* Шаги: три круга на линии */
.bt-stepper { position: relative; display: flex; justify-content: space-between; margin-top: 22px; }
.bt-stepper::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; height: 2px; background: var(--refLine); transform: translateY(-50%); }
.bt-stepper::after { content: ""; position: absolute; left: 20px; top: 50%; height: 2px; width: calc((100% - 40px) * var(--p)); background: var(--accent); transform: translateY(-50%); }
.bt-stepper i { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--refGray); box-shadow: inset 0 0 0 2px var(--refLine); color: #fff; }
.bt-stepper i.now { box-shadow: inset 0 0 0 2.5px var(--accent); }
.bt-stepper i.now::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.bt-stepper i.done { background: var(--accent); box-shadow: none; }
.bt-stepper i svg { width: 18px; height: 18px; }

/* Подключение (PWA) в сером низе карточки */
.bt-conn { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-conn.on h3 { color: var(--ok); }
.bt-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--accentText); }
.bt-mini svg { width: 16px; height: 16px; }
.bt-app { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; font-size: 14px; color: var(--refMuted); }
.bt-app b { margin-inline-start: auto; color: var(--refInk); font-weight: 600; }
.bt-app svg { width: 16px; height: 16px; }

/* ── Кнопки: пилюля с белой капсулой справа; контурная с чёрным кругом ── */
.bt-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 66px; padding: 9px 9px 9px 28px; border-radius: var(--pill);
  background: var(--gradBtn); color: #fff; font-size: 17px; font-weight: 500; text-align: start;
  box-shadow: var(--shadowAccent); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-btn > span { flex: 1; min-width: 0; }
.bt-btn.center > span { text-align: center; padding-inline-start: 48px; }
.bt-btn > em { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; height: 48px; padding: 0 16px; border-radius: var(--pill); background: #fff; color: #141414; font-style: normal; font-size: 17px; font-weight: 500; }
.bt-btn > em svg { width: 20px; height: 20px; color: #141414; }
.bt-btn:active { transform: scale(0.985); }
.bt-btn[disabled] { opacity: 0.6; }
.bt-btn.line { background: transparent; color: var(--refInk); box-shadow: inset 0 0 0 1.5px var(--refInk); }
.bt-btn.line > em { width: 48px; padding: 0; background: var(--refInk); }
.bt-btn.line > em svg { color: var(--refBg); }
.bt-btn.stars { background: var(--refStars); box-shadow: 0 14px 30px -12px rgb(120 80 255 / 0.55); }
.bt-btn.stars > em svg { color: #f5b400; fill: #f5b400; }
#content > .bt-btn, .bt-promo .bt-btn { margin-top: 12px; }
.bt-promo { margin-top: 18px; }

/* ── Переключатели-пилюли (Месяц / Год, вкладки магазина и входа) ── */
.bt-seg { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: var(--pill); background: var(--refCard); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); }
.bt-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--pill); font-size: 16px; font-weight: 500; color: var(--refInk); transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.bt-seg button.on { color: var(--accent); background: var(--refCard); box-shadow: 0 6px 16px rgb(40 20 0 / 0.12); }
body[data-mode="dark"] .bt-seg button.on { background: var(--raised); box-shadow: none; }
.bt-seg small { padding: 2px 7px; border-radius: var(--pill); background: var(--accentSoft); color: var(--accentText); font-size: 12px; font-weight: 500; }
.bt-shop-tabs { display: flex; width: 100%; margin: 0 0 22px; }
.bt-shop-tabs button { flex: 1; height: 48px; font-size: 17px; }

/* ── Тарифы ── */
.bt-plans-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.bt-plans-head h2 { font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; color: var(--refInk); }
.bt-plans-head h2:not(:only-child) { max-width: 50%; }
.bt-plans { display: grid; gap: 12px; margin-bottom: 28px; }
.bt-prow {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 10px 22px 10px 14px; border-radius: var(--refRSmall);
  background: var(--refCard); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); text-align: start; color: var(--refInk);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-prow:active { transform: scale(0.99); }
.bt-ptile { width: 92px; height: 92px; margin: -18px 0 -18px -20px; object-fit: contain; filter: drop-shadow(0 10px 12px rgb(150 50 0 / 0.22)); }
.bt-prow-t { display: grid; gap: 4px; min-width: 0; }
.bt-prow-t b { font-size: 17px; font-weight: 500; }
.bt-prow-t small { font-size: 13px; color: var(--refMuted); }
.bt-prow-p { display: grid; justify-items: end; text-align: end; }
.bt-prow-p b { font-size: 24px; font-weight: 400; white-space: nowrap; color: var(--refInk); }
.bt-prow-p b span { font-size: inherit; }
.bt-prow-p s { font-size: 12px; color: var(--refMuted); }
.bt-pcard {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 22px; border-radius: var(--refR); background: var(--refTint); box-shadow: inset 0 0 0 1.5px var(--accent);
  animation: bt-open 0.3s ease both;
}
.bt-pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/lines.svg) center / cover no-repeat; opacity: 0.12; }
body[data-mode="dark"] .bt-pcard::before { filter: invert(1); opacity: 0.08; }
@keyframes bt-open { from { opacity: 0; transform: translateY(-4px); } }
.bt-pcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bt-pcard-name { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: 17px; font-weight: 500; }
.bt-feat { list-style: none; display: grid; gap: 14px; margin: 20px 0 22px; padding: 0; }
.bt-feat li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--refInk); }
.bt-feat svg { width: 20px; height: 20px; flex: none; color: var(--refInk); }
.bt-pcard .bt-btn + .bt-btn { margin-top: 12px; }

/* ── Устройства ── */
.bt-devhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.bt-devhead h2 { font-size: 28px; line-height: 1.1; font-weight: 500; color: var(--refInk); max-width: 62%; }
.bt-count { font-size: 44px; font-weight: 400; color: var(--refMuted); }
.bt-count b { font-weight: 400; color: var(--refInk); }
.bt-empty { margin: 0 0 22px; font-size: 16px; color: var(--refMuted); }
.bt-list { margin-bottom: 20px; }

/* ── Профиль: никнейм, большие карточки, строки с кругом-стрелкой ── */
.bt-nick { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px; margin-bottom: 16px; border-radius: var(--refR); background: var(--refCard); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); }
.bt-nick > span { display: grid; gap: 4px; min-width: 0; }
.bt-nick small { font-size: 15px; color: var(--refMuted); }
.bt-nick b { font-size: 19px; font-weight: 500; color: var(--refInk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-nick em { font-style: normal; font-size: 13px; color: var(--refMuted); }
.bt-nick-btn { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: var(--shadowAccent); }
.bt-nick-btn svg { width: 26px; height: 26px; }
.bt-big {
  position: relative; isolation: isolate; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 150px; padding: 26px 26px 24px; margin-bottom: 16px; border-radius: var(--refR); overflow: hidden; text-align: start; color: #fff;
}
.bt-big.dark { background: var(--refDark); }
.bt-big.brand { background: var(--refCardTop); overflow: visible; margin-top: 22px; }
.bt-big::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/lines.svg) center / cover no-repeat; filter: invert(1); opacity: 0.16; }
.bt-big-t { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 64%; }
.bt-big-t b { font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
.bt-big-t small { font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / 0.6); }
.bt-big > i { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--refCircle); color: var(--refCircleInk); }
body[data-mode="dark"] .bt-big.dark > i { background: var(--raised); color: #fff; }
.bt-big > i svg { width: 20px; height: 20px; }
.bt-big-img { position: absolute; z-index: 1; pointer-events: none; width: 210px; height: 210px; right: 40px; top: -34px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 22px 28px rgb(120 40 0 / 0.35)); }
.bt-big-note { display: block; margin-top: 4px; padding: 14px 16px; border-radius: 20px; background: #fff; color: #3a3632; font-size: 14px; line-height: 1.4; font-weight: 400; max-width: 220px; }
.bt-big-help { min-height: 190px; align-items: flex-end; margin-top: 34px; }
.bt-big-help .bt-big-img { right: 74px; top: -50px; width: 220px; height: 220px; }
.bt-big-help > i { align-self: flex-start; }
.bt-nrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  min-height: 74px; padding: 14px 18px 14px 24px; margin-bottom: 10px; border-radius: var(--refRSmall);
  background: var(--refCard); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); text-align: start; color: var(--refInk);
}
.bt-nrow > span { display: grid; gap: 3px; min-width: 0; }
.bt-nrow b { font-size: 17px; font-weight: 500; }
.bt-nrow small { font-size: 13px; color: var(--refMuted); }
.bt-nrow > i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--refInk); color: var(--refInk); }
.bt-nrow > i svg { width: 17px; height: 17px; }
.bt-switchrow .toggle { flex: none; }
.toggle { background: var(--refToggleOff); }
.toggle[aria-checked="true"] { background: var(--gradBtn); }
body[data-mode="dark"] .toggle[aria-checked="true"]:after { background: #141414; }

/* ── Вход в аккаунт ── */
.bt-auth { min-height: 86vh; display: grid; justify-items: center; align-content: center; gap: 30px; padding: 30px 16px 60px; }
.bt-auth-logo { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font); font-size: 46px; font-weight: 800; letter-spacing: -0.04em; color: var(--refInk); text-decoration: none; }
.bt-auth-logo img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 10px 18px rgb(242 107 0 / 0.3)); }
.bt-auth-card { width: 100%; max-width: 440px; padding: 44px 44px 36px; border-radius: 30px; background: var(--refCard); box-shadow: 0 30px 80px rgb(40 20 0 / 0.09), inset 0 0 0 1px var(--refCardLine); text-align: center; }
.bt-auth-card h1 { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; color: var(--refInk); margin: 0 0 30px; }
.bt-auth-tabs { display: flex; width: 100%; margin-bottom: 34px; }
.bt-auth-tabs button { flex: 1; height: 46px; }
.bt-auth-form { display: grid; gap: 12px; }
.bt-field { width: 100%; height: 60px; padding: 0 26px; border-radius: var(--pill); border: 0; background: var(--refCard); color: var(--refInk); font-size: 17px; box-shadow: inset 0 0 0 1.5px var(--refCardLine); outline: none; transition: box-shadow 0.2s ease; }
.bt-field:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.bt-auth-form .bt-btn { margin-top: 6px; }
.bt-auth-p { font-size: 15px; line-height: 1.5; color: var(--refMuted); margin: -10px 0 22px; }
.bt-auth-hr { border: 0; height: 1px; background: var(--refCardLine); margin: 28px 0 22px; }
.bt-auth-link { font-size: 16px; color: var(--refInk); opacity: 0.85; }
.bt-auth .auth-small { margin-top: 14px; font-size: 13px; color: var(--refMuted); }
.bt-auth .field-error:empty { display: none; }
.is-guest #sidebar, body[data-surface="account"] .is-guest .web-chrome { display: none; }

/* ── Нижнее меню: плавающая панель, активный пункт — пилюля с подписью ── */
.android #bottomnav, .telegram #bottomnav, body[data-surface="pwa"] .android #bottomnav {
  left: 8px; right: 8px; padding: 8px 10px; justify-content: space-between;
  background: var(--navBg); box-shadow: var(--refNavShadow), inset 0 0 0 1px var(--refCardLine);
}
.bottom-item { height: 60px; min-width: 60px; color: var(--refMuted); }
body[data-mode="light"] .bottom-item { color: #4a4642; }
.bottom-item svg { width: 25px; height: 25px; }
.bottom-item.on, body[data-surface="pwa"] .android .bottom-item.on { flex: 1 1 auto; max-width: 190px; height: 60px; padding: 0 24px 0 22px; justify-content: center; gap: 10px; color: #fff; }
.bottom-item.on span, .bottom-item span { font-size: 17px; font-weight: 500; }
body[data-surface="pwa"] .android .bottom-item { height: 60px; }
@media (max-width: 370px) { .bottom-item.on { max-width: 150px; padding: 0 16px; } .bottom-item.on span { font-size: 15px; } }
.android #content, .telegram #content, body[data-surface="pwa"] .android #content { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

/* ── Экран загрузки ── */
.boot { display: grid; place-items: center; align-content: center; gap: 26px; min-height: 70vh; font-size: 15px; color: var(--refMuted); }
.boot::before { width: 150px; height: 150px; filter: drop-shadow(0 20px 40px rgb(242 107 0 / 0.4)); }
.boot svg, .boot .loading { display: none; }

/* ── Общие поверхности ── */
.surface, dialog, .action, .lang-list { background: var(--refCard); color: var(--refInk); }
body[data-surface="telegram"] .surface, body[data-surface="pwa"] .surface { border-radius: var(--refRSmall); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); }
body[data-mode="dark"] .surface, body[data-mode="dark"] .action, body[data-mode="dark"] .row, body[data-mode="dark"] dialog { box-shadow: inset 0 0 0 1px var(--refCardLine); }
body[data-mode="dark"] input, body[data-mode="dark"] textarea, body[data-mode="dark"] select { background: var(--field); color: var(--text); }
body[data-mode="dark"] .muted, body[data-mode="dark"] small { color: var(--refMuted); }

/* ── Кабинет на компьютере ── */
@media (min-width: 851px) {
  body[data-surface="account"] .bt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  body[data-surface="account"] .bt-pcard { grid-row: span 2; }
  body[data-surface="account"] .bt-card { display: grid; grid-template-columns: 1.1fr 1fr; }
  body[data-surface="account"] .bt-card-solo { display: block; }
  body[data-surface="account"] .bt-card-top { min-height: 220px; padding: 30px 34px; }
  body[data-surface="account"] .bt-card-bottom { padding: 30px 34px; align-self: center; }
  body[data-surface="account"] .bt-card-title { font-size: 36px; }
  body[data-surface="account"] #content > .bt-btn { display: inline-flex; width: auto; min-width: 320px; margin: 0 12px 12px 0; }
  body[data-surface="account"] .bt-promo .bt-btn { width: auto; min-width: 320px; display: inline-flex; }
  body[data-surface="account"] .bt-card-bottom .bt-btn { max-width: 460px; }
  body[data-surface="account"] .bt-shop-tabs { max-width: 520px; }
  body[data-surface="account"] #content > .bt-nrow, body[data-surface="account"] #content > .bt-big, body[data-surface="account"] #content > .bt-nick { max-width: 760px; }
}
#content > .bt-btn + .bt-plans-head, #content > .bt-btn + .sectionhead { margin-top: 26px; }
.account-stats > button, .account-stats > button:first-child { background: var(--refCard); color: var(--refInk); box-shadow: var(--refShadow), inset 0 0 0 1px var(--refCardLine); }
.account-stats > button:first-child p, .account-stats > button:first-child small { color: var(--refMuted) !important; }
.account-stats > button:first-child span { color: var(--refInk) !important; }
.account-stats strong { font-weight: 400; }
.account-stats strong small { color: var(--refMuted); font-weight: 400; }

/* ── Сайт ── */
.bt-heropanel { width: 100%; max-width: 440px; justify-self: end; align-self: center; }
.bt-heropanel .bt-card { margin-bottom: 16px; box-shadow: 0 30px 60px -30px rgb(150 60 0 / 0.35); }
.bt-heropanel .bt-plans { margin-bottom: 0; gap: 10px; }
.bt-heropanel a.bt-prow { text-decoration: none; }
.bt-heropanel a.bt-prow:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgb(40 20 0 / 0.1), inset 0 0 0 1px var(--refCardLine); }
@media (max-width: 900px) { .bt-heropanel { justify-self: stretch; max-width: 520px; margin: 18px auto 0; } }
.bt-tile-main .bt-3d { display: none; }
.bt-tile-main::after { opacity: var(--markHero); width: 320px; height: 320px; right: -60px; top: -40px; bottom: auto; transform: none; }
.hero .hero-art, .bt-limit img { display: none !important; }
.hero::after, .bt-limit::after, .surface.highlight::after, .benefit.mint::after, .price-card.featured::after, .web-final::after, .account-banner::after { transform: none; }

/* Правки после проверки */
.is-guest #webHeader { display: none; }
.bt-big .bt-big-t b { color: #fff; }
.bt-big .bt-big-t small { color: rgb(255 255 255 / 0.62); }
.bt-big.brand .bt-big-t small { color: rgb(255 255 255 / 0.85); }
.bt-big .bt-big-note { letter-spacing: 0; word-spacing: normal; white-space: normal; color: #3a3632; }
.bt-big img.bt-big-img { position: absolute; width: 190px; height: 190px; max-width: none; right: 66px; top: -42px; left: auto; }
.bt-big.brand { min-height: 190px; }
.bt-big-help img.bt-big-img { right: auto; left: 34%; top: -48px; width: 210px; height: 210px; }
.bt-big-help .bt-big-t b { font-size: 30px; }
@media (max-width: 380px) { .bt-big img.bt-big-img { width: 160px; height: 160px; right: 58px; } .bt-big-help img.bt-big-img { left: 30%; } }
.bt-big.brand img.bt-big-img { width: 168px; height: 168px; right: 4px; top: -44px; }
.bt-big.brand .bt-big-t { max-width: 56%; }
@media (max-width: 380px) { .bt-big.brand img.bt-big-img { width: 146px; height: 146px; right: 0; } }
.bt-shop-tabs button { font-size: 16px; padding: 0 10px; white-space: nowrap; }
@media (max-width: 370px) { .bt-shop-tabs button { font-size: 14px; } }
.bt-card-top::after { width: 200px; height: 200px; right: -62px; top: -24px; }
.bt-card-pill { --pillBg: rgb(150 45 0 / 0.26); background: var(--pillBg); }
.account-stats > button:first-child strong, .account-stats > button:first-child strong small { color: var(--refInk) !important; }
.account-stats > button:first-child strong small { color: var(--refMuted) !important; }

/* ════════════════════════════════════════════════════════════════════════
   11.11 · Кабинет, PWA и Mini App — тем же баннерным языком, что сайт:
   широкий шрифт Unbounded в заголовках, логотип «батон vpn» с 3D-знаком,
   оранжевые карточки на промо-фоне со стеклянной лентой, белые плашки-выделения, без обводок.
   ════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: Unbounded; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-var.woff2") format("woff2"); }
:root,
html body,
html body[data-mode],
html body[data-mode][data-accent] {
  --display: Unbounded, Roboto, system-ui, sans-serif;
  --promoHero: url(assets/promo/hero-720.webp);
  --promoBolt: url(assets/promo/bolt-720.webp);
  --promoShade: linear-gradient(100deg, rgb(170 50 0 / 0.42) 0%, rgb(170 50 0 / 0.14) 60%, transparent 85%);
  --brandHot: #ff7a1a;
  --markBg: #ffffff;
  --markInk: #f26b00;
  --deal: #000000;
  --fillSoft: var(--refGray);
}
html body[data-mode="dark"],
html body[data-mode="dark"][data-accent] { --deal: #18181a; --fillSoft: #222225; }

/* Логотип */
.brand, .web-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); letter-spacing: -0.03em; color: var(--refInk); white-space: nowrap; }
.brand-3d { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 10px rgb(242 107 0 / 0.3)); transition: transform 0.3s ease; }
.brand:hover .brand-3d, .web-logo:hover .brand-3d { transform: rotate(-10deg) scale(1.06); }

/* Заголовки — широкий гротеск */
.bt-head h1, .bt-title, .bt-sec, .pagehead h1, .sectionhead h2, .bt-plans-head h2, .bt-devhead h2, .bt-card-title, .bt-big-t b,
.surface h2, .bt-auth-card h1, .bt-auth-card h2, .bt-name, .account-stats strong, .bt-count, .bt-prow-p b, .stat-number, .bt-pcard-name {
  font-family: var(--display); letter-spacing: -0.025em;
}
.bt-head h1, .bt-title, .bt-sec, .bt-plans-head h2, .bt-devhead h2 { font-weight: 700; text-transform: lowercase; }
.bt-head h1, .bt-title { font-size: 30px; line-height: 1.05; }
.bt-plans-head h2, .bt-devhead h2 { font-size: 24px; line-height: 1.08; }
.pagehead h1 { font-weight: 700; letter-spacing: -0.03em; }
.bt-name { font-weight: 600; font-size: 16px; }
.bt-card-title { font-weight: 700; text-transform: lowercase; }
.bt-prow-p b { font-weight: 600; font-size: 21px; }
.bt-count { font-weight: 600; }
.bt-big-t b { font-weight: 700; font-size: 23px; line-height: 1.1; }

/* Оранжевые карточки — промо-фон со стеклянной лентой, как первый экран сайта */
.bt-card-top, .surface.highlight, .bt-big.brand { background: var(--promoShade), var(--promoHero) center / cover no-repeat, var(--refCardTop); }
.bt-card-top::after { display: none; }
.surface.highlight::after, .surface.highlight::before { display: none; }
.bt-big.brand { background: var(--promoShade), var(--promoBolt) 70% center / cover no-repeat, var(--refCardTop); }
.bt-big.brand::before { display: none; }
.bt-card-label { font-family: var(--display); font-size: 13px; letter-spacing: -0.01em; }
.bt-card-pill, .bt-card-pill[style] { --pillBg: var(--markBg); background: var(--markBg); color: var(--markInk); font: 600 13px var(--display); letter-spacing: -0.01em; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Без обводок: всё — заливкой */
.bt-btn.line { background: var(--refInk); color: var(--refBg); box-shadow: none; }
.bt-btn.line > em { background: var(--refBg); }
.bt-btn.line > em svg { color: var(--refInk); }
.btn.ghost, .btn.ghost:hover:not(:disabled), .btn.ghost:active { background: var(--refInk); color: var(--refBg); box-shadow: none; }
.btn.ghost:not(:hover) > svg.i-arrow:last-child, .btn.ghost > svg.i-arrow:last-child { background: var(--refBg); color: var(--refInk); }
.bt-seg { background: var(--fillSoft); box-shadow: none; }
.bt-seg button.on { background: var(--gradBtn); color: #fff; box-shadow: 0 8px 18px -8px rgb(242 107 0 / 0.6); }
body[data-mode="dark"] .bt-seg button.on { background: var(--gradBtn); }
.bt-seg button.on small { background: #fff; color: var(--markInk); }
.bt-prow, .bt-nick, .bt-nrow, .account-stats > button, .account-stats > button:first-child { box-shadow: var(--refShadow); }
body[data-surface="telegram"] .surface, body[data-surface="pwa"] .surface { box-shadow: var(--refShadow); }
body[data-mode="dark"] .surface, body[data-mode="dark"] .action, body[data-mode="dark"] .row, body[data-mode="dark"] dialog,
body[data-mode="dark"] .bt-prow, body[data-mode="dark"] .bt-nick, body[data-mode="dark"] .bt-nrow { box-shadow: none; }
.bt-nrow > i { box-shadow: none; background: var(--fillSoft); }
.bt-field { box-shadow: none; background: var(--fillSoft); }
.bt-field:focus { box-shadow: 0 0 0 2px var(--accent); }
.bt-auth-card { box-shadow: 0 30px 80px rgb(40 20 0 / 0.09); }
.selectlike { box-shadow: none; background: var(--fillSoft); }
.bt-stepper i { box-shadow: none; background: var(--refLine); }
.bt-stepper i.now { box-shadow: none; background: #fff; outline: 0; }
.bt-stepper i.now { box-shadow: 0 0 0 3px var(--accent); }
.bt-pcard { box-shadow: 0 18px 40px -22px rgb(242 107 0 / 0.55); }

/* Выбранный тариф — чёрная карточка, как «299 ₽ в месяц» на сайте */
.bt-pcard { background: var(--deal); color: #fff; }
.bt-pcard::before { filter: invert(1); opacity: 0.12; }
.bt-pcard .bt-feat li, .bt-pcard .bt-feat svg { color: #fff; }
.bt-pcard .bt-feat svg { color: var(--brandHot); }
.bt-pcard .bt-prow-p b, .bt-pcard .bt-prow-p b span { color: #fff; }
.bt-pcard .bt-prow-p s, .bt-pcard small { color: rgb(255 255 255 / 0.6); }
.bt-pcard .bt-pcard-name { background: var(--gradBtn); font-weight: 600; font-size: 15px; }
.bt-pcard .bt-btn.line { background: #fff; color: #141414; }
.bt-pcard .bt-btn.line > em { background: var(--gradBtn); }
.bt-pcard .bt-btn.line > em svg { color: #fff; }

/* Шапка кабинета на компьютере — меню-пилюля, как на сайте */
.web-links { padding: 6px; border-radius: 999px; background: var(--refCard); box-shadow: var(--refNavShadow); border: 0; }
.web-links a, .web-links button { font-family: var(--font); }
.bt-big.brand .bt-big-t b { font-size: 20px; }
@media (max-width: 380px) { .bt-big-t b { font-size: 20px; } .bt-head h1, .bt-title { font-size: 26px; } }
.bt-big.brand .bt-big-t > b { max-width: 190px; white-space: normal; }
.bt-big-note { font: 400 14px/1.4 var(--font); letter-spacing: 0; }
.brand-3d { transform: scale(1.25); }
.bt-card-title { font-size: 24px; max-width: 78%; }
body[data-surface="account"] .bt-card-title { font-size: 30px; }
/* 11.11 · Тарифы — однотонные цвета */
.bt-pcard .bt-pcard-name, .bt-seg button.on { background: #f26b00; }