/* ============================================================
   Arktropix — Platform Layer (v2, «чистый премиум»)
   Поверх base.css. Направление: Airbnb/Stripe — воздух, мягкие
   тени, нейтральные линии, один яркий синий акцент, крупные
   радиусы, плавные микро-анимации 150–300 мс.
   ============================================================ */
:root {
  --ax-display: 'Manrope Local', 'Manrope', 'Inter Local', 'Inter', 'Segoe UI', sans-serif;
  --ax-mono: 'Inter Local', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --ax-r: 16px;
  --ax-r-sm: 12px;
  --ax-border: 1px solid rgba(148,163,184,0.15);
  --ax-border-hi: 1px solid rgba(111,170,255,0.55);
  --ax-shadow: 0 24px 48px -12px rgba(0,0,0,0.50);
  --ax-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Две строки desktop-шапки + безопасный визуальный зазор. */
  --ax-sticky-nav-top: 136px;
  --ax-sticky-panel-top: calc(var(--ax-sticky-nav-top) + 16px);
  --txt: var(--text);
}

/* E2EE recovery/onboarding. It deliberately sits above page modals: the
   recovery words must be acknowledged before private chat keys are used. */
.ax-e2ee-setup{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:20px;background:rgba(3,9,18,.76);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%)}
.ax-e2ee-card{width:min(620px,100%);max-height:min(820px,calc(100dvh - 40px));overflow:auto;padding:30px;border:1px solid rgba(118,177,255,.24);border-radius:24px;background:linear-gradient(145deg,rgba(18,33,51,.96),rgba(8,18,31,.94));box-shadow:0 28px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.05);color:#f3f8ff}
.ax-e2ee-card h2{margin:12px 0 8px;font-size:clamp(1.45rem,4vw,2rem)}
.ax-e2ee-intro,.ax-e2ee-warning{color:#aebed1;line-height:1.55}
.ax-e2ee-shield{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:linear-gradient(145deg,#2d8cff,#72b7ff);box-shadow:0 12px 35px rgba(45,140,255,.32);font-size:1.5rem}
.ax-e2ee-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0;padding:14px;border:1px solid rgba(116,164,217,.2);border-radius:17px;background:rgba(2,10,20,.42);user-select:all}
.ax-e2ee-words span{min-width:0;padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.035);font:500 .9rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis}
.ax-e2ee-words b{display:inline-block;min-width:20px;color:#69adff;font-size:.72rem;user-select:none}
.ax-e2ee-check{display:flex;align-items:center;gap:10px;margin:18px 0;cursor:pointer}.ax-e2ee-check input{width:18px;height:18px;accent-color:#3d94ff}
.ax-e2ee-card>.ax-e2ee-content>.ax-btn{width:100%}.ax-e2ee-card .ax-btn:disabled{opacity:.45;cursor:not-allowed}
.ax-e2ee-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 8px}
.ax-e2ee-cell{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:7px 9px;border:1px solid rgba(116,164,217,.26);border-radius:10px;background:rgba(2,10,20,.55);cursor:text}
.ax-e2ee-cell b{min-width:18px;color:#69adff;font-size:.7rem;text-align:right;user-select:none}
.ax-e2ee-cell input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#f3f8ff;font:500 .88rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace}
.ax-e2ee-cell:focus-within{border-color:#4d9fff;box-shadow:0 0 0 3px rgba(77,159,255,.13)}
.ax-e2ee-input{width:100%;margin:18px 0 8px;padding:14px 16px;resize:vertical;border:1px solid rgba(116,164,217,.26);border-radius:14px;outline:0;background:rgba(2,10,20,.55);color:#f3f8ff;font:500 .95rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.ax-e2ee-input:focus{border-color:#4d9fff;box-shadow:0 0 0 3px rgba(77,159,255,.13)}
.ax-e2ee-error{margin:7px 0;color:#ff8f9b}.ax-e2ee-actions{display:flex;gap:10px;margin-top:18px}.ax-e2ee-actions .ax-btn{flex:1}
.ax-e2ee-rotate-warning{display:flex;align-items:flex-start;gap:12px;margin:18px 0;padding:14px;border:1px solid rgba(255,185,88,.24);border-radius:14px;background:rgba(163,100,20,.1);color:#c9d6e5;line-height:1.5}.ax-e2ee-rotate-warning i{margin-top:2px;color:#ffbd61}.ax-e2ee-rotate-warning p{margin:0}
.ax-e2ee-reset-link{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px;border:1px solid rgba(255,112,126,.18);border-radius:12px;background:rgba(173,40,57,.07);color:#ff9aa5;font-weight:750}.ax-e2ee-reset-link:hover{border-color:rgba(255,112,126,.38);background:rgba(173,40,57,.13)}
.ax-e2ee-reset-warning{display:flex;align-items:flex-start;gap:12px;margin:18px 0;padding:15px;border:1px solid rgba(255,91,108,.32);border-radius:14px;background:rgba(154,24,43,.13);color:#f0cbd0;line-height:1.55}.ax-e2ee-reset-warning i{margin-top:3px;color:#ff6575;font-size:1.1rem}.ax-e2ee-reset-warning p{margin:0}.ax-e2ee-card .ax-btn-danger{border-color:rgba(255,91,108,.5);background:linear-gradient(135deg,#b92c42,#e64f62);color:#fff;box-shadow:0 10px 28px rgba(185,44,66,.22)}
.ax-e2ee-error-code{display:block;margin-top:.45rem;color:var(--muted);font:600 .72rem/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}
.ax-backup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0;padding:14px;border:1px solid rgba(116,164,217,.22);border-radius:17px;background:rgba(2,10,20,.48)}
.ax-backup-code{display:flex;align-items:center;min-width:0;overflow:hidden;border:1px solid rgba(105,173,255,.2);border-radius:11px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px rgba(255,255,255,.025);user-select:all}
.ax-backup-code>b{display:grid;align-self:stretch;place-items:center;min-width:38px;padding:9px 7px;border-right:1px solid rgba(105,173,255,.18);background:rgba(54,137,231,.1);color:#69adff;font:800 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:none}
.ax-backup-code>code{display:block;min-width:0;padding:10px 11px;color:#eaf4ff;font:700 .78rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.ax-backup-info{display:grid;gap:10px;margin:14px 0}.ax-backup-info p{margin:0;color:var(--muted);line-height:1.5}.ax-backup-info i{color:#63aaff;margin-right:8px}
.ax-backup-actions{display:flex;gap:10px}.ax-backup-actions .ax-btn{flex:1}.ax-backup-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid rgba(83,211,152,.22);border-radius:13px;background:rgba(30,133,91,.1)}
@media(max-width:560px){.ax-backup-grid{grid-template-columns:1fr}.ax-backup-actions{flex-direction:column}}
@media(max-width:560px){.ax-e2ee-card{padding:22px 18px;border-radius:20px}.ax-e2ee-words{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}.ax-e2ee-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ax-e2ee-actions{flex-direction:column}}
body { background: var(--dark); }
body.ax-body { padding-bottom: 0; }

/* зерно удалено — чистая сцена */
.ax-grain { display: none; }

/* ============ ШАПКА ============ */
/* Прилипает обёртка #axpHeader, а не сама шапка.
   position:sticky ограничен боксом родителя, а родителем шапки был
   div ровно её высоты (118px) — «прилипать» было некуда, и при первом
   же движении колеса навбар уезжал вместе с контентом. Родитель
   обёртки — body во всю высоту документа, там sticky работает. */
#axpHeader { position: sticky; top: 0; z-index: 1040; }
.ax-header { position: relative; z-index: 1;
  background: rgba(9,12,16, 0.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: var(--ax-border); }
.ax-header-in { display: flex; align-items: center; gap: 14px; padding: 14px 12px; }
/* На 390px логотип, бургер и ряд действий в сумме давали 392px: аватар
   вылезал за край, а шапка получала горизонтальную прокрутку. Ужимаем
   отступы и даём логотипу сжиматься — ряд действий должен помещаться целиком,
   это единственный вход в профиль на телефоне. */
@media (max-width: 480px) {
  .ax-header-in { gap: 9px; padding: 12px 10px; }
  .ax-header-in > .ax-logo { font-size: 17px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .ax-header .ax-actions { gap: 5px; flex: 0 0 auto; }
  .ax-header .ax-actions .ax-iconbtn { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
  .ax-header-in { gap: 7px; }
  .ax-header .ax-actions .ax-iconbtn { width: 33px; height: 33px; }
}
.ax-logo { font-family: var(--ax-display); font-weight: 700; font-size: 19px; letter-spacing: 0.06em;
  color: var(--white); text-decoration: none; white-space: nowrap; position: relative; }
.ax-logo span { color: var(--ice); }
.ax-logo:hover { color: var(--white); }
.ax-logo-dot { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%;
  background: var(--ice); box-shadow: 0 0 12px var(--ice); animation: axPulse 2.6s ease-in-out infinite; }
@keyframes axPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.ax-catalog-btn { align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: var(--grad); color: var(--white); text-decoration: none; font-weight: 700; font-size: 14px;
  box-shadow: var(--glow); transition: transform .25s var(--ax-ease), filter .25s; }
.ax-catalog-btn:hover { color: var(--white); background: var(--grad-hover); filter: none; }

.ax-search { position: relative; flex: 1; align-items: center; min-width: 0;
  background: var(--surface); border: var(--ax-border); border-radius: 999px; padding: 4px 4px 4px 16px; }
.ax-search:focus-within { border: var(--ax-border-hi); box-shadow: 0 0 0 4px rgba(111,170,255,0.08); }
.ax-search i { color: var(--gray); font-size: 15px; }
.ax-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text);
  padding: 8px 10px; font-size: 14px; }
.ax-search input::placeholder { color: var(--gray); }
.ax-search button { border: 0; border-radius: 999px; padding: 8px 20px; background: var(--grad); color: var(--white);
  font-weight: 700; font-size: 13px; transition: filter .2s; }
.ax-search button:hover { background: var(--grad-hover); filter: none; }
.ax-search-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none;
  background: var(--surface-2); border: var(--ax-border); border-radius: var(--ax-r-sm);
  box-shadow: var(--ax-shadow); overflow: hidden; }
.ax-search-drop.open { display: block; }
.ax-search-drop a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text);
  text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(111,170,255,0.07); }
.ax-search-drop a:last-child { border-bottom: 0; }
.ax-search-drop a:hover { background: rgba(111,170,255,0.08); }
.ax-search-drop a b { margin-left: auto; font-family: var(--ax-mono); font-size: 12px; color: var(--ice); font-weight: 600; }
.ax-sd-art { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--ice); }
.ax-sd-art svg { width: 100%; height: 100%; }
.ax-sd-empty { display: block; padding: 14px; color: var(--gray); font-size: 13px; }

.ax-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ax-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 42px; height: 42px; border-radius: 12px; border: var(--ax-border); background: transparent;
  color: var(--text); font-size: 18px; text-decoration: none; transition: border-color .2s, color .2s, transform .2s; }
.ax-iconbtn small { font-size: 10px; font-family: var(--ax-mono); }
.ax-iconbtn:hover { border: var(--ax-border-hi); color: var(--ice); transform: translateY(-1px); }
.ax-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--ice); color: #06131d; font-size: 10px; font-weight: 800;
  font-family: var(--ax-mono); display: none; align-items: center; justify-content: center; line-height: 17px; }
.ax-count.show { display: inline-flex; }
.ax-langbtn { width: auto; padding: 0 15px; gap: 7px; border-radius: 999px; }
.ax-langbtn small { font-size: 11.5px; letter-spacing: .06em; font-weight: 700; }
.ax-langbtn i { font-size: 16px; }
.ax-auth-zone { display: flex; gap: 8px; align-items: center; }
.ax-userbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: var(--ax-border-hi); background: rgba(111,170,255,0.08); color: var(--text); font-weight: 600; font-size: 14px; }

.ax-subnav { border-top: 1px solid rgba(111,170,255,0.07); }
.ax-subnav .container-xl { display: flex; gap: 4px; overflow-x: auto; }
.ax-subnav a { padding: 9px 14px; color: var(--gray); text-decoration: none; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.ax-subnav a:hover, .ax-subnav a.active { color: var(--ice); border-bottom-color: var(--ice); }

/* мобильный tabbar */
.ax-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1039; display: flex;
  background: rgba(9,12,16,0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: var(--ax-border); padding-bottom: env(safe-area-inset-bottom); }
.ax-tabbar a, .ax-tabbar button { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 9px 0 7px; color: var(--gray); text-decoration: none; background: transparent; border: 0; }
.ax-tabbar i { font-size: 19px; }
.ax-tabbar span { font-size: 10px; font-weight: 600; }
.ax-tabbar .active, .ax-tabbar a:hover { color: var(--ice); }
.ax-tabbar .ax-count { top: 2px; right: calc(50% - 20px); }
@media (max-width: 991px) { body.ax-body { padding-bottom: 68px; } }

/* ============ КНОПКИ / БАЗА ============ */
.ax-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 26px; border-radius: 999px; border: 0; font-weight: 700; font-size: 14.5px;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--ax-ease), filter .2s, border-color .2s; }
.ax-btn-primary { background: var(--grad); color: var(--white); box-shadow: var(--glow); }
/* brightness() на hover высветлял и без того светлый конец градиента —
   надпись пропадала совсем. Наведение теперь наоборот углубляет тон. */
.ax-btn-primary:hover { color: var(--white); background: var(--grad-hover); filter: none; }
.ax-btn-primary:disabled { opacity: .45; transform: none; cursor: not-allowed; }
.ax-btn-ghost { background: transparent; color: var(--text); border: var(--ax-border-hi); }
.ax-btn-ghost:hover { color: var(--ice); }
.ax-btn-ghost.on { color: var(--ice); background: rgba(111,170,255,0.08); }
.ax-link { background: transparent; border: 0; color: var(--ice); font-size: 13.5px; text-decoration: underline; }
.ax-muted { color: var(--gray); font-size: 13px; }
.ax-hr { border-color: rgba(111,170,255,0.14); }
.ax-h6 { font-family: var(--ax-display); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ice); margin: 22px 0 10px; }
.ax-input { background: var(--surface) !important; border: var(--ax-border) !important; color: var(--text) !important;
  border-radius: var(--ax-r-sm) !important; padding: 11px 14px; }
.ax-input:focus { border: var(--ax-border-hi) !important; box-shadow: 0 0 0 4px rgba(111,170,255,0.08) !important; }
.ax-sku { font-family: var(--ax-mono); font-size: 11px; letter-spacing: .08em; color: var(--gray); }

/* Подсказка под полем телефона. BUILD 20260728-271: два состояния — спокойное
   зелёное «код страны подставлен» и красное «номер не сходится по длине».
   Строка появляется только когда есть что сказать (атрибут hidden снимается
   из скрипта), поэтому у неё нет собственного вертикального отступа сверху
   в скрытом виде — иначе под пустым полем зияла бы дыра. */
.ax-phone-hint { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--gray); }
.ax-phone-hint[hidden] { display: none; }
.ax-phone-hint-ok { color: #6fdc9c; }
.ax-phone-hint-err { color: #ff8f9b; }

/* ============ СЕКЦИИ ============ */
.ax-section { padding: 104px 0; position: relative; }
@media (max-width: 767px) { .ax-section { padding: 64px 0; } }
.ax-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
/* Крупный кегль требует более плотного трекинга — иначе заголовок
   рассыпается; мелкий, наоборот, разреженного. Отсюда разные значения. */
.ax-sec-title { font-family: var(--ax-display); font-weight: 750; font-size: clamp(24px, 2.7vw, 38px);
  color: var(--white); margin: 0; letter-spacing: -0.028em; line-height: 1.14; }
.ax-sec-title::before { content: none; }
.ax-sec-more { white-space: nowrap; color: var(--ice); text-decoration: none; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; }
.ax-sec-more:hover { color: var(--white); }
.ax-sec-more i { transition: transform .25s var(--ax-ease); }
.ax-sec-more:hover i { transform: translateX(4px); }

/* ============ HERO (портал) ============ */
.ax-hero { position: relative; padding: 96px 0 84px; overflow: hidden;
  background: radial-gradient(1100px 520px at 78% -10%, rgba(46,111,242,0.35), transparent 60%),
              radial-gradient(700px 500px at 0% 110%, rgba(111,170,255,0.08), transparent 60%), var(--darker); }
.ax-hero::before { content: none; }
.ax-kicker { font-family: var(--ax-mono); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ice); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ax-kicker::before { content: ''; width: 34px; height: 1px; background: var(--ice); }
.ax-hero h1 { font-family: var(--ax-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(34px, 5.6vw, 66px); line-height: 1.06; color: var(--white); margin-bottom: 20px; }
.ax-hero h1 span { background: linear-gradient(120deg, #6FAAFF 10%, #53A0FF 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ice); }
.ax-hero-sub { color: var(--gray); font-size: clamp(15px, 1.6vw, 17.5px); max-width: 560px; margin-bottom: 30px; }

/* большой поиск в hero */
.ax-hero-search { display: flex; align-items: center; gap: 0; max-width: 620px;
  background: rgba(19,26,35,0.85); border: var(--ax-border-hi); border-radius: 999px; padding: 6px 6px 6px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 6px rgba(111,170,255,0.04); }
.ax-hero-search i { color: var(--ice); font-size: 17px; margin-right: 10px; }
.ax-hero-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 15.5px; }
.ax-hero-search button { border: 0; border-radius: 999px; padding: 13px 28px; background: var(--grad);
  color: var(--white); font-weight: 700; box-shadow: var(--glow); transition: filter .2s; }
.ax-hero-search button:hover { background: var(--grad-hover); filter: none; }
.ax-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ax-hero-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  border: var(--ax-border); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: rgba(19,26,35,0.6); transition: border-color .2s, color .2s, transform .2s var(--ax-ease); }
.ax-hero-chips a:hover { border: var(--ax-border-hi); color: var(--ice); transform: translateY(-2px); }
.ax-hero-stats { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.ax-hstat b { display: block; font-family: var(--ax-display); font-size: 27px; color: var(--white); }
.ax-hstat span { font-family: var(--ax-mono); font-size: 11px; letter-spacing: .1em; color: var(--gray); text-transform: uppercase; }

/* ============ MARQUEE (кинетика, awwwards) ============ */
.ax-marquee { position: relative; overflow: hidden; padding: 26px 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.ax-marquee::before, .ax-marquee::after { content: none; }
.ax-marquee-track { display: flex; width: max-content; will-change: transform;
  animation: axMq 46s linear infinite; }
.ax-marquee:hover .ax-marquee-track { animation-play-state: paused; }
.ax-marquee-track span { flex: 0 0 auto; white-space: nowrap; padding-right: 26px;
  font-family: var(--ax-display); font-weight: 800; font-size: clamp(26px, 4vw, 46px);
  letter-spacing: -0.01em; color: transparent; opacity: .9;
  background: linear-gradient(90deg, var(--ice), #9BB8FF 55%, var(--ice));
  -webkit-background-clip: text; background-clip: text; }
.ax-mq-dot { -webkit-text-stroke: 0; color: var(--ice); font-size: .5em; vertical-align: middle; }
@keyframes axMq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ax-marquee-track { animation: none; } }

/* ============ ПЛИТКИ КАТЕГОРИЙ ============ */
/* Категории: два ряда, дальше — вбок. Ширина колонки считается так, чтобы в
   поле зрения помещалось ровно четыре плитки, как в прежней сетке, а пятая
   начинала выглядывать краем только на узких экранах — это и есть подсказка,
   что список продолжается. */
/* Плитка категории была широким прямоугольником: в ряд влезало четыре, а
   справа от короткого названия оставалась пустая половина плитки. Компактный
   квадрат вмещает восемь — за два ряда видно шестнадцать категорий вместо
   восьми, и листать приходится вдвое меньше. */
.ax-cats { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: calc((100% - 7 * 12px) / 8); gap: 12px; }
.ax-cats > * { scroll-snap-align: start; }

.ax-rail { position: relative; }
.ax-rail-vp { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  /* поля под тень и обводку плиток: без них hover обрезался краем вьюпорта.
     scroll-padding — чтобы залипание учитывало это поле: без него лента в
     покое стояла на scrollLeft=6 и левая стрелка не гасла в самом начале. */
  margin: -6px; padding: 6px; scroll-padding: 6px; }
.ax-rail-vp::-webkit-scrollbar { display: none; }
.ax-rail-vp.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; }
.ax-rail-vp.is-dragging * { pointer-events: none; }

.ax-rail-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; border-radius: 50%;
  transform: translateY(-50%); border: var(--ax-border); background: var(--surface);
  color: var(--text); font-size: 15px; box-shadow: 0 10px 26px rgba(8,15,30,0.45);
  transition: opacity .2s, transform .2s var(--ax-ease), border-color .2s, color .2s; }
.ax-rail-nav:hover { border: var(--ax-border-hi); color: var(--ice); }
.ax-rail-nav:active { transform: translateY(-50%) scale(.92); }
.ax-rail-nav[hidden] { display: none; }
.ax-rail-prev { left: -18px; }
.ax-rail-next { right: -18px; }
html[data-theme="light"] .ax-rail-nav { background: #FFFFFF; border-color: transparent;
  box-shadow: var(--ax-e2); }
html[data-theme="light"] .ax-rail-nav:hover { border-color: transparent; box-shadow: var(--ax-e3); }
@media (prefers-reduced-motion: reduce) { .ax-rail-vp { scroll-behavior: auto; } }
.ax-cat-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 10px; padding: 13px; aspect-ratio: 1; border-radius: var(--ax-r-sm);
  background: var(--surface); border: var(--ax-border);
  color: var(--text); text-decoration: none; overflow: hidden;
  transition: transform .3s var(--ax-ease), border-color .3s, box-shadow .3s; }
.ax-cat-tile::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px 140px at 20% 0%, rgba(111,170,255,0.12), transparent 70%); }
.ax-cat-tile:hover { border: var(--ax-border-hi); box-shadow: var(--ax-shadow); color: var(--white); }
.ax-cat-tile:hover::after { opacity: 1; }
.ax-cat-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: rgba(111,170,255,0.09); color: var(--ice); font-size: 23px; flex: 0 0 auto; }
/* Длинные названия («Бытовая техника», «Комплектующие») в узкой плитке
   переносятся — держим две строки и обрезаем, иначе третья строка выдавливает
   иконку и квадраты в ряду перестают совпадать. */
.ax-cat-name { font-weight: 700; font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Стрелка при наведении встаёт над иконкой, а не в углу с названием: в узкой
   плитке углы заняты, и она перекрывала третью строку длинных названий. */
.ax-cat-arr { position: absolute; right: 13px; top: 22px; color: var(--ice); opacity: 0;
  transform: translateX(-8px); transition: all .3s var(--ax-ease); }
.ax-cat-tile:hover .ax-cat-arr { opacity: 1; transform: none; }
@media (max-width: 1199px) { .ax-cats { grid-auto-columns: calc((100% - 5 * 12px) / 6); } }
@media (max-width: 991px) { .ax-cats { grid-auto-columns: calc((100% - 4 * 12px) / 5); }
  .ax-rail-prev, .ax-rail-next { display: none; } }
@media (max-width: 767px) { .ax-cats { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
/* Было 2.6 колонки — «подглядывание» третьей плитки как намёк на прокрутку.
   На деле третья плитка просто обрезалась краем экрана и читалась как баг.
   Три целых плитки: ничего не режется, а видно даже больше. */
@media (max-width: 575px) { .ax-cats { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; }
  .ax-cat-tile { padding: 11px; gap: 8px; }
  .ax-cat-ico { width: 34px; height: 34px; border-radius: 11px; font-size: 17px; }
  .ax-cat-name { font-size: 11.5px; -webkit-line-clamp: 2; } }
@media (max-width: 380px) { .ax-cats { grid-auto-columns: calc((100% - 10px) / 2.2); gap: 10px; } }

/* ============ ЕДИНАЯ КАРТОЧКА ============ */
.ax-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1199px) { .ax-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .ax-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* Услуги — карточки низкие, товарам такая плотность не подошла бы: у них
   фотография, и пятая колонка сделала бы её нечитаемой. Поэтому колонок
   больше только в той сетке, где лежат услуги. */
.ax-grid:has(> .ax-service) { grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1399px) { .ax-grid:has(> .ax-service) { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1199px) { .ax-grid:has(> .ax-service) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .ax-grid:has(> .ax-service) { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ax-card { position: relative; display: flex; flex-direction: column; border-radius: var(--ax-r);
  background: var(--surface); border: var(--ax-border); overflow: hidden;
  transition: border-color .3s, box-shadow .3s; }
.ax-card:hover { border: var(--ax-border-hi); box-shadow: var(--ax-shadow); }
@media (hover: hover) and (pointer: fine) {
  .ax-cat-tile,
  .js-motion [data-stagger].in > .ax-cat-tile {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .18s var(--ax-ease), border-color .3s, box-shadow .3s;
  }
  /* наклон за курсором остаётся — уходит только вертикальный прыжок */
  .ax-cat-tile:hover,
  .js-motion [data-stagger].in > .ax-cat-tile:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  /* блик следует за курсором */
  .ax-cat-tile::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(280px 200px at var(--gx, 50%) var(--gy, 50%), rgba(111,170,255,0.10), transparent 60%);
    transition: opacity .3s;
  }
  .ax-cat-tile:hover::before { opacity: 1; }
}
.ax-card-media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--surface-2), var(--darker)); color: #9FBFFF; overflow: hidden; }
.ax-art { width: 58%; height: 58%; filter: drop-shadow(0 10px 24px rgba(111,170,255,0.12)); }

/* чертёжные уголки — фирменный hover-элемент */
.ax-bp { display: none; }
.ax-bp::before, .ax-bp::after { content: ''; position: absolute; background: rgba(111,170,255,0.7); }
.ax-bp::before { width: 100%; height: 1.5px; } .ax-bp::after { width: 1.5px; height: 100%; }
.bp-a { top: 10px; left: 10px; transform: translate(6px, 6px); }
.bp-b { bottom: 10px; right: 10px; transform: translate(-6px, -6px) rotate(180deg); }
.ax-pmedia:hover .ax-bp { opacity: 1; transform: none; }

.ax-badge { position: absolute; top: 10px; right: 10px; padding: 4px 11px; border-radius: 999px;
  font-family: var(--ax-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ax-badge-hit { background: var(--grad); color: var(--white); }
.ax-badge-new { background: rgba(111,170,255,0.16); color: var(--ice); border: 1px solid rgba(111,170,255,0.4); }
.ax-badge-sale { background: rgba(237,121,140,0.16); color: #f0a3b1; border: 1px solid rgba(237,121,140,0.4); }

.ax-fav { position: absolute; top: 10px; left: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: var(--ax-border); background: rgba(9,12,16,0.6); backdrop-filter: blur(8px); color: var(--gray);
  display: grid; place-items: center; font-size: 15px; transition: color .2s, border-color .2s, transform .2s; }
.ax-fav:hover { color: var(--ice); border: var(--ax-border-hi); transform: scale(1.08); }
.ax-fav.on { color: #f0a3b1; border-color: rgba(237,121,140,0.5); }

.ax-card-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.ax-card-title { color: var(--text); text-decoration: none; font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.ax-card-title:hover { color: var(--ice); }
.ax-rate { display: flex; align-items: center; gap: 8px; font-family: var(--ax-mono); font-size: 11.5px; color: var(--gray); }
.ax-stars { color: #f2c265; font-size: 11px; letter-spacing: 1px; }
.ax-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.ax-price { font-family: var(--ax-mono); font-weight: 700; font-size: 19px; color: var(--white); }
.ax-price small { font-size: 12px; color: var(--gray); font-weight: 400; }
.ax-unit { font-size: 12px; color: var(--gray); font-weight: 400; }
.ax-old { font-family: var(--ax-mono); font-size: 12.5px; color: var(--gray); }
.ax-buy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 10px 12px; border-radius: 999px; border: var(--ax-border-hi); background: transparent;
  color: var(--ice); font-weight: 700; font-size: 13.5px; text-decoration: none;
  transition: background .2s, color .2s, transform .2s var(--ax-ease); }
.ax-buy:hover { background: var(--grad); border-color: transparent; color: var(--white); transform: translateY(-1px); }

/* ============ КАТАЛОГ ============ */
.ax-cat-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; }
@media (max-width: 991px) { .ax-cat-layout { grid-template-columns: 1fr; } }
.ax-side { position: sticky; top: var(--ax-sticky-panel-top); align-self: start; height: max-content; border-radius: var(--ax-r); background: var(--surface);
  border: var(--ax-border); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
/* Правило описывает пункты списка категорий, а не любую кнопку боковика.
   Без :not(.ax-btn) оно перебивало дизайн-систему по специфичности
   (0,1,1 против 0,1,0) и красило «Применить» в var(--gray) — серая
   надпись по синей заливке, около 2.5:1. */
.ax-side button:not(.ax-btn), #catSide button:not(.ax-btn) {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--gray);
  font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
/* #catSide обязателен в селекторе: базовое правило выше написано через id,
   а id перебивает классы — без него ни наведение, ни выбранная категория
   в каталоге не закрашивались вовсе, сколько бы классов мы ни навесили. */
.ax-side button:not(.ax-btn):hover,
#catSide button:not(.ax-btn):hover { background: rgba(111,170,255,0.14); color: var(--white); }
.ax-side button:not(.ax-btn).on, .ax-side button:not(.ax-btn).active,
#catSide button:not(.ax-btn).on, #catSide button:not(.ax-btn).active {
  background: rgba(111,170,255,0.16); color: var(--ice); }
/* «Все категории» — не рядовой пункт, а сброс фильтра: держим белым. */
#catSide > .ax-side-item:first-child { color: var(--white); font-weight: 700; }
#catSide > .ax-side-item:first-child.active { color: var(--ice); }
html[data-theme="light"] .ax-side button:not(.ax-btn):hover,
html[data-theme="light"] #catSide button:not(.ax-btn):hover { background: #E7EEFB; color: #14418F; }
html[data-theme="light"] #catSide button:not(.ax-btn).on,
html[data-theme="light"] #catSide button:not(.ax-btn).active { background: #EAF0FD; color: #14418F; }
html[data-theme="light"] #catSide > .ax-side-item:first-child { color: var(--text); font-weight: 700; }
/* .active, а не только .on: каталог и терминал помечают выбранный пункт
   классом active, и в тёмной теме он оставался вовсе без подсветки — правило
   на него нашлось только в светлой. */
.ax-side button:not(.ax-btn).on,
.ax-side button:not(.ax-btn).active { background: rgba(111,170,255,0.12); color: var(--ice); }
.ax-side-block { margin-top: 14px; padding: 14px 12px 4px; border-top: 1px solid rgba(111,170,255,0.1); }
.ax-side-block label { font-family: var(--ax-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray); display: block; margin-bottom: 10px; }
.ax-price-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ax-price-inputs input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.ax-price-inputs input::placeholder { color: var(--white); opacity: 0.85; }
.ax-price-inputs input::-webkit-outer-spin-button,
.ax-price-inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ax-ig .input-group-text { background: var(--surface-2); border: var(--ax-border); color: var(--ice);
  font-family: var(--ax-mono); font-size: 13px; border-radius: 0 var(--ax-r-sm) var(--ax-r-sm) 0; }
.ax-ig .ax-input { border-radius: var(--ax-r-sm) 0 0 var(--ax-r-sm) !important; }
/* bootstrap-кнопки под тему платформы */
/* Кнопки боковика теперь .ax-btn — правила ниже держат только ширину,
   цвет и фон приходят из дизайн-системы. */
.ax-side .ax-btn { width: 100%; }

.ax-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
/* Сортировка и «Фильтры» стояли отдельными элементами тулбара: при переносе
   они оказывались на разных строках и разной высоты. Теперь это одна группа
   одинаковых по высоте контролов, прижатая вправо, а на телефоне — целая
   строка под заголовком. */
.ax-toolbar-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ax-toolbar-tools > #catSortHost { min-width: 200px; }
.ax-toolbar-tools .ax-btn { min-height: 44px; padding: 9px 18px; }
@media (max-width: 767px) {
  .ax-toolbar-tools { width: 100%; margin-left: 0; }
  .ax-toolbar-tools > #catSortHost { flex: 1 1 auto; min-width: 0; }
  .ax-toolbar-tools .ax-btn { flex: 0 0 auto; }
}
.ax-toolbar h1 { font-family: var(--ax-display); font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: var(--white); margin: 0; }
.ax-toolbar .ax-sku { align-self: center; }
.ax-select { margin-left: auto; background: var(--surface); border: var(--ax-border); color: var(--text);
  border-radius: 999px; padding: 9px 38px 9px 16px; font-size: 13.5px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236FAAFF' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.ax-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: none; }
.ax-chips::-webkit-scrollbar { display: none; }
.ax-chips button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: 999px; border: var(--ax-border); background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Активный чип был светлее неактивного по контрасту (6.5:1 против 15.9:1):
   выбранный пункт выглядел бледнее невыбранных — ровно наоборот смыслу.
   Затемняем подложку и осветляем надпись, чтобы «включено» читалось сильнее. */
.ax-chips button.on { border: var(--ax-border-hi); color: #C2DAFF;
  background: rgba(8,14,24,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
html[data-theme="light"] .ax-chips button.on {
  background: #DCE7FA; border-color: rgba(29,91,214,0.34); color: #123A80; box-shadow: none; }

.ax-pag { display: flex; gap: 8px; justify-content: center; margin-top: 34px; }
.ax-pag button { width: 40px; height: 40px; border-radius: 12px; border: var(--ax-border); background: transparent;
  color: var(--text); font-family: var(--ax-mono); font-weight: 600; transition: all .2s; }
.ax-pag button:hover { border: var(--ax-border-hi); color: var(--ice); }
.ax-pag button.on { background: var(--grad); border-color: transparent; color: var(--white); }

.ax-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px;
  color: var(--gray); text-align: center; }
.ax-empty i { font-size: 40px; color: var(--mid-gray); }
.ax-empty-wide { grid-column: 1 / -1; }

/* ============ СТРАНИЦА ТОВАРА / УСЛУГИ ============ */
.ax-crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 26px;
  font-size: 13px; color: var(--gray); }
.ax-crumbs a { color: var(--gray); text-decoration: none; }
.ax-crumbs a:hover { color: var(--ice); }
.ax-crumbs i { font-size: 10px; opacity: .6; }
.ax-crumbs span { color: var(--text); }
.ax-pmedia { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; max-height: 520px;
  border-radius: var(--ax-r); border: var(--ax-border);
  background: radial-gradient(500px 400px at 50% 20%, rgba(46,111,242,0.25), transparent 70%),
              linear-gradient(160deg, var(--surface-2), var(--darker)); color: #9FBFFF; overflow: hidden; }
.ax-pmedia .ax-bp { opacity: 1; transform: none; width: 30px; height: 30px; }
.ax-art-big { width: 62%; height: 62%; filter: drop-shadow(0 20px 44px rgba(111,170,255,0.16));
  animation: axFloat 7s ease-in-out infinite; }
@keyframes axFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(1deg)} }
.ax-pmedia-sku { position: absolute; bottom: 14px; left: 16px; }
.ax-p3d { position: absolute; inset: 0; display: grid; place-items: center; }
.ax-p3d canvas { display: block; width: 100% !important; height: 100% !important; }
.ax-p3d-hint { position: absolute; bottom: 14px; right: 16px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; border: var(--ax-border-hi);
  font-family: var(--ax-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ice);
  background: rgba(9,12,16,0.55); backdrop-filter: blur(6px); pointer-events: none;
  animation: axHint 3.2s ease-in-out infinite; }
@keyframes axHint { 0%,100%{opacity:.55} 50%{opacity:1} }
.ax-smedia > .bi { font-size: 96px; color: #9FBFFF; }
.ax-ptitle { font-family: var(--ax-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 36px);
  color: var(--white); letter-spacing: -0.01em; }
.ax-pprice { font-family: var(--ax-mono); font-weight: 700; font-size: clamp(26px, 3vw, 34px); color: var(--white);
  display: flex; align-items: baseline; gap: 12px; margin: 8px 0 12px; }
.ax-pprice small { font-size: 15px; color: var(--gray); font-weight: 400; }
.ax-pprice .ax-old { font-size: 17px; }
.ax-desc { color: var(--gray); font-size: 15px; line-height: 1.7; }
/* характеристики товара: разметка — div.ax-spec-row (не таблица!) */
.ax-specs { display: flex; flex-direction: column; }
.ax-spec-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; font-size: 14px; }
.ax-spec-row > span:first-child { color: var(--gray); }
.ax-spec-dots { flex: 1 1 auto; min-width: 24px; height: 1px; align-self: center;
  background: linear-gradient(90deg, rgba(111,170,255,0.06), rgba(111,170,255,0.20)); }
.ax-spec-row b { color: var(--text); font-family: var(--ax-mono); font-size: 13px; font-weight: 600;
  text-align: right; max-width: 55%; overflow-wrap: anywhere; }
.ax-steps { list-style: none; counter-reset: axs; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ax-steps li { counter-increment: axs; position: relative; padding-left: 52px; }
.ax-steps li::before { content: '0' counter(axs); position: absolute; left: 0; top: 2px;
  font-family: var(--ax-mono); font-size: 13px; color: var(--ice); width: 38px; height: 38px;
  border: var(--ax-border-hi); border-radius: 12px; display: grid; place-items: center; }
.ax-steps b { display: block; color: var(--white); font-size: 15px; }
.ax-steps span { color: var(--gray); font-size: 13.5px; }

/* ============ МЕБЕЛЬ НА ЗАКАЗ (промо-блок) ============ */
.ax-moebel { position: relative; border-radius: 26px; border: var(--ax-border-hi); overflow: hidden;
  background: radial-gradient(700px 400px at 85% 0%, rgba(46,111,242,0.4), transparent 65%), var(--surface);
  padding: clamp(30px, 5vw, 60px); }
.ax-moebel::before { content: ''; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image: linear-gradient(rgba(111,170,255,0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(111,170,255,0.06) 1px, transparent 1px);
  background-size: 44px 44px; }
.ax-moebel-stage { position: relative; min-height: 260px; }
.ax-moebel h2 { font-family: var(--ax-display); font-weight: 800; font-size: clamp(24px, 3.6vw, 40px);
  color: var(--white); letter-spacing: -0.01em; }
.ax-moebel p { color: var(--gray); max-width: 520px; font-size: 15.5px; }

/* ============ SHOWREEL — видеофон (awwwards 3D) ============ */
.ax-reel { position: relative; height: min(72vh, 640px); min-height: 380px; overflow: hidden;
  border-top: var(--ax-border); border-bottom: var(--ax-border);
  display: flex; align-items: flex-end; }
.ax-reel-clip { position: absolute; inset: -14% 0; overflow: hidden; }
/* data-parallax на .ax-reel-clip: motion.js двигает --py (глубина по скроллу) */
.ax-reel-video { width: 100%; height: 100%; object-fit: cover; display: block;
  animation: axKenBurns 26s ease-in-out infinite alternate; }
@keyframes axKenBurns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .ax-reel-video { animation: none; } }
.ax-reel-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--dark) 0%, rgba(9,12,16,0.25) 34%, rgba(9,12,16,0.55) 100%),
              radial-gradient(900px 460px at 18% 88%, rgba(9,12,16,0.75), transparent 65%); }
.ax-reel .ax-bp { opacity: 1; transform: none; width: 34px; height: 34px; z-index: 2; }
.ax-reel .bp-a { top: 22px; left: 22px; }
.ax-reel .bp-b { bottom: 22px; right: 22px; transform: rotate(180deg); }
.ax-reel-scan { display: none; }
@keyframes axScan { 0% { top: 12%; opacity: 0; } 12% { opacity: .8; } 88% { opacity: .8; } 100% { top: 88%; opacity: 0; } }
.ax-reel-in { position: relative; z-index: 2; padding: 0 12px 46px; }
.ax-reel-title { font-family: var(--ax-display); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(28px, 4.6vw, 54px); color: transparent; margin: 8px 0 12px;
  -webkit-text-stroke: 1.5px rgba(237,242,248,0.85); }
.ax-reel-sub { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ax-reel-amp { -webkit-text-stroke: 0; color: var(--ice); }
.ax-reel-rec { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); }
.ax-reel-rec i { animation: axPulse 1.6s ease-in-out infinite; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .ax-reel-scan, .ax-reel-rec i { animation: none; } }

/* ============ ПОЧЕМУ МЫ ============ */
.ax-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 991px) { .ax-why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ax-why { grid-template-columns: 1fr; } }
.ax-why-card { border-radius: var(--ax-r); background: var(--surface); border: var(--ax-border); padding: 24px;
  transition: transform .3s var(--ax-ease), border-color .3s; }
.ax-why-card:hover { border: var(--ax-border-hi); box-shadow: var(--ax-shadow); }
.ax-why-card i { font-size: 26px; color: var(--ice); }
.ax-why-card b { display: block; color: var(--white); font-size: 16px; margin: 14px 0 7px; }
.ax-why-card p { color: var(--gray); font-size: 13.5px; margin: 0; line-height: 1.6; }

/* ============ ОТЗЫВЫ / НОВОСТИ ============ */
.ax-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1199px) { .ax-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ax-reviews { grid-template-columns: 1fr; } }
.ax-review { border-radius: var(--ax-r); background: var(--surface); border: var(--ax-border); padding: 20px;
  display: flex; flex-direction: column; gap: 10px; }
/* gap и перенос нужны с появлением метки «о товаре / о работе»: без них имя
   автора упиралось в звёзды, а на узком экране строка распирала карточку.
   BUILD 20260828-418. */
.ax-review-top { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px 12px; color: var(--white); font-size: 14px; }
.ax-review p { color: var(--gray); font-size: 13.5px; line-height: 1.65; margin: 0; flex: 1; }
.ax-review-ref { font-size: 12px; color: var(--ice); text-decoration: none; font-family: var(--ax-mono); }
.ax-review-ref:hover { color: var(--white); }

/* Отзывы на главной: карточки одной высоты, длинный текст подрезаем —
   иначе один многословный отзыв растягивает весь ряд. */
.ax-review-testi { height: 100%; }
.ax-review-testi p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; }
.ax-review-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ax-review-foot .ax-review-ref { display: inline-flex; align-items: center; gap: 6px; }

/* Новости админа рисуются теперь полноценными карточками ленты, и сервер
   отдаёт сразу двадцать: сеткой в три колонки это семь рядов вниз и полглавной
   под один раздел. Тот же ax-rail, что у категорий: один ряд, остальное
   уезжает вбок. align-items:start — карточка с раскрытыми комментариями не
   должна растягивать соседей до своей высоты. */
/* Карточки новостей были разной высоты: у одной три строки текста, у другой
   двадцать, и ряд выглядел рваным, а длинная новость тянула раздел вниз.
   Теперь все карточки одной высоты (align-items по умолчанию растягивает),
   картинка занимает постоянную долю, а текст обрезается по строкам — новость
   на главной и не должна читаться целиком, для этого есть лента. */
/* Flex вместо grid: в сетке с grid-auto-flow:column все колонки одной
   ширины, а карточке с широким баннером нужна своя. Здесь ширину задаёт
   сама карточка через flex-basis. */
.ax-newsgrid { display: flex; gap: 14px; align-items: stretch; }
.ax-newsgrid > .ax-post { scroll-snap-align: start; min-width: 0;
  flex: 0 0 calc((100% - 2 * 14px) / 3);
  display: flex; flex-direction: column; }
/* Баннер шире 16:9 обрезался по бокам. Такой карточке даём полторы ширины и
   показываем картинку в её настоящих пропорциях — ratio приходит из JS,
   который читает naturalWidth/naturalHeight после загрузки. */
.ax-newsgrid > .ax-post.is-wide { flex-basis: calc((100% - 14px) / 2); }
.ax-newsgrid > .ax-post.is-wide .ax-post-visual {
  aspect-ratio: var(--news-ratio, 16 / 9); max-height: 240px; }
.ax-newsgrid > .ax-post.is-wide .ax-post-image img { object-fit: contain; }

.ax-newsgrid > .ax-post .ax-post-gallery-wrap { flex: 0 0 auto; }
.ax-newsgrid > .ax-post .ax-post-visual { aspect-ratio: 16 / 9; height: auto; max-height: 200px; }
.ax-newsgrid > .ax-post .ax-post-image img { width: 100%; height: 100%; object-fit: cover; }
/* Пять строк: карточка перестаёт быть простынёй, а новость целиком читают
   в ленте — сюда она попадает как анонс. */
.ax-newsgrid > .ax-post .ax-post-text {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Ряд реакций и кнопки прижаты к низу карточки: без этого у короткой новости
   они висели посередине, а у соседней стояли внизу. */
.ax-newsgrid > .ax-post .ax-post-reacts { margin-top: auto; }
/* Ряд реакций прижимался к самой черте: margin-top:0 гасил общий отступ.
   Возвращаем воздух — черта отделяет реакции от лайков, а не липнет к ним. */
.ax-newsgrid > .ax-post .ax-post-reacts + .ax-post-social { margin-top: 10px; }
/* «Читать полностью» под обрезанным текстом. Ссылка, а не кнопка на всю
   ширину: она внутри карточки-анонса и не должна спорить с лайком. */
/* Снизу отступ такой же, как сверху: без него ряд реакций липнул к ссылке
   и читался как её продолжение. */
.ax-post-more { align-self: flex-start; margin: 6px 0 12px; padding: 0; border: 0;
  background: none; color: var(--ice); font: 700 12.5px/1.2 inherit; cursor: pointer; }
.ax-post-more:hover { text-decoration: underline; }
.ax-post-more:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
.ax-newsgrid > .ax-post.is-open .ax-post-text { -webkit-line-clamp: unset; overflow: visible; }
.ax-newsgrid > .ax-post > .ax-post-social:first-of-type { margin-top: auto; }
/* Ширину задаёт flex-basis карточки, а не grid-auto-columns контейнера:
   после перехода на flex старые правила перестали на что-либо влиять, и на
   телефоне карточки схлопывались до трети экрана. */
@media (max-width: 1199px) { .ax-newsgrid > .ax-post { flex-basis: calc((100% - 14px) / 2); }
  .ax-newsgrid > .ax-post.is-wide { flex-basis: calc(100% - 20px); } }
@media (max-width: 767px) { .ax-newsgrid > .ax-post { flex-basis: 88%; }
  .ax-newsgrid > .ax-post.is-wide { flex-basis: 96%; } }
.ax-news { display: flex; flex-direction: column; gap: 9px; border-radius: var(--ax-r); background: var(--surface);
  border: var(--ax-border); padding: 22px; color: var(--text); text-decoration: none;
  transition: transform .3s var(--ax-ease), border-color .3s; }
.ax-news:hover { transform: translateY(-5px); border: var(--ax-border-hi); color: var(--text); }
.ax-news-date { font-family: var(--ax-mono); font-size: 11px; letter-spacing: .1em; color: var(--gray); }
.ax-news i { font-size: 24px; color: var(--ice); }
.ax-news b { color: var(--white); font-size: 15.5px; }
.ax-news p { color: var(--gray); font-size: 13.5px; margin: 0; }
.ax-news-author { margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--ice);
  display: flex; align-items: center; gap: 4px; }
.ax-news-author i { font-size: 14px; }

/* ============ ПОЛЯ: глазок пароля / file / number ============ */
.ax-pw { position: relative; }
.ax-pw .ax-input { padding-right: 46px; }
.ax-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: transparent; color: var(--gray);
  border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
.ax-pw-eye:hover { color: var(--ice); }

.ax-input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.ax-input[type=number]::-webkit-outer-spin-button,
.ax-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ax-input[type=file] { padding: 8px 10px; }
.ax-input[type=file]::file-selector-button {
  border: var(--ax-border-hi); border-radius: 999px; background: rgba(111,170,255,0.1);
  color: var(--ice); font-weight: 700; font-size: 12.5px; padding: 7px 16px;
  margin-right: 12px; cursor: pointer; transition: background .15s; }
.ax-input[type=file]::file-selector-button:hover { background: rgba(111,170,255,0.2); }

.ax-cover-ex { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ax-cover-ex img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover;
  border: var(--ax-border-hi); }
.ax-cover-ex span { font-size: 12.5px; }
#pgResend:disabled { opacity: 0.45; cursor: default; text-decoration: none; }

/* ============ АВАТАРЫ + КРОП-РЕДАКТОР ============ */
.ax-ava { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none;
  width: 40px; height: 40px; border: 1.5px solid rgba(111,170,255,0.35); background: var(--surface-2); }
.ax-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-ava-letter { font-family: var(--ax-display); font-weight: 700; color: var(--white);
  background: var(--grad); font-size: 16px; }
.ax-ava-sm { width: 26px; height: 26px; }
.ax-ava-sm.ax-ava-letter { font-size: 12px; }
.ax-ava-lg { width: 64px; height: 64px; }
.ax-ava-lg.ax-ava-letter { font-size: 24px; }
/* клик по крупной аватарке открывает полноразмерный просмотр */
.ax-ava-lg img, .ax-ava-xl img { cursor: zoom-in; }
.ax-prof { display: flex; align-items: center; gap: 14px; }
.ax-prof-name { color: var(--white); font-size: 15.5px; }
.ax-seller-row { display: inline-flex; align-items: center; gap: 8px; }
.ax-userbtn .ax-ava-sm { margin-right: 2px; }

.ax-crop { margin-top: 12px; }
.ax-crop-stage { position: relative; width: 220px; height: 220px; margin: 0 auto; overflow: hidden;
  border-radius: 18px; border: var(--ax-border-hi); background: #10161F; cursor: grab; touch-action: none; }
.ax-crop-stage:active { cursor: grabbing; }
.ax-crop-stage img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none;
  -webkit-user-drag: none; pointer-events: none; }
.ax-crop-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 300px rgba(9,12,16,0.62); }
.ax-crop-zoom { width: 220px; display: block; margin: 12px auto 0; accent-color: var(--ice); }
.ax-crop-hint { text-align: center; font-size: 11.5px; margin: 8px 0 0; }
.ax-link.on { color: #ff8296; }

/* ============ МАРКЕТПЛЕЙС: фото-карточки (Ozon/WB-стиль) ============ */
.ax-official { color: var(--ice); font-size: 0.9em; margin-left: 3px; cursor: help; vertical-align: -1px;
  filter: drop-shadow(0 0 6px rgba(111,170,255,0.5)); }
.ax-pcard { position: relative; border-radius: var(--ax-r-sm); background: var(--surface);
  border: var(--ax-border); overflow: hidden; transition: transform .3s var(--ax-ease), border-color .25s, box-shadow .3s; }
.ax-pcard:hover { transform: translateY(-4px); border: var(--ax-border-hi); box-shadow: var(--ax-shadow); }
.ax-pcard-media { display: block; position: relative; aspect-ratio: 1 / 1; background: #10161F; overflow: hidden; }
.ax-pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ax-ease); }
.ax-pcard:hover .ax-pcard-media img { transform: scale(1.05); }
.ax-noimg, .ax-noimg-big { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mid-gray); font-size: 34px; }
.ax-pcard-disc { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #e0447c, #c02956); color: #fff; font-weight: 800; font-size: 12.5px;
  font-family: var(--ax-mono); box-shadow: 0 4px 14px rgba(224,68,124,0.4); }
.ax-pcard-out { position: absolute; inset: auto 0 0 0; padding: 6px; text-align: center; font-size: 12px;
  background: rgba(9,12,16,0.85); color: var(--gray); }
.ax-pcard .ax-fav { top: 8px; right: 8px; left: auto;
  opacity: 0; transform: scale(0.85); pointer-events: none;
  transition: opacity .2s var(--ax-ease), transform .25s var(--ax-ease), color .2s, border-color .2s; }
.ax-pcard:hover .ax-fav, .ax-pcard:focus-within .ax-fav,
.ax-pcard .ax-fav.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.ax-pcard .ax-fav:hover { transform: scale(1.1); }
/* тач-устройства: hover нет — сердце видно всегда */
@media (hover: none) {
  .ax-pcard .ax-fav { opacity: 1; transform: scale(1); pointer-events: auto; }
}
.ax-pcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.ax-pcard-title { color: var(--white); font-weight: 600; font-size: 14px; line-height: 1.35; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.ax-pcard-title:hover { color: var(--ice); }
.ax-pcard-seller { font-size: 12px; color: var(--gray); }
.ax-rate-empty span { color: var(--mid-gray); font-size: 12px; }
.ax-mpprice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ax-mpprice b { font-family: var(--ax-mono); font-weight: 700; font-size: 18px; color: var(--white); }
.ax-mpprice s { color: var(--mid-gray); font-size: 13px; }
.ax-mpprice .ax-disc { color: #ff6b9d; font-weight: 800; font-size: 12.5px; font-family: var(--ax-mono); }
.ax-mpprice-big b { font-size: 32px; }
.ax-mpprice-big s { font-size: 17px; }
.ax-mpprice-big .ax-disc { font-size: 15px; }
.ax-pstock { font-size: 13.5px; font-weight: 600; margin: 10px 0 4px; }
.ax-pstock.in { color: #6fdc9c; }
.ax-pstock.out { color: #ff8296; }
.ax-empty-wide { grid-column: 1 / -1; padding: 70px 0; }

/* скелетоны загрузки */
.ax-skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-column: 1 / -1; }
@media (max-width: 991px) { .ax-skel-grid { grid-template-columns: repeat(2, 1fr); } }
.ax-skel { aspect-ratio: 3 / 4.4; border-radius: var(--ax-r-sm); border: var(--ax-border);
  background: linear-gradient(100deg, var(--surface) 40%, rgba(111,170,255,0.07) 50%, var(--surface) 60%);
  background-size: 200% 100%; animation: axShimmer 1.4s linear infinite; }
@keyframes axShimmer { to { background-position: -200% 0; } }

/* галерея карточки товара */
.ax-gal-main { position: relative; aspect-ratio: 1 / 1; border-radius: var(--ax-r); overflow: hidden;
  border: var(--ax-border); background: #10161F; cursor: zoom-in; }
.ax-gal-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-gal-main.ax-noimg-big { cursor: default; }
.ax-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border-radius: 50%; border: var(--ax-border-hi); background: rgba(19,26,35,0.8); color: var(--text);
  display: grid; place-items: center; }
.ax-gal-nav:hover { color: var(--ice); }
.ax-gal-nav.prev { left: 12px; } .ax-gal-nav.next { right: 12px; }
.ax-gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ax-gal-th { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; padding: 0;
  border: var(--ax-border); background: #10161F; opacity: 0.65; transition: opacity .15s, border-color .15s; }
.ax-gal-th img { width: 100%; height: 100%; object-fit: cover; }
.ax-gal-th.on, .ax-gal-th:hover { opacity: 1; border: var(--ax-border-hi); }
.ax-prevs { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

/* корзина: фото */
.ax-ci-img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: var(--ax-border); }

/* кабинеты: заказы с фото, формы, таблицы */
.ax-order-mp { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ax-oi { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: var(--ax-border);
  display: grid; place-items: center; color: var(--mid-gray); background: #10161F; flex: none; }
.ax-order-in { flex: 1; min-width: 180px; }
.ax-order-in b a { color: var(--white); text-decoration: none; }
.ax-order-in b a:hover { color: var(--ice); }
.ax-btn-sm { padding: 7px 14px; font-size: 12.5px; }
.ax-chip-ok, .ax-chip-warn, .ax-chip-bad { display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700; font-family: var(--ax-mono); }
.ax-chip-ok { background: rgba(111,220,156,0.12); color: #6fdc9c; border: 1px solid rgba(111,220,156,0.3); }
.ax-chip-warn { background: rgba(242,194,101,0.12); color: #f2c265; border: 1px solid rgba(242,194,101,0.3); }

/* Beta-режим: предупреждение на карточках — видно только при включённой блокировке покупок */
.ax-beta-note { display: none; }
body.ax-beta-lock .ax-beta-note { display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px;
  font-size: 12px; line-height: 1.35; color: #f2c265;
  background: rgba(242,194,101,0.1); border: 1px solid rgba(242,194,101,0.28); }
.ax-beta-note i { flex: 0 0 auto; font-size: 14px; }
.ax-beta-note-lg { font-size: 13px; }
.ax-chip-bad { background: rgba(255,130,150,0.1); color: #ff8296; border: 1px solid rgba(255,130,150,0.3); }
/* Светлой темы у этих плашек не было вовсе: пастельные тона подобраны под
   тёмный фон и на белом давали 1,6:1 — «Plus», «Проверен» и «Телефон
   подтверждён» читались как светло-зелёное пятно. Тон подложки оставляем,
   надпись затемняем до 4,6-6,5:1. Найдено при переносе фона в шапку профиля.
   BUILD 20260827-414. */
html[data-theme="light"] .ax-chip-ok {
  background: rgba(46,158,107,0.14); color: #0F7A4E; border-color: rgba(46,158,107,0.34); }
html[data-theme="light"] .ax-chip-warn {
  background: rgba(224,166,58,0.18); color: #7A5200; border-color: rgba(224,166,58,0.42); }
html[data-theme="light"] .ax-chip-bad {
  background: rgba(224,75,92,0.14); color: #A31527; border-color: rgba(224,75,92,0.34); }
.ax-revform { width: 100%; padding-top: 10px; }
.ax-revform .ax-rv-stars { margin-bottom: 10px; }
.ax-revform .ax-rv-stars button { border: 0; background: transparent; font-size: 20px; color: var(--mid-gray); padding: 2px; }
.ax-revform .ax-rv-stars button.on { color: #f2c265; }
.ax-sellform .form-label { margin-bottom: 4px; }
.ax-ph-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ax-ph-previews img { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; border: var(--ax-border-hi); }
/* wrap: на телефоне вкладки переносятся на новую строку — ничего не обрезается */
.ax-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-admin-toolbar { width: 100%; align-items: flex-start; }
.ax-admin-tabs { flex: 1 1 900px; min-width: 0; max-width: 100%; }

/* ============ ТЕРМИНАЛ: боковик + контент ============ */
/* Та же раскладка и те же .ax-side / .ax-side-item, что в каталоге и услугах:
   терминал перестал быть отдельным островом со своей типографикой. */
.ax-adm-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; align-items: start; }
.ax-adm-side { padding: 14px 12px; gap: 0; }
.ax-adm-group + .ax-adm-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ax-line, rgba(111,170,255,0.10)); }
.ax-adm-group-t { display: block; margin: 0 12px 6px; font-family: var(--ax-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.ax-adm-side .ax-side-item { gap: 10px; }
/* «Активные исполнители» в одну строку не влезали и обрезались в
   «Активные исполните…» — толку от такой подписи нет. Две строки. */
.ax-adm-side .ax-side-item > span { flex: 1; min-width: 0; white-space: normal;
  line-height: 1.32; overflow-wrap: anywhere; }
.ax-adm-side .ax-side-item { align-items: flex-start; padding-top: 9px; padding-bottom: 9px; }
.ax-adm-side .ax-side-item > i, .ax-adm-side .ax-adm-n { margin-top: 1px; }
.ax-adm-side .ax-side-item > i { flex: none; font-size: 15px; }
/* Счётчик: ноль приглушён, ненулевой заметен, деньги — тревожным тоном. */
.ax-adm-n { flex: none; min-width: 22px; padding: 1px 6px; border-radius: 999px; text-align: center;
  font-family: var(--ax-mono); font-size: 11px; font-weight: 600; line-height: 18px;
  background: rgba(111,170,255,0.12); color: var(--ice); }
.ax-adm-n.is-zero { background: transparent; color: var(--gray); opacity: .55; }
.ax-adm-n.is-warn { background: rgba(255,130,150,0.14); color: #ff8296; }
.ax-adm-side .ax-terminal-lock { margin-top: 16px; width: 100%; justify-content: center; }
.ax-adm-main { min-width: 0; }
.ax-adm-main > .ax-admin-search { margin-bottom: 16px; }
html[data-theme="light"] .ax-adm-group + .ax-adm-group { border-top-color: rgba(16,28,48,0.10); }
html[data-theme="light"] .ax-adm-n { background: #EAF0FD; color: #14418F; }
html[data-theme="light"] .ax-adm-n.is-zero { background: transparent; color: #7A8699; }
html[data-theme="light"] .ax-adm-n.is-warn { background: #FCEDEF; color: #A03248; }
@media (max-width: 1199px) {
  .ax-adm-layout { grid-template-columns: minmax(0, 1fr); }
  .ax-adm-side { position: static; }
  /* На узком экране боковик разворачивается в ряды пунктов, а не в колонку
     на пол-экрана: до контента иначе пришлось бы листать. */
  .ax-adm-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
  .ax-adm-group-t { grid-column: 1 / -1; }
}
.ax-terminal-lock { flex: 0 0 auto; color: #ff9aaa; border-color: rgba(255,130,150,.35); }
.ax-terminal-gate { overflow: hidden; }
.ax-terminal-gate *, .ax-terminal-gate *::before, .ax-terminal-gate *::after { box-sizing: border-box; }
.ax-terminal-gate .ax-btn, .ax-terminal-gate .ax-input { max-width: 100%; }
.ax-terminal-key { padding: 4px 8px !important; overflow: hidden; line-height: 32px; }
.ax-terminal-key::file-selector-button {
  margin: 0 12px 0 0 !important; padding: 7px 15px !important; border: 1px solid rgba(46,111,242,.72) !important;
  border-radius: 999px !important; background: rgba(46,111,242,.12) !important; color: var(--ice) !important;
  font-weight: 700; line-height: 1.2; transition: .18s ease;
}
.ax-terminal-key:hover::file-selector-button { background: rgba(46,111,242,.25) !important; border-color: var(--ice) !important; }
/* Чекбоксы и радио — один стиль на всю платформу, по токенам темы.
   Раньше здесь стояли фиксированные тёмные цвета (фон rgba(11,17,27,.75),
   галочка #6FAAFF): в светлой теме чекбокс «запомнить устройство» выходил
   почти чёрным квадратом на белой карточке. Правило общее, а не только для
   терминала, — те же bootstrap-чекбоксы стоят в кабинете исполнителя. */
.form-check-input {
  background-color: var(--surface-2); border-color: var(--mid-gray); box-shadow: none;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
}
.form-check-input:hover { border-color: var(--ice-border); }
.form-check-input:checked { background-color: var(--arctrik); border-color: var(--arctrik); }
.form-check-input:focus, .form-check-input:focus-visible {
  border-color: var(--ice); box-shadow: 0 0 0 3px rgba(46,111,242,.22); }
.form-check-input:disabled { opacity: .5; }
.form-check-label { color: var(--text); }
/* Ползунок переключателя: bootstrap рисует «шарик» картинкой, и его тёмный
   вариант тонул на тёмной поверхности — задаём свой на оба состояния. */
.form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394A3B8'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); }
@media (max-width: 1400px) {
  .ax-admin-tabs .ax-tab { padding-left: 14px; padding-right: 14px; font-size: 12.5px; }
}
.ax-tab { padding: 9px 18px; border-radius: 999px; border: var(--ax-border); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: 0 0 auto; }
.ax-tab b { font-family: var(--ax-mono); color: var(--ice); margin-left: 4px; }
.ax-tab.active { background: var(--grad); border: 0; box-shadow: var(--glow); }
.ax-admin-search { max-width: 320px; }
.ax-table-wrap { overflow-x: auto; border-radius: var(--ax-r-sm); border: var(--ax-border); }
.ax-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ax-table th { text-align: left; padding: 12px 14px; color: var(--gray); font-family: var(--ax-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: var(--ax-border); }
.ax-table td { padding: 11px 14px; border-bottom: var(--ax-border); color: var(--text); vertical-align: middle; }
.ax-table tr:last-child td { border-bottom: 0; }
.ax-row-blocked td { opacity: 0.45; }
.ax-select-sm { padding: 6px 10px; font-size: 12.5px; }
.ax-appcard { margin-bottom: 12px; }

/* ============ СПОСОБЫ ОПЛАТЫ ============ */
.ax-pay { margin-top: 22px; }
.ax-pay-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ax-pay-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; border: var(--ax-border); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600; }
.ax-pay-chips i { color: var(--ice); font-size: 15px; }
.ax-pay-chips b { font-weight: 600; }

/* ============ «ВЫ ПОКИДАЕТЕ САЙТ» ============ */
.ax-leave-body { padding: 26px; }
.ax-leave-ico { font-size: 26px; color: var(--ice); display: inline-block; margin-bottom: 12px;
  width: 52px; height: 52px; border: var(--ax-border-hi); border-radius: 14px;
  display: grid; place-items: center; }
.ax-leave-body h5 { font-family: var(--ax-display); font-size: 17px; color: var(--white); margin-bottom: 8px; }

/* ============ ЛИЧНЫЙ КАБИНЕТ ============ */
.ax-orders { display: flex; flex-direction: column; gap: 12px; }
.ax-order { border: var(--ax-border); border-radius: var(--ax-r-sm); padding: 14px 16px; }
.ax-order b { display: block; color: var(--white); font-size: 14.5px; margin: 4px 0 2px; }
.ax-order p { margin: 0; color: var(--gray); font-size: 13px; }

/* ============ ФОРМА ОТЗЫВА ============ */
.ax-rv-wrap { margin-top: 28px; display: flex; justify-content: center; }
.ax-rv-form { border-radius: 20px; padding: 28px; width: 100%; max-width: 620px; }
.ax-rv-title { font-family: var(--ax-display); font-size: 17px; color: var(--white); margin: 0 0 16px; }
.ax-rv-stars { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.ax-rv-stars button { border: 0; background: transparent; font-size: 24px; color: var(--mid-gray);
  padding: 2px; line-height: 1; transition: color .15s, transform .15s var(--ax-ease); }
.ax-rv-stars button.on { color: #f2c265; }
.ax-rv-stars button:hover { transform: scale(1.15); }
.ax-rv-stars .ax-sku { margin-left: 8px; color: var(--ice); }

/* ============ СТРАНИЦЫ ВХОДА / РЕГИСТРАЦИИ ============ */
.ax-auth-main { min-height: calc(100vh - 260px); display: flex; align-items: center; justify-content: center;
  padding: 60px 16px; position: relative; }
.ax-auth-main::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(640px 420px at 50% 30%, rgba(46,111,242,0.14), transparent 70%); }
.ax-auth-card { position: relative; width: 100%; max-width: 440px; padding: 36px 34px;
  border-radius: var(--ax-r); background: var(--surface); border: var(--ax-border-hi);
  box-shadow: var(--ax-shadow); }
.ax-auth-logo { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 8px; }
.ax-auth-logo span { font-family: var(--ax-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; color: var(--white); }
.ax-auth-logo em { font-style: normal; color: var(--ice); }
.ax-auth-title { font-family: var(--ax-display); font-weight: 700; font-size: clamp(20px, 3vw, 26px);
  color: var(--white); margin: 10px 0 24px; }
@media (max-width: 480px) { .ax-auth-card { padding: 28px 22px; } }
/* мобильный вход: форму поднимаем к шапке и уплотняем, чтобы Google-вход был виден без прокрутки */
@media (max-width: 640px) {
  .ax-auth-main { align-items: flex-start; padding: 14px 16px 40px; }
  .ax-auth-card { padding: 24px 20px 26px; }
  .ax-auth-logo { margin-bottom: 12px; }
  .ax-auth-title { margin: 8px 0 18px; }
  .ax-auth-card .form-label { margin-bottom: 5px; }
  .ax-auth-card .form-label.mt-3 { margin-top: 12px !important; }
  .ax-auth-card .form-check.mt-3 { margin-top: 12px !important; }
  .ax-auth-card .ax-btn.mt-4 { margin-top: 16px !important; }
  .ax-auth-card .ax-link.mt-3 { margin-top: 10px !important; }
  .ax-auth-card .ax-link.mt-2 { margin-top: 7px !important; }
  .ax-auth-card .ax-or { margin: 14px 0 12px; }
}

/* ============ АВТОРИЗАЦИЯ: «или» + Google ============ */
.ax-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--gray);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--ax-mono); }
.ax-or::before, .ax-or::after { content: ''; flex: 1; height: 1px; background: rgba(111,170,255,0.18); }

/* ============ КОРЗИНА / OFFCANVAS / МОДАЛКИ ============ */
.ax-offcanvas { background: var(--surface) !important; color: var(--text); border-left: var(--ax-border); border-right: var(--ax-border); }
/* Боковик каталога переезжает в эту панель целиком (см. скрипт в katalog.html),
   а он sticky с отступом под шапку. Внутри панели прилипать не к чему: отступ
   в 153px оставлял сверху пустоту, а при сворачивании группы содержимое ещё и
   ползало вверх-вниз. Здесь он обычный блок, прижатый к верху. */
.ax-offcanvas .ax-side { position: static; top: auto; height: auto; border: 0;
  padding: 0; background: transparent; }
.ax-offcanvas .offcanvas-body { padding-top: 14px; }
.ax-offcanvas .offcanvas-header { border-bottom: var(--ax-border); }
.ax-offcanvas h5 { font-family: var(--ax-display); font-size: 16px; color: var(--white); margin: 0; }
.ax-cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(111,170,255,0.14); }
.ax-ci-art { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 12px;
  background: var(--surface-2); color: #9FBFFF; }
.ax-ci-art svg { width: 70%; height: 70%; }
.ax-ci-info { flex: 1; min-width: 0; }
.ax-ci-info a { color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; display: block; }
.ax-ci-info a:hover { color: var(--ice); }
.ax-ci-price { font-family: var(--ax-mono); font-size: 12.5px; color: var(--ice); }
.ax-qty { display: flex; align-items: center; gap: 8px; }
.ax-qty button { width: 27px; height: 27px; border-radius: 9px; border: var(--ax-border); background: transparent;
  color: var(--text); font-size: 15px; line-height: 1; }
.ax-qty button:hover { border: var(--ax-border-hi); color: var(--ice); }
.ax-qty b { font-family: var(--ax-mono); font-size: 13px; min-width: 16px; text-align: center; }
.ax-ci-del { border: 0; background: transparent; color: var(--gray); font-size: 15px; }
.ax-ci-del:hover { color: #f0a3b1; }
.ax-cart-foot { border-top: var(--ax-border); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.ax-cart-total { display: flex; justify-content: space-between; font-size: 15px; }
.ax-cart-total b { font-family: var(--ax-mono); font-size: 19px; color: var(--white); }

.ax-modal { background: var(--surface); color: var(--text); border: var(--ax-border-hi); border-radius: 20px; }
.ax-modal .modal-header { border-bottom: var(--ax-border); }
.ax-modal h5 { font-family: var(--ax-display); font-size: 16px; color: var(--white); margin: 0; }
.ax-co-summary { font-family: var(--ax-mono); font-size: 12.5px; color: var(--ice); background: rgba(111,170,255,0.07);
  border: var(--ax-border); border-radius: var(--ax-r-sm); padding: 12px 14px; margin-bottom: 18px; }
.ax-co-summary:empty { display: none; }
.ax-co-status { font-size: 13.5px; color: var(--ice); text-align: center; }
.ax-dropdown { background: var(--surface-2); border: var(--ax-border); border-radius: 14px; overflow: hidden; }
.ax-dropdown .dropdown-item { color: var(--text); font-size: 13.5px; padding: 8px 16px; }
.ax-dropdown .dropdown-item:hover { background: rgba(111,170,255,0.1); color: var(--ice); }
.ax-dropdown .lang-option.active { color: var(--ice); font-weight: 700; }
.ax-dropdown .dropdown-divider { border-color: rgba(111,170,255,0.14); }
.ax-dropdown .dropdown-item-text { font-size: 12.5px; }

.ax-pop { position: fixed; top: 74px; right: 16px; z-index: 1050; display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-radius: 14px; background: var(--surface-2); border: var(--ax-border-hi);
  color: var(--gray); font-size: 13.5px; box-shadow: var(--ax-shadow);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: all .3s var(--ax-ease); }
.ax-pop.open { opacity: 1; transform: none; }
.ax-pop i { color: var(--ice); }

.ax-toast-zone { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 1060;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
@media (min-width: 992px) { .ax-toast-zone { bottom: 26px; } }
.ax-toast { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
  background: rgba(23,30,40,0.92); backdrop-filter: blur(12px); border: var(--ax-border-hi);
  color: var(--text); font-size: 13.5px; font-weight: 600; box-shadow: var(--ax-shadow);
  opacity: 0; transform: translateY(12px); transition: all .3s var(--ax-ease); }
.ax-toast.show { opacity: 1; transform: none; }
.ax-toast i { color: var(--ice); }
.ax-toast-msg { cursor: pointer; border-radius: 16px; max-width: min(92vw, 380px); }
.ax-toast-msg b { flex: none; }
.ax-toast-msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--gray); }
.ax-toast-msg:hover { border-color: var(--ice); }

/* меню (offcanvas) */
.ax-menu-list { display: flex; flex-direction: column; gap: 4px; }
.ax-menu-list a { display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; }
.ax-menu-list a:hover { background: rgba(111,170,255,0.08); color: var(--ice); }
.ax-menu-list i { color: var(--ice); font-size: 17px; width: 22px; }
.ax-menu-lang { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-menu-lang button { padding: 7px 14px; border-radius: 999px; border: var(--ax-border); background: transparent;
  color: var(--text); font-family: var(--ax-mono); font-size: 12px; }
.ax-menu-lang button.active { border: var(--ax-border-hi); color: var(--ice); }

/* ============ ФУТЕР ============ */
.ax-footer { border-top: var(--ax-border); background: var(--darker); padding: 54px 0 26px; margin-top: 70px; }
.ax-foot-desc { color: var(--gray); font-size: 13.5px; margin: 14px 0 18px; max-width: 320px; }
.ax-footer h6 { font-family: var(--ax-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ice); margin-bottom: 15px; }
.ax-footer a, .ax-foot-line { display: block; color: var(--gray); text-decoration: none; font-size: 13.5px; padding: 4px 0; }
.ax-footer a:hover { color: var(--ice); }
.ax-footer .ax-logo { font-size: 17px; }
.ax-foot-tagline { margin: 10px 0 0; font-family: var(--ax-display); font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.ax-foot-soc { display: flex; gap: 10px; }
.ax-foot-soc a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: var(--ax-border); color: var(--text); font-size: 17px; padding: 0; }
.ax-foot-soc a:hover { border: var(--ax-border-hi); color: var(--ice); }
.ax-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid rgba(111,170,255,0.08); margin-top: 40px; padding-top: 20px;
  color: var(--gray); font-size: 12.5px; }
/* На телефоне пять разных по ширине элементов расползались: space-between
   разбрасывал их по краям, и нижняя часть футера выглядела набором обрывков.
   Столбиком по центру с ровным шагом — и колонки ссылок тоже сводим в один
   ряд, а не в две узкие полосы разной длины. */
@media (max-width: 767px) {
  .ax-footer { padding: 38px 0 22px; margin-top: 48px; }
  .ax-foot-desc { max-width: none; }
  .ax-foot-soc { margin-bottom: 6px; }
  .ax-footer .row > [class*="col-"] + [class*="col-"] { margin-top: 4px; }
  .ax-foot-bottom { flex-direction: column; align-items: center; text-align: center;
    gap: 12px; margin-top: 28px; }
  .ax-foot-bottom .ax-sku { order: 5; opacity: .75; }
  .ax-foot-bug { order: 4; }
}

/* ============ МЕБЕЛЬ НА ЗАКАЗ: страница ============ */
.ax-mb-hero { position: relative; min-height: 68vh; display: flex; align-items: center; overflow: hidden;
  border-bottom: var(--ax-border); }
.ax-mb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ax-mb-veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9,12,16,0.92) 0%, rgba(9,12,16,0.65) 55%, rgba(9,12,16,0.35) 100%),
              linear-gradient(0deg, var(--dark) 0%, transparent 30%); }
.ax-mb-hero-in { position: relative; z-index: 1; padding: 110px 12px; }
.ax-mb-title { font-family: var(--ax-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(32px, 5vw, 58px); color: var(--white); margin: 6px 0 16px; }
.ax-mb-materials { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 12px; }
.ax-mb-materials li { display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-radius: var(--ax-r-sm); background: var(--surface); border: var(--ax-border);
  color: var(--text); font-size: 14.5px; font-weight: 600; }
.ax-mb-materials i { color: var(--ice); font-size: 19px; }
.ax-mb-note { display: flex; align-items: flex-start; padding: 14px 18px; border-radius: var(--ax-r-sm);
  border: var(--ax-border-hi); background: rgba(111,170,255,0.06); color: var(--gray); font-size: 13.5px; margin: 0; }
.ax-mb-note i { color: var(--ice); margin-top: 2px; }

/* портфолио */
.ax-portfolio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* услуги: гауссова тень-подложка под «Наши работы» (группа + заголовок) */
body[data-page="services"] .ax-portfolio { position: relative; z-index: 0; }
body[data-page="services"] .ax-portfolio::before {
  content: ""; position: absolute; inset: -130px -70px -70px; z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, rgba(7,12,24,0.9), rgba(7,12,24,0.55) 55%, rgba(7,12,24,0) 78%);
  filter: blur(48px); pointer-events: none;
}
body[data-page="services"] .ax-sec-head { position: relative; z-index: 1; }
html[data-theme="light"] body[data-page="services"] .ax-portfolio::before {
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.95), rgba(255,255,255,0.6) 55%, rgba(255,255,255,0) 78%);
  filter: blur(48px);
}
@media (max-width: 991px) { .ax-portfolio { grid-template-columns: repeat(2, 1fr); } }
.ax-pf-item { position: relative; aspect-ratio: 4 / 3; border-radius: var(--ax-r-sm); overflow: hidden;
  border: var(--ax-border); background: var(--surface); padding: 0; cursor: zoom-in;
  transition: transform .3s var(--ax-ease), border-color .3s; }
.ax-pf-item img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s var(--ax-ease); }
.ax-pf-item:hover { transform: translateY(-4px); border: var(--ax-border-hi); }
.ax-pf-item:hover img { transform: scale(1.06); }

/* лайтбокс */
/* ============================================================
   Просмотр фото
   ------------------------------------------------------------
   Затемнение было жёстко тёмно-синим в обеих темах: на светлой
   странице фотография открывалась в чужой сцене. Теперь подложка
   идёт от темы, а кнопки — сплошное стекло вместо синего волоска
   по краю: тонкая цветная обводка на фотографии не читается ни на
   светлом, ни на тёмном кадре.
   ============================================================ */
.ax-lightbox { position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,10,16,0.9);
  backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%);
  animation: axLbIn .22s cubic-bezier(0.22, 1, 0.36, 1); }
.ax-lightbox.open { display: flex; }
@keyframes axLbIn { from { opacity: 0; } to { opacity: 1; } }
.ax-lightbox img, .ax-lightbox video { max-width: 92vw; max-height: 86vh; border-radius: 16px; border: 0;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  animation: axLbZoom .26s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes axLbZoom { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }

.ax-lb-close, .ax-lb-prev, .ax-lb-next, .ax-lightbox-x {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.1); color: #fff; font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background-color .2s, transform .2s var(--ax-ease); }
.ax-lb-close:hover, .ax-lb-prev:hover, .ax-lb-next:hover, .ax-lightbox-x:hover {
  background: rgba(255,255,255,.2); color: #fff; transform: scale(1.06); }
.ax-lb-close:active, .ax-lb-prev:active, .ax-lb-next:active { transform: scale(.96); }
.ax-lb-close:focus-visible, .ax-lb-prev:focus-visible, .ax-lb-next:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; }
.ax-lb-close, .ax-lightbox-x { top: 20px; right: 20px; }
.ax-lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.ax-lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.ax-lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.ax-lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* Светлая тема: подложка светлая, кнопки — тёмное стекло, иначе белые
   круги растворяются и в подложке, и в светлой части кадра. */
html[data-theme="light"] .ax-lightbox { background: rgba(236,239,245,0.86); }
html[data-theme="light"] .ax-lightbox img,
html[data-theme="light"] .ax-lightbox video {
  box-shadow: 0 32px 80px -24px rgba(16,28,48,.4), 0 0 0 1px rgba(16,28,48,.08); }
html[data-theme="light"] .ax-lb-close,
html[data-theme="light"] .ax-lb-prev,
html[data-theme="light"] .ax-lb-next,
html[data-theme="light"] .ax-lightbox-x {
  background: rgba(16,24,40,.62); color: #fff;
  box-shadow: 0 4px 14px rgba(16,28,48,.22), inset 0 0 0 1px rgba(255,255,255,.12); }
html[data-theme="light"] .ax-lb-close:hover,
html[data-theme="light"] .ax-lb-prev:hover,
html[data-theme="light"] .ax-lb-next:hover,
html[data-theme="light"] .ax-lightbox-x:hover { background: rgba(16,24,40,.8); }
@media (max-width: 575px) {
  .ax-lb-prev, .ax-lb-next { width: 42px; height: 42px; }
  .ax-lb-prev { left: 10px; } .ax-lb-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-lightbox, .ax-lightbox img, .ax-lightbox video { animation: none; }
}

/* ============ LEGAL (Impressum / Datenschutz / AGB) ============ */
.ax-legal { max-width: 860px; padding-top: 40px; }
.ax-legal h1 { font-family: var(--ax-display); font-weight: 700; font-size: clamp(26px, 3.6vw, 38px);
  color: var(--white); margin: 6px 0 26px; }
.ax-legal-card { border-radius: var(--ax-r); background: var(--surface); border: var(--ax-border);
  padding: 24px 26px; margin-bottom: 16px; }
.ax-legal-card h2 { font-size: 17px; font-weight: 800; color: var(--white); margin-bottom: 12px; }
.ax-legal-card h2 a { color: var(--ice); }
.ax-legal-card p, .ax-legal-card li { font-size: 14.5px; color: var(--gray); line-height: 1.75; }
.ax-legal-card a { color: var(--ice); }
.ax-legal-card ul { padding-left: 20px; margin: 0; }
.ax-legal-updated { font-family: var(--ax-mono); font-size: 11.5px; color: var(--gray); margin-top: 24px; }
.ax-legal-note { display: flex; align-items: flex-start; padding: 12px 16px; border-radius: var(--ax-r-sm);
  border: var(--ax-border-hi); background: rgba(111,170,255,0.06); color: var(--gray);
  font-size: 13px; margin-bottom: 18px; }
.ax-legal-note i { color: var(--ice); margin-top: 2px; }

/* ============ ДОСТУПНОСТЬ / REDUCED MOTION ============ */
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ax-art-big, .ax-logo-dot { animation: none !important; }
  .ax-card, .ax-cat-tile, .ax-btn, .ax-news, .ax-why-card { transition: none !important; }
}

/* ============ КАРТОЧКА: категория, «новинка», продавец-ссылка ============ */
.ax-pcard-cat { font-family: var(--ax-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ice); opacity: 0.8; }
.ax-newchip { display: inline-flex; align-items: center; gap: 5px;
  color: var(--ice); opacity: 0.75; font-size: 10.5px; font-weight: 600;
  font-family: var(--ax-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.ax-newchip::before { content: '✦'; font-size: 10px; }
.ax-seller-link { text-decoration: none !important; color: var(--gray) !important; }
.ax-seller-link span, .ax-seller-link b { color: var(--gray); transition: color .15s; }
.ax-seller-link:hover, .ax-seller-link:hover span, .ax-seller-link:hover b { color: var(--ice) !important; }

/* ============ ПУБЛИЧНЫЙ ПРОФИЛЬ + кнопка-карандаш ============ */
.ax-prof { position: relative; padding-right: 44px; }
.ax-prof-edit { position: absolute; right: 0; top: 0; width: 34px; height: 34px;
  border-radius: 50%; border: var(--ax-border); background: var(--surface-2);
  color: var(--gray); display: grid; place-items: center; font-size: 13px;
  transition: color .15s, border-color .15s, transform .2s var(--ax-ease); }
.ax-prof-edit:hover { color: var(--ice); border: var(--ax-border-hi); transform: rotate(-8deg); }
.ax-ava-xl { width: 84px; height: 84px; }
.ax-ava-xl.ax-ava-letter { font-size: 32px; }
/* BUILD 20260728-271: публичная страница пользователя — единственная в этом
   семействе, где под хлебными крошками сразу идёт карточка. У кабинета,
   кабинета продавца и кабинета исполнителя между ними стоит <h1> со своим
   нижним отступом 26px; здесь заголовка нет намеренно — имя человека и так
   набрано крупно внутри карточки, — а вместе с ним пропал и воздух, карточка
   липла к крошкам. Возвращаем ровно ту же величину, чтобы страницы не
   разъезжались. */
/* ============ КОНТРАСТ ПОЛЕЙ + СТРАХОВКА ШИРИН ============ */
.ax-input, .ax-select { color: var(--white) !important; }
.ax-input::placeholder { color: var(--gray) !important; opacity: 1; }
.ax-legal-card .ax-btn, .ax-legal-card .ax-input, .ax-legal-card .ax-select,
.ax-sellform .ax-btn, .ax-sellform .ax-input { max-width: 100%; box-sizing: border-box; }

/* предпросмотр карточки */
.ax-pv-dialog { max-width: 360px; }
.ax-pv-dialog .ax-pcard { pointer-events: none; }

/* ============ КАСТОМНЫЙ ВЫБОР ФАЙЛА ============ */
.ax-file { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 18px; border-radius: 14px; cursor: pointer; margin: 0;
  border: 1.5px dashed rgba(111,170,255,0.35); background: rgba(111,170,255,0.04);
  color: var(--gray); font-size: 13.5px; transition: border-color .15s, background .15s, color .15s; }
.ax-file:hover { border-color: rgba(111,170,255,0.7); color: var(--text); background: rgba(111,170,255,0.08); }
.ax-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ax-file i { color: var(--ice); font-size: 17px; flex: none; }
.ax-file [data-fp-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-file.on { border-style: solid; border-color: rgba(111,220,156,0.5); color: var(--white); }
.ax-file.on i { color: #6fdc9c; }
.ax-file:focus-within { outline: 2px solid var(--ice); outline-offset: 2px; }

.ax-ph-current .ax-ph-item { position: relative; }
.ax-ph-current img, .ax-ph-item img { width: 68px; height: 68px; border-radius: 10px;
  object-fit: cover; border: var(--ax-border-hi); display: block; }
.ax-ph-item b { position: absolute; left: 4px; bottom: 4px; font-family: var(--ax-mono);
  font-size: 9px; padding: 2px 6px; border-radius: 6px; background: rgba(9,12,16,0.8); color: var(--ice); }
.ax-skel-sq { width: 68px; height: 68px; aspect-ratio: 1/1; border-radius: 10px; }

/* ============ ЗАКАЗЫ: доставка, таймер, напоминание; уведомления ============ */
.ax-oship { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 12.5px; color: var(--gray); }
.ax-oship b { color: var(--white); font-family: var(--ax-mono); }
.ax-oship a { color: var(--ice); text-decoration: none; }
.ax-oship a:hover { text-decoration: underline; }
.ax-otimer { color: #f2c265; font-family: var(--ax-mono); font-size: 12px; }
.ax-oremind { margin: 10px 0 0; padding: 9px 14px; border-radius: 12px; font-size: 12.5px;
  border: 1px solid rgba(242,194,101,0.35); background: rgba(242,194,101,0.08); color: #f2c265; }
.ax-bell-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto;
  text-align: left; width: 300px; }
.ax-bell-item { display: flex; align-items: baseline; gap: 6px; padding: 7px 4px; font-size: 12.5px;
  color: var(--gray); border-bottom: 1px solid rgba(111,170,255,0.08); }
.ax-bell-item:last-child { border-bottom: 0; }
.ax-bell-item.unread { color: var(--white); }
.ax-bell-item.unread i { color: var(--ice); }
.ax-bell-item span { flex: 1; }
.ax-bell-item time { font-family: var(--ax-mono); font-size: 10px; color: var(--mid-gray); flex: none; }

.ax-balance { font-family: var(--ax-mono); font-weight: 700; font-size: 34px; color: var(--white); margin: 6px 0 16px; }
.ax-sorder { margin-bottom: 12px; }
.ax-shipform { border-top: var(--ax-border); padding-top: 14px; }
a.ax-chip-ok { text-decoration: none; }

/* ============ KASSE: чекаут, сохранённые карты, Stripe Elements ============ */
.ax-ci-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(111,170,255,0.08); font-size: 14px; }
.ax-ci-row:last-child { border-bottom: 0; }
.ax-ci-total { margin-top: 6px; padding-top: 12px; border-top: var(--ax-border-hi); font-size: 16px; }
.ax-ci-total b { font-family: var(--ax-mono); color: var(--white); }
.ax-kasse-addr { line-height: 1.7; }
.ax-cardrow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: var(--ax-border); margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.ax-cardrow:hover { border: var(--ax-border-hi); }
.ax-cardrow.on { border-color: var(--ice); background: rgba(111,170,255,0.06); }
.ax-cardrow input[type=radio] { accent-color: var(--ice); }
.ax-cardrow i { color: var(--ice); font-size: 18px; }
.ax-cardrow span { flex: 1; font-weight: 600; }
.ax-cardrow-del { border: 0; background: transparent; color: var(--gray); width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; }
.ax-cardrow-del:hover { color: #ff8296; }
.ax-card-el { padding: 14px; border-radius: 12px; border: var(--ax-border-hi); background: var(--surface-2); }

/* ============ МОБИЛЬНЫЕ ОТСТУПЫ ============ */
@media (max-width: 767px) {
  .container-xl { padding-left: 18px !important; padding-right: 18px !important; }
  .ax-legal-card { padding: 20px 16px; }
  .ax-section { padding: 40px 0; }
}

/* рейтинг продавца */
.ax-seller-rate { color: #f2c265; font-family: var(--ax-mono); font-size: 12px; margin-left: 4px; white-space: nowrap; }
.ax-seller-rate i { font-size: 10px; margin-right: 3px; }


/* ============ Verified-щит продавца (зелёный) ============ */
.ax-verified-badge { color: #58D68D; font-size: 0.9em; margin-left: 3px; cursor: help; vertical-align: -1px;
  filter: drop-shadow(0 0 6px rgba(88,214,141,.45)); }

/* ============ CTA «Стать продавцом» на главной ============ */
.ax-sell-cta { position: relative; overflow: hidden; text-align: center; padding: 56px 28px;
  border: 1px solid rgba(210,224,247,.14); border-radius: 22px;
  background:
    radial-gradient(600px 280px at 15% 0%, rgba(210,224,247,.10), transparent 60%),
    radial-gradient(600px 280px at 85% 100%, rgba(88,214,141,.08), transparent 60%),
    rgba(255,255,255,.02); }
.ax-sell-cta-kicker { font-family: var(--ax-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ice); border: 1px solid rgba(210,224,247,.22); border-radius: 999px; padding: 6px 14px; display: inline-block; }
.ax-sell-cta-title { font-family: var(--ax-display); font-weight: 800; color: var(--white);
  font-size: clamp(26px, 4.4vw, 44px); margin: 18px auto 12px; max-width: 720px; }
.ax-sell-cta-sub { color: var(--txt); max-width: 640px; margin: 0 auto 18px; font-size: 15px; line-height: 1.65; }
.ax-sell-cta-badges { display: flex; gap: 10px 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.ax-sell-cta-badges > span { font-family: var(--ax-mono); font-size: 12.5px; color: var(--ice);
  border: 1px dashed rgba(210,224,247,.22); border-radius: 999px; padding: 7px 14px; }
.ax-sell-cta-btn { font-size: 16px; padding: 14px 34px; }

/* ============ Мастер регистрации продавца ============ */
.ax-wiz { display: flex; align-items: center; gap: 6px; margin-bottom: 26px; }
.ax-wiz-step { display: flex; align-items: center; gap: 8px; opacity: .45; }
.ax-wiz-step.active, .ax-wiz-step.done { opacity: 1; }
.ax-wiz-num { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ax-mono); font-size: 13px; border: 1px solid rgba(210,224,247,.3); color: var(--ice); flex: 0 0 auto; }
.ax-wiz-step.active .ax-wiz-num { background: var(--ice); color: #0D1117; border-color: var(--ice); }
.ax-wiz-step.done .ax-wiz-num { background: rgba(88,214,141,.18); color: #58D68D; border-color: rgba(88,214,141,.4); }
.ax-wiz-lbl { font-size: 12.5px; color: var(--txt); white-space: nowrap; }
.ax-wiz-line { flex: 1; height: 1px; background: rgba(210,224,247,.16); min-width: 12px; }
.ax-done-ok { color: #58D68D; }
.ax-done-wait { color: var(--ice); }
@media (max-width: 640px) { .ax-wiz-lbl { display: none; } }

/* ============ Споры: модал-чат ============ */
.ax-disp-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(5,8,12,.72);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.ax-disp-modal { width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  background: #131A23; border: 1px solid rgba(210,224,247,.16); border-radius: 18px; padding: 22px; }
.ax-disp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ax-disp-thread { display: flex; flex-direction: column; gap: 12px; max-height: 44vh; overflow-y: auto;
  padding: 14px; border: 1px solid rgba(210,224,247,.1); border-radius: 12px; background: rgba(255,255,255,.02); }
.ax-disp-msg { display: flex; flex-direction: column; max-width: 86%; }
.ax-disp-msg.mine { align-self: flex-end; align-items: flex-end; }
.ax-disp-who { font-family: var(--ax-mono); font-size: 11px; color: var(--ice); margin-bottom: 3px; }
.ax-disp-bubble { background: rgba(210,224,247,.08); border: 1px solid rgba(210,224,247,.12);
  border-radius: 12px; padding: 9px 13px; color: var(--white); font-size: 14px; line-height: 1.55; word-break: break-word; }
.ax-disp-msg.mine .ax-disp-bubble { background: rgba(210,224,247,.16); }
.ax-disp-msg time { font-size: 10.5px; color: var(--txt); margin-top: 3px; }
.ax-disp-sys { text-align: center; font-size: 12.5px; color: var(--txt); font-family: var(--ax-mono); }
.ax-disp-admin { color: #F5B041; }
.ax-disp-prop { margin-top: 12px; padding: 12px 14px; border: 1px dashed rgba(88,214,141,.35);
  border-radius: 12px; color: var(--white); font-size: 14px; }
.ax-disp-propform { margin-top: 12px; color: var(--txt); font-size: 14px; }
.ax-disp-propform summary { cursor: pointer; color: var(--ice); }
.ax-disp-compose { margin-top: 12px; }
.ax-input-sm { padding: 6px 10px; font-size: 13px; }
.ax-disp-warn { border: 1px solid rgba(245,176,65,.35); background: rgba(245,176,65,.08);
  color: #F5B041; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }

/* ============ 3D-сцена и иммерсивный hero (v2) ============ */
.ax-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  transition: opacity 0.2s linear; will-change: opacity; }
.ax-scene canvas { display: block; width: 100%; height: 100%; }

.ax-hero-3d { min-height: 100svh; min-height: 100vh; display: flex; align-items: center;
  padding: 110px 0 70px; }
.ax-hero-3d::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9,12,16,0.28), transparent 18%); }
.ax-hero-3d .container-xl { position: relative; z-index: 2; }
.ax-hero-center { max-width: 860px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.ax-hero-3d h1 { font-size: clamp(42px, 6.6vw, 84px); line-height: 1.02; letter-spacing: -0.038em; margin: 20px 0 24px; }
.ax-hero-3d .ax-hero-sub { margin: 0 auto 34px; max-width: 620px; }
.ax-hero-3d .ax-hero-search { width: 100%; max-width: 640px; margin: 0 auto;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55); }
.ax-hero-3d .ax-hero-chips { justify-content: center; margin-top: 20px; }
.ax-hero-3d .ax-hero-stats { justify-content: center; margin-top: 44px; }

/* scroll hint */
.ax-scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(148,163,184,0.45); border-radius: 999px;
  z-index: 2; pointer-events: none; }
.ax-scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 999px; background: var(--ice);
  animation: axScrollHint 1.8s ease-in-out infinite; }
@keyframes axScrollHint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (max-height: 620px) { .ax-scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .ax-scroll-hint span { animation: none; } }

/* светлая тема */
html[data-theme="light"] .ax-hero-3d::before {
  background: linear-gradient(180deg, rgba(242,244,248,0.32), transparent 18%); }
html[data-theme="light"] .ax-hero-3d .ax-hero-search {
  box-shadow: 0 24px 60px -18px rgba(16,24,40,0.22); }

/* hero прозрачный: фон рисует WebGL-сцена */
.ax-hero-3d { background: transparent; }
html[data-theme="light"] .ax-hero-3d { background: transparent; }

/* мягкая «гауссова» тень только вокруг текста, фон прозрачный */
.ax-hero-center { position: relative; }
.ax-hero-center::before { content: ''; position: absolute; inset: -10% -16%; z-index: -1;
  pointer-events: none; filter: blur(34px);
  background: radial-gradient(ellipse 52% 48% at 50% 40%,
    rgba(9,12,16,0.74), rgba(9,12,16,0.38) 52%, transparent 74%); }
.ax-hero-3d h1 { text-shadow: 0 1px 18px rgba(9,12,16,0.7); }
/* градиентный span: text-shadow просвечивает сквозь прозрачную заливку —
   вместо него drop-shadow, он рисуется ЗА буквами */
.ax-hero-3d h1 span { text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(9,12,16,0.85)) drop-shadow(0 0 34px rgba(9,12,16,0.5)); }
.ax-hero-3d .ax-kicker,
.ax-hero-3d .ax-hero-sub,
.ax-hero-3d .ax-hero-stats { text-shadow: 0 1px 16px rgba(9,12,16,0.85); }

html[data-theme="light"] .ax-hero-center::before {
  background: radial-gradient(ellipse 52% 48% at 50% 40%,
    rgba(242,244,248,0.88), rgba(242,244,248,0.48) 52%, transparent 74%); }
html[data-theme="light"] .ax-hero-3d h1 {
  text-shadow: 0 2px 26px rgba(242,244,248,0.9), 0 0 70px rgba(242,244,248,0.7); }
html[data-theme="light"] .ax-hero-3d h1 span { text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(242,244,248,0.92)) drop-shadow(0 0 34px rgba(242,244,248,0.6)); }
html[data-theme="light"] .ax-hero-3d .ax-kicker,
html[data-theme="light"] .ax-hero-3d .ax-hero-sub,
html[data-theme="light"] .ax-hero-3d .ax-hero-stats {
  text-shadow: 0 1px 16px rgba(242,244,248,0.9); }

/* тень-размытие у заголовков секций и бегущей строки (читаемость на фоне сцены) */
.ax-marquee-track span { filter: drop-shadow(0 2px 7px rgba(9,12,16,0.8)) drop-shadow(0 0 3px rgba(9,12,16,0.55)); }
html[data-theme="light"] .ax-marquee-track span {
  filter: drop-shadow(0 2px 7px rgba(242,244,248,0.9)) drop-shadow(0 0 3px rgba(242,244,248,0.65)); }
.ax-sec-title { text-shadow: 0 1px 10px rgba(9,12,16,0.75); }
.ax-sec-more { text-shadow: 0 1px 10px rgba(9,12,16,0.9); }

html[data-theme="light"] .ax-sec-title {
  text-shadow: 0 1px 12px rgba(242,244,248,0.95), 0 0 32px rgba(242,244,248,0.8); }
html[data-theme="light"] .ax-sec-more { text-shadow: 0 1px 10px rgba(242,244,248,0.95); }


/* ============ Liquid Glass (тёмные тона + светлая тема) ============ */
.ax-header { background: linear-gradient(180deg, rgba(18,26,38,0.60), rgba(9,12,16,0.66));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(255,255,255,0.04); }
.ax-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); }
html[data-theme="light"] .ax-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(16,24,40,0.06); }
.ax-header .ax-iconbtn { background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
html[data-theme="light"] .ax-header .ax-iconbtn { background: rgba(16,24,40,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75); }

.ax-hero-3d .ax-hero-search { background: rgba(13,19,28,0.55);
  backdrop-filter: blur(30px) saturate(165%) brightness(1.06); -webkit-backdrop-filter: blur(30px) saturate(165%) brightness(1.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 60px -18px rgba(0,0,0,0.55); }
html[data-theme="light"] .ax-hero-3d .ax-hero-search { background: rgba(255,255,255,0.62);
  backdrop-filter: blur(30px) saturate(165%); -webkit-backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 24px 60px -18px rgba(16,24,40,0.22); }

.ax-hero-3d .ax-hero-chips a { background: rgba(13,19,28,0.42);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
html[data-theme="light"] .ax-hero-3d .ax-hero-chips a { background: rgba(255,255,255,0.55);
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85); }

/* ============ Выпадашки: стекло + анимация ============ */
.ax-dropdown { background-color: rgba(14,20,28,0.58);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  backdrop-filter: blur(34px) saturate(170%) brightness(1.08);
  -webkit-backdrop-filter: blur(34px) saturate(170%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 6px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(255,255,255,0.04),
    0 18px 44px rgba(0,0,0,0.45); }
.ax-dropdown .dropdown-item { border-radius: 10px; display: flex; align-items: center; }
.ax-dropdown .dropdown-item.active { color: var(--ice); font-weight: 700; background: rgba(111,170,255,0.10); }
html[data-theme="light"] .ax-dropdown { background-color: rgba(255,255,255,0.64);
  border-color: rgba(16,24,40,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 44px rgba(16,24,40,0.16); }
html[data-theme="light"] .ax-dropdown .dropdown-item.active { background: rgba(29,91,214,0.10); }

.dropdown-menu.ax-dropdown.show { animation: axDropIn .22s ease-out; }
.dropdown-menu.ax-dropdown.show > li { animation: axDropItem .32s cubic-bezier(.25,.9,.3,1) both; }
.dropdown-menu.ax-dropdown.show > li:nth-child(1) { animation-delay: .02s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(2) { animation-delay: .05s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(3) { animation-delay: .08s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(4) { animation-delay: .11s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(5) { animation-delay: .14s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(6) { animation-delay: .17s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(7) { animation-delay: .20s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(8) { animation-delay: .23s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(9) { animation-delay: .26s; }
.dropdown-menu.ax-dropdown.show > li:nth-child(10) { animation-delay: .29s; }
@keyframes axDropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes axDropItem { from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu.ax-dropdown.show, .dropdown-menu.ax-dropdown.show > li { animation: none; }
}


/* ============ Премиальные микро-анимации кнопок ============ */
.btn, .ax-btn-primary, .ax-catalog-btn, .ax-hero-search button, .ax-search button,
.ax-buy, .ax-userbtn, .ax-hero-chips a, .ax-dropdown .dropdown-item, .form-submit, .ax-pag button {
  position: relative; overflow: hidden; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--ax-ease), box-shadow .25s var(--ax-ease),
    border-color .2s, color .2s, background-color .2s, filter .2s; }
.btn:active, .ax-btn-primary:active, .ax-catalog-btn:active, .ax-hero-search button:active,
.ax-search button:active, .ax-buy:active, .ax-userbtn:active, .ax-hero-chips a:active,
.form-submit:active, .ax-pag button:active {
  transform: scale(.96) translateY(1px); transition-duration: .08s; }

/* блик-«шайн» по градиентным кнопкам */
.ax-btn-primary::after, .ax-hero-search button::after, .ax-search button::after,
.ax-catalog-btn::after, .form-submit::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -85%; width: 60%; z-index: 1;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-20deg); pointer-events: none; transition: left .6s ease; }
.ax-btn-primary:hover::after, .ax-hero-search button:hover::after, .ax-search button:hover::after,
.ax-catalog-btn:hover::after, .form-submit:hover::after { left: 125%; }
.ax-btn-primary:hover, .ax-hero-search button:hover, .form-submit:hover {
  transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(46,111,242,0.55); }

/* иконочные кнопки шапки: подъём + «поп» иконки (без overflow — не режем бейджи) */
.ax-iconbtn i { display: inline-block; }
.ax-iconbtn:hover { transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(46,111,242,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
.ax-iconbtn:hover i { animation: axIconPop .45s var(--ax-ease); }
.ax-iconbtn:active { transform: scale(.92); transition-duration: .08s; }
@keyframes axIconPop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-7deg); } 100% { transform: scale(1); } }
html[data-theme="light"] .ax-iconbtn:hover {
  box-shadow: 0 8px 20px -6px rgba(29,91,214,0.28), inset 0 1px 0 rgba(255,255,255,0.8); }

/* пункты выпадашек: сдвиг вправо */
.ax-dropdown .dropdown-item { transition: transform .2s var(--ax-ease), background-color .2s, color .2s; }
.ax-dropdown .dropdown-item:hover { transform: translateX(4px); }

/* чипы hero: пружинка */
.ax-hero-chips a:hover { transform: translateY(-2px) scale(1.04); }

/* ripple при клике (спавнится из app.js) */
.ax-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 40%, transparent 70%);
  transform: scale(0); animation: axRipple .6s ease-out forwards; }
@keyframes axRipple { to { transform: scale(1); opacity: 0; } }
html[data-theme="light"] .ax-ripple {
  background: radial-gradient(circle, rgba(29,91,214,0.22) 0%, rgba(29,91,214,0.07) 40%, transparent 70%); }

@media (prefers-reduced-motion: reduce) {
  .ax-ripple { display: none; }
  .ax-iconbtn:hover i { animation: none; }
  .ax-btn-primary::after, .ax-hero-search button::after, .ax-search button::after,
  .ax-catalog-btn::after, .form-submit::after { transition: none; }
}


/* ============ Мобильная оптимизация стекла и теней ============ */
@media (max-width: 820px) {
  /* backdrop-blur — самый дорогой эффект на телефоне: сильно уменьшаем радиусы,
     компенсируем более плотной подложкой */
  .ax-header::before { backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%); }
  .ax-dropdown { background-color: rgba(14,20,28,0.85);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
  html[data-theme="light"] .ax-dropdown { background-color: rgba(255,255,255,0.90); }
  .ax-hero-3d .ax-hero-search { background: rgba(13,19,28,0.74);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  html[data-theme="light"] .ax-hero-3d .ax-hero-search { background: rgba(255,255,255,0.86);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .ax-hero-3d .ax-hero-chips a { background: rgba(13,19,28,0.62);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-theme="light"] .ax-hero-3d .ax-hero-chips a { background: rgba(255,255,255,0.78); }

  /* тени/размытия текста — по одному слою вместо двух */
  .ax-marquee-track span { filter: drop-shadow(0 2px 6px rgba(9,12,16,0.8)); }
  html[data-theme="light"] .ax-marquee-track span { filter: drop-shadow(0 2px 6px rgba(242,244,248,0.9)); }
  .ax-hero-center::before { filter: blur(20px); }
  .ax-hero-3d h1 { text-shadow: 0 2px 18px rgba(9,12,16,0.85); }
  html[data-theme="light"] .ax-hero-3d h1 { text-shadow: 0 2px 18px rgba(242,244,248,0.9); }

  /* шайн-блик на кнопках не нужен там, где нет hover */
  .ax-btn-primary::after, .ax-hero-search button::after, .ax-search button::after,
  .ax-catalog-btn::after, .form-submit::after { content: none; }
}

/* ================= ВОПРОСЫ НА КАРТОЧКЕ ТОВАРА ================= */
.ax-ptabs { display: flex; gap: 8px; margin: 28px 0 14px; border-bottom: 1px solid var(--mid-gray); }
.ax-ptab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--gray); font-weight: 700; font-size: 14.5px; padding: 8px 14px 10px;
  cursor: pointer; transition: color .18s, border-color .18s; margin-bottom: -1px;
}
.ax-ptab:hover { color: var(--text); }
.ax-ptab.on { color: var(--text); border-bottom-color: var(--arctrik); }
.ax-ptab-n {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: var(--surface-2); font-size: 11.5px; color: var(--gray);
}
.ax-ptab.on .ax-ptab-n { background: var(--arctrik); color: #fff; }
.ax-qa-list { display: flex; flex-direction: column; gap: 14px; }
.ax-qa { border-radius: 14px; background: var(--surface); border: 1px solid var(--mid-gray); padding: 14px 16px; }
.ax-qa-q p { margin: 8px 0 4px; color: var(--text); }
.ax-qa-a {
  margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: var(--surface-2); border-left: 3px solid var(--arctrik);
}
.ax-qa-a b { font-size: 13px; color: var(--ice); }
.ax-qa-a p { margin: 6px 0 4px; color: var(--text); }
.ax-qa-wait { margin: 10px 0 0; font-size: 13.5px; }
.ax-qa-form textarea { resize: vertical; }
html[data-theme="light"] .ax-qa { background: #FFFFFF; border-color: #E4E9F1; }
html[data-theme="light"] .ax-qa-a { background: #F5F8FC; }

/* ================= УСЛУГИ: ЛИЧНО ОТ ARKTROPIX ================= */
.ax-srv-byax {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 6px 0 26px; padding: 16px 20px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(46,111,242,0.12), rgba(21,32,56,0.35));
  border: 1px solid rgba(191,217,255,0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 32px rgba(8,15,30,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.ax-srv-byax > i { font-size: 26px; color: var(--ice); line-height: 1; margin-top: 2px; }
.ax-srv-byax b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.ax-srv-byax p { margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 720px; }
html[data-theme="light"] .ax-srv-byax {
  background: linear-gradient(135deg, rgba(46,111,242,0.08), rgba(255,255,255,0.45));
  border-color: rgba(46,111,242,0.22);
  box-shadow: 0 8px 32px rgba(21,50,120,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ================= МЕССЕНДЖЕР (стиль веб-Telegram) ================= */
.ax-chat {
  display: grid; grid-template-columns: 340px 1fr; gap: 0;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--mid-gray);
  background: var(--surface); height: calc(100dvh - 160px); min-height: 460px;
}
.ax-chat-side { border-right: 1px solid var(--mid-gray); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ax-chat-side-head { padding: 15px 18px; border-bottom: 1px solid var(--mid-gray); }
.ax-chat-side-head h2 { font-size: 17px; margin: 0; font-weight: 800; }
.ax-chat-list { overflow-y: auto; flex: 1; padding: 6px; }
.ax-chat-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: none; border: 0; border-radius: 12px;
  cursor: pointer; text-align: left; color: var(--text); transition: background .15s;
}
.ax-chat-item:hover { background: var(--surface-2); }
.ax-chat-item.on { background: var(--arctrik); }
.ax-chat-item.on b, .ax-chat-item.on small, .ax-chat-item.on time { color: #fff; }
.ax-chat-item.on .ax-count { background: #fff; color: var(--arctrik); }
.ax-chat-item-mid { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ax-chat-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.ax-chat-item-top b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-chat-item-top time { font-size: 11px; color: var(--gray); flex-shrink: 0; }
.ax-chat-item-mid small { color: var(--gray); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-chat-unread { position: static; flex-shrink: 0; }
.ax-chat-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; }
.ax-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--mid-gray); }
.ax-chat-head a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.ax-chat-peerbtn { background: none; border: 0; padding: 4px 6px; border-radius: 10px; cursor: pointer; transition: background .15s;
  color: var(--text); font: inherit; display: inline-flex; align-items: center; gap: 8px; }
.ax-chat-peerbtn b { color: var(--text); }
.ax-chat-peerbtn:hover { background: var(--surface-2); }
.ax-chat-searchbtn { margin-left: auto; }
.ax-e2ee-badge { display: inline-flex; align-items: center; gap: 4px; color: #55d69e; font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
/* поиск по сообщениям (оверлей поверх шапки, как в Telegram) */
.ax-chat-searchbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--surface); border-bottom: 1px solid var(--mid-gray);
}
.ax-chat-searchbar[hidden] { display: none; }
.ax-chat-searchbar > i { color: var(--gray); font-size: 15px; }
.ax-chat-searchbar input {
  flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--mid-gray);
  border-radius: 10px; color: var(--text); padding: 7px 12px; font-size: 14px; outline: none;
}
.ax-chat-searchbar input:focus { border-color: var(--arctrik); }
.ax-chat-sres {
  position: absolute; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: var(--surface); border-bottom: 1px solid var(--mid-gray);
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
.ax-chat-sres[hidden] { display: none; }
.ax-chat-sres-item {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: none; border: 0; border-bottom: 1px solid var(--mid-gray);
  color: var(--text); cursor: pointer; text-align: left; font-size: 13.5px;
}
.ax-chat-sres-item:hover { background: var(--surface-2); }
.ax-chat-sres-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ax-chat-sres-item time { color: var(--gray); font-size: 11.5px; flex-shrink: 0; }
.ax-chat-sres-none { padding: 14px; text-align: center; color: var(--gray); font-size: 13px; }
/* подсветка найденного сообщения */
.ax-msg.flash { animation: axMsgFlash 1.4s ease; }
@keyframes axMsgFlash { 0%, 55% { box-shadow: 0 0 0 3px var(--arctrik); } 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.25); } }
/* панель профиля собеседника: медиа и файлы */
.ax-chat-info {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); z-index: 8;
  background: var(--surface); border-left: 1px solid var(--mid-gray);
  display: flex; flex-direction: column; animation: axCiIn .2s ease;
}
@keyframes axCiIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ax-chat-info-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--mid-gray); }
.ax-chat-info-head b { font-size: 15px; }
.ax-chat-info-head .ax-iconbtn { margin-left: auto; }
.ax-chat-info-body { overflow-y: auto; flex: 1; min-height: 0; }
.ax-ci-user { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px 12px; }
.ax-ci-user b { font-size: 16.5px; }
.ax-ci-user .ax-btn { font-size: 13px; padding: 6px 14px; }
.ax-ci-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--mid-gray); }
.ax-ci-tab {
  flex: 1; padding: 8px; border: 0; border-radius: 10px; background: none;
  color: var(--gray); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s;
}
.ax-ci-tab.on { background: var(--surface-2); color: var(--text); }
.ax-ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 10px; }
.ax-ci-th { aspect-ratio: 1; border-radius: 8px; overflow: hidden; display: block; background: var(--surface-2); }
.ax-ci-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-ci-files { display: flex; flex-direction: column; padding: 6px; }
.ax-ci-file { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--text); }
.ax-ci-file:hover { background: var(--surface-2); }
.ax-ci-file i { font-size: 26px; color: var(--ice); flex-shrink: 0; }
.ax-ci-file span { display: flex; flex-direction: column; min-width: 0; }
.ax-ci-file b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ci-file small { color: var(--gray); font-size: 11.5px; }
.ax-ci-empty { padding: 24px 14px; text-align: center; color: var(--gray); font-size: 13.5px; }
.ax-chat-back { display: none; }
.ax-chat-hint {
  grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--gray); height: 100%;
}
.ax-chat-hint i { font-size: 40px; opacity: .5; }
/* лента: тёмное полотно с «кристаликами» (фирменный паттерн, как обои Telegram) */
.ax-chat-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y;
  padding: 20px 18px 14px; display: flex; flex-direction: column; gap: 6px;
  background-color: #0B1017;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%236FAAFF' stroke-opacity='.09' stroke-width='1.3'%3E%3Cpath d='M30 26l12-14 12 14-12 17zM42 12v31M30 26h24'/%3E%3Cpath d='M138 52l8-9 8 9-8 11z'/%3E%3Cpath d='M64 132l13-15 13 15-13 19zM77 117v34M64 132h26'/%3E%3Cpath d='M158 150l7-8 7 8-7 10z'/%3E%3Cpath d='M104 34l6-7 6 7-6 9z'/%3E%3Cpath d='M22 172l6-7 6 7-6 9z'/%3E%3Cpath d='M182 96l5-6 5 6-5 8z'/%3E%3C/g%3E%3C/svg%3E");
}
.ax-chat-date { align-self: center; margin: 8px 0 4px; }
.ax-chat-date span {
  background: rgba(13,17,23,0.55); color: #CFE0F5; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}
.ax-msg {
  align-self: flex-start; max-width: min(76%, 480px);
  background: var(--surface-2); border-radius: 16px 16px 16px 5px;
  padding: 7px 12px; display: inline-flex; align-items: flex-end; gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.ax-msg span { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.45; }
.ax-msg time { font-size: 10.5px; color: var(--gray); flex-shrink: 0; }
.ax-msg-tick { font-size: 14px; line-height: 1; color: var(--gray); flex-shrink: 0; margin-left: -4px; align-self: flex-end; }
.ax-msg.mine .ax-msg-tick { color: rgba(255,255,255,0.7); }
.ax-msg.mine .ax-msg-tick.read { color: #FFFFFF; }
.ax-msg.mine {
  align-self: flex-end; background: var(--grad); color: #fff;
  border-radius: 16px 16px 5px 16px;
}
.ax-msg.mine time { color: rgba(255,255,255,0.75); }
/* группировка пузырей как в Telegram: соседние углы внутри группы скруглены меньше */
.ax-msg:not(.mine):not(.ax-typing-bub) + .ax-msg:not(.mine):not(.ax-typing-bub) { border-top-left-radius: 6px; }
.ax-msg:not(.mine):has(+ .ax-msg:not(.mine):not(.ax-typing-bub)) { border-bottom-left-radius: 6px; }
.ax-msg.mine + .ax-msg.mine { border-top-right-radius: 6px; }
.ax-msg.mine:has(+ .ax-msg.mine) { border-bottom-right-radius: 6px; }
.ax-msg:not(.mine):not(.ax-typing-bub) + .ax-msg:not(.mine):not(.ax-typing-bub),
.ax-msg.mine + .ax-msg.mine { margin-top: -3px; }
/* телеграмный «хвостик»: плавный переход пузыря в узкую линию (только у последнего в группе) */
.ax-msg { --bub: var(--surface-2); }
html[data-theme="light"] .ax-msg:not(.mine) { --bub: #FFFFFF; }
.ax-msg.mine { --bub: var(--grad-end); } /* низ градиента — хвост сливается с нижним краем */
/* Здесь стоял #53A0FF — низ старого градиента. Градиент потом переделали
   ради контраста белого текста (#3170E6 → #2A63D8), а хвост остался
   прежним и торчал светлым пятном под пузырём. Теперь цвет берётся из
   того же токена, что и заливка, и разъехаться они больше не могут. */
.ax-msg:not(.mine):not(.ax-typing-bub):not(:has(+ .ax-msg:not(.mine):not(.ax-typing-bub))) {
  border-bottom-left-radius: 2px;
}
.ax-msg:not(.mine):not(.ax-typing-bub):not(:has(+ .ax-msg:not(.mine):not(.ax-typing-bub)))::after {
  content: ''; position: absolute; left: -7px; bottom: 0; width: 8px; height: 14px;
  background: radial-gradient(8px 14px at 0 0, rgba(0,0,0,0) 96%, var(--bub) 100%);
  pointer-events: none;
}
.ax-msg.mine:not(:has(+ .ax-msg.mine)) { border-bottom-right-radius: 2px; }
.ax-msg.mine:not(:has(+ .ax-msg.mine))::after {
  content: ''; position: absolute; right: -7px; bottom: 0; width: 8px; height: 14px;
  background: radial-gradient(8px 14px at 100% 0, rgba(0,0,0,0) 96%, var(--bub) 100%);
  pointer-events: none;
}
/* ник + аватар над группой входящих сообщений */
.ax-msg-who { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin: 10px 0 3px; }
.ax-msg-who .ax-ava-sm { width: 30px; height: 30px; min-width: 30px; font-size: 12px; }
.ax-msg-who b { font-size: 13.5px; font-weight: 600; color: var(--ice); }
.ax-msg { position: relative; }
/* моб.: долгий тап открывает меню — глушим системное выделение/callout */
@media (hover: none) {
  .ax-msg, .ax-chat-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* «печатает…» с прыгающими точками (как в Telegram) */
.ax-chat-typing {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
  font-size: 12.5px; color: var(--ice); white-space: nowrap;
}
.ax-chat-typing[hidden] { display: none; }
.ax-chat-typing em { font-style: normal; margin-right: 2px; }
.ax-chat-typing i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--ice);
  animation: axTypeDot 1.2s infinite ease-in-out;
}
.ax-chat-typing i:nth-of-type(2) { animation-delay: .2s; }
.ax-chat-typing i:nth-of-type(3) { animation-delay: .4s; }
@keyframes axTypeDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .ax-chat-typing i { animation: none; opacity: 0.7; } }
/* пометка «изменено» перед временем */
.ax-msg-edlbl { font-style: normal; margin-right: 5px; opacity: 0.85; }
/* панель «редактирование сообщения» над формой */
.ax-chat-edit {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text);
}
.ax-chat-edit[hidden] { display: none; }
.ax-chat-edit > i.bi-pencil { color: var(--ice); }
.ax-chat-edit b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* цитата-ответ внутри пузыря (как в Telegram) */
.ax-msg-quote {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: rgba(111,170,255,0.12); border-left: 3px solid var(--ice);
  border-radius: 6px; padding: 4px 8px; color: inherit; font: inherit; min-width: 0;
}
.ax-msg-quote b { display: block; font-size: 12px; font-weight: 600; color: var(--ice);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-msg-quote span { display: block; font-size: 12.5px; opacity: 0.85; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-msg.mine .ax-msg-quote { background: rgba(255,255,255,0.16); border-left-color: #FFFFFF; }
.ax-msg.mine .ax-msg-quote b { color: #FFFFFF; }
.ax-msg-bodycol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-msg .ax-msg-bodycol { white-space: normal; }
/* эмодзи-реакции на пузыре */
.ax-msg-reacts { display: inline-flex; gap: 4px; align-self: flex-end; flex-shrink: 0; }
.ax-react {
  display: inline-flex; align-items: center; gap: 3px; border: 0; cursor: pointer;
  background: rgba(111,170,255,0.16); border-radius: 999px; padding: 2px 7px;
  font-size: 12.5px; line-height: 1.3; color: var(--text); transition: background .15s, transform .15s;
}
.ax-react b { font-size: 11px; font-weight: 600; }
.ax-react:hover { transform: scale(1.06); }
.ax-react.my { background: var(--grad); color: #fff; }
.ax-msg.mine .ax-react { background: rgba(255,255,255,0.2); color: #fff; }
.ax-msg.mine .ax-react.my { background: #FFFFFF; color: var(--arctrik); }
/* ряд эмодзи над пунктами ПКМ-меню */
.ax-ctx-emo { display: flex; gap: 2px; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ax-ctx-em {
  border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1;
  padding: 4px; border-radius: 10px; transition: transform .15s;
}
.ax-ctx-em:hover { transform: scale(1.28); }
/* сниппет цитируемого сообщения в панели над формой */
.ax-chat-edit > i.bi-reply { color: var(--ice); }
.ax-chat-editsnip {
  display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* вложения */
.ax-msg.has-img { padding: 5px; flex-direction: column; align-items: flex-start; gap: 4px; }
.ax-msg-img { display: block; max-width: 100%; }
.ax-msg-img img { display: block; width: 100%; max-width: 320px; max-height: 320px; object-fit: cover; border-radius: 12px; }
.ax-msg.has-img span { padding: 0 6px; }
.ax-msg.has-img time { align-self: flex-end; padding: 0 6px 2px; }
.ax-msg-file { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 2px 4px 2px 0; }
.ax-msg-file i { font-size: 30px; color: var(--ice); }
.ax-msg.mine .ax-msg-file i { color: #fff; }
.ax-msg-file span { display: flex; flex-direction: column; min-width: 0; padding: 0; }
.ax-msg-file b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ax-msg-file small { font-size: 11px; color: var(--gray); }
.ax-msg.mine .ax-msg-file small { color: rgba(255,255,255,0.75); }
.ax-e2file { border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.ax-e2file:hover { opacity: .85; }
.ax-e2file[disabled] { cursor: wait; opacity: .65; }
/* прикреплённый, но ещё не отправленный файл */
.ax-chat-pend {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--mid-gray); background: var(--surface-2); font-size: 13px;
}
.ax-chat-pend[hidden] { display: none; }
.ax-chat-pend img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; }
.ax-chat-pend > i { font-size: 24px; color: var(--ice); }
.ax-chat-pend b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; font-size: 13px; }
.ax-chat-pend small { color: var(--gray); }
.ax-chat-pend button { margin-left: auto; }
.ax-chat-form {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--mid-gray); background: var(--surface);
}
.ax-chat-form textarea { resize: none; flex: 1; border-radius: 14px; max-height: 120px; }
.ax-chat-attach { flex-shrink: 0; align-self: center; }
.ax-chat-sendbtn {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--grad); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; transition: transform .15s;
}
.ax-chat-sendbtn:hover { transform: scale(1.06); }
.ax-chat-none { padding: 16px; text-align: center; }
@media (max-width: 900px) {
  .ax-chat { grid-template-columns: 1fr; height: calc(100dvh - 210px); min-height: 380px; }
  .ax-chat-side { border-right: 0; }
  .ax-chat-main { display: none; }
  .ax-chat.thread-open .ax-chat-side { display: none; }
  .ax-chat.thread-open .ax-chat-main { display: flex; }
  .ax-chat-back { display: inline-flex; }
  .ax-msg { max-width: 84%; }
}
html[data-theme="light"] .ax-chat { background: #FFFFFF; border-color: #E4E9F1; }
html[data-theme="light"] .ax-chat-side,
html[data-theme="light"] .ax-chat-side-head,
html[data-theme="light"] .ax-chat-head,
html[data-theme="light"] .ax-chat-form { border-color: #EAEFF6; background-color: #FFFFFF; }
html[data-theme="light"] .ax-chat-searchbar,
html[data-theme="light"] .ax-chat-sres,
html[data-theme="light"] .ax-chat-info,
html[data-theme="light"] .ax-chat-info-head,
html[data-theme="light"] .ax-ci-tabs { border-color: #EAEFF6; background-color: #FFFFFF; }
html[data-theme="light"] .ax-chat-searchbar input { background: #F5F8FC; border-color: #E4E9F1; }
html[data-theme="light"] .ax-chat-sres { box-shadow: 0 14px 28px rgba(21,50,120,0.12); }
html[data-theme="light"] .ax-chat-sres-item { border-color: #EEF2F8; }
html[data-theme="light"] .ax-chat-sres-item:hover, html[data-theme="light"] .ax-ci-file:hover,
html[data-theme="light"] .ax-chat-peerbtn:hover { background: #F5F8FC; }
html[data-theme="light"] .ax-ci-tab.on { background: #F5F8FC; color: var(--text); }
html[data-theme="light"] .ax-ci-th { background: #F5F8FC; }
html[data-theme="light"] .ax-chat-side { background-color: transparent; }
html[data-theme="light"] .ax-chat-item:hover { background: #F5F8FC; }
html[data-theme="light"] .ax-chat-item.on { background: var(--arctrik); }
html[data-theme="light"] .ax-chat-msgs {
  background-color: #E9F0F9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%232E6FF2' stroke-opacity='.08' stroke-width='1.3'%3E%3Cpath d='M30 26l12-14 12 14-12 17zM42 12v31M30 26h24'/%3E%3Cpath d='M138 52l8-9 8 9-8 11z'/%3E%3Cpath d='M64 132l13-15 13 15-13 19zM77 117v34M64 132h26'/%3E%3Cpath d='M158 150l7-8 7 8-7 10z'/%3E%3Cpath d='M104 34l6-7 6 7-6 9z'/%3E%3Cpath d='M22 172l6-7 6 7-6 9z'/%3E%3Cpath d='M182 96l5-6 5 6-5 8z'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="light"] .ax-chat-date span { background: rgba(255,255,255,0.8); color: #3B5878; }
html[data-theme="light"] .ax-msg { background: #FFFFFF; box-shadow: 0 1px 2px rgba(15,30,60,0.08); }
html[data-theme="light"] .ax-chat-pend { background: #F5F8FC; border-color: #EAEFF6; }
html[data-theme="light"] .ax-msg.mine { background: var(--grad); }

/* ===== Service page: low-poly 3D background (весь экран) ===== */
html { background: var(--dark); }
body[data-page="services"] { background: transparent; }
.ax-s3dbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.ax-s3dbg.on { opacity: 1; }
.ax-s3dbg canvas { display: block; width: 100% !important; height: 100% !important; }


/* ===== чат v20260723h: фулскрин, статус, лайтбокс, видео, drag-and-drop ===== */
.ax-chat-peercol { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.ax-chat-peercol > b { line-height: 1.2; }
.ax-chat-status { font-size: 12px; color: var(--gray); line-height: 1.25; }
.ax-chat-status.on { color: #34c759; }
.ax-chat-status[hidden] { display: none; }
/* пузырёк «печатает…» внизу ленты, как в Telegram */
.ax-typing-bub { align-self: flex-start; display: inline-flex; gap: 5px; align-items: center; padding: 13px 15px; min-height: 36px; }
.ax-typing-bub[hidden] { display: none; }
.ax-typing-bub i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); animation: axTypeDot 1.1s infinite both; }
.ax-typing-bub i:nth-of-type(2) { animation-delay: .2s; }
.ax-typing-bub i:nth-of-type(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .ax-typing-bub i { animation: none; opacity: .7; } }
/* видео в сообщении */
.ax-msg-video { width: min(340px, 100%); max-height: 460px; border-radius: 12px; display: block; background: #000; object-fit: cover; }
/* ссылки внутри сообщений */
.ax-msg span a { color: inherit; text-decoration: underline; word-break: break-all; }
/* видео в сетке «Медиа» */
.ax-ci-th { position: relative; }
.ax-ci-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-ci-vid .bi-play-fill {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none;
}
/* подсветка зоны при перетаскивании файла */
.ax-chat-main.ax-drop-on::after {
  content: ''; position: absolute; inset: 6px; border: 2px dashed var(--arctrik);
  border-radius: 14px; pointer-events: none; z-index: 9;
}
/* Второе определение .ax-lightbox удалено: оно стояло ниже по файлу
   и молча перебивало стили выше — отсюда тёмная подложка в светлой теме. */

/* ===== чат v20260723i: цельный полноэкранный режим, ПКМ-меню, закреп, выделение ===== */
body[data-page="chat"] { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body[data-page="chat"] #axpHeader { flex: 0 0 auto; position: static; }
body[data-page="chat"] main.ax-chat-page { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; padding: 0; margin: 0; overflow-x: hidden; }
body[data-page="chat"] #chatView { height: 100%; }
body[data-page="chat"] .ax-chat { height: 100%; min-height: 0; border-radius: 0; border: 0; border-top: 1px solid var(--mid-gray); }
body[data-page="chat"] .ax-footer { display: none; }
/* верхний бар играющего трека (как в Telegram) */
.ax-chat-now {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--mid-gray); background: var(--surface); z-index: 5;
}
.ax-chat-now-prog { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0%; background: var(--grad); transition: width .2s linear; }
.ax-chat-now #chatNowMode { color: var(--gray); }
.ax-chat-now #chatNowMode.on { color: var(--ice); }
.ax-chat-now b {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="light"] .ax-chat-now { background: #FFFFFF; border-color: #EAEFF6; }
/* моб.: пока открыт мессенджер — нижней панели нет, форма ввода прижата к низу */
body[data-page="chat"] .ax-tabbar { display: none; }
@media (max-width: 991px) { body[data-page="chat"].ax-body { padding-bottom: 0; } }
.ax-ctx { position: fixed; z-index: 3200; min-width: 210px; padding: 6px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--mid-gray);
  box-shadow: 0 18px 50px rgba(4,8,16,0.45); display: flex; flex-direction: column;
  opacity: 0; transform: scale(0.5);
  transition: opacity .16s ease, transform .26s cubic-bezier(0.34, 1.45, 0.64, 1); }
.ax-ctx.in { opacity: 1; transform: scale(1); }
/* эмодзи выпрыгивают по очереди, как в iOS */
.ax-ctx.in .ax-ctx-em { animation: axEmoPop .32s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.ax-ctx.in .ax-ctx-em:nth-child(2) { animation-delay: .035s; }
.ax-ctx.in .ax-ctx-em:nth-child(3) { animation-delay: .07s; }
.ax-ctx.in .ax-ctx-em:nth-child(4) { animation-delay: .105s; }
.ax-ctx.in .ax-ctx-em:nth-child(5) { animation-delay: .14s; }
.ax-ctx.in .ax-ctx-em:nth-child(6) { animation-delay: .175s; }
@keyframes axEmoPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ax-ctx { transition: opacity .16s ease; transform: none; }
  .ax-ctx.in .ax-ctx-em { animation: none; }
}
.ax-ctx-it { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none;
  color: var(--white); font-size: 14px; border-radius: 9px; text-align: left; cursor: pointer; white-space: nowrap; }
.ax-ctx-it:hover { background: var(--surface-2); }
.ax-ctx-it i { color: var(--ice); font-size: 15px; }
.ax-ctx-it.danger, .ax-ctx-it.danger i { color: #ff6b6b; }
html[data-theme="light"] .ax-ctx { background: #FFFFFF; border-color: #E4E9F1; box-shadow: 0 18px 50px rgba(21,50,120,0.18); }
.ax-chat-pinbar { display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  border-bottom: 1px solid var(--mid-gray); background: var(--surface-2); cursor: pointer; }
.ax-chat-pinbar[hidden] { display: none; }
.ax-chat-pinbar > i { color: var(--arctrik); flex: 0 0 auto; }
.ax-chat-pinbar span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ax-chat-pinbar b { font-size: 12px; color: var(--arctrik); }
.ax-chat-pinbar small { font-size: 13px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-chat-selbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--mid-gray); background: var(--surface-2); }
.ax-chat-selbar > b { margin-right: auto; font-size: 15px; }
.ax-chat-selbar .ax-sel-danger, .ax-chat-selbar .ax-sel-danger i { color: #ff6b6b; }
.ax-selmode .ax-msg { cursor: pointer; user-select: none; }
.ax-msg.sel { outline: 2px solid var(--arctrik); outline-offset: 2px; }
.ax-fwd-box { width: min(420px, 92vw); max-height: 80vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--mid-gray); border-radius: 16px; overflow: hidden; }
.ax-fwd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--mid-gray); }
.ax-fwd-list { overflow-y: auto; padding: 6px; }
html[data-theme="light"] .ax-fwd-box { background: #FFFFFF; border-color: #E4E9F1; }
/* скелетон отзывов на dienste: без него контент «прыгает» после загрузки */
.ax-rv-skel { min-height: 150px;
  background: linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%);
  background-size: 200% 100%; animation: axSkelSh 1.2s linear infinite; }
@keyframes axSkelSh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ax-rv-skel { animation: none; } }

/* ===== чат v20260723k: музыка во вложениях — плеер + обложка трека ===== */
.ax-msg-audio { display: flex; align-items: center; gap: 10px; min-width: 230px; max-width: 300px; padding: 3px 2px; }
.ax-msg-audico {
  position: relative; overflow: hidden; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--grad); background-position: center; background-size: cover; background-repeat: no-repeat;
  color: #fff; font-size: 24px;
}
.ax-msg-audico i { position: relative; z-index: 1; line-height: 1; }
.ax-msg-audico.has-cov::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
.ax-msg.mine .ax-msg-audico { background-image: none; background-color: #FFFFFF; color: var(--arctrik); }
.ax-msg.mine .ax-msg-audico.has-cov { color: #fff; }
.ax-msg-audmeta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ax-msg-audmeta b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-msg-audmeta small { font-size: 12px; color: var(--gray); }
.ax-msg.mine .ax-msg-audmeta small { color: rgba(255, 255, 255, 0.78); }
.ax-msg-audbar { display: none; height: 3px; border-radius: 2px; background: rgba(138, 147, 166, 0.35); margin: 5px 0 4px; cursor: pointer; }
.ax-msg-audio.act .ax-msg-audbar { display: block; }
.ax-msg-audbar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--ice); }
.ax-msg.mine .ax-msg-audbar { background: rgba(255, 255, 255, 0.3); }
.ax-msg.mine .ax-msg-audbar i { background: #fff; }

/* v20260723l: chat list pin/mute icons */
.ax-chat-pinic, .ax-chat-muteic { font-size: 12px; color: var(--ax-muted, #8a93a6); margin-left: 4px; flex: 0 0 auto; }

/* v20260723m: чекбокс e-mail-уведомлений под списком диалогов */
.ax-chat-mailopt { display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12.5px; color: var(--ax-muted, #8a93a6); border-top: 1px solid rgba(138, 147, 166, 0.18); cursor: pointer; user-select: none; flex: 0 0 auto; }
.ax-chat-mailopt > i { font-size: 15px; flex: 0 0 auto; }
.ax-chat-mailopt span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.ax-chat-mailopt input {
  appearance: none; -webkit-appearance: none; width: 36px; height: 21px; border-radius: 999px; border: 0;
  background: rgba(138, 147, 166, 0.35); position: relative; margin: 0; flex: 0 0 auto; cursor: pointer;
  transition: background 0.18s ease;
}
.ax-chat-mailopt input::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease;
}
.ax-chat-mailopt input:checked { background: var(--grad); }
.ax-chat-mailopt input:checked::after { transform: translateX(15px); }
.ax-chat-recovery{display:flex;align-items:center;gap:10px;width:calc(100% - 20px);margin:8px 10px;padding:10px 11px;border:1px solid rgba(105,173,255,.18);border-radius:13px;background:rgba(54,137,231,.07);color:var(--text);text-align:left;transition:border-color .2s,background .2s,transform .2s}.ax-chat-recovery:hover{border-color:rgba(105,173,255,.38);background:rgba(54,137,231,.13);transform:translateY(-1px)}.ax-chat-recovery:disabled{opacity:.55;cursor:wait;transform:none}.ax-chat-recovery>i:first-child{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:rgba(54,137,231,.16);color:#69adff}.ax-chat-recovery>span{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}.ax-chat-recovery b{font-size:12.5px}.ax-chat-recovery small{overflow:hidden;color:var(--ax-muted,#8a93a6);font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}.ax-chat-recovery>i:last-child{color:var(--ax-muted,#8a93a6);font-size:11px}

/* ===== #107: багрепорт, бан, жалобы, шторка плеера, пересылка ===== */
/* футер: кредит Sequence + кнопка «Нашли ошибку?» */
.ax-foot-dev { color: var(--gray); text-decoration: none; font-size: 12.5px; }
.ax-foot-dev:hover { color: var(--ice); }
.ax-foot-bug { border: 1px solid var(--mid-gray); background: transparent; color: var(--gray);
  border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: color .2s, border-color .2s; }
.ax-foot-bug:hover { color: var(--ice); border-color: var(--ice); }
.ax-bug-box { padding: 14px; }
.ax-bug-box textarea { margin-top: 10px; resize: vertical; }

/* полноэкранный оверлей «Ваш аккаунт забанен» */
.ax-banned { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
  background: var(--bg, #0D1117); padding: 24px; }
.ax-banned-box { text-align: center; max-width: 440px; }
.ax-banned-box i { font-size: 52px; color: #E5484D; }
.ax-banned-box h2 { margin: 14px 0 8px; font-size: 24px; }
.ax-banned-box p { color: var(--text); font-size: 15px; word-break: break-word; }
html[data-theme="light"] .ax-banned { background: #FFFFFF; }

/* тост о новом сообщении: аватар + имя + текст с троеточием */
.ax-toast-msg { padding: 9px 16px 9px 10px; }
.ax-toast-msg .ax-ava-sm { flex: none; width: 34px; height: 34px; }
.ax-toast-msgcol { display: flex; flex-direction: column; min-width: 0; }
.ax-toast-msgcol b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-toast-msgcol span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--gray); font-size: 12.5px; }

/* BUILD 20260727-258: стек входящих уведомлений (сообщения, заказы, споры).
   Отдельно от .ax-toast-zone: те — результат действия, короткие и снизу;
   эти — события извне, копятся справа сверху, живут дольше и закрываются
   крестиком. Матовое стекло + скругления, как в остальном интерфейсе. */
.ax-notify-zone { position: fixed; top: calc(var(--ax-header-h, 64px) + 12px); right: 16px; z-index: 1065;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  max-width: min(94vw, 380px); pointer-events: none; }
.ax-notify { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 34px 11px 11px; border-radius: 18px;
  background: rgba(9,12,16,0.72); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: var(--ax-border-hi); box-shadow: var(--ax-shadow); color: var(--text);
  opacity: 0; transform: translateX(24px) scale(.96);
  transition: opacity .32s var(--ax-ease), transform .32s var(--ax-ease); }
.ax-notify.show { opacity: 1; transform: none; }
.ax-notify-link { cursor: pointer; }
.ax-notify-link:hover { border-color: var(--ice); transform: translateY(-1px); }
.ax-notify .ax-ava-sm, .ax-notify-icon { flex: none; width: 36px; height: 36px; }
.ax-notify-icon { display: grid; place-items: center; border-radius: 12px;
  background: rgba(96,165,250,0.14); color: var(--ice); font-size: 16px; }
.ax-notify-col { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ax-notify-col b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-notify-col span { font-size: 12.5px; font-weight: 500; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ax-notify-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent;
  color: var(--gray); font-size: 10px; opacity: 0; transition: opacity .2s var(--ax-ease), color .2s var(--ax-ease); }
.ax-notify:hover .ax-notify-x, .ax-notify-x:focus-visible { opacity: 1; }
.ax-notify-x:hover { color: var(--text); background: rgba(255,255,255,0.08); }
html[data-theme="light"] .ax-notify { background: rgba(255,255,255,0.82); }
html[data-theme="light"] .ax-notify-x:hover { background: rgba(0,0,0,0.06); }
@media (max-width: 575.98px) {
  .ax-notify-zone { right: 8px; left: 8px; max-width: none; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .ax-notify { transition: opacity .2s linear; transform: none; } }

/* карточка «Уведомления» в кабинете */
.ax-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--ax-line, rgba(255,255,255,.06)); }
.ax-notif-row:last-child { border-bottom: 0; }
.ax-notif-row .ax-notif-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ax-notif-row .ax-notif-lbl b { font-size: 14px; font-weight: 600; }
.ax-notif-row .ax-notif-lbl small { color: var(--gray); font-size: 12px; }
.ax-notif-state { font-size: 12.5px; color: var(--gray); }
/* тумблер категорий уведомлений */
.ax-switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ax-switch > span { width: 42px; height: 24px; border-radius: 24px; position: relative; display: block;
  background: rgba(143,160,181,.25); border: 1px solid rgba(143,160,181,.35); transition: background .2s, border-color .2s; }
.ax-switch > span::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #8fa0b5; transition: transform .2s, background .2s; }
.ax-switch input:checked + span { background: rgba(56,189,248,.45); border-color: var(--ice); }
.ax-switch input:checked + span::before { transform: translateX(18px); background: #E6F6FF; }
.ax-switch input:disabled + span { opacity: .5; cursor: not-allowed; }
.ax-switch input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }

/* «Переслано от X» в пузыре */
/* Кнопка «показать оригинал» под переведённым сообщением: тише текста,
   но кликабельно очевидна — это служебная строка, а не часть письма. */
.ax-msg-tr { display: flex; align-items: center; gap: 5px; margin-top: 6px; padding: 0;
  border: 0; background: transparent; color: var(--gray); font-size: 11.5px;
  font-family: var(--ax-mono); letter-spacing: .02em; cursor: pointer; transition: color .18s; }
.ax-msg-tr:hover { color: var(--ice); }
.ax-msg-tr i { font-size: 12px; }
.ax-msg.mine .ax-msg-tr { color: rgba(255,255,255,0.62); }
.ax-msg.mine .ax-msg-tr:hover { color: #fff; }
html[data-theme="light"] .ax-msg-tr { color: #5A6A80; }
html[data-theme="light"] .ax-msg-tr:hover { color: #1B55C9; }

.ax-msg-fwd { display: block; font-size: 12.5px; font-weight: 600; color: var(--ice); margin-bottom: 2px; }
.ax-msg-fwd i { font-size: 11px; }
.ax-msg.mine .ax-msg-fwd { color: rgba(255,255,255,0.85); }

/* пересылка: чекбокс «Скрыть имя отправителя» */
.ax-fwd-hide { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px;
  color: var(--gray); cursor: pointer; border-bottom: 1px solid var(--mid-gray); }
.ax-fwd-hide input { accent-color: var(--ice); }

/* выбор причины жалобы */
.ax-rep-list { padding: 6px; display: flex; flex-direction: column; }
.ax-rep-item { display: flex; align-items: center; gap: 12px; }
.ax-rep-item i { color: #E5484D; }

/* терминал: жалобы */
.ax-complaint-txt { background: var(--mid-gray); border-radius: 10px; padding: 8px 12px; font-size: 13.5px;
  white-space: pre-wrap; word-break: break-word; margin: 6px 0; }

/* баланс Stripe Connect */
.ax-stripe-bal { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: -6px 0 16px; font-size: 14px; color: var(--gray); }
.ax-stripe-bal b { color: var(--text); }
.ax-stripe-bal i { color: var(--ice); }

/* расчёт выплаты продавцу: стоимость товаров минус комиссии платформы и Stripe */
.ax-payout { background: var(--mid-gray); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.ax-payout-h { font-size: 12.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.ax-payout-h i { color: var(--ice); }
.ax-payout-r { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--gray); }
.ax-payout-r b { color: var(--text); font-weight: 600; white-space: nowrap; }
.ax-payout-neg b { color: var(--warn, #e0a458); }
.ax-payout-sum { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line, rgba(255,255,255,.1)); }
.ax-payout-sum span, .ax-payout-sum b { color: var(--text); font-weight: 700; }
.ax-payout-note { font-size: 13px; color: var(--gray); margin: -6px 0 14px; }
.ax-payout-note i { color: var(--ice); }

/* ============ ЛИЧНЫЙ КАБИНЕТ: раскладка «рабочий стол» ============
   Слева постоянное меню разделов, справа — активная секция.
   Всё построено на переменных темы (--surface/--text/--ice/...),
   поэтому светлая и тёмная схемы работают без отдельных правил.
   BUILD 20260727-263. */
.ax-acc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; }

/* --- боковое меню --- */
/* Панель держится ниже обеих строк шапки. Отдельной прокрутки здесь нет:
   меню является частью страницы, а прокручивается сама страница. */
.ax-acc-nav {
  position: sticky; top: var(--ax-sticky-panel-top); align-self: start; height: max-content; display: flex; flex-direction: column; gap: 18px;
  max-height: none; overflow: visible; overscroll-behavior: auto;
  padding: 14px 10px; border-radius: var(--ax-r, 16px);
  background: var(--surface); border: var(--ax-border); box-shadow: var(--ax-shadow);
}
.ax-acc-grp { display: flex; flex-direction: column; gap: 2px; }
.ax-acc-grp-t {
  display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:transparent;
  padding: 2px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray);cursor:pointer;text-align:left;
}
.ax-acc-grp-t i{font-size:11px;transition:transform .18s ease}.ax-acc-grp-t:hover{color:var(--ice)}
.ax-acc-grp-items{display:flex;flex-direction:column;gap:2px}.ax-acc-grp.is-folded .ax-acc-grp-items{display:none}.ax-acc-grp.is-folded .ax-acc-grp-t i{transform:rotate(-90deg)}
.ax-acc-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font-size: 14.5px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
/* Глифы Bootstrap Icons имеют разную ширину, поэтому подписи пунктов
   разъезжались по горизонтали. Фиксируем колонку под иконку — теперь весь
   текст меню начинается с одной вертикали, заподлицо с панелью. */
.ax-acc-item i {
  flex: 0 0 20px; width: 20px; font-size: 17px; line-height: 1;
  text-align: center; color: var(--gray); transition: color .15s ease;
}
.ax-acc-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-acc-item:hover { background: var(--surface-2); color: var(--text); }
.ax-acc-item:hover i { color: var(--ice); }
.ax-acc-item.on { background: var(--surface-2); color: var(--ice); font-weight: 600; }
.ax-acc-item.on i { color: var(--ice); }
.ax-acc-item:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
/* счётчик у пункта — как непрочитанные в мессенджере */
.ax-acc-n {
  flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: 10px;
  background: var(--ice); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center;
}

/* --- правая колонка --- */
.ax-acc-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ax-acc-sec[hidden] { display: none; }
/* padding: 0 обязателен: в base.css живёт глобальное `section { padding: 80px 0 }`,
   из-за него карточки разделов начинались на 80px ниже боковой панели.
   Отступы между карточками задаёт gap, поэтому собственный margin у них снимаем —
   иначе 20px превращались в 36px. BUILD 20260727-268. */
.ax-acc-sec { display: flex; flex-direction: column; gap: 20px; padding: 0; }
.ax-acc-sec > .ax-legal-card { margin-bottom: 0; }
/* display: contents убирает лишние 20px gap, когда шапка профиля скрыта:
   пустая обёртка всё равно считалась flex-элементом. */
.ax-acc-heroslot { display: contents; }

/* --- шапка профиля --- */
/* Картинка живёт в самой шапке, а не на фоне страницы: она почти 3:1 и
   светлеет вправо — ровно под блок с аватаром слева и пустым местом справа.
   Поверх лежит завеса из цвета карточки, гуще слева: имя, статус и счётчики
   стоят именно там, и без неё контраст на светлых гранях падал бы.
   webp рядом с png — 1,2 МБ против 23 КБ. BUILD 20260827-414. */
.ax-acc-hero {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px;
  padding: 20px; border-radius: var(--ax-r, 16px);
  background-color: var(--surface); border: var(--ax-border); box-shadow: var(--ax-shadow);
  background-image: linear-gradient(100deg, rgba(19,26,35,.96) 0%, rgba(19,26,35,.90) 34%,
                    rgba(19,26,35,.62) 68%, rgba(19,26,35,.42) 100%),
                    url(../img/background_dark.png);
  background-image: linear-gradient(100deg, rgba(19,26,35,.96) 0%, rgba(19,26,35,.90) 34%,
                    rgba(19,26,35,.62) 68%, rgba(19,26,35,.42) 100%),
                    image-set(url(../img/background_dark.webp) type("image/webp"),
                              url(../img/background_dark.png) type("image/png"));
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
html[data-theme="light"] .ax-acc-hero {
  background-image: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%,
                    rgba(255,255,255,.56) 68%, rgba(255,255,255,.34) 100%),
                    url(../img/background_white.png);
  background-image: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 34%,
                    rgba(255,255,255,.56) 68%, rgba(255,255,255,.34) 100%),
                    image-set(url(../img/background_white.webp) type("image/webp"),
                              url(../img/background_white.png) type("image/png"));
}
/* На узком экране картинка кадрируется по своей яркой середине, а текст
   шапки встаёт по центру во всю ширину — завеса нужна сплошная. */
@media (max-width: 991.98px) {
  .ax-acc-hero {
    background-image: linear-gradient(rgba(19,26,35,.90), rgba(19,26,35,.90)),
                      url(../img/background_dark.png);
    background-image: linear-gradient(rgba(19,26,35,.90), rgba(19,26,35,.90)),
                      image-set(url(../img/background_dark.webp) type("image/webp"),
                                url(../img/background_dark.png) type("image/png"));
  }
  html[data-theme="light"] .ax-acc-hero {
    background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
                      url(../img/background_white.png);
    background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
                      image-set(url(../img/background_white.webp) type("image/webp"),
                                url(../img/background_white.png) type("image/png"));
  }
}
.ax-acc-hero[hidden] { display: none; }
.ax-acc-card { display: flex; flex-direction: column; align-items: center; }
/* аватарка круглая в любом состоянии — и с картинкой, и с буквой */
.ax-acc-ava { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; }
.ax-acc-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ax-acc-ava.ax-ava-letter { font-size: 48px; }
.ax-acc-info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Имя, значки и роль — одна строка: роль это подпись к имени, а не отдельное
   свойство под ним. Плашку роли прижимаем к правому краю, остальное растёт
   слева. На узком экране строка переносится и всё встаёт по центру, как и
   прочее содержимое шапки. BUILD 20260827-416. */
.ax-acc-namerow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; min-width: 0;
}
.ax-acc-name { margin: 0; font-size: 25px; font-weight: 700; color: var(--text); line-height: 1.2;
  min-width: 0; overflow-wrap: anywhere; }
.ax-acc-role { margin-left: auto; flex: 0 0 auto; }
.ax-acc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Присутствие живёт под аватаром: это признак самого человека, ему место
   рядом с лицом, а не строкой в списке справа. */
.ax-acc-seen {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--gray);
}
.ax-acc-seen .ax-side-dot { width: 7px; height: 7px; }
.ax-acc-seen.on { color: #4ED08A; }
.ax-acc-seen.on .ax-side-dot { background: #3FCE86; box-shadow: 0 0 0 4px rgba(63,206,134,.16); }

/* Счётчики и главное действие — одна полоса управления. Кнопка тянется по
   высоте счётчиков (align-items: stretch), поэтому подгонять её вручную не
   нужно: изменится набор счётчиков — кнопка подстроится. */
.ax-acc-actions {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
}
/* Кнопка встаёт к правому краю полосы, счётчики — к левому: между ними
   воздух, а не растянутые ячейки. */
.ax-acc-actions > .ax-acc-cta { margin-left: auto; }
.ax-acc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 22px; border-radius: 12px;
  border: var(--ax-border); background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s var(--ax-ease);
}
.ax-acc-cta i { font-size: 16px; color: var(--ice); transition: color .15s ease; }
.ax-acc-cta:hover { border: var(--ax-border-hi); color: var(--ice); }
.ax-acc-cta:active { transform: scale(.98); }
.ax-acc-cta:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
/* Главное действие чужой страницы — написать. Оно единственное на экране,
   поэтому залито фирменным градиентом, как остальные первичные кнопки. */
/* Заливка тёмно-синяя в обеих темах, поэтому надпись белая явным цветом, а
   не через var(--white): в светлой теме эта переменная переопределена в
   чернильный #0B1526 — она там значит «текст на светлой подложке». Кнопка
   получала почти чёрные буквы на синем, 1,6:1. В base.css есть список
   «на градиентных подложках текст всегда белый», но он перечисляет классы
   поимённо, и новый в него не попадал. BUILD 20260828-418. */
.ax-acc-cta-primary { border-color: transparent; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.ax-acc-cta-primary i { color: #fff; }
.ax-acc-cta-primary:hover { border-color: transparent; background: var(--grad-hover); color: #fff; }
.ax-acc-cta-primary:hover i { color: #fff; }
html[data-theme="light"] .ax-acc-cta-primary {
  box-shadow: 0 1px 2px rgba(16,28,48,.16), 0 8px 18px -10px rgba(16,28,48,.42); }
@media (prefers-reduced-motion: reduce) { .ax-acc-cta:active { transform: none; } }
.ax-acc-rows { display: flex; flex-direction: column; gap: 5px; }
.ax-acc-row { display: flex; align-items: center; gap: 9px; color: var(--gray); font-size: 14px; min-width: 0; }
.ax-acc-row i { color: var(--ice); font-size: 15px; flex: 0 0 auto; }
.ax-acc-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Счётчики — один цельный блок с разделителями, а не четыре отдельные
   плашки: четыре карточки в ряд внутри карточки шапки спорили друг с другом
   и с карточками правой колонки. Линии рисует фон контейнера, проступающий
   в зазор шириной 1px: так они остаются ровными при любом переносе, а
   flex-grow не даёт последней строке оставить полосу-заплатку на месте
   недостающей ячейки. BUILD 20260827-415. */
.ax-acc-stats {
  /* margin-top остался от прежней раскладки, где счётчики шли следом за
     плашками внутри колонки. Теперь это отдельный ряд шапки, отступ задаёт
     сетка — свой сдвигал бы блок на 4px ниже кнопки рядом. */
  display: flex; flex-wrap: wrap; gap: 1px;
  width: max-content; max-width: 100%;
  border: var(--ax-border); border-radius: 12px; overflow: hidden;
  background: var(--ax-border-c, rgba(148,163,184,.15));
}
.ax-acc-stat {
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 86px; padding: 9px 16px; border: 0; border-radius: 0;
  background: var(--surface-2); color: var(--gray);
  transition: background .15s ease, color .15s ease;
}
.ax-acc-stat b { font-size: 18px; color: var(--text); }
.ax-acc-stat span { font-size: 12px; }
/* Наводка и палец — только там, где по счётчику действительно можно нажать:
   на чужой странице это <span>, и «указатель» обещал бы переход в никуда. */
button.ax-acc-stat { cursor: pointer; }
button.ax-acc-stat:hover { background: var(--surface); color: var(--ice); }
/* Рамку фокуса рисуем внутрь: overflow: hidden на контейнере срезал бы её. */
.ax-acc-stat:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; }

/* --- кнопка меню на узких экранах --- */
.ax-acc-burger { display: none; }

@media (max-width: 991.98px) {
  .ax-acc { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ax-acc-burger {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 16px; border: var(--ax-border); border-radius: 12px;
    background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .ax-acc-burger i { font-size: 19px; color: var(--ice); }
  /* меню скрыто, пока не нажали «Разделы» — иначе оно съедает первый экран */
  .ax-acc-nav { display: none; position: static; max-height: none; overflow: visible; }
  .ax-acc.nav-open .ax-acc-nav { display: flex; }
  .ax-acc-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ax-acc-card { align-items: center; }
  .ax-acc-info { align-items: center; }
  .ax-acc-namerow { justify-content: center; }
  /* margin-left: auto прижимал бы роль к правому краю и на телефоне, отрывая
     её от имени, — в столбце она просто идёт следующей строкой. */
  .ax-acc-role { margin-left: 0; }
  .ax-acc-actions { justify-content: center; }
  .ax-acc-actions > .ax-acc-cta { margin-left: 0; }
  .ax-acc-rows { align-items: center; }
  /* Блок теперь цельный и уже не тянется на всю строку — центрирует его
     сама колонка (.ax-acc-info { align-items: center }), а justify-content
     здесь двигал бы ячейки внутри блока. */
  .ax-acc-stats { align-self: center; }
}
@media (max-width: 575.98px) {
  .ax-acc-ava { width: 104px; height: 104px; }
  .ax-acc-ava.ax-ava-letter { font-size: 40px; }
  .ax-acc-name { font-size: 21px; }
  /* На телефоне три ячейки в строку и четвёртая во всю ширину выглядели так,
     будто последняя чем-то особенная. Держим по две в ряд: четыре счётчика
     складываются в ровный квадрат, три — в пару и широкую нижнюю. */
  .ax-acc-stats { width: 100%; }
  .ax-acc-stat { flex: 1 0 calc(50% - 1px); min-width: 0; padding: 8px 12px; }
  /* Кнопка встаёт под счётчиками ровно по их ширине: узкая кнопка по центру
     под широким блоком выглядела бы обрезком. */
  .ax-acc-actions > .ax-acc-cta { width: 100%; }
}
/* ============ ПРАВАЯ КОЛОНКА «МОЕЙ СТРАНИЦЫ» ============
   Всё, что человек показывает о себе. Колонка существует только в разделе
   «Профиль»: в списке заказов ей нечего показывать, поэтому третью полосу
   сетки включает класс has-side, а не сам факт наличия элемента. */
@media (min-width: 1200px) {
  .ax-acc.has-side { grid-template-columns: 232px minmax(0, 1fr) 292px; }
  /* Гость без входа видит чужую страницу без меню разделов — вести ему
     некуда. Полосу под меню в сетке тоже убираем, иначе содержимое
     осталось бы прижатым вправо пустой колонкой. */
  .ax-acc.has-side.no-nav { grid-template-columns: minmax(0, 1fr) 292px; }
}
.ax-acc.no-nav { grid-template-columns: minmax(0, 1fr); }
.ax-acc-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ax-acc-side[hidden] { display: none; }
/* Ниже 1200px третьей колонке уже тесно: уводим её под содержимое и
   раскладываем карточки плиткой, чтобы не вытянуть страницу в столб. */
@media (max-width: 1199.98px) {
  .ax-acc-side { grid-column: 1 / -1; display: grid; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); }
}
.ax-side-card {
  padding: 16px 16px 15px; border-radius: var(--ax-r, 16px);
  background: var(--surface); border: var(--ax-border); box-shadow: var(--ax-shadow);
  min-width: 0;
}
.ax-side-t {
  display: flex; align-items: center; gap: 9px; margin: 0 0 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gray);
}
.ax-side-t i { font-size: 14px; color: var(--ice); }
.ax-side-status { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.ax-side-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-width: 0; }
.ax-side-row + .ax-side-row { border-top: 1px solid var(--ax-line, rgba(255,255,255,.06)); }
.ax-side-row > i { flex: 0 0 16px; font-size: 15px; color: var(--ice); }
.ax-side-v { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ax-side-v small { font-size: 11.5px; color: var(--gray); }
.ax-side-v b { font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-side-ok { color: #4ED08A; font-size: 12px; }
/* Перечёркнутый глаз у строки означает «эту строку видите только вы».
   Значение остаётся на месте: убрать его отсюда было бы честно, но тогда
   владелец не смог бы проверить, что там записано. */
.ax-side-off { flex: 0 0 auto; font-size: 13px; color: var(--gray); opacity: .8; }
.ax-side-empty { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gray); }
/* Ссылка «Заполнить» — единственное действие в пустой карточке, поэтому
   ей нужна нормальная область нажатия, а не высота строки текста. */
.ax-side-empty .ax-link { display: inline-block; margin-left: 4px; padding: 12px 4px; font-size: 13px; }
.ax-side-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--gray); }
.ax-side-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ax-side-tag { padding: 5px 11px; border-radius: 999px; border: var(--ax-border);
  background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 600; }
.ax-side-seen { display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; font-weight: 600; color: var(--text); }
.ax-side-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.ax-side-seen.on .ax-side-dot { background: #3FCE86; box-shadow: 0 0 0 4px rgba(63,206,134,.16); }
.ax-side-seen.on { color: #4ED08A; }
/* Соцсети: строка на сеть — иконка узнаётся быстрее подписи, но подпись
   нужна для доступности и для сетей с похожими глифами. */
.ax-side-soc { display: flex; flex-direction: column; gap: 4px; }
.ax-side-socl {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px;
  border-radius: 10px; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease;
}
.ax-side-socl i { flex: 0 0 18px; font-size: 16px; color: var(--ice); }
.ax-side-socl span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-side-socl:hover { background: var(--surface-2); color: var(--ice); }
.ax-side-socl:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
/* ---- карточка подписки ----
   Волна на прозрачном png ложится в правый нижний угол; текст занимает
   левый верхний, где картинка пустая, поэтому подложка под надписи не нужна. */
.ax-side-plus { position: relative; overflow: hidden; border: 1px solid rgba(80,214,158,.28);
  background: linear-gradient(150deg, #0E2A22 0%, #0A1A21 58%, #0A1420 100%); }
.ax-side-plus::after {
  content: ''; position: absolute; right: -12%; bottom: -18%; width: 132%; height: 86%;
  pointer-events: none; opacity: .7;
  background-image: url(../img/plus_background.png);
  background-image: image-set(url(../img/plus_background.webp) type("image/webp"),
                              url(../img/plus_background.png) type("image/png"));
  background-size: contain; background-position: right bottom; background-repeat: no-repeat;
}
.ax-side-plus > * { position: relative; z-index: 1; }
.ax-side-plus .ax-side-t { color: #9FE8C8; }
.ax-side-plus .ax-side-t i { color: #5FE0AB; }
.ax-plus-state { display: flex; align-items: center; gap: 8px; margin: 0 0 3px;
  font-size: 15px; font-weight: 700; color: #EAF6F1; }
.ax-plus-state i { color: #5FE0AB; font-size: 16px; }
.ax-plus-sub { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: #A8C4BA; }
.ax-side-plus .ax-btn-ghost { border-color: rgba(95,224,171,.5); color: #EAF6F1; }
.ax-side-plus .ax-btn-ghost:hover { border-color: #5FE0AB; color: #fff; }
html[data-theme="light"] .ax-side-plus {
  border-color: rgba(20,140,98,.26);
  background: linear-gradient(150deg, #E6F7F0 0%, #F1F8F6 60%, #F5F9FC 100%); }
html[data-theme="light"] .ax-side-plus .ax-side-t { color: #17624A; }
html[data-theme="light"] .ax-plus-state { color: #0E2B22; }
html[data-theme="light"] .ax-plus-sub { color: #3A5A50; }
html[data-theme="light"] .ax-side-plus .ax-btn-ghost { border-color: rgba(20,140,98,.45); color: #0E2B22; }

/* Соцсети в шапке публичного профиля — иконками в строку. */
.ax-soc-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ax-soc-inline a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; border: var(--ax-border); background: var(--surface-2);
  color: var(--ice); font-size: 17px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.ax-soc-inline a:hover { border: var(--ax-border-hi); transform: translateY(-1px); }
.ax-soc-inline a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (max-width: 991.98px) { .ax-soc-inline { justify-content: center; } }

/* ---- отзывы тремя вкладками ----
   «Оставленные», «О работе» и «О продавце» — три разные вещи под одним
   словом, и мешать их в одном списке нельзя. BUILD 20260828-418. */
.ax-rev-tabs { flex-wrap: wrap; overflow: visible; margin-bottom: 16px; padding-bottom: 0; }
.ax-rev-n { margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: rgba(148,163,184,.18); font-size: 11px; font-weight: 700; }
.ax-chips button.on .ax-rev-n { background: rgba(111,170,255,.22); }
html[data-theme="light"] .ax-rev-n { background: rgba(16,28,48,.09); }
/* Метка «о товаре» или «о работе» у оставленного отзыва: без неё пять звёзд
   столу и пять звёзд мастеру в одном списке неотличимы. */
.ax-rev-kind { display: inline-flex; align-items: center; gap: 5px; margin-right: auto;
  padding: 3px 9px; border-radius: 999px; border: var(--ax-border);
  background: var(--surface-2); color: var(--gray); font-size: 11px; font-weight: 700; }
.ax-rev-kind i { font-size: 11px; color: var(--ice); }
.ax-rev-kind.pro i { color: #4ED08A; }

/* ---- две оценки в шапке ---- */
.ax-acc-rates { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ax-acc-rate { display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; border: var(--ax-border);
  background: var(--surface-2); font-size: 13px; }
.ax-acc-rate small { color: var(--gray); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; }
.ax-acc-rate b { color: var(--text); font-weight: 700; }
.ax-acc-rate i { color: var(--gray); font-style: normal; font-size: 12px; }
.ax-acc-rate .ax-stars { font-size: 12px; }

/* ---- карточка услуги в ленте исполнителя ---- */
.ax-skill-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  border: var(--ax-border); border-radius: var(--ax-r-sm); background: var(--surface-2);
  color: var(--text); text-decoration: none;
  transition: border-color .2s ease, transform .2s var(--ax-ease);
}
.ax-skill-card:hover { border: var(--ax-border-hi); transform: translateY(-2px); color: var(--text); }
.ax-skill-card:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.ax-skill-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: rgba(111,170,255,.10); color: var(--ice); font-size: 18px; }
.ax-skill-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ax-skill-note { font-size: 12px; color: var(--gray); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-skill-price { margin-top: auto; font-size: 17px; font-weight: 800; color: var(--text); }
.ax-skill-price .ax-unit { font-size: 12px; font-weight: 600; color: var(--gray); }
.ax-skill-min { font-size: 11.5px; color: var(--gray); }
@media (prefers-reduced-motion: reduce) { .ax-skill-card:hover { transform: none; } }

/* ---- редактор профиля: языки и ссылки ---- */
/* Десять языков в одну прокручиваемую строку не помещаются и половина
   уезжает за край незаметно: здесь чипсы переносятся. */
#pfLangs { flex-wrap: wrap; overflow: visible; margin-bottom: 0; padding-bottom: 0; }
.ax-soc-edit { display: grid; gap: 8px; }
.ax-soc-f { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.ax-soc-f > i { flex: 0 0 20px; font-size: 17px; color: var(--ice); text-align: center; }
.ax-soc-f .ax-input.is-invalid { border-color: rgba(255,110,126,.7) !important; }
@media (min-width: 768px) { .ax-soc-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Статус — короткая строка «о себе» под именем в шапке и на публичных
   страницах продавца и исполнителя. Переносы разрешаем: 140 символов
   на узком экране в одну строку не влезают. */
.ax-acc-status {
  margin: 6px 0 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--gray);
  overflow-wrap: anywhere;
}
.ax-acc-about {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* Ссылка-пункт меню наследует поведение кнопки: убираем подчёркивание
   и оставляем текст ровно того же цвета, что у соседних кнопок. */
a.ax-acc-item { text-decoration: none; }
a.ax-acc-item:hover { color: var(--text); }
a.ax-acc-item.on { color: var(--ice); }
/* Textarea статуса не должна прыгать по высоте при перетаскивании. */
#pfStatus { resize: vertical; min-height: 62px; }
#pfStatusLeft { text-align: right; }

/* Категории раздела «Настройки»: белый (по теме — основной) заголовок
   категории, под ним подзаголовки конкретных настроек. Уведомления,
   безопасность, приватность, платежи и аккаунт устроены одинаково. */
.ax-acc-cat {
  display: flex; align-items: center;
  margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--text);
}
.ax-acc-cat i { color: var(--ice); }
.ax-acc-sub {
  margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--text);
}
/* Вторая и последующие настройки внутри категории отбиваются линией. */
/* Счётчик рядом с названием раздела: сколько товаров в ленте, видно до того,
   как её начали листать. */
.ax-acc-cat-n { margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); border: var(--ax-border);
  color: var(--gray); font-size: 12px; font-weight: 700; }
/* Лента товаров продавца. Ширину карточки задаём здесь, а не в сетке:
   в ленте карточка не должна тянуться на всю строку. */
/* Ширина карточки — точная доля видимой части ленты, а не фиксированные
   232px: при жёсткой ширине последняя карточка почти всегда обрезалась краем
   (690 / 232 = 2,97 — две целых и обрубок). Считаем от 100% вьюпорта на
   заданное число колонок, как это уже сделано у ленты категорий на главной,
   и тогда в кадр всегда входит целое число карточек.
   Число колонок подобрано по замеренной ширине ленты на каждом изломе
   раскладки — она скачет, когда появляются боковое меню (992px) и правая
   колонка (1200px). Ширина карточки держится в 204-422px.
   BUILD 20260828-420. */
.ax-uv-row {
  --uv-n: 3; --uv-gap: 14px;
  display: grid; grid-auto-flow: column; gap: var(--uv-gap); align-items: stretch;
  grid-auto-columns: calc((100% - (var(--uv-n) - 1) * var(--uv-gap)) / var(--uv-n));
}
.ax-uv-row > * { min-width: 0; scroll-snap-align: start; }
/* Стрелки этой ленты стоят поверх содержимого: свободных полей по краям нет —
   карточки занимают всю ширину блока, и круглая кнопка садилась прямо на
   название товара («Подключение посудомоечной машины» читалось наполовину).
   В покое стрелок не видно, они проявляются при наведении на ленту и при
   переходе на карточку с клавиатуры; вместе с ними зажигается заливка от
   края к центру, чтобы кнопка лежала не на буквах, а на растворённом краю.
   На тач-устройствах наведения не существует, поэтому там стрелки видны
   постоянно вместе с заливкой: завязывать управление только на hover нельзя
   (ui-ux-pro-max, Animation → Hover vs Tap, severity High).
   BUILD 20260828-421. */
.ax-uv-rail .ax-rail-prev { left: 4px; }
.ax-uv-rail .ax-rail-next { right: 4px; }
.ax-uv-rail::before, .ax-uv-rail::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 104px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .18s var(--ax-ease);
}
.ax-uv-rail::before { left: -6px; background: linear-gradient(90deg, var(--surface) 48%, transparent); }
.ax-uv-rail::after { right: -6px; background: linear-gradient(270deg, var(--surface) 48%, transparent); }
@media (hover: hover) {
  .ax-uv-rail .ax-rail-nav { opacity: 0; pointer-events: none; }
  .ax-uv-rail:hover .ax-rail-nav,
  .ax-uv-rail:has(.ax-rail-nav:focus-visible) .ax-rail-nav { opacity: 1; pointer-events: auto; }
  /* Заливка зажигается только с той стороны, куда ещё есть что листать:
     стрелку в начале и в конце ленты гасит скрипт атрибутом hidden. */
  .ax-uv-rail:hover:has(.ax-rail-prev:not([hidden]))::before,
  .ax-uv-rail:has(.ax-rail-nav:focus-visible):has(.ax-rail-prev:not([hidden]))::before { opacity: 1; }
  .ax-uv-rail:hover:has(.ax-rail-next:not([hidden]))::after,
  .ax-uv-rail:has(.ax-rail-nav:focus-visible):has(.ax-rail-next:not([hidden]))::after { opacity: 1; }
}
@media (hover: none) {
  .ax-uv-rail:has(.ax-rail-prev:not([hidden]))::before { opacity: 1; }
  .ax-uv-rail:has(.ax-rail-next:not([hidden]))::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-uv-rail::before, .ax-uv-rail::after { transition: none; }
}
/* Одна карточка на самых узких экранах: при двух колонках товар ужимался
   до 171px, и название с ценой переставали читаться. */
@media (max-width: 479.98px) { .ax-uv-row { --uv-n: 1; } }
@media (min-width: 480px) and (max-width: 767.98px) { .ax-uv-row { --uv-n: 2; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .ax-uv-row { --uv-n: 3; } }
/* 1200-1399: появилась правая колонка, лента сузилась до 510px — три
   карточки здесь были бы по 160px. */
@media (min-width: 1200px) and (max-width: 1399.98px) { .ax-uv-row { --uv-n: 2; } }
@media (min-width: 1400px) { .ax-uv-row { --uv-n: 3; } }

.ax-acc-catblock { margin-top: 18px; padding-top: 18px; border-top: var(--ax-border); }
/* Разделитель со словом посередине: «Мои публикации», «Моя музыка». */
.ax-acc-div {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 12px; color: var(--gray);
  font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.ax-acc-div::before, .ax-acc-div::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--line);
}
.ax-acc-div span { flex: 0 0 auto; }
/* Автор трека в списке «Музыка пользователей». */
.ax-pa-by {
  flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gray); font-size: 13px; text-decoration: none;
}
.ax-pa-by:hover { color: var(--ice); }

/* BUILD 20260727-268: списки «Мои публикации» и музыки шли вплотную —
   контейнеры были голыми <div> без раскладки, и карточки слипались.
   Классы им проставлены, а ограничение по ширине здесь снимаем: внутри
   карточки кабинета список занимает её целиком, полосы пустоты справа
   от постов быть не должно. */
.ax-acc .ax-legal-card > .ax-po-list,
.ax-acc .ax-legal-card > .ax-pa-list { max-width: none; }

/* Кабинет и лента не создают собственную область прокрутки: двигается весь
   документ, как на остальных страницах платформы. */
body[data-page="account"] .ax-acc-main{max-height:none;overflow:visible;overscroll-behavior:auto;padding-right:0}

/* ============ /ЛИЧНЫЙ КАБИНЕТ ============ */

/* шторка плеера как в Telegram */
.ax-nowsheet-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(8,12,18,0.55);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .28s var(--ax-ease); }
.ax-nowsheet-ov.open { opacity: 1; }
.ax-nowsheet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(480px, 100vw);
  background: var(--surface); border: 1px solid var(--mid-gray); border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(100%); transition: transform .32s var(--ax-ease); }
.ax-nowsheet-ov.open .ax-nowsheet { transform: none; }
.ax-nowsheet-x { align-self: center; color: var(--gray); }
.ax-nowsheet-cov { width: min(230px, 56vw); height: min(230px, 56vw); border-radius: 18px; object-fit: cover;
  margin: 8px 0 16px; box-shadow: var(--ax-shadow); }
.ax-nowsheet-nocov { display: flex; align-items: center; justify-content: center;
  background: var(--mid-gray); color: var(--gray); font-size: 56px; }
.ax-nowsheet-t { font-size: 17px; font-weight: 700; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ax-nowsheet-a { color: var(--gray); font-size: 13.5px; margin-top: 2px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-nowsheet-seek { width: 100%; margin-top: 16px; accent-color: var(--ice); height: 4px; cursor: pointer; }
.ax-nowsheet-time { display: flex; justify-content: space-between; width: 100%; color: var(--gray); margin-top: 4px; }
.ax-nowsheet-btns { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.ax-nowsheet-btns .ax-iconbtn { font-size: 20px; }
.ax-nowsheet-btns .ax-iconbtn.on { color: var(--ice); }
.ax-nowsheet-pp { font-size: 30px !important; width: 58px; height: 58px; border-radius: 50%;
  background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; }
html[data-theme="light"] .ax-nowsheet { background: #FFFFFF; border-color: #E4E9F1; }

/* моб. чат: верхний навбар плавно сворачивается */
@media (max-width: 991px) {
  body[data-page="chat"].ax-thread-open #axpHeader {
    overflow: hidden;
    animation: axHdCollapse .5s ease .6s forwards;
  }
  body[data-page="chat"]:not(.ax-thread-open) .ax-chat-side { padding-bottom: 68px; }
}
@keyframes axHdCollapse {
  from { max-height: 120px; opacity: 1; }
  to { max-height: 0; opacity: 0; border: 0; }
}

/* ================= Лента (посты) + аудио профиля ================= */
/* BUILD 20260727-268: разделитель ленты. Слева подпись, справа фильтр,
   между ними линия — фильтр больше не висит в пустоте справа от заголовка.
   Линия отдельным элементом, а не ::after: псевдоэлемент всегда последний
   ребёнок и уехал бы за выпадашку. */
.ax-feed-div{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.ax-feed-div > span{flex:0 0 auto;color:var(--gray);font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.ax-feed-div-l{flex:1 1 auto;height:1px;background:var(--line)}
@media (max-width:575.98px){.ax-feed-div > span{display:none}}
.ax-po-list{display:flex;flex-direction:column;gap:14px;max-width:720px}
/* композер ленты (переехал из кабинета) */
/* Фон и рамка — как у карточек кабинета: раньше тут стояла необъявленная
   переменная --ax-card с фолбэком в 3% белого, и лента просвечивала фоном
   страницы. Рамка не рисовалась вообще: `1px solid var(--ax-border)` даёт
   `1px solid 1px solid rgba(...)` — невалидное значение. BUILD 20260727-268. */
.ax-feed-composer{margin-bottom:16px;padding:16px 18px;border:var(--ax-border);border-radius:var(--ax-r,16px);background:var(--surface);box-shadow:var(--ax-shadow)}
.ax-feed-composer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:15px}
.ax-feed-composer textarea{resize:vertical;min-height:52px}
.ax-post{background:var(--surface);border:var(--ax-border);border-radius:var(--ax-r,16px);box-shadow:var(--ax-shadow);padding:16px 18px}
.ax-post-head{display:flex;align-items:flex-start;gap:10px}
.ax-post-user{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;flex:1}
.ax-post-user:hover b{text-decoration:underline}
.ax-post-who{display:flex;flex-direction:column;min-width:0}
.ax-post-who .ax-sku{font-size:12px}
.ax-post-del{flex-shrink:0;opacity:.6}
.ax-post-del:hover{opacity:1;color:#ff6b6b}
.ax-post-text{margin:10px 0 0;white-space:normal;word-break:break-word;line-height:1.55}
.ax-post-drop{min-height:86px;border:1px dashed color-mix(in srgb,var(--ice) 48%,var(--mid-gray));border-radius:15px;background:color-mix(in srgb,var(--surface-2) 76%,transparent);display:flex;align-items:center;padding:14px 16px;cursor:pointer;outline:0;transition:border-color .18s,background .18s,box-shadow .18s}
.ax-post-drop:hover,.ax-post-drop:focus-visible,.ax-post-drop.drag{border-color:var(--ice);background:color-mix(in srgb,var(--ice) 9%,var(--surface-2));box-shadow:0 0 0 3px color-mix(in srgb,var(--ice) 12%,transparent)}
.ax-post-drop-copy,.ax-post-drop-file{width:100%;display:flex;align-items:center;gap:12px;min-width:0}
.ax-post-drop-copy>i,.ax-post-drop-file>i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ice) 14%,transparent);color:var(--ice);font-size:21px;flex:0 0 auto}
.ax-post-drop-copy span,.ax-post-drop-file span{display:flex;flex-direction:column;min-width:0;gap:2px}.ax-post-drop-copy small,.ax-post-drop-file small{color:var(--gray);font-size:12px}.ax-post-drop-file b,.ax-post-drop-file small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-post-drop-files{display:none;width:100%;flex-direction:column;gap:8px}.ax-post-drop.has .ax-post-drop-copy{display:none}.ax-post-drop.has .ax-post-drop-files{display:flex}
.ax-post-drop-file{padding:7px 0}.ax-post-drop-file+.ax-post-drop-file{border-top:1px solid var(--mid-gray)}
.ax-post-drop-remove{width:34px;height:34px;margin-left:auto;border:0;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:transparent;color:var(--gray);cursor:pointer}.ax-post-drop-remove:hover{background:rgba(255,93,125,.13);color:#ff5d7d}
.ax-post-gallery-wrap{position:relative;width:100%;margin-top:12px;border:1px solid var(--mid-gray);border-radius:14px;overflow:hidden;background:#080b12}
.ax-post-gallery{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.ax-post-gallery::-webkit-scrollbar{display:none}
.ax-post-visual{display:block;flex:0 0 100%;width:100%;height:min(620px,72vw);scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:transparent}
.ax-post-image{padding:0;border:0;color:inherit;cursor:zoom-in}.ax-post-image img{display:block;width:100%;height:100%;object-fit:contain}.ax-post-video{object-fit:contain;background:transparent}
/* одиночное вложение: высота по самой картинке — без чёрных полос сверху/снизу */
.ax-post-gallery-wrap.single{background:transparent}
.ax-post-gallery-wrap.single .ax-post-gallery{justify-content:center}
.ax-post-gallery-wrap.single .ax-post-visual{height:auto;background:transparent}
.ax-post-gallery-wrap.single .ax-post-image img{width:auto;max-width:100%;height:auto;max-height:min(620px,80vh);margin:0 auto}
/* BUILD 20260727-258: горизонтальное видео раньше рисовалось в свой натуральный
   размер и центрировалось внутри колонки 720px — отсюда полосы по бокам.
   Теперь одиночное видео занимает всю ширину карточки, а высоту берёт из
   aspect-ratio (проставляет js по loadedmetadata). Вертикальное видео
   остаётся «по высоте», иначе оно растянулось бы на пол-экрана. */
.ax-post-gallery-wrap.single .ax-post-video{flex:0 0 100%;width:100%;max-width:100%;height:auto;max-height:min(620px,80vh);object-fit:contain;aspect-ratio:16/9}
.ax-post-gallery-wrap.single .ax-post-video.ax-post-video-portrait{flex:0 1 auto;width:auto;height:auto}
.ax-post-gallery-wrap.single .ax-post-gallery{overflow:hidden}.ax-post-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(10,16,26,.6);color:#fff;cursor:pointer;backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.16);transition:background-color .2s,transform .2s}
.ax-post-gallery-nav:hover{background:rgba(10,16,26,.82);transform:translateY(-50%) scale(1.07)}.ax-post-gallery-nav.prev{left:10px}.ax-post-gallery-nav.next{right:10px}
.ax-post-media{display:block;width:100%;margin-top:12px;border:1px solid var(--mid-gray);border-radius:14px;overflow:hidden;background:var(--surface-2)}
.ax-post-audio{border:1px solid var(--mid-gray);padding:12px 14px;color:inherit;text-align:left;display:flex;align-items:center;gap:12px;cursor:pointer}
.ax-post-audio>i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:23px;flex:0 0 auto}
.ax-post-audio span{display:flex;flex-direction:column;min-width:0}.ax-post-audio b,.ax-post-audio small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-post-audio small{color:var(--gray)}
/* BUILD 20260727-268: ряд реакций под постом. Стоит над строкой лайка и
   комментариев, поэтому собственной верхней линии не рисует — её даёт
   .ax-post-social. Ряд position:relative, чтобы всплывающий выбор эмодзи
   цеплялся к нему, а не к карточке поста. */
.ax-post-reacts{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.ax-react{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--mid-gray);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:14px;line-height:1.5;cursor:pointer}
.ax-react:hover{border-color:var(--ice)}
.ax-react.on{border-color:var(--ice);color:var(--ice);background:var(--surface)}
.ax-react b{font-size:12px;font-weight:600}
.ax-react-add{padding:3px 9px;color:var(--gray);font-size:15px}
/* Выбор открывается вверх: под постом сразу идёт строка комментариев, и
   выпадающий вниз список перекрывал бы поле ввода. */
.ax-react-pick{position:absolute;bottom:calc(100% + 6px);left:0;z-index:6;display:flex;flex-wrap:wrap;gap:2px;max-width:min(280px,calc(100vw - 48px));padding:6px;border:1px solid var(--mid-gray);border-radius:16px;background:var(--surface);box-shadow:var(--ax-shadow)}
.ax-react-pick[hidden]{display:none}
.ax-react-opt{border:0;background:transparent;font-size:21px;line-height:1;padding:5px 7px;border-radius:11px;cursor:pointer}
.ax-react-opt:hover,.ax-react-opt.on{background:var(--surface-2)}
.ax-post-social{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--mid-gray)}
/* BUILD 20260725-230: ручная установка лайков в админ-терминале */
.ax-post-likes-adm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--mid-gray);color:var(--gray)}
.ax-post-likes-adm>i{color:#ff5d7d}
.ax-post-likes-adm>b{font-size:13px;color:var(--ice)}
.ax-post-likes-adm input{max-width:130px}
.ax-post-act{border:0;background:transparent;color:var(--gray);display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;cursor:pointer}
.ax-post-act:hover{background:var(--surface-2);color:var(--ice)}.ax-post-act.on{color:#ff5d7d}
.ax-post-act b{font-size:12px}.ax-post-comments{padding-top:10px}
.ax-post-comment{display:flex;gap:9px;padding:8px 0}.ax-post-comment-main{flex:1;min-width:0}.ax-post-comment-user{color:inherit;text-decoration:none}.ax-post-comment-user:hover{text-decoration:underline}.ax-post-comment-main p{margin:2px 0;white-space:pre-wrap;word-break:break-word}
.ax-post-comment-form{display:flex;gap:8px;margin-top:8px}.ax-post-comment-form .ax-input{min-width:0}
/* BUILD 20260727-268: картинка/гифка в комментарии. Высоту ограничиваем —
   вертикальный скрин иначе растягивает ветку на пол-экрана; полный размер
   открывается в лайтбоксе по клику. */
.ax-post-comment-img{display:block;margin:4px 0 2px;padding:0;border:1px solid var(--mid-gray);border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:zoom-in;max-width:min(320px,100%)}
.ax-post-comment-img img{display:block;width:100%;max-height:260px;object-fit:cover}
.ax-post-comment-form .ax-post-comment-clip{flex:0 0 auto;align-self:center;color:var(--gray)}
.ax-post-comment-form .ax-post-comment-clip:hover{color:var(--ice)}
/* Полоса предпросмотра стоит над формой и скрыта, пока файл не выбран. */
.ax-post-comment-att[hidden]{display:none}
.ax-cmt-att{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:8px;padding:4px 6px 4px 4px;border:1px solid var(--mid-gray);border-radius:12px;background:var(--surface-2)}
.ax-cmt-att img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.ax-cmt-att b{font-size:12px;font-weight:500;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ax-global-player{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1090;isolation:isolate;width:min(620px,calc(100vw - 24px));min-height:60px;display:flex;align-items:center;gap:10px;padding:8px 10px;background:linear-gradient(155deg,rgba(23,36,55,.68),rgba(8,15,26,.55));border:1px solid rgba(170,207,255,.34);border-radius:18px;box-shadow:0 18px 55px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05);backdrop-filter:blur(28px) saturate(180%) brightness(1.08);-webkit-backdrop-filter:blur(28px) saturate(180%) brightness(1.08);overflow:hidden}
.ax-global-player::before{content:"";position:absolute;inset:-45%;z-index:0;pointer-events:none;background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.22),transparent 32%),radial-gradient(ellipse at 78% 76%,rgba(80,151,255,.24),transparent 42%),linear-gradient(105deg,transparent 25%,rgba(255,255,255,.09) 52%,transparent 76%);filter:blur(15px);opacity:.78}
.ax-global-player::after{content:"";position:absolute;inset:1px;z-index:0;pointer-events:none;border-radius:17px;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%,rgba(77,145,242,.035))}
.ax-global-player>button,.ax-global-player>span{position:relative;z-index:1}.ax-global-player .ax-gp-prog{z-index:2}
html[data-theme="light"] .ax-global-player{background:linear-gradient(155deg,rgba(255,255,255,.72),rgba(224,236,252,.58));border-color:rgba(75,126,198,.26);box-shadow:0 18px 48px rgba(38,66,105,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(50,83,130,.08)}
html[data-theme="light"] .ax-global-player::before{background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.82),transparent 32%),radial-gradient(ellipse at 78% 76%,rgba(76,145,244,.18),transparent 42%),linear-gradient(105deg,transparent 25%,rgba(255,255,255,.38) 52%,transparent 76%)}
.ax-audio-frame{position:fixed;inset:0;z-index:1080;width:100%;height:100%;border:0;background:var(--dark)}
.ax-gp-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--ice)}
.ax-gp-main{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:50%;background:var(--grad);color:#fff;font-size:23px;display:grid;place-items:center}
.ax-gp-meta{flex:1;min-width:0;border:0;background:transparent;color:inherit;text-align:left;display:flex;flex-direction:column}.ax-gp-meta b,.ax-gp-meta small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-gp-meta small{color:var(--gray)}
.ax-global-player>span{font-size:12px;color:var(--gray);white-space:nowrap}
.ax-global-player.ax-global-player-chat{bottom:auto;z-index:1500}
@media(max-width:575px){.ax-global-player{bottom:74px}.ax-global-player>span{display:none}}
.ax-player-sheet-ov{position:fixed;inset:0;z-index:3200;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(2,7,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .22s ease}
.ax-player-sheet-ov.open{opacity:1}.ax-player-sheet{width:min(560px,100%);max-height:min(820px,calc(100vh - 36px));display:flex;flex-direction:column;padding:18px;border:1px solid rgba(170,207,255,.3);border-radius:26px;background:linear-gradient(155deg,rgba(23,36,55,.9),rgba(8,15,26,.84));box-shadow:0 26px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.13);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);transform:translateY(26px);transition:transform .22s ease;overflow:hidden}
.ax-player-sheet-ov.open .ax-player-sheet{transform:none}.ax-player-sheet>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.ax-player-sheet>header>b{font-size:18px}
.ax-gps-queue{flex:1;min-height:120px;max-height:360px;overflow:auto;margin:0 -5px 14px;padding:2px 5px;display:flex;flex-direction:column;gap:4px}.ax-gps-track{width:100%;display:flex;align-items:center;gap:11px;padding:9px;border:0;border-radius:13px;background:transparent;color:inherit;text-align:left;cursor:pointer}.ax-gps-track:hover,.ax-gps-track.on{background:rgba(111,170,255,.12)}.ax-gps-track>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.ax-gps-track b,.ax-gps-track small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-gps-track small{color:var(--gray)}.ax-gps-track>i{opacity:0;color:var(--ice)}.ax-gps-track.on>i{opacity:1}.ax-gps-note{width:42px;height:42px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,rgba(111,170,255,.28),rgba(111,170,255,.08));color:var(--ice)}
.ax-gps-current{display:flex;align-items:center;gap:13px;margin:4px 0 13px}.ax-gps-current>span:last-child{display:flex;flex-direction:column;min-width:0}.ax-gps-current b,.ax-gps-current small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ax-gps-current small{color:var(--gray)}.ax-gps-cover{width:58px;height:58px;flex:0 0 auto;border-radius:17px;display:grid;place-items:center;font-size:25px;color:#fff;background:var(--grad);box-shadow:0 10px 26px rgba(42,113,224,.3)}
.ax-gps-seek{width:100%;accent-color:var(--ice);cursor:pointer}.ax-gps-time{display:flex;justify-content:space-between;color:var(--gray);margin-top:1px}.ax-gps-controls{display:flex;align-items:center;justify-content:space-around;margin:8px 0 15px}.ax-gps-controls .ax-iconbtn{width:44px;height:44px;font-size:19px}.ax-gps-controls .on{color:var(--ice);background:rgba(111,170,255,.13)}.ax-gps-play{width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:28px;box-shadow:0 10px 28px rgba(42,113,224,.34)}.ax-gps-repeat{position:relative}.ax-gps-repeat small{position:absolute;right:2px;bottom:1px;font-size:9px;font-weight:800}.ax-gps-add{width:100%;justify-content:center;border-radius:15px;min-height:48px}.ax-gps-add:disabled{opacity:.62;cursor:default}
html[data-theme="light"] .ax-player-sheet{background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(224,236,252,.9));border-color:rgba(75,126,198,.25);box-shadow:0 25px 75px rgba(38,66,105,.28)}
@media(max-width:575px){.ax-player-sheet-ov{padding:0}.ax-player-sheet{max-height:92dvh;border-radius:24px 24px 0 0;border-bottom:0;padding:16px}.ax-gps-queue{max-height:40dvh}.ax-userbtn{width:42px;height:42px;padding:0;justify-content:center;border-radius:13px;gap:0}.ax-userbtn .ax-ava-sm{margin:0}.ax-userbtn .ax-pro-badge,.ax-userbtn>span:not(.ax-ava){display:none}}
.ax-pa-list{display:flex;flex-direction:column;gap:10px;max-width:720px}
.ax-pa-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:var(--ax-border);border-radius:14px;padding:10px 14px}
.ax-pa-item>i{font-size:18px;color:var(--ax-accent,#6faaff);flex-shrink:0}
.ax-pa-name{flex:0 1 auto;min-width:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px}
.ax-pa-item audio{flex:1;min-width:0;height:36px}
@media (max-width:576px){
  .ax-pa-item{flex-wrap:wrap}
  .ax-pa-name{max-width:100%}
  .ax-pa-item audio{flex-basis:100%}
}

/* ================= Поиск по чатам (как в TG) ================= */
.ax-chat-search { position: relative; margin-top: 12px; }
.ax-chat-search .bi-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--muted); pointer-events: none; }
.ax-chat-search input { width: 100%; border-radius: 18px; padding: 7px 34px 7px 34px; font-size: 14px; color: var(--txt); background: rgba(138,147,166,.10); border: 1px solid rgba(138,147,166,.22); outline: none; transition: border-color .2s ease; }
.ax-chat-search input::placeholder { color: var(--muted); }
.ax-chat-search input:focus { border-color: var(--ice); }
.ax-chat-search input::-webkit-search-cancel-button { display: none; }
#chatFindX { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 13px; padding: 4px 6px; cursor: pointer; }
#chatFindX:hover { color: var(--txt); }
.ax-chat-sr-h { padding: 10px 18px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* ================= Кристаллы на фоне переписки ================= */
.ax-chat-main { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%236FAAFF' stroke-opacity='.07' stroke-width='1.5'%3E%3Cg transform='translate(18 22) rotate(-12 30 30)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(128 96) rotate(24 22 22) scale(.75)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(40 140) rotate(160 18 18) scale(.55)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(150 10) rotate(80 14 14) scale(.42)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 210px 210px; background-repeat: repeat; }
html[data-theme="light"] .ax-chat-main { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%238A99B0' stroke-opacity='.07' stroke-width='1.5'%3E%3Cg transform='translate(18 22) rotate(-12 30 30)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(128 96) rotate(24 22 22) scale(.75)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(40 140) rotate(160 18 18) scale(.55)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3Cg transform='translate(150 10) rotate(80 14 14) scale(.42)'%3E%3Cpath d='M20 0 L40 0 L60 20 L30 60 L0 20 Z'/%3E%3Cpath d='M20 0 L14 20 L30 60 M40 0 L46 20 L30 60 M0 20 L60 20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

/* ================= Жалоба на авторское право ================= */
.ax-pa-flag { border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 6px 8px; border-radius: 8px; cursor: pointer; flex-shrink: 0; transition: color .2s ease, background .2s ease; }
.ax-pa-flag:hover { color: #E5484D; background: rgba(229,72,77,.10); }
.ax-cr-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border: 1.5px dashed rgba(138,147,166,.4); border-radius: 14px; color: var(--muted); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ax-cr-drop .bi { font-size: 22px; }
.ax-cr-drop:hover, .ax-cr-drop.drag { border-color: var(--ice); background: rgba(111,170,255,.06); }
.ax-cr-drop.has { border-style: solid; border-color: var(--ice); color: var(--txt); }

/* ===== 3D-кристаллы в открытой переписке (BUILD 133) ===== */
.ax-chat-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .9s ease; }
.ax-chat-bg.on { opacity: 1; }
.ax-chat-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.ax-chat-main > .ax-chat-head, .ax-chat-main > .ax-chat-pinbar, .ax-chat-main > .ax-chat-searchbar,
.ax-chat-main > .ax-chat-msgs, .ax-chat-main > .ax-chat-pend, .ax-chat-main > .ax-chat-edit,
.ax-chat-main > .ax-chat-form, .ax-chat-main > .ax-chat-hint { position: relative; z-index: 1; }
.ax-chat-main.ax-3don { background-image: none; background-color: #0B1017; }
html[data-theme="light"] .ax-chat-main.ax-3don { background-image: none; background-color: #E9F0F9; }
.ax-chat-main.ax-3don .ax-chat-msgs { background-color: transparent; background-image: none; }
html[data-theme="light"] .ax-chat-main.ax-3don .ax-chat-msgs { background-color: transparent; background-image: none; }

/* ===== BUILD 134: матовое стекло (шапка чата, закреп, плеер) + плеер-бабл ===== */
.ax-chat-head, .ax-chat-pinbar {
  background-color: rgba(15,21,30,0.9);
}
html[data-theme="light"] .ax-chat-head,
html[data-theme="light"] .ax-chat-pinbar {
  background-color: rgba(255,255,255,0.9);
}
/* плеер — маленький бабл: пауза + название + закрыть */
.ax-chat-now {
  align-self: center; width: auto; max-width: min(92%, 440px);
  margin: 8px 0 2px; padding: 3px 5px; gap: 2px;
  border: 1px solid rgba(191,217,255,0.14); border-radius: 999px;
  background: rgba(15,21,30,0.9); overflow: hidden;
  box-shadow: 0 10px 30px rgba(4,8,16,0.35);
}
.ax-chat-now #chatNowPrev, .ax-chat-now #chatNowNext, .ax-chat-now #chatNowMode { display: none; }
.ax-chat-now b { font-size: 13px; padding: 0 4px; cursor: pointer; }
.ax-chat-now .ax-iconbtn { width: 30px; height: 30px; flex: 0 0 auto; }
.ax-chat-now-prog { bottom: 0; border-radius: 2px; }
html[data-theme="light"] .ax-chat-now {
  background: rgba(255,255,255,0.92); border-color: rgba(21,50,120,0.14);
  box-shadow: 0 10px 30px rgba(21,50,120,0.16);
}
/* глобальный бабл плеера вне открытой переписки */
body > .ax-chat-now { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 1500; margin: 0; }
/* запотевшее стекло там, где поддерживается */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ax-chat-head, .ax-chat-pinbar {
    background-color: rgba(15,21,30,0.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  }
  .ax-chat-now {
    background: rgba(15,21,30,0.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  }
  html[data-theme="light"] .ax-chat-head,
  html[data-theme="light"] .ax-chat-pinbar { background-color: rgba(255,255,255,0.55); }
  html[data-theme="light"] .ax-chat-now { background: rgba(255,255,255,0.6); }
}

/* BUILD 135: бабл плеера парит под закреплённым сообщением, не занимая места */
.ax-chat-main .ax-chat-now { margin: 10px 0 -48px; z-index: 6; }

/* Optional account recovery, per-tab PIN gate, and local E2EE QR pairing. */
.ax-e2ee-qr-link{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px;border:1px solid rgba(85,167,255,.28);border-radius:12px;background:rgba(52,128,220,.09);color:#91c8ff;font-weight:750}
.ax-e2ee-qr-link:hover{border-color:rgba(85,167,255,.5);background:rgba(52,128,220,.16)}
.ax-e2ee-qr{width:min(100%,310px);margin:4px auto 14px;padding:14px;border-radius:18px;background:#fff;box-shadow:0 16px 46px rgba(0,0,0,.28)}
.ax-e2ee-qr svg{display:block;width:100%;height:auto}
.ax-e2ee-qr-wait{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ax-muted,#9aa8ba);min-height:28px}
/* отпечаток токена спаривания под QR — его сверяют со вторым устройством */
.ax-e2ee-qr-fp{margin:10px 0 4px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;letter-spacing:.18em;font-weight:700;color:var(--ax-text,#e8eef7);min-height:26px}
.ax-e2ee-qr-video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid rgba(120,175,255,.24);border-radius:18px;background:#050a12}
.ax-chat-qr{border-top-color:rgba(91,169,255,.22)}
.ax-chat-qr>i:first-child{color:#69b4ff}
.ax-pin-gate{min-height:55vh;display:grid;place-items:center;padding:28px 0}
.ax-pin-gate>.ax-legal-card{width:min(100%,430px);text-align:center}
.ax-pin-input{text-align:center;font-size:22px;letter-spacing:.5em;font-variant-numeric:tabular-nums;padding-left:calc(.75rem + .5em)}
.ax-backup-optional{border-color:rgba(91,169,255,.2);background:rgba(52,128,220,.07)}
.ax-recovery-box{padding:14px;border:1px solid rgba(126,169,224,.15);border-radius:14px;background:rgba(9,17,28,.24)}
html[data-theme="light"] .ax-e2ee-qr-link{color:#1262ad;background:rgba(52,128,220,.07)}
html[data-theme="light"] .ax-recovery-box{background:rgba(235,243,252,.68)}
@media(max-width:575.98px){.ax-e2ee-qr{max-width:260px}.ax-pin-gate{min-height:45vh;padding:12px 0}.ax-pin-input{font-size:20px}}


/* ===== BUILD 137: премиум-стиль кнопок «Войти с QR» / «Новые 24 слова» ===== */
.ax-chat-recovery {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 20px); margin: 4px 10px; padding: 11px 12px;
  border: 1px solid rgba(138, 147, 166, 0.16); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text); text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ax-chat-recovery:first-of-type { margin-top: 10px; }
.ax-chat-recovery:hover {
  border-color: rgba(83, 160, 255, 0.5);
  background: rgba(46, 111, 242, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 84, 180, 0.18);
}
.ax-chat-recovery:active { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.ax-chat-recovery:disabled { opacity: .55; cursor: wait; transform: none; }
.ax-chat-recovery > i:first-child {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
  background: var(--grad, linear-gradient(135deg, #2E6FF2 0%, #53A0FF 100%));
  color: #fff; font-size: 15px;
  box-shadow: 0 3px 10px rgba(46, 111, 242, 0.35);
}
.ax-chat-qr > i:first-child { color: #fff; }
.ax-chat-recovery > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.ax-chat-recovery b { font-size: 12.5px; font-weight: 600; letter-spacing: .1px; }
.ax-chat-recovery small { overflow: hidden; color: var(--ax-muted, #8a93a6); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.ax-chat-recovery > i:last-child { color: var(--ax-muted, #8a93a6); font-size: 11px; transition: transform .18s ease, color .18s ease; }
.ax-chat-recovery:hover > i:last-child { transform: translateX(2px); color: #53A0FF; }
html[data-theme="light"] .ax-chat-recovery {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .ax-chat-recovery:hover {
  border-color: rgba(46, 111, 242, 0.4);
  background: rgba(46, 111, 242, 0.05);
  box-shadow: 0 6px 18px rgba(24, 84, 180, 0.12);
}
html[data-theme="light"] .ax-chat-recovery small,
html[data-theme="light"] .ax-chat-recovery > i:last-child { color: #64748b; }
/* ===== BUILD 20260718-209: плеер — чистое премиум-стекло (обе темы) ===== */
/* Тёмная тема: убираем «запотевшие» размытые пятна, оставляем ровное стекло */
.ax-global-player{background:rgba(13,20,32,.62);border-color:rgba(170,207,255,.2);box-shadow:0 16px 48px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.ax-global-player::before{content:none}
.ax-global-player::after{inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%)}
html[data-theme="light"] .ax-global-player{background:rgba(255,255,255,.78);border-color:rgba(46,90,150,.16);box-shadow:0 16px 40px rgba(38,66,105,.16),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme="light"] .ax-global-player::after{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 45%)}

/* Шторка глобального плеера */
.ax-player-sheet-ov{background:rgba(4,8,15,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-theme="light"] .ax-player-sheet-ov{background:rgba(30,45,70,.28)}
.ax-player-sheet{background:rgba(13,20,32,.8);border-color:rgba(170,207,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
html[data-theme="light"] .ax-player-sheet{background:rgba(255,255,255,.88);border-color:rgba(46,90,150,.15);box-shadow:0 24px 70px rgba(38,66,105,.22),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme="light"] .ax-gps-track:hover,html[data-theme="light"] .ax-gps-track.on{background:rgba(46,111,242,.09)}
html[data-theme="light"] .ax-gps-note{background:linear-gradient(145deg,rgba(46,111,242,.16),rgba(46,111,242,.05));color:#2E6FF2}

/* Шторка «Сейчас играет» в чате */
.ax-nowsheet-ov{background:rgba(4,8,15,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html[data-theme="light"] .ax-nowsheet-ov{background:rgba(30,45,70,.28)}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .ax-nowsheet{background:rgba(13,20,32,.82);border-color:rgba(170,207,255,.16);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
  html[data-theme="light"] .ax-nowsheet{background:rgba(255,255,255,.9);border-color:rgba(46,90,150,.14)}
}

/* Плеер-бар в чате */
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .ax-chat-now{background:rgba(13,20,32,.55);border-color:rgba(170,207,255,.14);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  html[data-theme="light"] .ax-chat-now{background:rgba(255,255,255,.72);border-color:rgba(46,90,150,.14);box-shadow:0 10px 30px rgba(21,50,120,.12)}
}

/* ===== BUILD 20260718-212: фирменное окно подтверждения (обе темы) ===== */
.ax-confirm-card{max-width:420px;text-align:center}
.ax-confirm-card .ax-e2ee-shield{margin:0 auto 16px}
.ax-confirm-shield-danger{background:linear-gradient(145deg,#b92c42,#e64f62)!important;box-shadow:0 12px 35px rgba(185,44,66,.32)!important}
.ax-confirm-actions{display:flex;gap:10px;margin-top:20px}
.ax-confirm-actions .ax-btn{flex:1;justify-content:center}
html[data-theme="light"] .ax-confirm-shield-danger{box-shadow:0 12px 30px rgba(185,44,66,.22)!important}
html[data-theme="light"] .ax-confirm-card{border-color:rgba(30,90,160,.16);background:linear-gradient(145deg,#ffffff,#f2f6fc);box-shadow:0 28px 80px rgba(25,60,110,.16),inset 0 1px rgba(255,255,255,.9);color:#12233a}
html[data-theme="light"] .ax-confirm-card .ax-e2ee-intro{color:#4a5c72}
html[data-theme="light"] #axConfirm.ax-e2ee-setup{background:rgba(214,228,244,.6)}

/* BUILD 20260727-258: type-to-confirm + \u0444\u0438\u0440\u043c\u0435\u043d\u043d\u044b\u0439 prompt */
.ax-confirm-hint{margin:-4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ax-muted,#93a6c0)}
.ax-confirm-word{display:block;margin-top:16px;text-align:left}
.ax-confirm-word>span{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--ax-muted,#93a6c0)}
.ax-confirm-word .ax-input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px}
.ax-confirm-actions .ax-btn[disabled]{opacity:.45;pointer-events:none}
.ax-prompt-card .ax-input,.ax-prompt-card textarea.ax-input{width:100%;margin-top:14px;text-align:left;resize:vertical}
.ax-prompt-card textarea.ax-input{min-height:88px;line-height:1.5}
html[data-theme="light"] .ax-confirm-hint,html[data-theme="light"] .ax-confirm-word>span{color:#5b6e88}
html[data-theme="light"] #axPrompt.ax-e2ee-setup{background:rgba(214,228,244,.6)}

/* \u0412\u043a\u043b\u0430\u0434\u043a\u0438 \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430: \u041e\u0431\u0437\u043e\u0440 / \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 */
.ax-acct-tabs{margin-top:0;margin-bottom:22px}
.ax-apane[hidden]{display:none!important}
.ax-apane>.ax-legal-card{margin-bottom:24px}
.ax-apane>.ax-legal-card:last-child{margin-bottom:0}
.ax-settings-pane{max-width:760px}
.ax-settings-pane .ax-legal-card{margin-bottom:24px}
.ax-settings-pane .ax-legal-card:last-child{margin-bottom:0}
.ax-danger-zone{margin-top:22px;padding:16px;border:1px solid rgba(230,79,98,.28);border-radius:16px;background:rgba(230,79,98,.06)}
.ax-danger-zone h3{margin:0 0 4px;font-size:15px;font-weight:700;color:#ff8a9c}
.ax-danger-zone p{margin-bottom:12px}
html[data-theme="light"] .ax-danger-zone{border-color:rgba(185,44,66,.22);background:rgba(230,79,98,.05)}
html[data-theme="light"] .ax-danger-zone h3{color:#b92c42}

/* ===== BUILD 20260718-213: шторка плеера — премиум-стекло (обе темы) ===== */
.ax-player-sheet{position:relative;isolation:isolate;background:linear-gradient(165deg,rgba(21,33,52,.78),rgba(9,16,28,.72));border-color:rgba(170,207,255,.26);box-shadow:0 26px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%)}
.ax-player-sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),radial-gradient(ellipse at 82% 0%,rgba(80,151,255,.16),transparent 55%)}
.ax-player-sheet>header>b{letter-spacing:.2px}
.ax-gps-queue{margin:0 -6px 14px;padding:4px 6px}
.ax-gps-track{border:1px solid transparent;border-radius:14px;transition:background .16s,border-color .16s}
.ax-gps-track:hover{background:rgba(255,255,255,.05)}
.ax-gps-track.on{background:rgba(111,170,255,.12);border-color:rgba(170,207,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ax-gps-note{border:1px solid rgba(170,207,255,.22);background:linear-gradient(145deg,rgba(111,170,255,.24),rgba(111,170,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ax-gps-current{padding:10px;border:1px solid rgba(170,207,255,.16);border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ax-gps-cover{box-shadow:0 12px 30px rgba(42,113,224,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.ax-gps-seek{height:4px;border-radius:999px}
.ax-gps-controls .ax-iconbtn{border-radius:50%;transition:background .16s,color .16s}
.ax-gps-controls .ax-iconbtn:hover{background:rgba(255,255,255,.07)}
.ax-gps-controls .on{background:rgba(111,170,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ax-gps-play{box-shadow:0 12px 30px rgba(42,113,224,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.ax-gps-add{box-shadow:0 10px 26px rgba(42,113,224,.28),inset 0 1px 0 rgba(255,255,255,.22)}
/* Светлая тема */
html[data-theme="light"] .ax-player-sheet{background:linear-gradient(165deg,rgba(255,255,255,.9),rgba(230,240,252,.82));border-color:rgba(46,90,150,.18);box-shadow:0 26px 80px rgba(38,66,105,.24),inset 0 1px 0 rgba(255,255,255,.95)}
html[data-theme="light"] .ax-player-sheet::before{background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 38%),radial-gradient(ellipse at 82% 0%,rgba(76,145,244,.12),transparent 55%)}
html[data-theme="light"] .ax-gps-track:hover{background:rgba(46,111,242,.06)}
html[data-theme="light"] .ax-gps-track.on{background:rgba(46,111,242,.1);border-color:rgba(46,111,242,.2);box-shadow:none}
html[data-theme="light"] .ax-gps-note{border-color:rgba(46,111,242,.2)}
html[data-theme="light"] .ax-gps-current{border-color:rgba(46,90,150,.15);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
html[data-theme="light"] .ax-gps-controls .ax-iconbtn:hover{background:rgba(46,111,242,.07)}
html[data-theme="light"] .ax-gps-controls .on{background:rgba(46,111,242,.12);box-shadow:none}

/* ===== BUILD 20260718-214: бейдж E2EE у имени + баннер восстановления доступа ===== */
.ax-chat-namerow{display:inline-flex;align-items:center;gap:7px;min-width:0}
.ax-chat-namerow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-e2ee-badge{gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#6fe3ae;border:1px solid rgba(85,214,158,.32);background:linear-gradient(145deg,rgba(85,214,158,.16),rgba(85,214,158,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.ax-e2ee-badge .bi{font-size:10px;line-height:1}
html[data-theme="light"] .ax-e2ee-badge{color:#0e9a5f;border-color:rgba(14,154,95,.28);background:linear-gradient(145deg,rgba(20,180,110,.12),rgba(20,180,110,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
/* BUILD 20260807-276: состояние «сквозного шифрования в этой переписке нет».
   Нарочно приглушённое, а не красное: это не поломка, а обычный режим — но
   зелёный щит здесь показывать нельзя, он говорил бы неправду. */
.ax-e2ee-badge.off{color:#9fb0c8;border-color:rgba(159,176,200,.28);background:linear-gradient(145deg,rgba(159,176,200,.12),rgba(159,176,200,.03))}
html[data-theme="light"] .ax-e2ee-badge.off{color:#5d6b80;border-color:rgba(93,107,128,.26);background:linear-gradient(145deg,rgba(93,107,128,.1),rgba(93,107,128,.02))}
.ax-e2ee-gate{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(170,207,255,.16);background:linear-gradient(165deg,rgba(21,33,52,.66),rgba(9,16,28,.55));backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.ax-e2ee-gate>.bi{color:#6fe3ae;font-size:18px;flex:none}
.ax-e2ee-gate>span{flex:1;min-width:0;font-size:13px;line-height:1.35;color:var(--text)}
.ax-e2ee-gate .ax-btn{flex:none;white-space:nowrap}
html[data-theme="light"] .ax-e2ee-gate{border-bottom-color:rgba(46,90,150,.15);background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(230,240,252,.7))}
html[data-theme="light"] .ax-e2ee-gate>.bi{color:#0e9a5f}

/* ===== BUILD 20260722-225: нижний блок сайдбара чата (QR/24 слова/почта) — матовое стекло, обе темы ===== */
.ax-chat-side-foot {
  flex: 0 0 auto; display: flex; flex-direction: column;
  margin: 6px 10px 10px; padding: 6px; border-radius: 16px;
  border: 1px solid rgba(170, 207, 255, 0.14);
  background: rgba(13, 20, 32, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ax-chat-side-foot { backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
}
.ax-chat-side-foot .ax-chat-recovery { width: 100%; margin: 0 0 4px; box-shadow: none; background: rgba(255, 255, 255, 0.03); }
.ax-chat-side-foot .ax-chat-recovery:first-of-type { margin-top: 0; }
.ax-chat-side-foot .ax-chat-recovery:hover { box-shadow: 0 6px 18px rgba(24, 84, 180, 0.18); }
.ax-chat-side-foot .ax-chat-mailopt { border-top: 1px solid rgba(138, 147, 166, 0.16); margin-top: 2px; padding: 10px 8px 6px; }
/* код безопасности E2EE в подвале списка чатов — его сверяют с собеседником */
.ax-chat-fp { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; padding: 10px 8px 4px; border-top: 1px solid rgba(138, 147, 166, 0.16); }
.ax-chat-fp > b { font-size: 12px; font-weight: 700; color: var(--ax-muted, #8a93a6); letter-spacing: .02em; }
.ax-chat-fp > code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .06em; line-height: 1.5; word-break: break-all; color: var(--ax-text, #e8eef7); }
.ax-chat-fp > code.ax-chat-fp-none { font-family: inherit; letter-spacing: 0; color: var(--ax-muted, #8a93a6); }
.ax-chat-fp > small { font-size: 11px; line-height: 1.35; color: var(--ax-muted, #8a93a6); }
html[data-theme="light"] .ax-chat-fp > code { color: #16202f; }
/* Отпечаток скрыт эмодзи-маской: код виден только после нажатия.
   Курсор и подсветка при наведении подсказывают, что это кнопка. */
.ax-chat-fp > code { cursor: pointer; border-radius: 8px; transition: background .15s ease; outline-offset: 2px; }
.ax-chat-fp > code:hover, .ax-chat-fp > code:focus-visible { background: rgba(138, 147, 166, 0.14); }
.ax-chat-fp > code.ax-chat-fp-masked { font-family: inherit; font-size: 17px; letter-spacing: .12em; line-height: 1.3; user-select: none; }
html[data-theme="light"] .ax-chat-side-foot {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(46, 90, 150, 0.14);
  box-shadow: 0 10px 26px rgba(38, 66, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html[data-theme="light"] .ax-chat-side-foot .ax-chat-recovery { background: rgba(255, 255, 255, 0.65); }
html[data-theme="light"] .ax-chat-side-foot .ax-chat-mailopt { border-top-color: rgba(15, 23, 42, 0.08); }

/* ===== BUILD 20260722-227: бейдж Privacy by design в футере ===== */
.ax-foot-privacy { display: inline-flex; align-items: center; gap: 2px; padding: 3px 12px;
  border-radius: 999px; border: 1px solid rgba(111,170,255,0.22);
  background: rgba(111,170,255,0.07); color: var(--ice); font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap; }
.ax-foot-privacy .bi { font-size: 13px; }
html[data-theme="light"] .ax-foot-privacy { border-color: rgba(46,90,150,0.22);
  background: rgba(46,90,150,0.06); color: #2e5a96; }


/* ===== BUILD 229: перевод постов и комментариев ===== */
.ax-cmt-tr {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: inherit; color: var(--ice, #9db8d9);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.ax-cmt-tr:hover { opacity: .8; }
body[data-theme="light"] .ax-cmt-tr { color: #2e5a96; }
.ax-tr-busy { opacity: .5; pointer-events: none; }
.ax-post-tr.on { color: var(--ice, #9db8d9); }
body[data-theme="light"] .ax-post-tr.on { color: #2e5a96; }
.ax-news-translation{display:flex;justify-content:flex-end;margin-top:auto;padding-top:10px;border-top:1px solid var(--ax-border-c)}.ax-news-translation .ax-post-tr{gap:7px;min-width:112px}.ax-news-translation .ax-post-tr.on{border-color:rgba(111,170,255,.5);background:rgba(71,143,255,.1);color:var(--ice)}

/* BUILD 20260725-233: скелетон ленты — карточки-заглушки вместо одного квадратика,
   плюс «занятое» состояние кнопки «Показать ещё» */
.ax-skel-post { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 14px;
  border: var(--ax-border); border-radius: var(--ax-r-sm); background: var(--surface); }
.ax-skel-post-head { display: flex; align-items: center; gap: 10px; }
.ax-skel-post .ax-skel { aspect-ratio: auto; border: 0; border-radius: 8px; }
.ax-skel-ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; }
.ax-skel-line { height: 12px; width: 100%; }
.ax-skel-line.w40 { width: 40%; }
.ax-skel-line.w60 { width: 60%; }
.ax-skel-media { height: min(320px, 46vw); width: 100%; border-radius: 10px; }
.ax-busy { opacity: .6; pointer-events: none; }


/* ==================================================================
   BUILD 20260727-258 — ИСПОЛНИТЕЛИ (мастера)
   Услугу выполняет не платформа, а проверенный мастер: карточка
   категории показывает счётчик мастеров и минимальную ставку,
   страница категории — список исполнителей, кабинет — заявку и профиль.
   ================================================================== */

/* ---------- карточка категории на /dienste ---------- */
/* ---------- карточка услуги ----------
   Компактная раскладка вместо баннера 4:3: иконка-плитка + название и счётчик
   справа от неё, внизу цена и кнопка. Высота карточки упала примерно вдвое,
   поэтому в ряд встаёт пять вместо четырёх, а на главной — два ряда вместо
   одного. «Дорого» держат слои, а не размеры: подложка иконки, блик за
   курсором (координаты уже считает bindTilt для .ax-card) и отклик на нажатие. */
.ax-service { padding: 14px; gap: 12px; }
.ax-service .ax-srv-top { display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none; }
.ax-srv-ico { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; font-size: 21px; color: var(--ice);
  background: linear-gradient(158deg, rgba(111,170,255,0.16), rgba(111,170,255,0.05));
  box-shadow: inset 0 0 0 1px rgba(111,170,255,0.14);
  transition: background .25s var(--ax-ease), box-shadow .25s, color .25s; }
.ax-service:hover .ax-srv-ico {
  background: linear-gradient(158deg, rgba(111,170,255,0.30), rgba(111,170,255,0.11));
  box-shadow: inset 0 0 0 1px rgba(111,170,255,0.34); color: #C6DCFF; }
/* Две строки на название: «Подключение посудомоечной машины» иначе делает
   карточку выше соседей, и ряд перестаёт быть ровным. Две строки текста ниже
   плитки иконки, поэтому верхняя строка карточки всегда ровно 46px — и всё,
   что под ней, у соседей начинается на одном уровне. */
.ax-service .ax-card-title { min-width: 0; font-size: 14.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-service .ax-srv-mst { margin: 0; }
.ax-srv-bot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.ax-service .ax-price-row { margin: 0; min-height: 24px; align-items: center; gap: 8px; }
/* Рядом с плашкой «новинка» строка «в этой категории пока нет исполнителей»
   ломалась на три части — держим две и обрезаем. */
.ax-service .ax-srv-nomst { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.ax-service .ax-badge { position: static; flex: 0 0 auto; margin-left: auto; }
.ax-service .ax-price { font-size: 17px; }
/* 44px — минимальный размер, при котором в кнопку уверенно попадают пальцем.
   Уменьшая карточку, кнопку уменьшать нельзя. */
.ax-service .ax-buy-srv { min-height: 44px; font-size: 13px; }
/* Блик под курсором и лёгкое утапливание при нажатии: те же приёмы, что у
   плиток категорий, но без наклона — в карточке есть кнопка, и наклон под
   пальцем мешал бы в неё попасть. */
@media (hover: hover) and (pointer: fine) {
  .ax-service::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0; transition: opacity .3s;
    background: radial-gradient(300px 200px at var(--gx, 50%) var(--gy, 50%), rgba(111,170,255,0.10), transparent 62%); }
  .ax-service:hover::before { opacity: 1; }
}
/* Поднимаем над бликом именно содержимое. Раньше здесь стоял `.ax-service > *`
   — он ставил position:relative и плашке «хит», у которой позиционирование
   абсолютное, и она растягивалась во всю ширину карточки. */
.ax-service .ax-srv-top, .ax-service .ax-srv-mst, .ax-service .ax-srv-bot { position: relative; z-index: 1; }
.ax-service:active { transform: scale(.988); }
.ax-service .ax-srv-top:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .ax-service:active { transform: none; } }

.ax-srv-mst { display: flex; align-items: center; gap: 7px; margin: 10px 0 2px;
  font-size: 12.5px; font-weight: 700; font-family: var(--ax-mono); color: var(--ice); }
.ax-srv-mst i { font-size: 13px; }
.ax-srv-nomst { font-size: 13px; color: var(--gray); }
.ax-srv-cta { margin-top: 12px; }
.ax-buy-srv { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- сетка мастеров ---------- */
/* minmax(0,1fr) вместо 1fr: у колонки 1fr минимальная ширина — min-content,
   и длинная неразрывная плашка навыка («Подключение посудомоечной машины»)
   раздвигала колонку шире экрана, унося правый край карточки за границу. */
.ax-mst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) { .ax-mst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ax-mst-grid { grid-template-columns: minmax(0, 1fr); } }

.ax-mst-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border: var(--ax-border); border-radius: var(--ax-r); background: var(--surface);
  color: inherit; text-decoration: none;
  transition: border-color .18s var(--ax-ease), transform .18s var(--ax-ease), box-shadow .18s var(--ax-ease); }
.ax-mst-card:hover { border: var(--ax-border-hi); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(8,15,30,0.28); color: inherit; }

.ax-mst-top { display: flex; align-items: center; gap: 12px; }
.ax-mst-ava { position: relative; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  object-fit: cover; border: var(--ax-border); background: #10161F; display: grid; place-items: center;
  color: var(--gray); font-weight: 800; font-size: 18px; overflow: hidden; }
.ax-mst-ava > .ax-ava { width: 100%; height: 100%; border: 0; border-radius: inherit; }
.ax-mst-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-mst-id { min-width: 0; flex: 1; }
.ax-mst-head { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px;
  color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-mst-head i { color: var(--ice); font-size: 13px; flex: none; }
.ax-mst-geo { margin-top: 2px; font-size: 12.5px; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ax-mst-headline { font-size: 13.5px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ax-mst-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px;
  font-family: var(--ax-mono); color: var(--gray); }
.ax-mst-stats span { display: inline-flex; align-items: center; gap: 5px; }
.ax-mst-stats i { font-size: 12px; }

/* Чем занимается мастер — короткий список на витрине исполнителей.
   Ровно три чипса плюс счётчик: длинный список ломал бы высоту карточек.
   Класс НЕ .ax-mst-skill — так называется редактор услуг в кабинете мастера,
   и его колоночная раскладка растягивала чипсы на всю ширину карточки. */
/* Ряд сортировки над витриной исполнителей. Кнопки красит .ax-chips —
   класс .ax-chip сам по себе без стилей, и чипсы выходили голыми кнопками
   браузера. Здесь только перенос по строкам вместо горизонтальной прокрутки. */
/* Одиночный чипс-метка (категория в карточке задания, теги). У класса
   .ax-chip своих стилей не было — он рассчитан на потомка .ax-chips, где
   кнопки красит родитель. Стоя отдельно, в светлой теме он получал только
   рамку: вокруг «C# / .NET» выходила квадратная коробка. Эти правила слабее
   и .ax-chips button, и .ax-book-filters .ax-chip, так что ряды кнопок
   остаются какими были. */
.ax-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; border: 1px solid rgba(111,170,255,0.18);
  background: rgba(111,170,255,0.09); color: var(--text);
  font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ax-sort-row { flex-wrap: wrap; align-items: center; overflow: visible; }
.ax-sort-row:empty { display: none; }

.ax-mst-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* nowrap оставляем — плашка не должна ломаться посередине слова, но ширину
   ограничиваем карточкой: длинное название услуги обрежется многоточием,
   а не вытолкнет карточку за экран. */
.ax-mst-tag { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px;
  border-radius: 999px; font-size: 11.5px; line-height: 1.3; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(111,170,255,0.09); border: 1px solid rgba(111,170,255,0.18); }
.ax-mst-tag-n { color: var(--gray); background: transparent; border-color: transparent; }
html[data-theme="light"] .ax-mst-tag { background: #EDF2FD; border-color: rgba(46,111,242,0.18); color: #1E3A6E; }
html[data-theme="light"] .ax-mst-tag-n { background: transparent; border-color: transparent; color: #55637A; }

.ax-mst-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: var(--ax-border); }
.ax-mst-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: var(--ice); }
.ax-mst-card:hover .ax-mst-go { text-decoration: underline; text-underline-offset: 3px; }
/* На телефоне карточка исполнителя занимала четверть экрана по высоте.
   Ужимаем аватар, отступы и подписи — содержимое то же, высота меньше.
   Блок стоит ПОСЛЕ базовых правил карточки: одинаковая специфичность решается
   порядком, и выше по файлу он бы просто не сработал. */
@media (max-width: 575px) {
  .ax-mst-grid { gap: 12px; }
  .ax-mst-card { padding: 14px; gap: 9px; }
  .ax-mst-ava { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
  .ax-mst-head { font-size: 14px; }
  .ax-mst-headline { font-size: 12.5px; -webkit-line-clamp: 1; }
  .ax-mst-stats { gap: 4px 10px; font-size: 11.5px; }
  .ax-mst-tag { font-size: 11px; padding: 3px 9px; }
}


/* скелетон карточки мастера */
.ax-mst-skel { min-height: 196px; pointer-events: none;
  background: linear-gradient(100deg, var(--surface) 40%, rgba(111,170,255,0.07) 50%, var(--surface) 60%);
  background-size: 200% 100%; animation: axShimmer 1.4s linear infinite; }

/* ---------- шаги заявки в кабинете ---------- */
.ax-mst-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ax-mst-step { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: var(--ax-mono);
  border: var(--ax-border); color: var(--gray); background: var(--surface-2); }
.ax-mst-step i { font-size: 13px; }
.ax-mst-step.ok   { color: #6fdc9c; border-color: rgba(111,220,156,0.35); background: rgba(111,220,156,0.1); }
.ax-mst-step.wait { color: #f2c265; border-color: rgba(242,194,101,0.35); background: rgba(242,194,101,0.1); }
.ax-mst-step.err  { color: #ff8296; border-color: rgba(255,130,150,0.35); background: rgba(255,130,150,0.1); }
.ax-mst-step.off  { opacity: .55; }
.ax-mst-reject { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.5; color: #ff8296; background: rgba(255,130,150,0.09);
  border: 1px solid rgba(255,130,150,0.28); }

/* ---------- категории и ставки в кабинете ---------- */
.ax-mst-skills { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ax-mst-skill { padding: 12px 14px; border-radius: 12px; border: var(--ax-border);
  background: var(--surface-2); transition: border-color .15s var(--ax-ease); }
.ax-mst-skill.on { border: var(--ax-border-hi); background: rgba(111,170,255,0.06); }
.ax-mst-skill-in { display: none; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ax-mst-skill.on .ax-mst-skill-in { display: flex; }
.ax-mst-skill-in input { flex: 1 1 120px; min-width: 0; }
.ax-mst-skill-in select { flex: 0 0 150px; }
.ax-price-guidance{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:12px 14px;border:1px solid rgba(255,185,88,.25);border-radius:12px;background:rgba(255,185,88,.08);color:var(--muted)}
.ax-price-guidance i{color:#ffbd61}.ax-skill-group{border:var(--ax-border);border-radius:14px;overflow:hidden}.ax-skill-group>summary,.ax-cat-group>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer;font-weight:750;list-style:none}.ax-skill-group>summary::-webkit-details-marker,.ax-cat-group>summary::-webkit-details-marker{display:none}.ax-skill-group>summary b{color:var(--muted);font-size:.75rem}.ax-skill-group>div{display:grid;gap:8px;padding:0 8px 8px}.ax-min-hours{display:flex;align-items:center;gap:8px;flex:0 1 190px}.ax-min-hours span{font-size:.75rem;color:var(--muted);white-space:nowrap}.ax-min-hours input{width:70px}/* Заголовки групп в боковике каталога — та же «надпись-этикетка», что и
   «ЦЕНА» ниже в этой же панели: моноширинный, разрежённый, лёгкий. Прежние
   750-й вес и .04em сбивались в плотный ком и ломались на две строки. */
.ax-cat-group{margin-top:12px}
.ax-cat-group:first-of-type{margin-top:8px}
/* Ровно та же надпись-этикетка, что над фильтрами «Заданий» (.ax-fgroup>h3):
   каталог и задания перестали расходиться в типографике боковиков. */
.ax-cat-group>summary{padding:8px 12px;color:var(--gray);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;line-height:1.5}
.ax-cat-group>summary:hover{color:var(--text)}
.ax-cat-group>summary i{font-size:11px;opacity:.7;transition:transform .22s var(--ax-ease)}.ax-cat-group[open]>summary i{transform:rotate(180deg)}.ax-admin-review{width:100%;margin-top:12px;padding-top:10px;border-top:var(--ax-border)}.ax-admin-review>summary{cursor:pointer;font-weight:700}

/* ---------- «мои работы» в кабинете ---------- */
.ax-mst-works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 767px) { .ax-mst-works { grid-template-columns: repeat(2, 1fr); } }
.ax-mst-drop { min-height: 82px; justify-content: center; text-align: left; }
.ax-mst-drop > i { font-size: 25px; }
.ax-mst-drop > span { display: flex; flex-direction: column; gap: 3px; }
.ax-mst-drop b { color: var(--white); font-size: 14px; }
.ax-mst-drop small { color: var(--gray); font-size: 12px; white-space: normal; }
.ax-mst-drop.is-dragging { border-color: var(--ice); border-style: solid;
  color: var(--white); background: rgba(111,170,255,0.14); transform: scale(1.005); }
.ax-mst-drop.is-dragging > i { color: #6fdc9c; transform: translateY(-2px); }
.ax-mst-work { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 12px;
  overflow: hidden; border: var(--ax-border); background: #10161F; }
.ax-mst-work img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-mst-work-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(12,18,28,0.72); font-size: 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ax-mst-work-del:hover { background: rgba(255,90,110,0.85); }

/* ---------- публичная страница мастера ---------- */
.ax-mst-side { position: sticky; top: var(--ax-sticky-panel-top); align-self: start; height: max-content; padding: 22px; border-radius: var(--ax-r);
  border: var(--ax-border); background: var(--surface); text-align: center; }
.ax-mst-side .ax-mst-ava { width: 84px; height: 84px; flex: none; margin: 0 auto 14px;
  border: 0; background: transparent; font-size: 30px; }
.ax-mst-name { font-family: var(--ax-display); font-size: 21px; font-weight: 800;
  color: var(--white); margin: 0 0 6px; }
.ax-mst-side .ax-mst-headline { -webkit-line-clamp: 4; margin-bottom: 12px; }
.ax-mst-facts { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px;
  padding: 14px 0; border-top: var(--ax-border); border-bottom: var(--ax-border);
  font-size: 13px; color: var(--text); text-align: left; }
.ax-mst-facts > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ax-mst-facts span { color: var(--gray); flex: none; }
.ax-mst-facts b { font-weight: 700; text-align: right; }
.ax-mst-side ul.ax-mst-facts { list-style: none; }
.ax-mst-side ul.ax-mst-facts > li { display: flex; align-items: flex-start; gap: 7px; }
.ax-mst-side ul.ax-mst-facts > li > i { flex: 0 0 auto; margin-top: 1px; color: var(--ice); }
.ax-mst-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin-top: 16px; padding-top: 16px; border-top: var(--ax-border); }
.ax-mst-jumps > a,.ax-mst-jumps > button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0;
  padding: 9px 8px; border: var(--ax-border); border-radius: 11px; color: var(--ice);
  background: rgba(111,170,255,.045); font-size: 12px; font-weight: 750; }
.ax-mst-jumps > a:only-child,.ax-mst-jumps > button:only-child { grid-column: 1 / -1; }
.ax-mst-jumps > a:hover,.ax-mst-jumps > button:hover { border-color: rgba(111,170,255,.5); background: rgba(111,170,255,.11); }
.ax-mst-jumps > button{appearance:none;font:inherit;color:inherit;cursor:pointer}
.ax-mst-fee { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 13px 15px;
  border: 1px solid rgba(111,170,255,.34); border-radius: 12px; background: rgba(111,170,255,.08); }
.ax-mst-fee > i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px; color: var(--ice); background: rgba(111,170,255,.14); }
.ax-mst-fee > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ax-mst-fee b { color: var(--white); font-size: 13.5px; }
.ax-mst-fee small { color: var(--text); font-size: 12.5px; line-height: 1.5; }
.ax-mst-listing { display:flex; gap:14px; align-items:flex-start; padding:16px; margin:14px 0;
  border:1px solid rgba(143,160,181,.24); border-radius:var(--ax-r-sm); background:rgba(255,255,255,.025); }
.ax-mst-listing > i { font-size:24px; color:var(--gray); margin-top:2px; }
.ax-mst-listing b,.ax-mst-listing small { display:block; }
.ax-mst-listing small { color:var(--txt); margin-top:4px; line-height:1.45; }
.ax-mst-listing.is-active { border-color:rgba(88,214,141,.35); background:rgba(88,214,141,.06); }
.ax-mst-listing.is-active > i { color:#58D68D; }
.ax-mst-listing.is-pending > i { color:var(--ice); }
.ax-review-images,.ax-review-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ax-review-images button,.ax-review-preview > span { width:88px; height:70px; padding:0; border:0; border-radius:10px; overflow:hidden; position:relative; background:var(--surface); }
.ax-review-images img,.ax-review-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.ax-review-preview button { position:absolute; top:3px; right:3px; width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; }
@media (max-width:575px) {
  .ax-mst-listing { padding:13px; }
  .ax-mst-listing .ax-btn,.ax-mst-listing select { width:100%; }
  .ax-review-images button,.ax-review-preview > span { width:74px; height:62px; }
}

.ax-mst-impressum { margin-top: 18px; border-radius: 12px; border: var(--ax-border);
  background: var(--surface-2); overflow: hidden; }
.ax-mst-impressum > summary { cursor: pointer; padding: 12px 14px; list-style: none;
  font-size: 13px; font-weight: 700; color: var(--ice); }
.ax-mst-impressum > summary::-webkit-details-marker { display: none; }
.ax-mst-impressum > div { padding: 0 14px 14px; font-size: 12.5px; line-height: 1.7;
  color: var(--text); text-align: left; }

.ax-mst-price-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ax-mst-price-groups{display:flex;flex-direction:column;gap:10px;margin-top:12px}.ax-public-skill-group{border:var(--ax-border);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.015)}.ax-public-skill-group>summary{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;font-weight:750}.ax-public-skill-group>summary::-webkit-details-marker{display:none}.ax-public-skill-group>summary b{color:var(--muted);font-size:.75rem}.ax-public-skill-group>summary i{color:var(--muted);transition:transform .18s ease}.ax-public-skill-group:not([open])>summary i{transform:rotate(-90deg)}.ax-public-skill-group>div{display:flex;flex-direction:column;gap:8px;padding:0 8px 8px}.ax-public-skill-group .ax-mst-price-row{margin:0}
.ax-mst-price-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 12px; border: var(--ax-border); background: var(--surface-2);
  color: inherit; text-decoration: none; transition: border-color .15s var(--ax-ease); }
.ax-mst-price-row:hover { border: var(--ax-border-hi); color: inherit; }
.ax-mst-price-row b { font-size: 14.5px; color: var(--white); }
.ax-mst-price-row .ax-price { white-space: nowrap; }
.ax-mst-note { display: block; margin-top: 3px; font-size: 12.5px; color: var(--gray); }
.ax-pprice-none { font-size: 13px; color: var(--gray); }

.ax-mst-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 767px) { .ax-mst-gal { grid-template-columns: repeat(2, 1fr); } }
.ax-mst-gal-i { padding: 0; border-radius: 12px; overflow: hidden; border: var(--ax-border);
  background: #10161F; aspect-ratio: 1 / 1; cursor: zoom-in; opacity: .9;
  transition: opacity .15s var(--ax-ease), border-color .15s var(--ax-ease); }
.ax-mst-gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-mst-gal-i:hover { opacity: 1; border: var(--ax-border-hi); }

.ax-mst-rvform { margin-top: 16px; padding: 16px; border-radius: 12px;
  border: var(--ax-border); background: var(--surface-2); }
.ax-mst-rvform textarea { resize: vertical; }

.ax-mst-payment-editor { margin-top: 18px; padding: 16px; border: var(--ax-border);
  border-radius: 12px; background: var(--surface-2); }
.ax-mst-payment-editor h3 { margin: 0 0 4px; font-size: 16px; }
.ax-mst-payment-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ax-mst-payment-checks .form-check { margin: 0; padding: 11px 12px 11px 38px;
  border: var(--ax-border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.ax-mst-payment-checks .form-check-input { margin-left: -25px; }
.ax-mst-payment-checks span { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ax-mst-payment-checks i,.ax-mst-payments i { color: var(--blue); }
.ax-mst-payments > div { display: flex; flex-wrap: wrap; gap: 9px; }
.ax-mst-payments > div > span { display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 13px; border: var(--ax-border); border-radius: 999px;
  background: var(--surface-2); font-weight: 700; }
@media (max-width: 575px) { .ax-mst-payment-checks { grid-template-columns: 1fr; } }

/* ---------- светлая тема ---------- */
html[data-theme="light"] .ax-mst-card,
html[data-theme="light"] .ax-mst-side { background: #FFFFFF; border-color: #E4E9F1; }
html[data-theme="light"] .ax-mst-card:hover { box-shadow: 0 12px 30px rgba(21,50,120,0.1); }
html[data-theme="light"] .ax-mst-skill,
html[data-theme="light"] .ax-mst-step,
html[data-theme="light"] .ax-mst-impressum,
html[data-theme="light"] .ax-mst-price-row,
html[data-theme="light"] .ax-mst-rvform,
html[data-theme="light"] .ax-mst-payment-editor,
html[data-theme="light"] .ax-mst-payments > div > span { background: #F5F8FC; border-color: #E4E9F1; }
.ax-mst-side-payments{margin:0 0 10px;padding:10px 0;border-top:var(--ax-border);border-bottom:var(--ax-border)}.ax-mst-side-payments>small{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--muted);font-weight:700}.ax-mst-side-payments>small i,.ax-mst-side-payments>div span i{color:var(--blue)}.ax-mst-side-payments>div{display:flex;flex-wrap:wrap;gap:6px}.ax-mst-side-payments>div span{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:5px 8px;border:var(--ax-border);border-radius:9px;background:rgba(255,255,255,.025);font-size:.7rem;font-weight:700;line-height:1.15}.ax-mst-side-payments>div span i{font-size:.78rem}
html[data-theme="light"] .ax-mst-ava,
html[data-theme="light"] .ax-mst-work,
html[data-theme="light"] .ax-mst-gal-i { background: #EEF3FA; border-color: #E4E9F1; }


/* ==================================================================
   BUILD 20260727-258 — терминал: удаление заявок + мастер исполнителя
   ================================================================== */

/* красная кнопка-корзина в карточках заявок терминала */
.ax-btn.ax-btn-danger { border-color: rgba(255,91,108,0.42); color: #ff8296; background: rgba(255,91,108,0.08); }
.ax-btn.ax-btn-danger:hover { border-color: rgba(255,91,108,0.7); color: #fff;
  background: linear-gradient(135deg, #b92c42, #e64f62); box-shadow: 0 8px 22px rgba(185,44,66,0.24); }
.ax-appcard .ax-btn-sm i { font-size: 13px; }

/* сводка данных в мастере регистрации — та же вёрстка, что и на карточке мастера */

html[data-theme="light"] .ax-btn.ax-btn-danger { color: #C0293F; background: #FDECEF; border-color: #F3C6CE; }
html[data-theme="light"] .ax-btn.ax-btn-danger:hover { color: #fff; }


/* ==================================================================
   BUILD 20260727-258 — кабинет: роли в один ряд, читаемая сводка
   ================================================================== */

/* «Стать продавцом» и «Стать исполнителем» стоят рядом и переносятся
   на узкой колонке; ширину и отступы задаёт сетка, а не утилиты Bootstrap */
.ax-role-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px; margin-top: 10px; }
.ax-role-cta > .ax-btn { width: 100%; margin: 0 !important; }
.ax-role-cta > .ax-role-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px;
  line-height: 1.5; color: var(--gray); }
.ax-role-cta > .d-none { display: none !important; }

/* сводка «проверьте данные»: подпись слева приглушена, значение — белым */
.ax-mst-facts { gap: 0; }
.ax-mst-facts > div { padding: 9px 0; border-bottom: 1px dashed var(--mid-gray); gap: 16px; }
.ax-mst-facts > div:last-child { border-bottom: 0; }
.ax-mst-facts b { color: var(--white); }
.ax-wiz-body .ax-mst-facts { margin: 16px 0 0; padding: 4px 14px; text-align: left;
  border: var(--ax-border); border-radius: 12px; background: var(--surface-2); }

html[data-theme="light"] .ax-mst-facts > div { border-bottom-color: #E4E9F1; }
html[data-theme="light"] .ax-wiz-body .ax-mst-facts { background: #F5F8FC; border-color: #E4E9F1; }
/* BUILD 20260817-282 — расписание и бронирования */
.ax-week-schedule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ax-week-schedule>section,.ax-book-exceptions{border:var(--ax-border);border-radius:14px;padding:12px;background:rgba(255,255,255,.015)}.ax-week-schedule header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.ax-time-row{display:flex;align-items:center;gap:8px;margin:7px 0}.ax-time-row .ax-input{min-width:0}.ax-book-exceptions .ax-time-row{display:grid;grid-template-columns:1.2fr 1fr .8fr .8fr auto}.ax-book-list{display:grid;gap:12px}.ax-book-card{border:var(--ax-border);border-radius:16px;padding:16px;background:rgba(255,255,255,.018)}.ax-book-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ax-book-card p{margin:8px 0;color:var(--ax-muted);overflow-wrap:anywhere}.ax-book-card p i{margin-right:8px;color:var(--ax-blue)}.ax-book-public{margin-bottom:16px}.ax-book-days{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.ax-book-days section{flex:0 0 132px;border:var(--ax-border);border-radius:14px;padding:10px}.ax-book-days section>b{display:block;margin-bottom:8px}.ax-book-days section>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ax-book-slot{border:var(--ax-border);border-radius:8px;background:transparent;color:inherit;padding:7px 5px;font-size:12px}.ax-book-slot:hover,.ax-book-slot.on{border-color:var(--ax-blue);background:rgba(71,143,255,.14);color:var(--ax-blue)}.ax-book-slot-skeleton{display:flex;gap:8px}.ax-book-slot-skeleton span{display:block;width:90px;height:36px;border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:axSkel 1.3s infinite}.ax-book-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}.ax-book-summary{display:flex;justify-content:space-between;gap:10px;border:var(--ax-border);border-radius:12px;padding:12px;margin:12px 0}.ax-bell-item[href]{color:inherit;text-decoration:none}
.ax-book-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.ax-book-filters .ax-chip{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;margin:0;padding:8px 13px;border:var(--ax-border);border-radius:999px;background:rgba(255,255,255,.025);color:var(--ax-muted);font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.ax-book-filters .ax-chip:hover{border-color:rgba(71,143,255,.72);background:rgba(71,143,255,.08);color:var(--ax-text);transform:translateY(-1px)}.ax-book-filters .ax-chip:focus-visible{outline:2px solid var(--ax-blue);outline-offset:2px}.ax-book-filters .ax-chip.on{border-color:var(--ax-blue);background:linear-gradient(135deg,rgba(48,111,241,.95),rgba(75,155,255,.95));color:#fff;box-shadow:0 7px 20px rgba(47,112,244,.24)}.ax-book-filters .ax-chip span{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.07);color:inherit;font-size:11px;font-weight:800}.ax-book-filters .ax-chip.on span{border-color:rgba(255,255,255,.2);background:rgba(5,20,48,.24)}.ax-book-filter-empty{padding:22px 4px}
@media(max-width:767px){.ax-week-schedule{grid-template-columns:1fr}.ax-book-exceptions .ax-time-row{grid-template-columns:1fr 1fr}.ax-book-exceptions .ax-time-row button{justify-self:end}.ax-time-row{flex-wrap:wrap}.ax-time-row input[type=time]{flex:1 1 100px}.ax-book-card header{flex-direction:column}.ax-book-dialog{width:100%;max-height:92vh;border-radius:18px 18px 0 0;position:absolute;bottom:0}.ax-book-overlay{align-items:flex-end}}

/* BUILD 20260817-282 — недельный календарь доступности */
.ax-schedule-top,.ax-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.ax-segment{display:inline-flex;padding:3px;border:var(--ax-border);border-radius:12px;background:rgba(255,255,255,.025)}.ax-segment button{border:0;background:transparent;color:var(--ax-muted);padding:8px 14px;border-radius:9px;font-weight:700}.ax-segment button.on{background:var(--ax-blue);color:#fff;box-shadow:0 5px 18px rgba(57,124,255,.25)}.ax-cal-nav{justify-content:center;margin:16px 0}.ax-cal-nav b{min-width:190px;text-align:center}.ax-cal-wrap{overflow:auto;border:var(--ax-border);border-radius:16px;background:var(--surface);max-height:720px;scrollbar-color:rgba(148,163,184,.4) transparent}.ax-week-cal{display:grid;grid-template-columns:62px repeat(7,minmax(112px,1fr));grid-template-rows:58px calc(var(--cal-hours)*60px);min-width:850px;position:relative;background:var(--surface);color:var(--ax-text)}.ax-cal-corner,.ax-cal-head{position:sticky;top:0;z-index:5;background:var(--surface-2);border-bottom:1px solid var(--ax-border-c)}.ax-cal-head{display:flex;align-items:center;justify-content:center;gap:7px;border-left:1px solid var(--ax-border-c)}.ax-cal-head span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;color:var(--ax-muted)}.ax-cal-head.today span{background:var(--ax-blue);color:#fff}.ax-cal-times{position:relative;border-right:1px solid var(--ax-border-c);background:var(--surface)}.ax-cal-times span{position:absolute;right:10px;transform:translateY(-50%);font-size:11px;color:var(--ax-muted)}.ax-cal-times span:first-child{transform:none;top:4px!important}.ax-cal-day{position:relative;border-right:1px solid var(--ax-border-c);min-height:1440px;background:var(--surface);cursor:crosshair}.ax-cal-day>i{display:block;height:60px;border-bottom:1px dashed rgba(148,163,184,.14)}.ax-cal-block{position:absolute;left:5px;right:5px;z-index:2;border:1px solid transparent;border-radius:9px;padding:6px 7px;text-align:left;overflow:hidden;color:#ecfffb;background:rgba(32,170,139,.78);box-shadow:0 4px 12px rgba(0,0,0,.12);touch-action:none;cursor:grab}.ax-cal-block.dragging{cursor:grabbing;z-index:8;filter:brightness(1.12);box-shadow:0 10px 28px rgba(0,0,0,.35)}.ax-cal-block b,.ax-cal-block span{display:block;font-size:11px;line-height:1.3;pointer-events:none}.ax-cal-block.pending{background:rgba(232,165,62,.82);color:#fff9e8;cursor:pointer}.ax-cal-block.booked{background:rgba(64,124,230,.82);color:#fff;cursor:pointer}.ax-cal-block:hover{filter:brightness(1.08)}.ax-cal-resize{position:absolute;left:3px;right:3px;height:8px;z-index:3;cursor:ns-resize}.ax-cal-resize.top{top:0}.ax-cal-resize.bottom{bottom:0}.ax-cal-resize:after{content:"";display:block;width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.75);margin:3px auto}.ax-cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--ax-muted)}.ax-cal-legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:#20aa8b}.ax-cal-legend .pending:before{background:#e8a53e}.ax-cal-legend .booked:before{background:#407ce6}
@media(max-width:767px){.ax-schedule-top{align-items:stretch}.ax-segment{display:flex}.ax-segment button{flex:1}.ax-cal-nav{display:grid;grid-template-columns:auto 1fr auto}.ax-cal-nav [data-bktoday]{grid-row:2;grid-column:1/-1}.ax-week-cal{grid-template-columns:54px repeat(7,116px);min-width:866px}.ax-cal-wrap{max-height:68vh}.ax-cal-block{left:3px;right:3px;padding:8px 5px}.ax-cal-resize{height:12px}}

/* Booking modal must be anchored to the viewport, not to a transformed page
   ancestor. The old absolute mobile card could drift outside the screen. */
.ax-book-overlay{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:12px;background:rgba(3,9,18,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ax-book-dialog{position:relative;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.ax-book-dialog>.ax-e2ee-x{position:absolute;top:18px;right:18px;z-index:3;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(111,170,255,.3);border-radius:50%;outline:0;background:rgba(7,17,29,.72);color:var(--white);font-size:16px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.22);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.ax-book-dialog>.ax-e2ee-x:hover{border-color:rgba(111,170,255,.68);background:rgba(71,143,255,.2);transform:translateY(-1px)}
.ax-book-dialog>.ax-e2ee-x:focus-visible{border-color:var(--ax-blue);box-shadow:0 0 0 3px rgba(71,143,255,.2)}
.ax-book-dialog>.ax-e2ee-x>i{display:block;line-height:1}
.ax-book-dialog .ax-input.is-invalid{border-color:#ff6174!important;background-color:rgba(177,35,54,.08)!important;box-shadow:0 0 0 3px rgba(255,79,101,.12)!important}
.ax-book-field-error{display:block;min-height:0;margin:5px 2px 0;color:#ff8291;font-size:12px;font-weight:650;line-height:1.35}.ax-book-field-error:empty{display:none}
.ax-book-form-error{display:flex;align-items:flex-start;gap:9px;margin:14px 0 2px;padding:11px 13px;border:1px solid rgba(255,82,104,.4);border-radius:11px;background:rgba(177,35,54,.12);color:#ffadb7;font-size:13px;font-weight:700}.ax-book-form-error[hidden]{display:none}.ax-book-form-error i{margin-top:1px;color:#ff6174}
.ax-cal-block.invalid{z-index:4;border-color:rgba(255,86,103,.38);border-radius:0;background:rgba(176,35,54,.28);color:rgba(255,214,219,.9);cursor:not-allowed;box-shadow:none}
.ax-cal-block.invalid:hover{filter:none}
@media(max-width:767px){.ax-book-overlay{align-items:end;padding:0}.ax-book-dialog{position:relative;bottom:auto;width:100%;max-height:92dvh;border-radius:18px 18px 0 0}}
.ax-mst-presence-head{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:18px;padding:4px 2px;color:var(--ax-text)}
.ax-mst-presence-head:first-child{margin-top:0}.ax-mst-presence-head>span{width:9px;height:9px;border-radius:50%;background:#64748b;box-shadow:0 0 0 4px rgba(100,116,139,.12)}
.ax-mst-presence-head.online>span{background:#28c997;box-shadow:0 0 0 4px rgba(40,201,151,.13),0 0 14px rgba(40,201,151,.35)}
.ax-mst-presence-head small{color:var(--ax-muted);font-weight:700}
.ax-sort-divider{align-self:stretch;width:1px;min-height:28px;margin:0 3px;background:var(--ax-border-color,rgba(148,163,184,.18))}.ax-online-dot{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#28c997;box-shadow:0 0 9px rgba(40,201,151,.5)}
/* Панель была залита фиксированным тёмным rgba(17,29,44,.72): на светлой
   теме получалась чёрная плашка посреди белой страницы. Токены дают тот
   же вид в тёмной и правильный в светлой. */
.ax-master-filters{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin:0 0 22px;padding:16px;border:var(--ax-border);border-radius:16px;background:var(--surface-2)}.ax-master-filters[hidden]{display:none}.ax-master-filters label{display:block;margin-bottom:6px;color:var(--ax-muted);font-size:12px;font-weight:700}.ax-master-filter-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}@media(max-width:767px){.ax-master-filters{grid-template-columns:1fr 1fr}}@media(max-width:480px){.ax-master-filters{grid-template-columns:1fr}.ax-master-filter-actions{justify-content:stretch}.ax-master-filter-actions .ax-btn{flex:1}}
.ax-cal-day{min-height:calc(var(--cal-hours)*60px)}
.ax-cal-day:hover{background:rgba(71,143,255,.055)}.ax-cal-day:hover>i{border-bottom-color:rgba(111,170,255,.22)}.ax-cal-remove{position:absolute;right:4px;top:4px;z-index:5;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:rgba(4,10,18,.55);color:#fff;font-style:normal;font-size:13px;line-height:1;opacity:0;cursor:pointer}.ax-cal-block:hover .ax-cal-remove,.ax-cal-block:focus .ax-cal-remove{opacity:1}.ax-cal-remove:hover{background:#e55368}.ax-public-cal .ax-cal-day:hover{background:var(--surface)}.ax-public-cal .ax-cal-day:hover>i{border-bottom-color:rgba(148,163,184,.14)}
.ax-cal-help{margin:7px 0 0;font-size:11px;line-height:1.45;color:var(--ax-muted);opacity:.82}
.ax-book-public-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.ax-book-public-head h2{margin-bottom:12px}.ax-public-cal{max-height:620px}.ax-public-cal .ax-cal-day{cursor:default}.ax-public-cal .ax-cal-block{cursor:pointer;touch-action:auto}.ax-fixed-public{display:grid;gap:10px}.ax-fixed-public>section{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px;align-items:start;border:var(--ax-border);border-radius:13px;padding:12px;background:rgba(255,255,255,.015)}.ax-fixed-public>section>b{padding:9px 4px}.ax-fixed-public>section>div{display:flex;gap:8px;flex-wrap:wrap}.ax-fixed-public button{display:flex;align-items:center;gap:10px;border:var(--ax-border);border-radius:10px;background:rgba(32,170,139,.12);color:inherit;padding:9px 12px}.ax-fixed-public button:hover{border-color:#20aa8b;background:rgba(32,170,139,.2)}.ax-fixed-public button span{color:var(--ax-muted);font-size:12px}
.ax-public-cal .ax-cal-block.reserved{z-index:3;background:rgba(232,165,62,.84);border-color:rgba(255,204,99,.5);color:#fff9e8;cursor:not-allowed;box-shadow:0 5px 16px rgba(101,65,8,.24)}.ax-public-cal .ax-cal-block.reserved b{max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;font-size:clamp(9px,1vw,11px)}.ax-public-cal .ax-cal-block.reserved:hover{filter:none}.ax-book-window-choice{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:12px 14px;border:1px solid rgba(32,170,139,.42);border-radius:12px;background:rgba(32,170,139,.1)}.ax-book-window-choice i{color:#36c7a7;font-size:18px}
@media(max-width:767px){.ax-fixed-public>section{grid-template-columns:1fr;gap:4px}.ax-fixed-public>section>b{padding:2px}.ax-public-cal{max-height:62vh}}

/* BUILD 20260818-330 — задания и Arktropix Plus */

.ax-plus-status{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0 0 14px;border:var(--ax-border);border-radius:14px;background:rgba(255,255,255,.025)}
.ax-plus-status>i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;font-size:18px}
.ax-plus-status>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ax-plus-status b{font-size:13px;letter-spacing:.07em}
.ax-plus-status strong{font-size:18px;color:#fff}
.ax-plus-status small{color:var(--ax-muted)}
.ax-plus-status.is-active{border-color:rgba(74,145,255,.62);background:linear-gradient(135deg,rgba(38,102,220,.22),rgba(17,206,169,.09));box-shadow:0 0 24px rgba(55,128,255,.12)}
.ax-plus-status.is-active>i{color:#fff;background:linear-gradient(135deg,#3478f6,#59a6ff);box-shadow:0 8px 18px rgba(52,120,246,.3)}
.ax-plus-status.is-off>i{color:var(--ax-muted);background:rgba(255,255,255,.05)}
.ax-plus-table-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 7px;border:1px solid rgba(79,148,255,.55);border-radius:999px;color:#75aaff;background:rgba(52,120,246,.12);font-size:10px;font-weight:800;letter-spacing:.06em;vertical-align:middle}
.ax-service-browser{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}.ax-service-side{position:sticky;top:var(--ax-sticky-panel-top);align-self:start;height:max-content;padding:12px;border:var(--ax-border);border-radius:17px;background:var(--surface);backdrop-filter:blur(15px)}.ax-service-search{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:0 11px;border:var(--ax-border);border-radius:12px;background:rgba(4,10,18,.32);color:var(--ax-muted)}.ax-service-search:focus-within{border-color:rgba(71,143,255,.62);box-shadow:0 0 0 3px rgba(71,143,255,.08)}.ax-service-search input{width:100%;min-width:0;height:42px;border:0;outline:0;background:transparent;color:var(--text)}.ax-service-search input::placeholder{color:var(--ax-muted)}.ax-service-side nav{display:grid;gap:3px;max-height:calc(100vh - 180px);overflow:auto}.ax-service-side nav button{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--ax-muted);text-align:left;cursor:pointer}.ax-service-side nav button i{width:18px;color:var(--ice);text-align:center}.ax-service-side nav button:hover,.ax-service-side nav button.on{background:rgba(71,143,255,.11);color:var(--text)}.ax-service-results{min-width:0}.ax-service-results>.ax-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* #mastersView тоже без вертикальных отступов секции: без него вкладка
   «Смотреть мастеров» открывалась с провалом в 80px под пилюлями. */
body[data-page="services"] #serviceCatalogView,body[data-page="services"] #mastersView,body[data-page="services"] #taskView{padding:0}body[data-page="services"] .ax-work-tabs{margin-bottom:14px}body[data-page="services"] .ax-srv-byax{align-items:center;margin:0 0 18px;padding:11px 14px;gap:11px;box-shadow:none}body[data-page="services"] .ax-srv-byax>i{font-size:20px;margin:0}body[data-page="services"] .ax-srv-byax>div{min-width:0;flex:1}body[data-page="services"] .ax-srv-byax b{font-size:14px;margin:0 0 1px}body[data-page="services"] .ax-srv-byax p{font-size:12px;line-height:1.35;max-width:none}body[data-page="services"] .ax-srv-byax .ax-srv-cta{flex:none;margin:0;padding:9px 13px;font-size:12px}
@media(max-width:1199px){.ax-service-results>.ax-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:991px){.ax-service-browser{grid-template-columns:minmax(0,1fr);gap:18px}.ax-service-side{position:static}.ax-service-side nav{display:flex;max-height:none;overflow:auto;padding-bottom:2px;scroll-behavior:smooth}.ax-service-side nav button{width:auto;min-width:max-content}.ax-service-results>.ax-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:767px){.ax-service-results>.ax-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-page="services"] .ax-srv-byax p{display:none}body[data-page="services"] .ax-srv-byax .ax-srv-cta span{display:none}body[data-page="services"] .ax-srv-byax .ax-srv-cta i{margin:0!important}}@media(max-width:480px){.ax-service-results>.ax-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.ax-work-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 28px}.ax-work-path{display:flex;align-items:center;gap:18px;padding:22px;border:var(--ax-border);border-radius:18px;background:linear-gradient(145deg,rgba(31,47,70,.76),rgba(12,21,34,.9));color:inherit;text-decoration:none;transition:.18s ease}.ax-work-path:hover{transform:translateY(-2px);border-color:rgba(71,143,255,.65);color:inherit;box-shadow:0 14px 36px rgba(0,0,0,.2)}.ax-work-path>i{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:15px;background:rgba(71,143,255,.14);color:var(--blue);font-size:24px}.ax-work-path h2{margin:0 0 5px;font-size:20px}.ax-work-path p{margin:0 0 9px;color:var(--ax-muted)}.ax-work-path b{color:var(--blue);font-size:13px}
.ax-work-tabs{display:flex;gap:10px;margin:0 0 28px;padding:6px;border:var(--ax-border);border-radius:999px;background:var(--surface);width:max-content;max-width:100%}.ax-work-tab{border:1px solid transparent;background:transparent;color:var(--ax-muted);border-radius:999px;padding:13px 20px;font:700 15px/1.2 inherit;display:flex;align-items:center;gap:9px;cursor:pointer;transition:.18s ease}.ax-work-tab:hover{color:var(--text);background:rgba(72,139,255,.07)}.ax-work-tab.on{color:#fff;background:linear-gradient(135deg,#3076ef,#55a5ff);box-shadow:0 9px 24px rgba(48,118,239,.25)}#serviceCatalogView[hidden],#taskView[hidden]{display:none!important}body[data-page="services"] #taskView{margin-top:4px}
.ax-tasks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}.ax-tasks-head h1{margin:0 0 5px}.ax-task-list{display:grid;gap:12px}.ax-task-card{display:block;padding:18px;border:var(--ax-border);border-radius:16px;background:var(--surface);color:inherit;text-decoration:none}.ax-task-card:hover{border-color:rgba(71,143,255,.62);color:inherit}.ax-task-card-top,.ax-task-card-meta,.ax-task-detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ax-task-card-top{justify-content:space-between}.ax-task-card h2{margin:13px 0 8px;font-size:20px}.ax-task-card p{margin:0 0 13px;color:var(--ax-muted)}.ax-task-card-meta,.ax-task-detail-meta{color:var(--ax-muted);font-size:13px}.ax-task-card-meta span,.ax-task-detail-meta span{display:inline-flex;align-items:center;gap:6px}.ax-task-status{padding:5px 9px;border-radius:999px;background:rgba(38,201,151,.12);color:#42d5a9;font-size:11px;font-weight:800}.ax-task-status.closed,.ax-task-status.cancelled{background:rgba(148,163,184,.1);color:var(--ax-muted)}.ax-task-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.ax-task-detail,.ax-task-side>div,.ax-task-responses,.ax-task-form{padding:20px;border:var(--ax-border);border-radius:18px;background:var(--surface)}.ax-task-detail h1{margin:15px 0;font-size:clamp(26px,4vw,42px)}.ax-task-description{margin:22px 0;line-height:1.75}.ax-task-files{display:flex;gap:8px;flex-wrap:wrap}.ax-task-files a{padding:8px 11px;border:var(--ax-border);border-radius:10px}.ax-task-side{display:grid;align-content:start;gap:12px}.ax-task-paywall{text-align:center}.ax-task-paywall>i{font-size:35px;color:var(--blue)}.ax-task-customer>a{display:flex;align-items:center;gap:10px;margin:12px 0}.ax-task-responses{grid-column:1/-1}.ax-task-responses article{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,2fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ax-border-c)}.ax-task-responses article>div{display:flex;align-items:center;gap:9px}.ax-task-back{display:inline-flex;justify-self:start;grid-column:1/-1;margin-bottom:14px}.ax-task-form{max-width:850px;margin:auto}.ax-task-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.ax-task-form-grid .wide{grid-column:1/-1}.ax-task-form label{display:block;margin-bottom:6px;color:var(--ax-muted);font-size:12px;font-weight:700}.ax-task-form-error{margin:12px 0;color:#ff8291;font-weight:700}.ax-task-empty{padding:50px 20px;text-align:center;color:var(--ax-muted)}
.ax-plus-hero{text-align:center;padding:58px 0 34px}.ax-plus-hero h1{font-size:clamp(38px,7vw,76px);margin-bottom:14px}.ax-plus-price{font-size:24px;font-weight:850}.ax-plus-price small{display:block;color:var(--ax-muted);font-size:14px;font-weight:500}.ax-plus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}.ax-plus-card,.ax-plus-economy{padding:22px;border:var(--ax-border);border-radius:18px;background:var(--surface)}.ax-plus-card i{font-size:27px;color:var(--blue)}.ax-plus-card h2{margin:13px 0 7px;font-size:18px}.ax-plus-card p,.ax-plus-economy p{margin:0;color:var(--ax-muted)}.ax-plus-economy{margin:0 auto 55px;max-width:850px;text-align:center}.ax-plus-mini{margin:30px 0;padding:28px;border:1px solid rgba(71,143,255,.35);border-radius:20px;background:radial-gradient(circle at 80% 0,rgba(71,143,255,.2),transparent 45%),var(--surface)}.ax-plus-mini-in{display:flex;align-items:center;justify-content:space-between;gap:24px}.ax-plus-mini h2{margin:0 0 7px}.ax-plus-mini p{margin:0;color:var(--ax-muted)}
@media(max-width:991px){.ax-task-layout{grid-template-columns:1fr}.ax-plus-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.ax-work-paths,.ax-plus-grid{grid-template-columns:1fr}.ax-tasks-head,.ax-plus-mini-in{align-items:stretch;flex-direction:column}.ax-task-form-grid{grid-template-columns:1fr}.ax-task-form-grid .wide{grid-column:auto}.ax-task-responses article{grid-template-columns:1fr}.ax-work-path{padding:17px}.ax-plus-mini{padding:20px}}

/* фактические классы контроллера заданий */
.ax-task-grid{display:grid;gap:12px}.ax-task-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ax-muted);font-size:13px}.ax-task-meta span{display:inline-flex;align-items:center;gap:6px}.ax-task-meta time{margin-left:auto}.ax-task-editor{max-width:900px;margin:auto;padding:20px;border:var(--ax-border);border-radius:18px;background:var(--surface)}.ax-task-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.ax-task-editor .ax-task-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;padding:0;border:0;background:transparent}.ax-task-editor .wide{grid-column:1/-1}.ax-task-editor label,.ax-task-proposal label{display:grid;gap:6px;color:var(--ax-muted);font-size:12px;font-weight:700}.ax-task-proposal{display:grid;gap:12px}.ax-plus-kicker{color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.14em}.ax-plus-grid>article{padding:22px;border:var(--ax-border);border-radius:18px;background:var(--surface)}.ax-plus-grid>article i{font-size:27px;color:var(--blue)}.ax-plus-grid>article h2{margin:13px 0 7px;font-size:18px}.ax-plus-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.ax-task-contacts{display:grid;gap:7px;margin:10px 0}.ax-task-contacts a{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere;color:var(--ice)}
@media(max-width:767px){.ax-task-editor .ax-task-form{grid-template-columns:1fr}.ax-task-editor .wide{grid-column:auto}.ax-task-meta time{margin-left:0}}
@media(max-width:767px){.ax-work-tabs{width:100%}.ax-work-tab{flex:1;justify-content:center;padding:12px 10px}}
/* Три длинные подписи по 15px в 390px не помещались: каждая ломалась на две
   строки, а третья вкладка уезжала за край. Прячем иконки и уменьшаем текст —
   все три вкладки видны целиком и остаются нажимаемыми (44px по высоте). */
@media(max-width:575px){
  .ax-work-tabs{gap:4px;padding:4px}
  .ax-work-tab{min-height:44px;padding:8px 6px;font-size:12px;line-height:1.2;gap:0;text-align:center}
  .ax-work-tab>i{display:none}
}

/* ===== ЗАДАНИЯ: каталог с боковой панелью фильтров (BUILD 20260818-336) =====
   Раньше фильтры стояли одной строкой над списком: сегменты «Все/Удалённо/Очно/
   Гибридно» не помещались в свою колонку грида и последняя кнопка обрезалась,
   а системные <select> выпадали чужим меню. Панель переехала влево, кнопки
   режима стали списком во всю ширину, а списки — компонентом .ax-cselect. */
.ax-task-browser{position:relative;display:grid;grid-template-columns:288px minmax(0,1fr);gap:32px;align-items:start}
.ax-task-aside{position:sticky;top:var(--ax-sticky-panel-top);align-self:start;height:max-content;display:grid;gap:16px;padding:16px;border:var(--ax-border);border-radius:var(--ax-r);background:var(--surface);max-height:calc(100vh - var(--ax-sticky-panel-top) - 16px);overflow:auto;overscroll-behavior:contain}
.ax-task-aside.is-viewport-fixed{position:fixed;left:var(--ax-task-aside-left);top:var(--ax-sticky-panel-top);z-index:20;width:288px}
.ax-task-aside.is-footer-bound{position:absolute;left:0;top:var(--ax-task-footer-top);bottom:auto;z-index:20;width:288px}
.ax-task-browser>.ax-task-main{grid-column:2;min-width:0}
.ax-task-aside-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ax-task-aside-head b{font-size:14px}
.ax-task-aside-head .ax-fcount{padding:2px 8px;border-radius:999px;background:rgba(111,170,255,.15);color:var(--ice);font-size:11px;font-weight:800}
.ax-freset{border:0;background:transparent;padding:6px;border-radius:9px;color:var(--gray);font-size:12.5px;font-weight:700;cursor:pointer}
.ax-freset:hover{color:var(--ice)}
.ax-freset[disabled]{opacity:.4;cursor:default}
.ax-fgroup{display:grid;gap:8px}
.ax-fgroup>h3{margin:0;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.ax-fmode{display:grid;gap:6px}
.ax-fmode button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:9px 12px;border:var(--ax-border);border-radius:12px;background:transparent;color:var(--text);font-size:13.5px;font-weight:650;text-align:left;cursor:pointer;transition:background .18s var(--ax-ease),border-color .18s var(--ax-ease),color .18s var(--ax-ease)}
.ax-fmode button>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-fmode button>i{flex:none;font-size:15px;opacity:.85}
.ax-fmode button:hover{background:rgba(111,170,255,.08)}
.ax-fmode button.on{border:var(--ax-border-hi);background:rgba(111,170,255,.13);color:var(--ice)}
.ax-fsearch{position:relative}
.ax-fsearch>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--gray);pointer-events:none}
.ax-fsearch>input{width:100%;min-height:44px;padding:10px 12px 10px 34px;border:var(--ax-border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:13.5px}
.ax-frow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ax-fnum{position:relative}
.ax-fnum>input{width:100%;min-height:44px;padding:10px 26px 10px 12px;border:var(--ax-border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:13.5px}
.ax-fnum>span{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--gray);font-size:12.5px;pointer-events:none}
.ax-fdate{width:100%;min-height:44px;padding:10px 12px;border:var(--ax-border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:13.5px}
.ax-fsearch>input::placeholder,.ax-fnum>input::placeholder{color:var(--gray)}
.ax-task-aside input:focus-visible,.ax-fmode button:focus-visible,.ax-freset:focus-visible,.ax-cselect-btn:focus-visible,.ax-task-filterbtn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* ---- выпадающий список в стиле платформы (замена системного <select>) ---- */
.ax-cselect{position:relative}
.ax-cselect-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 12px;border:var(--ax-border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .18s var(--ax-ease)}
.ax-cselect-btn>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-cselect-btn.is-empty>span{color:var(--gray);font-weight:500}
.ax-cselect-btn>i{flex:none;font-size:11px;color:var(--gray);transition:transform .18s var(--ax-ease)}
.ax-cselect-btn[disabled]{opacity:.45;cursor:not-allowed}
.ax-cselect.open .ax-cselect-btn{border:var(--ax-border-hi)}
.ax-cselect.open .ax-cselect-btn>i{transform:rotate(180deg)}
.ax-cselect-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;display:grid;gap:7px;padding:8px;border:var(--ax-border);border-radius:14px;background:var(--surface-2);box-shadow:var(--ax-shadow)}
.ax-cselect-pop[hidden]{display:none}
.ax-cselect.up .ax-cselect-pop{top:auto;bottom:calc(100% + 6px)}
.ax-cselect-find{position:relative}
.ax-cselect-find>i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--gray);pointer-events:none}
.ax-cselect-find>input{width:100%;min-height:38px;padding:8px 10px 8px 30px;border:var(--ax-border);border-radius:10px;background:var(--surface);color:var(--text);font-size:13px}
.ax-cselect-find>input:focus-visible{outline:2px solid var(--ice);outline-offset:1px}
.ax-cselect-list{max-height:264px;overflow:auto;overscroll-behavior:contain;margin:0;padding:0;list-style:none;display:grid;gap:2px;scrollbar-width:thin}
.ax-cselect-list li{margin:0}
.ax-cselect-list li[role=option]{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;border-radius:9px;color:var(--text);font-size:13.5px;cursor:pointer}
.ax-cselect-list li[role=option]:hover,.ax-cselect-list li[role=option].active{background:rgba(111,170,255,.12);color:var(--ice)}
.ax-cselect-list li[role=option][aria-selected=true]{font-weight:800;color:var(--ice)}
.ax-cselect-list li[role=option][aria-selected=true]:after{content:"\F26E";font-family:"bootstrap-icons";margin-left:auto;font-size:12px}
.ax-cselect-list li[role=presentation]{padding:2px 0;color:var(--gray);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ax-cselect-list li[role=presentation]>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px;border:0;border-radius:9px;background:rgba(111,170,255,.07);color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-align:left}
.ax-cselect-list li[role=presentation]>button:hover{background:rgba(111,170,255,.13);color:var(--ice)}
.ax-cselect-list li[role=presentation][data-open="1"]>button i{transform:rotate(180deg)}
.ax-cselect-list li[role=option][data-cgroup]{padding-left:18px}
.ax-cselect-empty{margin:0;padding:12px 10px;color:var(--gray);font-size:13px;text-align:center}
.ax-cselect-empty[hidden]{display:none}

/* ---- правая колонка: шапка, счётчик, активные фильтры, список ---- */
.ax-task-main{display:grid;gap:16px;min-width:0}
.ax-task-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ax-task-count{color:var(--gray);font-size:13.5px}
.ax-task-count b{color:var(--text)}
.ax-task-chips{display:flex;gap:7px;flex-wrap:wrap}
.ax-task-chips button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 10px;border:var(--ax-border);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:12.5px;cursor:pointer}
.ax-task-chips button:hover{border:var(--ax-border-hi);color:var(--ice)}
.ax-task-chips button i{font-size:11px;opacity:.75}
.ax-task-filterbtn{display:none;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;border:var(--ax-border);border-radius:14px;background:var(--surface);color:var(--text);font-weight:700;cursor:pointer}
/* Открытая панель — активное состояние кнопки: без этого после нажатия было
   непонятно, она развернула фильтры или просто ничего не сделала. */
.ax-task-filterbtn[aria-expanded="true"]{border-color:rgba(111,170,255,.55);background:rgba(111,170,255,.10);color:var(--ice)}
.ax-task-filterbtn>.bi-chevron-down{margin-left:auto;font-size:12px;transition:transform .2s var(--ax-ease)}
.ax-task-filterbtn[aria-expanded="true"]>.bi-chevron-down{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.ax-task-filterbtn>.bi-chevron-down{transition:none}}
.ax-task-skel{display:grid;gap:12px}
.ax-task-skel>i{display:block;height:132px;border-radius:16px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%);background-size:400% 100%;animation:axTaskSkel 1.3s ease infinite}
@keyframes axTaskSkel{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.ax-task-skel>i{animation:none}.ax-fmode button,.ax-cselect-btn,.ax-cselect-btn>i{transition:none}}

@media(max-width:991px){
  .ax-task-browser{grid-template-columns:1fr}
  /* Кнопка теперь соседка панели, а не её потомок: раскрытая панель
     вставлялась над .ax-task-main и уносила кнопку вниз, под все фильтры.
     Порядком закрепляем кнопку сверху, панель — сразу под ней. */
  .ax-task-filterbtn{display:flex;order:-2}
  .ax-task-aside{position:static;max-height:none;order:-1}
  .ax-task-aside.is-viewport-fixed,.ax-task-aside.is-footer-bound{position:static;width:auto}
  .ax-task-aside.is-collapsed{display:none}
  .ax-task-browser>.ax-task-main{grid-column:auto;order:0}
}
@media(max-width:575px){.ax-frow{grid-template-columns:1fr}}

/* Вводная плашка вкладки «Задания» повторяет .ax-srv-byax соседней вкладки:
   заголовок здесь h2, потому что h1 страницы («Услуги») стоит выше. */
.ax-task-intro{align-items:center}
.ax-task-intro h2{margin:0 0 4px;font-size:15.5px;font-weight:800}
.ax-task-intro p{margin:0;font-size:13.5px;line-height:1.55;max-width:720px}
.ax-task-cta{flex:none;white-space:nowrap}
/* Во вкладках «Услуг» плашка «Задания» должна быть ровно того же роста, что
   соседние: её первичная кнопка выше призрачной (46px против 38px), и весь
   блок вырастал на 8px. Уравниваем только внутри страницы услуг — на
   отдельной tasks.html банер остаётся крупным. */
body[data-page="services"] .ax-task-intro h2{font-size:14px;line-height:1.5;margin:0 0 1px}
/* Прозрачная рамка — не косметика: у призрачной кнопки соседних вкладок она
   есть, и без неё первичная кнопка ниже ровно на эти 2px. */
body[data-page="services"] .ax-task-intro .ax-task-cta{padding:9px 13px;font-size:12px;border:1px solid transparent}
@media(max-width:767px){.ax-task-intro{align-items:flex-start;flex-direction:column;gap:12px}.ax-task-cta{width:100%;justify-content:center}}

/* Заказчик в карточке задания — виден только исполнителям с Arktropix Plus. */
.ax-task-author{display:inline-flex;align-items:center;gap:7px;min-width:0}
.ax-task-author b{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.ax-ava-xs{flex:none;width:22px;height:22px;min-width:22px}
.ax-ava-xs.ax-ava-letter{font-size:10px}
@media(max-width:575px){.ax-task-author b{max-width:130px}}

/* Системные стрелки у input[type=number] рисует браузер, и в тёмной теме они
   выглядят чужой серой кнопкой. Убираем: суммы вводят с клавиатуры. */
.ax-fnum>input::-webkit-outer-spin-button,.ax-fnum>input::-webkit-inner-spin-button,
.ax-task-form input[type=number]::-webkit-outer-spin-button,
.ax-task-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ax-fnum>input,.ax-task-form input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* Списки в форме публикации: те же, что в фильтрах, но во всю ширину поля. */
.ax-task-form .ax-cselect{width:100%}
.ax-task-form .ax-cselect-btn{font-weight:500}
.ax-task-form label{position:relative}
.ax-task-editor .ax-cselect-pop{z-index:70}
.ax-master-country-field .ax-cselect{width:100%}.ax-master-country-field .ax-cselect-btn{min-height:48px;padding:12px 14px;border-radius:12px;font-weight:500}.ax-master-country-field .ax-cselect-pop{z-index:70}

/* Поле файлов: у .form-control кнопку «Обзор…» рисует браузер поверх падинга,
   и она вылезала за скруглённую рамку. Стилизуем ::file-selector-button сами. */
.ax-filefield{display:block;width:100%;min-height:46px;padding:7px 12px;border:var(--ax-border);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:13.5px;line-height:30px}
.ax-filefield::file-selector-button{margin:0 12px 0 0;padding:6px 14px;border:var(--ax-border);border-radius:9px;background:var(--surface);color:var(--ice);font:inherit;font-size:13px;font-weight:700;line-height:1.2;cursor:pointer;transition:background .18s var(--ax-ease)}
.ax-filefield::file-selector-button:hover{background:rgba(111,170,255,.12)}
.ax-filefield:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* Поле, на которое ругнулся сервер или локальная проверка. */
.ax-task-form label.is-invalid{color:#ff8291}
.ax-task-form label.is-invalid .ax-input,.ax-task-form label.is-invalid .ax-cselect-btn,.ax-task-form label.is-invalid .ax-filefield{border:1px solid rgba(255,130,145,.75)}
.ax-task-form-error.on{display:flex;align-items:flex-start;gap:8px}
.ax-task-form-error.on:before{content:"\f33a";font-family:bootstrap-icons;flex:none;font-size:15px;line-height:1.4}

/* Полоса прокрутки в списках — тонкая, в цветах платформы, а не системная. */
.ax-cselect-list{scrollbar-color:rgba(148,163,184,.4) transparent}
.ax-cselect-list::-webkit-scrollbar{width:8px}
.ax-cselect-list::-webkit-scrollbar-track{background:transparent}
.ax-cselect-list::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background-color:rgba(148,163,184,.32);background-clip:padding-box}
.ax-cselect-list::-webkit-scrollbar-thumb:hover{background-color:rgba(148,163,184,.55);background-clip:padding-box}
.ax-task-aside{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.4) transparent}
.ax-task-aside::-webkit-scrollbar{width:8px}
.ax-task-aside::-webkit-scrollbar-track{background:transparent}
.ax-task-aside::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background-color:rgba(148,163,184,.32);background-clip:padding-box}

/* Токены, на которые ссылались правила, но которых не существовало: 38 обращений
   резолвились в пустоту, и в светлой теме это было особенно заметно. Объявляем их
   псевдонимами реальных токенов — те уже переключаются вместе с темой. */
:root{--ax-muted:var(--gray);--ax-blue:var(--ice);--ax-text:var(--text);--ax-border-c:rgba(148,163,184,.15)}
html[data-theme="light"]{--ax-border-c:rgba(16,24,40,.09)}

/* Задание занято: вместо формы отклика — короткая заметка, чтобы пустое место
   в боковой колонке не читалось как поломка. */
.ax-task-taken{display:flex;align-items:flex-start;gap:9px;padding:14px 16px;border:var(--ax-border);border-radius:14px;background:var(--surface);color:var(--gray);font-size:13.5px;line-height:1.5}
.ax-task-taken>i{flex:none;font-size:15px;color:var(--ice);line-height:1.4}

/* Свой отклик исполнителя в боковой колонке задания. */
.ax-task-mine{display:grid;gap:12px}
.ax-task-mine h2{margin:0;font-size:16px}
.ax-task-mine-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ax-task-mine-row b{font-size:15px}
/* Статусы отклика: принятый читается как «в работе», отозванный — приглушён. */
.ax-task-status.accepted{background:rgba(38,201,151,.12);color:#42d5a9}
.ax-task-status.sent{background:rgba(111,170,255,.12);color:var(--ice)}
.ax-task-status.declined,.ax-task-status.withdrawn{background:rgba(148,163,184,.12);color:var(--gray)}

/* Статус «на проверке»: работа сдана, решение за заказчиком. */
.ax-task-status.review{background:rgba(232,165,62,.14);color:#e8a53e}
.ax-task-mine-note{margin:0;color:var(--gray);font-size:13px;line-height:1.5}
.ax-task-owner-actions{display:grid;gap:8px}
.ax-task-owner-actions .ax-btn{width:100%;justify-content:center}

/* Баннера 4:3 у карточки услуги больше нет — иконка живёт в плитке рядом с
   названием. На узком экране плитку слегка ужимаем, чтобы названию осталась
   ширина на две строки. */
/* На телефоне карточка шириной 171px: подпись «Найти исполнителя» ломалась
   на три строки, а название обрывалось на полуслове. Ужимаем плитку и текст,
   прячем иконку внутри кнопки — подпись встаёт в одну строку, а сама кнопка
   остаётся 44px высотой. */
@media(max-width:575px){
  .ax-srv-ico{width:40px;height:40px;border-radius:12px;font-size:19px}
  .ax-service{padding:12px;gap:10px}
  .ax-service .ax-srv-top{gap:10px}
  .ax-service .ax-card-title{font-size:13.5px}
  .ax-service .ax-srv-mst{font-size:12px}
  .ax-service .ax-price{font-size:16px}
  .ax-service .ax-buy-srv{padding:9px 8px;font-size:12px;white-space:nowrap;gap:0}
  .ax-service .ax-buy-srv>i{display:none}
}


/* ==================================================================
   СВЕТЛАЯ ТЕМА v3 — «премиум»
   ------------------------------------------------------------------
   Три идеи, из которых собрано всё остальное:

   1. Разделяет не рамка, а свет. Жёсткая серая линия по краю карточки
      на светлом фоне читается как обрезанная бумажка. Вместо неё —
      кольцо-волосок 1px внутри box-shadow плюс мягкая рассеянная тень:
      край виден, но глаз воспринимает подъём, а не контур.
   2. Канвас темнее карточки. #F2F4F8 против #FFFFFF даёт достаточную
      разницу, чтобы белая поверхность читалась сама по себе.
   3. Акцент — редкий. Синий держим для действий и ссылок; крупные
      декоративные плоскости синего (бегущая строка, hero-заголовок)
      уводим в глубину, иначе интерфейс выглядит дёшево.

   HIG · Color: «Avoid using the same color to mean different things».
   HIG · Materials: слой = отдельная плоскость по Z, а не просто рамка.
   ================================================================== */

/* ---------- канвас ---------- */
/* канвас плоский: объём даёт фиксированная аврора в body::before.
   Градиент прямо на body при background-attachment:fixed давал видимый
   горизонтальный шов, привязанный к вьюпорту, а не к странице. */
html[data-theme="light"] body { background: var(--dark); }
html[data-theme="light"] ::selection { background: rgba(29,91,214,0.16); color: var(--text); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #E9EDF4; }
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #A9B7CC, #8C9DB8); border-color: #E9EDF4; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1D5BD6, #3A82F0); }

/* видимый фокус — без него клавиатурная навигация слепая (HIG · Accessibility) */
html[data-theme="light"] :focus-visible {
  outline: 2px solid rgba(29,91,214,0.55); outline-offset: 2px; border-radius: 6px; }

/* ---------- шапка ---------- */
html[data-theme="light"] .ax-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.74));
  border-bottom: 1px solid rgba(16,28,48,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 20px -14px rgba(16,28,48,0.35); }
html[data-theme="light"] .ax-header .ax-iconbtn {
  background: rgba(255,255,255,0.6); border-color: rgba(16,28,48,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
html[data-theme="light"] .ax-iconbtn:hover {
  background: rgba(255,255,255,0.92); border-color: rgba(29,91,214,0.40); color: var(--ice);
  box-shadow: 0 2px 6px rgba(16,28,48,.08), 0 0 0 3px rgba(29,91,214,.07); }
html[data-theme="light"] .ax-userbtn { background: rgba(255,255,255,0.7); }
html[data-theme="light"] .ax-subnav { border-top-color: rgba(16,28,48,0.07); }
html[data-theme="light"] .ax-subnav a { color: #57657A; }
html[data-theme="light"] .ax-subnav a:hover,
html[data-theme="light"] .ax-subnav a.active { color: var(--ice); }
html[data-theme="light"] .ax-userbtn {
  background: #FFFFFF; border: 1px solid rgba(16,28,48,0.10);
  box-shadow: 0 1px 2px rgba(16,28,48,.05); }

/* поиск в шапке: утопленное поле, а не ещё одна карточка */
html[data-theme="light"] .ax-search {
  background: #F1F4F9; border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(16,28,48,.06); }
html[data-theme="light"] .ax-search:focus-within {
  background: #FFFFFF; border-color: rgba(29,91,214,0.45);
  box-shadow: 0 0 0 4px rgba(29,91,214,0.10), 0 2px 8px rgba(16,28,48,.06); }
html[data-theme="light"] .ax-search i { color: #74829A; }
html[data-theme="light"] .ax-search-drop {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-search-drop a { border-bottom-color: rgba(16,28,48,0.05); }
html[data-theme="light"] .ax-search-drop a:hover { background: #F5F8FC; }

/* ---------- заголовки секций: вес вместо ореола ---------- */
html[data-theme="light"] .ax-sec-title {
  text-shadow: none; letter-spacing: -0.022em; font-weight: 800; color: var(--white); }
html[data-theme="light"] .ax-sec-more { text-shadow: none; }
html[data-theme="light"] .ax-sec-more:hover { color: #14418F; }
html[data-theme="light"] .ax-kicker { color: #57657A; letter-spacing: .28em; }
html[data-theme="light"] .ax-kicker::before { background: linear-gradient(90deg, transparent, #1D5BD6); }

/* ---------- hero ---------- */
/* На светлой теме сцена приглушена до дымки, поэтому подложка под текстом
   больше не нужна: любой text-shadow здесь читается как расфокус. */
html[data-theme="light"] .ax-hero-3d h1,
html[data-theme="light"] .ax-hero h1 { text-shadow: none; }
/* Акцентная строка — сплошной тон. Градиент по буквам на таком кегле
   уводил нижнюю строку в индиго. */
html[data-theme="light"] .ax-hero-3d h1 span,
html[data-theme="light"] .ax-hero h1 span {
  background: none; -webkit-text-fill-color: #1E56C8; color: #1E56C8; filter: none; }
html[data-theme="light"] .ax-hero-3d .ax-hero-sub,
html[data-theme="light"] .ax-hero-sub { color: #54637A; text-shadow: none; }
html[data-theme="light"] .ax-hero-3d .ax-kicker,
html[data-theme="light"] .ax-hero-3d .ax-hero-stats,
html[data-theme="light"] .ax-marquee-track span { text-shadow: none; filter: none; }
html[data-theme="light"] .ax-hero-center::before { background: none; }

html[data-theme="light"] .ax-hero-3d .ax-hero-search,
html[data-theme="light"] .ax-hero-search {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16,28,48,0.06);
  box-shadow: 0 1px 2px rgba(16,28,48,.05),
              0 8px 20px -8px rgba(16,28,48,.10),
              0 28px 56px -20px rgba(16,28,48,.22); }
html[data-theme="light"] .ax-hero-3d .ax-hero-search:focus-within,
html[data-theme="light"] .ax-hero-search:focus-within {
  background: #FFFFFF; border-color: rgba(29,91,214,0.35);
  box-shadow: 0 0 0 5px rgba(29,91,214,.09),
              0 28px 56px -20px rgba(16,28,48,.24); }
html[data-theme="light"] .ax-hero-search i { color: #1D5BD6; }
html[data-theme="light"] .ax-hero-3d .ax-hero-chips a,
html[data-theme="light"] .ax-hero-chips a {
  background: rgba(255,255,255,0.9); border: 1px solid rgba(16,28,48,0.07);
  color: #24334A; box-shadow: 0 1px 2px rgba(16,28,48,.05); }
html[data-theme="light"] .ax-hero-3d .ax-hero-chips a:hover,
html[data-theme="light"] .ax-hero-chips a:hover {
  background: #FFFFFF; border-color: rgba(29,91,214,0.35); color: var(--ice);
  box-shadow: 0 4px 12px -4px rgba(16,28,48,.14); }
html[data-theme="light"] .ax-hstat b { letter-spacing: -0.02em; }
/* .ax-hero-3d намеренно прозрачен — под ним живёт WebGL-сцена .ax-scene
   (position:fixed; z-index:-1). Своего фона у hero в светлой теме быть не
   должно: любой непрозрачный слой здесь закрывает анимацию. */

/* ---------- бегущая строка: фон, а не заголовок ---------- */
html[data-theme="light"] .ax-marquee-track span {
  background: linear-gradient(90deg, #9AAAC2, #B8C6D9 50%, #9AAAC2);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none; opacity: 1; }
html[data-theme="light"] .ax-mq-dot { color: #93A9C6; }

/* ---------- плитки категорий ---------- */
html[data-theme="light"] .ax-cat-tile {
  background: #FFFFFF; border-color: transparent;
  box-shadow: var(--ax-e2);
  transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease); }
html[data-theme="light"] .ax-cat-tile:hover {
  border-color: transparent; box-shadow: var(--ax-e3-blue); color: var(--white); }
html[data-theme="light"] .ax-cat-tile::after {
  background: radial-gradient(260px 150px at 20% 0%, rgba(29,91,214,0.055), transparent 70%); }
html[data-theme="light"] .ax-cat-tile::before {
  background: radial-gradient(280px 200px at var(--gx,50%) var(--gy,50%), rgba(29,91,214,0.06), transparent 60%); }
/* Двадцать с лишним синих плашек подряд превращали сетку в синее поле.
   Подложка уходит в нейтраль, синим остаётся только глиф, а заливка
   появляется на hover — там, где цвет действительно означает действие. */
html[data-theme="light"] .ax-cat-ico {
  background: #F1F3F6; color: #1E56C8;
  box-shadow: inset 0 0 0 1px rgba(16,28,48,.05); }
html[data-theme="light"] .ax-cat-tile:hover .ax-cat-ico {
  background: #1E56C8; color: #FFFFFF;
  box-shadow: 0 4px 10px -4px rgba(16,28,48,.35); }
html[data-theme="light"] .ax-cat-name { color: var(--white); letter-spacing: -0.01em; }
html[data-theme="light"] .ax-cat-arr { color: #1D5BD6; }

/* ---------- карточки товаров и услуг ---------- */
html[data-theme="light"] .ax-card,
html[data-theme="light"] .ax-service {
  background: #FFFFFF; border-color: transparent;
  box-shadow: var(--ax-e2);
  transition: transform .28s var(--ax-ease), box-shadow .28s var(--ax-ease); }
html[data-theme="light"] .ax-card:hover,
html[data-theme="light"] .ax-service:hover {
  border-color: transparent; box-shadow: var(--ax-e3); transform: translateY(-3px); }
/* Подложка под иллюстрацией — тёплая нейтраль. Голубой градиент тянул
   на себя внимание и спорил с синим акцентом кнопок в той же карточке. */
html[data-theme="light"] .ax-card-media {
  background: linear-gradient(158deg, #FAFAFB 0%, #EDEFF3 100%);
  box-shadow: inset 0 -1px 0 rgba(16,28,48,.05); }
html[data-theme="light"] .ax-card-media > .bi { color: #8A93A3; }
/* На белом полупрозрачный голубой давал грязноватую заливку — берём плотные
   тона той же гаммы, что у кнопок. */
html[data-theme="light"] .ax-srv-ico {
  background: linear-gradient(158deg, #EAF0FD 0%, #DEE8FA 100%);
  box-shadow: inset 0 0 0 1px rgba(29,91,214,0.10); color: #1B55C9; }
html[data-theme="light"] .ax-service:hover .ax-srv-ico {
  background: linear-gradient(158deg, #DCE7FB 0%, #CBDBF7 100%);
  box-shadow: inset 0 0 0 1px rgba(29,91,214,0.20); color: #14418F; }
html[data-theme="light"] .ax-art { filter: drop-shadow(0 6px 14px rgba(16,28,48,0.08)); opacity: .82; }

html[data-theme="light"] .ax-card-title { color: var(--white); }
html[data-theme="light"] .ax-price { color: var(--white); letter-spacing: -0.01em; }
html[data-theme="light"] .ax-fav {
  background: rgba(255,255,255,0.92); border-color: rgba(16,28,48,0.08);
  box-shadow: 0 2px 6px rgba(16,28,48,.10); }
html[data-theme="light"] .ax-badge-new {
  background: #EAF0FD; color: #14418F; border-color: rgba(29,91,214,0.20); }

html[data-theme="light"] .ax-badge-sale {
  background: #FCEDEF; color: #A03248; border-color: rgba(160,50,72,0.18); }
html[data-theme="light"] .ax-stars { color: #E0A32C; }

/* ---------- «почему мы» ---------- */
html[data-theme="light"] .ax-why-card {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e2);
  transition: transform .3s var(--ax-ease), box-shadow .3s var(--ax-ease); }
html[data-theme="light"] .ax-why-card:hover {
  border-color: transparent; box-shadow: var(--ax-e3); }
html[data-theme="light"] .ax-why-card i { color: #55637A; }

/* ---------- отзывы клиентов на главной ---------- */
html[data-theme="light"] .ax-review {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e2); }

/* ---------- кнопки ---------- */
/* Один тон, тень чернильная. Синяя тень под синей кнопкой на белом
   даёт сиреневый ореол — именно он читался «фиолетовым градиентом». */
html[data-theme="light"] .ax-btn-primary,
html[data-theme="light"] .ax-catalog-btn,
html[data-theme="light"] .ax-search button,
html[data-theme="light"] .ax-hero-search button,
html[data-theme="light"] .ax-badge-hit,
html[data-theme="light"] .ax-pag button.on {
  box-shadow: 0 1px 2px rgba(16,28,48,.16), 0 8px 18px -10px rgba(16,28,48,.42);
  letter-spacing: -0.005em; }
html[data-theme="light"] .ax-btn-primary:hover,
html[data-theme="light"] .ax-catalog-btn:hover,
html[data-theme="light"] .ax-search button:hover,
html[data-theme="light"] .ax-hero-search button:hover {
  filter: none; background: var(--grad-hover);
  box-shadow: 0 1px 2px rgba(16,28,48,.20), 0 10px 22px -10px rgba(16,28,48,.5); }
html[data-theme="light"] .ax-btn-primary:active,
html[data-theme="light"] .ax-catalog-btn:active {
  background: #163F97; box-shadow: 0 1px 2px rgba(16,28,48,.22); }
/* Ghost = контур без заливки. Он может лежать и на карточке, и поверх
   WebGL-сцены, поэтому фон остаётся прозрачным, как в тёмной теме. */
html[data-theme="light"] .ax-btn-ghost {
  background: transparent; color: #24334A; border: 1px solid rgba(16,28,48,0.14); }
html[data-theme="light"] .ax-btn-ghost:hover {
  color: var(--ice); border-color: rgba(29,91,214,0.45);
  background: rgba(29,91,214,0.05); }
html[data-theme="light"] .ax-btn-ghost.on {
  background: #EAF0FD; color: #14418F; border-color: rgba(29,91,214,0.30); }
html[data-theme="light"] .ax-buy,
html[data-theme="light"] .ax-buy-srv,
html[data-theme="light"] .ax-srv-cta {
  background: transparent; border: 1px solid rgba(29,91,214,0.26); color: #14418F; }
html[data-theme="light"] .ax-buy:hover,
html[data-theme="light"] .ax-buy-srv:hover,
html[data-theme="light"] .ax-srv-cta:hover {
  background: #1E56C8; border-color: transparent; color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16,28,48,.16), 0 8px 18px -10px rgba(16,28,48,.42); }
html[data-theme="light"] .ax-link { color: var(--ice); }

/* ---------- поля ввода ---------- */
html[data-theme="light"] .ax-input,
html[data-theme="light"] .ax-select,
html[data-theme="light"] .ax-fsearch input {
  background: #FFFFFF !important;
  border: 1px solid rgba(16,28,48,0.11) !important;
  box-shadow: inset 0 1px 2px rgba(16,28,48,.04) !important; }
html[data-theme="light"] .ax-input:focus,
html[data-theme="light"] .ax-select:focus,
html[data-theme="light"] .ax-fsearch input:focus {
  border-color: rgba(29,91,214,0.50) !important;
  box-shadow: 0 0 0 4px rgba(29,91,214,0.10) !important; }
html[data-theme="light"] .ax-input::placeholder { color: #66748A !important; }

/* ---------- панели, боковики, тулбары ---------- */
/* Только те контейнеры, у которых фон есть и в тёмной теме.
   .ax-service-browser — сетка раскладки, .ax-fgroup — группа полей,
   .ax-side-block — секция внутри .ax-side: у них фона нет by design,
   белая заливка превращала их в лишние вложенные панели. */
html[data-theme="light"] .ax-side,
html[data-theme="light"] .ax-task-aside,
html[data-theme="light"] .ax-cselect-pop {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e1); }
html[data-theme="light"] .ax-cselect-pop { box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-side-item { color: #4A5A72; border-radius: 10px; }
html[data-theme="light"] .ax-side-item:hover { background: #F1F5FB; color: var(--ice); }
html[data-theme="light"] .ax-side-item.on,
html[data-theme="light"] .ax-side-item.active {
  background: #EAF0FD; color: #14418F; font-weight: 700; }
html[data-theme="light"] .ax-chip {
  background: #FFFFFF; border: 1px solid rgba(16,28,48,0.10); color: #4A5A72;
  box-shadow: 0 1px 2px rgba(16,28,48,.04); }
html[data-theme="light"] .ax-chip.on,
html[data-theme="light"] .ax-chip:hover {
  background: #EAF0FD; border-color: rgba(29,91,214,0.28); color: #14418F; }
/* Сегментированный контрол — только .ax-work-tabs: у него есть трек.
   .ax-tabs — обычный ряд чипов без подложки, фон ему добавлять нельзя,
   а активный .ax-tab по конвенции темы остаётся градиентным с белым текстом. */
html[data-theme="light"] .ax-work-tab { color: #57657A; }
html[data-theme="light"] .ax-work-tabs {
  background: #EDF1F7; border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(16,28,48,.05); }
html[data-theme="light"] .ax-work-tab:hover { background: rgba(29,91,214,.07); color: var(--white); }
html[data-theme="light"] .ax-work-tab.on,
html[data-theme="light"] .ax-work-tab.active {
  background: #FFFFFF; color: var(--white);
  box-shadow: 0 1px 2px rgba(16,28,48,.06), 0 2px 8px -3px rgba(16,28,48,.14); }
/* Плашка «проверенные мастера» и боковик услуг — стекло в обеих темах:
   на странице услуг под контентом крутится .ax-s3dbg (fixed, z-index:-1). */
html[data-theme="light"] .ax-srv-byax {
  background: linear-gradient(135deg, rgba(29,91,214,0.09), rgba(255,255,255,0.62));
  border: 1px solid rgba(29,91,214,0.16);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 2px rgba(16,28,48,.04), 0 10px 26px -14px rgba(16,28,48,.22),
              inset 0 1px 0 rgba(255,255,255,.75); }
html[data-theme="light"] .ax-service-side {
  background: rgba(255,255,255,0.72); border: 1px solid rgba(16,28,48,0.06);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 2px rgba(16,28,48,.04), 0 10px 26px -16px rgba(16,28,48,.22); }
html[data-theme="light"] .ax-service-search { background: rgba(241,244,249,0.85); }
html[data-theme="light"] .ax-hr { border-color: rgba(16,28,48,0.08); }
html[data-theme="light"] .ax-empty,
html[data-theme="light"] .ax-empty-wide,
html[data-theme="light"] .ax-task-empty { color: #5A6A80; }
/* Карточки и панели заданий держались на серой рамке из тёмной темы: на
   светлом фоне это читалось как чужая коробка. Переводим их на ту же
   подложку с тенью, что у карточек товаров и услуг. */
html[data-theme="light"] .ax-task-card,
html[data-theme="light"] .ax-task-detail,
html[data-theme="light"] .ax-task-side > div,
html[data-theme="light"] .ax-task-responses,
html[data-theme="light"] .ax-task-form {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e2); }
html[data-theme="light"] .ax-task-card { transition: box-shadow .28s var(--ax-ease); }
html[data-theme="light"] .ax-task-card:hover {
  border-color: transparent; box-shadow: var(--ax-e3); }
html[data-theme="light"] .ax-task-files a {
  border-color: rgba(16,28,48,0.10); background: #F7F9FC; }
html[data-theme="light"] .ax-pag button {
  background: #FFFFFF; border: 1px solid rgba(16,28,48,0.10); color: #4A5A72;
  box-shadow: 0 1px 2px rgba(16,28,48,.04); }
html[data-theme="light"] .ax-pag button:hover { border-color: rgba(29,91,214,0.32); color: var(--ice); }


/* ---------- модалки и всплывашки: самый верхний слой ---------- */
html[data-theme="light"] .ax-modal,
html[data-theme="light"] .ax-pop,
html[data-theme="light"] .ax-offcanvas {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-toast {
  background: rgba(255,255,255,0.9); border-color: transparent;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-dropdown {
  background-color: rgba(255,255,255,0.9);
  border-color: rgba(16,28,48,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--ax-e4); }
html[data-theme="light"] .ax-dropdown .dropdown-item:hover { background: #F5F8FC; }
html[data-theme="light"] .ax-dropdown .dropdown-item.active { background: #EAF0FD; color: #14418F; }
html[data-theme="light"] .ax-tabbar {
  background: rgba(255,255,255,0.94);
  border-top: 1px solid rgba(16,28,48,0.07);
  box-shadow: 0 -6px 20px -14px rgba(16,28,48,0.4); }

/* ---------- CTA «стать продавцом»: главный блок страницы ---------- */
html[data-theme="light"] .ax-sell-cta {
  border: 1px solid rgba(16,28,48,0.06);
  background:
    radial-gradient(720px 320px at 12% -10%, rgba(29,91,214,0.10), transparent 62%),
    radial-gradient(680px 320px at 88% 110%, rgba(214,176,138,0.11), transparent 62%),
    rgba(255,255,255,0.7);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-sell-cta-kicker {
  color: #14418F; background: rgba(29,91,214,0.06); border-color: rgba(29,91,214,0.20); }
html[data-theme="light"] .ax-sell-cta-title { letter-spacing: -0.025em; }
html[data-theme="light"] .ax-sell-cta-sub { color: #54637A; }
html[data-theme="light"] .ax-sell-cta-badges > span {
  color: #4A5A72; border-color: rgba(16,28,48,0.16); }

/* ---------- подвал ---------- */
html[data-theme="light"] .ax-footer {
  background: linear-gradient(180deg, #EDF1F7, #E6EBF3);
  border-top: 1px solid rgba(16,28,48,0.07); }
html[data-theme="light"] .ax-footer h6 { color: #33455E; }
html[data-theme="light"] .ax-footer a,
html[data-theme="light"] .ax-foot-line { color: #55647B; }
html[data-theme="light"] .ax-footer a:hover { color: var(--ice); }
html[data-theme="light"] .ax-foot-bottom { border-top-color: rgba(16,28,48,0.07); }

/* ---------- мелочи ---------- */
html[data-theme="light"] .ax-h6 { color: #33455E; }
html[data-theme="light"] .ax-sku,
html[data-theme="light"] .ax-muted { color: #5A6A80; }
html[data-theme="light"] .ax-logo { color: var(--white); }
html[data-theme="light"] .ax-logo span { color: #1E56C8; }
html[data-theme="light"] .ax-logo-dot { background: #1E56C8; box-shadow: none; }
html[data-theme="light"] .ax-scroll-hint span { border-color: rgba(16,28,48,.22); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .ax-card:hover,
  html[data-theme="light"] .ax-service:hover { transform: none; }
}

/* ---------- блок «мебель на заказ» ---------- */
html[data-theme="light"] .ax-moebel {
  border: 1px solid rgba(16,28,48,0.06);
  background:
    radial-gradient(760px 420px at 88% -6%, rgba(29,91,214,0.10), transparent 64%),
    radial-gradient(520px 320px at 4% 104%, rgba(214,176,138,0.09), transparent 66%),
    #FFFFFF;
  box-shadow: var(--ax-e4); }
html[data-theme="light"] .ax-moebel::before {
  opacity: .5;
  background-image: linear-gradient(rgba(16,28,48,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(16,28,48,0.035) 1px, transparent 1px); }
html[data-theme="light"] .ax-moebel p { color: #54637A; }

/* ---------- боковик услуг ---------- */
/* .ax-service-search держит тёмную подложку rgba(4,10,18,.32) — на светлом
   она читалась серым пятном под лупой. Фон и рамку рисует обёртка, инпут
   внутри остаётся прозрачным. */
html[data-theme="light"] .ax-service-search {
  background: rgba(241,244,249,0.8); border-color: transparent; color: #74829A;
  box-shadow: inset 0 1px 2px rgba(16,28,48,.05); }
html[data-theme="light"] .ax-service-search:focus-within {
  background: #FFFFFF; border-color: rgba(29,91,214,0.45);
  box-shadow: 0 0 0 4px rgba(29,91,214,0.10); }
html[data-theme="light"] .ax-service-search input { background: transparent; color: var(--text); }
html[data-theme="light"] .ax-service-search input::placeholder { color: #66748A; }
html[data-theme="light"] .ax-service-side nav button { color: #4A5A72; }

/* ---- «листается вбок» ----
   На телефоне ряд категорий услуг прокручивается горизонтально, но об этом
   ничто не говорило: последняя видимая кнопка обрывалась ровно по краю и
   выглядела как конец списка. Мягкое затухание у края плюс стрелка —
   затухание намекает, что дальше что-то есть, стрелка даёт это нажать.
   Обе появляются только когда прокручивать действительно есть куда. */
.ax-hscroll { position: relative; }
.ax-hscroll::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 46px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, var(--surface) 78%); }
.ax-hscroll.has-more::after { opacity: 1; }
.ax-hscroll-next { position: absolute; top: 50%; right: 2px; z-index: 2;
  width: 30px; height: 30px; display: none; place-items: center; padding: 0;
  transform: translateY(-50%); border: var(--ax-border); border-radius: 50%;
  background: var(--surface); color: var(--ice); font-size: 13px;
  box-shadow: 0 4px 14px rgba(4,10,22,0.35); cursor: pointer; }
.ax-hscroll.has-more > .ax-hscroll-next { display: grid; }
html[data-theme="light"] .ax-hscroll::after { background: linear-gradient(90deg, transparent, #FFFFFF 78%); }
html[data-theme="light"] .ax-hscroll-next { background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e2); }
@media (min-width: 992px) { .ax-hscroll::after, .ax-hscroll-next { display: none; } }
html[data-theme="light"] .ax-service-side nav button:hover,
html[data-theme="light"] .ax-service-side nav button.on {
  background: #EAF0FD; color: #14418F; }
html[data-theme="light"] .ax-toolbar h1 { letter-spacing: -0.02em; }

/* плейсхолдер в шапочном и hero-поиске — тот же приглушённый тон, что и в .ax-input */
html[data-theme="light"] .ax-search input::placeholder,
html[data-theme="light"] .ax-hero-search input::placeholder { color: #66748A; }

/* Мобильная раскладка растягивает вкладки на всю ширину — радиус держим
   тот же, иначе на узком экране пилюля превращается в прямоугольник. */
@media (max-width: 767px) { .ax-work-tab { border-radius: 999px; } }

/* ---------- лента и публикации ---------- */
/* Список постов — плоский поток: сильная тень на каждой карточке
   превращает ленту в стопку карточек и утомляет при прокрутке. */
html[data-theme="light"] .ax-post,
html[data-theme="light"] .ax-feed-composer {
  background: #FFFFFF; border-color: transparent; box-shadow: var(--ax-e2); }
html[data-theme="light"] .ax-post:hover { box-shadow: var(--ax-e3); }
html[data-theme="light"] .ax-post-media {
  border-color: rgba(16,28,48,0.07); background: #F5F6F8; }
html[data-theme="light"] .ax-post-text { color: #24334A; }
html[data-theme="light"] .ax-post-act { color: #5A6A80; border-radius: 999px; }
html[data-theme="light"] .ax-post-act:hover { background: #F1F4F9; color: var(--ice); }
html[data-theme="light"] .ax-react {
  background: #FFFFFF; border-color: rgba(16,28,48,0.10); }
html[data-theme="light"] .ax-react:hover { border-color: rgba(29,91,214,0.32); }
html[data-theme="light"] .ax-post-comment { background: #F7F9FC; border-radius: var(--ax-r-sm); }
html[data-theme="light"] .ax-feed-div-l { background: rgba(16,28,48,.07); }

/* ---------- типографика: плотность по кеглю ---------- */
html[data-theme="light"] .ax-card-title,
html[data-theme="light"] .ax-cat-name,
html[data-theme="light"] .ax-why-card b { letter-spacing: -0.012em; }
html[data-theme="light"] .ax-price { font-variant-numeric: tabular-nums; }

html[data-theme="light"] .ax-why-card:hover i { color: #1E56C8; }


/* ---------- терминал: разделы как отдельные карточки ---------- */
.ax-admset + .ax-admset { margin-top: 18px; }
.ax-admset > h2 { display: flex; align-items: center; }
.ax-admset-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
  padding-top: 14px; border-top: 1px solid var(--mid-gray); }
html[data-theme="light"] .ax-admset-chips { border-top-color: rgba(16,28,48,.08); }

/* Баннеры разделов «Услуги»: скругление под язык карточек и вкладок-пилюль
   над ними — угол в 14px рядом с полностью круглой вкладкой читался обрубком. */
.ax-srv-byax, .ax-task-intro { border-radius: 20px; }
body[data-page="services"] .ax-srv-byax { border-radius: 20px; }

/* Та же плашка в каталоге: на странице товаров она вводная, а не главная —
   поэтому в компактном варианте, как во вкладке «Найти исполнителя». */
body[data-page="catalog"] .ax-srv-byax{align-items:center;margin:0 0 18px;padding:11px 14px;gap:11px;box-shadow:none;border-radius:20px}
body[data-page="catalog"] .ax-srv-byax>i{font-size:20px;margin:0}
body[data-page="catalog"] .ax-srv-byax>div{min-width:0;flex:1}
body[data-page="catalog"] .ax-srv-byax b{font-size:14px;margin:0 0 1px}
body[data-page="catalog"] .ax-srv-byax p{font-size:12px;line-height:1.35;max-width:none}
body[data-page="catalog"] .ax-srv-byax .ax-srv-cta{flex:none;margin:0;padding:9px 13px;font-size:12px;white-space:nowrap}
@media(max-width:767px){
  body[data-page="catalog"] .ax-srv-byax p{display:none}
  body[data-page="catalog"] .ax-srv-byax .ax-srv-cta span{display:none}
  body[data-page="catalog"] .ax-srv-byax .ax-srv-cta i{margin:0!important}
}


/* ============================================================
   Растворение содержимого у краёв окна
   ------------------------------------------------------------
   Первая версия закрашивала полосу сплошным var(--dark) с уходом
   в прозрачность. На страницах, где под контентом крутится
   WebGL-сцена, фон вовсе не равен var(--dark) — полоса выходила
   плотнее самой шапки (та стеклянная, ~0.6 альфы) и читалась как
   отслоившийся от неё слой.

   Здесь цвета нет вообще. Три слоя backdrop-filter с нарастающим
   радиусом и своими масками дают постепенное размытие: карточка,
   уходящая под шапку, растворяется в пространстве, а сцена за ней
   остаётся видимой. Это тот же приём, что Apple называет scroll
   edge effect.
   ============================================================ */
.ax-edge-fade {
  position: fixed; left: 0; right: 0; z-index: 1030;
  pointer-events: none;
  display: block;
}
.ax-edge-fade > i {
  position: absolute; left: 0; right: 0; display: block;
  /* каждый слой видит фон под собой уже размытым предыдущим */
  backdrop-filter: blur(var(--b)); -webkit-backdrop-filter: blur(var(--b));
  -webkit-mask-image: var(--m); mask-image: var(--m);
}
/* ---- верхний край: под шапкой ---- */
/* На 1px выше низа шапки: высота шапки дробная, а переменная целая, и при
   неудачном округлении между шапкой и растворением оставалась полоска
   неразмытого фона. Шапка (z-index 1040) всё равно рисуется поверх фейда
   (1030), поэтому нахлёст не виден, а шов исчезает при любом округлении. */
.ax-edge-fade.top { top: calc(var(--ax-header-h, 64px) - 1px); height: 53px; opacity: 0; }

/* ---- «Наверх» ----
   Появляется под шапкой, когда прокрутили заметно вниз. Только на телефоне:
   на десктопе есть колесо, клавиши Home/PgUp и полоса прокрутки, а на телефоне
   до верха длинной ленты приходится долго мотать пальцем. */
.ax-totop { position: fixed; left: 50%; z-index: 1035; display: none;
  align-items: center; gap: 7px; min-height: 38px; padding: 8px 16px;
  transform: translate(-50%, -12px);
  border: var(--ax-border-hi); border-radius: 999px;
  background: rgba(13,18,27,0.86); backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  color: var(--ice); font: 700 12.5px/1 inherit; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(4,10,22,0.42); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ax-ease), transform .22s var(--ax-ease); }
.ax-totop i { font-size: 13px; }
.ax-totop.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ax-totop:active { transform: translate(-50%, 0) scale(.96); }
html[data-theme="light"] .ax-totop { background: rgba(255,255,255,0.92);
  border-color: rgba(29,91,214,0.24); color: #14418F; box-shadow: var(--ax-e3); }
@media (max-width: 991px) { .ax-totop { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .ax-totop { transition: opacity .01s; } }
/* появляется только когда есть что растворять */
.ax-edge-fade.top.on { opacity: 1; }
.ax-edge-fade.top > i:nth-child(1) { top: 0; height: 52px; --b: 2px;
  --m: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 70%, transparent 100%); }
.ax-edge-fade.top > i:nth-child(2) { top: 0; height: 34px; --b: 6px;
  --m: linear-gradient(180deg, #000 0%, transparent 100%); }
.ax-edge-fade.top > i:nth-child(3) { top: 0; height: 18px; --b: 14px;
  --m: linear-gradient(180deg, #000 0%, transparent 100%); }
/* Без поддержки backdrop-filter слои просто ничего не делают —
   лучше пусто, чем цветная полоса поверх сцены. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ax-edge-fade { display: none; }
}
body[data-page="chat"] .ax-edge-fade { display: none; }

/* Глобальные витрины управляются из терминала. Сервер отдаёт уже эффективный
   доступ: для admin и bugtester эти классы не включаются даже при общем Off. */
body.ax-marketplace-off .ax-feature-marketplace,
body.ax-constructor-off .ax-feature-constructor { display: none !important; }

/* Задания внутри личного кабинета: тот же сегментированный переключатель,
   что на странице услуг, но список не создаёт второй внешний отступ карточки. */
.ax-account-tasks .ax-account-task-tabs { margin: 2px 0 18px; }
.ax-account-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-account-task-grid .ax-task-card { min-width: 0; }
.ax-account-task-grid .ax-task-card > p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 820px) {
  .ax-account-task-grid { grid-template-columns: 1fr; }
}
.ax-session-row{display:grid;grid-template-columns:32px minmax(0,1fr) 38px;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--ax-line)}
.ax-session-row:last-child{border-bottom:0}.ax-session-row>i{color:var(--ax-blue);font-size:18px}.ax-session-row span{min-width:0}.ax-session-row b,.ax-session-row small{display:block}.ax-session-row small{color:var(--ax-muted);font-size:12px;overflow-wrap:anywhere}.ax-session-row em{font-style:normal;color:var(--ax-ok);font-size:11px;margin-left:5px}
/* Незавершённая попытка входа — предупреждение, а не строка списка: в общем
   стиле сеансов её взгляд просто не отличал от собственного устройства. */
.ax-attempts-head{color:#f2c265}
.ax-session-attempt{border-bottom:0;margin-bottom:8px;padding:11px 12px;border-radius:12px;
  background:rgba(242,194,101,.09);border:1px solid rgba(242,194,101,.28)}
.ax-session-attempt>i{color:#f2c265}
.ax-session-attempt b{color:#f2c265}
html[data-theme="light"] .ax-attempts-head,
html[data-theme="light"] .ax-session-attempt>i,
html[data-theme="light"] .ax-session-attempt b{color:#8A5A00}
html[data-theme="light"] .ax-session-attempt{background:#FDF6E6;border-color:rgba(138,90,0,.22)}