:root { color-scheme: light dark; --anim-speed: 0.3s; --easing: cubic-bezier(0.25, 0.8, 0.25, 1); }

  /* ================= ТЕМЫ ОФОРМЛЕНИЯ (перенесено из EpsVitya, аудит 2026-08-19) =================
     Раньше страница брала цвета напрямую из var(--tg-theme-*) (тема Telegram-клиента). Теперь —
     7 фиксированных тем ниже, переключаются вручную (кнопка ⚙️), выбор хранится в localStorage.
     light/dark — те же роли, что раньше играли var(--tg-theme-*), но с собственной палитрой. */
  body[data-theme="light"] {
    --bg-color: #f4f5f7; --card-bg: #ffffff; --text-color: #1a1a1c; --hint-color: #6b7280;
    --accent-color: #3b82f6; --accent-hover: #2563eb; --accent-text: #ffffff;
    --border-color: rgba(0, 0, 0, 0.08); --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    --card-hover-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); --btn-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-header: var(--font-main);
    --danger-bg: rgba(239, 68, 68, 0.08); --danger-text: #ef4444; --danger-border: rgba(239, 68, 68, 0.2);
    --status-ok-bg: rgba(22, 163, 74, 0.95); --status-err-bg: rgba(220, 38, 38, 0.95); --status-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  body[data-theme="dark"] {
    --bg-color: #121214; --card-bg: #1e1e20; --text-color: #e5e7eb; --hint-color: #9ca3af;
    --accent-color: #3b82f6; --accent-hover: #60a5fa; --accent-text: #ffffff;
    --border-color: rgba(255, 255, 255, 0.05); --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --card-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); --btn-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-header: var(--font-main);
    --danger-bg: rgba(239, 68, 68, 0.1); --danger-text: #f87171; --danger-border: rgba(239, 68, 68, 0.2);
    --status-ok-bg: rgba(22, 163, 74, 0.95); --status-err-bg: rgba(220, 38, 38, 0.95); --status-shadow: 0 10px 25px rgba(0,0,0,0.4);
  }
  body[data-theme="neon"] {
    --bg-color: #050514; --card-bg: rgba(10, 15, 40, 0.7); --text-color: #e0f2fe; --hint-color: #7dd3fc;
    --accent-color: #0ea5e9; --accent-hover: #38bdf8; --accent-text: #050514;
    --border-color: rgba(14, 165, 233, 0.3); --card-shadow: 0 0 12px rgba(14, 165, 233, 0.15);
    --card-hover-shadow: 0 0 20px rgba(14, 165, 233, 0.4); --btn-shadow: 0 0 15px rgba(14, 165, 233, 0.6);
    --font-main: 'Orbitron', sans-serif; --font-header: 'Orbitron', sans-serif;
    --danger-bg: rgba(225, 29, 72, 0.15); --danger-text: #fb7185; --danger-border: rgba(225, 29, 72, 0.5);
    --status-ok-bg: rgba(14, 165, 233, 0.95); --status-err-bg: rgba(225, 29, 72, 0.95); --status-shadow: 0 0 20px var(--accent-color);
  }
  body[data-theme="cyberpunk"] {
    --bg-color: #080a09; --card-bg: #101412; --text-color: #a7f3d0; --hint-color: #059669;
    --accent-color: #10b981; --accent-hover: #34d399; --accent-text: #000000;
    --border-color: rgba(16, 185, 129, 0.4); --card-shadow: 4px 4px 0px rgba(16, 185, 129, 0.2);
    --card-hover-shadow: 6px 6px 0px rgba(16, 185, 129, 0.4); --btn-shadow: 3px 3px 0px rgba(16, 185, 129, 0.6);
    --font-main: 'Rajdhani', sans-serif; --font-header: 'Rajdhani', sans-serif;
    --danger-bg: rgba(245, 158, 11, 0.1); --danger-text: #fbbf24; --danger-border: rgba(245, 158, 11, 0.5);
    --status-ok-bg: rgba(16, 185, 129, 0.95); --status-err-bg: rgba(245, 158, 11, 0.95); --status-shadow: 4px 4px 0px var(--accent-color);
  }
  body[data-theme="space"] {
    --bg-color: #080a13; background-image: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #080a13 70%); background-attachment: fixed;
    --card-bg: rgba(22, 27, 48, 0.6); --text-color: #e2e8f0; --hint-color: #a78bfa;
    --accent-color: #8b5cf6; --accent-hover: #a855f7; --accent-text: #ffffff;
    --border-color: rgba(139, 92, 246, 0.25); --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --card-hover-shadow: 0 8px 32px rgba(139, 92, 246, 0.2); --btn-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-header: 'Orbitron', sans-serif;
    --danger-bg: rgba(244, 63, 94, 0.1); --danger-text: #fb7185; --danger-border: rgba(244, 63, 94, 0.3);
    --status-ok-bg: rgba(139, 92, 246, 0.95); --status-err-bg: rgba(244, 63, 94, 0.95); --status-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
  }
  body[data-theme="fantasy"] {
    --bg-color: #161211; --card-bg: rgba(36, 26, 23, 0.95); --text-color: #eaddcf; --hint-color: #a89481;
    --accent-color: #991b1b; --accent-hover: #b91c1c; --accent-text: #ffffff;
    --border-color: rgba(212, 175, 55, 0.15); --card-shadow: 0 4px 12px rgba(0,0,0,0.6);
    --card-hover-shadow: 0 6px 16px rgba(212, 175, 55, 0.1); --btn-shadow: 0 4px 12px rgba(153, 27, 27, 0.4);
    --font-main: Georgia, "Times New Roman", serif; --font-header: Georgia, "Times New Roman", serif;
    --danger-bg: rgba(217, 119, 6, 0.1); --danger-text: #fcd34d; --danger-border: rgba(217, 119, 6, 0.3);
    --status-ok-bg: rgba(153, 27, 27, 0.95); --status-err-bg: rgba(180, 83, 9, 0.95); --status-shadow: 0 4px 20px rgba(0,0,0,0.6);
  }
  body[data-theme="retro"] {
    --bg-color: #2b2b2b; --card-bg: #000000; --text-color: #ffffff; --hint-color: #a0a0a0;
    --accent-color: #e52521; --accent-hover: #ff4541; --accent-text: #ffffff; --border-color: #4a4a4a;
    --card-shadow: 4px 4px 0px #000000; --card-hover-shadow: 6px 6px 0px #000000; --btn-shadow: 4px 4px 0px #7a0000;
    --font-main: 'Press Start 2P', monospace; --font-header: 'Press Start 2P', monospace;
    --danger-bg: #000000; --danger-text: #ff9900; --danger-border: #ff9900;
    --status-ok-bg: #4caf50; --status-err-bg: #e52521; --status-shadow: 6px 6px 0px #000000;
  }

  body[data-theme="blood"] {
    --bg-color: #170406; background-image: radial-gradient(circle at 50% -10%, #4a0507 0%, #1c0507 45%, #0c0203 85%); background-attachment: fixed;
    --card-bg: rgba(43, 8, 11, 0.82); --text-color: #f1e0c8; --hint-color: #b08d5a;
    --accent-color: #c9a445; --accent-hover: #e0c060; --accent-text: #1c0507;
    --border-color: rgba(201, 164, 69, 0.22); --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    --card-hover-shadow: 0 6px 22px rgba(139, 0, 0, 0.35); --btn-shadow: 0 4px 14px rgba(201, 164, 69, 0.35);
    --font-main: 'Cormorant Garamond', Georgia, serif; --font-header: 'Cinzel', Georgia, serif;
    --danger-bg: rgba(139, 0, 0, 0.2); --danger-text: #ff6b6b; --danger-border: rgba(139, 0, 0, 0.5);
    --status-ok-bg: rgba(201, 164, 69, 0.95); --status-err-bg: rgba(139, 0, 0, 0.95); --status-shadow: 0 10px 25px rgba(139, 0, 0, 0.5);
  }
  body[data-theme="blood"] h1, body[data-theme="blood"] .section-title, body[data-theme="blood"] .nav-btn {
    letter-spacing: 0.03em; text-transform: uppercase;
  }
  body[data-theme="lava"] {
    --bg-color: #0d0603; background-image: radial-gradient(circle at 50% 115%, #8a2200 0%, #3a0e00 35%, #0d0603 75%); background-attachment: fixed;
    --card-bg: rgba(31, 12, 5, 0.68); --text-color: #ffe3c2; --hint-color: #ff9a4d;
    --accent-color: #ff4500; --accent-hover: #ff7a1a; --accent-text: #1a0500;
    --border-color: rgba(255, 106, 0, 0.3); --card-shadow: 0 8px 28px rgba(255, 69, 0, 0.2);
    --card-hover-shadow: 0 8px 28px rgba(255, 140, 0, 0.4); --btn-shadow: 0 4px 16px rgba(255, 69, 0, 0.55);
    --font-main: 'Rajdhani', sans-serif; --font-header: 'Orbitron', sans-serif;
    --danger-bg: rgba(255, 0, 0, 0.15); --danger-text: #ff5c5c; --danger-border: rgba(255, 0, 0, 0.5);
    --status-ok-bg: rgba(255, 106, 0, 0.95); --status-err-bg: rgba(200, 0, 0, 0.95); --status-shadow: 0 0 25px rgba(255, 106, 0, 0.6);
  }
  body[data-theme="lava"] h1, body[data-theme="lava"] .section-title, body[data-theme="lava"] .nav-btn.active {
    text-shadow: 0 0 10px rgba(255, 106, 0, 0.6);
  }

  /* Единственная тема со стеклянным эффектом (backdrop-filter) — глушим его тут же, точечно,
     а не общим правилом на .card: остальным темам блюр ничего не даёт (фон карточек
     непрозрачный), незачем платить за него рендером везде. */
  body[data-theme="frost"] {
    --bg-color: #eaf6fb; background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #cfeaf6 40%, #eaf6fb 85%); background-attachment: fixed;
    --card-bg: rgba(255, 255, 255, 0.55); --text-color: #1e3a5f; --hint-color: #5b84a8;
    --accent-color: #22c3e6; --accent-hover: #52d6f2; --accent-text: #0b2a3d;
    --border-color: rgba(56, 189, 248, 0.3); --card-shadow: 0 4px 20px rgba(56, 189, 248, 0.12);
    --card-hover-shadow: 0 6px 24px rgba(56, 189, 248, 0.25); --btn-shadow: 0 4px 14px rgba(34, 195, 230, 0.35);
    --font-main: 'Quicksand', sans-serif; --font-header: 'Quicksand', sans-serif;
    --danger-bg: rgba(239, 68, 68, 0.08); --danger-text: #dc2626; --danger-border: rgba(239, 68, 68, 0.25);
    --status-ok-bg: rgba(34, 195, 230, 0.95); --status-err-bg: rgba(220, 38, 38, 0.9); --status-shadow: 0 10px 25px rgba(56, 189, 248, 0.25);
  }
  body[data-theme="frost"] .card, body[data-theme="frost"] #themeSelector, body[data-theme="frost"] .logs-box,
  body[data-theme="frost"] .accordion-header, body[data-theme="frost"] .buff-expired-card {
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  body[data-theme="frost"] h1, body[data-theme="frost"] .section-title { font-weight: 700; }

  body[data-theme="mono"] {
    --bg-color: #fafafa; --card-bg: #ffffff; --text-color: #0a0a0a; --hint-color: #6b6b6b;
    --accent-color: #000000; --accent-hover: #262626; --accent-text: #ffffff;
    --border-color: #111111; --card-shadow: 3px 3px 0px #000000;
    --card-hover-shadow: 5px 5px 0px #000000; --btn-shadow: 3px 3px 0px #000000;
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-header: 'Archivo Black', sans-serif;
    --danger-bg: rgba(220, 38, 38, 0.08); --danger-text: #dc2626; --danger-border: rgba(220, 38, 38, 0.3);
    --status-ok-bg: #000000; --status-err-bg: rgba(220, 38, 38, 0.95); --status-shadow: 4px 4px 0px #000000;
  }
  /* Плоская "штамп-на-бумаге" эстетика — единственная тема без единого цвета вообще (кроме
     красного для ошибок — иначе их не отличить от обычного состояния). Острые углы и жёсткие
     офсетные тени вместо свечения роднят её с retro/cyberpunk по технике, но не по палитре. */
  body[data-theme="mono"] .card, body[data-theme="mono"] button, body[data-theme="mono"] input, body[data-theme="mono"] select,
  body[data-theme="mono"] .nav-btn, body[data-theme="mono"] #themeSelector, body[data-theme="mono"] .toast,
  body[data-theme="mono"] .logs-box, body[data-theme="mono"] .accordion-header,
  body[data-theme="mono"] .buff-expired-card { border-radius: 0 !important; }

  body[data-theme="sakura"] {
    --bg-color: #fdf3f6; background-image: radial-gradient(circle at 50% 0%, #ffffff 0%, #fbe4ec 45%, #fdf3f6 85%); background-attachment: fixed;
    --card-bg: rgba(255, 255, 255, 0.6); --text-color: #5b3a45; --hint-color: #b98a9a;
    --accent-color: #e8829a; --accent-hover: #f2a0b3; --accent-text: #ffffff;
    --border-color: rgba(232, 130, 154, 0.25); --card-shadow: 0 4px 18px rgba(232, 130, 154, 0.12);
    --card-hover-shadow: 0 6px 22px rgba(232, 130, 154, 0.22); --btn-shadow: 0 4px 14px rgba(232, 130, 154, 0.35);
    --font-main: 'Josefin Sans', sans-serif; --font-header: 'Josefin Sans', sans-serif;
    --danger-bg: rgba(220, 38, 38, 0.08); --danger-text: #c0392b; --danger-border: rgba(220, 38, 38, 0.25);
    --status-ok-bg: rgba(232, 130, 154, 0.95); --status-err-bg: rgba(192, 57, 43, 0.9); --status-shadow: 0 10px 25px rgba(232, 130, 154, 0.3);
  }
  /* Зеркало mono выше — там острые углы, здесь наоборот, подчёркнуто мягкие "лепестковые" —
     свой узнаваемый приём вместо блюра (тот уже занят темой frost). */
  body[data-theme="sakura"] .card, body[data-theme="sakura"] button, body[data-theme="sakura"] input, body[data-theme="sakura"] select,
  body[data-theme="sakura"] .nav-btn, body[data-theme="sakura"] #themeSelector, body[data-theme="sakura"] .toast,
  body[data-theme="sakura"] .logs-box, body[data-theme="sakura"] .accordion-header,
  body[data-theme="sakura"] .buff-expired-card { border-radius: 20px !important; }

  body[data-theme="vaporwave"] {
    --bg-color: #1a0b2e; background-image: radial-gradient(circle at 20% 0%, rgba(255, 113, 206, 0.25) 0%, transparent 55%), radial-gradient(circle at 80% 100%, rgba(56, 255, 241, 0.2) 0%, transparent 55%), linear-gradient(180deg, #2d1b4e 0%, #120a24 100%); background-attachment: fixed;
    --card-bg: rgba(45, 20, 74, 0.55); --text-color: #f5d6ff; --hint-color: #c792ea;
    --accent-color: #ff71ce; --accent-hover: #ff9de2; --accent-text: #1a0b2e;
    --border-color: rgba(56, 255, 241, 0.3); --card-shadow: 0 4px 20px rgba(255, 113, 206, 0.15);
    --card-hover-shadow: 0 6px 26px rgba(56, 255, 241, 0.3); --btn-shadow: 0 4px 16px rgba(255, 113, 206, 0.5);
    --font-main: 'VT323', monospace; --font-header: 'VT323', monospace;
    --danger-bg: rgba(255, 77, 77, 0.12); --danger-text: #ff4d4d; --danger-border: rgba(255, 77, 77, 0.4);
    --status-ok-bg: rgba(56, 255, 241, 0.9); --status-err-bg: rgba(255, 77, 77, 0.9); --status-shadow: 0 0 25px rgba(255, 113, 206, 0.5);
  }
  /* VT323 — терминальный пиксель-шрифт, при обычных 13-15px читается мельче, чем остальные —
     компенсируем чуть более крупными базовыми размерами (в retro наоборот, там наоборот тесно
     упаковано, сравнивать один в один с ним не стоит). */
  body[data-theme="vaporwave"] { font-size: 15px; }
  body[data-theme="vaporwave"] button { font-size: 16px; letter-spacing: 0.02em; }
  body[data-theme="vaporwave"] .hint, body[data-theme="vaporwave"] .theme-option { font-size: 15px; }

  body[data-theme="druid"] {
    --bg-color: #14200f; background-image: radial-gradient(circle at 50% -10%, #2b4020 0%, #182611 45%, #0e1509 85%); background-attachment: fixed;
    --card-bg: rgba(30, 46, 20, 0.75); --text-color: #e8e2c9; --hint-color: #a8b78a;
    --accent-color: #b6862c; --accent-hover: #d4a13f; --accent-text: #14200f;
    --border-color: rgba(182, 134, 44, 0.25); --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    --card-hover-shadow: 0 6px 20px rgba(74, 124, 34, 0.25); --btn-shadow: 0 4px 14px rgba(182, 134, 44, 0.4);
    --font-main: 'Alegreya', Georgia, serif; --font-header: 'Alegreya', Georgia, serif;
    --danger-bg: rgba(139, 30, 30, 0.15); --danger-text: #e07a5f; --danger-border: rgba(139, 30, 30, 0.4);
    --status-ok-bg: rgba(106, 153, 52, 0.95); --status-err-bg: rgba(139, 30, 30, 0.9); --status-shadow: 0 10px 25px rgba(74, 124, 34, 0.4);
  }

  body[data-theme="toxic"] {
    --bg-color: #0a0d05; background-image: radial-gradient(circle at 50% 100%, #2b3d0a 0%, #12180a 40%, #0a0d05 80%); background-attachment: fixed;
    --card-bg: rgba(20, 26, 8, 0.72); --text-color: #e8ffb0; --hint-color: #9ecb3c;
    --accent-color: #c6ff00; --accent-hover: #e0ff4d; --accent-text: #0a0d05;
    --border-color: rgba(198, 255, 0, 0.3); --card-shadow: 0 4px 18px rgba(198, 255, 0, 0.15);
    --card-hover-shadow: 0 6px 24px rgba(198, 255, 0, 0.3); --btn-shadow: 0 4px 16px rgba(198, 255, 0, 0.5);
    --font-main: 'Share Tech Mono', monospace; --font-header: 'Share Tech Mono', monospace;
    --danger-bg: rgba(255, 87, 34, 0.15); --danger-text: #ff6f3c; --danger-border: rgba(255, 87, 34, 0.4);
    --status-ok-bg: rgba(198, 255, 0, 0.95); --status-err-bg: rgba(255, 87, 34, 0.9); --status-shadow: 0 0 25px rgba(198, 255, 0, 0.5);
  }
  body[data-theme="toxic"] h1, body[data-theme="toxic"] .section-title, body[data-theme="toxic"] .nav-btn.active {
    text-shadow: 0 0 8px rgba(198, 255, 0, 0.7);
  }

  body[data-theme="desert"] {
    --bg-color: #f3e4c6; background-image: radial-gradient(circle at 50% 0%, #fff6e0 0%, #f0dcb0 50%, #e8cf9a 100%); background-attachment: fixed;
    --card-bg: rgba(255, 250, 235, 0.7); --text-color: #4a3420; --hint-color: #8a6a42;
    --accent-color: #c9702e; --accent-hover: #e08a44; --accent-text: #fff8ec;
    --border-color: rgba(201, 112, 46, 0.3); --card-shadow: 0 4px 16px rgba(138, 90, 30, 0.15);
    --card-hover-shadow: 0 6px 20px rgba(201, 112, 46, 0.25); --btn-shadow: 0 4px 14px rgba(201, 112, 46, 0.4);
    --font-main: 'Bitter', Georgia, serif;
    /* 'Rye' убран из хедеров (был здесь один — запрос пользователя 2026-08-30): не поддерживает
       кириллицу, поэтому весь русский текст и так уже рендерился запасным 'Bitter', а вот
       круглые скобки "()" — латинские символы, есть в самом Rye, и он рисует их вычурным
       росчерком, визуально неотличимым от фигурных "{}" — "Выпечка (авто-хилка)" читалось как
       "Выпечка {авто-хилка}", жалоба "текст прилип". Проверено визуально: с одним 'Bitter'
       скобки нормальные. */
    --font-header: 'Bitter', serif;
    --danger-bg: rgba(178, 34, 34, 0.1); --danger-text: #b22222; --danger-border: rgba(178, 34, 34, 0.3);
    --status-ok-bg: rgba(201, 112, 46, 0.95); --status-err-bg: rgba(178, 34, 34, 0.9); --status-shadow: 0 10px 25px rgba(138, 90, 30, 0.3);
  }

  body[data-theme="retro"] .card, body[data-theme="retro"] button, body[data-theme="retro"] input, body[data-theme="retro"] select,
  body[data-theme="retro"] .nav-btn, body[data-theme="retro"] #themeSelector, body[data-theme="retro"] .toast,
  body[data-theme="retro"] .logs-box, body[data-theme="retro"] .accordion-header,
  body[data-theme="retro"] .buff-expired-card { border-radius: 0 !important; }
  body[data-theme="retro"] { font-size: 10px; }
  body[data-theme="retro"] h1 { font-size: 14px; }
  body[data-theme="retro"] .card .name { font-size: 10px; line-height: 1.6; }
  body[data-theme="retro"] button { font-size: 10px; }
  body[data-theme="retro"] input, body[data-theme="retro"] select { font-size: 10px; }
  body[data-theme="retro"] .nav-btn { font-size: 9px; padding: 10px 14px; }
  body[data-theme="retro"] .section-title { font-size: 11px; }

  /* ================= ГЛОБАЛЬНЫЕ СТИЛИ ================= */
  body { margin: 0; padding: 16px; font-family: var(--font-main); background: var(--bg-color); color: var(--text-color); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; }
  .header-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  h1 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em; font-family: var(--font-header); }
  .hint { color: var(--hint-color); font-size: 13px; margin-bottom: 14px; line-height: 1.4; overflow-wrap: break-word; }
  #priemyEditView { padding-bottom: 70px; }

  input[type="text"], input[type="number"], select { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-size: 15px; font-family: var(--font-main); margin-bottom: 10px; transition: all 0.2s ease; }
  input:focus, select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }

  section { margin-bottom: 18px; }
  section > h2, .section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hint-color);
    margin: 0 0 8px;
    font-family: var(--font-header);
  }

  .card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--card-bg); margin-bottom: 8px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: transform var(--anim-speed) var(--easing), box-shadow var(--anim-speed) var(--easing), background 0.3s; }
  @media (hover: hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); } }
  .card .name { flex: 1; font-size: 14px; line-height: 1.3; min-width: 0; word-break: normal; overflow-wrap: break-word; }
  .card .name b { display: block; color: var(--text-color); font-family: var(--font-header); }
  .card .role { font-size: 11px; color: var(--hint-color); margin-top: 2px; display: inline-block; }
  .card .cooldown-field { font-size: 11px; color: var(--hint-color); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
  .card .unit-suffix { font-size: 12px; color: var(--hint-color); white-space: nowrap; flex: 0 0 auto; }

  /* Переключатель-ползунок (лок запуска процесса персонажа и т.п.) — тем же набором переменных,
     что и остальные темизируемые элементы, чтобы не заводить свой цвет на тему. */
  .switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 auto; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .switch-slider { position: absolute; inset: 0; cursor: pointer; border-radius: 999px; background: var(--border-color); border: 1px solid var(--border-color); transition: background var(--anim-speed) var(--easing); }
  .switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--anim-speed) var(--easing); }
  .switch input:checked + .switch-slider { background: var(--danger-text); border-color: var(--danger-text); }
  .switch input:checked + .switch-slider::before { transform: translateX(18px); }
  .switch input:focus-visible + .switch-slider { outline: 2px solid var(--accent-color); outline-offset: 2px; }

  .danger-card { background: var(--danger-bg); border-color: var(--danger-border); }
  .danger-card b { color: var(--danger-text) !important; }
  .danger-card button.ghost { color: var(--danger-text); background: transparent; border: 1px solid var(--danger-border); }

  button { border: none; border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; font-family: var(--font-header); background: var(--accent-color); color: var(--accent-text); cursor: pointer; transition: transform 0.1s, opacity 0.2s, box-shadow 0.2s, background 0.2s; box-shadow: var(--btn-shadow); }
  button:hover:not(:disabled) { background: var(--accent-hover); }
  button:active:not(:disabled) { transform: scale(0.94); }
  button.ghost { background: transparent; color: var(--accent-color); border: 1px solid var(--border-color); padding: 8px 12px; box-shadow: none; }
  button.ghost:hover:not(:disabled) { background: rgba(128,128,128,0.1); }
  button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

  /* margin-bottom как у .card (см. её правило выше) — без него, когда пустое состояние заменяет
     карточки, следующий за ним элемент (например кнопка "+ Новый пресет" в разделе "Приёмы")
     садится вплотную, без обычного зазора между карточками (жалоба пользователя 2026-08-30). */
  .empty { color: var(--hint-color); font-size: 13px; padding: 10px 0; text-align: center; background: rgba(128, 128, 128, 0.05); border-radius: 12px; border: 1px dashed var(--border-color); margin-bottom: 8px; }

  /* ================= ШТОРКИ (аккордеон) раздела "Настройки" ================= */
  .accordion-item { margin-bottom: 10px; }
  .accordion-header {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 12px 14px; border-radius: 14px; background: var(--card-bg); color: var(--text-color);
    border: 1px solid var(--border-color); box-shadow: var(--card-shadow); font-family: var(--font-header);
    transition: transform var(--anim-speed) var(--easing), box-shadow var(--anim-speed) var(--easing), background 0.3s, border-color 0.3s;
  }
  .accordion-header:hover:not(:disabled) { background: var(--card-bg); }
  @media (hover: hover) { .accordion-header:hover { transform: translateY(-2px); box-shadow: var(--card-hover-shadow); } }
  .accordion-header.open { border-color: var(--accent-color); }
  .accordion-icon { font-size: 18px; flex: 0 0 auto; }
  .accordion-title { flex: 1; font-size: 14px; font-weight: 700; min-width: 0; }
  .accordion-chevron { color: var(--hint-color); font-size: 13px; flex: 0 0 auto; transition: transform 0.2s var(--easing); }
  .accordion-header.open .accordion-chevron { transform: rotate(90deg); }
  .accordion-body { padding-top: 8px; }
  .catalog-branch { font-size: 12px; font-weight: 600; color: var(--hint-color); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--font-header); }

  #nav, .scroll-nav { display: none; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-bottom: 16px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
  .scroll-nav { display: flex; }
  #nav::-webkit-scrollbar, .scroll-nav::-webkit-scrollbar { display: none; }
  #nav.dragging, .scroll-nav.dragging { cursor: grabbing; scroll-snap-type: none; }
  #nav.dragging *, .scroll-nav.dragging * { user-select: none; }

  #nav.nav-grid, .scroll-nav.nav-grid { flex-wrap: wrap; overflow-x: visible; cursor: default; }

  .nav-btn { flex: 0 0 auto; background: var(--card-bg); color: var(--text-color); font-size: 12px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); }
  .nav-btn.active { background: var(--accent-color); color: var(--accent-text); border-color: transparent; box-shadow: var(--btn-shadow); }

  .view { display: none; animation: fadeUp 0.4s var(--easing) forwards; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

  #themeSelector { display: none; position: absolute; top: 50px; right: 16px; background: var(--card-bg); border: 1px solid var(--border-color); padding: 12px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 1000; width: 210px; box-sizing: border-box; animation: fadeScale 0.2s ease-out forwards; }
  @keyframes fadeScale { from { opacity: 0; transform: scale(0.9) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  /* box-sizing: border-box — иначе width:100% (= вся ширина содержимого #themeSelector) плюс
     собственный padding делают рамку на 20px шире панели; на обычных прозрачных кнопках не
     видно, а вот на строке с полем "Бонус истёк, сек" видимая рамка поля торчала за скруглённый
     край панели (жалоба пользователя 2026-08-25). */
  .theme-option { display: block; width: 100%; box-sizing: border-box; text-align: left; background: transparent; border: none; color: var(--text-color); padding: 10px; margin-bottom: 4px; border-radius: 8px; box-shadow: none; font-size: 13px; }
  .theme-option:hover { background: rgba(128,128,128,0.1); box-shadow: none; }
  /* Подзаголовки групп тем внутри .theme-list (см. index.html) — тем стало 10, список без
     группировки и скролла растягивал всю шторку ⚙️ ниже экрана (жалоба пользователя 2026-08-25).
     Мельче и тусклее .section-title, чтобы читаться как подраздел, а не новая секция. */
  .theme-group-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hint-color); opacity: 0.65; margin: 10px 4px 3px; }
  .theme-group-title:first-child { margin-top: 2px; }
  .theme-list.scroll-list { max-height: 230px; }

  .toast-container { position: fixed; bottom: 20px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none; }
  .toast { padding: 12px 18px; font-size: 14px; font-weight: 600; font-family: var(--font-header); text-align: center; border-radius: 12px; opacity: 0; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: var(--status-shadow); color: var(--accent-text); }
  .toast.show { opacity: 1; transform: translateY(0) scale(1); }
  .toast.error { background: var(--status-err-bg); }
  .toast.ok { background: var(--status-ok-bg); }

  /* ================= Уведомление "Бонус истёк" (вкладка «ℹ️ Инфо») =================
     Крупнее и заметнее обычного toast (см. .toast-container выше) — не самозакрывается через
     пару секунд, время висения настраивается в шторке ⚙️ (см. #buffNotifySecondsInput). */
  .buff-expired-container { position: fixed; top: 16px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 10000; pointer-events: none; align-items: center; }
  .buff-expired-card {
    pointer-events: auto; width: 100%; max-width: 420px; position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px;
    background: var(--card-bg); border: 1px solid var(--accent-color); box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-color) inset;
    opacity: 0; transform: translateY(-16px) scale(0.97);
    animation: buffExpiredIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .buff-expired-card.leaving { animation: buffExpiredOut 0.25s ease-in forwards; }
  @keyframes buffExpiredIn { to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes buffExpiredOut { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
  .buff-expired-icon { font-size: 22px; flex: 0 0 auto; line-height: 1; }
  .buff-expired-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text-color); overflow-wrap: break-word; }
  .buff-expired-text b { font-family: var(--font-header); }
  .buff-expired-close { flex: 0 0 auto; background: transparent; box-shadow: none; color: var(--hint-color); padding: 2px 6px; font-size: 13px; border-radius: 6px; }
  .buff-expired-close:hover { background: rgba(128,128,128,0.15); }
  .buff-expired-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent-color); transition: width linear; }

  .skeleton { background: linear-gradient(90deg, var(--border-color) 25%, var(--card-bg) 50%, var(--border-color) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; border-radius: 14px; height: 60px; margin-bottom: 8px; border: 1px solid transparent; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  #saveBtnFallback { position: fixed; left: 16px; right: 16px; bottom: 24px; padding: 14px; font-size: 16px; border-radius: 14px; z-index: 99; }

  .logs-box { background: rgba(0,0,0,0.5); color: var(--text-color); font-family: Consolas, "SF Mono", Menlo, Courier, monospace; font-size: 12px; line-height: 1.5; padding: 10px; border-radius: 12px; height: 60vh; overflow-y: auto; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--border-color); box-shadow: inset 0 2px 10px rgba(0,0,0,0.2); }
  .logs-box::-webkit-scrollbar { width: 6px; }
  .logs-box::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
  .logs-box .log-line { margin: 0 0 4px; border-bottom: 1px dashed var(--border-color); padding-bottom: 2px; }

  /* Длинные списки карточек (игнор ПВП — игроки/кланы, локации карты/смарт-фарма и т.п.) —
     иначе список из десятков записей растягивает всю страницу и приходится скроллить весь
     экран, чтобы найти нужную запись среди прочих разделов (жалоба пользователя 2026-08-24).
     Не задаём высоту сразу — при малом числе карточек .scroll-list просто не дорастает до
     max-height, скролл не появляется.
     Фикс. 280px (~4 карточки) оставлял под списком много пустого места на высоких экранах —
     жалоба пользователя 2026-08-26. ~69px на карточку (61px + 8px отступ) × 10 = ~690px —
     верхняя граница "показать десяток без скролла", но не больше 65% высоты вьюпорта, чтобы
     на невысоких телефонах список не съедал весь экран и не прятал разделы под собой. */
  .scroll-list { max-height: min(690px, 65vh); overflow-y: auto; padding-right: 2px; }
  .scroll-list::-webkit-scrollbar { width: 6px; }
  .scroll-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
  .scroll-list .card:last-child { margin-bottom: 0; }

  /* Адаптив */
  @media (max-width: 430px) {
    .card { padding: 10px 10px; gap: 8px; flex-wrap: wrap; }
    .card .name { font-size: 13px; flex: 1 1 120px; }
    .card button { margin-left: auto; }
    .card .role { font-size: 11px; }
    button.ghost { padding: 6px 8px; font-size: 12px; }
    .card .cooldown-field { font-size: 11px; }
    .card .cooldown-field input { width: 38px !important; padding: 4px !important; font-size: 13px; }
  }