/* ====================================================
   THEMES — оформление сайта на выбор пользователя
   ----------------------------------------------------
   Выбор хранится в cookie ui_theme (и в настройках аккаунта),
   PHP ставит его атрибутами на <html> ещё до отрисовки:
     data-theme   — палитра (classic = как в style.css, без подмены)
     data-accent  — акцентный цвет (нет атрибута — цвет из настроек сайта)
     data-bg      — фон: картинка / затемнённая / без картинки
     data-motion  — off: без анимаций
     data-glass   — on: полупрозрачные карточки с размытием фона
     data-radius  — sharp / round: скругление углов карточек
     data-scale   — sm / lg: размер всего интерфейса
     data-font    — manrope / rubik / mono / system (Inter — без атрибута)
     data-width   — narrow / wide: ширина страницы на компьютере
     data-contrast— high: высокий контраст
     style="--accent…" — свой цвет акцента (data-accent="custom")
   Каталог тем и акцентов — lib/site_theme.php, кнопка — components/header.php.
   ==================================================== */

/* ── Палитры ─────────────────────────────────────────── */
html[data-theme="midnight"] {
  --bg: #0f141c; --bg-2: #141a24; --bg-3: #18202c; --bg-card: #1c2533;
  --bg-input: #121822; --bg-hover: #222c3c; --border: #263142; --border-2: #2f3c50;
  --text: #c5cfdd; --text-dim: #66748a; --text-head: #55627a; --text-light: #e6edf7; --text-muted: #8090a8;
}
html[data-theme="amoled"] {
  --bg: #000000; --bg-2: #070707; --bg-3: #0c0c0c; --bg-card: #111111;
  --bg-input: #080808; --bg-hover: #181818; --border: #1e1e1e; --border-2: #2a2a2a;
  --text: #c9c9c9; --text-dim: #5e5e5e; --text-head: #4d4d4d; --text-light: #f0f0f0; --text-muted: #808080;
}
html[data-theme="graphite"] {
  --bg: #2a2d33; --bg-2: #30333a; --bg-3: #353941; --bg-card: #3b3f48;
  --bg-input: #2c2f35; --bg-hover: #41454f; --border: #444955; --border-2: #4e5461;
  --text: #d6dae2; --text-dim: #7a8294; --text-head: #6a7285; --text-light: #f2f4f8; --text-muted: #959db0;
}
html[data-theme="amethyst"] {
  --bg: #16131f; --bg-2: #1b1726; --bg-3: #201b2d; --bg-card: #261f36;
  --bg-input: #18141f; --bg-hover: #2d2540; --border: #322945; --border-2: #3c3253;
  --text: #d0c9df; --text-dim: #6d6385; --text-head: #5e5577; --text-light: #ece7f7; --text-muted: #8f86a8;
}
html[data-theme="military"] {
  --bg: #1a1c16; --bg-2: #20221b; --bg-3: #252820; --bg-card: #2c2f25;
  --bg-input: #1c1e18; --bg-hover: #33372b; --border: #363a2d; --border-2: #424735;
  --text: #cfd2c0; --text-dim: #6a6f58; --text-head: #5a5f4a; --text-light: #eef0e2; --text-muted: #8d927a;
}
html[data-theme="crimson"] {
  --bg: #1a1214; --bg-2: #201618; --bg-3: #261a1d; --bg-card: #2d1f23;
  --bg-input: #1c1315; --bg-hover: #35252a; --border: #3a282d; --border-2: #463036;
  --text: #dccdd0; --text-dim: #7a6268; --text-head: #6a535a; --text-light: #f6eaec; --text-muted: #a08a8f;
}

html[data-theme="ocean"] {
  --bg: #0c1719; --bg-2: #101e21; --bg-3: #142427; --bg-card: #16282b;
  --bg-input: #0e1a1c; --bg-hover: #1c3236; --border: #1f3739; --border-2: #284446;
  --text: #c6d8d8; --text-dim: #5f7b7c; --text-head: #506a6b; --text-light: #e6f4f3; --text-muted: #7f9b9b;
}
html[data-theme="coffee"] {
  --bg: #1b1714; --bg-2: #211c18; --bg-3: #26201b; --bg-card: #2c2520;
  --bg-input: #1d1915; --bg-hover: #352c25; --border: #3a3029; --border-2: #463a31;
  --text: #dbd0c5; --text-dim: #7b6c5f; --text-head: #6a5d51; --text-light: #f5ede4; --text-muted: #a09080;
}

/* Шапка и её выпадашки покрашены в header.php готовыми цветами —
   в нестандартной теме переводим их на переменные палитры */
html[data-theme]:not([data-theme="classic"]) .site-header { background: var(--bg-input); border-bottom-color: var(--border); }
html[data-theme]:not([data-theme="classic"]) .dropdown-panel { background: var(--bg-input); border-color: var(--border); }
html[data-theme]:not([data-theme="classic"]) .nd-header,
html[data-theme]:not([data-theme="classic"]) .nd-tabs { border-color: var(--border); }
html[data-theme]:not([data-theme="classic"]) .nd-tab.active,
html[data-theme]:not([data-theme="classic"]) .notif-sheet-tab.active,
html[data-theme]:not([data-theme="classic"]) .nd-footer a,
html[data-theme]:not([data-theme="classic"]) .notif-sheet-footer a,
html[data-theme]:not([data-theme="classic"]) .btn-action,
html[data-theme]:not([data-theme="classic"]) .notif-sheet-avatar,
html[data-theme]:not([data-theme="classic"]) .notif-sheet-close { background: var(--bg-3); border-color: var(--border-2); }
html[data-theme]:not([data-theme="classic"]) .profile-menu-grid { background: var(--bg-input); border-color: var(--border); }
html[data-theme]:not([data-theme="classic"]) .profile-menu-item { background: var(--bg); }
html[data-theme]:not([data-theme="classic"]) .profile-menu-item:hover { background: var(--bg-hover); }
html[data-theme]:not([data-theme="classic"]) .mobile-menu,
html[data-theme]:not([data-theme="classic"]) .notif-sheet { background: var(--bg); border-color: var(--border); }
html[data-theme]:not([data-theme="classic"]) .mobile-menu-header,
html[data-theme]:not([data-theme="classic"]) .mobile-user-block { border-color: var(--border); }

/* ── Акценты ─────────────────────────────────────────── */
html[data-accent="green"]  { --accent: #3dba6f; --accent-hover: #35a862; --accent-dim: rgba(61,186,111,.12); }
html[data-accent="blue"]   { --accent: #4e8ef7; --accent-hover: #3f7de6; --accent-dim: rgba(78,142,247,.12); }
html[data-accent="violet"] { --accent: #8b6cf6; --accent-hover: #7a5ae6; --accent-dim: rgba(139,108,246,.12); }
html[data-accent="pink"]   { --accent: #ec4899; --accent-hover: #d93c89; --accent-dim: rgba(236,72,153,.12); }
html[data-accent="orange"] { --accent: #f2873a; --accent-hover: #df7629; --accent-dim: rgba(242,135,58,.12); }
html[data-accent="red"]    { --accent: #e5534b; --accent-hover: #d1443c; --accent-dim: rgba(229,83,75,.12); }
html[data-accent="teal"]   { --accent: #22b8a7; --accent-hover: #1ca594; --accent-dim: rgba(34,184,167,.12); }
html[data-accent="gold"]   { --accent: #e0b23c; --accent-hover: #cc9f2e; --accent-dim: rgba(224,178,60,.12); }

/* Активный пункт меню в шапке задан готовым зелёным — ведём за акцентом */
html[data-accent] .nav-link-top.active { background: var(--accent-dim); color: var(--accent); }
html[data-accent] .nd-mark-all { color: var(--accent); }
html[data-accent] .mobile-nav-link:hover svg { color: var(--accent); }

/* ── Фон ─────────────────────────────────────────────── */
html[data-bg="dim"] body {
  background-image: linear-gradient(rgba(0,0,0,.82), rgba(0,0,0,.82)), url(/media/background.jpg);
}
html[data-bg="none"] body { background-image: none; }
/* «Сияние»: мягкие пятна цвета акцента вместо картинки */
html[data-bg="aurora"] body {
  background-image:
    radial-gradient(900px 520px at 8% -8%,  color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(800px 480px at 96% 4%,  color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(1100px 700px at 50% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  background-color: var(--bg);
}

/* ── Стекло: карточки просвечивают, сквозь них виден фон ──
   Без backdrop-filter намеренно: он делает блок «контейнером» для
   position:fixed, и модальные окна внутри карточек съехали бы в карточку. */
html[data-glass="on"] .page-section,
html[data-glass="on"] .card,
html[data-glass="on"] .plugin-card,
html[data-glass="on"] .xp-dash-card,
html[data-glass="on"] .cso-wrap {
  background: color-mix(in srgb, var(--bg-card) 74%, transparent);
  border-color: color-mix(in srgb, var(--border-2) 75%, rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.18);
}
html[data-glass="on"] .sidebar,
html[data-glass="on"] .footer { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }
html[data-glass="on"] .site-header { background: color-mix(in srgb, var(--bg-input) 84%, transparent) !important; }

/* ── Скругление углов ── */
html[data-radius="sharp"] :is(.page-section, .card, .plugin-card, .xp-dash-card, .sidebar, .cso-wrap, .dropdown-panel, .theme-panel, .empty) { border-radius: 3px; }
html[data-radius="round"] :is(.page-section, .card, .plugin-card, .xp-dash-card, .sidebar, .cso-wrap, .dropdown-panel, .theme-panel, .empty) { border-radius: 18px; }
html[data-radius="sharp"] :is(.btn, .form-control, .form-select, .sidebar a, .nav-link-top) { border-radius: 2px !important; }
html[data-radius="round"] :is(.btn, .form-control, .form-select) { border-radius: 12px !important; }
html[data-radius="round"] :is(.sidebar a, .nav-link-top) { border-radius: 10px; }

/* ── Шрифт ── */
html[data-font="manrope"] { --font: 'Manrope', -apple-system, 'Segoe UI', sans-serif; }
html[data-font="rubik"]   { --font: 'Rubik', -apple-system, 'Segoe UI', sans-serif; }
html[data-font="mono"]    { --font: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
html[data-font="system"]  { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
/* Bootstrap и часть блоков задают шрифт сами — ведём их за выбором */
html[data-font] body, html[data-font] :is(button, input, select, textarea, .btn, .form-control) { font-family: var(--font); }
html[data-font="mono"] body { letter-spacing: -.01em; }

/* ── Ширина страницы (на телефоне не действует — там и так во всю ширину) ── */
@media (min-width: 901px) {
  html[data-width="narrow"] .nav-container { max-width: 1140px; }
  html[data-width="narrow"] .header-inner  { padding: 0 max(4%, calc((100% - 1140px) / 2)); }
  html[data-width="wide"]   .nav-container { max-width: none; padding-left: 2.5%; padding-right: 2.5%; }
  html[data-width="wide"]   .header-inner  { padding: 0 2.5%; }
  html[data-width="wide"]   .footer        { padding-left: 2.5%; padding-right: 2.5%; }
}

/* ── Высокий контраст: текст ярче, рамки заметнее ── */
html[data-contrast="high"] {
  --text: #eef1f6; --text-light: #ffffff; --text-muted: #b4bccb; --text-dim: #949db0; --text-head: #a3abbd;
  --border: color-mix(in srgb, var(--bg-card) 55%, #8a93a6); --border-2: color-mix(in srgb, var(--bg-card) 40%, #a5aec0);
}
html[data-contrast="high"] a:focus-visible, html[data-contrast="high"] button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Плавная смена темы (класс ставит скрипт панели на 400 мс) ── */
html.th-anim, html.th-anim *, html.th-anim *::before, html.th-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

/* ── Размер интерфейса ── */
html[data-scale="sm"] { zoom: .92; }
html[data-scale="lg"] { zoom: 1.1; }

/* ── Без анимаций ────────────────────────────────────── */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ====================================================
   Кнопка и панель выбора оформления (рядом с колокольчиком)
   ==================================================== */
.theme-wrap { position: relative; }
.theme-panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 320px; z-index: 9999;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 14px; cursor: default;
  max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin;
  font-family: var(--font); color: var(--text);
}
.theme-panel.open { display: block; animation: thp-in .14s ease-out; }
@keyframes thp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.thp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.thp-title { font-size: 14px; font-weight: 700; color: var(--text-light); }
.thp-reset { background: none; border: 0; color: var(--text-muted); font-size: 11.5px; cursor: pointer; padding: 3px 6px; border-radius: 5px; font-family: var(--font); }
.thp-reset:hover { color: var(--text-light); background: rgba(255,255,255,.05); }
.thp-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 7px; }
.thp-label:first-of-type { margin-top: 0; }

/* Плитки тем: мини-превью страницы в цветах темы */
.thp-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.thp-theme { background: none; border: 2px solid transparent; border-radius: 10px; padding: 0; cursor: pointer; text-align: left; font-family: var(--font); }
.thp-theme:hover .thp-prev { transform: translateY(-1px); }
.thp-theme.on { border-color: var(--accent); }
.thp-prev { display: block; height: 46px; border-radius: 8px; padding: 6px; position: relative; overflow: hidden; transition: transform .12s; border: 1px solid rgba(255,255,255,.06); }
.thp-prev i { display: block; height: 7px; border-radius: 3px; margin-bottom: 4px; }
.thp-prev i:nth-child(2) { width: 70%; }
.thp-prev b { position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.thp-name { display: block; font-size: 11.5px; color: var(--text); padding: 4px 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Акценты — кружки */
.thp-accents { display: flex; gap: 7px; flex-wrap: wrap; }
.thp-acc { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
           display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px var(--bg-input); }
.thp-acc.on { border-color: var(--text-light); }
.thp-acc.site { background: conic-gradient(#3dba6f, #4e8ef7, #8b6cf6, #ec4899, #f2873a, #3dba6f); }
.thp-acc svg { color: #fff; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.thp-acc.on svg { opacity: 1; }
/* Свой цвет: радужный кружок, внутри — системная палитра */
.thp-acc.custom { position: relative; overflow: hidden; background: conic-gradient(#e5534b, #e0b23c, #3dba6f, #22b8a7, #4e8ef7, #8b6cf6, #ec4899, #e5534b); }
.thp-acc.custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; border: 0; padding: 0; }
.thp-acc.custom .plus { color: #fff; font-size: 15px; font-weight: 700; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.thp-acc.custom.on .plus { display: none; }
/* Готовые стили: фон темы + полоса акцента */
.thp-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.thp-preset { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 9px; cursor: pointer;
              background: var(--pb); border: 1px solid rgba(255,255,255,.07); color: #e9ecf2; font-family: var(--font);
              font-size: 12px; font-weight: 600; overflow: hidden; text-align: left; }
.thp-preset::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pa); }
.thp-preset i { color: var(--pa); font-size: 13px; flex-shrink: 0; }
.thp-preset span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thp-preset:hover { border-color: rgba(255,255,255,.18); }
.thp-preset.on { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa) inset; }

/* Плитки шрифтов: «Аа» показана тем самым шрифтом */
.thp-fonts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.thp-font { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 2px 5px; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text); font-family: var(--font); }
.thp-font:hover { border-color: var(--border-2); }
.thp-font.on { border-color: var(--accent); background: var(--accent-dim); }
.thp-font b { font-size: 17px; font-weight: 600; line-height: 1.1; color: var(--text-light); }
.thp-font span { font-size: 10px; color: var(--text-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.thp-font[data-ff="inter"] b   { font-family: 'Inter', sans-serif; }
.thp-font[data-ff="manrope"] b { font-family: 'Manrope', sans-serif; }
.thp-font[data-ff="rubik"] b   { font-family: 'Rubik', sans-serif; }
.thp-font[data-ff="mono"] b    { font-family: 'JetBrains Mono', monospace; }
.thp-font[data-ff="system"] b  { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
@media (max-width: 900px) { .thp-hide-m { display: none !important; } }

.thp-switch { width: 100%; text-align: left; font-family: var(--font); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 11px;
              background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text); user-select: none; }
.thp-switch small { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.thp-switch i { width: 34px; height: 20px; border-radius: 10px; background: var(--border-2); position: relative; flex-shrink: 0; transition: background .15s; }
.thp-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.thp-switch.on i { background: var(--accent); }
.thp-switch.on i::after { transform: translateX(14px); }

/* Переключатели в один ряд */
.thp-seg { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.thp-seg button { flex: 1; background: none; border: 0; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 6px 4px;
                  border-radius: 6px; cursor: pointer; font-family: var(--font); white-space: nowrap; }
.thp-seg button:hover { color: var(--text-light); }
.thp-seg button.on { background: var(--accent-dim); color: var(--accent); }
.thp-note { margin-top: 12px; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* На телефоне — шторка снизу */
@media (max-width: 768px) {
  .theme-panel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0;
                 max-height: 85vh; overflow-y: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 3000; }
  .theme-panel.open { animation: thp-up .22s ease-out; }
  @keyframes thp-up { from { transform: translateY(100%); } to { transform: none; } }
  .theme-shade { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2999; display: none; }
  .theme-shade.open { display: block; }
}
@media (min-width: 769px) { .theme-shade { display: none !important; } }