/* ============================================================
   ui.css — новая система сбора данных и форм
   Подключается ПОСЛЕ main.css и cookie-consent.css.

   Что здесь:
   1. Токены (светлая / тёмная тема) + мост к переменным main.css
   2. Верхняя полоса: партнёрский код 36375 + предложение kkt.pro
   3. Панель заказа справа (drawer) + затемнение
   4. Поля, кнопки, сегменты, согласие, чипы доверия
   5. Тосты, скелетоны
   6. Перестилизация форм форума (.form-group, .alert) и cookie-строки
   7. Читаемость на тёмном фоне (контраст не ниже WCAG AA)
   ============================================================ */

/* ── 1. Токены ─────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --u-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --u-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --u-surface:        #FFFFFF;
  --u-surface-1:      #F6F9FC;
  --u-surface-2:      #EEF3F8;
  --u-ink:            #0A2540;
  --u-ink-muted:      #48607A;
  --u-ink-subtle:     #5F7386;
  --u-hairline:       #E4EBF2;
  --u-hairline-strong:#CBD8E4;
  --u-accent:         #0369A1;
  --u-accent-strong:  #075985;
  --u-accent-soft:    #E7F2FA;
  --u-accent-ink:     #FFFFFF;
  --u-good:           #0E7C54;
  --u-good-soft:      #E4F4EC;
  --u-bad:            #C8342B;
  --u-bad-soft:       #FBEAE8;
  --u-warn:           #B45309;

  --u-r-sm: 6px;
  --u-r:    8px;
  --u-r-lg: 12px;
  --u-ease: cubic-bezier(.32,.72,0,1);
  --u-shadow-drawer: -24px 0 60px rgba(10,37,64,.16);
  --u-scrim: rgba(10,37,64,.34);

  --u-track-wide:  .06em;
  --u-track-widest:.12em;
}

/* Тёмная тема: свои токены + мост к переменным main.css,
   чтобы весь сайт (а не только новые блоки) стал тёмным. */
html[data-theme="dark"] {
  color-scheme: dark;

  --u-surface:        #101418;
  --u-surface-1:      #161B21;
  --u-surface-2:      #1D242B;
  --u-ink:            #F2F6FA;
  --u-ink-muted:      #BCCBD8;
  --u-ink-subtle:     #93A5B4;
  --u-hairline:       #2A333C;
  --u-hairline-strong:#3E4A56;
  --u-accent:         #6FB7EE;
  --u-accent-strong:  #8CC8F5;
  --u-accent-soft:    rgba(111,183,238,.18);
  --u-accent-ink:     #08131C;
  --u-good:           #6FD3A3;
  --u-good-soft:      rgba(111,211,163,.16);
  --u-bad:            #F09084;
  --u-bad-soft:       rgba(240,144,132,.16);
  --u-warn:           #EDB877;

  --u-shadow-drawer: -24px 0 60px rgba(0,0,0,.5);
  --u-scrim: rgba(0,0,0,.6);

  /* мост к main.css */
  --bg:            #101418;
  --bg-elevated:   #161B21;
  --fg:            #F2F6FA;
  --fg-muted:      #BCCBD8;
  --fg-subtle:     #93A5B4;
  --accent:        #6FB7EE;
  --accent-hover:  #8CC8F5;
  --accent-subtle: rgba(111,183,238,.18);
  --border:        #2A333C;
  --border-subtle: #212932;
  --success:       #6FD3A3;
  --error:         #F09084;
  --warning:       #EDB877;
  --trust-navy:    #0B0F13;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.5);
  --shadow:        0 4px 10px rgba(0,0,0,.55);
  --shadow-lg:     0 20px 40px rgba(0,0,0,.6);
}

/* Точечные фиксы старых правил в тёмной теме */
html[data-theme="dark"] .sidebar-nav > a:hover { background: var(--u-surface-2); }
html[data-theme="dark"] .btn-primary { background: var(--u-accent); color: var(--u-accent-ink); }
html[data-theme="dark"] .btn-primary:hover { background: var(--u-accent-strong); }
html[data-theme="dark"] .btn-accent { color: var(--u-accent-ink); }
html[data-theme="dark"] .partner-code,
html[data-theme="dark"] .sidebar-partner strong {
  background: rgba(224,161,92,.16);
  border-color: rgba(224,161,92,.45);
  color: #F0CFA6;
}
html[data-theme="dark"] .alert-success { background: var(--u-good-soft); color: #C6EFD9; border-color: rgba(87,192,141,.4); }
html[data-theme="dark"] .alert-error   { background: var(--u-bad-soft);  color: #F8C9C2; border-color: rgba(229,118,107,.4); }
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.94); }

/* ── 2. Верхняя полоса: код партнёра + предложение kkt.pro ── */
.pbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 6px 20px;
  font-family: var(--u-font);
  font-size: 13.5px;
  background: var(--u-surface-1);
  border-bottom: 1px solid var(--u-hairline);
  color: var(--u-ink);
}
.pbar__code { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.pbar__lab {
  font-family: var(--u-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--u-track-widest);
  color: var(--u-ink-subtle);
}
.pbar__code b {
  font-family: var(--u-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--u-ink);
}
.pbar__copy {
  font-family: var(--u-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--u-track-wide);
  color: var(--u-accent);
  background: none;
  border: 0;
  padding: 4px 6px;
  border-radius: var(--u-r-sm);
  cursor: pointer;
}
.pbar__copy:hover { background: var(--u-accent-soft); }
.pbar__sep { width: 1px; align-self: stretch; margin: 4px 0; background: var(--u-hairline-strong); }
.pbar__ad {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--u-ink-muted);
}
.pbar__mark {
  font-family: var(--u-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--u-track-wide);
  color: var(--u-ink-subtle);
  border: 1px solid var(--u-hairline-strong);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.pbar__ad-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar__ad-text b { color: var(--u-ink); font-weight: 600; }
.pbar__ad-text a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--u-hairline-strong); }
.pbar__ad-text a:hover { color: var(--u-accent); border-bottom-color: currentColor; }
.pbar__price {
  font-family: var(--u-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--u-ink);
  white-space: nowrap;
}
.pbar__act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pbar__x {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--u-r-sm);
  color: var(--u-ink-subtle); font-size: 17px; line-height: 1; cursor: pointer;
}
.pbar__x:hover { background: var(--u-surface-2); color: var(--u-ink); }
.pbar[hidden] { display: none; }

/* Переключатель темы */
.u-theme { display: inline-flex; gap: 2px; padding: 2px; background: var(--u-surface-2); border: 1px solid var(--u-hairline); border-radius: var(--u-r); }
.u-theme button {
  width: 30px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: var(--u-r-sm);
  color: var(--u-ink-subtle); cursor: pointer;
}
.u-theme button svg { width: 15px; height: 15px; }
.u-theme button:hover { color: var(--u-ink); }
.u-theme button[aria-pressed="true"] {
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: 0 1px 2px rgba(10,37,64,.10);
}
html[data-theme="dark"] .u-theme button[aria-pressed="true"] { box-shadow: none; border: 1px solid var(--u-hairline-strong); }

/* ── 3. Панель заказа справа ────────────────────────────────── */
.u-scrim {
  position: fixed; inset: 0;
  z-index: 120;
  background: var(--u-scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--u-ease), visibility .22s;
}
.u-scrim.is-open { opacity: 1; visibility: visible; }

.u-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 130;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  font-family: var(--u-font);
  background: var(--u-surface);
  border-left: 1px solid var(--u-hairline);
  box-shadow: var(--u-shadow-drawer);
  transform: translateX(102%);
  transition: transform .3s var(--u-ease);
}
.u-drawer.is-open { transform: translateX(0); }
.u-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--u-hairline);
}
.u-drawer__head h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--u-ink); margin: 0; line-height: 1.3; }
.u-drawer__who { font-size: 12.5px; color: var(--u-ink-muted); margin: 4px 0 0; }
.u-drawer__x {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--u-hairline); border-radius: var(--u-r-sm);
  color: var(--u-ink-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.u-drawer__x:hover { background: var(--u-surface-1); color: var(--u-ink); }
.u-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.u-drawer__foot { padding: 14px 20px 18px; border-top: 1px solid var(--u-hairline); background: var(--u-surface-1); }
.u-drawer__code {
  font-size: 12.5px;
  color: var(--u-ink-muted);
  background: var(--u-surface-1);
  border: 1px dashed var(--u-hairline-strong);
  border-radius: var(--u-r);
  padding: 10px 12px;
}
.u-drawer__code b { font-family: var(--u-mono); font-variant-numeric: tabular-nums; color: var(--u-ink); }

/* ── 4. Поля, кнопки, сегменты ──────────────────────────────── */
.u-field { display: grid; gap: 6px; }
.u-label {
  font-family: var(--u-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--u-track-wide);
  color: var(--u-ink-subtle);
}
.u-label span { color: var(--u-ink-subtle); text-transform: none; letter-spacing: 0; }
.u-ctrl { position: relative; display: block; }
.u-ctrl > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--u-ink-subtle); pointer-events: none;
}
.u-ctrl.with-ico .u-input { padding-left: 38px; }
.u-input, .u-textarea {
  width: 100%;
  font-family: var(--u-font);
  font-size: 15px;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid var(--u-hairline-strong);
  border-radius: var(--u-r);
  padding: 0 13px;
  height: 44px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.u-textarea { height: auto; min-height: 76px; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.u-input::placeholder, .u-textarea::placeholder { color: var(--u-ink-subtle); }
.u-input:hover, .u-textarea:hover { border-color: var(--u-ink-subtle); }
.u-input:focus, .u-textarea:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px var(--u-accent-soft);
}
.u-field.has-error .u-input,
.u-field.has-error .u-textarea { border-color: var(--u-bad); background: var(--u-bad-soft); }
.u-hint { font-size: 12px; color: var(--u-ink-subtle); }
.u-err { font-size: 12.5px; color: var(--u-bad); display: none; }
.u-field.has-error .u-err { display: block; }

.u-seg { display: flex; flex-wrap: wrap; gap: 0; background: var(--u-surface-1); border: 1px solid var(--u-hairline-strong); border-radius: var(--u-r); padding: 3px; }
.u-seg button {
  flex: 1 1 auto;
  font-family: var(--u-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--u-track-wide);
  color: var(--u-ink-muted);
  background: none; border: 0; border-radius: var(--u-r-sm);
  padding: 8px 10px; cursor: pointer; white-space: nowrap;
}
.u-seg button:hover { color: var(--u-ink); }
.u-seg button[aria-pressed="true"] {
  background: var(--u-surface);
  color: var(--u-ink);
  box-shadow: 0 1px 2px rgba(10,37,64,.10);
}
html[data-theme="dark"] .u-seg button[aria-pressed="true"] { box-shadow: none; border: 1px solid var(--u-hairline-strong); }

.u-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--u-ink-muted); cursor: pointer; }
.u-consent input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--u-accent); flex: 0 0 17px; }
.u-consent a { color: var(--u-accent); }
.u-field.has-error + .u-consent, .u-consent.has-error { color: var(--u-bad); }

.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--u-font);
  font-size: 14.5px; font-weight: 600;
  height: 44px; padding: 0 18px;
  border-radius: var(--u-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.u-btn--primary { background: var(--u-accent); color: var(--u-accent-ink); }
.u-btn--primary:hover { background: var(--u-accent-strong); }
.u-btn--ghost { background: var(--u-surface); color: var(--u-ink); border-color: var(--u-hairline-strong); }
.u-btn--ghost:hover { background: var(--u-surface-1); }
.u-btn--block { width: 100%; }
.u-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.u-btn:disabled { opacity: .55; cursor: not-allowed; }
.u-btn:focus-visible, .u-input:focus-visible, .pbar__copy:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; }

.u-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.u-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--u-ink-muted);
  background: var(--u-surface); border: 1px solid var(--u-hairline);
  border-radius: 999px; padding: 4px 10px;
}
.u-chip svg { width: 12px; height: 12px; color: var(--u-good); }
.u-foot-line { font-size: 12px; color: var(--u-ink-subtle); }
.u-foot-line kbd {
  font-family: var(--u-mono); font-size: 10.5px;
  border: 1px solid var(--u-hairline-strong); border-radius: 4px;
  padding: 1px 5px; background: var(--u-surface);
}

/* ── Компактная строка-призыв вместо большой формы в потоке ── */
.u-lead-line {
  margin: 40px 24px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 18px;
  font-family: var(--u-font);
  background: var(--u-surface-1);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-r-lg);
}
.u-lead-line__text { flex: 1 1 320px; min-width: 0; }
.u-lead-line__text b { display: block; font-size: 15.5px; font-weight: 600; color: var(--u-ink); }
.u-lead-line__text span { font-size: 13px; color: var(--u-ink-muted); }
.u-lead-line__act { display: flex; flex-wrap: wrap; gap: 10px; }

/* Компактная перелинковка на kkt.pro */
.u-cta-line {
  margin: 28px 24px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 14px 18px;
  font-family: var(--u-font); font-size: 13.5px; color: var(--u-ink-muted);
  background: var(--u-surface);
  border: 1px solid var(--u-hairline);
  border-radius: var(--u-r-lg);
}
.u-cta-line__mark {
  font-family: var(--u-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: var(--u-track-wide); color: var(--u-ink-subtle);
  border: 1px solid var(--u-hairline-strong); border-radius: 3px; padding: 1px 5px;
}
.u-cta-line a { color: var(--u-accent); text-decoration: none; }
.u-cta-line a:hover { text-decoration: underline; }
.u-cta-line__links { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }

/* ── 5. Тосты и скелетоны ──────────────────────────────────── */
.u-toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: grid; gap: 10px; width: min(340px, calc(100vw - 40px));
  pointer-events: none;
}
.u-toast {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--u-font); font-size: 13.5px; color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid var(--u-hairline-strong);
  border-left: 3px solid var(--u-good);
  border-radius: var(--u-r);
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(10,37,64,.14);
  animation: u-toast-in .22s var(--u-ease);
  pointer-events: auto;
}
.u-toast--err { border-left-color: var(--u-bad); }
.u-toast b { display: block; font-weight: 600; }
.u-toast span { color: var(--u-ink-muted); font-size: 12.5px; }
.u-toast.is-out { animation: u-toast-out .18s var(--u-ease) forwards; }
@keyframes u-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes u-toast-out { to { opacity: 0; transform: translateY(6px); } }

.u-sk {
  background: linear-gradient(90deg, var(--u-surface-2) 25%, var(--u-hairline) 37%, var(--u-surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--u-r-sm);
  animation: u-sk 1.4s ease-in-out infinite;
}
@keyframes u-sk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── 6. Формы форума и cookie-строка ───────────────────────── */
.form-group { display: grid; gap: 6px; margin-bottom: 16px; }
.form-group label {
  font-family: var(--u-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--u-track-wide);
  color: var(--u-ink-subtle);
  font-weight: 400;
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  font-family: var(--u-font);
  font-size: 15px;
  color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid var(--u-hairline-strong);
  border-radius: var(--u-r);
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px var(--u-accent-soft);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--u-ink-subtle); }

.alert {
  font-family: var(--u-font);
  font-size: 13.5px;
  border-radius: var(--u-r);
  padding: 12px 14px;
  border-left-width: 3px;
}
.alert-success { background: var(--u-good-soft); color: var(--u-good); border: 1px solid transparent; border-left: 3px solid var(--u-good); }
.alert-error   { background: var(--u-bad-soft);  color: var(--u-bad);  border: 1px solid transparent; border-left: 3px solid var(--u-bad); }

.image-upload-area {
  border: 1px dashed var(--u-hairline-strong) !important;
  border-radius: var(--u-r) !important;
  background: var(--u-surface-1) !important;
  color: var(--u-ink-muted);
}

.cookie-consent { font-family: var(--u-font); }
.cookie-consent-inner {
  background: var(--u-surface) !important;
  border: 1px solid var(--u-hairline-strong) !important;
  border-radius: var(--u-r-lg) !important;
  box-shadow: 0 12px 30px rgba(10,37,64,.14) !important;
}
.cookie-consent-text { color: var(--u-ink-muted) !important; font-size: 13px !important; }
.cookie-consent-text a { color: var(--u-accent) !important; }

/* ── Адаптив ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pbar { flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 8px 16px; }
  .pbar__sep { display: none; }
  .pbar__code { order: 1; flex: 1 1 100%; }
  .pbar__ad { order: 2; flex: 1 1 100%; align-items: flex-start; }
  .pbar__ad-text { white-space: normal; }
  .pbar__price { margin-left: auto; }
  .pbar__act { order: 3; flex: 1 1 100%; margin-left: 0; }
  .pbar__act .u-btn { flex: 1 1 auto; }
  .u-lead-line, .u-cta-line { margin-left: 16px; margin-right: 16px; }
  .u-cta-line__links { margin-left: 0; }
}
@media (max-width: 560px) {
  .u-drawer { width: 100vw; }
  .u-toasts { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .u-drawer, .u-scrim, .u-toast, .u-sk { transition: none !important; animation: none !important; }
}

/* ============================================================
   7. ЧИТАЕМОСТЬ НА ТЁМНОМ ФОНЕ

   В main.css и cookie-consent.css есть цвета, вбитые числами
   (тёмно-зелёный текст, коричневый на янтарном, светлые плашки).
   На тёмном фоне такой текст сливается. Здесь каждый такой случай
   перекрыт так, чтобы контраст был не ниже 4.5:1 (WCAG AA),
   а у крупного текста и иконок — выше.
   Светлая тема не затронута: всё ниже привязано к [data-theme="dark"].
   ============================================================ */

/* — Боковое меню — */
html[data-theme="dark"] .sidebar-section { color: var(--u-ink-subtle); }
html[data-theme="dark"] .sidebar-sub { color: var(--u-ink-muted); }
html[data-theme="dark"] .sidebar-sub:hover { color: var(--u-ink); background: var(--u-surface-2); }
html[data-theme="dark"] .sidebar-sub.active { color: var(--u-accent); background: var(--u-accent-soft); }
html[data-theme="dark"] .sidebar-nav > a { color: var(--u-ink-muted); }
html[data-theme="dark"] .sidebar-nav > a.active { color: var(--u-ink); }
html[data-theme="dark"] .sidebar-logo,
html[data-theme="dark"] .author-name,
html[data-theme="dark"] .post-content { color: var(--u-ink); }
html[data-theme="dark"] .sidebar-contacts-label,
html[data-theme="dark"] .author-date,
html[data-theme="dark"] .footer-copy { color: var(--u-ink-subtle); }
html[data-theme="dark"] .sidebar-phone,
html[data-theme="dark"] .sidebar-email,
html[data-theme="dark"] .footer-links a { color: var(--u-ink-muted); }
html[data-theme="dark"] .footer-links a:hover { color: var(--u-ink); }

/* — Янтарная плашка партнёрского кода: был коричневый текст — */
html[data-theme="dark"] .sidebar-partner,
html[data-theme="dark"] .partner-strip .partner-code {
  background: rgba(237,184,119,.14);
  border-color: rgba(237,184,119,.42);
}
html[data-theme="dark"] .sidebar-partner span,
html[data-theme="dark"] .partner-code span { color: #EFD0A8; opacity: 1; }
html[data-theme="dark"] .sidebar-partner strong,
html[data-theme="dark"] .partner-code { color: #F7DFBC; }

/* — Код и примеры — */
html[data-theme="dark"] .code-block {
  background: #0B0F14;
  color: #DCE6F0;
  border: 1px solid var(--u-hairline);
}
html[data-theme="dark"] .inline-code {
  background: var(--u-surface-2);
  color: #F0D9A8;
  border: 1px solid var(--u-hairline);
}

/* — Зелёные блоки «готово»: был тёмно-зелёный текст — */
html[data-theme="dark"] .success-box {
  background: var(--u-good-soft);
  border-color: rgba(111,211,163,.38);
}
html[data-theme="dark"] .success-box h3 { color: #A8E8C8; }
html[data-theme="dark"] .success-box p  { color: #CFEFDF; }
html[data-theme="dark"] .solved-badge,
html[data-theme="dark"] .post-card.best-answer .avatar {
  background: rgba(111,211,163,.18);
  color: #C6EFD9;
}
html[data-theme="dark"] .post-card.best-answer { background: rgba(111,211,163,.07); }
html[data-theme="dark"] .best-label { color: var(--u-good); }

/* — Таблицы параметров: чередующиеся строки были почти белыми — */
html[data-theme="dark"] .param-table tr:nth-child(even) td { background: rgba(255,255,255,.035); }
html[data-theme="dark"] .param-table th { color: var(--u-ink); }
html[data-theme="dark"] .param-table td { color: var(--u-ink-muted); }

/* — Цветные бейджи карточек: светлая плашка + тёмные буквы — */
html[data-theme="dark"] .instruction-card .badge {
  background: rgba(255,255,255,.08);
  color: var(--u-ink);
  border: 1px solid var(--u-hairline-strong);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  html[data-theme="dark"] .instruction-card .badge {
    background: color-mix(in srgb, var(--card-accent, #6FB7EE) 20%, #12171C);
    color: color-mix(in srgb, var(--card-accent, #6FB7EE) 45%, #FFFFFF);
    border-color: color-mix(in srgb, var(--card-accent, #6FB7EE) 40%, transparent);
  }
}

/* — Старые ярлыки «чьё предложение» — */
html[data-theme="dark"] .kkt-cta-badge {
  background: rgba(237,184,119,.16);
  color: #F0CFA6;
}
html[data-theme="dark"] .lead-form-badge {
  background: rgba(111,211,163,.16);
  color: #C6EFD9;
}
html[data-theme="dark"] .lead-form {
  background: var(--u-surface-1);
  border-color: var(--u-hairline);
}
html[data-theme="dark"] .lead-form p.lead-form-lead,
html[data-theme="dark"] .lead-form-consent,
html[data-theme="dark"] .lead-form-field label { color: var(--u-ink-muted); }
html[data-theme="dark"] .lead-form-consent a { color: var(--u-accent); }
html[data-theme="dark"] .lead-form-status.ok { color: var(--u-good); }
html[data-theme="dark"] .lead-form-status.error { color: var(--u-bad); }

/* — Строка про cookie: один фон и один цвет текста в обеих темах.
     Было: чёрная подложка #14181f из cookie-consent.css просвечивала
     сквозь светлую вставку, а текст оставался почти белым. — */
.cookie-consent {
  background: transparent !important;
  color: var(--u-ink) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cookie-consent-inner { padding: 16px 18px; }
.cookie-consent-text { color: var(--u-ink) !important; }
html[data-theme="dark"] .cookie-consent-inner {
  background: var(--u-surface-1) !important;
  border-color: var(--u-hairline-strong) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] .cookie-consent-actions .btn-ghost,
html[data-theme="dark"] .cookie-consent-actions .btn-secondary {
  color: var(--u-ink);
  border-color: var(--u-hairline-strong);
  background: transparent;
}

/* — Общие страховки: всё, что осталось с белым фоном в тёмной теме — */
html[data-theme="dark"] .warning,
html[data-theme="dark"] .note,
html[data-theme="dark"] .tip {
  background: rgba(237,184,119,.10);
  border-color: rgba(237,184,119,.36);
  color: var(--u-ink);
}
html[data-theme="dark"] .warning strong,
html[data-theme="dark"] .note strong,
html[data-theme="dark"] .tip strong { color: #F0CFA6; }

/* Подсветка выделения текста: в тёмной теме стандартное выделение
   часто даёт тёмное на тёмном. */
html[data-theme="dark"] ::selection { background: rgba(111,183,238,.34); color: #FFFFFF; }

/* --- приглушённые метки на токены --- */
/* В main.css эти метки были слишком бледными в обеих темах. */
.sidebar-section,
.footer-copy,
.u-cta-line__mark { color: var(--u-ink-subtle); }
.post-card .best-label,
.best-label { color: var(--u-good); }

/* ===== Боковое меню: читаемость и ховер ===== */
/* Привязано к #sidebar и помечено !important специально: в разметке
   меню есть свой <style> с #sidebar-селекторами, а в старых сборках
   main.css пункты были вбиты ярким красным и синим. Эти правила
   делают меню читаемым в любом случае. */

/* — заголовки разделов — */
.sidebar .sidebar-section,
#sidebar .sidebar-section,
#sidebar .sidebar-details summary.sidebar-section {
  color: var(--u-ink-subtle) !important;
  font-size: .8rem;
  letter-spacing: var(--u-track-wide);
}

/* — пункты меню: обычное состояние — */
#sidebar .sidebar-nav > a,
#sidebar .sidebar-sub {
  color: var(--u-ink-muted) !important;
  background: transparent !important;
  border-radius: 0 var(--u-r-sm) var(--u-r-sm) 0;
}

/* — ховер и фокус с клавиатуры: всегда задаём ФОН И ТЕКСТ вместе — */
#sidebar .sidebar-nav > a:hover,
#sidebar .sidebar-sub:hover,
#sidebar .sidebar-nav > a:focus-visible,
#sidebar .sidebar-sub:focus-visible {
  color: var(--u-ink) !important;
  background: var(--u-surface-2) !important;
}
#sidebar .sidebar-nav > a:focus-visible,
#sidebar .sidebar-sub:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: -2px;
}

/* — текущая страница — */
#sidebar .sidebar-nav > a.active,
#sidebar .sidebar-sub.active {
  color: var(--u-accent-strong) !important;
  background: var(--u-accent-soft) !important;
  border-left-color: var(--u-accent) !important;
  font-weight: 600;
}
#sidebar .sidebar-nav > a.active::before,
#sidebar .sidebar-sub.active::before { background: var(--u-accent); }

/* — логотип и разделители — */
#sidebar .sidebar-logo { color: var(--u-ink) !important; }
#sidebar .sidebar-logo span { color: var(--u-accent) !important; }
#sidebar .sidebar-divider { background: var(--u-hairline) !important; }
#sidebar .sidebar-bottom,
#sidebar .sidebar-bottom-links { border-color: var(--u-hairline) !important; }

/* — контакты в подвале меню — */
#sidebar .compact-bottom .sidebar-contacts-label { color: var(--u-ink-subtle) !important; }
#sidebar .sidebar-phone,
#sidebar .sidebar-email { color: var(--u-ink) !important; }
#sidebar .sidebar-phone:hover,
#sidebar .sidebar-email:hover { color: var(--u-accent) !important; }
#sidebar .sidebar-lk { color: var(--u-accent) !important; }

/* — само полотно меню — */
#sidebar { background: var(--u-surface-1) !important; border-color: var(--u-hairline) !important; }

/* Плашка партнёрского кода в меню: светлая тема — тёмный янтарь на светлом. */
#sidebar .sidebar-partner span   { color: #7A4A0B !important; }
#sidebar .sidebar-partner strong { color: #5C3606 !important; }

/* Тёмная тема: плашка становится тёмно-янтарной со светлым текстом. */
html[data-theme="dark"] #sidebar .sidebar-partner {
  background: linear-gradient(135deg, #2E2416, #3A2C19) !important;
  border: 1px solid #6B5322 !important;
}
html[data-theme="dark"] #sidebar .sidebar-partner span   { color: #E7BE8A !important; }
html[data-theme="dark"] #sidebar .sidebar-partner strong { color: #F7DFBC !important; }

/* Мобильная шапка и затемнение под меню. */
html[data-theme="dark"] .sidebar-overlay { background: var(--u-scrim); }