/**
 * Мягкая монохромная палитра (data-palette="mono")
 * Работает вместе с data-theme="dark" | "light"
 * --green переопределён как нейтральный акцент для совместимости с var(--green)
 *
 * filter: grayscale на html снимает остаточные хардкодные акценты
 * (пилюли шапки, home chrome, HOT, графики, FAB) без сотен точечных override.
 */

html[data-palette="mono"] {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

html[data-palette="mono"] .page--home {
  --home-chrome-accent-line: linear-gradient(
    90deg,
    rgba(161, 161, 170, 0.45) 0%,
    rgba(212, 212, 216, 0.9) 42%,
    rgba(161, 161, 170, 0.65) 58%,
    rgba(113, 113, 122, 0.5) 100%
  );
  --home-chrome-edge: rgba(161, 161, 170, 0.22);
  --home-chrome-edge-light: rgba(82, 82, 91, 0.18);
  --home-chrome-blur: blur(12px) saturate(0.35);
}

[data-palette="mono"][data-theme="dark"] {
  --bg: #18181b;
  --white: #f4f4f5;
  --green: #a1a1aa;
  --accent: #a1a1aa;
  --accent-strong: #d4d4d8;
  --accent-deep: #e4e4e7;
  --accent-muted: rgba(228, 228, 231, 0.78);
  --accent-soft: rgba(161, 161, 170, 0.16);
  --accent-soft-strong: rgba(161, 161, 170, 0.28);
  --accent-border: rgba(161, 161, 170, 0.38);
  --accent-border-strong: rgba(212, 212, 216, 0.55);
  --accent-glow: rgba(161, 161, 170, 0.28);
  --accent-secondary: #71717a;
  --accent-secondary-muted: rgba(212, 212, 216, 0.75);
  --accent-secondary-border: rgba(113, 113, 122, 0.45);
  --accent-secondary-glow: rgba(113, 113, 122, 0.28);
  --text-muted: rgba(244, 244, 245, 0.58);
  --text-footer: rgba(212, 212, 216, 0.48);
  --header-premium-border: rgba(161, 161, 170, 0.28);
  --header-premium-inset: rgba(255, 255, 255, 0.04);
  --header-premium-shadow: 0 3px 20px rgba(0, 0, 0, 0.35);
  --surface-elevated: #27272a;
  --surface-card: rgba(24, 24, 27, 0.88);
  --surface-glass: rgba(24, 24, 27, 0.72);
  --gradient-accent: linear-gradient(
    165deg,
    rgba(161, 161, 170, 0.42) 0%,
    rgba(82, 82, 91, 0.35) 52%,
    rgba(39, 39, 42, 0.55) 100%
  );
  --gradient-accent-light: linear-gradient(
    165deg,
    rgba(244, 244, 245, 0.96) 0%,
    rgba(212, 212, 216, 0.9) 55%,
    rgba(228, 228, 231, 0.96) 100%
  );
  --gradient-secondary: linear-gradient(
    165deg,
    rgba(113, 113, 122, 0.5) 0%,
    rgba(82, 82, 91, 0.38) 52%,
    rgba(63, 63, 70, 0.3) 100%
  );
  --blob-green: rgba(161, 161, 170, 0.28);
  --blob-blue: rgba(113, 113, 122, 0.22);
}

[data-palette="mono"][data-theme="light"] {
  --bg: #f4f4f5;
  --white: #18181b;
  --green: #52525b;
  --accent: #52525b;
  --accent-strong: #3f3f46;
  --accent-deep: #27272a;
  --accent-muted: #3f3f46;
  --accent-soft: rgba(82, 82, 91, 0.1);
  --accent-soft-strong: rgba(82, 82, 91, 0.18);
  --accent-border: rgba(82, 82, 91, 0.32);
  --accent-border-strong: rgba(63, 63, 70, 0.48);
  --accent-glow: rgba(82, 82, 91, 0.16);
  --accent-secondary: #71717a;
  --accent-secondary-muted: #3f3f46;
  --accent-secondary-border: rgba(113, 113, 122, 0.35);
  --accent-secondary-glow: rgba(113, 113, 122, 0.14);
  --text-muted: rgba(24, 24, 27, 0.58);
  --text-footer: rgba(24, 24, 27, 0.45);
  --header-premium-border: rgba(82, 82, 91, 0.22);
  --header-premium-inset: rgba(255, 255, 255, 0.98);
  --header-premium-shadow: 0 2px 14px rgba(24, 24, 27, 0.08);
  --surface-elevated: #ffffff;
  --surface-card: rgba(255, 255, 255, 0.92);
  --surface-glass: rgba(255, 255, 255, 0.88);
  --gradient-accent: linear-gradient(
    165deg,
    rgba(244, 244, 245, 0.98) 0%,
    rgba(228, 228, 231, 0.94) 55%,
    rgba(250, 250, 250, 0.98) 100%
  );
  --gradient-accent-light: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(244, 244, 245, 0.94) 55%,
    rgba(250, 250, 250, 0.98) 100%
  );
  --gradient-secondary: linear-gradient(
    165deg,
    rgba(228, 228, 231, 0.98) 0%,
    rgba(212, 212, 216, 0.92) 55%,
    rgba(244, 244, 245, 0.98) 100%
  );
  --blob-green: rgba(82, 82, 91, 0.18);
  --blob-blue: rgba(113, 113, 122, 0.14);
}

/* ——— Тренажёры: варианты, шапка, овалы ——— */

html[data-palette="mono"] .hf-variants-shell {
  border-color: var(--accent-border) !important;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 24px var(--accent-soft) !important;
}

html[data-palette="mono"] .hf-variants-shell__head {
  border-bottom-color: var(--accent-border) !important;
  background: linear-gradient(
    90deg,
    var(--accent-soft-strong) 0%,
    rgba(113, 113, 122, 0.1) 50%,
    var(--accent-soft) 100%
  ) !important;
}

html[data-palette="mono"] .hf-variants-shell__active,
html[data-palette="mono"] .hf-variants-shell__toggle {
  color: var(--accent-muted) !important;
}

html[data-palette="mono"] .hf-variants-shell__toggle {
  border-color: var(--accent-border-strong) !important;
  background: linear-gradient(135deg, var(--accent-soft-strong) 0%, var(--accent-soft) 100%) !important;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-palette="mono"] .hf-variants-shell__head-main .hf-variants-shell__task-arrow--next:not(.hf-variants-shell__task-arrow--disabled) {
  border-color: var(--accent-border-strong) !important;
  background: var(--green) !important;
  box-shadow: 0 0 14px var(--accent-glow) !important;
  color: #18181b !important;
}

html[data-palette="mono"][data-theme="light"] .hf-variants-shell__head-main .hf-variants-shell__task-arrow--next:not(.hf-variants-shell__task-arrow--disabled) {
  color: #fafafa !important;
  background: var(--accent-strong) !important;
}

html[data-palette="mono"] .theme-cycle-toggle {
  border-color: var(--accent-border);
}

html[data-palette="mono"] .hf-header-util-toggle {
  border-color: var(--accent-border) !important;
}

html[data-palette="mono"] .header--task-hf--chips .hf-header-util-toggle {
  border-color: var(--accent-border-strong) !important;
  background: linear-gradient(
    135deg,
    rgba(39, 39, 42, 0.98) 0%,
    rgba(24, 24, 27, 0.96) 100%
  ) !important;
  box-shadow:
    0 3px 0 rgba(9, 9, 11, 0.9),
    0 6px 14px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

html[data-palette="mono"][data-theme="light"] .header--task-hf--chips .hf-header-util-toggle {
  background: linear-gradient(135deg, #fafafa 0%, #e4e4e7 100%) !important;
  box-shadow:
    0 3px 0 color-mix(in srgb, #52525b 35%, #3f3f46 50%),
    0 1px 0 rgba(255, 255, 255, 0.85) inset !important;
}

/* Header chips — нейтральные «конфеты» */
html[data-palette="mono"] .header--task-hf--chips .hf-header-chip--home {
  border-color: rgba(161, 161, 170, 0.45) !important;
  background: linear-gradient(135deg, #3f3f46 0%, #52525b 48%, #71717a 100%) !important;
  color: #fafafa !important;
  box-shadow:
    0 3px 0 #18181b,
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] .header--task-hf--chips .hf-header-chip--variants {
  border-color: rgba(212, 212, 216, 0.4) !important;
  background: linear-gradient(135deg, #27272a 0%, #3f3f46 48%, #52525b 100%) !important;
  color: #f4f4f5 !important;
  box-shadow:
    0 3px 0 #09090b,
    0 6px 14px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] .header--task-hf--chips .hf-header-chip--teacher {
  border-color: rgba(113, 113, 122, 0.5) !important;
  background: linear-gradient(135deg, #18181b 0%, #27272a 48%, #3f3f46 100%) !important;
  color: #e4e4e7 !important;
}

html[data-palette="mono"][data-theme="light"] .header--task-hf--chips .hf-header-chip--home,
html[data-palette="mono"][data-theme="light"] .header--task-hf--chips .hf-header-chip--variants,
html[data-palette="mono"][data-theme="light"] .header--task-hf--chips .hf-header-chip--teacher {
  color: #18181b !important;
  background: linear-gradient(135deg, #fafafa 0%, #e4e4e7 100%) !important;
  border-color: rgba(82, 82, 91, 0.4) !important;
  box-shadow:
    0 3px 0 #a1a1aa,
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* Боковые овалы — мягкий десатурат, тип тренажёра читается тоном */
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--python {
  border-color: rgba(212, 212, 216, 0.4);
  background: linear-gradient(180deg, #52525b 0%, #3f3f46 55%, #27272a 100%);
  color: #f4f4f5;
}

html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--calc {
  border-color: rgba(161, 161, 170, 0.4);
  background: linear-gradient(180deg, #3f3f46 0%, #27272a 55%, #18181b 100%);
  color: #e4e4e7;
}

html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--dual {
  border-color: rgba(212, 212, 216, 0.35);
  background: linear-gradient(
    90deg,
    #52525b 0%,
    #3f3f46 50%,
    #27272a 50%,
    #18181b 100%
  );
  color: #fafafa;
}

html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--word {
  border-color: rgba(113, 113, 122, 0.45);
  background: linear-gradient(180deg, #27272a 0%, #18181b 55%, #09090b 100%);
  color: #d4d4d8;
}

html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--brain {
  border-color: rgba(161, 161, 170, 0.4);
  background: linear-gradient(180deg, #3f3f46 0%, #52525b 55%, #71717a 100%);
  color: #fafafa;
}

html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--active,
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--python.task-sidebar__item--active,
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--calc.task-sidebar__item--active,
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--dual.task-sidebar__item--active,
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--word.task-sidebar__item--active,
html[data-palette="mono"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--brain.task-sidebar__item--active {
  border-color: rgba(228, 228, 231, 0.65);
  box-shadow:
    0 0 0 1px rgba(212, 212, 216, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-palette="mono"][data-theme="light"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--python,
html[data-palette="mono"][data-theme="light"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--calc,
html[data-palette="mono"][data-theme="light"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--brain {
  background: linear-gradient(180deg, #fafafa 0%, #e4e4e7 100%);
  color: #27272a;
  border-color: rgba(113, 113, 122, 0.35);
}

html[data-palette="mono"][data-theme="light"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--dual {
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 50%, #d4d4d8 50%, #a1a1aa 100%);
  color: #18181b;
}

html[data-palette="mono"][data-theme="light"] .task-sidebar:not(.task-sidebar--open) .task-sidebar__item--word {
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f5 100%);
  color: #3f3f46;
}

/* Панель «Покажи как» — нейтральный акцент через CSS-переменные */
html[data-palette="mono"] .ege-task18-explain-chrome,
html[data-palette="mono"] .ege-task3-explain-chrome,
html[data-palette="mono"] .ege-task9-explain-chrome {
  --ege-task18-explain-accent: #a1a1aa;
  --ege-task18-explain-accent-deep: #d4d4d8;
  --ege-task3-explain-accent: #a1a1aa;
  --ege-task3-explain-accent-deep: #d4d4d8;
  --ege-task9-explain-accent: #a1a1aa;
  --ege-task9-explain-accent-deep: #d4d4d8;
}

html[data-palette="mono"][data-theme="dark"] .ege-task18-explain-chrome,
html[data-palette="mono"][data-theme="dark"] .ege-task3-explain-chrome,
html[data-palette="mono"][data-theme="dark"] .ege-task9-explain-chrome {
  --ege-task18-explain-ink: #f4f4f5;
  --ege-task18-explain-muted: #a1a1aa;
  --ege-task18-explain-surface: color-mix(in srgb, #18181b 78%, #3f3f46 22%);
  --ege-task18-explain-border: color-mix(in srgb, #a1a1aa 32%, #3f3f46 68%);
  --ege-task3-explain-ink: #f4f4f5;
  --ege-task3-explain-muted: #a1a1aa;
  --ege-task3-explain-surface: color-mix(in srgb, #18181b 78%, #3f3f46 22%);
  --ege-task3-explain-border: color-mix(in srgb, #a1a1aa 32%, #3f3f46 68%);
  --ege-task9-explain-ink: #f4f4f5;
  --ege-task9-explain-muted: #a1a1aa;
  --ege-task9-explain-surface: color-mix(in srgb, #18181b 78%, #3f3f46 22%);
  --ege-task9-explain-border: color-mix(in srgb, #a1a1aa 32%, #3f3f46 68%);

  background: linear-gradient(
    135deg,
    color-mix(in srgb, #3f3f46 42%, #18181b 58%) 0%,
    color-mix(in srgb, #18181b 82%, #27272a 18%) 48%,
    color-mix(in srgb, #27272a 88%, #3f3f46 12%) 100%
  ) !important;
}

/* Kid-кнопки ответа — серые градиенты */
html[data-palette="mono"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--answer,
html[data-palette="mono"] #task-answer-section:not([hidden]) .ege-kid-start-btn--answer {
  border-color: rgba(161, 161, 170, 0.5) !important;
  background: linear-gradient(135deg, #3f3f46 0%, #52525b 48%, #71717a 100%) !important;
  color: #fafafa !important;
  box-shadow:
    0 3px 0 #18181b,
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--solutions,
html[data-palette="mono"] #task-answer-section:not([hidden]) .ege-kid-start-btn--solutions {
  border-color: rgba(113, 113, 122, 0.5) !important;
  background: linear-gradient(135deg, #27272a 0%, #3f3f46 48%, #52525b 100%) !important;
  color: #f4f4f5 !important;
  box-shadow:
    0 3px 0 #09090b,
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--explain,
html[data-palette="mono"] #task-answer-section:not([hidden]) .ege-kid-start-btn--explain {
  border-color: rgba(212, 212, 216, 0.4) !important;
  background: linear-gradient(135deg, #18181b 0%, #27272a 45%, #3f3f46 100%) !important;
  color: #e4e4e7 !important;
  box-shadow:
    0 3px 0 #09090b,
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--ai,
html[data-palette="mono"] #task-answer-section:not([hidden]) .ege-kid-start-btn--ai {
  border-color: rgba(161, 161, 170, 0.45) !important;
  background: linear-gradient(135deg, #3f3f46 0%, #52525b 45%, #71717a 100%) !important;
  color: #fafafa !important;
  box-shadow:
    0 3px 0 #18181b,
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html[data-palette="mono"] .ege-kid-start-btn__icon-wrap {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(24, 24, 27, 0.4) 100%);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-palette="mono"][data-theme="light"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--answer,
html[data-palette="mono"][data-theme="light"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--solutions,
html[data-palette="mono"][data-theme="light"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--explain,
html[data-palette="mono"][data-theme="light"] body.libreoffice-page-task9 #task-answer-section:not([hidden]) .ege-kid-start-btn--ai {
  color: #18181b !important;
  background: linear-gradient(135deg, #fafafa 0%, #e4e4e7 48%, #d4d4d8 100%) !important;
  border-color: rgba(82, 82, 91, 0.4) !important;
  box-shadow:
    0 3px 0 #a1a1aa,
    0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

/* Чипы вариантов */
html[data-palette="mono"] body.libreoffice-page-hf-task-list .hf-variants-nav .libreoffice-task9-chip--active {
  border-color: rgba(212, 212, 216, 0.55);
  background: linear-gradient(
    165deg,
    rgba(161, 161, 170, 0.32) 0%,
    rgba(82, 82, 91, 0.28) 100%
  );
  color: #f4f4f5;
  box-shadow:
    0 0 0 1px rgba(161, 161, 170, 0.3),
    0 0 16px rgba(161, 161, 170, 0.18);
}

html[data-palette="mono"] body.libreoffice-page-hf-task-list .variants-year__column--official .libreoffice-task9-chip--active,
html[data-palette="mono"] body.libreoffice-page-hf-task-list .variants-year__column--author .libreoffice-task9-chip--active {
  border-color: rgba(212, 212, 216, 0.55);
  color: #f4f4f5;
}