/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   VAIMAN · VISUAL V2 · ВОЛНА 4 (01.10) — КАБИНЕТ ВОШЕДШЕГО: дашборд «.ПРИВЕТ, ИМЯ» (уровень, быстрые действия),
   «.МОИ РАБОТЫ» (настоящие работы человека, окно просмотра как галерея главной), «.ДОСТИЖЕНИЯ» (система ядра:
   database/stats.py → /site-api/user/achievements), «.ДЛЯ ВАС» (готовые стили + новинки из новостей), «.РАЗДЕЛЫ» 01–06,
   страница /achievements (фильтры, кольца, «поделиться» реферальной ссылкой) и экран гостя. Только вид + чтение API:
   ничего не списывает и не пишет. Цвета — токены ниже (обе темы), в правилах страниц только var(--…).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --c4-or: #F57A1E;
  --c4-or2: #F26B21;
  --c4-ink: #111111;
  --c4-off: #F2EEE6;
  --c4-off2: #D3DCE0;
  --c4-amber: #F59B1F;
  --c4-petrol: #174A5E;
  --c4-petrol2: #0F3444;
  --c4-plate: linear-gradient(150deg, #174A5E 0%, #0F3444 72%);
  --c4-edge: rgba(224, 149, 90, .55);
  --c4-hair: rgba(242, 238, 230, .16);
  --c4-card: #FFFFFF;
  --c4-card-edge: rgba(15, 52, 68, .13);
  --c4-card-shadow: 0 1px 0 rgba(15, 52, 68, .04), 0 calc(22px * var(--k, 1)) calc(44px * var(--k, 1)) calc(-34px * var(--k, 1)) rgba(15, 52, 68, .45);
  --c4-track: rgba(15, 52, 68, .12);
  --c4-field: radial-gradient(circle, rgba(17, 17, 17, .13) calc(1.1px * var(--k, 1)), transparent calc(1.7px * var(--k, 1))) 0 0 / calc(13px * var(--k, 1)) calc(13px * var(--k, 1)),
              linear-gradient(145deg, #F7913A 0%, #F57A1E 45%, #F26B21 100%);
  --c4-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F57A1E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --c4-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --c4-dots: radial-gradient(circle, rgba(242, 238, 230, .12) calc(1.1px * var(--k, 1)), transparent calc(1.7px * var(--k, 1))) 0 0 / calc(13px * var(--k, 1)) calc(13px * var(--k, 1));
  --c4-sel-bg: #0F3444;
  --c4-sel-fg: #F2EEE6;
  --c4-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  --c4-card: rgba(23, 74, 94, .62);
  --c4-card-edge: rgba(242, 238, 230, .12);
  --c4-card-shadow: 0 calc(22px * var(--k, 1)) calc(44px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(4, 22, 30, .8);
  --c4-track: rgba(242, 238, 230, .14);
  --c4-sel-bg: #F2EEE6;
  --c4-sel-fg: #111111;
}

/* 0 · старое внутри — убрано с экрана (разметка и id живут, чтобы ничьи обработчики не упали): стена «Все нейросети»
   с лицами, «Откройте для себя» с видео-превью, карточки «Генераторы» 2×2 с роликами, цветные чипы героя */
#app .c4-old, #app .dash-hero-chips { display: none !important; }

/* 1 · ЗАГОЛОВКИ РАЗДЕЛОВ — Oswald 700 капсом с оранжевой точкой, справа тонкая цифра и ссылка-стрелка */
#app .c4-sec { margin-top: calc(34px * var(--k, 1)); }
#app .c4-sec[hidden] { display: none !important; }
#app .c4-head { display: flex; align-items: flex-end; gap: calc(16px * var(--k, 1)); margin-bottom: calc(16px * var(--k, 1)); flex-wrap: wrap; }
#app .c4-h, #app .c4-works-sec .section-title {
  margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: calc(30px * var(--k, 1)); line-height: .95; letter-spacing: .005em; color: var(--text-primary);
}
#app .c4-h::before { content: '.'; color: var(--c4-or); }
#app .c4-count { font-family: var(--font-num); font-weight: 200; font-size: calc(30px * var(--k, 1)); line-height: .9; letter-spacing: -.03em; color: var(--text-secondary); }
#app .c4-count:empty { display: none; }
#app .c4-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: calc(10px * var(--k, 1));
  font: 600 calc(12px * var(--k, 1))/1 var(--font-num); letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
#app .c4-more::after { content: ''; width: calc(30px * var(--k, 1)); height: calc(30px * var(--k, 1)); border-radius: 50%; background: var(--c4-petrol2) var(--c4-arrow) center / 46% no-repeat; flex: none; }
#app .c4-more:hover { color: var(--accent-ember); }

/* 2 · ГЕРОЙ — «.ПРИВЕТ, ИМЯ» (петроль-постер волны 3) + уровень с кольцом + быстрые действия */
#app .dash-hero { align-items: stretch; }
#app .dash-hero-left { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
#app .dash-hero-right { justify-content: center; }
#app .c4-lvl[hidden], #app .c4-quick[hidden] { display: none !important; }
#app .c4-lvl {
  display: flex; align-items: center; gap: calc(16px * var(--k, 1)); margin-top: calc(22px * var(--k, 1));
  max-width: calc(560px * var(--k, 1)); color: var(--c4-off); text-decoration: none;
}
#app .c4-ring { position: relative; flex: none; width: calc(74px * var(--k, 1)); height: calc(74px * var(--k, 1)); }
#app .c4-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
#app .c4-ring .c4-rt { fill: none; stroke: var(--c4-hair); stroke-width: 3.2; }
#app .c4-ring .c4-rf { fill: none; stroke: var(--c4-or); stroke-width: 3.2; stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
#app .c4-ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 200 calc(30px * var(--k, 1))/1 var(--font-num); letter-spacing: -.04em; color: var(--c4-off);
}
#app .c4-lvl-t { flex: 1 1 auto; min-width: 0; }
#app .c4-lvl-k { display: block; font: 600 calc(10.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .26em; text-transform: uppercase; color: var(--c4-off2); }
#app .c4-lvl-n { display: block; margin-top: calc(6px * var(--k, 1)); font: 700 calc(22px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--c4-off); }
#app .c4-lvl-n i { font-style: normal; color: var(--c4-amber); }
#app .c4-bar { position: relative; height: calc(6px * var(--k, 1)); margin-top: calc(10px * var(--k, 1)); border-radius: 99px; background: var(--c4-hair); overflow: hidden; }
#app .c4-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c4-or2), var(--c4-amber)); transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
#app .c4-lvl-s { display: block; margin-top: calc(8px * var(--k, 1)); font: 500 calc(13px * var(--k, 1))/1.35 var(--font-body); color: var(--c4-off2); }
#app .c4-lvl-s b { font: 300 1.08em var(--font-num); color: var(--c4-off); }
#app .c4-quick { display: flex; flex-wrap: wrap; gap: calc(10px * var(--k, 1)); margin-top: calc(22px * var(--k, 1)); }
#app .c4-go {
  display: inline-flex; align-items: center; gap: calc(14px * var(--k, 1)); min-height: calc(50px * var(--k, 1));
  padding: calc(7px * var(--k, 1)) calc(7px * var(--k, 1)) calc(7px * var(--k, 1)) calc(22px * var(--k, 1));
  border-radius: 999px; background: linear-gradient(145deg, var(--c4-or), var(--c4-or2)); color: var(--c4-ink);
  font: 700 calc(14px * var(--k, 1))/1.1 var(--font-body); text-decoration: none; box-shadow: 0 calc(16px * var(--k, 1)) calc(30px * var(--k, 1)) calc(-16px * var(--k, 1)) rgba(245, 122, 30, .7);
  transition: transform .2s ease, box-shadow .2s ease;
}
#app .c4-go small { display: block; font: 600 calc(9.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .2em; text-transform: uppercase; opacity: .72; margin-bottom: 3px; }
#app .c4-go::after { content: ''; flex: none; width: calc(36px * var(--k, 1)); height: calc(36px * var(--k, 1)); border-radius: 50%; background: var(--c4-petrol2) var(--c4-arrow) center / 44% no-repeat; }
#app .c4-go:hover { transform: translateY(-2px); }
#app .c4-chip {
  display: inline-flex; align-items: center; gap: calc(8px * var(--k, 1)); min-height: calc(50px * var(--k, 1));
  padding: 0 calc(18px * var(--k, 1)); border-radius: 999px; border: 1px solid rgba(242, 238, 230, .3);
  background: rgba(15, 52, 68, .45); color: var(--c4-off); font: 600 calc(13.5px * var(--k, 1))/1 var(--font-body); text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
#app .c4-chip b { font: 300 calc(13px * var(--k, 1))/1 var(--font-num); color: var(--c4-amber); }
#app .c4-chip:hover { border-color: var(--c4-or); color: var(--c4-off); }
#app .c4-chip.c4-styles { border-color: var(--c4-edge); }
#app .c4-chip.c4-styles::before { content: ''; width: calc(7px * var(--k, 1)); height: calc(7px * var(--k, 1)); border-radius: 50%; background: var(--c4-or); }

/* 3 · «.МОИ РАБОТЫ» — мозаика настоящих работ без кропа (колонки), миниатюры /site-api/thumb ×2 места показа */
#app .c4-works-sec { margin-top: calc(30px * var(--k, 1)); }
#app .c4-works-sec .section-header { display: flex; align-items: flex-end; gap: calc(16px * var(--k, 1)); margin-bottom: calc(16px * var(--k, 1)); }
#app .c4-works-sec .section-title::before { content: '.'; color: var(--c4-or); }
#app .c4-works-sec .dash-reel-arrow { display: none !important; }
#app .c4-works-sec .dash-reel-ctrl { margin-left: auto; }
#app .c4-works-sec .dash-reel-ctrl .section-link { display: inline-flex; align-items: center; gap: calc(10px * var(--k, 1)); font: 600 calc(12px * var(--k, 1))/1 var(--font-num); letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); }
#app .c4-works-sec .dash-reel-ctrl .section-link::after { content: ''; width: calc(30px * var(--k, 1)); height: calc(30px * var(--k, 1)); border-radius: 50%; background: var(--c4-petrol2) var(--c4-arrow) center / 46% no-repeat; }
#app .c4-works-sec .dash-reel-ctrl .section-link:hover { color: var(--accent-ember); }
#app .c4-works-sec .dash-reel {
  display: block !important; overflow: visible !important; scroll-snap-type: none !important;
  columns: 5 calc(190px * var(--k, 1)); column-gap: calc(14px * var(--k, 1)); padding: 0 !important; margin: 0 !important;
}
#app .c4-works-sec .dash-reel > * {
  position: relative; display: block; width: 100% !important; height: auto !important; min-height: 0; aspect-ratio: auto !important;
  flex: none !important; margin: 0 0 calc(14px * var(--k, 1)) !important; break-inside: avoid; -webkit-column-break-inside: avoid;
  border-radius: calc(20px * var(--k, 1)); overflow: hidden; background: var(--c4-plate);
  border: 1px solid var(--c4-card-edge); box-shadow: var(--c4-card-shadow); cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
}
#app .c4-works-sec .dash-reel-skeleton { height: calc(240px * var(--k, 1)) !important; }
#app .c4-works-sec .dash-reel-skeleton:nth-child(2n) { height: calc(320px * var(--k, 1)) !important; }
#app .c4-works-sec .dash-reel-card:hover, #app .c4-works-sec .dash-reel-card:focus-visible { transform: translateY(-3px); border-color: var(--c4-or); outline: none; }
#app .c4-works-sec .dash-reel-card > img, #app .c4-works-sec .dash-reel-card > video {
  position: static !important; display: block; width: 100% !important; height: auto !important; min-height: calc(140px * var(--k, 1));
  object-fit: contain !important; background: var(--c4-petrol2);
}
#app .c4-works-sec .dash-reel-card > video:not([poster]):not([src]) { aspect-ratio: 4 / 5; min-height: 0; background: var(--c4-dots), var(--c4-plate); }
#app .c4-works-sec .dash-reel-audio { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--c4-plate); }
#app .c4-works-sec .dash-reel-audio svg { stroke: var(--c4-amber); }
#app .c4-works-sec .dash-reel-badge {
  position: absolute; z-index: 2; top: calc(10px * var(--k, 1)); left: calc(10px * var(--k, 1)); right: auto;
  padding: calc(5px * var(--k, 1)) calc(9px * var(--k, 1)); border-radius: 999px; border: 0;
  background: rgba(15, 52, 68, .82); color: var(--c4-off); -webkit-backdrop-filter: none; backdrop-filter: none;
  font: 600 calc(9.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .16em; text-transform: uppercase;
}
#app .c4-works-sec .dash-reel-badge::before { content: '.'; color: var(--c4-or); font-weight: 800; }
#app .c4-works-sec .dash-reel-count { position: absolute; z-index: 2; top: calc(10px * var(--k, 1)); right: calc(10px * var(--k, 1)); padding: calc(4px * var(--k, 1)) calc(8px * var(--k, 1)); border-radius: 999px; background: var(--c4-or); color: var(--c4-ink); font: 600 calc(11px * var(--k, 1))/1 var(--font-num); }
#app .c4-works-sec .dash-reel-time {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: calc(28px * var(--k, 1)) calc(12px * var(--k, 1)) calc(10px * var(--k, 1));
  background: linear-gradient(180deg, transparent, rgba(15, 52, 68, .9)); color: var(--c4-off2);
  font: 500 calc(11px * var(--k, 1))/1.2 var(--c4-mono); letter-spacing: .02em; opacity: 0; transition: opacity .25s ease;
}
#app .c4-works-sec .dash-reel-card:hover .dash-reel-time, #app .c4-works-sec .dash-reel-card:focus-visible .dash-reel-time { opacity: 1; }
#app .c4-works-sec .dash-reel-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(48px * var(--k, 1)); height: calc(48px * var(--k, 1)); border-radius: 50%; display: grid; place-items: center; background: var(--c4-or); border: 0; }
#app .c4-works-sec .dash-reel-play svg { fill: var(--c4-ink); width: 40%; height: 40%; margin-left: 8%; }
#app .c4-works-sec .dash-reel-dl { position: absolute; z-index: 3; right: calc(10px * var(--k, 1)); bottom: calc(10px * var(--k, 1)); top: auto; width: calc(36px * var(--k, 1)); height: calc(36px * var(--k, 1)); border-radius: 50%; border: 0; background: var(--c4-or); color: var(--c4-ink); opacity: 0; transition: opacity .25s ease; }
#app .c4-works-sec .dash-reel-card:hover .dash-reel-dl { opacity: 1; }
/* 02.10 (ревизия Грока №15): на таче наведения нет — «Скачать» видно всегда (iPad и любой тач шире 760), и при фокусе с клавиатуры */
@media (hover: none) { #app .c4-works-sec .dash-reel-dl { opacity: 1; } }
#app .c4-works-sec .dash-reel-dl:focus-visible, #app .c4-works-sec .dash-reel-card:focus-within .dash-reel-dl { opacity: 1; }
#app .c4-works-sec .dash-empty { padding: calc(36px * var(--k, 1)); border-radius: calc(26px * var(--k, 1)); background: var(--c4-field); color: var(--c4-ink); text-align: left; border: 0; }
#app .c4-works-sec .dash-empty-icon { color: var(--c4-petrol2); }
#app .c4-works-sec .dash-empty-title { font: 700 calc(32px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; color: var(--c4-ink); }
#app .c4-works-sec .dash-empty-text { color: var(--c4-ink); opacity: .85; }

/* 4 · ОКНО РАБОТЫ — как окно галереи главной: петроль во весь экран, медиа целиком, справа «.ГЕНЕРАТОР», промпт моно,
   кнопки-пилюли; Esc / «назад» закрывают, ← → листают результаты */
#app .dash-qv { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: stretch; justify-content: center; padding: 0; overscroll-behavior: contain; }
#app .dash-qv .dash-qv-backdrop { position: absolute; inset: 0; background: var(--c4-petrol2); opacity: .985; -webkit-backdrop-filter: none; backdrop-filter: none; touch-action: none; }
#app .dash-qv .dash-qv-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(400px * var(--k, 1));
  width: 100%; max-width: calc(1760px * var(--k, 1)); max-height: none; height: 100%; margin: 0 auto; padding: calc(28px * var(--k, 1)) max(20px, calc(40px * var(--k, 1)));
  gap: calc(36px * var(--k, 1)); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--c4-off); overflow: hidden;
  animation: c4in .35s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes c4in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#app .dash-qv .dash-qv-close {
  position: absolute; z-index: 5; top: calc(22px * var(--k, 1)); right: max(20px, calc(40px * var(--k, 1))); width: calc(48px * var(--k, 1)); height: calc(48px * var(--k, 1));
  border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242, 238, 230, .42); background: transparent; color: var(--c4-off);
}
#app .dash-qv .dash-qv-close:hover { background: var(--c4-or); border-color: var(--c4-or); color: var(--c4-ink); }
#app .dash-qv .dash-qv-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; height: 100%; border-radius: calc(22px * var(--k, 1)); background: transparent; overflow: hidden; }
#app .dash-qv .dash-qv-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#app .dash-qv .dash-qv-slot img { display: block; max-width: 100%; max-height: calc(100vh - 56px * var(--k, 1)); max-height: calc(100dvh - 56px * var(--k, 1)); width: auto; height: auto; object-fit: contain; border-radius: calc(18px * var(--k, 1)); }
#app .dash-qv .dash-qv-slot vaiman-video { max-height: calc(100vh - 56px * var(--k, 1)) !important; max-height: calc(100dvh - 56px * var(--k, 1)) !important; border-radius: calc(18px * var(--k, 1)); overflow: hidden; }
#app .dash-qv .dash-qv-meta { overscroll-behavior: contain; }
#app .dash-qv .dash-qv-tracks { flex-direction: column; gap: calc(12px * var(--k, 1)); justify-content: center; }
#app .dash-qv .dash-qv-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: calc(56px * var(--k, 1)); height: calc(56px * var(--k, 1)); border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242, 238, 230, .42); background: rgba(15, 52, 68, .8); color: var(--c4-off); }
#app .dash-qv .dash-qv-arrow.prev { left: calc(14px * var(--k, 1)); }
#app .dash-qv .dash-qv-arrow.next { right: calc(14px * var(--k, 1)); }
#app .dash-qv .dash-qv-arrow:hover { background: var(--c4-or); border-color: var(--c4-or); color: var(--c4-ink); }
#app .dash-qv .dash-qv-counter { position: absolute; z-index: 3; left: calc(18px * var(--k, 1)); bottom: calc(14px * var(--k, 1)); padding: 0; background: none; color: var(--c4-off); font: 200 calc(30px * var(--k, 1))/1 var(--font-num); letter-spacing: -.02em; }
#app .dash-qv .dash-qv-meta { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(18px * var(--k, 1)); min-width: 0; padding: calc(84px * var(--k, 1)) 0 calc(12px * var(--k, 1)); overflow-y: auto; }
#app .dash-qv .dash-qv-head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10px * var(--k, 1)); }
#app .dash-qv .dash-qv-type { font: 700 calc(46px * var(--k, 1))/.95 var(--font-display); text-transform: uppercase; letter-spacing: .005em; color: var(--c4-off); }
#app .dash-qv .dash-qv-type::before { content: '.'; color: var(--c4-or); }
#app .dash-qv .dash-qv-time { font: 600 calc(11px * var(--k, 1))/1 var(--font-num); letter-spacing: .22em; text-transform: uppercase; color: var(--c4-off2); }
#app .dash-qv .dash-qv-prompt {
  margin: 0; max-height: 34vh; overflow-y: auto; padding: calc(16px * var(--k, 1)) calc(18px * var(--k, 1)); border-radius: calc(16px * var(--k, 1));
  border: 1px solid var(--c4-hair); background: rgba(12, 44, 58, .6); color: var(--c4-off2); font: 400 calc(13px * var(--k, 1))/1.6 var(--c4-mono);
}
#app .dash-qv .dash-qv-actions { display: flex; flex-wrap: wrap; gap: calc(10px * var(--k, 1)); align-items: center; }
#app .dash-qv .dash-qv-actions .btn { min-height: calc(46px * var(--k, 1)); border-radius: 999px; padding: 0 calc(20px * var(--k, 1)); font: 600 calc(13.5px * var(--k, 1))/1 var(--font-body); }
#app .dash-qv .dash-qv-actions .btn-primary { background: linear-gradient(145deg, var(--c4-or), var(--c4-or2)); color: var(--c4-ink); border: 0; }
#app .dash-qv .dash-qv-actions .btn-secondary, #app .dash-qv .dash-qv-actions .btn-ghost { background: transparent; color: var(--c4-off); border: 1px solid rgba(224, 149, 90, .6); }
#app .dash-qv .dash-qv-actions .btn-secondary:hover { border-color: var(--c4-or); color: var(--c4-off); }
#app .dash-qv .dash-qv-actions .section-link { flex-basis: 100%; margin-left: 0 !important; font: 600 calc(11.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .2em; text-transform: uppercase; color: var(--c4-amber); }
html.uw #app .c4-works-sec .dash-reel { columns: 6 calc(150px * var(--k, 1)); }

/* 5 · «.ДОСТИЖЕНИЯ» на дашборде — оранжевое поле, 4 раздела кольцами (иконка следующей ступени внутри), сводка слева */
#app .c4-ach {
  position: relative; display: grid; grid-template-columns: calc(280px * var(--k, 1)) minmax(0, 1fr); gap: calc(26px * var(--k, 1));
  padding: calc(28px * var(--k, 1)); border-radius: calc(28px * var(--k, 1)); background: var(--c4-field); color: var(--c4-ink); overflow: hidden;
}
#app .c4-ach-sum { display: flex; flex-direction: column; justify-content: space-between; gap: calc(14px * var(--k, 1)); }
#app .c4-ach-big { font: 200 calc(76px * var(--k, 1))/.85 var(--font-num); letter-spacing: -.05em; color: var(--c4-ink); }
#app .c4-ach-big span { font-size: .42em; letter-spacing: -.02em; color: rgba(17, 17, 17, .62); }
#app .c4-ach-lbl { font: 600 calc(11px * var(--k, 1))/1.4 var(--font-num); letter-spacing: .2em; text-transform: uppercase; color: var(--c4-ink); }
#app .c4-ach-bonus { font: 600 calc(14px * var(--k, 1))/1.4 var(--font-body); color: var(--c4-ink); }
#app .c4-ach-bonus b { font: 300 1.05em var(--font-num); }
#app .c4-ach-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14px * var(--k, 1)); }
#app .c4-cat {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(10px * var(--k, 1));
  padding: calc(18px * var(--k, 1)) calc(14px * var(--k, 1)) calc(16px * var(--k, 1)); border-radius: calc(24px * var(--k, 1));
  background: var(--c4-plate); border: 1px solid var(--c4-edge); color: var(--c4-off); text-decoration: none;
  transition: transform .25s ease; animation: c4in .5s cubic-bezier(.2, .8, .2, 1) both;
}
#app .c4-cat:nth-child(2) { animation-delay: .06s; } #app .c4-cat:nth-child(3) { animation-delay: .12s; } #app .c4-cat:nth-child(4) { animation-delay: .18s; }
#app .c4-cat:hover { transform: translateY(-3px); }
#app .c4-cat .c4-ring { width: calc(108px * var(--k, 1)); height: calc(108px * var(--k, 1)); }
#app .c4-cat .c4-ring img { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; }
#app .c4-cat.c4-lock .c4-ring img { filter: grayscale(1) brightness(.75); opacity: .55; }
#app .c4-cat-n { font: 700 calc(17px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
#app .c4-cat-n b { font: 300 calc(15px * var(--k, 1))/1 var(--font-num); color: var(--c4-amber); margin-left: .3em; }
#app .c4-cat-s { font: 500 calc(12.5px * var(--k, 1))/1.35 var(--font-body); color: var(--c4-off2); min-height: 2.7em; }
#app .c4-cat-s b { font: 300 1.06em var(--font-num); color: var(--c4-off); }
#app .c4-new { box-shadow: 0 0 0 2px var(--c4-amber), 0 0 calc(40px * var(--k, 1)) rgba(245, 155, 31, .65); animation: c4pop 1.1s cubic-bezier(.2, .8, .2, 1) both, c4glow 2.4s ease-in-out 1.1s 3; }
#app .c4-new::after {
  content: 'Новое'; position: absolute; top: calc(10px * var(--k, 1)); right: calc(10px * var(--k, 1)); padding: calc(4px * var(--k, 1)) calc(9px * var(--k, 1));
  border-radius: 999px; background: var(--c4-amber); color: var(--c4-ink); font: 700 calc(10px * var(--k, 1))/1 var(--font-num); letter-spacing: .12em; text-transform: uppercase;
}
@keyframes c4pop { 0% { transform: scale(.82); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes c4glow { 50% { box-shadow: 0 0 0 2px var(--c4-amber), 0 0 calc(70px * var(--k, 1)) rgba(245, 155, 31, .9); } }

/* 6 · «.ДЛЯ ВАС» — постеры готовых стилей (плашка PROMPT, промпт не показываем) + новинки из новостей */
#app .c4-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: calc(14px * var(--k, 1)); align-items: start; }
#app .c4-recs > .c4-news { align-self: stretch; }
#app .c4-style {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: calc(24px * var(--k, 1)); overflow: hidden;
  border: 1px solid var(--c4-edge); background: var(--c4-plate); color: var(--c4-off); text-decoration: none; box-shadow: var(--c4-card-shadow);
}
#app .c4-style img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
#app .c4-style:hover img { transform: scale(1.04); }
#app .c4-style::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(15, 52, 68, .94)); }
#app .c4-style-tag { position: absolute; z-index: 2; top: calc(12px * var(--k, 1)); left: calc(12px * var(--k, 1)); padding: calc(5px * var(--k, 1)) calc(10px * var(--k, 1)); border-radius: 999px; background: var(--c4-or); color: var(--c4-ink); font: 700 calc(10px * var(--k, 1))/1 var(--font-num); letter-spacing: .22em; }
#app .c4-style-b { position: absolute; z-index: 2; left: calc(14px * var(--k, 1)); right: calc(14px * var(--k, 1)); bottom: calc(14px * var(--k, 1)); display: flex; align-items: flex-end; gap: calc(10px * var(--k, 1)); }
#app .c4-style-n { flex: 1 1 auto; min-width: 0; font: 700 calc(19px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
#app .c4-style-n::before { content: '.'; color: var(--c4-or); }
#app .c4-style-b i { flex: none; width: calc(36px * var(--k, 1)); height: calc(36px * var(--k, 1)); border-radius: 50%; background: var(--c4-or) var(--c4-arrow-ink) center / 44% no-repeat; }
#app .c4-news { display: flex; flex-direction: column; gap: calc(14px * var(--k, 1)); }
#app .c4-new-item {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: calc(10px * var(--k, 1)); padding: calc(18px * var(--k, 1)) calc(20px * var(--k, 1));
  border-radius: calc(24px * var(--k, 1)); background: var(--c4-card); border: 1px solid var(--c4-card-edge); box-shadow: var(--c4-card-shadow); color: var(--text-primary); text-decoration: none;
}
#app .c4-new-k { font: 600 calc(10.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ember); }
#app .c4-new-t { font: 700 calc(18px * var(--k, 1))/1.12 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--text-primary); }
#app .c4-new-go { display: inline-flex; align-items: center; gap: calc(10px * var(--k, 1)); font: 700 calc(13px * var(--k, 1))/1 var(--font-body); color: var(--text-primary); }
#app .c4-new-go::after { content: ''; width: calc(30px * var(--k, 1)); height: calc(30px * var(--k, 1)); border-radius: 50%; background: var(--c4-petrol2) var(--c4-arrow) center / 46% no-repeat; }
#app .c4-new-item:hover { border-color: var(--c4-or); }

/* 7 · «.РАЗДЕЛЫ» 01–06 — оглавление как «.ВОЗМОЖНОСТИ» главной: номер Montserrat 200 · название Oswald · строка сути */
#app .c4-idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--c4-card-edge); }
#app .c4-idx a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(18px * var(--k, 1));
  padding: calc(18px * var(--k, 1)) calc(14px * var(--k, 1)); border-bottom: 1px solid var(--c4-card-edge); color: var(--text-primary); text-decoration: none; transition: background .2s ease;
}
#app .c4-idx a:hover { background: var(--c4-card); }
#app .c4-idx-no { font: 200 calc(38px * var(--k, 1))/1 var(--font-num); letter-spacing: -.04em; color: var(--accent-ember); }
#app .c4-idx-n { display: block; font: 700 calc(20px * var(--k, 1))/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
#app .c4-idx-s { display: block; margin-top: calc(5px * var(--k, 1)); font: 500 calc(12.5px * var(--k, 1))/1.35 var(--font-body); color: var(--text-secondary); }
#app .c4-idx a::after { content: ''; width: calc(34px * var(--k, 1)); height: calc(34px * var(--k, 1)); border-radius: 50%; background: var(--c4-petrol2) var(--c4-arrow) center / 44% no-repeat; }

/* 8 · инструменты (Claude · Текст на фото · Пригласи друга) — три плитки в ряд, петроль + медная кромка, без свечений */
#app .c4-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14px * var(--k, 1)); margin-top: calc(34px * var(--k, 1)); }
#app .c4-tools > a { margin: 0 !important; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: calc(12px * var(--k, 1)); min-height: 100%;
  padding: calc(22px * var(--k, 1)) !important; border-radius: calc(24px * var(--k, 1)) !important; background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important;
  color: var(--c4-off) !important; box-shadow: var(--c4-card-shadow) !important; }
#app .c4-tools :is(.dash-claude-glow, .dash-txtool-glow, .dash-refer-glow) { display: none !important; }
#app .c4-tools :is(.dash-claude-logo, .dash-txtool-ic, .dash-refer-ic) { width: calc(48px * var(--k, 1)) !important; height: calc(48px * var(--k, 1)) !important; border-radius: 50% !important; background: var(--c4-or) !important; color: var(--c4-ink) !important; box-shadow: none !important; display: grid; place-items: center; }
#app .c4-tools :is(.dash-claude-logo, .dash-txtool-ic, .dash-refer-ic) svg { width: 52% !important; height: 52% !important; }
#app .c4-tools .dash-claude-logo svg g { stroke: var(--c4-ink); } #app .c4-tools .dash-claude-logo svg circle { fill: var(--c4-ink); }
#app .c4-tools :is(.dash-claude-title, .dash-txtool-title, .dash-refer-title) { font: 700 calc(24px * var(--k, 1))/1 var(--font-display) !important; text-transform: uppercase; color: var(--c4-off) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
#app .c4-tools :is(.dash-claude-eyebrow, .dash-txtool-eyebrow, .dash-refer-eyebrow) { font: 600 calc(10px * var(--k, 1))/1 var(--font-num) !important; letter-spacing: .22em !important; color: var(--c4-amber) !important; }
#app .c4-tools :is(.dash-claude-badge, .dash-txtool-badge, .dash-refer-badge) { background: var(--c4-or) !important; color: var(--c4-ink) !important; border: 0 !important; }
#app .c4-tools :is(.dash-claude-sub, .dash-txtool-sub, .dash-refer-sub) { color: var(--c4-off2) !important; font-size: calc(13px * var(--k, 1)) !important; }
#app .c4-tools .dash-claude-chips span { border-color: var(--c4-hair) !important; background: transparent !important; color: var(--c4-off) !important; }
#app .c4-tools :is(.dash-claude-go, .dash-txtool-go, .dash-refer-go) { margin-top: auto !important; margin-left: 0 !important; padding: calc(10px * var(--k, 1)) calc(18px * var(--k, 1)) !important; border-radius: 999px !important; background: var(--c4-or) !important; color: var(--c4-ink) !important; box-shadow: none !important; font-weight: 700 !important; }

/* 9 · Академия и полоса цифр — карточкой темы, номер уроков Montserrat 200 на оранжевом круге */
#app #dash-academy-sec .section-title::before { content: '.'; color: var(--c4-or); }
#app .dash-acad { border-radius: calc(24px * var(--k, 1)); background: var(--c4-card); border: 1px solid var(--c4-card-edge); box-shadow: var(--c4-card-shadow); }
#app .dash-acad-num { font-family: var(--font-num) !important; font-weight: 200 !important; background: var(--c4-or) !important; color: var(--c4-ink) !important; border-radius: 50% !important; }
#app .dash-acad-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
#app .dash-stats { margin-top: calc(34px * var(--k, 1)); }

/* 10 · СТРАНИЦА /achievements — петроль-постер героя, оранжевое поле итога, фильтры-пилюли, значки-кольца */
#app .a4 [hidden] { display: none !important; }
#app .a4.a4-g { max-width: calc(1560px * var(--k, 1)); padding: calc(28px * var(--k, 1)) clamp(16px, 4vw, calc(64px * var(--k, 1))) calc(60px * var(--k, 1)); }
#app .a4-fcats { display: grid; gap: calc(9px * var(--k, 1)); }
#app .a4-fc { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px calc(10px * var(--k, 1)); font: 700 calc(12px * var(--k, 1))/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--c4-ink); }
#app .a4-fc b { font: 300 calc(14px * var(--k, 1))/1 var(--font-num); letter-spacing: 0; }
#app .a4-fc .c4-bar { grid-column: 1 / -1; margin-top: calc(4px * var(--k, 1)); height: calc(4px * var(--k, 1)); background: rgba(17, 17, 17, .16); }
#app .a4-fc .c4-bar i { background: var(--c4-petrol2); }
#app .a4 { max-width: calc(1480px * var(--k, 1)); margin: 0 auto; padding: calc(8px * var(--k, 1)) 0 calc(60px * var(--k, 1)); }
#app .a4-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--a4-field, clamp(calc(240px * var(--k, 1)), 30%, calc(380px * var(--k, 1))));
  border-radius: calc(28px * var(--k, 1)); overflow: hidden; background: var(--c4-plate); border: 1px solid var(--c4-edge); color: var(--c4-off);
  box-shadow: 0 calc(40px * var(--k, 1)) calc(90px * var(--k, 1)) calc(-50px * var(--k, 1)) rgba(4, 22, 30, .8);
}
#app .a4-hero::before { content: ''; position: absolute; z-index: 2; left: calc(40px * var(--k, 1)); top: 0; width: calc(64px * var(--k, 1)); height: calc(4px * var(--k, 1)); border-radius: 0 0 4px 4px; background: var(--c4-or); }
#app .a4-hero-l { padding: calc(40px * var(--k, 1)); min-width: 0; }
#app .a4-k { font: 600 calc(11.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .3em; text-transform: uppercase; color: var(--c4-amber); }
#app .a4-h { margin: calc(14px * var(--k, 1)) 0 0; font: 700 clamp(calc(40px * var(--k, 1)), 5vw, calc(76px * var(--k, 1)))/.92 var(--font-display); text-transform: uppercase; color: var(--c4-off); }
#app .a4-h::before { content: '.'; color: var(--c4-or); }
#app .a4-sub { margin: calc(12px * var(--k, 1)) 0 0; font: 500 calc(16px * var(--k, 1))/1.45 var(--font-body); color: var(--c4-off2); max-width: 36em; }
#app .a4-hero .c4-lvl { margin-top: calc(26px * var(--k, 1)); max-width: calc(620px * var(--k, 1)); }
#app .a4-hero .c4-ring { width: calc(96px * var(--k, 1)); height: calc(96px * var(--k, 1)); }
#app .a4-hero .c4-ring b { font-size: calc(38px * var(--k, 1)); }
#app .a4-field { display: flex; flex-direction: column; justify-content: space-between; gap: calc(16px * var(--k, 1)); padding: calc(34px * var(--k, 1)) calc(30px * var(--k, 1)); background: var(--c4-field); color: var(--c4-ink); }
#app .a4-field .c4-ach-big { font-size: calc(84px * var(--k, 1)); }
#app .a4-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(18px * var(--k, 1)); border-radius: calc(24px * var(--k, 1)); background: var(--c4-plate); border: 1px solid var(--c4-edge); color: var(--c4-off); overflow: hidden; }
#app .a4-stat { padding: calc(20px * var(--k, 1)) calc(24px * var(--k, 1)); border-right: 1px solid var(--c4-hair); }
#app .a4-stat:last-child { border-right: 0; }
#app .a4-stat-v { font: 200 calc(44px * var(--k, 1))/.95 var(--font-num); letter-spacing: -.04em; color: var(--c4-off); }
#app .a4-stat-l { margin-top: calc(8px * var(--k, 1)); font: 600 calc(10.5px * var(--k, 1))/1.3 var(--font-num); letter-spacing: .2em; text-transform: uppercase; color: var(--c4-off2); }
#app .a4-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(10px * var(--k, 1)); margin: calc(34px * var(--k, 1)) 0 calc(14px * var(--k, 1)); }
#app .a4-bar .c4-h { margin-right: calc(14px * var(--k, 1)); }
#app .a4-pill, #app .a4 .ach-tab {
  display: inline-flex; align-items: center; gap: calc(8px * var(--k, 1)); min-height: calc(42px * var(--k, 1)); padding: 0 calc(16px * var(--k, 1));
  border-radius: 999px; border: 1px solid var(--c4-card-edge); background: transparent; color: var(--text-primary); cursor: pointer;
  font: 600 calc(13.5px * var(--k, 1))/1 var(--font-body);
}
#app .a4 .ach-tab svg { display: none; }
#app .a4 .ach-tab-count { font: 300 calc(13px * var(--k, 1))/1 var(--font-num); color: var(--accent-ember); background: none; padding: 0; }
#app .a4-pill:hover, #app .a4 .ach-tab:hover { border-color: var(--c4-or); }
#app .a4-pill.on, #app .a4 .ach-tab.active { background: var(--c4-sel-bg); border-color: var(--c4-sel-bg); color: var(--c4-sel-fg); }
#app .a4-pill.on .ach-tab-count, #app .a4 .ach-tab.active .ach-tab-count { color: inherit; opacity: .75; }
#app .a4-states { display: inline-flex; gap: calc(6px * var(--k, 1)); margin-left: auto; }
#app .a4 #ach-tabs { display: contents; }
#app .a4 .ach-cat-summary { margin: 0 0 calc(16px * var(--k, 1)); font: 500 calc(14.5px * var(--k, 1))/1.4 var(--font-body); color: var(--text-secondary); }
#app .a4 .ach-cat-summary b { font: 300 1.08em var(--font-num); color: var(--text-primary); }
#app .a4 .ach-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(250px * var(--k, 1)), 1fr)); gap: calc(14px * var(--k, 1)); }
#app .a4-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(8px * var(--k, 1));
  padding: calc(22px * var(--k, 1)) calc(18px * var(--k, 1)) calc(18px * var(--k, 1)); border-radius: calc(26px * var(--k, 1));
  background: var(--c4-card); border: 1px solid var(--c4-card-edge); box-shadow: var(--c4-card-shadow); color: var(--text-primary);
  animation: c4in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms);
}
#app .a4-card.on { background: var(--c4-plate); border-color: var(--c4-edge); color: var(--c4-off); }
#app .a4-card .c4-ring { width: calc(120px * var(--k, 1)); height: calc(120px * var(--k, 1)); }
#app .a4-card .c4-ring .c4-rt { stroke: var(--c4-track); }
#app .a4-card.on .c4-ring .c4-rt { stroke: var(--c4-hair); }
#app .a4-card .c4-ring img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; }
#app .a4-card:not(.on) .c4-ring img { filter: grayscale(1); opacity: .5; }
#app .a4-cat { font: 600 calc(10px * var(--k, 1))/1 var(--font-num); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-ember); }
#app .a4-card.on .a4-cat { color: var(--c4-amber); }
#app .a4-t { font: 700 calc(20px * var(--k, 1))/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
#app .a4-m { font: 500 calc(13px * var(--k, 1))/1.3 var(--font-body); color: var(--text-secondary); }
#app .a4-card.on .a4-m { color: var(--c4-off2); }
#app .a4-m b { font: 300 1.06em var(--font-num); color: inherit; }
#app .a4-foot { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--k, 1)); margin-top: auto; padding-top: calc(6px * var(--k, 1)); flex-wrap: wrap; }
#app .a4-bonus { padding: calc(6px * var(--k, 1)) calc(11px * var(--k, 1)); border-radius: 999px; border: 1px solid var(--c4-edge); font: 300 calc(13px * var(--k, 1))/1 var(--font-num); }
#app .a4-card.on .a4-bonus { background: var(--c4-or); border-color: var(--c4-or); color: var(--c4-ink); font-weight: 400; }
#app .a4-share { display: inline-flex; align-items: center; gap: 6px; min-height: calc(32px * var(--k, 1)); padding: 0 calc(12px * var(--k, 1)); border-radius: 999px; border: 1px solid rgba(242, 238, 230, .4); background: transparent; color: var(--c4-off); font: 600 calc(12px * var(--k, 1))/1 var(--font-body); cursor: pointer; }
#app .a4-share:hover { border-color: var(--c4-or); color: var(--c4-amber); }
#app .a4-empty { grid-column: 1 / -1; padding: calc(28px * var(--k, 1)); border-radius: calc(24px * var(--k, 1)); background: var(--c4-card); border: 1px dashed var(--c4-card-edge); color: var(--text-secondary); text-align: center; }

/* 11 · ГОСТЬ на /achievements — честный экран «откроются после входа»: настоящие ступени ядра, замки, вход/регистрация */
#app .a4-guest { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-radius: calc(28px * var(--k, 1)); overflow: hidden; border: 1px solid var(--c4-edge); background: var(--c4-plate); color: var(--c4-off); }
#app .a4-guest-l { padding: calc(44px * var(--k, 1)); display: flex; flex-direction: column; justify-content: center; gap: calc(16px * var(--k, 1)); }
#app .a4-guest-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12px * var(--k, 1)); padding: calc(32px * var(--k, 1)); background: var(--c4-field); align-content: center; }
#app .a4-gb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: calc(14px * var(--k, 1)) 6px; border-radius: calc(20px * var(--k, 1)); background: var(--c4-plate); border: 1px solid var(--c4-edge); }
#app .a4-gb img { width: calc(64px * var(--k, 1)); height: calc(64px * var(--k, 1)); object-fit: contain; filter: grayscale(1) brightness(.85); opacity: .6; }
#app .a4-gb span { font: 300 calc(18px * var(--k, 1))/1 var(--font-num); color: var(--c4-off); }
#app .a4-gb::after { content: ''; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; background: var(--c4-amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
#app .a4-guest .c4-quick { margin-top: calc(8px * var(--k, 1)); }
#app .a4-ghost { display: inline-flex; align-items: center; min-height: calc(50px * var(--k, 1)); padding: 0 calc(22px * var(--k, 1)); border-radius: 999px; border: 1px solid var(--c4-edge); color: var(--c4-off); font: 700 calc(14px * var(--k, 1))/1 var(--font-body); text-decoration: none; }
#app .a4-ghost:hover { border-color: var(--c4-or); }

/* 12 · АДАПТИВ: узкое окно, телефон (дашборд и /achievements), 34″ — через --k */
@media (max-width: 1180px) {
  #app .c4-recs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .c4-recs .c4-style:nth-child(4) { display: none; }
  #app .c4-news { grid-column: 1 / -1; flex-direction: row; }
  #app .c4-ach { grid-template-columns: 1fr; }
  #app .c4-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #app .c4-h, #app .c4-works-sec .section-title { font-size: 25px; }
  #app .c4-count { font-size: 24px; }
  #app .c4-head, #app .c4-works-sec .section-header { flex-wrap: nowrap; align-items: center; }
  #app .c4-works-sec .section-title, #app .c4-h { white-space: nowrap; }
  #app .c4-more, #app .c4-works-sec .dash-reel-ctrl .section-link { font-size: 0; gap: 0; }
  #app .c4-tools > a { padding: 18px !important; }
  #app .c4-lvl { margin-top: 16px; gap: 12px; }
  #app .c4-ring { width: 60px; height: 60px; }
  #app .c4-ring b { font-size: 24px; }
  #app .c4-quick { margin-top: 16px; gap: 8px; }
  #app .c4-go { width: 100%; justify-content: space-between; }
  #app .c4-chip { min-height: 42px; padding: 0 14px; font-size: 13px; }
  #app .c4-works-sec .dash-reel { columns: 2; column-gap: 10px; }
  #app .c4-works-sec .dash-reel > * { margin-bottom: 10px !important; border-radius: 16px; }
  #app .c4-works-sec .dash-reel-time, #app .c4-works-sec .dash-reel-dl { opacity: 1; }
  #app .c4-works-sec .dash-reel-card:nth-child(n+9) { display: none; }
  #app .dash-qv .dash-qv-card { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  #app .dash-qv .dash-qv-close { top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; }   /* 02.10 (Грок №19): не под «чёлкой» / Dynamic Island */
  #app .dash-qv .dash-qv-slot img, #app .dash-qv .dash-qv-slot vaiman-video { max-height: 52vh !important; }
  #app .dash-qv .dash-qv-meta { padding: 0; justify-content: flex-start; max-height: 42vh; }
  #app .dash-qv .dash-qv-type { font-size: 30px; }
  #app .dash-qv .dash-qv-prompt { max-height: 16vh; font-size: 12px; }
  #app .dash-qv .dash-qv-actions .btn { min-height: 42px; padding: 0 16px; font-size: 13px; }
  #app .c4-ach { padding: 18px; border-radius: 22px; gap: 16px; }
  #app .c4-ach-big { font-size: 56px; }
  #app .c4-ach-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .c4-cat .c4-ring { width: 84px; height: 84px; }
  #app .c4-recs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  #app .c4-recs::-webkit-scrollbar { display: none; }
  #app .c4-recs .c4-style { flex: 0 0 62%; scroll-snap-align: start; display: block !important; }
  #app .c4-news { flex: 0 0 80%; flex-direction: column; scroll-snap-align: start; }
  #app .c4-idx { grid-template-columns: 1fr; }
  #app .c4-tools { grid-template-columns: 1fr; }
  #app .a4-hero, #app .a4-guest { grid-template-columns: 1fr; border-radius: 22px; }
  #app .a4-hero-l, #app .a4-guest-l { padding: 26px 20px 22px; }
  #app .a4-hero::before { left: 20px; width: 48px; }
  #app .a4-field { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  #app .a4-field .c4-ach-big { font-size: 58px; }
  #app .a4-hero .c4-ring { width: 72px; height: 72px; }
  #app .a4-stat { padding: 14px; }
  #app .a4-stat-v { font-size: 28px; }
  #app .a4-stat-l { font-size: 9px; letter-spacing: .12em; }
  #app .a4-bar { gap: 8px; }
  #app .a4-states { margin-left: 0; width: 100%; }
  #app .a4 .ach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .a4-card { padding: 16px 10px 14px; border-radius: 20px; }
  #app .a4-card .c4-ring { width: 88px; height: 88px; }
  #app .a4-t { font-size: 16px; }
  #app .a4-guest-r { padding: 20px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .c4-cat, #app .a4-card, #app .dash-qv .dash-qv-card, #app .c4-new { animation: none !important; }
  #app .c4-ring .c4-rf, #app .c4-bar i { transition: none; }
}

/* ═══ 13 · ПОДАЧА ГЛАВНОЙ ВНУТРИ (Вячеслав 01.10: «снаружи сочетание сильное, а внутри его не ощущается») ═══════════════
   Кабинет = «станции» как полёт главной: каждая секция — своё поле: ОРАНЖЕВОЕ поле с петроль-объектами («.МОИ РАБОТЫ»,
   цифры платформы) или КАДР ПОЛЁТА (q_n10 пирамиды — «.ДОСТИЖЕНИЯ», q_n04 бульвар — «.ДЛЯ ВАС», q_n03 зал панелей —
   «.РАЗДЕЛЫ»; телефон — свои вертикали qm_*) с петроль-плашками и медной кромкой. Кадр грузится, только когда станция
   подъезжает к экрану (класс .c4-in ставит js). Заголовки — Oswald огромный с точкой, номер станции Montserrat 200.
   Светлая тема = «постер на бумаге»: тёплый лист #F2EEE6 между станциями, сами станции — те же сильные поля и кадры. */
#app .dash-hero, #app .c4-st { position: relative; isolation: isolate; overflow: hidden; border-radius: calc(30px * var(--k, 1)); }
#app .c4-st { margin-top: calc(26px * var(--k, 1)); padding: calc(40px * var(--k, 1)) calc(40px * var(--k, 1)) calc(44px * var(--k, 1)); }
#app .c4-st-or { background: var(--c4-field); color: var(--c4-ink); }
#app .c4-st-fr { background: var(--c4-petrol2); color: var(--c4-off); min-height: calc(560px * var(--k, 1)); }
#app .c4-st-fr::before { content: ''; position: absolute; z-index: -2; inset: 0; background: var(--c4-petrol2) center / cover no-repeat; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); }
#app .c4-st-fr::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(15, 52, 68, 0) 40%, rgba(15, 52, 68, .55) 100%); }
#app .c4-st-fr.c4-in::before { transform: none; }
#app #c4-ach-sec.c4-in::before { background-image: url('/gallery/flight/q_n10.webp'); background-position: 70% 60%; }
#app #c4-recs-sec.c4-in::before { background-image: url('/gallery/flight/q_n04.webp'); background-position: 50% 40%; }
#app #c4-idx-sec.c4-in::before { background-image: url('/gallery/flight/q_n03.webp'); background-position: 50% 30%; }
@media (max-width: 760px) {
  #app #c4-ach-sec.c4-in::before { background-image: url('/gallery/flight/qm_n10.webp'); background-position: 60% 30%; }
  #app #c4-recs-sec.c4-in::before { background-image: url('/gallery/flight/qm_n04.webp'); }
  #app #c4-idx-sec.c4-in::before { background-image: url('/gallery/flight/qm_n03.webp'); }
}
/* номер станции + надзаголовок, огромный Oswald */
#app .c4-eye { display: flex; align-items: center; gap: calc(14px * var(--k, 1)); flex-basis: 100%; margin-bottom: calc(10px * var(--k, 1));
  font: 600 calc(11.5px * var(--k, 1))/1 var(--font-num); letter-spacing: .3em; text-transform: uppercase; }
#app .c4-eye b { font: 200 calc(44px * var(--k, 1))/.8 var(--font-num); letter-spacing: -.04em; }
#app .c4-eye::after { content: ''; flex: 0 0 calc(48px * var(--k, 1)); height: 2px; background: currentColor; opacity: .55; }
#app .c4-h, #app .c4-works-sec .section-title { font-size: clamp(calc(40px * var(--k, 1)), 4.4vw, calc(76px * var(--k, 1))); line-height: .9; }
#app .c4-st-or .c4-h, #app .c4-st-or .section-title, #app .c4-st-or .c4-eye { color: var(--c4-ink); }
#app .c4-st-or .c4-h::before, #app .c4-st-or .section-title::before { color: var(--c4-off); }
#app .c4-st-or .c4-count { color: var(--c4-ink); opacity: .7; font-size: calc(46px * var(--k, 1)); }
#app .c4-st-or .dash-reel-ctrl .section-link { color: var(--c4-ink); }
#app .c4-works-sec .section-header { flex-wrap: wrap; margin-bottom: calc(24px * var(--k, 1)); }
#app .c4-works-sec .dash-reel > * { border-color: rgba(15, 52, 68, .9); box-shadow: 0 calc(26px * var(--k, 1)) calc(40px * var(--k, 1)) calc(-26px * var(--k, 1)) rgba(15, 52, 68, .75); }
#app .c4-works-sec .dash-reel-card:hover { border-color: var(--c4-petrol2); transform: translateY(-6px) rotate(-.4deg); }
/* на кадре — шапка станции петроль-плашкой с оранжевым язычком (как «.ГОТОВЫЕ СТИЛИ» главной) */
#app .c4-st-fr .c4-head {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: calc(12px * var(--k, 1));
  max-width: min(100%, calc(560px * var(--k, 1))); margin-bottom: calc(22px * var(--k, 1)); padding: calc(24px * var(--k, 1)) calc(28px * var(--k, 1));
  border-radius: calc(24px * var(--k, 1)); background: var(--c4-plate); border: 1px solid var(--c4-edge); color: var(--c4-off);
  box-shadow: 0 calc(30px * var(--k, 1)) calc(60px * var(--k, 1)) calc(-30px * var(--k, 1)) rgba(4, 22, 30, .8);
}
#app .c4-st-fr .c4-head::before { content: ''; position: absolute; left: calc(28px * var(--k, 1)); top: 0; width: calc(48px * var(--k, 1)); height: calc(4px * var(--k, 1)); border-radius: 0 0 4px 4px; background: var(--c4-or); }
#app .c4-st-fr .c4-h { color: var(--c4-off); }
#app .c4-st-fr .c4-eye { color: var(--c4-amber); margin-bottom: 0; }
#app .c4-st-fr .c4-more { margin-left: 0; color: var(--c4-off2); }
#app .c4-st-fr .c4-more::after { background-color: var(--c4-or); background-image: var(--c4-arrow-ink); }
/* «.ДОСТИЖЕНИЯ» на кадре пирамид: петроль-плашка, кольца — оранжевые объекты */
#app #c4-ach-sec .c4-ach { background: var(--c4-plate); border: 1px solid var(--c4-edge); color: var(--c4-off); max-width: calc(1180px * var(--k, 1));
  box-shadow: 0 calc(40px * var(--k, 1)) calc(80px * var(--k, 1)) calc(-40px * var(--k, 1)) rgba(4, 22, 30, .85); }
#app #c4-ach-sec .c4-ach-big, #app #c4-ach-sec .c4-ach-lbl, #app #c4-ach-sec .c4-ach-bonus { color: var(--c4-off); }
#app #c4-ach-sec .c4-ach-big { font-size: calc(110px * var(--k, 1)); }
#app #c4-ach-sec .c4-ach-big span { color: var(--c4-amber); }
#app #c4-ach-sec .c4-cat { background: var(--c4-field); color: var(--c4-ink); border-color: transparent; }
#app #c4-ach-sec .c4-cat .c4-ring .c4-rt { stroke: rgba(17, 17, 17, .18); }
#app #c4-ach-sec .c4-cat .c4-ring .c4-rf { stroke: var(--c4-petrol2); }
#app #c4-ach-sec .c4-cat-n b { color: var(--c4-petrol2); }
#app #c4-ach-sec .c4-cat-s { color: var(--c4-ink); }
#app #c4-ach-sec .c4-cat-s b { color: var(--c4-ink); }
#app #c4-ach-sec .c4-cat.c4-lock .c4-ring img { filter: grayscale(.85) brightness(.55); opacity: .65; }
/* «.ДЛЯ ВАС»: постеры «.PROMPT» как на главной — имя стиля сверху мелко, огромное .PROMPT, пилюля «Примерить» */
#app .c4-style { border-color: var(--c4-edge); }
#app .c4-style-b { flex-direction: column; align-items: flex-start; gap: calc(6px * var(--k, 1)); }
#app .c4-style-n { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(12px * var(--k, 1)); letter-spacing: .14em; color: var(--c4-amber); }
#app .c4-style-n::before { content: none; }
#app .c4-style-p { font: 700 calc(36px * var(--k, 1))/.9 var(--font-display); color: var(--c4-off); letter-spacing: -.005em; }
#app .c4-style-p::before { content: '.'; color: var(--c4-or); }
#app .c4-style-b i { width: auto; height: auto; padding: calc(9px * var(--k, 1)) calc(40px * var(--k, 1)) calc(9px * var(--k, 1)) calc(16px * var(--k, 1)); border-radius: 999px;
  background: var(--c4-or) var(--c4-arrow-ink) right calc(12px * var(--k, 1)) center / calc(16px * var(--k, 1)) no-repeat; color: var(--c4-ink);
  font: 700 calc(11px * var(--k, 1))/1 var(--font-num); font-style: normal; letter-spacing: .18em; text-transform: uppercase; }
#app .c4-style-tag { display: none; }
#app .c4-style:hover { transform: translateY(-6px); }
#app .c4-style { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
#app .c4-new-item { background: var(--c4-plate); border-color: var(--c4-edge); color: var(--c4-off); }
#app .c4-new-t, #app .c4-new-go { color: var(--c4-off); }
#app .c4-new-k { color: var(--c4-amber); }
#app .c4-new-go::after { background-color: var(--c4-or); background-image: var(--c4-arrow-ink); }
/* «.РАЗДЕЛЫ» на зале панелей — петроль-плашка, номера Montserrat 200 крупно */
#app #c4-idx-sec .c4-idx { border-radius: calc(26px * var(--k, 1)); background: var(--c4-plate); border: 1px solid var(--c4-edge); overflow: hidden; color: var(--c4-off); }
#app #c4-idx-sec .c4-idx a { color: var(--c4-off); border-color: var(--c4-hair); padding: calc(24px * var(--k, 1)) calc(22px * var(--k, 1)); }
#app #c4-idx-sec .c4-idx a:hover { background: rgba(245, 122, 30, .14); }
#app #c4-idx-sec .c4-idx-no { font-size: calc(54px * var(--k, 1)); color: var(--c4-or); }
#app #c4-idx-sec .c4-idx-n { font-size: calc(24px * var(--k, 1)); }
#app #c4-idx-sec .c4-idx-s { color: var(--c4-off2); }
#app #c4-idx-sec .c4-idx a::after { background-color: var(--c4-or); background-image: var(--c4-arrow-ink); }
/* инструменты: крайние петроль, средняя — оранжевое поле (как тарифы главной); новость, плашка Telegram, Академия — петроль */
#app .c4-tools > a:nth-child(3), #app .c4-tools > a.dash-txtool { background: var(--c4-field) !important; color: var(--c4-ink) !important; border-color: transparent !important; }
#app .c4-tools .dash-txtool :is(.dash-txtool-title, .dash-txtool-sub) { color: var(--c4-ink) !important; }
#app .c4-tools .dash-txtool .dash-txtool-eyebrow { color: var(--c4-ink) !important; }
#app .c4-tools .dash-txtool .dash-txtool-ic { background: var(--c4-petrol2) !important; color: var(--c4-or) !important; }
#app .c4-tools .dash-txtool .dash-txtool-go, #app .c4-tools .dash-txtool .dash-txtool-badge { background: var(--c4-petrol2) !important; color: var(--c4-off) !important; }
#app .c4-tools > a:hover { transform: translateY(-6px); }
#app .c4-tools > a { transition: transform .35s cubic-bezier(.2, .8, .2, 1) !important; }
#app .dash-news, #app .dash-tglink, #app .dash-acad { background: var(--c4-plate) !important; border: 1px solid var(--c4-edge) !important; color: var(--c4-off) !important; box-shadow: var(--c4-card-shadow) !important; }
#app :is(.dash-news-title, .dash-acad-title, .dash-tglink *) { color: var(--c4-off); }
#app :is(.dash-news-excerpt, .dash-news-date, .dash-acad-sub, .dash-acad-tools-lbl) { color: var(--c4-off2) !important; }
#app .dash-acad-tools a { color: var(--c4-off) !important; border-color: var(--c4-hair) !important; }
#app .dash-news-go, #app .dash-acad-go { color: var(--c4-amber) !important; }
#app .dash-stats { background: var(--c4-field) !important; border: 0 !important; }
#app #dash-academy-sec { margin-top: calc(34px * var(--k, 1)) !important; }
#app .dash-stats .dash-stat-num, #app .dash-stats .dash-stat-lbl { color: var(--c4-ink) !important; }
#app .dash-stats .dash-stat { border-color: rgba(17, 17, 17, .16) !important; }
/* герой: крупнее, баланс — оранжевое поле с тонкими цифрами (как счётчик главной), «Пополнить» — петроль на оранжевом */
#app .page-container .dash-hero { min-height: calc(440px * var(--k, 1)); }
#app .page-container .dash-hello { font-size: clamp(calc(44px * var(--k, 1)), 5.6vw, calc(104px * var(--k, 1))); }
#app .page-container .dash-hero .dash-balance-card { background: var(--c4-field); border: 0; color: var(--c4-ink); padding: calc(20px * var(--k, 1)) calc(26px * var(--k, 1)); }
#app .page-container .dash-hero .dash-balance-label, #app .page-container .dash-hero .dash-balance-value { color: var(--c4-ink); }
#app .page-container .dash-hero .dash-balance-value { font-size: calc(76px * var(--k, 1)); }
#app .page-container .dash-hero .dash-topup { background: var(--c4-plate) !important; color: var(--c4-off) !important; border: 1px solid var(--c4-edge) !important; }
/* движение: станции въезжают при прокрутке (js ставит html.c4-motion и .c4-in), уважаем prefers-reduced-motion */
html.c4-motion #app .c4-rv { opacity: 0; transform: translateY(calc(34px * var(--k, 1))); transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1); }
html.c4-motion #app .c4-rv.c4-in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  #app .c4-st { padding: 22px 16px 24px; border-radius: 24px; margin-top: 18px; }
  #app .c4-st-fr { min-height: 0; padding-top: 150px; }
  #app .c4-st-fr .c4-head { padding: 18px 18px; }
  #app .c4-eye b { font-size: 34px; }
  #app .c4-h, #app .c4-works-sec .section-title { font-size: 38px; }
  #app #c4-ach-sec .c4-ach-big { font-size: 72px; }
  #app .c4-style-p { font-size: 32px; }
  #app .page-container .dash-hero { min-height: 0; }
  #app .page-container .dash-hello { font-size: clamp(34px, 11vw, 46px); }
  #app .page-container .dash-hero .dash-balance-value { font-size: 44px; }
  #app #c4-idx-sec .c4-idx-no { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html.c4-motion #app .c4-rv { opacity: 1; transform: none; transition: none; }
  #app .c4-st-fr::before { transform: none; transition: none; }
}

/* ═══ 02.10 ЧИТАЕМОСТЬ — contrast_scan.py (WCAG 4,5:1), правила поверхностей кабинета; токены ember-light не тронуты ═══ */
/* «Мои генерации»: подпись по картинке — подложка темнее там, где стоят строки (было по светлой картинке 1,0–1,7:1) */
#app .hist-item-overlay { padding-top: calc(30px * var(--k, 1)) !important;
  background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .8) 30%, rgba(15, 52, 68, .95)) !important; }
#app .hist-item-date { color: rgba(242, 238, 230, .86) !important; }
#app .hist-item-status.done { background: #1F6B52 !important; color: #FFFFFF !important; }      /* 6,4:1 (было 3,8) */
#app .hist-item-status.failed { background: #A94444 !important; color: #FFFFFF !important; }    /* 5,8:1 */
[data-theme="dark"] #app .hist-item.is-gone .hist-item-gone { color: rgba(242, 238, 230, .82) !important; }   /* на петроле, не на оранжевом */
[data-theme="dark"] #app .hist-genchip .hist-genchip-n { opacity: 1 !important; color: rgba(242, 238, 230, .86) !important; }
[data-theme="dark"] #app .hist-genchip-ic--ph { color: #F9C27A !important; }
[data-theme="dark"] #app #hist-search::placeholder { color: #9FB0B8 !important; }
/* «Файл больше не хранится» на петроль-карточке ленты — светлым (серый светлой темы по петролю 1,7:1) */
#app :is(.c4-works, .dash-reel) .vm-gone { color: rgba(242, 238, 230, .86) !important; border-color: rgba(242, 238, 230, .24) !important; }
/* главная кабинета */
#app #dash-tglink-go { color: var(--c4-ink) !important; }                      /* на оранжевом: чёрный 6,9:1 (светлый 2,3) */
#app .c4-go small { opacity: .88 !important; }
#app .c4-chip b { color: #F9C27A !important; }                                  /* янтарь по чипу #395358: 3,8 → 5,1:1 */
#app .c4-works-sec .dash-reel-time { background: linear-gradient(180deg, rgba(15, 52, 68, 0), rgba(15, 52, 68, .8) 40%, rgba(15, 52, 68, .95)) !important; color: var(--c4-off) !important; }
:root:not([data-theme="dark"]) #app #dash-academy-sec .section-link { color: #9E3C08 !important; }
/* достижения: полученная карточка — off-white, категория тёмно-оранжевым, бонус на оранжевом — чёрным */
#app .a4 .a5-or .a4-card.on .a4-cat, #app .a4-card.on .a4-cat { color: #B8460A !important; }
#app .a4 .a5-or .a4-card.on .a4-bonus, #app .a4-card.on .a4-bonus { color: var(--c4-ink) !important; }
/* настройки: строки на петроль-карточке в обеих темах */
#app :is(.set-rd, .set-pmail, #set-pmail, #set-cache-sz) { color: #B2C3CA !important; }
#app #set-pbal { color: #F7B25A !important; }
#app #set-delete .set-rt { color: #F5A08C !important; }
/* рефералка: ссылка и кнопки соцсетей на петроле */
#app :is(#ref-link-value, #ref-link-max-value) { color: #F9C27A !important; }
#app .ref-share-tg { color: #5BBEF0 !important; }
#app .ref-share-vk { color: #8FB0E8 !important; }