/* ============================================================================
   light-theme.css — LIGHT-THEME READABILITY (продолжение)
   ----------------------------------------------------------------------------
   macOS-CSS (/macos/css/style.css) — dark-first: десятки текстов захардкожены
   светлыми (#fff / #f0f0f0 / #ccc / #aaa / #888 / rgba(255,255,255,.x)),
   рассчитанными на тёмный фон. В admin-new на СВЕТЛОЙ теме они белые-по-белому
   или нечитаемо-бледные.

   Базовый фикс (headings/strong/b + часть value-классов + faint labels) уже
   живёт в style.css → секция "LIGHT-THEME READABILITY". ЗДЕСЬ — всё остальное,
   что там НЕ покрыто. Не дублирую.

   Правила:
   - основной текст / значения / контент → var(--text-strong)
   - вторичные подписи / лейблы / хинты / код-блоки → var(--mkt-muted)
   - chrome (.topbar/.dock/.mac-window/.mac-window-content/.sidebar/.auth-card/
     .brand-box/.hero) НЕ трогаю — admin-new их не рендерит.
   - элементы на цветной заливке (accent/brand bg, активные сегменты, бейджи)
     оставляю белыми — это корректно.
   Все правила гейтятся `html:not([data-theme="dark"]) .admin-main` + !important,
   линк подключён ПОСЛЕДНИМ → выигрывает каскад.
   ========================================================================== */

/* ── ОСНОВНОЙ ТЕКСТ / ЗНАЧЕНИЯ → --text-strong ─────────────────────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  /* таблицы */
  .table th,
  .sortable-th:hover,
  .page-num.is-active,
  .settings-readonly-pill.is-on,

  /* wallet-balances */
  .wb-tok-sym,
  .wb-refresh,
  .wb-refresh:hover,

  /* API-страница: summary (КОД-БЛОКИ — отдельно ниже, тёмный фон+светлый текст) */
  .api-docs summary,
  .api-docs summary:hover,
  .api-modal-card header .icon-btn:hover,
  .api-modal-card .btn-dark:hover,

  /* materials-doc контент (КОД-БЛОКИ — отдельно ниже) */
  .materials-doc a:hover,
  .materials-page .materials-tab:hover,

  /* wallpaper */
  .wp-tile-label,
  .wp-reset-btn:hover,

  /* online / устройства / юзеры */
  .top-online .top-online-num,
  .online-user-login,
  .online-user-bal,
  .device-label,

  /* toast / totp / muted-link */
  .toast-title,
  .toast-close:hover,
  .btn-link:hover,
  .seg-btn:hover,
  .color-tab:hover
) { color: var(--text-strong) !important; }

/* ── ВТОРИЧНЫЕ ПОДПИСИ / ЛЕЙБЛЫ / ХИНТЫ / КОД → --mkt-muted ────────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  /* таблицы / счётчики */
  .tx-segmented .tx-count,

  /* wallet-balances вторичка */
  .wb-item,
  .wb-tok-amount,

  /* API-страница вторичка */
  .api-page .page-intro p,
  .api-docs p,
  .api-docs summary::before,
  .api-modal-card header .icon-btn,
  .api-plaintext-meta,

  /* materials вторичка / код-метки */
  .materials-chip,
  .materials-page .materials-tab,
  .materials-intro h1 + p,
  .materials-doc p,
  .materials-doc ul,
  .materials-doc ol,
  .materials-doc .md-codeblock-lang,
  .materials-doc .md-codeblock-copy,

  /* wallpaper подписи */
  .top-wallpaper,

  /* online / устройства иконки-лейблы */
  .device-ic svg,
  .uc-device svg,
  .online-user-device svg,
  .online-user-domain,
  .online-user-dep
) { color: var(--mkt-muted) !important; }

/* ── EYEBROW / KICKER ──────────────────────────────────────────────────────
   "BOT API DOCUMENTATION" и т.п. захардкожены #666 → на белом почти не видно.
   Поднимаем до accent (узнаваемый бренд-акцент, читаемо в обеих темах). */
html:not([data-theme="dark"]) .admin-main :is(
  .wp-eyebrow,
  .api-page .page-intro .eyebrow,
  .materials-intro .eyebrow,
  .eyebrow,
  .top-kicker
) { color: var(--accent) !important; }
html:not([data-theme="dark"]) .admin-main :is(
  .wp-eyebrow,
  .api-page .page-intro .eyebrow,
  .materials-intro .eyebrow,
  .eyebrow,
  .top-kicker
) svg { color: var(--accent) !important; }

/* ── inline-code (orange-ish #e9b66e / #ed9472) — на белом бледноват,
   делаем accent для контраста ────────────────────────────────────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  .api-docs code,
  .materials-doc h3,
  .materials-doc h3 code
) { color: var(--accent) !important; }

/* ── .materials-tab.is-active: фон = rgba(brand,.10) (10% тинт, почти белый),
   а текст захардкожен #fff → невидим. Бренд-акцентом (бордер/иконка уже accent). */
html:not([data-theme="dark"]) .admin-main .materials-page .materials-tab.is-active {
  color: var(--accent) !important;
}

/* ── ИСКЛЮЧЕНИЯ: текст на цветной (accent/brand) заливке — оставляем белым ──── */
html:not([data-theme="dark"]) .admin-main :is(
  .api-btn-danger,
  .wp-upload-btn,
  .wp-tile-pill,
  .materials-actions .btn.is-copied,
  .vflow-geo-tab.is-active,
  .vflowm-geo-tab.is-active,
  .vflowm-btn--primary,
  .vflowm-pv-btn--p,
  .vflow-viewseg-btn.is-active,
  .vflowm-viewseg-btn.is-active,
  .wpa-check
) { color: var(--accent-contrast) !important; }


/* ============================================================================
   ПРОХОД 2 (исчерпывающий) — то что предыдущий проход упустил.
   Две корневые причины:
   (1) Модалки монтируются на <body>, ВНЕ .admin-main → правила с префиксом
       .admin-main до них не доходят. Здесь — глобально, гейт только по теме.
   (2) Код/терминал-блоки имеют ТЁМНЫЙ фон (#0a0a0a/#0c0c0c/#0d0d0d). Предыдущий
       проход покрасил их текст в --text-strong (тёмный) → чёрное-по-чёрному.
       Лечим РАДИКАЛЬНО: код-блоки = тёмный фон + светлый текст ВСЕГДА (обе темы),
       поэтому !important перебивает и style.css, и прошлый проход.
   ========================================================================== */

/* ── (2) КОД / ТЕРМИНАЛ-БЛОКИ: тёмный фон + светлый текст ВСЕГДА ──────────────
   Палитра терминала фиксированная (не зависит от темы): фон #0d0d0d, текст #e6e6e6.
   Перебиваем прошлый --text-strong (был чёрным на чёрном) и style.css --mkt-muted.
   Только СВЕТЛАЯ тема — в тёмной оригинальные правила уже корректны. */
html:not([data-theme="dark"]) :is(
  .api-docs pre,
  .api-modal-target,
  .materials-doc .md-codeblock,
  .materials-doc .md-codeblock pre,
  .materials-doc pre,
  .api-token-display .input
) {
  background: #0d0d0d !important;
  border-color: #232323 !important;
  color: #e6e6e6 !important;
}
html:not([data-theme="dark"]) :is(
  .api-docs pre code,
  .api-docs pre code *,
  .materials-doc .md-codeblock pre code,
  .materials-doc .md-codeblock code,
  .materials-doc pre code
) { color: #e6e6e6 !important; }
/* md-codeblock head (язык-метка + копи-кнопка) сидит на тёмном фоне блока */
html:not([data-theme="dark"]) .materials-doc .md-codeblock-head {
  background: #161616 !important;
  border-color: #232323 !important;
}
html:not([data-theme="dark"]) :is(
  .materials-doc .md-codeblock-lang,
  .materials-doc .md-codeblock-copy
) { color: #9a9a9a !important; }
html:not([data-theme="dark"]) .materials-doc .md-codeblock-copy:hover {
  color: #fff !important; background: #262626 !important;
}
/* api-modal-target — моно-урл на тёмном: оранжевый акцент читаем */
html:not([data-theme="dark"]) .api-modal-target { color: #f0905f !important; }
/* api-token-display: токен светлый на тёмном (бордер уже accent) */
html:not([data-theme="dark"]) .api-token-display .input { color: #fff !important; }

/* ── (1) МОДАЛКИ НА <body>: PRESET-PICKER ("Quick replies") ───────────────────
   .support-preset-modal / .support-preset-row / .preset-picker-* — без префикса
   .admin-main. Контейнер (bg/border) уже задаёт style.css body-overlay секция;
   здесь — ВСЕ дочерние тексты/строки/инпуты. */
html:not([data-theme="dark"]) .support-preset-modal {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(h1,h2,h3,h4,strong,b,label) {
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(p,small,span) {
  color: var(--mkt-muted) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row,.preset) {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row,.preset) strong,
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row,.preset) .preset-main strong {
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row,.preset) small,
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row,.preset) .preset-main small {
  color: var(--mkt-muted) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(.support-preset-row i,.preset i) {
  color: var(--mkt-muted) !important;
}
html:not([data-theme="dark"]) .support-preset-modal .preset-picker-create-section {
  border-top-color: var(--border) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(input,select,textarea,.input,.textarea,.select) {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-preset-modal :is(input,textarea)::placeholder {
  color: var(--mkt-muted) !important;
}

/* ── (1) МОДАЛКИ НА <body>: TEMPLATE-PICKER ──────────────────────────────────
   .support-template-modal hardcoded color:#fff + строки на rgba(255,255,255,.06)
   + purple-акцент. Перекрашиваем под светлую тему. */
html:not([data-theme="dark"]) .support-template-modal {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-template-modal :is(header,footer) {
  border-color: var(--border) !important;
}
html:not([data-theme="dark"]) .support-template-modal :is(h1,h2,h3,h4,strong,b,label) {
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-template-modal :is(p,small,span) {
  color: var(--mkt-muted) !important;
}
html:not([data-theme="dark"]) .support-template-row {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-template-row strong { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .support-template-row small  { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .support-template-row i {
  border-color: color-mix(in srgb, var(--text-strong) 28%, transparent) !important;
}
/* выбранная строка — мягкий accent-тинт + accent-бордер (вместо purple) */
html:not([data-theme="dark"]) .support-template-row.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg)) !important;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
}
html:not([data-theme="dark"]) .support-template-row.is-selected i {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
html:not([data-theme="dark"]) .support-template-modal :is(input,select,textarea,.input,.textarea,.select) {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-strong) !important;
}
html:not([data-theme="dark"]) .support-template-modal :is(input,textarea)::placeholder {
  color: var(--mkt-muted) !important;
}
html:not([data-theme="dark"]) .support-template-builder .builder-field button {
  color: var(--mkt-muted) !important;
}

/* ── (1) МОДАЛКИ НА <body>: API-MODAL — добор того, что не покрыл style.css ─── */
html:not([data-theme="dark"]) .api-modal-body p { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .api-modal-card header strong { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .api-modal-card .btn-dark:hover {
  background: color-mix(in srgb, var(--text-strong) 10%, transparent) !important;
  color: var(--text-strong) !important;
}
/* api-warning внутри модалки (оранжевый фон-тинт уже читаем, текст притемняем) */
html:not([data-theme="dark"]) .api-modal-card .api-warning { color: color-mix(in srgb, var(--accent) 75%, var(--text-strong)) !important; }
html:not([data-theme="dark"]) .api-modal-card .api-warning strong { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .api-modal-card :is(.promo-section-label,.promo-type-help) { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .api-modal-card .promo-section-label { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .api-modal-card .api-plaintext-meta .mono-value { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .api-modal-card .api-plaintext-meta { color: var(--mkt-muted) !important; border-top-color: var(--border) !important; }

/* ── (1) TOAST на <body>: title/body/close ───────────────────────────────────
   style.css задаёт .toast bg+color; добираем заголовок/тело/иконку. */
html:not([data-theme="dark"]) .toast-title { color: var(--text-strong) !important; }
html:not([data-theme="dark"]) .toast-body  { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .toast-close { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .toast-close:hover {
  color: var(--text-strong) !important;
  background: color-mix(in srgb, var(--text-strong) 8%, transparent) !important;
}

/* ============================================================================
   CONTENT-ТЕКСТ внутри .admin-main, не покрытый прошлым проходом (литеральные
   светлые хексы #b8/#c0/#cf/#d0/#d8/#ddd/#e0/#e8/#f0 на белом фоне).
   Основной → --text-strong, вторичный/абзацы → --mkt-muted.
   ========================================================================== */

/* ── основной текст / значения → --text-strong ─────────────────────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  .panel-head svg,
  .api-docs summary,
  .api-keys-table .mono-value,
  .api-plaintext-meta .mono-value,
  .promo-section-label,
  .wb-chain-label,
  .wb-tok-sym,
  .toast-title,
  .kv dd,
  .verification-changelog p strong,
  .vp-domain,
  .top-online .top-online-num
) { color: var(--text-strong) !important; }

/* ── вторичный текст / абзацы / описания / списки → --mkt-muted ─────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  .message-form small,
  .response-card small,
  .api-docs p,
  .api-docs ul,
  .api-docs ul li,
  .api-modal-card header .icon-btn,
  .promo-type-help,
  .materials-doc p,
  .materials-doc em,
  .materials-doc ul,
  .materials-doc ol,
  .materials-doc .md-table td,
  .verification-changelog p,
  .verification-changelog-list li,
  .cps-domain,
  .domain-cube span,
  .kpi span,
  .kv dt,
  .wb-total-label,
  .wb-addr-label,
  .wb-flat-label
) { color: var(--mkt-muted) !important; }

/* ── API-docs <details> аккордеон: фон захардкожен rgba(24,24,24,.35/.55) (тёмный
   полупрозрачный) → на светлой теме summary-текст (--text-strong) сидит на тёмном
   = чёрное-по-чёрному. Перекрашиваем панель под surface. ──────────────────── */
html:not([data-theme="dark"]) .admin-main :is(
  .api-docs details,
  .api-docs details[open]
) {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}
html:not([data-theme="dark"]) .admin-main .api-docs summary::before {
  color: var(--mkt-muted) !important;
}

/* ── eyebrow / inline-code в materials → accent (узнаваемо, контрастно) ─────── */
html:not([data-theme="dark"]) .admin-main :is(
  .materials-doc code
) { color: var(--accent) !important; }

/* ── материалы: заголовки h1/h2/h4 (h3 = accent уже выше) + база doc → strong ─ */
html:not([data-theme="dark"]) .admin-main :is(
  .materials-doc,
  .materials-doc h1,
  .materials-doc h2,
  .materials-doc h4
) { color: var(--text-strong) !important; }
/* материалы: разделители (border) под белый */
html:not([data-theme="dark"]) .admin-main :is(
  .materials-doc h1,
  .materials-doc .md-table td
) { border-color: var(--border) !important; }

/* ============================================================================
   ПРОХОД 3 — «тёмная плашка на светлой теме»: компоненты, чей фон/трек захардкожен
   тёмным (#111 / #1a1a1a / #2a2a2a / rgba(255,255,255,.0x)) под dark-first macOS.
   На белом фоне они выглядят инородными островами. Перекрашиваем под surface.
   Только СВЕТЛАЯ тема — в тёмной оригинал корректен.
   ========================================================================== */

/* Statistics → Devices: трек прогресс-бара rgba(255,255,255,.05) невидим на белом */
html:not([data-theme="dark"]) .admin-main .device-bar {
  background: color-mix(in srgb, var(--text-strong) 8%, transparent) !important;
}

/* Скелетоны загрузки (support список/сообщения, wallpapers) — тёмные блоки.
   Surface-фон + лёгкий accent-нейтральный shimmer вместо чёрного градиента. */
html:not([data-theme="dark"]) :is(
  .chat-card-skel, .msg-skel, .msg-skel-1, .msg-skel-2, .wp-pulse
) {
  background: var(--bg-surface) !important;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--text-strong) 6%, transparent) 50%,
    transparent 100%
  ) !important;
}

/* Segmented control (редактор доменов): #1a1a1a island → surface + hairline */
html:not([data-theme="dark"]) .admin-main .seg-control {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
}
html:not([data-theme="dark"]) .admin-main .seg-btn { color: var(--mkt-muted) !important; }
html:not([data-theme="dark"]) .admin-main .seg-btn.is-active {
  background: var(--bg) !important;
  color: var(--text-strong) !important;
  box-shadow: var(--shadow) !important;
}

/* Композер саппорта: чипы вложений #111 → surface-пилюли */
html:not([data-theme="dark"]) .admin-main .attachment-strip button {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
}

/* Пресеты быстрых ответов: hover #2a2a2a → нейтральный surface-hover */
html:not([data-theme="dark"]) .admin-main .preset-edit:hover {
  background: color-mix(in srgb, var(--text-strong) 8%, transparent) !important;
  color: var(--text-strong) !important;
}

/* API: заголовок секции (.api-section-head .label = #ececec, почти белый) терял
   вес → приглушался до muted. Возвращаем strong + жирный для иерархии. */
html:not([data-theme="dark"]) .admin-main .api-section-head .label {
  color: var(--text-strong) !important;
}