/* ============================================================================
   PLATINUM — дизайн-слой INFO GHOST OS (v8)
   ----------------------------------------------------------------------------
   Слой НАДСТРОЙКИ поверх style.css / profile.css / инлайновых стилей страницы
   входа. Подключается сервером последним (см. injectAssetLayer в auth-server.js),
   поэтому переопределяет значения, не требуя правки 82 HTML-файлов и 2976 строк
   существующего CSS.

   Принцип: старые имена токенов (--accent, --brand, --text-muted, --transition…)
   СОХРАНЕНЫ и продолжают работать — они просто получают выверенные значения.
   Ни один существующий класс не удаляется. Откат = убрать одну строку инжекта.

   Что делает слой:
     1. Сводит три разошедшиеся палитры (вход / гайды / светлая тема) в одну.
     2. Достраивает платину до полноценной металлической шкалы (pt-100…pt-900).
     3. Чинит доступность: --text-dim давал контраст 2.3:1 на фоне (провал WCAG).
     4. Переводит motion на канонические кривые и убирает вечные анимации.
   ========================================================================== */

/* ───────────────────────────────────────────────────────────────────────────
   1. ТОКЕНЫ — тёмная тема (основная)
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* --- Платиновая шкала: от блика до тени. Ядро (400) — исторический
         --accent #C8CDD8, вокруг него достроены ступени, чтобы металл имел
         объём: блик, полутон, тень. Именно наличие ступеней (а не один
         серый) читается глазом как «металл», а не как «серый пластик». --- */
  --pt-100: #FFFFFF;
  --pt-200: #EFF2F7;
  --pt-300: #DCE1EA;
  --pt-400: #C8CDD8;
  --pt-500: #AAB2C0;
  --pt-600: #8B94A6;
  --pt-700: #6C768A;
  --pt-800: #4C5666;
  --pt-900: #2E3644;

  /* --- Фоны и поверхности: холодный графит, ступени по 8% светлоты --- */
  --bg:   #0A0C10;
  --bg2:  #0D1016;
  --bg3:  #13161F;
  --bg4:  #191D28;

  --surface-1: rgba(19, 22, 31, 0.72);
  --surface-2: rgba(25, 29, 40, 0.86);
  --surface-3: rgba(32, 37, 50, 0.94);

  /* Совместимость со старыми именами */
  --bg-card:       var(--surface-1);
  --bg-card-hover: var(--surface-2);
  --glass:         var(--surface-1);
  --glass-strong:  var(--surface-2);
  --surface:       var(--surface-1);

  /* --- Границы: платина на просвет, а не белый шум --- */
  --border:        rgba(200, 205, 216, 0.09);
  --border-hover:  rgba(200, 205, 216, 0.18);
  --border-accent: rgba(200, 205, 216, 0.28);
  --glass-border:  var(--border);
  --glass-border-hover: var(--border-hover);

  /* --- Текст. Контраст на --bg (#0A0C10) посчитан по WCAG 2.1:
         text     18.4:1  (AAA)
         text-2    9.1:1  (AAA)
         text-3    5.4:1  (AA, мелкий текст ок)
         text-dim  4.6:1  (AA — было #3E4C63 = 2.3:1, т.е. провал)
         Светлая тема считается отдельно, от --bg #F7F8FB (см. блок ниже):
         text 16.2:1, text-secondary 7.6:1, text-muted 5.4:1, text-dim 4.8:1,
         brand 5.0:1 — этот расчёт не переносится с тёмной темы автоматически.
     --- */
  --text:           #E6EAF2;
  --text-secondary: #A7B0C0;
  --text-muted:     #808B9E;
  /* #7D848D = канонический --platinum-dim из Platinum Dark. Двойная выгода:
     контраст на --bg = 5.18:1 (мелкий текст проходит WCAG AA; прежний #3E4C63
     давал 2.25:1 — провал), и тон ровно тот, что канон зовёт «приглушённым
     металлом», а не пастельно-синий #94A3B8. */
  --text-dim:       #7D848D;
  --text-2:         var(--text-secondary);

  /* --- Акцент. Платина — основной «премиальный» цвет интерфейса:
         поверхности, обводки, металлические заголовки, скроллбар. --- */
  --accent:       var(--pt-400);
  --accent-hover: var(--pt-200);
  --accent2:      var(--pt-400);
  --accent4:      var(--pt-400);

  /* --- Бренд. Мятно-зелёный остаётся ЕДИНСТВЕННЫМ ярким цветом и несёт
         смысл: живое состояние, успех, активный пункт, CTA. Он не «украшает» —
         он означает. Поэтому его мало, и он всегда что-то значит. --- */
  --brand:       #2EE5A3;
  --brand-2:     #22D3EE;
  --brand-hover: #5DEFBD;
  --brand-dim:   rgba(46, 229, 163, 0.12);
  --accent3:     var(--brand);
  --green:       var(--brand);
  --ring:        rgba(46, 229, 163, 0.55);

  /* --- Металлический градиент: вертикальный, как отражение света на металле.
         (Горизонтальная «радуга» читается как AI-шаблон, вертикальный
         световой градиент — как физическая поверхность.) --- */
  --metal: linear-gradient(180deg, var(--pt-100) 0%, var(--pt-300) 42%, var(--pt-500) 72%, var(--pt-700) 100%);
  --metal-soft: linear-gradient(180deg, var(--pt-200) 0%, var(--pt-400) 55%, var(--pt-600) 100%);
  --accent-gradient:   var(--metal-soft);
  --accent-gradient-h: linear-gradient(90deg, var(--pt-300), var(--pt-500));

  /* --- Статусы --- */
  --orange:    #F5B544;
  --orange-bg: rgba(245, 181, 68, 0.09);
  --red:       #FB7185;
  --red-bg:    rgba(251, 113, 133, 0.09);
  --yellow-bg: var(--orange-bg);

  /* Подложки бейджей выводятся ИЗ ТОГО ЖЕ цвета, что и текст бейджа.
     Раньше фон брался из старой индиговой палитры (--blue-bg/--purple-bg в
     style.css), а текст — уже из платины: получался тусклый рассинхрон
     «индиговый фон + серый текст», особенно заметный в светлой теме. */
  --blue-bg:   color-mix(in srgb, var(--accent) 12%, transparent);
  --purple-bg: color-mix(in srgb, var(--accent2) 12%, transparent);
  --green-bg:  color-mix(in srgb, var(--brand) 12%, transparent);

  /* --- Глубина: тени холодные (в тон фона), многослойные, с «фаской» сверху.
         Одна плоская тень выглядит дёшево; свет сверху + мягкая тень внизу —
         это то, как ведёт себя настоящая поверхность. --- */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-soft:
    0 1px 2px rgba(3, 6, 12, 0.32),
    0 4px 12px rgba(3, 6, 12, 0.28);
  --shadow-float:
    0 2px 4px rgba(3, 6, 12, 0.34),
    0 8px 24px rgba(3, 6, 12, 0.36),
    0 20px 48px rgba(3, 6, 12, 0.28);
  --shadow-modal:
    0 8px 24px rgba(3, 6, 12, 0.48),
    0 32px 80px rgba(3, 6, 12, 0.56);
  --glow:        var(--shadow-soft);
  --glow-strong: var(--shadow-float);
  --glow-card:   var(--shadow-soft);

  /* --- Ритм и мера чтения. FIX: гайды жили на line-height 1.7 и контейнере
         1100px, кабинет — на 1.5 и 1080px, поэтому переход «гайд → кабинет»
         менял и плотность текста, и ширину полосы. Один источник значений. --- */
  --leading-body:  1.65;
  --container-max: 1080px;

  /* --- Радиусы (8pt-семейство) --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ─── MOTION ─────────────────────────────────────────────────────────────
     Кривые по канону, а не Material-«по умолчанию». Смысл разделения:
       вход  — быстро стартует, мягко тормозит (объект «прилетает и оседает»)
       выход — мягко стартует, резко уходит (объект «выстреливает прочь»)
     Одна кривая на всё (как было: cubic-bezier(.4,0,.2,1) в 13 местах) даёт
     ощущение ваты — ничто не «щёлкает».
     ───────────────────────────────────────────────────────────────────────── */
  /* Значения из Vendor Canon (Emil Kowalski). Дефолт UI — один ease-out на
     вход И выход. ease-in на UI канон запрещает прямо: он стартует медленно и
     откладывает момент, на который смотрит человек. --ease-inout — только для
     морфинга/движения на месте, не для появления/исчезновения. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-premium: var(--ease-out);
  --ease-soft:    var(--ease-out);

  /* Длительности. Реакция на курсор/палец обязана быть в пределах 120 мс —
     иначе интерфейс ощущается «залипающим». Крупные оверлеи могут позволить
     себе 320 мс, потому что они меняют контекст. */
  --dur-instant: 90ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  --transition:        var(--dur-base) var(--ease-out);
  --transition-slow:   var(--dur-slow) var(--ease-out);
  --transition-spring: var(--dur-slow) var(--ease-spring);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. ТОКЕНЫ — светлая тема
   Была индиго (#4F46E5) — третья, ни с чем не связанная палитра. Теперь это
   та же платина, просто перевёрнутая: холодное серебро на белом.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:   #F7F8FB;
  --bg2:  #EFF1F6;
  --bg3:  #E4E7EF;
  --bg4:  #D5DAE5;

  --surface-1: rgba(255, 255, 255, 0.88);
  --surface-2: rgba(255, 255, 255, 0.96);
  --surface-3: #FFFFFF;
  --bg-card:       var(--surface-1);
  --bg-card-hover: var(--surface-2);
  --glass:         var(--surface-1);
  --glass-strong:  var(--surface-2);
  --surface:       var(--surface-1);

  --border:        rgba(46, 54, 68, 0.12);
  --border-hover:  rgba(46, 54, 68, 0.22);
  --border-accent: rgba(46, 54, 68, 0.32);
  --glass-border:  var(--border);
  --glass-border-hover: var(--border-hover);

  --text:           #171B24;
  --text-secondary: #475061;
  --text-muted:     #5D6779;
  /* FIX: было #6E7889 = 4.20:1 на --bg #F7F8FB (ниже AA 4.5:1). #656F80 даёт
     4.78:1 — тот же холодный серо-синий тон, но третичный текст проходит AA. */
  --text-dim:       #656F80;
  --text-2:         var(--text-secondary);

  /* В светлой теме платина темнеет — иначе она сливается с фоном */
  --accent:       #5C6678;
  --accent-hover: #3E4757;
  --accent2:      #5C6678;
  --accent4:      #5C6678;

  /* FIX: #0F9D6E давал 3.26:1 на --bg #F7F8FB — ссылки в светлой теме не
     проходили AA. #0A7A55 — тот же мятно-зелёный, на две ступени темнее:
     5.03:1. Производные (dim/green-bg/ring) пересчитаны от нового RGB. */
  --brand:       #0A7A55;
  --brand-2:     #0E8FA8;
  --brand-hover: #0B8259;
  --brand-dim:   rgba(10, 122, 85, 0.12);
  --accent3:     var(--brand);
  --green:       var(--brand);
  --green-bg:    rgba(10, 122, 85, 0.09);
  --ring:        rgba(10, 122, 85, 0.5);

  --metal:      linear-gradient(180deg, #6E7889 0%, #4A5364 55%, #2E3644 100%);
  --metal-soft: linear-gradient(180deg, #5C6678 0%, #3E4757 100%);
  --accent-gradient:   var(--metal-soft);
  --accent-gradient-h: linear-gradient(90deg, #5C6678, #3E4757);

  --orange: #B45309;
  --red:    #BE123C;

  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-soft:
    0 1px 2px rgba(23, 27, 36, 0.06),
    0 4px 12px rgba(23, 27, 36, 0.07);
  --shadow-float:
    0 2px 4px rgba(23, 27, 36, 0.07),
    0 8px 24px rgba(23, 27, 36, 0.09),
    0 20px 48px rgba(23, 27, 36, 0.07);
  --shadow-modal:
    0 8px 24px rgba(23, 27, 36, 0.12),
    0 32px 80px rgba(23, 27, 36, 0.16);
  --glow:        var(--shadow-soft);
  --glow-strong: var(--shadow-float);
  --glow-card:   var(--shadow-soft);
}

/* ───────────────────────────────────────────────────────────────────────────
   3. ПОВЕРХНОСТИ — платина как материал
   ─────────────────────────────────────────────────────────────────────────── */

/* Фаска: тонкая световая линия по верхней кромке. Одна строка, а поверхность
   перестаёт быть «прямоугольником цвета» и становится физической. */
.card,
.config-card,
.methods-grid .method-card,
.stat-card,
.action-tile,
.login-card {
  box-shadow: var(--bevel), var(--shadow-soft);
}

.card:hover,
.config-card:hover,
.methods-grid .method-card:hover {
  box-shadow:
    var(--bevel),
    var(--shadow-float),
    0 0 0 1px var(--border-hover);
}

/* Акцентная карточка («Автоконфигуратор» и подобные).
   Её фон раньше был захардкожен ИНЛАЙН прямо в HTML тёмным градиентом
   (rgba(7,9,13,0.9) — почти чёрный). Инлайн перебивает любую тему, поэтому в
   светлой теме карточка оставалась тёмной, а текст на ней — тёмным: читать
   было невозможно. Теперь фон собирается из токенов и следует за темой сам.
   Специфичность (0,2,0) + platinum грузится последним → перебивает
   [data-theme="light"] .card из style.css. */
.card.card-featured,
.method-card.card-featured {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brand) 10%, transparent),
    var(--surface-2)
  );
}
.card.card-featured:hover,
.method-card.card-featured:hover {
  border-color: color-mix(in srgb, var(--brand) 65%, transparent);
}

/* Бейджи: фон, текст и рамка — из одного цвета. Раньше рамка была захардкожена
   rgba (зелёный/платина/фиолетовый) и не следовала за темой, из-за чего в
   светлой теме бейджи выглядели выцветшими. */
.badge-green {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}
.badge-blue {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.badge-purple {
  color: var(--accent2);
  border-color: color-mix(in srgb, var(--accent2) 28%, transparent);
}
/* FIX: у orange/red/yellow рамка оставалась захардкоженной rgba из старой
   палитры (rgba(251,191,36,.15) при --orange #F5B544) и не следовала за темой —
   в светлой теме бейджи выцветали. Теперь рамка выводится из цвета текста. */
.badge-orange,
.badge-yellow {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 28%, transparent);
}
.badge-red {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}

/* Металл — только на бренде (лого/заголовок входа). Канон: metal-clip это
   редкий hero-приём, НЕ для каждого заголовка. Раньше он стоял на всех h1 —
   и на шрифте Unbounded (высокие выносные) background-clip:text срезал
   верхушки букв в длинных заголовках гайдов. line-height/padding-top дают
   глифам воздух, чтобы клип не обрезал их сверху даже на металле. */
.landing-title,
.brand-title {
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.2;
  padding-top: 0.06em;
}

/* Заголовки гайдов — чистый яркий текст. Это документация: читаемость важнее
   блеска, а серый металл на длинной строке и хуже читается, и обрезается. */
.page-content h1,
h1:not(.landing-title):not(.brand-title) {
  background: none;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  line-height: 1.18;
}

/* Скроллбар — платиновая полоса */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pt-500), var(--pt-700));
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pt-400), var(--pt-600));
}

/* ───────────────────────────────────────────────────────────────────────────
   4. MOTION — чиним дорогое и вечное
   ─────────────────────────────────────────────────────────────────────────── */

/* Вход контента: было opacity + transform + filter: blur(6px).
   blur — это работа для GPU на каждом кадре, на слабых машинах он роняет FPS
   именно в момент появления контента. Оставляем opacity + transform: их
   браузер умеет считать на композиторе, без перерисовки. */
.animate-in {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transform: translateY(12px);
  filter: none;
}
.animate-in.visible {
  transform: translateY(0);
  filter: none;
}

/* Вечная анимация на hover-подсветке карточек: крутилась бесконечно, пока
   курсор лежит на карточке. Один проход — и хватит. */
.card:hover::before,
.config-card:hover::before,
.methods-grid .method-card:hover::before {
  animation: platinumSweep 900ms var(--ease-out) 1;
}
@keyframes platinumSweep {
  from { background-position: -100% 0; }
  to   { background-position: 200% 0; }
}

/* --- Вечные анимации ---
   В проекте их было 13: фон, призрак, частицы, свечение заголовка, бегущий
   блик по кнопке, переливающийся градиент… Они крутятся ВСЕГДА — пока человек
   просто читает страницу с командами, GPU продолжает перерисовывать кадры.
   На ноутбуке это заметно по батарее, на слабом телефоне — по плавности.

   Оставляем то, что несёт смысл: призрак-талисман (он живой — это бренд) и
   пульс статуса «нода онлайн» (он сообщает состояние).
   Глушим то, что просто блестит: канон прямо относит бесконечный shimmer и
   переливающийся градиентный заголовок к типовым признакам «AI-дизайна». */
.brand-title,
.landing-title {
  animation: none;
  background: var(--metal);
  background-size: auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-btn::after {
  animation: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* Блик по кнопке — только как ответ на наведение, а не вечный метроном */
.login-btn:hover::after { opacity: 1; }

/* Свечение заголовка (titleGlow) — выключаем: платина не светится, она отражает */
.hero-title,
.page-title {
  animation: none;
}

/* Реакция на курсор — быстрая. 120 мс воспринимается как «мгновенно»,
   250 мс уже ощущается как задержка. */
.sidebar-link,
.navbar-nav a,
.toc-item,
.btn,
.btn-primary,
.btn-accent {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

/* Нажатие: тактильный отклик. Палец/мышь ждёт подтверждения — даём его сразу. */
.btn:active,
.btn-primary:active,
.btn-accent:active,
.btn-download:active,
.login-btn:active {
  transform: scale(0.97);
  transition: transform var(--dur-instant) var(--ease-out);
}

/* Фокус с клавиатуры — платиновое кольцо на бренд-цвете. Видно всегда,
   на любой поверхности. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* FIX: у карточек стоит overflow:hidden, поэтому кольцо с положительным
   offset подрезалось родителем и фокус на них был почти не виден. Уводим
   кольцо внутрь — оно рисуется по внутренней кромке и видно целиком. */
.card:focus-visible,
.config-card:focus-visible,
.methods-grid .method-card:focus-visible {
  outline-offset: -2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   5. ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ
   Раньше переход рисовал JS: оверлей с призраком + искусственная пауза 200 мс
   перед сменой URL. Красиво, но каждая из 81 страницы открывалась на 200 мс
   позже, чем могла. Здесь тот же эффект отдан движку браузера: он растворяет
   старый кадр в новый сам, не задерживая навигацию ни на миллисекунду.
   Где API не поддержан (Firefox, Safari < 18) — просто обычный переход.
   ─────────────────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: platinumFadeOut var(--dur-fast) var(--ease-out) both;
}
::view-transition-new(root) {
  animation: platinumFadeIn var(--dur-base) var(--ease-out) both;
}
@keyframes platinumFadeOut {
  to { opacity: 0; }
}
@keyframes platinumFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. НОВЫЕ КОМПОНЕНТЫ (см. js/platinum.js)
   ─────────────────────────────────────────────────────────────────────────── */

/* --- Бейдж «новое» на ссылке «Что нового» --- */
.pt-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--brand);
  border-radius: 999px;
  vertical-align: middle;
}

/* --- Палитра команд (⌘K): метки и действия --- */
.gs-mark {
  display: inline-block;
  margin-left: 7px;
  font-size: 0.82em;
  vertical-align: middle;
  line-height: 1;
}
/* «Прочитано» — приглушённо: это фон, а не событие */
.gs-mark-read { color: var(--text-dim); }
/* «В избранном» — бренд-цвет: это осознанная отметка человека */
.gs-mark-fav  { color: var(--brand); }

.gs-row-act .gs-row-icon {
  color: var(--pt-400);
  font-size: 1.05em;
}
.gs-row-act .gs-row-arrow {
  color: var(--text-dim);
  font-size: 0.9em;
}

/* --- Line-иконки (icons.js): базовые размеры ---
   Эти правила есть в style.css, но кабинет и админка грузят profile.css, где их
   НЕТ. SVG без width/height растягивается по контейнеру — поэтому в кабинете
   иконки выросли во всю карточку (жук/мегафон/лампочка на пол-экрана).
   platinum.css подключается на ВСЕХ страницах, поэтому чинит это одним местом. */
.gi {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
.gi-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: -0.04em;
}
.gi-dot { border-radius: 50%; }

/* Кабинет: топбар, выпадающее меню, вкладки */
.topbar .actions .gi,
.profile-dropdown .gi { width: 16px; height: 16px; }
.ptab .gi { width: 15px; height: 15px; }

/* Кабинет: плитки «Связь с администрацией» — иконка над заголовком */
.action-tile .ico {
  font-size: 1em;
  line-height: 0;
  display: block;
  margin-bottom: 10px;
}
.action-tile .ico .gi {
  width: 24px;
  height: 24px;
  stroke: var(--pt-400);
}

/* Палитра команд (⌘K): иконка строки */
.gs-row-icon .gi { width: 18px; height: 18px; }

/* Заголовки гайдов: иконка вместо цветного эмодзи, размером по кеглю строки */
.page-content h1 .gi { width: 0.82em; height: 0.82em; stroke: var(--pt-400); stroke-width: 1.8; }
.page-content h2 .gi { width: 0.8em;  height: 0.8em;  stroke: var(--pt-500); stroke-width: 1.9; }
.page-content h3 .gi { width: 0.85em; height: 0.85em; stroke: var(--pt-600); stroke-width: 2; }

/* Поле поиска в палитре автофокусируется при открытии, поэтому кольцо фокуса
   на нём горело ВСЕГДА — ярко-зелёная рамка вокруг всего поля. Внутри палитры
   фокус и так очевиден (курсор в поле), кольцо здесь лишний шум: убираем его и
   вместо этого мягко подсвечиваем обёртку. */
.gs-input:focus,
.gs-input:focus-visible {
  outline: none;
  box-shadow: none;
}
.gs-head:focus-within {
  border-bottom-color: var(--border-hover);
}

/* --- Иконка карточки ---
   icons.js заменяет эмодзи в шапке карточки на line-иконку. Исходный <div>
   нёс font-size:1.5em (размер эмодзи) — задаём иконке собственные размеры и
   платиновый цвет, иначе она унаследует кегль и будет великанской. */
.card > div:first-child > .gi,
.config-card > div:first-child > .gi,
.method-card > div:first-child > .gi {
  width: 26px;
  height: 26px;
  stroke: var(--pt-400);
  stroke-width: 1.6;
}
.card:hover > div:first-child > .gi,
.method-card:hover > div:first-child > .gi {
  stroke: var(--pt-200);
  transition: stroke var(--dur-fast) var(--ease-out);
}

/* --- Полоса прогресса чтения --- */
.pt-readbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 9999;
  background: var(--metal-soft);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* --- Панель инструментов страницы (закладка / заметка) --- */
.pt-tools {
  display: flex;
  gap: 8px;
  margin: 12px 0 16px;
  flex-wrap: wrap;
}
.pt-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.86em;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.pt-tool-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
  background: var(--surface-2);
}
.pt-tool-btn:active { transform: scale(0.97); }
.pt-tool-btn .pt-ic { width: 15px; height: 15px; flex-shrink: 0; }

/* Активная закладка — единственное место, где уместен бренд-цвет: он означает
   «отмечено вами», а не украшает. */
.pt-tool-btn.is-on {
  color: var(--brand);
  border-color: var(--ring);
  background: var(--brand-dim);
}
.pt-tool-btn.is-on .pt-ic { fill: var(--brand); }
.pt-tool-btn.has-note .pt-ic { color: var(--brand); }

.pt-note { margin: 0 0 20px; }
.pt-note-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92em;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pt-note-input:focus { border-color: var(--ring); }
.pt-note-status {
  margin-top: 6px;
  min-height: 16px;
  font-size: 0.78em;
  color: var(--text-muted);
}

/* --- «Твой путь»: прогресс по базе знаний --- */
.pt-journey {
  margin: 20px 0 24px;
  padding: 20px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--bevel), var(--shadow-soft);
}
.pt-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pt-journey-kicker {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.pt-journey-title {
  margin: 0;
  font-size: 1.28em;
  font-weight: 700;
  color: var(--text);
  /* Заголовок виджета — обычный текст, без металлической заливки:
     металл работает, только когда его мало. */
  background: none;
  -webkit-text-fill-color: currentColor;
}
.pt-journey-pct {
  font-size: 2em;
  font-weight: 800;
  line-height: 1;
  color: var(--pt-300);
  white-space: nowrap;
}
.pt-journey-pct span {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 2px;
}

.pt-bar {
  height: 6px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.pt-bar-fill {
  height: 100%;
  background: var(--metal-soft);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}

.pt-journey-sections {
  display: grid;
  gap: 8px;
}
.pt-sec {
  display: grid;
  grid-template-columns: 1fr auto 72px;
  align-items: center;
  gap: 12px;
  font-size: 0.86em;
}
.pt-sec-name  { color: var(--text-secondary); }
.pt-sec-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pt-sec-bar {
  height: 4px;
  background: var(--bg3);
  border-radius: 999px;
  overflow: hidden;
}
.pt-sec-bar i {
  display: block;
  height: 100%;
  background: var(--pt-600);
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}
/* Полностью пройденный раздел — вот здесь бренд-цвет уместен: это достижение */
.pt-sec.is-done .pt-sec-name  { color: var(--text); }
.pt-sec.is-done .pt-sec-count { color: var(--brand); }
.pt-sec.is-done .pt-sec-bar i { background: var(--brand); }

.pt-continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 16px;
  font-size: 0.9em;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.pt-continue:hover {
  border-color: var(--border-hover);
  transform: translateX(2px);
}
.pt-continue .pt-ic { width: 14px; height: 14px; fill: var(--brand); stroke: var(--brand); }
.pt-continue strong { color: var(--pt-300); font-weight: 600; }

.pt-favs {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pt-favs-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.pt-favs-title .pt-ic { width: 13px; height: 13px; fill: var(--pt-500); }
.pt-fav {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 5px 12px;
  font-size: 0.84em;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.pt-fav:hover {
  color: var(--text);
  border-color: var(--border-hover);
}

@media (max-width: 640px) {
  .pt-sec { grid-template-columns: 1fr auto; }
  .pt-sec-bar { display: none; }
  .pt-journey-pct { font-size: 1.6em; }
}

/* --- API-панель в кабинете --- */
.api-key-new {
  padding: 14px;
  background: var(--brand-dim);
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.api-key-label { font-size: 0.8em; color: var(--text-secondary); margin-bottom: 8px; }
.api-key-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  color: var(--brand);
  word-break: break-all;
  padding: 10px 12px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.api-key-hidden {
  font-size: 0.84em; color: var(--text-muted);
  padding: 12px 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px;
}
.api-stats { display: flex; gap: 12px; margin-bottom: 12px; }
.api-stat {
  flex: 1; padding: 14px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.api-stat-num { font-size: 1.4em; font-weight: 800; color: var(--pt-300); }
.api-stat-cap { font-size: 0.74em; color: var(--text-dim); margin-top: 4px; letter-spacing: 0.03em; }
.api-bar { height: 6px; background: var(--bg3); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.api-bar-fill { height: 100%; background: var(--metal-soft); border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }
.api-howto { margin-bottom: 14px; }
.api-howto summary { cursor: pointer; font-size: 0.86em; color: var(--text-secondary); user-select: none; }
.api-howto summary:hover { color: var(--text); }
.api-howto-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.api-howto-title { font-size: 0.82em; font-weight: 600; color: var(--text-secondary); }
.api-code {
  margin-top: 10px; padding: 12px 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace; font-size: 0.78em; line-height: 1.6;
  color: var(--text-secondary); overflow-x: auto; white-space: pre;
}
.api-log-title { font-size: 0.76em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.api-log-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.84em; }
.api-log-q { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-log-meta { color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .api-stats { flex-direction: column; } }

/* ───────────────────────────────────────────────────────────────────────────
   6b. ТИПОГРАФИКА ЧТЕНИЯ
   ─────────────────────────────────────────────────────────────────────────── */

/* FIX: строка основного текста на широком экране достигала ~110 знаков
   (контентная полоса 890px при Inter 16px) — вдвое больше типографской нормы
   60-75. Ограничиваем меру чтения только у текстовых блоков: таблицы, <pre>,
   карточки и сетки сохраняют полную ширину. Часть страниц уже чинила это
   инлайновым max-width — здесь то же самое, но одним местом на всю базу.

   FIX-2: комбинатор прямого потомка доставал лишь 70 абзацев из 2057 (3%) —
   разметка гайдов заворачивает текст в секционные обёртки <div class="animate-in">,
   и до них правило не доходило. Убираем «>» и вместо этого гасим меру внутри
   служебных контейнеров: их ширину задаёт сам контейнер, лишний max-width
   рвал бы сетки и карточки.

   Оба правила намеренно завёрнуты в :where() — вес остаётся (0,1,0), поэтому
   любой собственный max-width страницы (например .wallet-hero p) продолжает
   побеждать, а порядок правил решает спор между мерой и её сбросом. */
.page-content :where(p, ul, ol, blockquote) {
  max-width: 72ch;
}

/* Служебные контейнеры меру чтения не получают: карточки, алерты, сетки,
   геро-блоки, таблицы и подписи к ним верстаются на свою полную ширину.
   Шаблоны классов покрывают всё семейство (*-card, *-grid, *-hero). */
.page-content :where(
  .card, .alert, .pros-cons, .pros, .cons, .steps,
  .template-info, .thanks-banner, .donate-footer,
  [class*="card"], [class*="grid"], [class*="hero"],
  table, figure
) :where(p, ul, ol, blockquote) {
  max-width: none;
}

/* FIX: ссылка в тексте отличалась от обычного текста ТОЛЬКО цветом — это
   провал WCAG 1.4.1 (цвет как единственный признак). Возвращаем подчёркивание
   в теле статьи, не трогая ссылки в навигации, карточках и сайдбаре. */
.page-content p a,
.page-content li a,
.cp-block-body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FIX: у четырёх крупных CTA инлайновые onmouseover/onmouseout заменили на
   class="cta-lift", но само правило объявлено не было — hover у кнопок умер
   полностью. Возвращаем подъём и усиленную тень одним местом на всю базу.
   Покоящаяся тень у каждой кнопки своя (цветное свечение под градиент) и
   задана инлайново — инлайн бьёт внешний CSS по определению, поэтому на
   hover перекрываем её нейтральной глубокой тенью через !important.
   Анимацию берёт на себя инлайновый transition: transform, box-shadow. */
.cta-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-lift:hover,
.cta-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38) !important;
}
/* Просьбу системы не двигать картинку уважаем: подъём убираем, но обратную
   связь оставляем — тень меняется и без движения. */
@media (prefers-reduced-motion: reduce) {
  .cta-lift:hover,
  .cta-lift:focus-visible {
    transform: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   7. ДОСТУПНОСТЬ: полное уважение к prefers-reduced-motion
   Пользователь с вестибулярными расстройствами просит систему не двигать
   картинку — значит, не двигаем ничего, включая «вечные» фоновые анимации,
   которые раньше продолжали крутиться.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}