/*
  Кабинет Pelliron - все стили. Файл переносите к себе целиком.
  Порядок: переменные -> база -> кнопки -> каркас -> компоненты -> вход и регистрация -> адаптив.
  Цвета и размеры меняйте только в :root в начале файла.
*/

/* ---------- Переменные. Цвета и размеры меняйте только здесь ---------- */
:root{
  --bg:#f5f5f7; --surface:#fff; --side:#fcfcfd;
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#636366;           /* три цвета текста, других серых для текста нет:
                                                                  ink - заголовки, цифры и весь текст, который читают;
                                                                  ink-2 - названия значений, подписи полей, пункты меню, подсказки;
                                                                  ink-3 - только тихое: название внутри пустого поля, подвал, путь в шапке, время в чате.
                                                                  Светлее не делать */
  --line:#e9e9ee; --line-2:#dadae0; --track:#efeff3;
  --blue:#3d8bff; --blue-soft:#eef4ff; --blue-ink:#1d5fd0;    /* blue - иконки и выбранное, blue-ink - ссылки */
  --press:#2670e6; --press-2:#1f62d4;                          /* кнопки с белым текстом (press-2 - при наведении), рамка фокуса, переключатель.
                                                                  Тот же синий, что у кнопок на сайте PropTen. Для кнопок с белым текстом --blue не берите */
  --ring:0 0 0 4px rgba(38, 112, 230, .14);                   /* мягкий ореол вокруг поля в фокусе */
  --red:#b83a2b; --red-soft:#fcefed; --err:#d4503c; --ok:#2e9e62;
  --f:Inter, "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --side-w:272px; --top-h:64px; --tab-h:64px;
  --cmax:1160px;                                              /* максимальная ширина контента */
  --gut:32px;                                                 /* боковой отступ, на телефоне 16px */
  --e:cubic-bezier(.2,.7,.1,1);                               /* одна кривая для всех анимаций */
  --sh-card:0 1px 2px rgba(0,0,0,.04), 0 0 0 1px var(--line);
  --sh-pop:0 18px 44px -18px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px);
  --dir:1;                                                    /* 1 = слева направо, -1 = справа налево (арабский), см. ниже */
}
/* Арабский: на <html> ставится dir="rtl", и вёрстка зеркалится сама. Поэтому везде логические свойства
   (margin-inline-start, inset-inline-end и т.д.), а где их нет (тени-разделители, сдвиги, стрелки) - множитель var(--dir) */
[dir="rtl"]{ --dir:-1; }

/* ---------- База ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Текст в кабинете: обычный 15px / 480 цветом ink, вторичный 14px, подписи 14px / 500, мелкое 13px, кнопки 600, заголовки 650-700.
   Меньше 13px - только подписи нижнего меню на телефоне и время в чате. Мелкому тексту отрицательную разрядку не ставить,
   у заголовков она задана отдельно. Шрифт Inter подключайте с осями 400..700 (см. index.html), иначе 480 не сработает */
body{ margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:15px; font-weight:480; line-height:1.5; letter-spacing:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
a, button, label, summary, select{ -webkit-tap-highlight-color:transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure{ margin:0; }
ul, ol{ padding:0; list-style:none; }
button, input, select, textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--press); outline-offset:2px; border-radius:8px; }
::selection{ background:rgba(38, 112, 230, .2); color:var(--ink); }
.ic{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic--m{ width:18px; height:18px; }
.ic--s{ width:16px; height:16px; }
.ic--xs{ width:14px; height:14px; }
.num{ font-variant-numeric:tabular-nums; }
[hidden]{ display:none !important; }
/* когда открыто выдвижное меню, диалог или чат на телефоне - страница под ними не должна скроллиться */
html.lock, html.lock body{ overflow:hidden; }

/* ---------- Кнопки и ссылки ---------- */
/* высота через min-height, чтобы кнопка не обрезала текст при увеличенном шрифте в системе */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 18px; border:0; border-radius:999px; font-size:14px; font-weight:600; line-height:1.2;
  letter-spacing:-.006em; white-space:nowrap; touch-action:manipulation; transition:background .2s, box-shadow .2s, color .2s, transform .15s; }
.btn .ic{ width:18px; height:18px; }
.btn:active{ transform:scale(.98); }
.btn--p{ background:var(--press); color:#fff; }
.btn--s{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
.btn--lg{ min-height:48px; padding:0 24px; font-size:15px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:default; transform:none; }
.lnk{ display:inline-flex; align-items:center; gap:4px; color:var(--blue-ink); font-weight:500; }
.lnk .ic{ width:16px; height:16px; scale:var(--dir) 1; }
@media (hover: hover){
  .btn--p:not([disabled]):hover{ background:var(--press-2); }
  .btn--s:not([disabled]):hover{ background:#f7f7f9; }
  .lnk:hover{ text-decoration:underline; text-underline-offset:3px; }
}

/* ---------- Каркас: боковое меню, шапка, контент, подвал ---------- */
.shell{ display:grid; grid-template-columns:var(--side-w) minmax(0, 1fr); min-height:100vh; min-height:100dvh; }
.side{ position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; padding:20px 14px 14px; background:var(--side); box-shadow:inset calc(-1px * var(--dir)) 0 0 var(--line);
  overflow-y:auto; overscroll-behavior:contain; }
.side__logo{ display:block; width:122px; height:40px; margin:2px 8px 20px; }
.side__logo img{ display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.side .side__close{ display:none; position:absolute; top:calc(14px + var(--safe-t)); inset-inline-end:10px; }  /* крестик нужен только когда меню выдвижное */
.nav{ display:grid; gap:2px; }
.nav__label{ margin:18px 10px 4px; font-size:13px; font-weight:600; color:var(--ink-3); }
.nav a{ display:flex; align-items:center; gap:11px; min-height:38px; padding:0 10px; border-radius:10px; font-size:14.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:background .15s, color .15s; }
.nav a .ic{ color:var(--ink-3); transition:color .15s; }
.nav a[aria-current="page"]{ background:var(--blue-soft); color:var(--ink); }
.nav a[aria-current="page"] .ic{ color:var(--blue); }
.nav a:active{ background:#eceef2; }
.nav__sep{ height:1px; margin:12px 10px; background:var(--line); }
@media (hover: hover){ .nav a:not([aria-current]):hover{ background:#f1f1f4; color:var(--ink); } }

.scrim{ display:none; }
/* лёгкий след той же «авроры», что на входе (те же холодные оттенки) - только вверху, дальше кабинет белый */
.main{ position:relative; isolation:isolate; min-width:0; display:flex; flex-direction:column; }
.main::before{ content:""; position:absolute; left:0; right:0; top:0; height:440px; z-index:-1; pointer-events:none;
  background:radial-gradient(38% 80% at 88% 0%, rgba(120,166,245,.14), rgba(120,166,245,0) 70%), radial-gradient(34% 70% at 60% 0%, rgba(178,196,226,.14), rgba(178,196,226,0) 70%), radial-gradient(30% 70% at 18% 0%, rgba(160,204,244,.1), rgba(160,204,244,0) 70%); }
/* шапка прозрачная, «стеклом» становится только когда страницу прокрутили (класс is-scrolled ставит скрипт) */
.top{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; height:var(--top-h); padding:0 max(var(--gut), calc((100% - var(--cmax)) / 2 + var(--gut)));
  background:transparent; transition:background .3s, box-shadow .3s; }
html.is-scrolled .top{ background:rgba(245,245,247,.82); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); box-shadow:0 1px 0 var(--line); }
.top .top__menu{ display:none; }
.top__logo{ display:none; width:98px; height:32px; }
.top__logo img{ display:block; width:100%; height:100%; object-fit:contain; object-position:left center; }
.crumbs{ display:flex; align-items:center; gap:6px; min-width:0; font-size:14px; color:var(--ink-3); white-space:nowrap; }
.crumbs b{ font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.crumbs .ic{ width:14px; height:14px; scale:var(--dir) 1; }
.top__right{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.chip-btn{ display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border:0; border-radius:999px; background:transparent; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.chip-btn .ic{ width:17px; height:17px; }
.ibtn{ display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--ink-2); }
.ava-btn{ display:grid; place-items:center; width:40px; height:40px; margin-inline-start:4px; border:0; border-radius:50%; background:transparent; }
.ava{ display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:#e7eefb; color:#1d5fd0; font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.ava-btn .ava{ width:32px; height:32px; font-size:12px; transition:box-shadow .15s; }
@media (hover: hover){
  .chip-btn:hover, .ibtn:hover{ background:#ebebef; color:var(--ink); }
  .ava-btn:hover .ava{ box-shadow:0 0 0 3px #e2e2e8; }
}
.content{ width:100%; max-width:var(--cmax); margin:0 auto; padding:8px var(--gut) 56px; }
.foot{ margin-top:auto; display:flex; gap:14px; padding:22px max(var(--gut), calc((100% - var(--cmax)) / 2 + var(--gut))) 28px; font-size:14px; color:var(--ink-3); }

/* нижнее меню - только на телефоне (см. блок max-width:760px внизу) */
.tabbar{ display:none; }

/* выпадающие меню (профиль, язык). Позицию считает скрипт, чтобы меню не вылезало за экран */
.menu{ position:fixed; z-index:40; min-width:220px; max-width:calc(100vw - 16px); padding:6px; border-radius:14px; background:var(--surface); box-shadow:var(--sh-pop); }
.menu button, .menu a{ display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:0 10px; border:0; border-radius:9px; background:none; font-weight:500; text-align:start; color:var(--ink); }
.menu button:active, .menu a:active{ background:#eceef2; }
.menu .ic{ color:var(--ink-3); width:18px; height:18px; }
.menu__head{ display:flex; align-items:center; gap:10px; padding:10px 10px 8px; }
.menu__head b{ display:block; font-weight:600; }
.menu__head small{ color:var(--ink-3); font-size:14px; }
.menu hr{ height:1px; margin:6px 4px; border:0; background:var(--line); }
.menu .is-on{ color:var(--blue-ink); }
@media (hover: hover){ .menu button:hover, .menu a:hover{ background:#f3f3f6; } }

/* ---------- Каркас страницы ---------- */
.page{ display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; animation:in .35s var(--e) both; }
@keyframes in{ from{ opacity:0; transform:translateY(6px); } }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; padding-top:8px; }
.head h1{ font-size:28px; line-height:1.15; font-weight:700; letter-spacing:-.028em; overflow-wrap:anywhere; }
.head p{ margin-top:6px; max-width:70ch; }
.head__acts{ display:flex; gap:10px; flex-wrap:wrap; }
.card{ border-radius:18px; background:var(--surface); box-shadow:var(--sh-card); }
.card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:16px 22px 4px; }
.card__head h2{ font-size:16px; font-weight:650; letter-spacing:-.015em; }
.card__head .lnk{ padding:11px 0; margin:-11px 0; }          /* визуально ссылка маленькая, а нажимать удобно */
.pad{ padding:22px; }
.narrow{ max-width:720px; }
.label{ font-size:14px; font-weight:500; color:var(--ink-2); }
.grid-2{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:20px; align-items:start; }

/* баннер «сначала пройдите верификацию». После верификации убрать целиком */
.banner{ display:flex; align-items:center; gap:16px; padding:16px; padding-inline-end:18px; border-radius:18px; background:#f2f7ff; box-shadow:inset 0 0 0 1px rgba(61,139,255,.22); }
.banner__ic{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:12px; background:#fff; color:var(--blue); box-shadow:0 1px 2px rgba(29,95,208,.12); }
.banner__t{ font-weight:600; }
.banner__s{ font-size:14px; }
.banner .btn{ margin-inline-start:auto; }

/* цифры счёта в ряд (баланс / свободные / бонусы, своп / комиссия / прибыль) */
.stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.stats--pad{ padding:18px 0; }
.stat{ min-width:0; padding:4px 22px; }
.stat + .stat{ box-shadow:inset calc(1px * var(--dir)) 0 0 var(--line); }
.stat__v{ margin-top:6px; font-size:26px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* плитка торгового счёта MT5 (главная и «My accounts») */
/* у всех сеток явная колонка minmax(0, 1fr): иначе длинное слово (PellironUniversal-Server) распирает карточку на узком экране */
.acct{ padding:22px; display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:auto 1fr auto; gap:20px; }
.acct--page{ grid-template-rows:none; }
.acct--page .stats{ margin:0 -22px; }
.acct__main{ display:grid; grid-template-columns:minmax(0, 1fr); gap:20px; min-width:0; }
.acct__top{ display:flex; align-items:center; gap:14px; }
.acct__logo{ display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:12px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.acct__logo img{ width:28px; height:28px; }                 /* значок Pelliron = счёт Pelliron. Синий квадрат ниже = PropTen */
.acct__name{ min-width:0; }
.acct__name b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; font-size:15.5px; letter-spacing:-.012em; }
.acct__name small{ font-size:14px; color:var(--ink-2); }
.acct__bal .label{ display:block; }
.acct__bal .big{ margin-top:4px; font-size:clamp(32px, 11vw, 44px); line-height:1; font-weight:650; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.acct__bal .sub{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:14px; color:var(--ink-2); }
.acct__bal .sub b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.acct .quick{ align-self:end; }
/* вся верхняя строка плитки - ссылка, стрелка справа подсказывает, что туда можно нажать */
.tile-link{ margin:-10px -10px 0; padding:10px; border-radius:14px; transition:background .15s; }
.tile-link .chev{ margin-inline-start:auto; width:18px; height:18px; scale:var(--dir) 1; color:var(--ink-3); transition:transform .2s var(--e), color .2s; }
.tile-link:active{ background:#f1f2f5; }
@media (hover: hover){ .tile-link:hover{ background:#f6f6f9; } .tile-link:hover .chev{ transform:translateX(calc(2px * var(--dir))); color:var(--ink); } }

/* плитка PropTen на главной */
.pt-tile{ display:grid; grid-template-columns:minmax(0, 1fr); align-content:start; gap:18px; padding:22px; }
.pt-tile__top{ display:flex; align-items:center; gap:14px; }
.pt-tile__top > span:not(.pt-mark){ min-width:0; }
.pt-tile__top b{ display:block; font-weight:650; font-size:15.5px; letter-spacing:-.012em; }
.pt-tile__top small{ display:block; font-size:14px; color:var(--ink-2); }
.pt-lead{ margin-top:-4px; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.pt-mark{ display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:12px; background:linear-gradient(135deg, #2d7bff, #0b5cff 45%, #0a3fc2); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }   /* синий карточки PropTen на сайте */
.pt-mark img{ width:24px; height:24px; object-fit:contain; }
.pt-mark--lg{ width:64px; height:64px; border-radius:18px; margin-bottom:4px; }
.pt-mark--lg img{ width:32px; height:32px; }
/* четыре размера счёта. Ведут на страницу планов */
.sizes{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.sizes a{ display:grid; gap:2px; min-width:0; padding:11px 14px 12px; border-radius:12px; background:#f5f5f8; transition:background .15s, box-shadow .15s; }
.sizes a:active{ background:var(--blue-soft); }
.sizes span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; color:var(--ink-2); }
.sizes b{ font-size:17px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (hover: hover){ .sizes a:hover{ background:var(--blue-soft); box-shadow:inset 0 0 0 1px rgba(61,139,255,.25); } }
/* быстрые действия под балансом: круглые кнопки, подпись под ними */
.quick{ display:grid; grid-template-columns:repeat(4, minmax(0, 84px)); gap:4px; margin:0 -8px -6px; }
.quick a{ display:grid; justify-items:center; gap:8px; min-width:0; padding:4px 0 6px; font-size:13.5px; font-weight:500; color:var(--ink-2); text-align:center; white-space:nowrap; transition:color .15s; }
.quick .qi{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#f1f1f4; color:var(--ink); transition:background .15s, transform .2s var(--e); }
.quick a:active .qi{ transform:scale(.94); background:#e7e7ec; }
@media (hover: hover){ .quick a:hover{ color:var(--ink); } .quick a:hover .qi{ background:#e7e7ec; } }

/* ---------- Пустые состояния ---------- */
.empty{ display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:10px; padding:44px 20px 46px; text-align:center; }
.empty--line{ box-shadow:inset 0 1px 0 var(--line); }
.empty__ic{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--track); color:var(--ink-3); }
.empty__ic .ic{ width:24px; height:24px; }
.empty b{ font-weight:600; font-size:15px; }
.empty .btn{ margin-top:6px; }
.empty--big{ gap:14px; padding:64px 24px 68px; }
.empty--big b{ font-size:18px; font-weight:650; letter-spacing:-.015em; }

/* ---------- Таблицы ----------
   Пока таблица помещается в карточку - это обычная таблица. Когда карточка уже таблицы, каждая строка
   становится блоком «название колонки / значение» (подписи скрипт берёт из thead и кладёт в data-label).
   Решает ширина самой карточки, а не экрана (container queries) - так работает и на планшете,
   и на ноутбуке с открытым боковым меню. Старые браузеры без container queries просто прокручивают таблицу вбок.
   Пороги подобраны по реальной ширине таблиц: 7 колонок (платежи, история) - 880px, тикеты (8 колонок) - 1000px.
   Добавите колонку - перемерьте и поправьте порог. */
.tbl{ container-type:inline-size; overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ padding:14px 16px 12px; text-align:start; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; box-shadow:inset 0 -1px 0 var(--line); }
td{ height:54px; padding:0 16px; white-space:nowrap; box-shadow:inset 0 -1px 0 var(--line); transition:background .15s; }
th:first-child, td:first-child{ padding-inline-start:22px; }
th:last-child, td:last-child{ padding-inline-end:22px; }
tr:last-child td{ box-shadow:none; }
td b{ color:var(--ink); font-weight:600; }
td.r, th.r{ text-align:end; }
/* длинный текст (тема, сообщение, имя) обрезаем многоточием, чтобы таблица не разъезжалась */
td.clip{ max-width:220px; overflow:hidden; text-overflow:ellipsis; }
td.clip-s{ max-width:160px; overflow:hidden; text-overflow:ellipsis; }
@media (hover: hover){ tbody tr:hover td{ background:#fafbfd; } }

@container (max-width: 880px){
  .tbl thead{ display:none; }
  .tbl table, .tbl tbody{ display:block; }
  .tbl tr{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px 16px; padding:16px 18px; box-shadow:inset 0 -1px 0 var(--line); }
  .tbl tr:last-child{ box-shadow:none; }
  .tbl td, .tbl td.clip, .tbl td.clip-s{ height:auto; max-width:none; padding:0; white-space:normal; box-shadow:none; overflow-wrap:anywhere; }
  .tbl td::before{ content:attr(data-label); display:block; margin-bottom:3px; font-size:13px; font-weight:500; color:var(--ink-2); }
  .tbl td.r{ text-align:start; }
  .tbl tbody tr:hover td{ background:transparent; }
}
/* то же самое для широкой таблицы тикетов, только раньше */
@container (max-width: 1000px){
  .tbl--wide thead{ display:none; }
  .tbl--wide table, .tbl--wide tbody{ display:block; }
  .tbl--wide tr{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px 16px; padding:16px 18px; box-shadow:inset 0 -1px 0 var(--line); }
  .tbl--wide tr:last-child{ box-shadow:none; }
  .tbl--wide td, .tbl--wide td.clip, .tbl--wide td.clip-s{ height:auto; max-width:none; padding:0; white-space:normal; box-shadow:none; overflow-wrap:anywhere; }
  .tbl--wide td::before{ content:attr(data-label); display:block; margin-bottom:3px; font-size:13px; font-weight:500; color:var(--ink-2); }
  .tbl--wide td.r{ text-align:start; }
  .tbl--wide tbody tr:hover td{ background:transparent; }
}
/* узкая карточка (телефон) - по две колонки в блоке */
@container (max-width: 560px){
  .tbl tr, .tbl--wide tr{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* статус: точка + слово. Цвет точки: new - синий, ok - зелёный, no - красный */
.st{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink); }
.st::before{ content:""; width:7px; height:7px; flex:none; border-radius:50%; background:var(--dot, var(--ink-3)); }
.st--new{ --dot:var(--blue); }
.st--ok{ --dot:var(--ok); }
.st--no{ --dot:var(--err); }

/* вкладки-переключатель (Information / Payments / History, New / Executed / Declined) */
.seg{ display:inline-flex; gap:2px; max-width:100%; padding:3px; border-radius:12px; background:var(--track); }
.seg button{ min-height:32px; padding:0 14px; border:0; border-radius:9px; background:transparent; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
.seg button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04); }

/* пары «название - значение» (данные счёта) */
.dl{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.dl div{ min-width:0; padding:16px 22px; box-shadow:inset 0 -1px 0 var(--line); }
.dl div:nth-child(odd){ box-shadow:inset 0 -1px 0 var(--line), inset calc(-1px * var(--dir)) 0 0 var(--line); }
.dl div:nth-last-child(-n+2){ box-shadow:none; }
.dl div:nth-last-child(2):nth-child(odd){ box-shadow:inset calc(-1px * var(--dir)) 0 0 var(--line); }
.dl dt{ font-size:14px; font-weight:500; color:var(--ink-2); }
.dl dd{ margin-top:4px; font-weight:600; overflow-wrap:anywhere; }

/* «закрыто до верификации», и заодно страница 404 */
.locked{ display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:12px; padding:56px 24px 60px; text-align:center; }
.locked__ic{ display:grid; place-items:center; width:60px; height:60px; border-radius:18px; background:var(--blue-soft); color:var(--blue); }
.locked__ic .ic{ width:28px; height:28px; }
.locked__ic--muted{ background:var(--track); color:var(--ink-3); }
.locked b, .locked h1{ max-width:34ch; font-size:17px; font-weight:650; letter-spacing:-.015em; }
.locked .btn{ margin-top:4px; }

/* ---------- Прайс-листы: планы PropTen и курсы. Строка = один продукт ---------- */
.plans{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; }
.rows{ display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; padding:8px; }
.row{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items:center; gap:16px; padding:16px; border-radius:14px; cursor:pointer; transition:background .2s, box-shadow .2s; }
.row.is-picked{ background:var(--blue-soft); box-shadow:inset 0 0 0 1px rgba(61,139,255,.28); }
.row__n{ font-weight:650; }
.row__a{ font-size:22px; font-weight:650; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.row__f span{ display:block; font-size:14px; font-weight:500; color:var(--ink-2); }
.row__f b{ font-weight:600; font-variant-numeric:tabular-nums; }
.row .btn{ min-height:36px; font-size:14px; }
/* заливка синим только у выбранной строки, у остальных кнопка белая */
.row:not(.is-picked) .btn--p{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
@media (hover: hover){ .row:not(.is-picked):hover{ background:#f7f7fa; } }
.courses .row{ grid-template-columns:minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.1fr) auto; }
/* справа от планов: выбранный план словами + общие условия (они одинаковые для всех планов) */
.side-card{ display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; padding:22px; }
.sum{ display:grid; grid-template-columns:minmax(0, 1fr); gap:2px; }
.sum__tier{ font-size:15px; font-weight:500; color:var(--ink-2); }
.sum__amt{ font-size:36px; line-height:1.1; font-weight:650; letter-spacing:-.03em; }
.conds{ display:grid; grid-template-columns:minmax(0, 1fr); }
.conds div{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; box-shadow:inset 0 -1px 0 var(--line); font-size:15px; }
.conds div:last-child{ box-shadow:none; }
.conds span{ color:var(--ink-2); }
.conds b{ font-weight:600; }

/* ---------- Видео-инструкции. Вместо градиента поставить превью с YouTube / своего плеера ---------- */
.vids{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.vid{ overflow:hidden; }
.vid__poster{ position:relative; display:grid; place-items:center; aspect-ratio:16 / 9; color:var(--blue); box-shadow:inset 0 -1px 0 var(--line);
  background:radial-gradient(90% 80% at 30% 18%, #fff, rgba(255,255,255,0) 60%), linear-gradient(160deg, #eef4ff 0%, #e2eaf8 55%, #d9e3f4 100%); }
.vid__play{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#fff; box-shadow:0 10px 30px -12px rgba(29,95,208,.45), inset 0 0 0 1px rgba(61,139,255,.14); transition:transform .25s var(--e); }
.vid__play .ic{ width:26px; height:26px; fill:var(--blue); stroke:none; transform:translateX(2px); }
.vid__dur{ position:absolute; inset-inline-end:12px; bottom:12px; padding:3px 8px; border-radius:8px; background:rgba(255,255,255,.85); color:var(--ink); font-size:13px; font-weight:600; }
.vid__body{ padding:18px 22px 22px; }
.vid__body h3{ font-size:16px; font-weight:650; letter-spacing:-.015em; }
.vid__body p{ margin-top:6px; font-size:14px; }
@media (hover: hover){ .vid:hover .vid__play{ transform:scale(1.06); } }

/* ---------- Настройки уведомлений: строка целиком кликабельна, не только сам переключатель ---------- */
.opt{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:14px 0; box-shadow:inset 0 -1px 0 var(--line); cursor:pointer; }
.opt:last-of-type{ box-shadow:none; }
.opt b{ font-weight:500; }
.opt__acts{ margin-top:18px; }
.sw{ position:relative; width:44px; height:26px; flex:none; }
.sw input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; }
.sw i{ position:absolute; inset:0; border-radius:999px; background:#d4d4da; transition:background .2s; pointer-events:none; }
.sw i::after{ content:""; position:absolute; top:3px; inset-inline-start:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--e); }
.sw input:checked + i{ background:var(--press); }
.sw input:checked + i::after{ transform:translateX(calc(18px * var(--dir))); }
.sw input:focus-visible + i{ outline:2px solid var(--press); outline-offset:2px; }

/* ---------- Поддержка ---------- */
.contacts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.contact{ display:flex; align-items:center; gap:16px; padding:22px; }
.contact__ic{ display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:14px; background:var(--blue-soft); color:var(--blue); }
.contact__ic--tg{ background:#e8f4fb; color:#229ed9; }
.contact b{ display:block; font-weight:650; font-size:16px; letter-spacing:-.012em; }
.contact .btn{ margin-inline-start:auto; }

/* ---------- Поля в кабинете (форма тикета): подпись над полем ---------- */
.field{ display:grid; gap:6px; }
.field > span:first-child{ font-size:14px; font-weight:600; }
.inp{ display:flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .15s; }
.inp:focus-within{ box-shadow:inset 0 0 0 1.5px var(--press), var(--ring); }
.inp input, .inp select, .inp textarea{ flex:1; min-width:0; width:100%; min-height:46px; border:0; outline:0; background:transparent; font-size:15px; }
.inp select{ -webkit-appearance:none; appearance:none; cursor:pointer; }
.inp .ic{ color:var(--ink-3); }
.inp--area{ padding:12px 14px; align-items:flex-start; }
.inp--area textarea{ min-height:110px; resize:vertical; }

/* ---------- Поля на входе и регистрации: название внутри поля, при вводе уезжает вверх ----------
   Подписи-плейсхолдеры держатся на placeholder=" " и :placeholder-shown - пробел в placeholder не убирать.
   У селектов этого нет, поэтому класс is-filled ставит скрипт. */
.f{ display:grid; min-width:0; }
.f > .hint{ margin-top:6px; }
.fl{ position:relative; display:block; height:56px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); cursor:text; transition:box-shadow .15s; }
.fl:focus-within{ box-shadow:inset 0 0 0 1.5px var(--press), var(--ring); }
.fl input, .fl select{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:21px 14px 0; border:0; border-radius:12px; outline:0; background:transparent; font-size:15px; color:var(--ink); }
.fl select{ -webkit-appearance:none; appearance:none; padding-inline-end:38px; cursor:pointer; }
.fl__l{ position:absolute; inset-inline-start:14px; top:18px; max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:20px; color:var(--ink-3);
  pointer-events:none; transform-origin:0 0; transition:transform .18s var(--e), color .18s; }
.fl input:focus ~ .fl__l, .fl input:not(:placeholder-shown) ~ .fl__l, .fl.is-filled .fl__l{ max-width:calc((100% - 28px) * 1.25); transform:translateY(-10px) scale(.8); color:var(--ink-2); }
.fl--eye input{ padding-inline-end:52px; }
[dir="rtl"] .fl__l{ transform-origin:100% 0; }
/* почта пишется слева направо даже в арабском, а телефон вместе с кодом страны - целиком слева направо */
[dir="rtl"] .fl input[type="email"]{ direction:ltr; text-align:right; }
[dir="rtl"] .phone{ direction:ltr; }
[dir="rtl"] .phone .fl__l{ transform-origin:0 0; }
.fl__chev{ position:absolute; inset-inline-end:14px; top:20px; width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
/* автозаполнение в Chrome и Safari красит поле голубым поверх нашей рамки - оставляем его прозрачным */
.fl input:-webkit-autofill{ -webkit-text-fill-color:var(--ink); caret-color:var(--ink); transition:background-color 100000s 0s; }
/* недоступный селект (город, пока не загружен список): та же рамка, фон чуть серее, стрелка бледнее */
.fl.is-disabled{ background:var(--bg); cursor:not-allowed; }
.fl.is-disabled select{ cursor:not-allowed; }
.fl.is-disabled .fl__chev{ opacity:.45; }
.eye{ position:absolute; inset-inline-end:6px; top:6px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink-3); }
@media (hover: hover){ .eye:hover{ background:#f1f1f4; color:var(--ink); } }
/* два поля в строке. На телефоне - друг под другом */
.two{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; }
/* регистрация: поля стоят группами (имя, контакты, пароль, город). Внутри группы 10px, между группами 20px.
   Подсказка в группе пароля - под обоими полями; пока в группе показана ошибка, подсказку прячем */
.auth__form.auth__form--grp{ gap:20px; }
.grp{ display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; align-items:start; }
.grp.two{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.grp > .hint{ margin-top:-4px; }
.grp > .f.has-err ~ .hint{ display:none; }
/* телефон: код страны и номер - одно поле с разделителем. Рамка, фокус и ошибка рисуются у всей группы */
.phone{ display:grid; grid-template-columns:132px minmax(0, 1fr); border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .15s; }
.phone:focus-within{ box-shadow:inset 0 0 0 1.5px var(--press), var(--ring); }
.f.has-err .phone{ box-shadow:inset 0 0 0 1.5px var(--err); }
.f.has-err .phone:focus-within{ box-shadow:inset 0 0 0 1.5px var(--err), 0 0 0 4px rgba(212,80,60,.14); }
.phone > .fl, .phone > .fl:focus-within, .phone > .fl.is-err, .phone > .fl.is-err:focus-within{ background:transparent; box-shadow:none; }
.phone > .fl + .fl::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--line-2); }
.hint{ font-size:14px; color:var(--ink-2); }
.hint--c{ text-align:center; }
.check{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; cursor:pointer; }
.check input{ width:18px; height:18px; margin:0; accent-color:var(--press); }

/* ---------- Ошибки ----------
   1) под полем - что не так именно с ним (класс is-err на рамке + строка .err);
   2) над формой - ответ сервера целиком (.alert);
   3) внизу экрана - всплывашка (.toast), для сети и сервера. */
.fl.is-err, .inp.is-err, .code.is-err input{ box-shadow:inset 0 0 0 1.5px var(--err); }
.fl.is-err:focus-within, .inp.is-err:focus-within, .code.is-err input:focus{ box-shadow:inset 0 0 0 1.5px var(--err), 0 0 0 4px rgba(212,80,60,.14); }
.err{ display:flex; align-items:flex-start; gap:6px; margin-top:7px; font-size:14px; line-height:1.4; font-weight:500; color:var(--red); }
.field > .err{ margin-top:1px; }
.err .ic{ width:16px; height:16px; stroke-width:1.8; }
.err a{ margin-inline-start:4px; color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.f.has-err > .hint{ display:none; }                           /* подсказку под полем прячем, пока показана ошибка */
.alert{ display:flex; gap:12px; padding:14px 16px; border-radius:14px; font-size:14px; line-height:1.45; animation:in .3s var(--e) both; }
.alert > .ic{ width:20px; height:20px; margin-top:1px; stroke-width:1.8; }
.alert b{ font-weight:600; color:var(--ink); }
.alert__t{ display:block; }
.alert p{ margin-top:1px; }
.alert a{ color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.alert .btn{ min-height:36px; margin-top:10px; padding:0 14px; font-size:14px; }
.alert--err{ background:var(--red-soft); box-shadow:inset 0 0 0 1px rgba(212,80,60,.2); }
.alert--err > .ic{ color:var(--err); }
.alert--info{ background:#f2f7ff; box-shadow:inset 0 0 0 1px rgba(61,139,255,.2); }
.alert--info > .ic{ color:var(--blue); }

/* ---------- Диалог (создание тикета). На телефоне выезжает снизу ---------- */
.veil{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.34); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fade .2s both; }
@keyframes fade{ from{ opacity:0; } }
.dialog{ width:min(520px, 100%); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; padding:26px; border-radius:22px; background:var(--surface);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5); animation:pop .25s var(--e) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes sheet{ from{ opacity:.6; transform:translateY(40px); } }      /* выезд снизу: диалог и чат на телефоне */
.dialog h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.dialog__body{ display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; margin-top:20px; }
.dialog__acts{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

/* ---------- Всплывашка ---------- */
.toast{ position:fixed; left:50%; bottom:calc(28px + var(--safe-b)); z-index:90; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100vw - 32px);
  padding:12px 16px; padding-inline-start:14px; border-radius:14px; background:#1d1d1f; color:#fff; font-size:14px; font-weight:500; box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
  transform:translateX(-50%); animation:toast .3s var(--e) both; }
.toast .ic{ color:#7fb3ff; }
.toast--err .ic{ color:#ff8f7e; }
@keyframes toast{ from{ opacity:0; transform:translate(-50%, 12px); } }

/* ---------- Чат поддержки. Сюда встаёт ваш виджет, наш - только как он должен выглядеть ----------
   На компьютере - окно справа внизу. На телефоне - на весь экран, как отдельное приложение:
   поле ввода всегда над клавиатурой, «назад» на Android закрывает чат (см. скрипт, блок «Чат»). */
.chat-btn{ position:fixed; inset-inline-end:calc(24px + var(--safe-r)); bottom:calc(24px + var(--safe-b)); z-index:70; display:grid; place-items:center; width:52px; height:52px; border:0; border-radius:50%;
  background:var(--press); color:#fff; box-shadow:0 12px 26px -12px rgba(38,112,230,.7), 0 2px 6px rgba(0,0,0,.08); transition:transform .2s var(--e), background .2s; }
.chat-btn .ic{ width:24px; height:24px; }
.chat-btn:active{ transform:scale(.95); }
@media (hover: hover){ .chat-btn:hover{ background:var(--press-2); transform:translateY(-2px); } }
.chat{ position:fixed; inset-inline-end:calc(24px + var(--safe-r)); bottom:calc(92px + var(--safe-b)); z-index:70; display:flex; flex-direction:column; width:380px;
  height:min(600px, calc(100vh - 130px)); height:min(600px, calc(100dvh - 130px)); border-radius:22px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-pop); animation:pop .25s var(--e) both; }
.chat__head{ display:flex; align-items:center; gap:12px; padding:12px; padding-inline-start:16px; background:#fff; box-shadow:inset 0 -1px 0 var(--line); }
.chat__who{ flex:1; min-width:0; }
.chat__who b{ display:block; font-weight:600; }
.chat__who small{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }
.chat__who small::before{ content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; }
.chat__close{ color:var(--ink-3); }
.chat__close .i-min{ display:none; }                          /* на телефоне вместо крестика стрелка вниз: чат «уезжает» туда, откуда выехал */
.ava--brand{ background:#f3f5f9; box-shadow:inset 0 0 0 1px var(--line); }
.ava--brand img{ width:20px; height:20px; }
/* лента: от поддержки - слева, белые, от клиента - справа, синие. «Хвостик» - нижний угол со стороны автора */
.chat__log{ flex:1; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:4px; padding:16px 14px 10px; background:#f7f8fa; }
.chat__sys{ align-self:center; margin:0 0 10px; font-size:12.5px; color:var(--ink-3); }
.msg{ max-width:82%; padding:9px 13px; border-radius:18px; font-size:14px; line-height:1.45; overflow-wrap:anywhere; white-space:pre-wrap; }
.msg--in{ align-self:flex-start; border-end-start-radius:6px; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.msg--out{ align-self:flex-end; border-end-end-radius:6px; background:var(--press); color:#fff; }
.msg__meta{ align-self:flex-start; margin:2px 8px 10px; font-size:12px; color:var(--ink-3); }
.msg__meta--out{ align-self:flex-end; }
/* «Request a callback» - быстрое действие прямо над полем ввода */
.chat__cb{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:36px; margin:0 14px 10px; padding:0 14px; border:0; border-radius:999px;
  background:var(--blue-soft); color:var(--blue-ink); font-size:14px; font-weight:600; touch-action:manipulation; }
.chat__cb .ic{ width:16px; height:16px; }
/* поле ввода растёт вместе с текстом (до ~5 строк). Пока пусто - видна кнопка микрофона, как только человек
   начал писать - на её месте «отправить» (класс has-text ставит скрипт) */
.chat__in{ display:flex; align-items:flex-end; gap:6px; padding:8px 10px 10px; background:#fff; box-shadow:inset 0 1px 0 var(--line); }
.chat__field{ flex:1; min-width:0; display:flex; border-radius:20px; background:#f3f3f6; transition:box-shadow .15s; }
.chat__field:focus-within{ box-shadow:inset 0 0 0 1.5px var(--press); }
.chat__field textarea{ flex:1; min-width:0; height:40px; max-height:128px; padding:10px 14px; border:0; outline:0; background:transparent; resize:none; font-size:14px; line-height:20px; }
.chat__send{ display:grid; place-items:center; width:40px; height:40px; flex:none; border:0; border-radius:50%; background:var(--press); color:#fff; animation:pop .18s var(--e) both; }
.chat__send .ic{ scale:var(--dir) 1; }
.chat__in:not(.has-text) .chat__send, .chat__in.has-text .chat__mic{ display:none; }

/* ---------- Вход и регистрация ---------- */
.auth{ position:relative; min-height:100vh; min-height:100dvh; background:#fff; overflow-x:hidden; }
.auth__bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.auth__main{ position:relative; z-index:1; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.auth__top{ display:flex; align-items:center; justify-content:space-between; padding:calc(22px + var(--safe-t)) 32px 22px; }
.auth__top img{ display:block; width:124px; height:40px; object-fit:contain; object-position:left center; }
.auth__mid{ flex:1; display:grid; place-items:center; padding:12px 20px 40px; }
.auth__card{ width:min(460px, 100%); padding:36px 36px 30px; border-radius:26px; animation:cardin .8s var(--e) both;
  background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 30px 80px -44px rgba(30,60,130,.42), 0 1px 2px rgba(20,30,60,.04), inset 0 0 0 1px rgba(255,255,255,.72); }
@keyframes cardin{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
.auth__card h1{ font-size:26px; line-height:1.15; font-weight:700; letter-spacing:-.028em; }
.auth__card > p.lead{ margin-top:8px; }
.auth__form{ display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; margin-top:24px; }
.auth__form--tight{ margin-top:22px; }
.auth__submit{ margin-top:10px; }
.auth__row{ display:flex; align-items:center; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; }
.auth__alt{ margin-top:22px; text-align:center; }
/* ссылки в тексте всегда подчёркнуты. Отступы - чтобы по ним было легко попасть пальцем */
.auth__alt .lnk, .auth__row .lnk{ padding:11px 2px; margin:-11px -2px; text-decoration:underline; text-decoration-color:rgba(29,95,208,.32); text-underline-offset:3px; }
@media (hover: hover){ .auth__alt .lnk:hover, .auth__row .lnk:hover{ text-decoration-color:currentColor; } }
.auth__foot{ display:flex; justify-content:center; gap:14px; padding:0 20px calc(26px + var(--safe-b)); font-size:14px; color:var(--ink-3); }
.big-ic{ display:grid; place-items:center; width:64px; height:64px; margin-bottom:20px; border-radius:20px; background:var(--blue-soft); color:var(--blue); }
.big-ic .ic{ width:30px; height:30px; }
/* «Course purchase»: где проходит курс - под названием, с булавкой; ссылка на оферту с иконкой «откроется отдельно»;
   галочка с длинным текстом - квадрат по первой строке */
.place{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:15px; }
.place .ic{ width:17px; height:17px; color:var(--ink-3); }
.lnk--doc{ justify-self:start; padding:11px 2px; margin:-11px -2px; text-decoration:underline; text-decoration-color:rgba(29,95,208,.32); text-underline-offset:3px; }
.lnk--doc .ic{ scale:1; }
@media (hover: hover){ .lnk--doc:hover{ text-decoration-color:currentColor; } }
.check--top{ align-items:flex-start; min-height:0; padding:12px 0; line-height:1.4; }
.check--top input{ margin-top:1px; }
/* код подтверждения: 6 клеток. Вставка из буфера и автоподстановка из SMS разложатся по клеткам сами (см. скрипт) */
.code{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; direction:ltr; }   /* цифры кода всегда слева направо */
.code input{ min-width:0; height:56px; border:0; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); text-align:center; font-size:22px; font-weight:600;
  font-variant-numeric:tabular-nums; outline:0; }
.code input:focus{ box-shadow:inset 0 0 0 1.5px var(--press), var(--ring); }

/* Фон «Aurora»: три бледных холодных пятна медленно плывут по кругу. Тёплых и фиолетовых оттенков не добавлять.
   ВАЖНО: пятна двигаем только через transform и НЕ вешаем filter:blur на движущийся слой -
   иначе на слабых телефонах всё начинает дёргаться. Мягкость даёт сам radial-gradient.
   Базовый transform у каждого пятна нужен для prefers-reduced-motion: без анимации пятна остаются на своих местах. */
.aur{ position:absolute; inset:0; }
.aur.is-in{ animation:aurin 1.6s var(--e) both; }
@keyframes aurin{ from{ opacity:0; } }
.aur i{ position:absolute; left:0; top:0; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; will-change:transform; opacity:var(--o);
  background:radial-gradient(closest-side, rgba(var(--rgb), .6) 0%, rgba(var(--rgb), .42) 30%, rgba(var(--rgb), .17) 62%, rgba(var(--rgb), .05) 84%, rgba(var(--rgb), 0) 100%);
  animation:var(--path) var(--t) ease-in-out var(--d) infinite; }
.aur i:nth-child(1){ --s:72vmax; --rgb:120, 166, 245; --o:.34; --path:aurA; --t:70s; --d:-12s; transform:translate(82vw, 4vh); }
.aur i:nth-child(2){ --s:66vmax; --rgb:178, 196, 226; --o:.36; --path:aurC; --t:76s; --d:-20s; transform:translate(12vw, 96vh); }
.aur i:nth-child(3){ --s:56vmax; --rgb:160, 204, 244; --o:.22; --path:aurD; --t:82s; --d:-40s; transform:translate(94vw, 92vh); }
@keyframes aurA{ 0%, 100%{ transform:translate(82vw, 4vh) scale(1); } 25%{ transform:translate(74vw, 14vh) scale(1.06); } 50%{ transform:translate(86vw, 24vh) scale(.96); } 75%{ transform:translate(93vw, 8vh) scale(1.04); } }
@keyframes aurC{ 0%, 100%{ transform:translate(12vw, 96vh) scale(1); } 25%{ transform:translate(23vw, 86vh) scale(1.06); } 50%{ transform:translate(6vw, 80vh) scale(.97); } 75%{ transform:translate(16vw, 104vh) scale(1.02); } }
@keyframes aurD{ 0%, 100%{ transform:translate(94vw, 92vh) scale(1); } 25%{ transform:translate(84vw, 99vh) scale(1.04); } 50%{ transform:translate(98vw, 82vh) scale(.96); } 75%{ transform:translate(89vw, 86vh) scale(1.05); } }
/* лёгкое зерно поверх, чтобы на больших градиентах не было полос */
.aur::after{ content:""; position:absolute; inset:0; opacity:.035; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* переход после входа: белый экран, значок Pelliron, потом кабинет. Около 1,3 секунды */
.sting{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:#fff; opacity:0; transition:opacity .45s var(--e); }
.sting.is-in{ opacity:1; }
.sting.is-out{ opacity:0; transition:opacity .7s ease; }
.sting img{ position:relative; width:64px; height:64px; opacity:0; transform:scale(.96); }
.sting.is-in img{ animation:markin .6s var(--e) .35s forwards; }
@keyframes markin{ to{ opacity:1; transform:none; } }

/* ================= АДАПТИВ ================= */

/* большие мониторы: контенту можно чуть шире */
@media (min-width: 1800px){ :root{ --cmax:1280px; } }

/* низкие экраны ноутбуков (1366x768 и т.п.): меню должно помещаться целиком без прокрутки */
@media (max-height: 840px) and (min-width: 961px){
  .side{ padding-top:16px; }
  .side__logo{ margin-bottom:14px; }
  .nav a{ min-height:35px; }
  .nav__label{ margin:12px 10px 2px; }
  .nav__sep{ margin:8px 10px; }
}
/* низкие экраны: регистрация помещается целиком, вместе со строкой «Уже есть аккаунт?» */
@media (max-height: 940px) and (min-width: 761px){
  .auth__top{ padding:calc(14px + var(--safe-t)) 32px 10px; }
  .auth__mid{ padding:0 20px 6px; }
  .auth__card{ padding:26px 32px 22px; }
  .auth__form{ margin-top:18px; }
  .auth__form.auth__form--grp{ gap:14px; }
  .grp{ gap:8px; }
  .fl{ height:52px; }
  .eye{ top:4px; }
  .auth__alt{ margin-top:16px; }
  .auth__foot{ padding-bottom:calc(14px + var(--safe-b)); }
}

@media (max-width: 1100px){
  .grid-2, .contacts{ grid-template-columns:minmax(0, 1fr); }
  .plans{ grid-template-columns:minmax(0, 1fr); }
  .plans .side-card{ grid-template-columns:auto minmax(0, 1fr); align-items:start; }
}

/* планшет и меньше: боковое меню уезжает, открывается кнопкой */
@media (max-width: 960px){
  .shell{ grid-template-columns:minmax(0, 1fr); }
  .side{ position:fixed; z-index:60; inset-inline-start:0; top:0; width:min(320px, 86vw); padding-top:calc(20px + var(--safe-t)); padding-left:calc(14px + var(--safe-l));
    transform:translateX(calc(-102% * var(--dir))); visibility:hidden; transition:transform .28s var(--e), visibility 0s .28s; box-shadow:var(--sh-pop); }
  html.nav-open .side{ transform:none; visibility:visible; transition:transform .28s var(--e), visibility 0s; }
  [dir="rtl"] .side{ padding-left:14px; padding-right:calc(14px + var(--safe-r)); }
  .side .side__close{ display:grid; width:44px; height:44px; }
  .scrim{ position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.3); animation:fade .2s both; }
  html.nav-open .scrim{ display:block; }
  html.nav-open .chat-btn, html.nav-open .chat{ display:none; }
  :root{ --gut:24px; }
  .top{ padding-top:var(--safe-t); height:calc(var(--top-h) + var(--safe-t)); padding-left:max(var(--gut), var(--safe-l)); padding-right:max(var(--gut), var(--safe-r)); }
  .top .top__menu{ display:grid; width:44px; height:44px; margin-inline-start:-10px; }
  .top__logo{ display:block; }
  .crumbs{ display:none; }
  .content{ padding-top:4px; padding-bottom:40px; }
  .vids{ grid-template-columns:minmax(0, 1fr); }
}

/* ТЕЛЕФОН */
@media (max-width: 760px){
  :root{ --gut:16px; }
  /* нижнее меню вместо бургера */
  .top .top__menu{ display:none; }
  .main{ padding-bottom:calc(var(--tab-h) + var(--safe-b)); }
  .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
    padding:6px max(6px, var(--safe-r)) calc(6px + var(--safe-b)) max(6px, var(--safe-l)); background:rgba(252,252,253,.9);
    -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); box-shadow:0 -1px 0 var(--line); }
  .tabbar a, .tabbar button{ display:grid; justify-items:center; align-content:center; gap:3px; min-width:0; min-height:52px; padding:0 2px; border:0; border-radius:12px; background:none;
    color:var(--ink-2); font-size:11.5px; font-weight:500; line-height:1.2; }
  .tabbar span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabbar .ic{ width:23px; height:23px; }
  .tabbar [aria-current="page"]{ color:var(--blue-ink); }
  .tabbar [aria-current="page"] .ic{ color:var(--blue); }
  .tabbar a:active, .tabbar button:active{ background:#eef0f4; }
  /* кнопка чата и всплывашки поднимаются над нижним меню */
  html.in-app .chat-btn{ inset-inline-end:calc(16px + var(--safe-r)); bottom:calc(var(--tab-h) + 14px + var(--safe-b)); }
  html.in-app .toast{ bottom:calc(var(--tab-h) + 20px + var(--safe-b)); }

  .head h1{ font-size:24px; }
  .head{ align-items:flex-start; }
  .head__acts{ width:100%; }
  .head__acts .btn{ flex:1 1 0; }
  .seg{ display:flex; width:100%; }
  .seg button{ flex:1 1 0; min-height:40px; padding:0 8px; }
  /* цифры счёта - строками «название ... значение»: так влезет и $100,000.00 */
  .stats{ grid-template-columns:minmax(0, 1fr); }
  .stats--pad{ padding:4px 0; }
  .stat{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:12px 18px; }
  .acct--page .stat{ padding:12px 22px; }
  .stat + .stat{ box-shadow:inset 0 1px 0 var(--line); }
  .stat__v{ margin:0; font-size:18px; text-align:end; }
  .banner{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:14px; padding:16px; }
  .banner .btn{ grid-column:1 / -1; width:100%; margin:2px 0 0; }
  .card__head{ padding:16px 18px 4px; }
  .row, .courses .row{ grid-template-columns:minmax(0, 1fr) auto; row-gap:6px; }
  .row .row__f{ grid-column:1; }
  .row .btn{ grid-column:1 / -1; justify-self:stretch; min-height:44px; }
  .plans .side-card{ grid-template-columns:minmax(0, 1fr); }
  .dl{ grid-template-columns:minmax(0, 1fr); }
  .dl div, .dl div:nth-child(odd), .dl div:nth-last-child(2):nth-child(odd){ box-shadow:inset 0 -1px 0 var(--line); }
  .dl div:last-child{ box-shadow:none; }
  .contact{ display:grid; grid-template-columns:48px minmax(0, 1fr); align-items:center; gap:14px 16px; padding:18px; }
  .contact .btn{ grid-column:1 / -1; width:100%; margin:0; }
  .opt__acts .btn{ width:100%; min-height:48px; }
  .two, .grp.two{ grid-template-columns:minmax(0, 1fr); }

  /* вход и регистрация: форма сверху, не по центру - чтобы клавиатура её не закрывала */
  .auth__top{ padding:calc(16px + var(--safe-t)) max(16px, var(--safe-r)) 16px max(16px, var(--safe-l)); }
  .auth__mid{ place-items:start center; padding:4px 16px 32px; }
  .auth__card{ padding:28px 22px 24px; border-radius:22px; }

  /* диалог - снизу, как «шторка», с полоской-ручкой сверху */
  .veil{ place-items:end stretch; padding:0; }
  .dialog{ width:100%; max-height:92vh; max-height:92dvh; padding:14px 18px calc(18px + var(--safe-b)); border-radius:22px 22px 0 0; animation:sheet .32s var(--e) both; }
  .dialog::before{ content:""; display:block; width:36px; height:4px; margin:0 auto 14px; border-radius:4px; background:var(--line-2); }
  .dialog__acts .btn{ flex:1 1 0; min-height:48px; }

}

/* ЧАТ НА ВЕСЬ ЭКРАН: телефон, а также телефон, повёрнутый горизонтально (по высоте там ещё меньше места).
   То же условие стоит в скрипте (CHATFULL) - если меняете здесь, поменяйте и там.
   Если браузер знает visualViewport, скрипт ставит класс vv и задаёт высоту видимой части экрана:
   открылась клавиатура - окно стало ниже, поле ввода осталось над ней. */
@media (max-width: 760px), (max-height: 560px) and (pointer: coarse){
  .chat{ inset:0; width:auto; height:auto; border-radius:0; animation:sheet .3s var(--e) both; }
  .chat.vv{ bottom:auto; height:var(--vvh); transform:translateY(var(--vvt)); }
  .chat__head{ padding:calc(8px + var(--safe-t)) max(6px, var(--safe-r)) 8px max(16px, var(--safe-l)); }
  [dir="rtl"] .chat__head{ padding-left:max(6px, var(--safe-l)); padding-right:max(16px, var(--safe-r)); }
  .chat__head .ibtn{ width:44px; height:44px; }
  .chat__close .i-x{ display:none; }
  .chat__close .i-min{ display:block; }
  .chat__log{ padding:16px max(12px, var(--safe-r)) 10px max(12px, var(--safe-l)); }
  .msg{ max-width:min(86%, 560px); padding:10px 14px; font-size:15px; }   /* 560px - чтобы горизонтально строки не были бесконечными */
  .chat__cb{ margin-left:max(12px, var(--safe-l)); margin-right:max(12px, var(--safe-r)); }
  .chat__in{ padding:8px max(8px, var(--safe-r)) calc(8px + var(--safe-b)) max(8px, var(--safe-l)); }
  .chat.kb-open .chat__in{ padding-bottom:8px; }              /* клавиатура открыта - отступ под «полоску» iPhone не нужен */
  .chat.kb-open .chat__cb{ display:none; }                    /* и «Request a callback» прячем, пока человек пишет: места мало */
  html.chat-open .chat-btn{ display:none; }
}

/* совсем узкие экраны (старые iPhone SE, маленькие Android) */
@media (max-width: 360px){
  .auth__card{ padding:24px 16px 20px; }
  .phone{ grid-template-columns:116px minmax(0, 1fr); }
  .quick{ grid-template-columns:repeat(4, minmax(0, 1fr)); margin:0 -6px -6px; }
  .quick a{ font-size:13px; }
  .quick .qi{ width:44px; height:44px; }
  .sizes a{ padding:10px 12px 11px; }
  .sizes b{ font-size:16px; }
  .code{ gap:6px; }
  .tabbar a, .tabbar button{ font-size:11px; }
}

/* сенсорные экраны: все нажимаемые зоны не меньше 44px, поля ввода 16px (иначе iOS увеличивает страницу) */
@media (pointer: coarse), (max-width: 760px){
  .nav a{ min-height:46px; }
  .menu button, .menu a{ min-height:46px; }
  .chip-btn{ min-height:44px; }
  .ibtn{ width:44px; height:44px; }
  .ava-btn{ width:44px; height:44px; }
  .btn, .row .btn, .alert .btn{ min-height:44px; }
  .seg button{ min-height:40px; }
  .fl input, .fl select, .inp input, .inp select, .inp textarea, .chat__field textarea{ font-size:16px; }
  .chat__field textarea{ height:44px; padding:12px 14px; }
  .chat__send{ width:44px; height:44px; }
  .chat__cb{ min-height:44px; }
}

/* если браузер не умеет размывать фон - просто непрозрачные плашки, чтобы текст читался */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .auth__card{ background:#fff; }
  html.is-scrolled .top{ background:#f5f5f7; }
  .tabbar{ background:#fcfcfd; }
}

/* режим высокой контрастности Windows: тени там не рисуются, а у нас на тенях все рамки. Поэтому рамки - через outline */
@media (forced-colors: active){
  .fl, .inp, .phone, .code input, .card, .auth__card, .btn--s, .seg, .dialog, .chat, .menu, .tabbar, .banner{ outline:1px solid CanvasText; outline-offset:-1px; }
  .phone > .fl{ outline:0; }
  .sw i{ outline:1px solid CanvasText; }
  .sw input:checked + i{ background:Highlight; }
  .sw i::after{ background:CanvasText; }
}

/* если в системе отключены анимации - всё статично (фон, появление страниц, переход после входа) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}