@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Sora/IBM Plex Mono — лише для ПК-застосунку (Rabyra Helper), рішення
   користувача 2026-10-22 ("приложение отдельное от тг"): нова, самостійна
   айдентика десктопної панелі замість того самого мобільного Inter —
   Sora для інтерфейсу/заголовків, Plex Mono для цифр/таймстемпів ("консольний"
   характер). Мобільний Telegram Mini App і далі на Inter, нижче. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --bg: #0a0713;
  --bg-2: #150f28;
  --card: rgba(28, 23, 46, 0.72);
  --card-hi: rgba(39, 32, 62, 0.82);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-border-hi: rgba(167, 139, 250, 0.35);
  --glass-blur: blur(8px);
  --accent: #a855f7;
  --accent-glow: rgba(168, 85, 247, 0.32);
  --accent-2: #c084fc;
  --accent-deep: #9333ea;
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.14);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --text: #f6f6fa;
  --hint: #9a9aae;
  /* Амбієнтне світіння сторінки ВИМКНЕНО зовсім (не просто приглушене) —
     після кількох спроб (зменшити яскравість, прибрати transform на переході
     вкладок) воно й далі "протікало" крізь backdrop-filter карток у вигляді
     кольорової смуги/спалаху (див. [[bug-ambient-glow-bleed-through-card]] у
     пам'яті). Це суто декоративний ефект — вимкнути його безпечніше, ніж
     продовжувати підбирати яскравість навмання. Змінні лишені (не видалені),
     бо на них зав'язані й інші місця (.home-dash-card::after тощо) — просто
     прозорі, тож там більше нема чого малювати. */
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-glow-btn: 0 10px 28px var(--accent-glow);
}

/* Друга тема — "Dark Sapphire" за окремим ТЗ (2026-09-22): глибокий
   темно-синій графіт замість чорного/фіолетового відтінку, сапфіровий
   градієнтний акцент (#2563EB → #3B82F6) з м'яким неоновим світінням —
   та сама архітектура (скляні картки, розмиття), лише інша палітра, тож
   перемикається без перевірстки жодного компонента (кнопки/таби/бейджі вже
   всюди на var(--accent)/var(--accent-glow), а не захардкожені кольори). */
[data-theme="brown"] {
  /* Сапфір 2.0: глибший нічно-синій фон, холодні сині рамки, яскравіший лазурний акцент (світлий відтінок для активних підписів) */
  --bg: #070b16;
  --bg-2: #0b1224;
  --card: rgba(15, 23, 42, 0.8);
  --card-hi: rgba(26, 40, 74, 0.88);
  --card-border: rgba(96, 130, 200, 0.24);
  --card-border-hi: rgba(96, 165, 250, 0.5);
  --accent: #4f8bff;
  --accent-glow: rgba(79, 139, 255, 0.36);
  --accent-2: #7fb2ff;
  --accent-deep: #2f5fe0;
  --success: #34d399;
  --success-bg: rgba(5, 150, 105, 0.16);
  --danger: #fb7185;
  --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24;
  --warning-bg: rgba(217, 119, 6, 0.16);
  --text: #f1f6ff;
  --hint: #8294b4;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
}
/* Неактивні таби (Публікації/Джерела/Читачі, вкладки модалок) — світліший
   відтінок (#94A3B8), ніж загальний --hint (#64748B) для другорядного
   тексту: за ТЗ це два різні значення, а не один спільний. */
[data-theme="brown"] .segment:not(.active),
[data-theme="brown"] .modal-tab-btn:not(.active) {
  color: #9db0d0;
}

/* Третя тема — "Midnight Crimson & Ruby Glow" за окремим ТЗ (2026-09-22):
   вугільно-чорний фон із нічним відливом, матові графітові картки з
   винною/бордовою обводкою, рубіновий градієнтний акцент. Ambient
   --bg-glow-1/2 вимкнені зовсім (див. [[bug-ambient-glow-bleed-through-card]]
   у пам'яті — той самий ефект "протікає" крізь backdrop-filter картки в
   куток на будь-якій яскравості, тож просто вимкнено, а не приглушено). */
[data-theme="crimson"] {
  /* Рубін: трохи глибший винний відтінок фону й малиново-рубіновий акцент (було чисто червоний на графіті) */
  --bg: #08050a;
  --bg-2: #12080e;
  --card: rgba(22, 13, 20, 0.82);
  --card-hi: rgba(40, 18, 29, 0.9);
  --card-border: rgba(74, 31, 47, 0.85);
  --card-border-hi: rgba(244, 63, 94, 0.45);
  --accent: #e11d48;
  --accent-glow: rgba(244, 63, 94, 0.34);
  --accent-2: #fb4f73;
  --accent-deep: #9f1239;
  --success: #34d399;
  --success-bg: rgba(5, 150, 105, 0.16);
  --danger: #fb7185;
  --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --text: #fff5f7;
  --hint: #aaa1a8;
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;
}
/* Нижня навігація: неактивні пункти лишаються нейтрально-сірими (не тьмяно-
   червоними) — за ТЗ лише активна іконка/підпис підсвічується рубіновим. */
[data-theme="crimson"] .nav-btn:not(.active) { color: #4b5563; }

* { box-sizing: border-box; }

/* Ховаємо смужку скролу повністю (і нативну теж) — сам скрол жестом/колесом
   миші лишається робочим, просто без візуальної полоски скрізь у застосунку. */
html { -ms-overflow-style: none; scrollbar-width: none; height: 100%; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* Підстраховка «скрізь»: будь-який інший скрол-контейнер у застосунку (зокрема
   в Electron/Chromium), якому досі не прописали власний ::-webkit-scrollbar,
   інакше показує нативну сіру смугу зі стрілками. Будь-який class/id-селектор
   у файлі має вищу специфічність за універсальний '*', тож цей дефолт ніколи
   не перебиває вже налаштовані (приховані або кастомні) скролбари — він лише
   підхоплює випадки, яких забули стилізувати. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Підстраховка для .app { width:100vw; height:100vh } нижче — деякі вбудовані
   WebView (зокрема старіший CEF у Telegram Desktop) інколи рахують vw/vh від
   розміру вікна ДО того, як requestFullscreen()/expand() встигли його
   розгорнути, і лишають застарілий, вузький grid-трек для сайдбару, доки не
   станеться новий reflow. Явний height:100% у html/body — той самий розмір,
   що й у vh, але через відсотковий ланцюжок, який такі WebView перераховують
   надійніше при resize. */
html, body { overflow-x: hidden; }
body {
  margin: 0; height: 100%;
  -ms-overflow-style: none; scrollbar-width: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse 800px 500px at 15% -5%, var(--bg-glow-1) 0%, transparent 60%),
    radial-gradient(ellipse 700px 450px at 100% 10%, var(--bg-glow-2) 0%, transparent 55%),
    radial-gradient(ellipse 900px 500px at 50% -10%, var(--bg-2) 0%, var(--bg) 55%);
  background-color: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Стартовий екран (Splash) ---------- */
#splash-screen {
  position: fixed; inset: 0; z-index: 300; background: #0a0e1a; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity 0.4s ease;
}
#splash-screen.splash-hidden { opacity: 0; pointer-events: none; }
/* Той самий mesh-градієнт з блобами, що й на екрані техробіт (.maintenance-blob,
   визначені нижче) — перевикористовуємо клас 1-в-1 заради єдиної стилістики
   й щоб не дублювати keyframes. Затемнюючий шар зверху приглушує яскравість,
   контент (лого/статус/прогрес) підняли в свій stacking context z-index:1,
   інакше position:absolute блоби малювались би поверх static-контенту. */
/* Сітка вузлів — суто текстура для глибини, під блобами й затемненням, тому
   опацити зовсім невисока (0.5), інакше на короткому спалаху рябить в очах. */
.splash-grid {
  position: absolute; inset: -20px; opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 100%);
}
.splash-overlay { position: absolute; inset: 0; background: rgba(10, 14, 26, 0.28); }
.splash-logo, .splash-status, .splash-progress-track, .splash-percent, .splash-footer { position: relative; z-index: 1; }
.splash-footer {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #9a9aae; letter-spacing: 0.02em;
}
.splash-footer-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; opacity: 0.9; }
/* Спалах триває лише ~4.4с, а цикл .maintenance-blob — 19-27с (розрахований
   на екран техробіт, який висить довго) — за цей час рух майже непомітний.
   Тут прискорюємо цикл і додаємо стартовий зсув фази (negative animation-
   delay), щоб рух був видно одразу, а не тільки через кілька секунд після
   0% keyframe. Яскравість теж трохи вища — коротка поява це пробачає. */
#splash-screen .blob-1 { animation-duration: 7s; animation-delay: -2s; opacity: 0.7; }
#splash-screen .blob-2 { animation-duration: 8s; animation-delay: -4s; opacity: 0.7; }
#splash-screen .blob-3 { animation-duration: 6.5s; animation-delay: -1s; opacity: 0.7; }
.splash-logo { width: 128px; height: 128px; object-fit: contain; animation: splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.splash-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; color: #f6f6fa; }
/* Спалах — фіксований брендовий вигляд, НЕ залежить від обраної теми
   (кольори тут навмисно захардкожені, а не var(--hint)/var(--accent) —
   екран показується до того, як тема взагалі застосована, і має завжди
   виглядати однаково). */
.splash-status { font-size: 13px; color: #9a9aae; min-height: 18px; }
.splash-progress-track {
  width: 200px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; margin-top: 4px;
}
.splash-progress-bar {
  height: 100%; width: 0%; border-radius: 999px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: width 0.2s linear;
}
/* "Живий" блік на передньому краї заповненої частини — сама смуга росте
   ліворуч->праворуч через width, а цей ::after завжди сидить біля ЇЇ
   правого краю (не треку), тому світло завжди на передньому фронті. */
.splash-progress-bar::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  animation: splashBarShine 1.1s ease-in-out infinite;
}
@keyframes splashBarShine { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.splash-percent { font-size: 12px; font-weight: 700; color: #a78bfa; letter-spacing: 0.02em; }

/* ---------- Режим техобслуговування ---------- */
#maintenance-screen, #ban-screen, #subscribe-gate-screen {
  position: fixed; inset: 0; z-index: 290; background: #0a0e1a; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 32px; text-align: center;
}
#ban-screen { z-index: 291; overflow-y: auto; }
#ban-screen .maintenance-content { max-width: 380px; }
/* Найвищий z-index із трьох гейтів — якщо колись накладеться з ban/maintenance
   (малоймовірно, кожен зі своєї незалежної перевірки), підписка не має ховатись
   під ними: без неї панеллю не скористатись, навіть після зняття бану/техробіт. */
#subscribe-gate-screen { z-index: 292; overflow-y: auto; }
#subscribe-gate-screen .maintenance-content { max-width: 380px; }
#ban-appeal-text {
  border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04); color: #f6f6fa; padding: 10px 12px;
  font-family: inherit; font-size: 13px; resize: vertical;
}
/* Mesh-градієнт з м'яких плям, що повільно дрейфують — лише transform
   (compositor, без перемальовування), тож навіть на слабких телефонах
   не навантажує CPU/GPU помітно. Кожна пляма — власний keyframes із різною
   тривалістю/фазою, щоб рух не виглядав механічно синхронним. */
.maintenance-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform;
}
/* Захардкожені кольори (не var(--accent)/var(--success)/var(--accent-2)) —
   ці плями спільні для сплеша й екрана техробіт, обидва мають фіксований
   вигляд незалежно від обраної теми оформлення. */
.blob-1 {
  width: 340px; height: 340px; top: -80px; left: -60px;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  animation: blobDrift1 22s ease-in-out infinite;
}
.blob-2 {
  width: 300px; height: 300px; bottom: -60px; right: -80px;
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  animation: blobDrift2 27s ease-in-out infinite;
}
.blob-3 {
  width: 260px; height: 260px; bottom: 20%; left: -40px;
  background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
  animation: blobDrift3 19s ease-in-out infinite;
}
@keyframes blobDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 50px) scale(1.15); } }
@keyframes blobDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.1); } }
@keyframes blobDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.2); } }

.maintenance-mascot {
  width: 170px; height: auto; margin-bottom: 2px; position: relative; z-index: 1;
  animation: maintenanceScan 4s ease-in-out infinite;
}
/* Джерело — суцільний чорний фон (не прозорий PNG) — screen-блендинг "з'їдає"
   чорні пікселі на майже чорному тлі екрана, замість помітного прямокутника. */
.ban-mascot { width: 190px; mix-blend-mode: screen; }
@keyframes maintenanceScan {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-2deg) translateY(-2px); }
  75% { transform: rotate(2deg) translateY(-2px); }
}
.maintenance-content {
  position: relative; z-index: 1; max-width: 340px;
  background: rgba(15, 12, 27, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg);
  padding: 22px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.maintenance-title { font-size: 17px; font-weight: 800; color: #f6f6fa; }
/* Той самий фіксований (не theme-залежний) брендовий вигляд, що й у сплеша —
   екран техробіт мусить виглядати однаково незалежно від обраної теми. */
.maintenance-subtitle-pill {
  display: inline-block; font-size: 12px; font-weight: 700; color: #a78bfa;
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px; padding: 5px 14px; margin-top: 10px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.maintenance-desc { font-size: 13.5px; color: #9a9aae; line-height: 1.5; margin-top: 10px; }
.maintenance-note { font-size: 12.5px; color: #9a9aae; font-style: italic; margin-top: 4px; }
.maintenance-countdown {
  margin-top: 14px; font-size: 17px; font-weight: 800; letter-spacing: 0.01em;
  color: #a78bfa; font-variant-numeric: tabular-nums;
}
.maintenance-countdown-label { font-size: 11px; font-weight: 700; color: #9a9aae; text-transform: uppercase; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .maintenance-blob, .maintenance-mascot { animation: none; }
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: calc(100 * var(--vh1));
  display: flex;
  flex-direction: column;
  padding-bottom: 104px;
}

/* ==================== Десктопна БЕТА-панель: сайдбар + робоча область ====================
   Рішення користувача 2026-09-27 (наданий скріншот-приклад класичного
   адмін-дашборду) + правки того ж дня ("на весь екран навіть під 4К", "меню
   зробити нормальним", "перетягнути те, що з сервісу розділи — на ПК більше
   навігації, ніж у телефона"): на ПК бета-панель тепер — ПОВНОЕКРАННИЙ
   дашборд (не картка з відступами й стелею ширини), а сайдбар несе не лише 4
   основні вкладки мобільного таб-бару, а й усі пункти "Сервіс" з профілю
   (ШІ-ключ/Контент-менеджер/Сповіщення/Карта/Навчання/Підтримка/Політика
   приватності/Технічний розділ) — той простір, якого немає в кишені телефону,
   є на моніторі. Продакшн-панель (index.html/style.css) не чіпається взагалі.

   ВАЖЛИВО: 4 основні вкладки (Головна/Контент/Реклама/Ще) — той самий
   .bottom-nav/.nav-btn і та сама switchTab-логіка app-beta.js, жодних змін.
   Нові пункти "Сервіс" — ОКРЕМИЙ клас .nav-btn-extra (НЕ .nav-btn!), навмисно
   не зачіпає document.querySelectorAll(".nav-btn"/"nav-btn[data-tab=...]")
   всередині switchTab — інакше додавання data-tab="aikey" на видимий лише
   на ПК елемент зламало б МОБІЛЬНИЙ фолбек-підсвіт (switchTab без відповідного
   .nav-btn[data-tab] підсвічує "Ще" — так задумано для вкладених екранів
   ШІ-ключ/Контент-менеджер/Технічний розділ, куди на мобільному заходять
   САМЕ з профілю). Клік по .nav-btn-extra (app-beta.js, після цього блоку)
   або викликає switchTab() напряму й підсвічує себе вручну (ШІ-ключ/Контент-
   менеджер/Технічний розділ — реальні SPA-вкладки), або просто форвардить
   клік на вже наявний прихований мобільний .set-row (Сповіщення/Карта/
   Навчання/Підтримка/Політика приватності — дії/зовнішня навігація, не
   SPA-вкладки, підсвітка "активності" їм не потрібна). */

.sidebar-brand { display: none; }
/* Нові прямі діти .bottom-nav (2026-09-27) — той самий захист, що й .sidebar-
   brand/.nav-btn-extra: на мобільному .bottom-nav лишається горизонтальним
   flex-рядом таб-бару, і без явного display:none ці 2 нових блоки стали б
   зайвими порожніми flex-елементами посеред 4 кнопок таб-бару. */
.sidebar-service-grid, .sidebar-glance { display: none; }
/* БАГ 2026-09-27 ("дизайн пк і телефону — 2 різних, а не один змішаний"):
   .sidebar-section-label — звичайний <span> без жодного власного стилю за
   замовчуванням — на мобільному .bottom-nav і досі display:flex РЯДКОМ
   (мобільна верстка), тож цей <span> ставав ЗАЙВИМ flex-елементом посеред 4
   кнопок таб-бару й наїжджав написом "Сервіс" просто в нижньому меню поверх
   "Ще". Той самий клас захисту, що вже є в .sidebar-brand/.nav-btn-extra
   вище/нижче — тут його просто забули додати одразу. */
.sidebar-section-label { display: none; }
/* .nav-primary-ico/.nav-extra-ico — display:contents за замовчуванням: на
   мобільному обгортка НІЯК не впливає на layout (іконка рендериться так само,
   як і завжди, жодного чіпа) — кольоровий чіп-фон з'являється ЛИШЕ під
   body.desktop-platform нижче. */
.nav-primary-ico, .nav-extra-ico { display: contents; }

/* .nav-btn-extra — НОВИЙ клас (не .nav-btn), тож без явного скидання тут
   успадковує ДЕФОЛТНИЙ вигляд <button> браузера (сірий фон/рамка) — саме
   так виглядав перший чорновий варіант. Скидання лежить у базовому (не
   desktop-gated) правилі, бо на мобільному елемент і так display:none —
   впливає лише на ПК, де display:none перебивається display:flex далі. */
.nav-btn-extra {
  display: none;
  background: none; border: none; margin: 0; color: var(--hint);
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.nav-btn-extra:active { transform: scale(0.98); }

/* ---------- Нова айдентика ПК-панелі (2026-10-22, "приложение отдельное от
   тг... переделай с нуля всю панель") — замість переносу мобільної
   фіолетово-скляної палітри (вибір теми з "Налаштувань") під body.desktop-
   platform перевизначені самі токени кольору/радіусів/тіні/розмиття: клас на
   body має вищу специфічність за [data-theme="…"] на :root, тож ці значення
   завжди перемагають незалежно від обраної мобільної теми — ПК більше не
   ділить палітру з Telegram Mini App. Глибокий графітово-чорний фон замість
   фіолетового/синього, теплий бурштиновий акцент (продовжує колір фокус-
   кільця в desktop/titlebar.html), непрозорі "консольні" панелі замість
   скляного розмиття (--glass-blur: none — той самий var(), яким уже
   користуються всі .card/.modal-sheet/… по всьому файлу, тож перемикається
   без правок кожного окремого місця), пласкіша тінь замість м'якого "ширяння"
   карток. Шрифт — Sora/IBM Plex Mono замість Inter, див. @import вище.

   2026-10-22, правка 1: цей блок спершу перевизначав і --accent-* незалежно
   від [data-theme="…"], тож перемикач тем у "Вигляд" на ПК ставав мертвим —
   будь-який вибір однаково давав бурштин. Нижче для кожної теми додано
   body.desktop-platform[data-theme="…"] з ЇЇ акцентом (вища специфічність:
   клас+атрибут проти самого лише класу, тож коректно перебиває рядок нижче) —
   графітова "консольна" оболонка (bg/card/шрифт/тіні) лишається спільною для
   всіх, акцент тепер реально змінюється.
   2026-10-22, правка 2 (рішення користувача): "Фіолетова" — це _paintTheme("dark"),
   яка ЗНІМАЄ атрибут data-theme зовсім (app-beta.js) — тобто немає способу
   відрізнити "людина явно обрала Фіолетова" від "ще не чіпала перемикач",
   обидва стани буквально однакові в DOM. Тому цей блок (без [data-theme])
   тепер віддає СПРАВЖНІЙ фіолетовий — той самий, що й на свотчі кнопки
   "Фіолетова" й у мобільній версії, а не бурштин під чужим превʼю. Бурштин
   лишається фірмовим кольором там, де він НЕ залежить від теми (тайтлбар,
   екран входу, іконка трею) — просто більше не вдає із себе "Фіолетова". */
body.desktop-platform {
  --bg: #07090f;
  --bg-2: #0b0e16;
  --card: rgba(13, 17, 25, 0.94);
  --card-hi: rgba(19, 24, 36, 0.97);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-border-hi: rgba(168, 85, 247, 0.35);
  --glass-blur: none;
  --accent: #a855f7;
  --accent-glow: rgba(168, 85, 247, 0.22);
  --accent-2: #c084fc;
  --accent-deep: #9333ea;
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.14);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.14);
  --text: #eef0f5;
  --hint: rgba(238, 240, 245, 0.52);
  --radius-sm: 9px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 24px rgba(0, 0, 0, 0.38);
  --shadow-glow-btn: 0 6px 16px rgba(255, 176, 32, 0.22);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: block;
}
/* 2026-10-24: виправлено селектор — setTheme()/_paintTheme() (app-beta.js) ставить
   data-theme на <html>, а не на <body> (клас "desktop-platform" якраз на body), тож
   "body.desktop-platform[data-theme=…]" тут нижче НІКОЛИ не збігався: на ПК акцент
   завжди лишався фіолетовим (базовий body.desktop-platform{--accent:#a855f7} вище),
   яку б тему людина не обрала. html[data-theme=…] body.desktop-platform — те саме
   правило, що реально відповідає DOM. */
html[data-theme="brown"] body.desktop-platform {
  --accent: #4f8bff; --accent-glow: rgba(79, 139, 255, 0.22); --accent-2: #7fb2ff; --accent-deep: #2f5fe0;
  --card-border-hi: rgba(79, 139, 255, 0.35);
  --success: #34d399; --success-bg: rgba(5, 150, 105, 0.16);
  --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(217, 119, 6, 0.16);
}
html[data-theme="crimson"] body.desktop-platform {
  --accent: #e11d48; --accent-glow: rgba(244, 63, 94, 0.22); --accent-2: #fb4f73; --accent-deep: #9f1239;
  --card-border-hi: rgba(225, 29, 72, 0.35);
  --success: #34d399; --success-bg: rgba(5, 150, 105, 0.16);
  --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.15);
}
html[data-theme="beige"] body.desktop-platform {
  --accent: #7e49b3; --accent-glow: rgba(126, 73, 179, 0.24); --accent-2: #a06cd6; --accent-deep: #5a3285;
  --card-border-hi: rgba(126, 73, 179, 0.35);
  --success: #6ee7b7; --success-bg: rgba(52, 211, 153, 0.15);
  --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15);
}
html[data-theme="orchid"] body.desktop-platform {
  /* Синхронізовано з «Орхідея v2» ([data-theme="orchid"] нижче у файлі) — цей
     ПК-блок вищої специфічності (клас+атрибут) раніше беззмінно перебивав v2
     старими v1-кольорами (#42478b/#b67ddb), тож на ПК тема не оновлювалась
     разом з мобільною/вебап-версією. */
  --accent: #c584ea; --accent-glow: rgba(197, 132, 234, 0.24); --accent-2: #dcaaf8; --accent-deep: #8a52c4;
  --card-border-hi: rgba(216, 166, 246, 0.35);
  --success: #6ee7b7; --success-bg: rgba(52, 211, 153, 0.15);
  --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #f5b94d; --warning-bg: rgba(245, 185, 77, 0.15);
}
html[data-theme="fuchsia"] body.desktop-platform {
  --accent: #ce3b89; --accent-glow: rgba(206, 59, 137, 0.24); --accent-2: #ea6aa8; --accent-deep: #8e1f5b;
  --card-border-hi: rgba(206, 59, 137, 0.35);
  --success: #86efac; --success-bg: rgba(134, 239, 172, 0.14);
  --danger: #ff8fa3; --danger-bg: rgba(255, 143, 163, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15);
}
/* Цифрові показники — спарклайни, лічильники, час — на Plex Mono (консольний
   характер, цифри не "гуляють" шириною при зміні значення). */
body.desktop-platform .home-dash-value,
body.desktop-platform .sidebar-glance-value {
  font-family: 'IBM Plex Mono', 'Sora', monospace;
}
body.desktop-platform .app {
  display: grid;
  /* 2026-09-28: 264→292px — після збільшення іконок нав-пунктів (38/25px) і
     лого бренду (44px) довші підписи ("Реферальна система", "Політика
     приватності", "Rezerv UA Radar") почали обрізатись ellipsis'ом у старій
     264px колонці (баг зі скріншота користувача). +28px повертає їм місце,
     не займаючи його з-під самого контенту (той самий 1fr другий стовпець). */
  grid-template-columns: 292px 1fr;
  grid-template-rows: auto 1fr;
  width: calc(100 * var(--vw1)); height: calc(100 * var(--vh1));
  max-width: none; min-height: 0;
  margin: 0; padding-bottom: 0;
  /* Відступ зверху — під фіксовану оранжеву смугу "ТЕСТОВА ПАНЕЛЬ"
     (#beta-banner, position:fixed, лише в цій, тестовій, панелі). */
  padding-top: 28px; box-sizing: border-box;
  border: none; border-radius: 0; box-shadow: none;
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
}
/* Амбієнтний анімований фон, лише ПК (2026-09-28, "анимированный
   переливающийся градиент") — НОВІ, ОКРЕМІ від --bg-glow-1/2 змінні (ті
   лишаються transparent, [[bug-ambient-glow-bleed-through-card]]): той баг
   ловив САМЕ --bg-glow-1/2, бо на них зав'язаний ще й .home-dash-card::after
   — чіпати їх знову означало б повернути протікання і туди. Тут — власний,
   дуже слабкий (8-11% color-mix) шар в окремому ::before позаду сітки
   (z-index:0, контент вище на z-index:1), анімується лише transform/filter
   (не сам градієнт — @property для плавної інтерполяції кольору в
   радіальному градієнті ненадійний у QtWebEngine Telegram Desktop). */
/* 2026-10-22: нова айдентика — "консольна" панель даних, не скляна картка з
   переливом. Той самий ::before-шар лишається (вимикати анімацію через
   prefers-reduced-motion нижче вже налаштовано), але колірний перелив
   (hue-rotate) прибрано — лише ледь помітний повільний зсув позиції, 3-4%
   замість 9-11% непрозорості: фон читається як рівний графіт, не "AI-
   градієнт". */
body.desktop-platform .app::before {
  content: ""; position: absolute; inset: -5%; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 900px 620px at 18% 15%, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 820px 560px at 85% 30%, color-mix(in srgb, var(--accent-2) 3%, transparent) 0%, transparent 58%);
  animation: desktopAmbientDrift 48s ease-in-out infinite alternate;
  will-change: transform;
}
body.desktop-platform .bottom-nav, body.desktop-platform .topbar, body.desktop-platform .content { position: relative; z-index: 1; }
@keyframes desktopAmbientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body.desktop-platform .app::before { animation: none; }
}

/* ---------- Сайдбар: той самий .bottom-nav, повний редизайн 2026-09-27
   ("переделай весь дизайн") ---------- */
body.desktop-platform .bottom-nav {
  grid-column: 1; grid-row: 1 / -1;
  width: auto; max-width: none; margin: 0; bottom: auto; left: auto; right: auto;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sidebar-row-gap, 2px);
  padding: 18px 12px 20px; overflow-y: auto;
  /* БАГ 2026-09-28 (скріншот користувача — сірий "повзунок" унизу сайдбару) —
     пунктів побільшало (реф-система тощо) й іконки/лого підросли цього ж
     заходу, тож .bottom-nav частіше реально скролиться по висоті — і, на
     відміну від УСІХ інших внутрішніх скролів застосунку (.modal-sheet,
     .segmented-scroll тощо), тут нативний смугастий скролбар ніколи не
     ховали. Той самий паттерн, що й скрізь: сам скрол лишається (колесо
     миші/тачпад далі гортають список), просто без видимої смуги. */
  -ms-overflow-style: none; scrollbar-width: none;
  /* Легкий вертикальний градієнт замість суцільного плоского тону — сайдбар
     читається як окрема "панель", а не той самий фон, що й контент, просто
     обрізаний вертикальною лінією. */
  background: linear-gradient(180deg, var(--card-hi) 0%, var(--card) 100%);
  border-right: 1px solid var(--card-border);
  border-radius: 0;
  /* 2026-09-28 ("кнопка открытия сайдера... в другом месте и в другом
     стиле") — потрібна опорна точка для кнопки-згортання нижче, яка тепер
     "висить" на самому краю колонки (position:absolute), а не бере участь
     у рядку лого. static→relative нічого не ламає (той самий normal flow),
     просто дозволяє дочірньому елементу з position:absolute прив'язатись
     САМЕ до цієї колонки, а не до viewport. */
  position: relative;
  /* Тінь замість (чи разом із) тонкої рамки — реальне відчуття шару "над"
     контентом (apple-design §12: Materials & depth), не просто розділова лінія. */
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.desktop-platform .bottom-nav::-webkit-scrollbar { display: none; }
body.desktop-platform .sidebar-brand {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 4px 10px 18px; margin-bottom: 10px;
  border-bottom: 1px solid var(--card-border);
}
/* Рішення користувача 2026-09-27 (скріншот без тексту, уточнення: "убрать
   свечение вокруг лого") — прибрано акцентне box-shadow-світіння, лого тепер
   пласке, без "glow", консистентно з рештою плоского редизайну сайдбару.
   2026-09-28 ("логотип побільше і по центру") — 34→44px, justify-content:
   center на .sidebar-brand вище центрує лого+текст (кнопка згортання БІЛЬШЕ
   не бере участі в цьому рядку — див. .sidebar-collapse-btn нижче, тепер
   окремий "плаваючий" елемент, не частина flex-потоку лого). */
body.desktop-platform .sidebar-brand-logo {
  width: calc(44px * var(--ui-icon-scale, 1)); height: calc(44px * var(--ui-icon-scale, 1));
  object-fit: contain; border-radius: 12px; flex-shrink: 0;
}
body.desktop-platform .sidebar-brand-text { min-width: 0; }
body.desktop-platform .sidebar-brand-title {
  font-size: calc(14.5px * var(--ui-font-scale, 1)); font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.desktop-platform .sidebar-brand-subtitle { font-size: calc(11px * var(--ui-font-scale, 1)); color: var(--hint); font-weight: 600; margin-top: 1px; }

/* Кнопка згортання сайдбару — ПОВНИЙ редизайн 2026-09-28 ("кнопка открытия
   сайдере в другом месте и в другом стиле", після того як версія "в рядку
   лого" — і центрована, і згодом стовпчиком під лого — обидва рази виглядали
   зайвими/незграбними на скріншотах користувача). Тепер це "плаваюча" кругла
   кнопка-піль, що сидить НА МЕЖІ сайдбару й контенту (навпіл за межами
   72px/292px колонки — той самий знайомий патерн, що в VS Code/Notion/Linear:
   ручка на самому кордоні панелі, не частина її внутрішнього контенту).
   Однакова позиція й стиль в ОБОХ станах (розгорнуто/згорнуто) — .bottom-nav
   вище отримав position:relative саме як опорну точку. Більше не бере участі
   в жодному flex-центруванні лого — ці дві речі повністю незалежні. */
body.desktop-platform .sidebar-collapse-btn {
  position: absolute; top: 26px; right: -12px; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-hi); border: 1px solid var(--card-border);
  color: var(--hint); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
body.desktop-platform .sidebar-collapse-btn svg { width: 13px; height: 13px; }
body.desktop-platform .sidebar-collapse-btn:active { transform: scale(0.88); }
@media (hover: hover) {
  body.desktop-platform .sidebar-collapse-btn:hover { background: var(--accent-glow); color: var(--text); border-color: var(--accent); }
}

/* Рішення користувача 2026-09-27 ("тільки іконки і красиві кнопки без
   підписи Навігація і Сервіс") — текст групи прибрано зовсім, елемент
   лишається в розмітці ЛИШЕ як тонкий роздільник між двома групами кнопок
   (текст схлопнутий у нуль: font-size/line-height/height:0). Перед першою
   групою (одразу під брендом, де вже є власний border-bottom) роздільник
   не потрібен узагалі — :not(:first-of-type) додає риску лише перед другою. */
body.desktop-platform .sidebar-section-label {
  display: block; height: 0; padding: 0; margin: 6px 0 0;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden;
}
body.desktop-platform .sidebar-section-label:not(:first-of-type) {
  height: 1px; margin: 10px 12px; background: var(--card-border);
}

/* Пункти навігації (основні .nav-btn і "Сервіс" .nav-btn-extra — ОДНА спільна
   геометрія рядка) — з "іконка зверху / підпис знизу" (мобільний таб-бар) на
   "іконка зліва / підпис праворуч" (звичний рядок сайдбару), на всю ширину.
   flex: 0 0 auto — .nav-btn на мобільному має flex:1 (рівномірно росте в
   ГОРИЗОНТАЛЬНОМУ таб-барі), без явного скидання тут кожна з 4 основних
   кнопок так само розтягувалась би на всю висоту у ВЕРТИКАЛЬНІЙ колонці
   сайдбару (саме цей баг і показав скріншот — величезні порожні проміжки
   між "Головна"/"Контент"/"Реклама"/"Ще"). */
body.desktop-platform .nav-btn,
body.desktop-platform .nav-btn-extra {
  position: relative;
  flex: 0 0 auto;
  flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 12px; width: 100%; padding: var(--sidebar-row-padding-v, 9px) 11px;
  font-size: calc(13px * var(--ui-font-scale, 1)); font-weight: 600; color: var(--hint);
  text-align: left; white-space: nowrap;
  border-radius: var(--radius-sm);
  display: flex;
  /* gap теж анімується — рішення користувача 2026-09-27 ("плавна анімація
     відкриття меню"): підпис поруч із іконкою стискається до max-width:0
     (нижче), а без синхронної анімації самого gap іконка лишалась би
     зсунутою від центру рядка ще й на half-gap навіть після повного
     схлопування підпису. */
  transition: background 0.15s ease, color 0.15s ease, gap 0.22s ease;
}
/* Індикатор-рисочка зверху (::before, мобільний патерн) тут не потрібен —
   на ПК роль індикатора грає рисочка ЗЛІВА рядка (нижче, лише .active). */
body.desktop-platform .nav-btn::before { display: none; }

/* 2026-09-28 (скріншот користувача — "дизайн кнопок різний... хочу як на
   другому скріні") — раніше тут була СВІДОМА різниця ваги (чіп-плашка під
   іконкою в 3 головних розділів vs гола іконка в "Сервіс"), але користувач
   прямо попросив ОДИН узгоджений вигляд для ВСІХ пунктів сайдбару, за
   зразком плоского "Сервіс"-стилю (другий скрін). Тепер .nav-primary-ico й
   .nav-extra-ico — однакові гола-іконка контейнери (без фону-плашки,
   однаковий розмір/товщина лінії); ієрархію "головне/сервіс" далі несе
   лише порядок пунктів і розділові лінії, не окремий стиль іконки. */
body.desktop-platform .nav-primary-ico,
body.desktop-platform .nav-extra-ico {
  display: flex; align-items: center; justify-content: center;
  width: calc(25px * var(--ui-icon-scale, 1)); height: calc(25px * var(--ui-icon-scale, 1)); flex-shrink: 0;
  color: var(--hint);
  transition: color 0.15s ease;
}
body.desktop-platform .nav-primary-ico .icon,
body.desktop-platform .nav-extra-ico svg {
  width: calc(22px * var(--ui-icon-scale, 1)); height: calc(22px * var(--ui-icon-scale, 1)); stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Активний стан — м'яка акцентна підсвітка фону (не суцільна заливка — та
   виглядає як натиснута кнопка, а не як "поточний розділ") + акцентна
   рисочка врівень з лівим краєм сайдбару. */
body.desktop-platform .nav-btn.active,
body.desktop-platform .nav-btn-extra.active {
  /* 2026-10-25: той самий єдиний спосіб підсвітки (жодної другої "мови" поруч —
     див. рішення користувача 2026-09-27 нижче), лише трохи глибший: градієнт
     замість рівного тону й легке світіння на рисочці зліва, а не плоский колір. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 85%);
  color: var(--text); font-weight: 700;
}
body.desktop-platform .nav-btn.active::before,
body.desktop-platform .nav-btn-extra.active::before {
  content: ""; display: block; position: absolute;
  left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--accent-2);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent-2) 65%, transparent);
}
body.desktop-platform .nav-btn.active .nav-primary-ico,
body.desktop-platform .nav-btn-extra.active .nav-extra-ico { color: var(--accent-2); }
body.desktop-platform .nav-btn.active .icon,
body.desktop-platform .nav-btn-extra.active .icon { transform: none; filter: none; }
/* Hover — реальна відмінність десктопу від тач-екрана (п.10 apple-design:
   :active для тапу є всюди вже, hover має сенс лише там, де є курсор). */
/* Рішення користувача 2026-09-27 ("весь під єдиний стиль, а не тут так,
   а там інакше") — hover БЕЗ власної фонової "плашки": так на скріні hover
   на "ШІ-ключ" читався як ЩЕ ОДИН, третій тип виділення (сірий прямокутник)
   поряд з акцентною плашкою активного пункту — два різних візуальних
   способи підсвітки в одному меню й виглядали як "неєдиний стиль". Тепер
   у меню лишається РІВНО один спосіб показати виділення (активний пункт —
   акцентна плашка + рисочка зліва), hover — лише освітлення кольору тексту/
   іконки, без фону. */
@media (hover: hover) {
  body.desktop-platform .nav-btn:not(.active):hover,
  body.desktop-platform .nav-btn-extra:not(.active):hover { color: var(--text); }
  body.desktop-platform .nav-btn:not(.active):hover .nav-primary-ico,
  body.desktop-platform .nav-btn-extra:not(.active):hover .nav-extra-ico { color: var(--text); transform: translateX(1px); }
  body.desktop-platform .nav-primary-ico, body.desktop-platform .nav-extra-ico { transition: color 0.15s ease, transform 0.18s cubic-bezier(.3, 1.4, .5, 1); }
}

/* ---------- "Сервіс" — звичайний список рядків (2026-09-27, "переработай
   sidebar": "сама структура плитками не подобається") — відкат сітки 2×N
   плиток (той самий "поменяй весь дизайн" захід, застосований раніше) назад
   до одноколонкового списку. .nav-btn-extra тут більше НІЧИМ не
   перезаписується — успадковує ту саму геометрію рядка (іконка зліва,
   підпис праворуч), що вже задана спільним правилом
   `body.desktop-platform .nav-btn, .nav-btn-extra` вище (і саму активну
   рисочку зліва — той самий індикатор, що й в основній навігації, без
   спеціального "плиткового" active-стану). */
body.desktop-platform .sidebar-service-grid {
  display: flex; flex-direction: column; gap: 2px;
}

/* ---------- Міні-віджет "Зараз" — заповнює порожній хвіст сайдбару живими
   цифрами (ті самі значення, що й картки Головної), замість порожнечі на
   широких екранах. Спокійний, не змагається з навігацією вище. ----------
   2026-09-28 ("убрать в сайдере", скріншот саме цього віджета) — прибрано
   назад під display:none (базове правило рядком 339 вище, .sidebar-service-
   grid, .sidebar-glance { display: none }, тепер знову й для десктопу).
   HTML/JS-наповнення (app-beta.js, id="sidebar-glance-queue"/"-alerts")
   свідомо НЕ чіпаємо — рядки просто ніде не рендеряться, як і на мобільному
   (той самий елемент, той самий мертвий-але-нешкідливий запис значень). */
body.desktop-platform .sidebar-glance { display: none; }
body.desktop-platform .sidebar-glance-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hint); opacity: 0.7; margin-bottom: 9px;
}
body.desktop-platform .sidebar-glance-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px;
}
body.desktop-platform .sidebar-glance-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
body.desktop-platform .sidebar-glance-label { color: var(--hint); font-weight: 600; flex: 1; min-width: 0; }
body.desktop-platform .sidebar-glance-value {
  font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
}

/* Скріншот "не пк вид" — по кліку на пункт меню браузер/webview малював
   власну чорну прямокутну рамку фокусу поверх заокругленої акцентної плашки
   (стандартна :focus-обводка кнопки, про яку ніхто в дизайні не подбав) —
   читалось як зламаний, невідполірований елемент. Прибираємо дефолтну
   обводку на звичайний клік мишею, лишаємо власне акуратне кільце ЛИШЕ для
   клавіатурної навігації (:focus-visible) — так і клік мишею більше не дає
   бридкого квадрата, і доступність з клавіатури не ламається. */
body.desktop-platform .nav-btn:focus,
body.desktop-platform .nav-btn-extra:focus,
body.desktop-platform .sidebar-footer-settings-btn:focus { outline: none; }
body.desktop-platform .nav-btn:focus-visible,
body.desktop-platform .nav-btn-extra:focus-visible,
body.desktop-platform .sidebar-footer-settings-btn:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: -2px;
}

/* На ПК ці пункти живуть у сайдбарі — дублікат списку "Сервіс" у самому
   контенті вкладки "Ще" ховаємо (index-beta.html: #profile-service-section
   огортає той самий .set-label + .set-group, що вже дублюється зліва). */
body.desktop-platform #profile-service-section { display: none; }

/* Щільність усієї панелі (2026-09-28, "для пк... типо размер" → спершу
   зробив лише для сайдбару, уточнено: "мне надо самой панели и мини апп а
   не сайдбара" — тобто відстані/паддинги по ВСІЙ панелі: картки
   (.settings-card), рядки списків (.set-row/.list-row/.submission-card),
   а не лише пункти меню зліва) — лише ПК. Усі --ui-*/--sidebar-* змінні
   мають дефолт як fallback-значення (ті самі числа, що були завжди,
   style-beta.css вище) — без жодного з трьох класів нижче вигляд не
   змінюється ("Звично" = ті самі числа, просто явним класом для симетрії). */
#ui-scale-row { display: none; }
body.desktop-platform #ui-scale-row { display: block; }
/* Розмір тексту — дзеркально до #ui-scale-row вище: лише мобільний, на ПК є
   своя "Щільність панелі" (той самий --ui-font-scale, інше джерело). */
body.desktop-platform #textsize-block { display: none; }
/* Повторний баг 2026-09-29 (скріншот з iPhone — перемикач щільності все одно
   видно на телефоні): body.desktop-platform виставляється з JS і в рідкісних
   випадках потрапляє на вузький екран (браузерний клієнт web/weba, чиє
   tg.platform нічого не каже про розмір, + відкладена перевірка за шириною,
   яка спрацьовує на момент, коли viewport ще не стабілізувався). Тому до
   класу додаємо ЖОРСТКИЙ гейт за реальною шириною вікна — нижче 900px
   (порог desktop-режиму) рядок не показується НІКОЛИ, хай який клас на body. */
@media (max-width: 899px) {
  body.desktop-platform #ui-scale-row { display: none; }
}
/* Рішення користувача 2026-09-28 (скрін-порівняння "на першому як є, на
   другому як хочу") — самих відступів виявилось замало: на референсі
   помітно БІЛЬШЕ все разом — текст, іконки, аватарки, а не лише повітря між
   ними. Спершу спробував zoom на body — відкотив: .app на ПК має
   width:100vw;height:100vh;overflow:hidden (фіксована сітка-колонка
   сайдбару 264px), і zoom>100% скейлив вміст БІЛЬШЕ за цю жорстку рамку —
   зайве просто обрізалось праворуч (той самий баг, що на скріні
   користувача: кнопка "Вибрати" й картка каналів впритул до краю).
   Замість zoom — прямі --ui-font-scale/--ui-icon-scale множники через
   calc(), застосовані ТОЧКОВО до розміру шрифту й іконок (не до всього
   layout-box відразу) — рядки природно стають вищими/текст більшим, без
   ризику розп'ерти щось за межі фіксованої сітки. */
body.desktop-platform.ui-density-compact {
  --sidebar-row-gap: 0px; --sidebar-row-padding-v: 6px;
  --ui-card-padding: 12px; --ui-card-gap: 6px;
  --ui-row-padding-v: 9px; --ui-row-padding-v-lg: 11px; --ui-row-padding-v-xl: 14px;
  --ui-font-scale: 0.93; --ui-icon-scale: 0.9;
}
body.desktop-platform.ui-density-comfortable {
  --sidebar-row-gap: 2px; --sidebar-row-padding-v: 9px;
  --ui-card-padding: 16px; --ui-card-gap: 10px;
  --ui-row-padding-v: 13px; --ui-row-padding-v-lg: 16px; --ui-row-padding-v-xl: 20px;
  --ui-font-scale: 1; --ui-icon-scale: 1;
}
body.desktop-platform.ui-density-spacious {
  /* Рішення користувача 2026-09-28 — 1.14/1.2 виявилось замало, потрібно
     "ще помітно більше". */
  --sidebar-row-gap: 8px; --sidebar-row-padding-v: 15px;
  --ui-card-padding: 26px; --ui-card-gap: 18px;
  --ui-row-padding-v: 20px; --ui-row-padding-v-lg: 24px; --ui-row-padding-v-xl: 28px;
  --ui-font-scale: 1.3; --ui-icon-scale: 1.35;
}

/* Рішення користувача 2026-09-27 ("раздел ще перенести в низ... сделать как
   на втором скрине"): "Ще" прибрано з основної навігації сайдбару зовсім —
   замінена компактним віджетом акаунта внизу (.sidebar-footer нижче) +
   кнопкою "Налаштування" (мова/тема — тепер модалка, не окрема вкладка).
   Сам таб-контент "Ще" (index-beta.html #tab-profile) НІКУДИ не подівся —
   просто на ПК на нього більше нема прямого посилання в навігації (мобільна
   верстка не чіпається, там ця кнопка лишається як завжди). */
body.desktop-platform .nav-btn[data-tab="profile"] { display: none; }

/* ---------- Футер сайдбару: віджет акаунта + кнопка "Налаштування" ----------
   margin-top:auto притискає блок до самого низу .bottom-nav (flex-column)
   незалежно від того, скільки пунктів вище — не потрібно рахувати висоти. */
.sidebar-footer { display: none; }
body.desktop-platform .sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding: 12px 10px 4px;
  border-top: 1px solid var(--card-border);
}
body.desktop-platform .sidebar-footer-avatar {
  width: calc(34px * var(--ui-icon-scale, 1)); height: calc(34px * var(--ui-icon-scale, 1)); border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(14px * var(--ui-font-scale, 1)); font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--accent-2), var(--accent-deep));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 3px 10px var(--accent-glow);
  overflow: hidden;
}
body.desktop-platform .sidebar-footer-info { min-width: 0; flex: 1; }
body.desktop-platform .sidebar-footer-name {
  font-size: calc(13px * var(--ui-font-scale, 1)); font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.desktop-platform .sidebar-footer-role {
  font-size: calc(10.5px * var(--ui-font-scale, 1)); font-weight: 700; color: var(--accent-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.desktop-platform .sidebar-footer-settings-btn {
  width: calc(30px * var(--ui-icon-scale, 1)); height: calc(30px * var(--ui-icon-scale, 1)); border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--hint); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.4s ease;
}
body.desktop-platform .sidebar-footer-settings-btn svg { width: calc(17px * var(--ui-icon-scale, 1)); height: calc(17px * var(--ui-icon-scale, 1)); }
body.desktop-platform .sidebar-footer-settings-btn:active { transform: scale(0.92) rotate(35deg); }
@media (hover: hover) {
  body.desktop-platform .sidebar-footer-settings-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); transform: rotate(35deg); }
}

/* ---------- Згорнутий сайдбар — режим "тільки іконки" (ТЗ користувача
   2026-09-27, "Collapsible sidebar для адмін-панелі"): body.sidebar-collapsed
   перемикається кнопкою в sidebar-brand (app-beta.js), стан переживає
   перезавантаження через localStorage. Колонка сайдбару анімовано звужується
   264px → 72px (0.25s ease — в межах діапазону 200-300ms з ТЗ); grid-
   template-columns коректно інтерполюється в сучасних Chromium-вебв'ю
   (Telegram Desktop). Підказки з назвою розділу при наведенні — нативний
   атрибут title (app-beta.js виставляє з тексту підпису кожного пункту),
   свідомо без окремого кастомного tooltip-компонента: title вже дає саме
   потрібну поведінку (з'являється з невеликою затримкою при hover, зникає
   при відведенні курсора) без зайвого JS/CSS. */
body.desktop-platform .app { transition: grid-template-columns 0.25s ease; }
body.desktop-platform.sidebar-collapsed .app { grid-template-columns: 72px 1fr; }
body.desktop-platform.sidebar-collapsed .bottom-nav { padding: 18px 10px 20px; }
/* Рішення користувача 2026-09-27 ("давай добавимо плавну анімацію
   відкриття меню") — текст бренду/віджет "Зараз"/другий рядок футера/
   підписи пунктів раніше ховались через display:none — властивість, яку
   БРАУЗЕР ФІЗИЧНО НЕ ВМІЄ анімувати (миттєвий стрибок), тож попри плавне
   звуження самої колонки сайдбару (grid-template-columns 0.25s вище) весь
   текст усередині зникав/з'являвся різким "клацанням", а не разом з рухом
   колонки. Заміна на opacity+max-width(чи max-height для вертикального
   віджета)+margin/padding, що транзишляться в ОБИДВА боки (transition
   заданий у базовому, не лише .collapsed, правилі) — той самий підсумковий
   вигляд (повністю невидимо й без місця), але тепер плавно синхронізовано
   з рухом самої колонки. */
body.desktop-platform .sidebar-brand-text,
body.desktop-platform .sidebar-footer-info,
body.desktop-platform .nav-btn > span:not(.nav-primary-ico),
body.desktop-platform .nav-btn-extra > span:not(.nav-extra-ico) {
  opacity: 1; max-width: 220px; overflow: hidden;
  transition: opacity 0.16s ease, max-width 0.22s ease;
}
body.desktop-platform .sidebar-glance {
  opacity: 1; max-height: 140px;
  transition: opacity 0.16s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}
body.desktop-platform.sidebar-collapsed .sidebar-brand-text,
body.desktop-platform.sidebar-collapsed .sidebar-footer-info,
body.desktop-platform.sidebar-collapsed .nav-btn > span:not(.nav-primary-ico),
body.desktop-platform.sidebar-collapsed .nav-btn-extra > span:not(.nav-extra-ico) {
  opacity: 0; max-width: 0; pointer-events: none;
}
body.desktop-platform.sidebar-collapsed .sidebar-glance {
  opacity: 0; max-height: 0; margin: 0; padding: 0; pointer-events: none;
}
/* БАГ 2026-09-28 (скріншот користувача — "лого сьехало влево прям залинию а
   не по центру") — причина була в тому, що кнопка згортання БРАЛА УЧАСТЬ у
   тому самому flex-рядку, що й лого, зсуваючи центр. Остаточно вирішено вище
   (.sidebar-collapse-btn тепер position:absolute, повністю поза рядком лого
   — жодного конфлікту з центруванням у жодному з двох станів), тут лишається
   лише дрібне коригування вертикального padding для вужчої 72px колонки. */
body.desktop-platform.sidebar-collapsed .sidebar-brand { padding: 4px 0 14px; }
/* Підпис ховається (вище) — іконка сама плавно центрується рухом
   max-width/gap до нуля, окремого display:none тут більше не потрібно. */
body.desktop-platform.sidebar-collapsed .nav-btn,
body.desktop-platform.sidebar-collapsed .nav-btn-extra {
  justify-content: center; padding: 9px 0; gap: 0;
}
/* Рисочка активного пункту зав'язана на лівий край сайдбару (left:-12px) —
   при 10px padding у згорнутому режимі вона б частково обрізалась. У
   вузькому режимі акцентного фону плашки й так достатньо як індикатор. */
body.desktop-platform.sidebar-collapsed .nav-btn.active::before,
body.desktop-platform.sidebar-collapsed .nav-btn-extra.active::before {
  display: none;
}
/* БАГ 2026-09-27 (скріншот користувача — шестерня "зникає" у згорнутому
   режимі): .sidebar-footer лишався РЯДКОМ (flex-direction:row, успадковано
   з базового правила) — аватар(34px)+gap(10px)+кнопка-шестерня(30px) = 74px
   контенту не влазять у ~52px, що лишаються в 72px-колонці після власного
   padding .bottom-nav (10px з кожного боку) — зайві пікселі просто вилазили
   за межі сайдбару й обрізались overflow:hidden на .app. Фікс — колонкою
   (аватар зверху, шестерня під ним), той самий "один елемент на рядок", що
   й решта згорнутого сайдбару, замість стиснутого в рядок дуету. */
body.desktop-platform.sidebar-collapsed .sidebar-footer {
  flex-direction: column; justify-content: center; gap: 10px; padding: 12px 0 4px;
}

body.desktop-platform .topbar { grid-column: 2; grid-row: 1; border-radius: 0; }
/* Рішення користувача 2026-09-27 ("просто виглядає порожньо/недороблено") —
   .topbar успадковував мобільний padding (46px+safe-area зверху — запобіжник
   під нативні контроли Telegram над вирізом/notch, на ПК їх немає і бути не
   може) та мобільні розміри аватара/шрифтів. На широкому екрані це давало
   зайву гігантську порожню шапку над кожною вкладкою. Тепер — компактний
   "рядок сторінки" з чіткою межею знизу (той самий матеріал-шар, що
   border-right у сайдбарі), а не розтягнутий мобільний блок. */
body.desktop-platform .topbar {
  padding: 20px 28px; gap: 16px;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg-2);
}
/* Користувач 2026-09-27: перший захід (аватар 36px/текст 14.5px) виявився
   перегнутим в інший бік — "дуже дрібно виглядає". Це середнє значення між
   тим і мобільним оригіналом (50px/17px): помітно легша шапка, ніж мобільний
   гігант з safe-area відступом, але не мініатюрна. */
body.desktop-platform .avatar { width: 46px; height: 46px; box-shadow: none; }
body.desktop-platform .topbar-title { font-size: 16.5px; }
body.desktop-platform .topbar-subtitle { font-size: 13px; }
body.desktop-platform .topbar-promo-icon { width: 46px; height: 46px; }
body.desktop-platform .topbar-promo-icon img { width: 32px !important; height: 32px !important; }
body.desktop-platform .topbar-promo-btn { padding: 2px; }
body.desktop-platform .content { grid-column: 2; grid-row: 2; overflow-y: auto; padding: 20px 28px 28px; }

/* Користувач 2026-09-27 ("зверху величезний проміжок") — вікно тестової
   панелі в Telegram Desktop буває невисоким (нижче ~700px), і той самий
   .topbar-padding+.content-padding, що на весь екран виглядає нормально,
   на низькому вікні з'їдає непропорційно велику частку висоти ще ДО
   першого рядка вкладки. Стискаємо лише вертикальні відступи шапки й
   контенту під низьку висоту — ширина/розміри аватара не чіпаємо, щоб не
   повертати попередню скаргу "дуже мілко виглядає". */
@media (max-height: 700px) {
  body.desktop-platform .topbar { padding-top: 12px; padding-bottom: 12px; }
  body.desktop-platform .content { padding-top: 10px; }
}

/* Рішення користувача 2026-09-27 — відкат попереднього кроку ("під пк зроби
   як на мобайл", max-width:560px): на 4К/широких моніторах вузька колонка
   посеред екрана з величезними порожніми полями по боках читалась як
   зламана верстка, не "той самий мобільний вигляд". "Головна" тепер ділить
   ту саму ширину контенту (max-width:1100px, style-beta.css нижче), що й
   "Контент"/"Джерела" — єдиний стиль для всіх вкладок. Самі картки
   статистики — адаптивна сітка (auto-fit), а не жорсткі 2 колонки: на
   вузькому вікні лишаються 2 картки в ряд, на широкому ряд сам домальовує
   місце під кожну картку, не розтягуючи їх до абсурдної ширини. */
body.desktop-platform .home-dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Рішення користувача 2026-09-27 ("адаптируй дизайн под пк тут", скріншот
   вкладки "Контент" → "Публікації": одна колонка карток модерації на всю
   ширину екрана, з величезними порожніми полями навколо короткого заголовка
   й двох кнопок). Раніше стеля ширини вмикалась ЛИШЕ на 4K (min-width:1800px)
   — на звичайному широкому моніторі (1200-1800px) контент і так розтягувався
   без обмежень. Тепер стеля working ЗАВЖДИ на десктопі, не лише на 4K —
   контент кадрується по центру своїм максимумом (не 100% ширини колонки),
   сайдбар лишається на місці, свайп/drag/bulk-select у самих картках не
   чіпали — суто ширина контейнера. */
/* СПРАВЖНЯ причина скріншота "величезні порожні поля" — .content це GRID-
   ІТЕМ (grid-column:2 у .app вище), а `max-width + margin:0 auto` лишає
   `width` обчисленим як `auto`. За специфікацією CSS Box Alignment: якщо в
   grid-айтема ширина `auto` І обидва горизонтальні margin — `auto`, це
   ВИМИКАЄ дефолтний justify-self:stretch і розмір стає fit-content —
   тобто .content стискався до мінімального практичного розміру своєї
   найвужчої дитини (auto-fit/minmax(260px,1fr) картки Головної, звідси й
   рівно 260px). Підтверджено ізольованим репро (headless + debug-вивід
   getComputedStyle: contentWidth був 316px замість 1100). Фікс — `width:
   min(100%, 1100px)` ЗАМІСТЬ max-width: це вже НЕ ключове слово `auto`,
   тож правило "auto-margin вимикає stretch" більше не спрацьовує, а
   центрування auto-маргінами лишається робочим, коли трек ширший за 1100px. */
body.desktop-platform .content { width: min(100%, 1100px); margin: 0 auto; }

/* "Джерела" (Контент → Джерела) — на мобільному завжди 2 колонки; на
   широкому десктопі auto-fill сам домальовує 3-й/4-й стовпець замість двох
   розтягнутих на всю (обмежену max-width вище) ширину контенту карток. */
body.desktop-platform .sources-tile-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.icon { width: 21px; height: 21px; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 26px; height: 26px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Fullscreen (tg.requestFullscreen()) НЕ завжди ховає нативні контроли
     Telegram (Закрити/Назад/шеврон/меню) — в деяких станах навігації
     (напр. після переходу з "Назад" в історії) вони таки показуються й
     інакше налазять прямо на аватарку/іконку тут. Буфер зверху — постійний
     запобіжник, не залежить від того, чи fullscreen реально спрацював. */
  padding: calc(46px + env(safe-area-inset-top)) 22px 14px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--accent-glow);
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.topbar-text { flex: 1; min-width: 0; overflow: hidden; }
.topbar-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-subtitle {
  font-size: 12.5px; color: var(--hint); font-weight: 500; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Промо / Підписки — заготовки під майбутню монетизацію: поки що просто
   показують "скоро з'явиться", коли самої функції ще нема. */
.topbar-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.topbar-promo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: var(--hint); font-family: inherit;
  font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 6px;
}
.topbar-promo-btn:active { transform: scale(0.94); }
.topbar-icon-only { gap: 0; padding: 4px; }
.topbar-promo-icon {
  position: relative;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(160deg, rgba(245, 197, 66, 0.22) 0%, rgba(245, 197, 66, 0.06) 100%);
  border: 1px solid rgba(245, 197, 66, 0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 18px rgba(245, 197, 66, 0.14);
  display: flex; align-items: center; justify-content: center;
}
.topbar-alert-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); border: 2px solid var(--bg);
  color: #fff; font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

/* .topbar (завжди зверху, поза .content) уже несе повний safe-area-inset-top
   буфер у своєму padding-top — додавання його ЩЕ РАЗ тут дублювало відступ і
   на пристроях з великим notch/Dynamic Island (safe-area-inset-top ~50-59px)
   давало неприродно великий провал між шапкою й першою карткою вкладки.
   Тут досить фіксованих 6px. */
.content { padding: 6px 26px 24px; flex: 1; }
#tab-content, #tab-ads { padding-top: 14px; }

.tab-screen { display: none; animation: fadeIn 0.25s ease; position: relative; }
/* Зсув (translateX) повернуто за проханням користувача — scale(0.985) НЕ
   повернуто: він давав більше перекомпоновок backdrop-filter картки (зміна
   розміру/країв на кожному кадрі, не лише позиції) і був основним джерелом
   спалаху світіння під час переходу (див. [[bug-ambient-glow-bleed-through-card]]
   у пам'яті). Сам зсув теж технічно змушує перекомпонувати семпл, тож повністю
   виключити спалах це не гарантує — лише зменшує його ризик. */
.tab-screen.active { display: block; animation: tabIn 0.36s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes tabIn {
  from { opacity: 0; transform: translateX(var(--tab-dx, 0px)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tab-screen.active { animation: none; } }

/* Заглушка "розділ тимчасово закрито" — на весь екран (крім нижньої навігації,
   лишається клікабельною завдяки z-index), не видаляє й не ламає сам вміст
   вкладки під нею, лише перекриває — вимикається одним boolean у JS. */
/* Розмите скляне тло (backdrop-blur, крізь яке видно приглушений контент
   позаду) + проста контурна кругла іконка без кольору/картки — за прямим
   зразком користувача, не .alerts-off-картка з попередньої ітерації. */
.section-locked-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(8, 6, 16, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
}
.section-locked-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border-hi, var(--card-border)); color: var(--hint);
  display: flex; align-items: center; justify-content: center;
}
.section-locked-icon svg { width: 24px; height: 24px; }
.section-locked-title { font-size: 16px; font-weight: 800; color: var(--text); max-width: 280px; line-height: 1.4; letter-spacing: -0.01em; }
.section-locked-desc { font-size: 13px; color: var(--hint); max-width: 280px; line-height: 1.55; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Дашборд швидких дій на Головній (2 картки: черга/тривоги) + окрема картка
   швидкої публікації останньої новини — п.1.1 редизайну, замінює старий вхід
   "спершу відкрий Редакцію, тоді знайди потрібну новину". */
.home-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.home-dash-card {
  position: relative; overflow: hidden;
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 16px 14px; text-align: left; transition: transform 0.15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.home-dash-card::after {
  content: ""; position: absolute; top: -34px; right: -34px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, var(--bg-glow-1) 0%, transparent 72%); pointer-events: none;
}
/* Кольорова іконка-плитка замість голого контуру — той самий словник, що й
   .set-ico в «Ще» та .settings-card-icon в налаштуваннях каналу. */
.home-dash-icon {
  width: calc(36px * var(--ui-icon-scale, 1)); height: calc(36px * var(--ui-icon-scale, 1)); border-radius: 11px; margin-bottom: 12px; position: relative;
  display: flex; align-items: center; justify-content: center; color: #fff;
  /* var(), не захардкожений фіолетовий — інакше плитка лишається бузковою
     навіть у синій/тактичній темі, поки решта екрана вже перемкнулась. */
  background: linear-gradient(160deg, var(--accent-2, #c084fc), var(--accent-deep, #9333ea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.home-dash-icon svg { width: calc(18px * var(--ui-icon-scale, 1)); height: calc(18px * var(--ui-icon-scale, 1)); display: block; }
.home-dash-card.clickable { cursor: pointer; }
.home-dash-card.clickable:active { transform: scale(0.97); }
.home-dash-value { font-size: calc(32px * var(--ui-font-scale, 1)); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); position: relative; }
.home-dash-label { font-size: calc(11.5px * var(--ui-font-scale, 1)); color: var(--hint); font-weight: 600; margin-top: 4px; position: relative; }
/* Картка тривог завжди має «тривожний» червоний колір іконки — це її ідентичність,
   а не лише сигнал стану; коли тривог 0, картка просто спокійніша (без світіння). */
#home-dash-alerts .home-dash-icon { background: linear-gradient(160deg, #fb7185, #e11d48); }
.home-dash-card.has-alerts { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1), 0 14px 30px rgba(239, 68, 68, 0.14); }
.home-dash-card.has-alerts::after { background: radial-gradient(circle, rgba(239, 68, 68, 0.22) 0%, transparent 72%); }
.home-dash-card.has-alerts .home-dash-value { color: var(--danger); }
.home-dash-card.has-alerts .home-dash-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 16px rgba(239, 68, 68, 0.55); }

.home-dash-quick-publish {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 14px;
  color: var(--text);
  opacity: 1; transition: opacity 0.35s ease;
}
.home-dash-quick-publish::before {
  content: ""; position: absolute; left: -30px; top: -50px; width: 160px; height: 130px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
}
.home-dash-quick-publish-head { position: relative; display: flex; align-items: center; gap: 10px; }
.home-dash-quick-publish-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px var(--accent-glow);
}
.home-dash-quick-publish-icon svg { width: 14px; height: 14px; }
.home-dash-quick-publish-title { position: relative; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hint); }
.home-dash-quick-publish-item { position: relative; font-size: 15px; font-weight: 700; margin: 10px 0 12px; line-height: 1.35; color: var(--text); }
.home-dash-quick-publish .primary-btn { position: relative; width: 100%; justify-content: center; margin-bottom: 0; }

/* Смужка-таймер: візуально показує, скільки лишилось до автозникнення картки
   (синхронізована з 10с у JS через анімацію ширини, а не окремим лічильником). */
.home-dash-quick-publish-timer {
  height: 3px; border-radius: 999px; margin-top: 12px;
  background: rgba(255, 255, 255, 0.22); overflow: hidden;
}
.home-dash-quick-publish-timer-fill {
  height: 100%; width: 100%; background: rgba(255, 255, 255, 0.9); border-radius: 999px;
}
.home-dash-quick-publish-timer-fill.counting { animation: quickPublishCountdown 10s linear forwards; }
@keyframes quickPublishCountdown {
  from { width: 100%; }
  to { width: 0%; }
}

.stat-card { text-align: center; padding: 28px 0 8px; }
.stat-label {
  font-size: 13px; color: var(--hint); margin-bottom: 8px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.stat-value {
  font-size: 52px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-card-wide {
  text-align: left; padding: 22px 22px; border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--card-border);
}
.stat-card-row { display: flex; align-items: center; gap: 24px; }
.stat-card-wide .stat-label { margin-bottom: 4px; }
.stat-card-wide .stat-value { font-size: 34px; }
.stat-card-row .info-icon-btn { margin-left: auto; width: 26px; height: 26px; }
.stat-card-row .info-icon-btn svg { width: 16px; height: 16px; }

/* Hero-картка вкладки «Реклама» — той самий словник, що й .home-dash-quick-publish
   на Головній (кольорова іконка-плитка + акцентна пляма у кутку), замість
   голого .stat-card-wide з контурною іконкою збоку. */
.ads-hero-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 16px;
}
.ads-hero-card::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 150px; height: 130px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
}
.ads-hero-icon {
  position: relative; width: 48px; height: 48px; min-width: 48px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px var(--accent-glow);
}
.ads-hero-icon svg { width: 23px; height: 23px; }
.ads-hero-body { position: relative; min-width: 0; }
.ads-hero-value { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.ads-hero-label { font-size: 12px; color: var(--hint); font-weight: 600; margin-top: 5px; }

/* Іконка-плитка оголошення в списку/календарі — колір за статусом
   (_AD_STATUS_TONE у app-beta.js), той самий словник градієнтів, що
   [data-tone] у картках налаштувань каналу. */
#tab-ads [data-tone="violet"] .settings-card-icon { background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff; }
#tab-ads [data-tone="green"] .settings-card-icon { background: linear-gradient(160deg, #4ade80, #16a34a); color: #fff; }
#tab-ads [data-tone="amber"] .settings-card-icon { background: linear-gradient(160deg, #fbbf24, #d97706); color: #fff; }
#tab-ads [data-tone="red"] .settings-card-icon { background: linear-gradient(160deg, #fb7185, #e11d48); color: #fff; }

/* Картка налаштувань прийому реклами по каналу — компактне групування замість
   довгого стовпця однакових підписаних полів: ціна $/₴ і категорія/знижка
   по дві колонки, реквізити оплати — окрема виділена панель. */
.ads-field-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--hint); margin-bottom: 6px;
}
.ads-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ads-two-col input, .ads-two-col select { margin-bottom: 0; }

/* Ціна розміщення — головна цифра екрана, тож і найбільша типографіка (як
   .schedule-dt-card у редакторі поста): валютний бейдж-плитка + великий
   напівжирний інпут, а не голе поле того самого розміру, що всі інші. */
.ads-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ads-price-card {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; box-sizing: border-box;
  min-width: 0; /* грід-колонка інакше НЕ стискається нижче ширини білого рядка
    підпису (white-space:nowrap) і вся картка вилазить за екран — той самий
    клас багу, що й з ".chip-compact span{flex:1}" раніше цієї сесії. */
  border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  cursor: text; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ads-price-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ads-price-currency {
  width: 32px; height: 32px; min-width: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 800; font-size: 14px;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 8px var(--accent-glow);
}
.ads-price-body { flex: 1; min-width: 0; }
.ads-price-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--hint); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ads-price-input {
  width: 100%; border: none; background: none; padding: 0; margin: 0; font-family: inherit;
  font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.ads-price-input:focus { outline: none; }
.ads-price-input::placeholder { color: var(--hint); font-weight: 700; }

/* Тумблер прийому реклами — окрема "hero"-картка замість звичайного
   settings-card рядка: більша іконка-плитка, і, головне, підказка-стан
   динамічна ("Увімкнено — видно рекламодавцям" / "Вимкнено — прихований"),
   а не один й той самий опис незалежно від стану тумблера. */
.ads-toggle-hero {
  display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 18px;
  border-radius: var(--radius-lg); border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ads-toggle-hero.is-on { border-color: rgba(52, 211, 153, 0.35); background: linear-gradient(180deg, rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0.02)); }
.ads-toggle-hero-icon {
  width: 44px; height: 44px; min-width: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px var(--accent-glow);
}
.ads-toggle-hero-icon svg { width: 22px; height: 22px; }
.ads-toggle-hero-body { flex: 1; min-width: 0; }
.ads-toggle-hero-title { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.ads-toggle-hero-hint { display: block; font-size: 12px; color: var(--hint); margin-top: 3px; line-height: 1.4; }
.ads-toggle-hero.is-on .ads-toggle-hero-hint { color: var(--success); }

/* Універсальна картка "іконка-плитка + підпис + поле" — категорія/знижка/
   реквізити оплати тепер у тому самому словнику, що ціна вище й рекомендація
   ШІ-редагування у Профілі, замість голих підписаних полів одна під одною. */
.ads-field-card {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; box-sizing: border-box;
  border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  margin-bottom: 10px; transition: border-color 0.2s ease;
}
.ads-field-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ads-field-icon {
  width: 30px; height: 30px; min-width: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ads-field-icon svg { width: 15px; height: 15px; }
/* Символ замість SVG-іконки (наприклад "%" для знижки) — той самий словник,
   що валютні бейджі "$"/"₴" у картках ціни вище, бо як маленька лінійна
   іконка символ відсотка ("○—○" по діагоналі) читався незрозуміло. */
.ads-field-icon-symbol { font-weight: 800; font-size: 14px; }
.ads-field-body { flex: 1; min-width: 0; }
.ads-field-label-sm {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--hint); margin-bottom: 2px;
}
.ads-field-input, .ads-field-textarea {
  width: 100%; border: none; background: none; padding: 0; margin: 0; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--text); box-sizing: border-box;
}
.ads-field-input::placeholder, .ads-field-textarea::placeholder { color: var(--hint); font-weight: 500; }
.ads-field-input:focus, .ads-field-textarea:focus { outline: none; }
.ads-field-textarea { resize: vertical; font-weight: 500; line-height: 1.4; min-height: 40px; }
.ads-field-select {
  width: 100%; border: none; background: none; padding: 0 20px 0 0; margin: 0; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.ads-field-select:focus { outline: none; }
.ads-field-select option { background-color: var(--card-hi, #1a1730); color: var(--text); }

/* Статистика картки оголошення (Сума/Оплата/Каналів) — компактні вертикальні
   плитки з кольоровою іконкою замість голих чисел одна під одною
   (_statChip/_devHealthChip лишаються для решти застосунку без змін). */
.ads-row-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ads-row-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 10px 4px; min-width: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border);
}
.ads-row-stat-icon {
  width: 26px; height: 26px; min-width: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ads-row-stat-icon svg { width: 13px; height: 13px; }
.ads-row-stat-value {
  font-size: 13.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ads-row-stat-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hint); }

/* Блок спору — картка з кольоровою іконкою-кружком замість жирного тексту на
   суцільній кольоровій плямі; той самий словник, що .ads-dispute-box зверху. */
.ads-dispute-box {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
}
.ads-dispute-box.is-open { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.25); }
.ads-dispute-box.is-resolved { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.25); }
.ads-dispute-icon {
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.ads-dispute-icon svg { width: 13px; height: 13px; }
.ads-dispute-box.is-open .ads-dispute-icon { background: rgba(239, 68, 68, 0.18); color: var(--danger); }
.ads-dispute-box.is-resolved .ads-dispute-icon { background: rgba(16, 185, 129, 0.18); color: var(--success); }
.ads-dispute-body { flex: 1; min-width: 0; }
.ads-dispute-title { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.ads-dispute-box.is-open .ads-dispute-title { color: var(--danger); }
.ads-dispute-box.is-resolved .ads-dispute-title { color: var(--success); }
.ads-dispute-text { display: block; font-size: 12px; color: var(--hint); margin-top: 2px; line-height: 1.4; }
.ads-payment-panel {
  margin-top: 2px; padding: 14px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border);
}
.ads-payment-panel-title {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--text); margin-bottom: 14px;
}
/* Кольорова плитка-іконка — той самий словник, що .home-dash-icon на
   Головній (градієнт + inset-підсвітка + зовнішнє світіння), а не гола
   кольорова svg-лінія — щоб розділ «Реклама» читався в тому ж візуальному
   словнику, що й решта застосунку. */
.ads-panel-icon-tile {
  width: 28px; height: 28px; min-width: 28px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 8px var(--accent-glow);
}
.ads-panel-icon-tile svg { width: 14px; height: 14px; display: block; }
.ads-payment-panel input, .ads-payment-panel textarea { margin-bottom: 12px; }
.ads-payment-panel textarea { margin-bottom: 0; }

/* Список відгуків, вбудований у картку каналу — рядок замість окремої картки:
   зірки + дата в один рядок, текст під ними, кнопка "Приховати" праворуч. */
.ads-review-row { padding: 10px 0; border-top: 1px solid var(--card-border); }
.ads-review-row:first-of-type { border-top: none; padding-top: 0; }
.ads-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ads-review-stars { color: #f5a623; display: flex; gap: 1px; flex-shrink: 0; }
.ads-review-stars svg { width: 12.5px; height: 12.5px; }
.ads-review-date { font-size: 10.5px; color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads-review-text { font-size: 12.5px; line-height: 1.5; margin-top: 5px; color: var(--text); }
.ads-review-row.is-hidden { opacity: 0.5; }
.ads-review-row [data-action="hide-review"] { margin-top: 8px; padding: 5px 11px; font-size: 11px; }


.segmented-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 16px;
  background: none; border: none; -ms-overflow-style: none; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
}
.segmented-scroll::-webkit-scrollbar { display: none; }

/* Карточка «Підпис під новиною»: плашки переносяться, нічого не обрізається */
.footer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-chip {
  min-height: 40px; padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hint); cursor: pointer; text-align: left; line-height: 1.25;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.footer-chip:active { transform: scale(0.96); }
.footer-chip.is-random { font-style: italic; }
.footer-chip.active {
  color: #fff; border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.footer-chips-sep .footer-chip { min-width: 52px; text-align: center; font-size: 15px; }
.footer-chips-sep .footer-chip.is-random { font-size: 13px; }
.footer-preview {
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.14);
}
.footer-preview-tag { display: block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint); margin-bottom: 6px; }
.footer-preview-text { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.footer-preview-text .fp-title, .footer-preview-text .fp-link { color: var(--accent); }
.footer-preview-text .fp-rnd { color: var(--hint); margin-left: 4px; }
.footer-builder-btn { margin-top: 14px; width: 100%; justify-content: center; }

/* Конструктор футера */
.fb-dialog { max-height: calc(88 * var(--vh1)); display: flex; flex-direction: column; }
.fb-body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 10px -4px 6px; padding: 0 4px; text-align: left; flex: 1; min-height: 0; }
.fb-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hint); margin: 16px 0 8px; }
.fb-section-title:first-child { margin-top: 4px; }
.fb-label { font-size: 12px; color: var(--hint); margin: 12px 0 6px; }
.fb-row { display: grid; grid-template-columns: 1fr 40px; gap: 8px; align-items: center; padding: 10px; margin-bottom: 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.fb-row .ads-field-input { width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
.fb-row .fb-kind { grid-column: 1; grid-row: 1; }
.fb-row .fb-icon-btn { grid-column: 2; grid-row: 1; }
.fb-row [data-field="s-url"] { grid-column: 1 / -1; grid-row: 2; }
.fb-row [data-field="s-label"] { grid-column: 1 / -1; grid-row: 3; }
.fb-icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: var(--hint); cursor: pointer; transition: transform 0.12s ease, color 0.15s ease, background 0.15s ease; }
.fb-icon-btn:active { transform: scale(0.92); }
.fb-icon-btn:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
.fb-row .fb-icon-btn { width: 40px; height: 40px; }
.fb-inline .settings-card-header + .fb-body, .fb-inline { padding-top: 4px; }
.tgp + .fb-mode { margin-top: 2px; }
.fb-variant { padding: 14px; margin-bottom: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.fb-variant-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fb-prev { padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, 0.14); min-height: 40px; }
.fb-add { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.fb-inline { margin: 10px 0 0; padding: 0; max-height: none; overflow: visible; }
.fb-status { min-height: 16px; margin-top: 12px; font-size: 11.5px; color: var(--hint); text-align: right; }

/* Живий предпросмотр: повідомлення каналу у стилі чату Telegram */
.tgp { position: sticky; top: 0; z-index: 6; margin-bottom: 14px; padding: 10px 10px 8px; border-radius: 18px; border: 1px solid var(--card-border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  background: radial-gradient(120% 90% at 10% 0%, rgba(120, 90, 200, 0.22), transparent 60%), linear-gradient(160deg, #1a1530, #0f1626); }
.tgp-chat { display: flex; }
.tgp-bubble { width: min(100%, 360px); background: #212a38; color: #f1f4f9; border-radius: 16px 16px 16px 5px; padding: 4px 4px 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); overflow: hidden; }
.tgp-body { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: rgba(241, 244, 249, 0.85); }
.fb-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.fb-mode .footer-chip { justify-content: center; text-align: center; font-size: 13.5px; }
.fb-ignored { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.4; color: #f5c26b;
  background: rgba(245, 194, 107, 0.1); border: 1px solid rgba(245, 194, 107, 0.25); }
[data-mode-pane][hidden], .fb-ignored[hidden] { display: none !important; }
.tgp-media { display: none; place-items: center; height: 52px; margin-bottom: 6px; border-radius: 12px 12px 6px 6px; color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(135deg, #3a4a68, #26324a 55%, #2b3d5c); }
.tgp-text { padding: 0 9px; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.tgp-footer { padding: 5px 9px 0; font-size: 13.5px; line-height: 1.38; overflow-wrap: anywhere; min-height: 22px; }
.tgp-footer .fp-title, .tgp-footer .fp-link { color: #6ab3f3; }
.tgp-footer .fp-rnd { color: rgba(255, 255, 255, 0.5); }
.tgp-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; padding: 3px 9px 0; font-size: 11.5px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.tgp-meta svg { opacity: 0.8; }
.tgp.tgp-static { position: static; z-index: auto; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 10px; box-shadow: none; }
.tgp-static .tgp-bubble { padding: 9px 4px 4px; }
.tgp-static .tgp-text { font-size: 14.5px; }
.tgp-note { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.tgp-meta span + span { margin-left: 4px; }
.tgp-switch { position: absolute; left: 16px; bottom: 11px; }
.tgp-switch .footer-chip { min-height: 24px; padding: 2px 10px; font-size: 11px; border-radius: 8px; }
.tgp-meta { min-height: 26px; }
.tgp-bubble { padding-top: 8px; }
.segmented-scroll .segment {
  flex-shrink: 0; border-radius: 999px; padding: 8px 15px; font-size: 12.5px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--hint); font-weight: 600; white-space: nowrap; transition: all 0.15s ease;
}
.segmented-scroll .segment.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.channel-subs-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.62); margin-top: 3px; }
.channel-subs-meta svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.75; }

.queue-time-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: var(--hint);
}
.pin-indicator { display: inline-flex; color: var(--accent-2); margin-left: 2px; }
.pin-indicator svg { width: 13px; height: 13px; }

.hint-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 14%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #c7d2f5;
}
.hint-banner .icon { flex-shrink: 0; margin-top: 1px; color: var(--accent-2); }

.section-label {
  font-size: 12px; color: var(--hint); margin: 34px 0 14px;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800;
}
.section-label:first-child { margin-top: 6px; }

.card-list {
  background: var(--card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 18px; border-bottom: 1px solid var(--card-border);
  font-size: 15px; font-weight: 500; line-height: 1.4;
}
.card-row:last-child { border-bottom: none; }

/* Джерела (Контент → Джерела) — картки по 2 в ряд: minmax(0, 1fr), а не
   просто 1fr, інакше довгі назви/юзернейми зі своїм nowrap диктують мінімальну
   ширину колонки і сітка вилазить за екран замість акуратного обрізання. */

.sources-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.source-tile {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 12px;
  transition: background 0.15s ease;
}
.source-tile:active { background: rgba(255, 255, 255, 0.03); }
.source-tile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Селектор .source-tile-head .channel-avatar (не просто .source-tile-avatar)
   — вища специфічність за саму .channel-avatar (44px, визначена нижче у
   файлі), інакше порядок оголошень переміг би цей менший розмір. */
.source-tile-head .channel-avatar { width: 38px; height: 38px; min-width: 38px; min-height: 38px; font-size: 13px; }
.source-tile-body { min-width: 0; flex: 1; }
.source-tile-name {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
}
.source-tile-meta {
  font-size: 11.5px; color: var(--hint); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.source-tile-action { display: flex; }
/* .rec-source-name-text лишається окремим елементом з власним
   overflow:ellipsis (а не на всьому блоці назви), інакше бейдж "офіційне"
   обрізало б разом з довгою назвою — був такий баг у першій версії. */
.rec-source-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.rec-source-verified {
  width: 13px; height: 13px; flex-shrink: 0;
}

.search-suggest-dropdown {
  position: absolute; z-index: 30; max-height: 240px; overflow-y: auto;
  background: var(--card-hi); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.search-suggest-row {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--card-border); cursor: pointer; min-width: 0;
}
.search-suggest-row:last-child { border-bottom: none; }
.search-suggest-row:active { background: rgba(255, 255, 255, 0.04); }
.search-suggest-name {
  font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.search-suggest-meta { font-size: 11.5px; color: var(--hint); flex-shrink: 0; }

.skeleton-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--card-border);
}
.skeleton-row:last-child { border-bottom: none; }
/* Був анімований біжучий блиск (bg-position shimmer) — після двох спроб
   (прибрати fade-in хвилю, знебарвити блиск) артефакт-"спалах" на композитингу
   з backdrop-filter картки все одно лишався. Замість гонитись за причиною
   далі — просто статичні плашки без руху: жодної анімації, жодного ризику. */
.skeleton-avatar {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
}
.skeleton-lines { flex: 1; min-width: 0; }
.skeleton-line {
  height: 14px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}
.skeleton-line + .skeleton-line { margin-top: 10px; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-90 { width: 90%; height: 18px; }

.trend-tooltip {
  position: fixed; transform: translate(-50%, -100%) translateY(-8px);
  background: var(--card-hi); border: 1px solid var(--card-border);
  padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  color: var(--text); white-space: pre-line; text-align: center; line-height: 1.5;
  pointer-events: none; z-index: 200;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); animation: fadeIn 0.12s ease;
}
.trend-tooltip .trend-tooltip-sub { font-weight: 500; color: var(--hint); font-size: 10.5px; }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text); flex-shrink: 0; transition: transform 0.15s ease, background 0.15s ease;
}
.icon-btn:active { transform: scale(0.92); background: rgba(255,255,255,0.1); }

.ads-calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.ads-calendar-month-label { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; text-transform: capitalize; }

.ads-calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 12px; box-shadow: var(--shadow-card);
}
.ads-calendar-weekday {
  text-align: center; font-size: 11px; font-weight: 700; color: var(--hint);
  text-transform: uppercase; padding-bottom: 6px;
}
.ads-calendar-day {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text);
}
.ads-calendar-day.is-empty { visibility: hidden; }
.ads-calendar-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ads-calendar-day.has-ads { background: rgba(255,255,255,0.05); cursor: pointer; font-weight: 800; transition: transform 0.1s ease, background 0.15s ease; }
.ads-calendar-day.has-ads:active { transform: scale(0.9); }
.ads-calendar-day.is-selected { background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
.ads-calendar-day-dots { position: absolute; bottom: 4px; display: flex; gap: 3px; }
.ads-calendar-day-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.ads-calendar-day-dot.published { background: var(--success); }
.ads-calendar-day.is-selected .ads-calendar-day-dot { background: #fff; }
@media (hover: hover) {
  .ads-calendar-day.has-ads:not(.is-selected):hover { background: rgba(255, 255, 255, 0.1); }
}
/* БАГ 2026-09-27 ("в розділі календаря переробити сам календар") —
   .ads-calendar-day мав aspect-ratio:1, тож висота клітинки завжди
   дорівнювала ширині ЇЇ КОЛОНКИ (grid repeat(7,1fr) від повної ширини
   .content). На мобільному колонка ~45px — акуратний квадратик; на ПК
   .content до 1100px — та сама колонка розтягується до ~150px, і клітинка
   стає велетенським порожнім квадратом із самотньою цифрою вгорі (звідси й
   відчуття "порожнього, недороблено" календаря на скріншоті). Обмежуємо
   ШИРИНУ всього календаря на ПК — той самий компактний, акуратний розмір
   клітинки, що й на мобільному, замість розтягування на всю робочу область
   (календар — не дашборд-картка, компактний datepicker-вигляд тут доречний
   навіть на широкому екрані). */
body.desktop-platform .ads-calendar-grid { max-width: 560px; margin: 0 auto; }

.channel-card, .source-card {
  padding: 22px 20px; border-bottom: 1px solid var(--card-border);
  transition: background 0.15s ease; overflow: hidden;
}
.channel-card:active, .source-card:active { background: rgba(255, 255, 255, 0.03); }
.channel-card:last-child, .source-card:last-child { border-bottom: none; }
.swipe-wrap:last-child .channel-card { border-bottom: none; }

.channel-title, .source-title {
  font-size: 18px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.015em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.channel-avatar {
  width: calc(44px * var(--ui-icon-scale, 1)); height: calc(44px * var(--ui-icon-scale, 1));
  min-width: calc(44px * var(--ui-icon-scale, 1)); min-height: calc(44px * var(--ui-icon-scale, 1)); aspect-ratio: 1 / 1;
  border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; overflow: hidden;
}
.channel-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 50%; }

.badge-inactive {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--danger); font-size: 11.5px; font-weight: 700;
  background: var(--danger-bg); padding: 3px 8px; border-radius: 999px;
}

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 10px 3px 5px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap; line-height: 1.4;
}
.role-badge.editor { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.role-badge.moderator { color: var(--warning); background: var(--warning-bg); }
.role-badge.owner { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.role-badge-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* "Піар-менеджер" (can_manage_ads) — окрема, навмисно яскраво-червона позначка,
   не плутати з .pill.danger/.chip.miss (ті сигналять про проблему, ця — просто
   про наявність точкового права на розділ реклами; можна поєднувати з будь-якою
   роллю, тож рендериться ПОРУЧ із role-badge, а не замість нього). */
.badge-pr {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 800;
  letter-spacing: 0.03em; padding: 3px 7px; border-radius: 999px;
  color: #fff; background: var(--danger); line-height: 1.3;
}

.modal-divider {
  border-top: 1px solid var(--card-border);
  margin: 20px 0 4px;
}

.danger-zone {
  margin-top: 22px;
  padding: 14px;
  background: rgba(240, 66, 106, 0.08);
  border: 1px solid rgba(240, 66, 106, 0.3);
  border-radius: var(--radius-lg);
}
.danger-zone .section-label { color: var(--danger); margin-top: 0; }

.file-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--card-border);
  color: var(--text); font-size: 13px; font-weight: 600; text-align: center;
}
.file-upload-btn:active { background: rgba(255, 255, 255, 0.1); }
/* Дропзона водяного знаку (лише .file-dropzone — нових елементів у продакшн
   app.js немає, тож на прод-панель це доповнення жодним чином не впливає). */
.file-dropzone { flex-direction: column; padding: 18px 14px; gap: 4px; transition: border-color 0.15s ease, background 0.15s ease; }
.file-dropzone.is-dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.pill {
  border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  padding: 9px 15px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit; display: inline-flex; align-items: center; gap: 6px;
}

.back-btn {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-pill);
  padding: 8px 16px 8px 11px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  color: var(--accent-2);
  transition: transform 0.15s ease, background 0.2s ease;
  font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
}
.back-btn:active { transform: scale(0.96); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.pill:active { transform: scale(0.96); }
.pill.on {
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.1) 100%);
  color: var(--success); border-color: rgba(16, 185, 129, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(16, 185, 129, 0.18);
}
.pill.off { background: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%); color: var(--hint); }
.pill.danger {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.1) 100%);
  color: var(--danger); border-color: rgba(239, 68, 68, 0.35);
}

/* "Піар-менеджер" сидить У ТІЙ САМІЙ .segmented-стрічці, що й Editor/Moderator
   (той самий .segment), але це НЕЗАЛЕЖНИЙ прапорець, не третій ексклюзивний
   варіант — тож активний стан фарбуємо червоним (не фіолетовим .segment.active),
   щоб візуально читалось "це інша вісь вибору", і клік по ньому НЕ знімає
   активність з Editor/Moderator (керується в JS, не тут). */
.segment.segment-pr.active {
  background: var(--danger); color: #fff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.segment-pr { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.segment-pr svg { width: 14px; height: 14px; flex-shrink: 0; }

.keywords-row { display: flex; gap: 6px; margin-top: 10px; }

input[type="text"], input[type="number"], input[type="password"], textarea {
  width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  padding: 12px 14px; font-size: 14px; background: rgba(255, 255, 255, 0.04);
  color: var(--text); margin-bottom: 10px; font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent);
}
input[type="text"]::placeholder, input[type="number"]::placeholder, textarea::placeholder { color: var(--hint); }

/* Прибираємо системні стрілки лічильника — вони не пасують до мінімалістичного
   стилю решти полів і не потрібні для сум/годин (тут завжди зручніше ввести
   число з клавіатури, ніж клікати по крихітних стрілках). */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* select.keyword-input (напр. вибір тематики каналу для реклами) раніше не
   мав ЖОДНОГО власного правила — .keyword-input стилі йшли лише через теги
   input[type=...], яких <select> не матче, тож рендерився повністю нативним
   віджетом (синій текст, білий фон) поверх темної картки. */
select.keyword-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  padding: 12px 40px 12px 14px; font-size: 14px; background-color: rgba(255, 255, 255, 0.04);
  color: var(--text); margin-bottom: 10px; font-family: inherit; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
select.keyword-input:focus { outline: none; border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
select.keyword-input option { background-color: var(--card-hi, #1a1730); color: var(--text); }

/* Нативна кнопка вибору файлу дуже випадала зі стилю (сірий системний віджет
   на тлі темної панелі) — обгортку робимо як решту полів, саму кнопку "Обрати
   файл" — як звичайний акцентний pill, замість системного сірого прямокутника. */
input[type="file"] {
  width: 100%; box-sizing: border-box; border-radius: var(--radius-sm); border: 1px dashed var(--card-border);
  padding: 10px 12px; font-size: 12.5px; background: rgba(255, 255, 255, 0.04);
  color: var(--hint); margin-bottom: 10px; font-family: inherit;
}
input[type="file"]::file-selector-button {
  border: none; border-radius: 999px; padding: 8px 14px; margin-right: 10px;
  background: var(--accent); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background 0.15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--accent-2); }

/* Зверху теж потрібен відступ, не лише знизу — без нього картка впритул
   стикалась із перемикачем "Запланувати" над нею, і його фіолетове
   світіння візуально наповзало прямо на картку. */
.schedule-datetime-row { margin: 14px 0; }
/* Картка з іконкою замість голого поля вводу — той самий словник кольорових
   плиток, що й решта застосунку, а не самотній прямокутник-інпут. */
.schedule-dt-card {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
}
.schedule-dt-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* Помірний розмір значка (як інші плитки-іконки в застосунку), а не на всю
   висоту рядка — і по центру самого рядка, щоб не "налипав" на сусідній
   вміст (нативний календар-пікер спливає ПІД цією карткою). */
.schedule-dt-ico {
  align-self: center; width: 32px; height: 32px; min-width: 32px; border-radius: 9px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent-2, #c084fc), var(--accent-deep, #9333ea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 8px var(--accent-glow);
}
.schedule-dt-ico svg { width: 16px; height: 16px; }
.schedule-dt-body { flex: 1; min-width: 0; }
.schedule-dt-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--hint); margin-bottom: 3px;
}
.schedule-datetime-input {
  width: 100%; box-sizing: border-box; border: none; padding: 0; margin: 0;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  background: none; color: var(--text); font-family: inherit; color-scheme: dark;
  white-space: nowrap; overflow: hidden; cursor: pointer;
}
.schedule-datetime-input:focus { outline: none; }
/* color-scheme:dark вище лише підказує браузеру тему СПЛИВНОГО календаря/
   годинника — саму іконку виклику пікера (WebKit) це не чіпає, вона й далі
   темна й губиться на темному тлі поля. Освітлюємо іконку окремо. */
.schedule-datetime-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6); cursor: pointer; padding: 4px; margin-left: 4px;
}

.primary-btn {
  width: 100%; padding: 17px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; font-size: 15.5px; font-weight: 800; letter-spacing: -0.005em; cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-glow-btn), inset 0 1.5px 0 rgba(255, 255, 255, 0.22), inset 0 -8px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.primary-btn:active { transform: scale(0.98); box-shadow: 0 4px 14px var(--accent-glow); }
.primary-btn-glow {
  background: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.primary-btn-glow:active { box-shadow: 0 2px 8px var(--accent-glow); }

.muted { color: var(--hint); font-size: 12.5px; margin-top: 8px; font-weight: 500; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 45;
  display: flex; align-items: stretch; gap: 0; --nav-i: 0;
  padding: 8px 10px max(10px, calc(env(safe-area-inset-bottom) - 8px));
  background: linear-gradient(180deg, rgba(20, 16, 34, 0.9), rgba(12, 9, 22, 0.96));
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0;
}
/* М'яке розчинення контенту над панеллю замість різкого зрізу */
.bottom-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}
/* Проста тонка лінія-індикатор над активною вкладкою; ковзає пружинною анімацією (--nav-i). */
.bottom-nav::before {
  content: ""; position: absolute; top: -1px; left: 10px; height: 2px; pointer-events: none;
  width: calc((100% - 20px) / 4);
  background: linear-gradient(90deg, transparent 20%, var(--accent-2) 20%, var(--accent-2) 80%, transparent 80%);
  transform: translateX(calc(var(--nav-i) * 100%));
  transition: transform 0.5s cubic-bezier(.32, 1.25, .5, 1);
}
.nav-btn {
  flex: 1 1 0; min-width: 0; height: 52px; position: relative; padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; border-radius: 12px; color: #fff;
  font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color 0.3s ease, transform 0.2s ease;
}
.nav-btn .icon { width: 24px; height: 24px; transition: transform 0.45s cubic-bezier(.34, 1.7, .5, 1), color 0.3s ease, filter 0.3s ease; }
.nav-btn:active { transform: scale(0.94); }
.nav-btn.active .icon { color: var(--accent-2); transform: translateY(-1px) scale(1.08); }
.nav-btn.active { color: var(--accent-2); }
/* старий індикатор-риска з спільного style.css у бета-навігації не потрібен */
.nav-btn::before, .nav-btn::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .bottom-nav::before, .nav-btn, .nav-btn .icon { transition: none; }
}

.segmented {
  display: flex; background: var(--card); border-radius: var(--radius-md);
  padding: 4px; gap: 4px; border: 1px solid var(--card-border);
}
.segment {
  flex: 1; background: none; border: none; color: var(--hint);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 4px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease;
}
.segment.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; box-shadow: 0 4px 14px var(--accent-glow);
}
.segment-flag { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; white-space: nowrap; padding-left: 2px; padding-right: 2px; }
.segment-flag-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.submission-card { padding: var(--ui-row-padding-v-xl, 20px) 18px; border-bottom: 1px solid var(--card-border); }

/* Картка черги — окрема заокруглена картка на кожен елемент (як у рекламі),
   без суцільного списку з роздільниками, як раніше. */
.queue-card.submission-card {
  border-bottom: none; border-radius: var(--radius-lg);
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  margin-bottom: 12px; padding: 17px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.queue-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.queue-card-title-row .submission-title-clip { margin-bottom: 0; flex: 1; min-width: 0; }
.queue-card-title-row .status-badge { flex-shrink: 0; }
.submission-card:last-child { border-bottom: none; }

.card-relative { position: relative; }

.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-badge.draft { color: var(--hint); background: rgba(255, 255, 255, 0.08); }
.status-badge.pending { color: var(--warning); background: var(--warning-bg); }
.status-badge.approved { color: var(--success); background: var(--success-bg); }
.status-badge.ticket-open { color: var(--warning); background: var(--warning-bg); }
.status-badge.ticket-answered { color: var(--accent-2); background: var(--accent-glow); }
.status-badge.ticket-closed { color: var(--hint); background: rgba(255, 255, 255, 0.08); }
/* Критичний алерт (2026-09-28, ТЗ каскадного тегування) — суцільна заливка,
   помітно сильніша за м'який urgentBadge (danger-bg/danger), і SVG-іконка
   замість крапки-дота (стандарт WebApp-хрому — без емодзі-іконок). */
.status-badge.critical-alert-badge { color: #fff; background: var(--danger); }
.status-badge.critical-alert-badge::before { content: none; }
.status-badge.critical-alert-badge svg { stroke: currentColor; }

/* Каскадне тегування, Фільтр 2 (2026-09-28) — рішення користувача "гарний і
   зручний дизайн і кольори тегів, як от ці кнопочки" (референс: пігулка з
   кольоровим бордером/світінням, за зразком .pill.danger "Забанити"), плюс
   пізніший запит "наведи красату": заголовки категорій отримали кольорову
   іконку-бейдж (той самий візуальний словник, що .settings-card-icon по
   всьому застосунку) і двоядкову типографію (назва + лічильник підрядком)
   замість плоскої крапки й одного рядка тексту. Кожен елемент бере колір
   категорії через --cascade-color (CSS-змінна замість купи дубльованих
   класів per-колір, той самий підхід, що й .segment-pr.active вище). */
.cascade-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--hint); margin: 18px 3px 9px;
}
.cascade-cat-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; padding: 8px 12px 8px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--card-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cascade-cat-header:active { background: rgba(255, 255, 255, 0.08); transform: scale(0.99); }
.cascade-cat-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cascade-cat-icon {
  width: 32px; height: 32px; min-width: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cascade-color, var(--accent)) 16%, transparent);
  color: var(--cascade-color, var(--accent));
}
.cascade-cat-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.cascade-cat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.cascade-cat-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.cascade-cat-count { color: var(--hint); font-weight: 600; font-size: 11.5px; }
.cascade-cat-chevron { display: inline-flex; color: var(--hint); flex-shrink: 0; transition: transform 0.2s ease; }
.cascade-cat-chevron svg { width: 15px; height: 15px; }
.cascade-cat { animation: cascadeCatIn 0.2s ease; }
@keyframes cascadeCatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Чіпи — трохи компактніші, ніж базовий .pill (рішення користувача
   2026-09-28, "чуть поменьше"): менший padding/шрифт, коротший підпис
   (лише перша мовна форма групи — renderGrid/renderKeywords2 у JS). */
.cascade-suggestion-chip, .cascade-tag-chip {
  border-color: color-mix(in srgb, var(--cascade-color, var(--accent)) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cascade-color, var(--accent)) 22%, transparent) 0%, color-mix(in srgb, var(--cascade-color, var(--accent)) 9%, transparent) 100%);
  color: var(--cascade-color, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 10px color-mix(in srgb, var(--cascade-color, var(--accent)) 18%, transparent);
  font-size: 12px; padding: 6px 10px; gap: 5px;
}
.cascade-suggestion-chip svg, .cascade-tag-chip svg { stroke: currentColor; width: 12px; height: 12px; flex-shrink: 0; }
.cascade-tag-chip { padding: 5px 5px 5px 11px; gap: 6px; }
.cascade-tag-chip.cascade-tag-chip-plain {
  border-color: var(--card-border); background: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: none;
}
.cascade-tag-chip .channel-chip-check {
  background: color-mix(in srgb, var(--cascade-color, rgba(255, 255, 255, 0.12)) 30%, transparent);
  border-radius: 999px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cascade-tag-chip .channel-chip-check svg { width: 10px; height: 10px; stroke: var(--cascade-color, var(--text)); }

/* Екран категорії всередині вікна Фільтра 2 (2026-09-28) — рішення
   користувача "не удобно когда в окне фильтра открывается окно категории":
   замість другого modal-overlay поверх першого (стек вікон) тепер це ОДНЕ
   вікно, що підміняє свій вміст (renderMain ⇄ renderCategory) зі стрілкою
   "назад" у шапці, той самий підхід, що switchTab у профілі. */
.cascade-picker-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.cascade-picker-chip { cursor: pointer; }
.cascade-picker-chip.checked {
  background: var(--cascade-color, var(--accent)); color: #06080e; border-color: transparent;
}
.cascade-picker-chip.checked svg { stroke: #06080e; }

/* ---------- Підтримка: список тікетів + чат-тред (композер, тех-панель) ----------
   Той самий візуальний словник, що й .list-row/.settings-card-icon по всьому
   застосунку, лише додає чат-специфічні бульбашки — окремого патерну
   листування раніше в кодовій базі не було. */
.ticket-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--card-border); cursor: pointer;
  transition: background 0.15s ease;
}
.ticket-row:last-child { border-bottom: none; }
.ticket-row:active { background: rgba(255, 255, 255, 0.04); }
.ticket-row-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ticket-row-icon svg { width: 18px; height: 18px; }
.ticket-row-body { flex: 1; min-width: 0; }
.ticket-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-row-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ticket-row-preview {
  font-size: 12.5px; color: var(--hint); margin-top: 3px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ticket-row-time { font-size: 10.5px; color: var(--hint); white-space: nowrap; }
.ticket-row-chevron { color: var(--hint); flex-shrink: 0; width: 16px; height: 16px; opacity: 0.6; }

.ticket-detail-head {
  display: flex; align-items: center; gap: 12px; padding-bottom: 14px;
  border-bottom: 1px solid var(--card-border); margin-bottom: 14px;
}
.ticket-detail-head-body { flex: 1; min-width: 0; }
.ticket-detail-head-name { font-size: 14px; font-weight: 700; }
.ticket-detail-head-sub { font-size: 11.5px; color: var(--hint); margin-top: 1px; }

/* ---------- Тех.розділ → Підтримка: двоколонкова консоль на ПК ----------
   Рішення користувача 2026-09-27 ("чат в тех панелі ужасно виглядить і не
   зручно для спец адміна") — стара верстка була мобільною "drill-down"-
   карткою (список ЗАМІНЮЄТЬСЯ деталями тікета в тому самому контейнері),
   просто розтягнутою на всю ширину: звідси відчуття порожньої, недороблено
   сторінки на широкому екрані — деталі тікета не мали ні власної картки-
   рамки, ні фіксованої висоти, ні списку поруч (для переходу до іншого
   тікета доводилось щоразу тиснути "Назад"). На ПК тепер список і деталі —
   ДВІ окремі, завжди видимі колонки (як у Zendesk/Intercom): вибір тікета
   зліва одразу оновлює праву панель, без "Назад". На мобільному лишається
   ТОЧНІСІНЬКО той самий однопанельний перехід, що й був — .dev-support-
   detail-open (app-beta.js) просто ховає список і показує деталі. */
.dev-support-detail-pane { display: none; }
.dev-support-panel.dev-support-detail-open .dev-support-list-pane { display: none; }
.dev-support-panel.dev-support-detail-open .dev-support-detail-pane { display: block; }
.dev-support-detail-placeholder { display: none; }

/* БАГ 2026-09-27 (скріншот користувача — список "з'їв" усю ширину, права
   панель стиснута в непомітну смужку скраю): body.desktop-platform НЕ
   гарантує широкий viewport — Telegram Desktop показує Mini App у вікні,
   яке адмін МОЖЕ звузити (або "невідома" платформа на межі 900px-фолбека).
   Фіксована колонка 320px+деталі 1fr на вузькому вікні саме так і ламається.
   Тому двоколонкова сітка вмикається лише ДОДАТКОВО за min-width — на
   вузькому "десктопі" сайдбар лишається, а ця вкладка чесно деградує до
   того самого одноколонкового list/detail-перемикання, що й на телефоні
   (правила вище, без гейту), замість силуваної розтягнутої верстки. Поріг
   900px — той самий, що вже використовує app-beta.js для fallback "невідомих"
   платформ (узгоджений з ним, а не довільне нове число). */
@media (min-width: 900px) {
  body.desktop-platform .dev-support-panel {
    display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch;
  }
  /* .card-list за замовчуванням overflow:hidden (для акуратних заокруглених
     кутів) — тут перебиваємо на auto, бо це вже прокручувана колонка
     списку, а не картка фіксованого розміру під власний вміст. */
  body.desktop-platform .dev-support-list-pane { display: block !important; overflow-y: auto; }
  body.desktop-platform .dev-support-detail-pane {
    display: flex !important; flex-direction: column;
    background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
    padding: 18px; box-sizing: border-box;
  }
  /* min-height замість жорсткого height — узгоджено з тим, що детальна
     панель, а не 100vh-математика (та вже раз ламалась цього тижня на
     .content): фіксована висота "консолі" в vh, обидві колонки тягнуться до
     неї через grid align-items:stretch вище, самі прокручуються всередині. */
  body.desktop-platform .dev-support-list-pane,
  body.desktop-platform .dev-support-detail-pane { min-height: calc(66 * var(--vh1)); max-height: calc(66 * var(--vh1)); }
  body.desktop-platform .dev-support-detail-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; flex: 1; color: var(--hint); font-size: 13px; font-weight: 600; text-align: center;
  }
  body.desktop-platform .dev-support-detail-placeholder svg { width: 32px; height: 32px; opacity: 0.45; }
  /* Обрана в списку картка — видима одразу поруч права панель, тож
     позначаємо, ЯКИЙ саме тікет зараз відкрито (app-beta.js додає .active). */
  body.desktop-platform .ticket-row.active { background: var(--accent-glow); }
  /* Розмітка деталей (app-beta.js: _renderDevSupportDetail) — той самий HTML
     для мобільного й розширеного вигляду, лише тут він живе всередині
     фіксованої за висотою .dev-support-detail-pane й мусить сам стати
     flex-колонкою на всю її висоту, з чат-тредом, що тягнеться (flex:1) і
     прокручується всередині ЦІЄЇ колонки, а не всієї сторінки. */
  body.desktop-platform .dev-support-detail-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  body.desktop-platform .dev-support-detail-inner #dev-support-thread {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
  }
  /* "Назад до списку" тут не потрібен — список і так завжди видимий зліва,
     клік по іншому рядку одразу перемикає праву панель. */
  body.desktop-platform #dev-support-back-to-list { display: none; }
  body.desktop-platform .dev-support-detail-actions { justify-content: flex-end; }
}
/* Заголовок рядка тікета — категорія + ім'я(+юзернейм) в одному рядку без
   обмеження висоти розтягувався на 3 рядки для довших імен (скріншот
   користувача: "Видалення даних · Адмін Rezrvu (@rezer_ua_admin)"), заважав
   переглянути кілька тікетів одразу. 2 рядки з "…" замість безмежного
   розтягування — той самий -webkit-line-clamp, що й уже є в проєкті для
   інших багаторядкових обрізань тексту. */
.ticket-row-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Постійна стрічка (не блок, що займає весь екран) — один рядок з
   горизонтальним скролом, як .segmented-scroll: видно завжди (і в
   порожньому стані, і під час активної розмови), займає рівно стільки
   місця, скільки один чіп заввишки. */
.faq-chip-row {
  display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 10px;
  overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 4px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100%);
}
.faq-chip-row::-webkit-scrollbar { display: none; }
.faq-chip {
  flex-shrink: 0;
  border: 1.5px solid var(--accent-2); color: var(--accent-2); background: transparent;
  border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; font-family: inherit;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faq-chip:active { transform: scale(0.95); background: var(--accent-glow); }

.chat-thread {
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(46 * var(--vh1)); overflow-y: auto; padding: 2px 2px 4px;
}
.chat-bubble-group { display: flex; flex-direction: column; gap: 3px; max-width: 82%; }
/* "Ви" — праворуч і кольором акценту, "Підтримка" — ліворуч, нейтрально:
   той самий бік/колір, що й у самому Telegram (звична конвенція, а не
   довільний вибір) — раніше було навпаки, що читалось як "не той бік". */
.chat-bubble-group.from-user { align-self: flex-end; align-items: flex-end; }
.chat-bubble-group.from-support { align-self: flex-start; align-items: flex-start; }
/* Привітання-заглушка перед першим повідомленням — нейтральне системне
   сповіщення по центру (не "від когось"), а не звичайна бульбашка чату. */
.chat-bubble-group.centered { align-self: center; align-items: center; max-width: 92%; }
.chat-bubble-sender { font-size: 10px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: .05em; padding: 0 3px; }
.chat-bubble {
  padding: 9px 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap;
  word-break: break-word; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  min-width: 40px; min-height: 18px; box-sizing: border-box; overflow: hidden;
}
.chat-bubble.from-support {
  background: var(--card-hi); border: 1px solid var(--card-border); color: var(--text);
  border-radius: 4px 16px 16px 16px;
}
.chat-bubble.from-user {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; border-radius: 16px 4px 16px 16px;
}
/* Той самий .chat-bubble-group/.chat-bubble рендерить обидва боки листування
   (заявник у своєму чаті ТА суперадмін у тех-панелі) — "мій бік" залежить
   від того, ХТО дивиться, а не від fixed from-user/from-support. У чаті
   заявника "я" = user (праворуч/акцент), у тех-панелі "я" = admin (це вже
   суперадмін відповідає) — .as-admin на контейнері дзеркалить розташування
   й колір, не чіпаючи саму розмітку бульбашок. */
.chat-thread.as-admin .chat-bubble-group.from-support { align-self: flex-end; align-items: flex-end; }
.chat-thread.as-admin .chat-bubble-group.from-user { align-self: flex-start; align-items: flex-start; }
.chat-thread.as-admin .chat-bubble.from-support {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; border-radius: 16px 4px 16px 16px;
}
.chat-thread.as-admin .chat-bubble.from-user {
  background: var(--card-hi); border: 1px solid var(--card-border); color: var(--text);
  border-radius: 4px 16px 16px 16px;
}
/* Повідомлення ЛИШЕ з вкладенням (без тексту) — фото/відео впритул до країв
   бульбашки (без внутрішнього відступу), як у більшості месенджерів, а не
   з рамкою кольору бульбашки навколо картинки. */
.chat-bubble.media-only { padding: 0; min-width: 0; min-height: 0; line-height: 0; }
.chat-bubble-time { font-size: 10px; color: var(--hint); padding: 0 3px; }
.chat-bubble-attachment { margin-top: 7px; }
.chat-bubble.media-only .chat-bubble-attachment { margin-top: 0; }
/* Компактна мініатюра, а не мало не повноекранна картинка — вкладення в чаті
   мають лишатись довідковими скріншотами, не домінувати над листуванням.
   object-fit:cover обрізає, а не стискає високі портретні скріни в тонку
   смужку на всю висоту. */
.chat-bubble-attachment img, .chat-bubble-attachment video {
  display: block; width: 180px; height: 150px; max-width: 100%; object-fit: cover;
}
.chat-bubble-attachment-loading {
  height: 150px; width: 180px; max-width: 100%; border-radius: 10px; margin-top: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, var(--accent-glow) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 400% 100%; animation: skeletonShimmer 1.6s ease-in-out infinite;
}
.chat-bubble.media-only .chat-bubble-attachment-loading { margin-top: 0; border-radius: 0; }

.chat-composer {
  display: flex; align-items: flex-end; gap: 8px; margin-top: 12px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 6px 6px 6px 14px;
}
.chat-composer textarea {
  flex: 1; border: none; background: none; resize: none; padding: 8px 0;
  font-size: 13.5px; line-height: 1.4; max-height: 90px; margin: 0; border-radius: 0;
}
.chat-composer textarea:focus { border: none; background: none; box-shadow: none; }
.chat-composer-send {
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: none; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; box-shadow: 0 4px 14px var(--accent-glow); transition: transform 0.15s ease;
}
.chat-composer-send:active { transform: scale(0.9); }
.chat-composer-send svg { width: 16px; height: 16px; }
.chat-composer-attach-chip {
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--hint);
  background: var(--card-hi); border: 1px solid var(--card-border); border-radius: 999px;
  padding: 5px 10px; margin-top: 8px; width: fit-content;
}
.chat-composer-attach-chip svg { width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; }

.swipe-wrap { position: relative; }

.swipe-delete-bg {
  position: absolute; inset: 0; background: var(--danger); border-radius: var(--radius-md, 14px);
  display: flex; align-items: center; justify-content: flex-end; padding-right: 24px;
  color: #fff; opacity: 0;
}

.swipe-content {
  position: relative; background: var(--card);
  transition: transform .25s ease;
  touch-action: pan-y;
  user-select: none;
}
.swipe-content.swiping { transition: none; }
.swipe-content.category-dragging {
  transition: none; position: relative; z-index: 50;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); border-radius: var(--radius-md, 14px);
}

/* ---------- Дві спокійні "фінальні" анімації видалення свайпом вліво ----------
   Без поворотів, ривків і спалахів (за прямим фідбеком) — лише плавний
   ease-out, різні лише за напрямком/величиною руху, щоб відчуття "видалення
   новини" і "видалення каналу" все ж трохи відрізнялись, не зливаючись в одне. */
/* "toss" — новина в черзі: спокійно виїжджає рівно вліво за край екрана. */
.swipe-content.swipe-toss {
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
  will-change: transform, opacity;
}
/* "dissolve" — канал на Головній: замість виїзду за край — рівномірно тане й
   стискається НА МІСЦІ (від власного центру, без зсуву вбік чи "притягування"
   до кошика) — читається як власне зникнення картки, а не політ. */
.swipe-content.swipe-dissolve {
  transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .32s ease;
  will-change: transform, opacity;
}
.swipe-wrap-collapsing { transition: max-height .22s ease, opacity .22s ease, margin .22s ease; }

/* Іконка кошика — лише м'яка поява (вже керується opacity під час самого
   тягнення пальцем нижче) і один тихий пульс без зміни кольору й обертання. */
.swipe-delete-bg { transition: opacity .12s ease; }
.swipe-delete-bg svg { display: block; transition: transform .22s ease; }
.swipe-wrap:has(.swipe-toss) .swipe-delete-bg svg,
.swipe-wrap:has(.swipe-dissolve) .swipe-delete-bg svg { animation: swipeBgPulse .3s ease; }
@keyframes swipeBgPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* transform лишається в переліку transition (щоб JS дочекався саме його
     transitionend і почав колапс обгортки), просто дуже коротким. */
  .swipe-content.swipe-toss, .swipe-content.swipe-dissolve { transition: transform .12s linear, opacity .12s ease; }
  .swipe-delete-bg svg { animation: none !important; }
  .swipe-wrap-collapsing { transition: max-height .18s ease, opacity .18s ease, margin .18s ease; }
}

.submission-title-clip {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.avatar-stack { display: flex; align-items: center; margin: 5px 0 4px; }
.avatar-stack-item {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex; align-items: center; justify-content: center; color: #fff;
  margin-left: -8px; box-sizing: border-box; border: 2px solid var(--card);
}
.avatar-stack-item:first-child { margin-left: 0; }
.avatar-stack-item.delivered { border-color: var(--success); }
.avatar-stack-item.error { border-color: var(--danger); }
.avatar-stack-item.pending { border-color: var(--warning); }

.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.card-actions .btn-primary, .card-actions .btn-secondary { min-width: 110px; }
.card-actions .btn-primary {
  flex: 1; border: none; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.card-actions .btn-primary:active { transform: scale(0.98); }
.card-actions .btn-secondary {
  flex: 1; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--hint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.card-actions .btn-secondary:active { transform: scale(0.98); }

/* "Виставити терміново" — той самий вигляд, що й інші кнопки меню редагування
   («Редагувати» / «Опублікувати зараз»), без окремого виділення кольором
   (п.3.2 ТЗ: жодного яскравого/контрастного акценту, єдиний стиль). */
.btn-urgent {
  flex: 1; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--hint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font-family: inherit; min-width: 110px; transition: transform 0.15s ease;
}
.btn-urgent:active { transform: scale(0.98); }

.submission-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.submission-author { font-size: 14.5px; font-weight: 800; }
.submission-meta { font-size: 12px; color: var(--hint); }

.submission-body { font-size: 14.5px; line-height: 1.55; margin-bottom: 10px; white-space: pre-wrap; }
.submission-media { width: 100%; border-radius: var(--radius-sm); margin-bottom: 10px; display: block; max-height: 260px; object-fit: cover; }

.submission-edit-area {
  width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--card-border);
  padding: 12px 14px; font-size: 14px; background: rgba(255,255,255,0.04); color: var(--text);
  font-family: inherit; margin-bottom: 10px; resize: vertical; min-height: 80px;
}

/* Справжній WYSIWYG (contenteditable) для редактора поста — жирний/курсив/спойлер
   і т.д. видно одразу як реальне форматування, а не як сирі <b>/<i> теги. */
.rich-editor {
  line-height: 1.5; white-space: pre-wrap; word-break: break-word; outline: none; cursor: text;
}
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--hint); pointer-events: none; }
.rich-editor tg-spoiler {
  background: rgba(255, 255, 255, 0.16); color: transparent; border-radius: 4px; cursor: pointer;
}
.rich-editor tg-spoiler:hover { background: rgba(255, 255, 255, 0.24); }

.submission-summary { display: flex; gap: 20px; align-items: center; cursor: pointer; }
.submission-thumb {
  width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: var(--hint);
}
.submission-thumb img, .submission-thumb video { width: 100%; height: 100%; object-fit: cover; }
.submission-summary-body { flex: 1; min-width: 0; }
.submission-title { font-size: 15.5px; font-weight: 800; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-chevron { color: var(--hint); flex-shrink: 0; opacity: 0.55; width: 18px; height: 18px; }

.bulk-checkbox {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.bulk-checkbox svg { width: 14px; height: 14px; stroke: #fff; }
.bulk-checkbox.checked { background: var(--accent); border-color: var(--accent); }

/* Модальный редактор */
/* Рішення користувача 2026-09-27 ("фон размитий повинен бути у вікні") —
   .modal-overlay використовував той самий --glass-blur: blur(8px), що й
   тонкі скляні картки по всьому застосунку, — за 72%-опаковим темним
   заливанням цей блюр майже не читався (фон під модалкою виглядав просто
   затемненим, не розмитим). Свій, помітно сильніший блюр саме для
   підкладки під модалками (не чіпаємо спільну --glass-blur — вона й далі
   лишається легкою для карток). */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 8, 14, 0.72);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
/* БАГ 2026-09-28 ("на пк не работає вікно вибору мови") — #profile-lang-row
   (усередині #appearance-settings-card) відкриває #language-modal і на ПК,
   коли #appearance-settings-card портально живе в #desktop-settings-modal
   (index-beta.html). Обидва — .modal-overlay з ОДНАКОВИМ z-index:100, тож
   при одночасному display:flex виграє порядок у DOM — #desktop-settings-modal
   стоїть ПІЗНІШЕ в розмітці й повністю перекривав #language-modal (клік ніби
   нічого не робив — модалка відкривалась, просто невидимо під сплячим
   вікном налаштувань). #language-modal — свідомо "піднятий" вище базового
   рівня, бо це єдиний пікер, який може відкриватись ПОВЕРХ іншої модалки. */
#language-modal { z-index: 120; }
.modal-sheet {
  width: 100%; max-width: 480px; max-height: calc(92 * var(--vh1)); overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
  background: var(--bg); border: 1px solid var(--card-border); border-bottom: none;
  border-radius: 24px 24px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5), 0 -1px 0 var(--card-border-hi);
  animation: slideUp 0.25s ease;
}
.modal-sheet::-webkit-scrollbar { display: none; }
/* Ручка bottom sheet — суто візуальна афорданс-підказка "тягни вниз, щоб
   закрити"; сам жест повішений на .modal-header через attachSheetDragToClose. */
.modal-sheet::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); margin: -4px auto 14px;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* На планшетах/десктопі (від 768px) шторки знизу поводяться недоречно —
   немає touch-жесту "потягнути вниз", а низ екрана далеко від контенту.
   Той самий .modal-overlay/.modal-sheet перетворюється на класичну
   центровану модалку без зміни розмітки чи JS. */
@media (min-width: 768px) {
  .modal-overlay { align-items: center; padding: 24px; }
  .modal-sheet {
    max-width: 600px; max-height: calc(85 * var(--vh1)); border-radius: var(--radius-lg);
    padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
    animation: modalFadeIn 0.2s ease;
  }
  .modal-sheet::before { display: none; }
}
@keyframes modalFadeIn { from { transform: translateY(0) scale(0.97); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17.5px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.01em;
}
.modal-close { background: rgba(255,255,255,0.06); border: none; border-radius: 10px;
  padding: 6px; cursor: pointer; color: var(--text); display: flex; }

/* Вікно "Гарячі клавіші" (лише ПК, відкривається клавішею "?") — app-beta.js,
   _openHotkeyHelp. Центроване, не bottom-sheet як мобільні модалки. */
#hotkey-help-modal { align-items: center; z-index: 130; }
.hotkey-sheet { max-width: 420px; width: 100%; border-radius: 22px; }
.hotkey-section {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hint); margin: 14px 0 6px;
}
.hotkey-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.hotkey-row + .hotkey-row { border-top: 1px solid var(--card-border); }
.hotkey-keys { display: flex; gap: 4px; }
.hotkey-keys kbd {
  min-width: 26px; padding: 3px 8px; text-align: center; font: 700 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: var(--text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border); border-bottom-width: 2px; border-radius: 7px;
}

/* ---------- Тур-підказка для нового користувача ----------
   Два типи кроків в одному компоненті: "point" (спотлайт біля елемента —
   .tour-backdrop вирізає під ним отвір через dynamically-обчислений
   clip-path, .tour-spotlight дає лише м'яку тінь навколо отвору, БЕЗ рамки —
   різкий контур навколо кнопок/карток раніше й давав "дешевий" вигляд)
   і "modal" (центрована картка успіху, без цілі — spotlight/clip-path тоді
   вимкнені, .tour-backdrop лишається суцільним розмитим фоном). */
.tour-overlay { position: fixed; inset: 0; z-index: 400; }
.tour-backdrop {
  position: fixed; inset: 0; pointer-events: auto;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-spotlight {
  position: fixed; z-index: 401; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 32px 6px rgba(0, 0, 0, 0.35);
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1), height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-card {
  position: fixed; z-index: 402; width: calc(100% - 32px); max-width: 320px;
  background: rgba(20, 16, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px;
  padding: 20px 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); backdrop-filter: var(--glass-blur);
  opacity: 0; transform: translateY(6px); text-align: left;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.25s ease;
}
.tour-card.visible { opacity: 1; transform: translateY(0); }
.tour-card.centered {
  top: 50% !important; left: 50% !important; bottom: auto !important;
  transform: translate(-50%, -50%); text-align: center;
}
.tour-card.centered.visible { transform: translate(-50%, -50%); }
.tour-card-icon { line-height: 1; margin-bottom: 12px; color: var(--accent-2); }
.tour-card-icon svg { width: 40px; height: 40px; }
.tour-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.tour-step-counter { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }
.tour-card.centered .tour-step-counter { text-align: center; }
.tour-card-text { font-size: 14px; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.tour-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card.centered .tour-card-actions { justify-content: center; }
.tour-skip-btn { background: none; border: none; color: var(--hint); font-weight: 700; font-size: 13px; cursor: pointer; padding: 8px 4px; font-family: inherit; }
.tour-next-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff; border: none; border-radius: 999px; padding: 10px 22px; font-weight: 800; font-size: 13.5px;
  cursor: pointer; font-family: inherit; box-shadow: 0 4px 14px var(--accent-glow);
}

/* ---------- Тост: контекстне повідомлення (заміна tg.showAlert усередині екрана) ---------- */
#toast-container {
  position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 300; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 16px; pointer-events: none;
}
.toast {
  --toast-c: var(--accent);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px;
  width: fit-content; min-width: 200px; max-width: 420px; padding: 9px 16px 9px 9px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--toast-c) 30%, transparent);
  border-radius: 24px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 24px color-mix(in srgb, var(--toast-c) 18%, transparent);
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.34, 1.4, .64, 1);
}
.toast.in { opacity: 1; transform: translateY(0) scale(1); }
.toast-ico { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--toast-c); color: #fff; }
.toast-ico svg { width: 16px; height: 16px; }
.toast-msg { min-width: 0; overflow-wrap: anywhere; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--toast-c); opacity: .55; transform-origin: left; animation: toastTimer var(--toast-dur, 2600ms) linear forwards; }
@keyframes toastTimer { to { transform: scaleX(0); } }
.toast-error { --toast-c: var(--danger); }
.toast-success { --toast-c: var(--success); }
.toast-warning { --toast-c: var(--warning, #f59e0b); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity .15s ease; transform: none; }
  .toast-timer { animation: none; display: none; }
}

/* ---------- Кастомне підтвердження (заміна tg.showConfirm) ---------- */
.confirm-dialog { text-align: center; }
.confirm-dialog-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.22) 0%, rgba(239, 68, 68, 0.1) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35); box-shadow: 0 0 18px rgba(239, 68, 68, 0.28);
  color: var(--danger);
}
.confirm-dialog-icon svg { width: 26px; height: 26px; }
.confirm-dialog-title { font-size: 16.5px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.confirm-dialog-message { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 18px; }
.confirm-dialog-actions { display: flex; gap: 8px; }
.confirm-dialog-actions .pill { flex: 1; justify-content: center; }

.editor-media { width: 100%; border-radius: var(--radius-md); margin-bottom: 14px; max-height: 240px; object-fit: cover; display: block; }

.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.editor-flat-toolbar {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 8px;
  /* 9 кнопок форматування + роздільник не влазять в один ряд на вузьких
     екранах — раніше переносились на 2 рядки й забирали зайву висоту.
     Той самий горизонтальний скрол-паттерн, що й у .segmented-scroll. */
  gap: 7px; flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth; touch-action: pan-x;
  /* Раніше тут була mask-image-фейда країв для натяку "тут можна скролити" —
     на стику з заокругленим кутом контейнера вона давала неприємний
     напівпрозорий "туман" саме навколо першої/останньої кнопки. Прибрано. */
}
.editor-flat-toolbar::-webkit-scrollbar { display: none; }
/* Браузер не вміє намалювати справжню графіку кастомного емодзі Telegram
   (вона рендериться лише в самому клієнті Telegram, після відправки) — без
   цього стилю невідомий тег <tg-emoji> у contenteditable виглядав би
   ідентично звичайному символу-фолбеку всередині, і не можна було б на
   око перевірити, чи вставка взагалі спрацювала. */
.rich-editor tg-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 5px; padding: 0 3px; margin: 0 1px;
}
.tb-divider { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--card-border); flex-shrink: 0; }
/* Кожна кнопка має свій легкий фон (не голий глиф і не важка рамка ×9) —
   читається як окрема кнопка, але без "коробочка в коробочці" по всій довжині. */
.tb-btn {
  background: rgba(255, 255, 255, 0.045); border: none; color: var(--text);
  border-radius: 11px; width: 40px; height: 40px; font-size: 15px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
/* Значки (спойлер/посилання/емодзі/кастомні емодзі/час) при базових 17px
   губились у 40px кнопці й майже не відрізнялись одне від одного (особливо
   emoji ⇄ custom-emoji — різниця лише в маленькій іскринці в кутку). Більший
   розмір саме тут, не займаючи глобальний .icon-sm деінде в застосунку. */
.tb-btn .icon { width: 21px; height: 21px; }
.tb-btn:hover { background: rgba(255, 255, 255, 0.09); }
.tb-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.14); }
/* .active — САМЕ те форматування, всередині якого зараз стоїть курсор
   (не миттєвий стан кліку, а стійкий індикатор "зараз друкую жирним" тощо,
   дивись syncToolbarActiveState у app.js) — раніше тулбар взагалі не
   показував, яке форматування вже застосоване на позиції курсора. */
.tb-btn.active {
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  color: #fff; box-shadow: 0 3px 10px var(--accent-glow);
}

.loading svg { animation: tb-spin 0.8s linear infinite; }
button:disabled { opacity: 0.6; cursor: default; }
@keyframes tb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* "Опублікувати зараз" (черга) — паперовий літачок замість крутіння: злітає по
   діагоналі й зникає, потім миттєво повертається на старт (жорсткий стрибок
   між ітераціями — сам keyframes-цикл, без reverse) і летить знову, поки триває
   запит. Специфічність селектора (атрибут+клас+елемент) вища за загальний
   .loading svg — перебиває його без !important. */
[data-action="queue-publish-now"].loading svg {
  animation: tb-fly 0.9s ease-in infinite;
}
@keyframes tb-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translate(16px, -13px) rotate(10deg); opacity: 0; }
}

/* "Зберегти"/"Схвалити і опублікувати" в редакторі — іконка галочки, а не
   спінер: крутіння тут виглядає недоречно. Дизейбл+затемнення (button:disabled)
   лишається як єдина ознака завантаження. */
#editor-publish-btn.loading svg { animation: none; }

.ai-rewrite-pill {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-2); font-weight: 700;
}
.ai-rewrite-pill:active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent) 0%, color-mix(in srgb, var(--accent) 30%, transparent) 100%); }

.ai-style-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--card-hi); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card); overflow: hidden; backdrop-filter: var(--glass-blur);
}
.ai-style-option {
  display: block; width: 100%; text-align: left; padding: 11px 14px; background: none; border: none;
  border-bottom: 1px solid var(--card-border); color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ai-style-option:last-child { border-bottom: none; }
.ai-style-option:active { background: rgba(255, 255, 255, 0.08); }

.templates-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.template-chip {
  flex-shrink: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-2);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap; font-family: inherit;
}

.template-row {
  display: flex; justify-content: space-between; align-items: center; padding: 13px 14px;
  border-bottom: 1px solid var(--card-border);
}
.template-row:last-child { border-bottom: none; }
.template-row-title { font-size: 14px; font-weight: 600; }

.dev-channel-row { padding: 17px; border-bottom: 1px solid var(--card-border); }
.dev-channel-row:last-child { border-bottom: none; }
.dev-channel-title { font-size: 15.5px; font-weight: 800; margin-bottom: 5px; }
.dev-channel-meta { font-size: 12.5px; color: var(--hint); margin-bottom: 10px; line-height: 1.55; }

.album-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.album-thumb {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  position: relative;
}
/* Коли в пості лише 1 медіа (найчастіший випадок) — показуємо його великим,
   а не тим самим 60×60 тайлом, що й у мультиальбомі: інакше саме фото/відео
   ледь видно за кнопками поверх нього. */
.album-gallery-single { flex-wrap: wrap; }
.album-gallery-single .album-thumb:not(.album-thumb-add) { flex: 1 1 100%; width: 100%; height: 260px; }
.album-gallery-single .album-thumb-add { width: 48px; height: 48px; }
.album-gallery-single .album-thumb-add span { font-size: 22px; }
.album-gallery-single .album-thumb-delogo { width: 34px; height: 34px; top: 8px; left: 8px; }
.album-gallery-single .album-thumb-delogo svg { width: 17px; height: 17px; }
.album-gallery-single .album-thumb-remove { width: 30px; height: 30px; top: 8px; right: 8px; }
.album-gallery-single .album-thumb-remove svg { width: 16px !important; height: 16px !important; }
.album-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.channel-multiselect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  /* Довгий список каналів роздував усю модалку по висоті замість власного
     скролу — тепер має власну стелю й скролиться незалежно від решти форми. */
  max-height: 168px; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;
}
.channel-multiselect::-webkit-scrollbar { display: none; }
.channel-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--card-border);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.channel-checkbox-row.checked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.channel-checkbox-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--hint);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.channel-checkbox-box svg { width: 12px; height: 12px; }
.channel-checkbox-row.checked .channel-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}

.channel-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-border);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.channel-chip.checked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.channel-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.channel-chip-avatar svg { width: 55%; height: 55%; }
.channel-chip-check svg { width: 14px; height: 14px; display: block; stroke: var(--accent); }

/* ---------- Компактний вибір областей/типів тривог (менше візуального навантаження) ---------- */
.oblast-summary-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 14px; border-radius: var(--radius-sm); background: var(--card);
  border: 1px solid var(--card-border); color: var(--text); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 8px;
}
.oblast-summary-chevron { color: var(--hint); transition: transform 0.2s ease; font-size: 12px; }

/* ШІ-ключ → "Мої канали та команда" — картки з'являються каскадом (stagger
   через animation-delay у JS). */
.ai-key-channel-card { animation: fadeIn 0.3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .ai-key-channel-card { animation: none; }
}

/* ---------- Анімації плашок (badge registry, 2026-09-29) — суперадмін обирає
   для кожної плашки окремо в Тех.розділі → "Плашки". .badge-anim-pulse —
   перейменований звідси-вище колишній .ai-key-status-badge (той самий
   keyframe, раніше ніде не застосовувався жодним реальним бейджем — тепер
   реально підключений через badgeHtml()). .badge-anim-shimmer — новий,
   рухома смуга світла по діагоналі (::before, той самий підхід, що анімація
   сканування водяного знаку wmScan нижче в файлі, тут — власний легший
   варіант саме під вузьку пігулку-бейдж). Обидва — з prefers-reduced-motion
   guard, як і всі інші анімації файлу. */
.badge-anim-pulse { animation: badgeAnimPulse 2.6s ease-in-out infinite; }
@keyframes badgeAnimPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: 0 0 9px currentColor; }
}
/* 2026-09-29 ("для блиска тоже выбор цвета") — колір самої смуги світла
   винесений в окрему змінну --badge-shimmer-c (задає badgeHtml() інлайн-
   стилем, лише коли суперадмін обрав власний колір блиску в Тех.розділі) —
   дефолт лишається тим самим білим підсвічуванням, що й було.
   ::before, НЕ ::after (2026-09-29, "блик не должен накладываться на текст")
   — у звичайному порядку рендеру ::before малюється ПЕРЕД реальним вмістом
   елемента (текст/іконка), тож при накладанні (position:absolute;inset:0)
   лягає ПІД ним, а не поверх — сам текст завжди лишається чітким, блик
   ковзає лише позаду/між літерами. */
.badge-anim-shimmer { position: relative; overflow: hidden; }
.badge-anim-shimmer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--badge-shimmer-c, rgba(255, 255, 255, 0.45)) 48%, transparent 66%);
  background-size: 220% 100%;
  animation: badgeAnimShimmer 2.2s linear infinite;
  pointer-events: none;
}
@keyframes badgeAnimShimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-anim-pulse { animation: none; }
  .badge-anim-shimmer::before { animation: none; display: none; }
}

/* Рекомендовані (автовивчені) підказки ключових слів рендеряться тим самим
   .pill.cascade-suggestion-chip, що й чипси категорій (ТРЦ/Райони тощо) —
   лише з фіолетовим --cascade-color (рішення користувача 2026-09-29,
   "сделать как и в трц такого же формата только цвет фиолетовый"), тож
   власного класу під них більше не потрібно. */
.chip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px; margin-bottom: 10px;
}
.chip-compact {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 8px 10px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--card-border); cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chip-compact.checked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chip-compact .channel-chip-check svg { width: 12px; height: 12px; flex-shrink: 0; }
.chip-compact svg.icon-sm { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--text); fill: none; stroke-width: 2; }
/* Іконки конкретних цілей у чіпах Тривог — той самий силует, що на карті
   (icons/threats/*.png), БЕЗ кружка-підложки й без картки — лише велика
   біла іконка + підпис. Специфічність ВИЩА за ".chip-compact span { flex:1 }"
   (2 класи проти клас+елемент) — інакше flex:1 розтягує іконку (той самий
   баг, що був з овалами). */
.chip-compact .threat-chip-icon {
  width: 34px; height: 34px; min-width: 34px; max-width: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease;
}
.threat-chip-icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.chip-compact:not(.checked) .threat-chip-icon { opacity: 0.32; }
/* Чіпи конкретних цілей — без картки/рамки, лише іконка (SVG-подібний растр
   у кольоровій плямі) + підпис; вибраність тепер читається ОДРАЗУ з маленької
   галочки-бейджа праворуч (раніше — лише з тьмянішої іконки/кольору тексту,
   що на екрані телефону було важко відрізнити на око). */
#channel-modal .chip-compact.chip-plain {
  min-height: 0; padding: 4px 6px; background: none; border: none; box-shadow: none; border-radius: 10px;
  transition: background 0.15s ease;
}
#channel-modal .chip-compact.chip-plain:active { background: rgba(255, 255, 255, 0.06); }
#channel-modal .chip-compact.chip-plain.checked { background: none; border: none; box-shadow: none; color: var(--text); font-weight: 700; }
#channel-modal .chip-compact.chip-plain:not(.checked) { color: var(--hint); font-weight: 600; }
.chip-compact .threat-chip-check {
  width: 18px; height: 18px; min-width: 18px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
.chip-compact .threat-chip-check svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; }
.chip-select {
  padding: 7px 10px; border-radius: 10px; background: var(--card);
  border: 1px solid var(--card-border); color: var(--text); font-size: 12.5px; font-weight: 600;
}
.chip-compact span { flex: 1; }

/* ---------- Вкладки всередині модалки каналу (п.2 ТЗ) ---------- */
.modal-tab-bar {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--card-border);
  padding: 4px; margin-bottom: 16px; scrollbar-width: none;
}
.modal-tab-bar::-webkit-scrollbar { display: none; }
.modal-tab-btn {
  flex: 1 1 0; min-width: 0; /* інакше nowrap-текст не дає кнопці стиснутись
    нижче своєї природної ширини — з іконками (ширші, ніж голий текст) рядок
    із 3+ вкладок вилазив за екран, той самий клас багу, що й з .ads-price-card. */
  background: none; border: none; color: var(--hint);
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 8px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden;
}
.modal-tab-btn span { overflow: hidden; text-overflow: ellipsis; }
/* Тех.розділ — 8 вкладок в один рядок (Огляд/Канали/Джерела/Люди/Тарифи/
   Помилки/Підтримка/ШІ): базовий flex:1 1 0 стискає ВСІ кнопки порівну до
   ширини екрана без скролу — при 8 короткими не влазять пункти типу
   "Підтримка"/"Помилки" стискаються нижче ширини тексту й overflow:hidden
   зрізає символи симетрично з центру (justify-content:center), тож замість
   акуратного обрізання з "…" виходить нечитабельний обрубок посередині
   слова. .modal-tab-bar сам по собі вже overflow-x:auto — просто дозволяємо
   кнопкам лишатись природної ширини (flex-shrink:0) і скролити рядок
   горизонтально, той самий підхід, що вже є в #channel-modal .modal-tab-btn. */
#tab-dev .modal-tab-bar { justify-content: flex-start; }
#tab-dev .modal-tab-btn { flex: 0 0 auto; }
/* Рішення користувача 2026-09-27 ("почини навігацію в Тех.розділі") — на ПК
   ця панель мала лише текстові лейбли (тепер +іконки вище, index-beta.html)
   і ту саму компактну мобільну геометрію (padding 9px 8px, gap 4px), що на
   широкому екрані читалась як тонка, недороблена смужка серед решти
   іконка+текст навігації застосунку. Просторіші відступи — той самий рівень
   "ваги", що й .nav-btn у сайдбарі. */
body.desktop-platform #tab-dev .modal-tab-bar { padding: 6px; gap: 6px; }
/* 2026-09-29 (скріншот "скролл в админ панели в менюшке на пк") — на ПК мишею
   горизонтальний скрол прихованої смуги недосяжний (колесо крутить сторінку,
   не рядок), тож пункти вкінці ("Підтримка") лишались за краєм. На ПК рядок
   тепер переноситься на другий ряд — видно ВЕСЬ список розділів одразу, без
   прокрутки. Мобільне (вузьке вікно) лишається горизонтальним скролом. */
body.desktop-platform #tab-dev .modal-tab-bar { flex-wrap: wrap; overflow: visible; }
/* Чорна дефолтна рамка фокуса на щойно натиснутій вкладці (скрін: "Підтримка")
   — при кліку мишею не показуємо, лишаємо лише для клавіатури. */
#tab-dev .modal-tab-btn:focus { outline: none; }
#tab-dev .modal-tab-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
body.desktop-platform #tab-dev .modal-tab-btn { padding: 10px 16px; font-size: 13px; gap: 8px; }
body.desktop-platform #tab-dev .modal-tab-btn svg { width: 15px; height: 15px; }
.modal-tab-btn svg { opacity: 0.75; }
.modal-tab-btn.active svg { opacity: 1; }
.modal-tab-btn.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, var(--accent-2)) 100%);
  color: #fff;
}
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; animation: modalTabIn 0.22s ease; }
@keyframes modalTabIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }

/* ==================== Редизайн модалки налаштувань каналу ==================== */

/* --- Hero: аватар + назва + статус, замість плоского рядка з дрібним текстом --- */
.modal-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.modal-hero-avatar {
  width: 62px; height: 62px; min-width: 62px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden;
}
.modal-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.modal-hero-info { min-width: 0; flex: 1; }
.modal-hero-title {
  font-size: 20px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-hero-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 13px; color: var(--hint); }
.modal-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hint); flex-shrink: 0; }
.modal-hero-dot.active { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.modal-hero-dot.inactive { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* --- Карточка групи налаштувань: іконка + назва + опис + перемикач в шапці --- */
.settings-card {
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  padding: var(--ui-card-padding, 16px); margin-bottom: var(--ui-card-gap, 10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease;
}
.settings-card-header { display: flex; align-items: center; gap: 12px; }
.settings-card-header.clickable { cursor: pointer; }
.settings-card-header.clickable:active { opacity: 0.8; }
.settings-card-icon {
  width: calc(34px * var(--ui-icon-scale, 1)); height: calc(34px * var(--ui-icon-scale, 1)); min-width: calc(34px * var(--ui-icon-scale, 1)); border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); color: var(--accent-2);
}
.settings-card-icon svg { width: calc(17px * var(--ui-icon-scale, 1)); height: calc(17px * var(--ui-icon-scale, 1)); }
.settings-card-body { flex: 1; min-width: 0; }
.settings-card-title { font-size: calc(14.5px * var(--ui-font-scale, 1)); font-weight: 700; letter-spacing: -0.01em; }
.settings-card-desc { font-size: calc(12.5px * var(--ui-font-scale, 1)); color: var(--hint); margin-top: 2px; line-height: 1.45; }
.settings-card-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.settings-card-extra.collapsed { display: none; }
.settings-card.state-accent-on { border-left: 3px solid var(--success); }
.settings-card.state-accent-off { border-left: 3px solid var(--danger); }

/* Тижневий ІІ-інсайт поєднує динаміку й конкретну пораду в 2 абзаци —
   без згортання картка розтягувалась на весь екран і "давила" все нижче.
   Іконка вирівнюється по верху (як заголовок), а не по центру всього блоку,
   бо текст тепер значно вищий за звичайні картки. */
[data-role="growth-insight-card"] .settings-card-header { align-items: flex-start; }
.growth-insight-text.clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.growth-insight-toggle {
  background: none; border: none; padding: 6px 0 0; margin: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--accent); font-family: inherit;
}
.growth-insight-toggle:active { opacity: 0.7; }

/* Картки тарифів (розділ "Підписки"). Popular-план (Pro) отримує трохи
   більшу візуальну вагу (світіння+легке масштабування) — класичний прийом
   прайсингових сторінок: око одразу знаходить рекомендований варіант,
   решта лишаються тихішими. */
.plan-card {
  overflow: visible; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.plan-card.is-popular {
  border-color: var(--card-border-hi) !important;
  box-shadow: 0 0 0 1px var(--accent-glow), 0 16px 40px color-mix(in srgb, var(--accent) 16%, transparent) !important;
  transform: scale(1.015);
}
.plan-card-icon-badge {
  width: 42px; height: 42px; min-width: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.plan-card-ribbon {
  position: absolute; top: -11px; right: 16px; padding: 4px 13px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #1a1025;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.plan-card-price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.plan-card-price-value { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-card-price-unit { font-size: 13px; font-weight: 700; color: var(--hint); }
.plan-card-price-sub { display: block; font-size: 11.5px; color: var(--hint); margin-top: 1px; }
.plan-card-features { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--text); display: flex; flex-direction: column; gap: 9px; }
.plan-card-features li { display: flex; align-items: center; gap: 10px; }
.plan-card-feature-check {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.plan-card-feature-check svg { width: 12px; height: 12px; }
/* "Штрихкод" унизу картки тарифу — підпис-код плану (2026-10-23, за мотивами
   референсу користувача: цінники з бірками й штрихкодом замість сухого
   прайс-листа). Суто CSS-візерунок (повторювані смуги різної ширини через
   repeating-linear-gradient), без картинок — важить 0, масштабується без
   втрати якості, працює в будь-якій темі (колір смуг — var(--text)). */
.plan-card-sku {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--card-border);
}
.plan-card-sku-code { font: 700 10.5px/1 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; letter-spacing: 0.04em; color: var(--hint); text-transform: uppercase; }
.plan-card-sku-bars {
  width: 86px; height: 22px; opacity: 0.55;
  background-image: repeating-linear-gradient(90deg,
    var(--text) 0 1px, transparent 1px 3px,
    var(--text) 3px 5px, transparent 5px 6px,
    var(--text) 6px 9px, transparent 9px 11px,
    var(--text) 11px 12px, transparent 12px 14px,
    var(--text) 14px 16px, transparent 16px 18px,
    var(--text) 18px 19px, transparent 19px 21px,
    var(--text) 21px 24px, transparent 24px 26px,
    var(--text) 26px 27px, transparent 27px 30px);
  background-repeat: repeat-x; background-size: 30px 100%;
}
/* ПК: тарифи рядком одна поряд одної (як прайс-таблиця), не стовпчиком — на
   вузькому телефоні список лишається звичним вертикальним. Popular-план і
   так трохи "виринає" (scale 1.015 + glow вище) — у рядку це читається ще
   виразніше, ніж у стовпчику. */
@media (min-width: 900px) {
  body.desktop-platform #subscriptions-plans-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
  body.desktop-platform #subscriptions-plans-list .plan-card { margin-bottom: 0 !important; height: 100%; display: flex; flex-direction: column; }
  body.desktop-platform #subscriptions-plans-list .plan-card .settings-card-extra { display: flex; flex-direction: column; flex: 1; }
  body.desktop-platform #subscriptions-plans-list .plan-card .plan-card-features { flex: 1; }
}
.plan-purchase-paused {
  display: flex; align-items: center; gap: 10px;
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px; line-height: 1.4; color: var(--text);
}
.plan-purchase-paused-icon { color: var(--warning); flex-shrink: 0; display: flex; }
.plan-purchase-paused-icon svg { width: 20px; height: 20px; }

.position-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; margin: 10px 0; max-width: 180px; }

.wm-live-preview-wrap {
  border-radius: var(--radius-md); border: 1px solid var(--card-border); overflow: hidden;
  display: flex; justify-content: center; background: var(--card);
}
.wm-live-preview-wrap canvas { display: block; max-width: 100%; height: auto; }
.position-btn {
  aspect-ratio: 1; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
}
.position-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.position-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hint); }
.position-btn.active .dot { background: var(--accent-2); }


.album-thumb img, .album-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.album-thumb-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--danger);
  text-align: center;
  background: var(--danger-bg);
}

.media-lightbox {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.media-lightbox img, .media-lightbox video {
  max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain;
}
.album-thumb { cursor: zoom-in; }

.wm-remover-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92);
  z-index: 250; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.wm-remover-panel {
  background: var(--card-hi); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 16px; max-width: 480px; width: 100%; max-height: calc(90 * var(--vh1)); overflow-y: auto;
}
.wm-remover-header { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.wm-remover-hint { font-size: 12.5px; color: var(--hint); margin-bottom: 10px; line-height: 1.4; }
.wm-remover-media-outer { text-align: center; }
.wm-remover-media-wrap {
  position: relative; display: inline-block; min-width: 220px; min-height: 160px; max-width: 100%;
  touch-action: none; border-radius: 8px; overflow: hidden; user-select: none; line-height: 0;
  background: var(--card);
}
.wm-remover-media-wrap img, .wm-remover-media-wrap video { display: block; max-width: 100%; max-height: calc(60 * var(--vh1)); }
/* min-height вище гарантує, що це видно навіть якщо фото/відео ще не
   завантажилось (або взагалі не вдалось) — інакше inline-block без вмісту
   схлопується до нуля, і весь діалог виглядає як голе підтвердження без
   жодного знаку помилки (справжня причина одного репортованого багу). */
.wm-remover-media-loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 160px; font-size: 12.5px; line-height: normal;
}
.wm-remover-selection {
  position: absolute; border: 2px dashed var(--accent); background: rgba(99, 102, 241, 0.2);
  pointer-events: none; overflow: hidden;
}
/* Стан "обробляється" — пунктир стає суцільним і по ділянці біжить світла
   смуга (та сама ідея, що в індикаторів генерації зображення: показати, що
   робота ТРИВАЄ, а не просто статичний напис "Обробляємо…" поруч). */
.wm-remover-selection.processing {
  border-style: solid; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.wm-remover-selection.processing::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: wmScan 1.3s linear infinite;
}
@keyframes wmScan { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .wm-remover-selection.processing::after { animation: none; } }
/* Підтверджена (не чорнова) рамка — єдина, що має клікабельну кнопку
   видалення всередині, тож саме їй знімаємо pointer-events:none з базового
   правила вище. */
.wm-remover-selection.committed { pointer-events: auto; }
.wm-sel-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: none;
  background: rgba(225, 29, 72, 0.85); color: #fff; cursor: pointer;
}
.wm-sel-remove svg { width: 12px; height: 12px; }
.wm-sel-remove:active { transform: scale(0.9); }
/* Перемикач "До/Після" над прев'ю результату */
.wm-preview-toggle { max-width: 220px; margin-left: auto; margin-right: auto; }
/* .pill-row скрізь у застосунку має display:grid !important (щоб ніхто
   випадково не зламав розкладку inline-стилем) — тому приховування рядка
   кнопок прев'ю/вибору теж МАЄ бути через !important-клас, звичайний
   style.display="none" тут мовчки програє каскаду. */
.wm-remover-panel [data-role="wm-select-actions"].wm-hidden,
.wm-remover-panel [data-role="wm-preview-actions"].wm-hidden { display: none !important; }
.album-thumb-delogo {
  position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.album-thumb-delogo svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; }

/* Пароль-замок Тех.розділу — суто клієнтська перевірка (SHA-256 у app.js),
   на сервері жодного пароля/хешу не зберігається. Реальна межа безпеки й так
   лишається на боці бекенду (SUPERADMIN_IDS/granted_superadmins) — цей замок
   лише додаткова перепона для власника на самому пристрої. */
.tech-lock-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 260;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tech-lock-panel {
  background: var(--card-hi); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 26px 22px; max-width: 300px; width: 100%; text-align: center;
}
.tech-lock-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2);
  display: flex; align-items: center; justify-content: center;
}
.tech-lock-icon svg { width: 22px; height: 22px; }
.tech-lock-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.tech-lock-panel input[type="password"] { text-align: center; letter-spacing: 0.15em; margin-bottom: 12px; }

.media-preview-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: 8px;
}
#editor-media-preview { margin-top: 0; }
.media-preview-canvas-wrap { position: relative; width: 100%; background: #000; }
.media-preview-canvas-wrap canvas,
.media-preview-canvas-wrap video { width: 100%; display: block; max-height: 200px; object-fit: contain; }
.media-preview-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; gap: 10px;
}
.watermark-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--text); user-select: none;
}
/* .switch і .watermark-switch — той самий toggle-компонент під двома
   історичними іменами (раніше дублювались 1-в-1 у двох місцях файлу);
   об'єднано в одне визначення, щоб оновлювати вигляд перемикача в
   одному місці. */
.watermark-switch, .switch {
  width: 40px; height: 24px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12);
  position: relative; transition: background 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0;
  cursor: pointer; border: none; padding: 0;
}
.watermark-switch::after, .switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.watermark-switch.on, .switch.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px var(--accent-glow);
}
.watermark-switch.on::after, .switch.on::after { transform: translateX(16px); }

/* ---------- Профіль ---------- */
/* Раніше цей блок і .list-group нижче навмисно "прозорі" для теми:
   var(--tg-theme-secondary-bg-color, ...) віддавав пріоритет НАТИВНІЙ
   темі самого Telegram-клієнта користувача (типово плаский сіро-синій)
   над власною фіолетовою дизайн-системою застосунку — звідси й скарга,
   що "Сервіс"/FAQ-рядки виглядали зовсім інакше за решту переоформленого
   екрана. Нижче — ті самі токени (var(--card) тощо), що й усюди в
   застосунку, без фолбеку на тему Telegram. */
.profile-header-card {
  display: flex; align-items: center; gap: 14px; padding: 20px;
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
}
.profile-header-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 21px;
  box-shadow: 0 8px 22px var(--accent-glow);
}
.profile-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-info { min-width: 0; flex: 1; }
.profile-header-title {
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-header-id { font-size: 13px; color: var(--hint); margin-top: 3px; }
.profile-header-counters {
  display: flex; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--hint);
}
.profile-header-counters b { color: var(--text); font-weight: 700; }

.list-group {
  background: var(--card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.list-row {
  display: flex; align-items: center; gap: 10px; padding: var(--ui-row-padding-v-lg, 16px) 18px;
  border-bottom: 1px solid var(--card-border); min-height: 24px;
  transition: background 0.15s ease;
}
.list-row:last-child { border-bottom: none; }
.list-row-label {
  font-size: calc(14.5px * var(--ui-font-scale, 1)); font-weight: 650; color: var(--text);
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.list-row-value { font-size: calc(13px * var(--ui-font-scale, 1)); color: var(--hint); flex-shrink: 0; }
.list-row.clickable { cursor: pointer; }
.list-row.clickable:active { background: rgba(255, 255, 255, 0.04); }
.list-row-chevron { color: var(--hint); flex-shrink: 0; width: 18px; height: 18px; }

.faq-modal-image {
  border-radius: 12px; overflow: hidden; margin-bottom: 14px;
  aspect-ratio: 16 / 10; background: var(--card-hi);
}
.faq-modal-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.info-icon-btn {
  width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255, 255, 255, 0.08); color: var(--hint);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.info-icon-btn svg { width: 12px; height: 12px; }

.channel-search-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; margin-bottom: 12px; }
.search-input-wrap { position: relative; flex: 1; min-width: 0; }
.search-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--hint); pointer-events: none; }
.search-input-wrap input[type="text"] { padding-left: 38px; margin-bottom: 0; }
.channels-header-row { display: flex; align-items: center; gap: 10px; }
/* "Додати канал" (flex:1, довгий текст) і "Вибрати" (вузька пілюля) поруч
   виглядали непропорційно — одна кнопка величезна, інша ледь помітна.
   Тепер обидві ділять простір порівну, іконка-кружок лишається фіксованою
   (це чистий icon-button, тягнути під ширину тексту немає сенсу). */
.channels-header-row .primary-btn,
.channels-header-row #channels-select-btn { flex: 1; min-height: 44px; margin-bottom: 0; justify-content: center; padding: 9px 12px; border-radius: var(--radius-md); }
/* Поруч із яскравим фіолетовим світінням "Додати" звичайна .pill губилась —
   майже непомітна на темному тлі. Трохи виразніший скляний фон і рамка з
   відтінком акценту (не суцільний фіолетовий, щоб не сперечатись за увагу
   з основною дією) — читається як повноцінна друга кнопка, а не тінь. */
.channels-header-row #channels-select-btn {
  background: rgba(255, 255, 255, 0.09); border-color: var(--card-border-hi);
  font-weight: 700;
}
.channels-header-row #channels-select-btn:active { background: rgba(255, 255, 255, 0.14); }
/* На вузьких телефонах "+ Додати канал" переносився на 2 рядки — фіксований
   розмір шрифту не масштабувався під фактичну ширину кнопки (та ще й меншу
   через рівний поділ з "Вибрати" поруч). nowrap + трохи менший шрифт/іконка/
   gap замість переносу — надійніше за clamp(), який на дуже вузьких екранах
   однаково не врятував би від переносу. */
.channels-header-row .primary-btn { white-space: nowrap; font-size: 14px; gap: 6px; }
.channels-header-row .primary-btn .icon { width: 18px; height: 18px; flex-shrink: 0; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper-btn {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 700;
}
.stepper-btn:active { background: rgba(255, 255, 255, 0.12); }
.stepper-value {
  font-size: 13px; font-weight: 700; min-width: 44px; text-align: center;
  color: var(--text);
}

.modal-sheet-flex {
  display: flex; flex-direction: column; max-height: calc(92 * var(--vh1)); overflow: hidden;
}
.modal-scroll-area { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; -ms-overflow-style: none; scrollbar-width: none; }
.modal-scroll-area::-webkit-scrollbar { display: none; }
.modal-sticky-footer {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--card-border);
}
.modal-sticky-footer .primary-btn { flex: 1; margin: 0; }
.icon-action-btn {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-md);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.icon-action-btn.icon-action-danger { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); background: var(--danger-bg); }
.icon-action-btn:active { transform: scale(0.96); }

.textarea-wrap { position: relative; }
/* Обгортка над char-counter лише для розмітки (word-stats з'явився поруч) —
   display:contents прибирає її з потоку, обидва дочірні елементи лишаються
   абсолютно позиційовані відносно .textarea-wrap, як і раніше. */
.editor-stats-row { display: contents; }
.char-counter {
  position: absolute; right: 10px; bottom: 8px; font-size: 11px; font-weight: 600;
  color: var(--hint); background: rgba(10, 14, 26, 0.7); padding: 2px 6px; border-radius: 6px;
  pointer-events: none;
}
.char-counter.over-limit { color: var(--danger); }
.editor-word-stats {
  position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 600;
  color: var(--hint); background: rgba(10, 14, 26, 0.7); padding: 2px 6px; border-radius: 6px;
  pointer-events: none;
}

/* ---------- Профредактор: заголовок з інструментами, пошук/заміна, фокус-режим ---------- */
.modal-header-actions { display: flex; align-items: center; gap: 6px; }
.modal-header-actions .icon-action-btn {
  width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  border: none; box-shadow: none;
}
.modal-header-actions .icon-action-btn svg { width: 18px; height: 18px; }
.modal-header-actions .modal-close { padding: 6px; }
.modal-header-actions .icon-action-btn.active-tool {
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff;
}

.editor-find-replace {
  background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--card-border));
  border-radius: var(--radius-md); padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  animation: efrIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes efrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .editor-find-replace { animation: none; } }
.efr-row { display: flex; align-items: center; gap: 6px; }
.efr-row svg { width: 16px; height: 16px; color: var(--hint); flex-shrink: 0; }
.efr-row input {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 9px 10px; color: var(--text); font-size: 13.5px; font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.efr-row input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.07); }
.efr-count { font-size: 11.5px; font-weight: 700; color: var(--hint); min-width: 30px; text-align: center; flex-shrink: 0; }
.efr-nav-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.06);
  border: none; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.efr-nav-btn svg { width: 16px; height: 16px; }
.efr-nav-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.12); }
.efr-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#efr-close-btn { color: var(--hint); }
#efr-close-btn:active { background: color-mix(in srgb, var(--danger, #ef4444) 18%, rgba(255,255,255,0.08)); color: var(--danger, #ef4444); }
.efr-row .chip-action-btn { flex-shrink: 0; min-height: 34px; }
/* Другий рядок (заміна) — легка межа зверху, щоб відділити від пошуку без зайвого підпису */
.efr-row + .efr-row { padding-top: 7px; border-top: 1px solid var(--card-border); }
@media (max-width: 360px) {
  .editor-find-replace { padding: 8px; gap: 6px; }
  .efr-row { gap: 5px; }
  .efr-nav-btn { width: 32px; height: 32px; }
  .efr-row .chip-action-btn { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
}
/* Активний збіг у полі — та сама браузерна виділена ділянка (Range у
   selection), окремого підсвічування в DOM не малюємо: contentEditable
   вже показує стандартне виділення тексту. */

/* .modal-sheet-body — нова проміжна обгортка над .modal-scroll-area (потрібна
   для фокус-режиму нижче, де поруч з'являється друга колонка з живим
   прев'ю). У звичайному стані вона має бути "прозорою" для flex-розкладки
   .modal-sheet-flex — інакше .modal-scroll-area втрачає flex:1 і перестає
   тягнутись між шапкою й прилиплим футером. */
.modal-sheet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* Фокус-режим — текст+медіа зліва, живе прев'ю справа (тільки там, де є
   місце: на вузькому екрані панель перегляду просто йде під редактором). */
.modal-sheet-flex.editor-focus-mode { max-width: 1040px; }
.modal-sheet-flex.editor-focus-mode .modal-sheet-body { flex-direction: row; gap: 16px; }
.modal-sheet-flex.editor-focus-mode .modal-scroll-area { flex: 1 1 50%; min-width: 0; }
.editor-focus-preview-pane {
  flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  border-left: 1px solid var(--card-border); padding-left: 16px; overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.editor-focus-preview-pane::-webkit-scrollbar { display: none; }
.editor-focus-preview-label { font-size: 12px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: 0.03em; }
@media (max-width: 767px) {
  .modal-sheet-flex.editor-focus-mode .modal-sheet-body { flex-direction: column; }
  .editor-focus-preview-pane { border-left: none; padding-left: 0; border-top: 1px solid var(--card-border); padding-top: 12px; }
}

/* ---------- Альбом: перетягування мініатюр (порядок) + кроп/поворот ---------- */
.album-thumb[draggable="true"] { cursor: grab; }
.album-thumb.dragging { opacity: 0.4; }
.album-thumb.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.album-thumb-edit {
  position: absolute; bottom: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.album-thumb-edit svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2.2; }
.album-gallery-single .album-thumb-edit { width: 34px; height: 34px; bottom: 8px; left: 8px; }
.album-gallery-single .album-thumb-edit svg { width: 17px; height: 17px; }

/* ---------- Кроп/поворот фото — той самий каркас, що й wm-remover-overlay ---------- */
.crop-tool-rotate-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.crop-tool-rotate-row .chip-action-btn { flex: 1; justify-content: center; display: flex; align-items: center; gap: 6px; }
.crop-tool-rotate-row [data-action^="flip-"] { flex: 0 0 44px; }
.crop-tool-rotate-row [data-action^="flip-"].active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.crop-tool-media-wrap img { transition: transform 0.2s ease, filter 0.2s ease; }
.crop-tool-hint-small { font-size: 11.5px; color: var(--hint); text-align: center; margin-top: 4px; }
/* Пропорції обрізки — такі самі чіпи, як скрізь у редакторі */
.crop-ratio-row { display: flex; gap: 8px; margin: 10px 0 4px; }
.crop-ratio-row .chip-action-btn { flex: 1; justify-content: center; }
.crop-ratio-row .chip-action-btn.active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }
/* Нахил + яскравість/контраст/насиченість */
.crop-adjust-block { margin-top: 12px; }
.crop-adjust-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--hint); margin: 10px 0 4px; }
.crop-adjust-row:first-child { margin-top: 0; }
.crop-adjust-label { font-weight: 700; color: var(--text); }
.crop-adjust-val { font-variant-numeric: tabular-nums; }
.crop-adjust-slider { width: 100%; }
.crop-adjust-block .crop-tool-hint-small { color: #fbbf24; margin: 2px 0 6px; }
.crop-adjust-block [data-action="adjust-reset"] { width: 100%; justify-content: center; }

/* ---------- Історія версій тексту ---------- */
.editor-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; max-height: calc(60 * var(--vh1)); overflow-y: auto; }
.editor-history-item {
  text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.editor-history-item:active { transform: scale(0.99); background: rgba(255, 255, 255, 0.06); }
.editor-history-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.editor-history-item-label { font-size: 12.5px; font-weight: 700; color: var(--accent-2); }
.editor-history-item-time { font-size: 11px; color: var(--hint); flex-shrink: 0; }
.editor-history-item-snippet { font-size: 13px; color: var(--text); opacity: 0.85; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.editor-history-empty { text-align: center; color: var(--hint); font-size: 13px; padding: 24px 0; }

.editor-flat-toolbar { margin-bottom: 8px; }
/* Стилі рерайту + ІІ-кнопки — два окремих повноширинних ряди підряд займали
   зайву висоту; тепер це один візуальний кластер з мінімальним зазором. */
.ai-style-segmented { margin-bottom: 6px; }
.editor-quick-actions { display: flex; gap: 8px; margin: 0 0 10px; padding-top: 8px; border-top: 1px solid var(--card-border); }
/* Три кнопки в один ряд — тісно, і зайвий горизонтальний паддінг з
   загального .pill (частина редизайну кнопок) ламав "ШІ-рерайт" на
   два рядки, роблячи пігулку вищою за сусідні. Тут паддінг вужчий і
   текст явно без переносу — той самий візуальний патерн пігулки, просто
   підігнаний під тісний контейнер. */
.editor-quick-actions .pill {
  font-size: 13px; padding-left: 10px; padding-right: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-quick-actions #editor-preview-btn { border: 1px solid var(--card-border); color: var(--hint); background: rgba(255,255,255,0.03); }
.editor-quick-actions #editor-preview-btn:active { background: rgba(255,255,255,0.08); }

.editor-section { margin-top: 4px; }
.editor-section-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.editor-section-label { font-size: 12px; font-weight: 700; color: var(--hint); text-transform: uppercase; letter-spacing: .3px; }
/* Один перемикач на рядок, а не поруч у стовпчик — раніше на вузьких екранах
   "Підпис каналу" й "Запланувати" тіснились в один рядок впритул один до
   одного (flex-wrap встигав спрацювати не завжди, залежно від довжини тексту
   й ширини екрана). Вертикальний стовпчик прибирає це навзавжди. */
.editor-inline-toggles {
  display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--card-border);
}
.editor-inline-toggles .watermark-toggle { margin-bottom: 0; }

.chip-actions-row { display: flex; gap: 8px; margin-bottom: 8px; }
.chip-action-btn {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); color: var(--hint);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}

.watermark-toggle.disabled { opacity: 0.5; cursor: not-allowed; }
.watermark-toggle.disabled .watermark-switch { pointer-events: none; }
.soon-badge {
  font-size: 10px; font-weight: 700; color: var(--hint); background: rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 2px 7px; margin-left: auto;
}

/* Перемикач каналів над прев'ю поста — з'являється лише коли пост іде в
   кілька каналів одразу (у кожного може бути свій водяний знак/футер). */
.preview-channel-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none;
}
.preview-channel-tabs::-webkit-scrollbar { display: none; }
.preview-channel-tab {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 999px;
  padding: 5px 12px 5px 5px; color: var(--hint); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.preview-channel-tab:active { transform: scale(0.97); }
.preview-channel-tab.active {
  border-color: var(--accent-2); color: var(--text); background: rgba(255, 255, 255, 0.06);
}
.preview-channel-tab-avatar {
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.08);
}
.preview-channel-tab-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-channel-tab-title { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tg-bubble {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  padding: 0; font-size: 14.5px; line-height: 1.5; word-break: break-word; overflow: hidden;
}
.tg-bubble tg-spoiler { background: rgba(255,255,255,0.15); color: transparent; border-radius: 4px; }
.tg-bubble a { color: var(--accent-2); }
.tg-preview-text { padding: 14px; white-space: pre-wrap; }
.tg-preview-footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--card-border); font-size: 12.5px; opacity: 0.75; }

.tg-preview-gallery { display: grid; gap: 2px; }
.tg-preview-item { overflow: hidden; background: #000; position: relative; }
.tg-preview-item img, .tg-preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; }

.tg-preview-gallery-1 { grid-template-columns: 1fr; }
.tg-preview-gallery-1 .tg-preview-item { aspect-ratio: 4 / 3; }

.tg-preview-gallery-2 { grid-template-columns: 1fr 1fr; }
.tg-preview-gallery-2 .tg-preview-item { aspect-ratio: 1 / 1; }

.tg-preview-gallery-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.tg-preview-gallery-3 .tg-preview-item:first-child { grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
.tg-preview-gallery-3 .tg-preview-item:not(:first-child) { aspect-ratio: 1 / 1; }

.tg-preview-gallery-grid { grid-template-columns: 1fr 1fr; }
.tg-preview-gallery-grid .tg-preview-item { aspect-ratio: 1 / 1; }

.album-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
/* Статичний варіант — лейбл НАД галереєю, а не поверх першого тайла: раніше
   .album-badge лежав усередині скрольованої галереї абсолютним оверлеєм і
   перекривав кнопку кропа на першому фото (виглядало як "у першого фото
   пропали кнопки"). Тепер це звичайний рядок перед галереєю. */
.album-badge-static {
  position: static; display: inline-flex; align-self: flex-start;
  margin: 0 0 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--card-border);
}
.album-type-badge {
  position: absolute; bottom: 6px; left: 6px; z-index: 2;
  background: rgba(0,0,0,0.6); color: #fff; border-radius: 6px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}
.album-type-badge svg { width: 12px; height: 12px; }
.album-type-badge.is-gif { width: auto; padding: 0 5px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; }

.emoji-quickbar-card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg);
  padding: 10px 12px 12px; margin-top: 8px; margin-bottom: 10px; animation: fadeInDown 0.2s ease;
}
.emoji-quickbar-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--hint); margin-bottom: 8px;
}
.emoji-quickbar-close {
  width: 22px; height: 22px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.06); color: var(--hint);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.emoji-quickbar-close svg { width: 12px; height: 12px; }
.emoji-quickbar { display: flex; gap: 8px; flex-wrap: wrap; }
.emoji-quickbar-btn {
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 999px;
  width: 40px; height: 40px; font-size: 19px; cursor: pointer; flex-shrink: 0; font-family: inherit;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease;
}
.emoji-quickbar-btn:active { background: var(--card-border); transform: scale(0.9); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.custom-emoji-premium-hint {
  display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--card-border);
  font-size: 11.5px; line-height: 1.4; color: var(--hint);
}
.custom-emoji-premium-hint svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--accent-2); }
.custom-emoji-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.custom-emoji-grid::-webkit-scrollbar { display: none; }
.custom-emoji-btn {
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; border-radius: 10px;
  width: 40px; height: 40px; cursor: pointer; font-family: inherit; font-size: 19px;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, transform 0.1s ease;
  padding: 0; overflow: hidden;
}
.custom-emoji-btn img { width: 26px; height: 26px; object-fit: contain; display: block; }
.custom-emoji-btn:active { background: var(--card-border); transform: scale(0.9); }

.custom-emoji-set-switcher {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.custom-emoji-set-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 5px 6px 5px 10px; font-size: 12.5px; color: var(--text);
}
.custom-emoji-set-chip.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent-2, var(--accent));
}
.custom-emoji-set-chip [data-role="chip-label"] { cursor: pointer; }
.custom-emoji-set-remove {
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; cursor: pointer; opacity: 0.6; font-size: 12px;
}
.custom-emoji-set-remove:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

select.submission-edit-area {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
select.submission-edit-area,
select.submission-edit-area option {
  background-color: var(--card-hi);
  color: var(--text);
}

/* ---------- Десктоп: курсор миші замість тач-екрана ---------- */
/* (hover: hover) — справжня можливість навести курсор БЕЗ кліку, на відміну
   від :hover, який на тач-екранах "залипає" після тапу. Ефекти лише тут, щоб
   на телефоні інтерфейс лишався чистим (:active вже покриває тач-фідбек). */
@media (hover: hover) {
  .channel-card:hover, .source-card:hover,
  .settings-card:hover, .card-row:hover {
    background: rgba(255, 255, 255, 0.025);
  }
  .primary-btn:hover, .pill:hover, .icon-btn:hover, .info-icon-btn:hover {
    filter: brightness(1.12);
  }
  .segment:hover:not(.active) {
    border-color: var(--card-border); background: rgba(255, 255, 255, 0.08);
  }
  .nav-btn:hover:not(.active) { color: var(--text); }
}

/* Екран оплати карткою (нові класи — існуючі селектори не чіпаємо) */
.pay-sheet { text-align: left; }
.pay-sheet-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint); }
.pay-sheet-plan { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin-top: 2px; }
.pay-sheet-amount {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--accent-2); margin: 4px 0 16px;
}
.pay-sheet-req {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px;
}
.pay-sheet-req-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hint); margin-bottom: 4px; }
.pay-sheet-req-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-sheet-req-value { font-size: 18px; font-weight: 700; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; word-break: break-all; }
.pay-sheet-copy { flex-shrink: 0; margin: 0; }
.pay-sheet-note { font-size: 13px; line-height: 1.45; color: var(--text); margin: 4px 0 8px; }
.pay-sheet-hint { font-size: 12.5px; line-height: 1.45; color: var(--hint); margin: 8px 0 16px; }
.pay-sheet-error { font-size: 12px; color: var(--danger); margin-top: 8px; min-height: 0; }
.pay-sheet-success { text-align: center; padding: 8px 0 2px; }
.pay-sheet-success-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--success-bg); color: var(--success);
}
.pay-sheet-success-icon svg { width: 26px; height: 26px; }
[data-role="pay-card-btn"]:disabled { opacity: 0.6; cursor: default; }

/* Вибір способу оплати (нові класи) */
.pay-method-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 12px 14px; font-family: inherit; color: var(--text);
  text-align: left; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.pay-method-row:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.07); }
.pay-method-row:disabled { opacity: 0.55; cursor: default; }
.pay-method-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--card-hi); color: var(--accent-2);
}
.pay-method-icon svg { width: 18px; height: 18px; }
.pay-method-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-method-title { font-size: 14px; font-weight: 700; }
.pay-method-sub { font-size: 11.5px; color: var(--hint); margin-top: 1px; }
.pay-method-amount {
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-2);
  flex-shrink: 0; display: flex; align-items: center; gap: 3px;
}
.pay-method-amount svg { width: 14px; height: 14px; }

/* Відступ списку каналів від рядка «Додати канал / Вибрати» */
#channels-list-wrap { margin-top: 14px; }
#channels-list-wrap > .channel-search-row { margin-top: 0; }

/* ---------- Банер «Публікується…»: статус-картка, не "плаваюча пігулка"
   в дусі Threads (попередня версія була прямою калькою — pill-форма,
   мерехтливий градієнт по тексту, тонка лінія прогресу впритул до краю).
   Тут — власний вигляд: квадратна іконка-плитка того самого стилю, що й
   .settings-card-icon по всьому застосунку (замість голого спінера-кільця),
   прямокутна картка з дихаючою (не біжучою) підсвіткою заголовка, і прогрес
   як окрема вбудована смужка з відступами, а не лінія на самому краю. ---------- */
.pub-banner {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 28px);
  bottom: calc(max(10px, env(safe-area-inset-bottom, 0px) - 10px) + 74px); z-index: 400;
  /* Grid, не flex+wrap — "icon | text | thumb" на першому рядку, прогрес на
     всю ширину другим рядком: flex-wrap+flex-basis:100% тут ненадійний,
     бо width:fit-content на контейнері та 100%-дитина рахуються по колу. */
  display: grid; grid-template-columns: auto 1fr auto; column-gap: 11px; row-gap: 9px; padding: 11px 13px;
  background: var(--card-hi);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--card-border-hi); border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); align-items: start;
  opacity: 0; transform: translateY(18px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.pub-banner.in { opacity: 1; transform: none; }
.pub-banner.out { opacity: 0; transform: translateY(18px) scale(0.96); }
.pub-banner-icon {
  position: relative; width: 34px; height: 34px; min-width: 34px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(160deg, var(--accent-2), var(--accent-deep, var(--accent-2)));
  box-shadow: 0 4px 14px var(--accent-glow);
  animation: pubIconPulse 1.8s ease-in-out infinite;
}
.pub-banner-icon svg { width: 16px; height: 16px; }
.pub-banner-spinner { display: none; } /* заміна: дихаюча іконка-плитка замість кільця-спінера, див. pubIconPulse */
.pub-banner.done .pub-banner-icon { background: linear-gradient(160deg, var(--success), #0d9668); box-shadow: 0 4px 14px var(--success-bg); animation: none; }
.pub-banner-text { min-width: 0; padding-top: 1px; }
.pub-banner-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; color: var(--text); white-space: nowrap; }
/* Спокійне "дихання" замість біжучого градієнта-хвилі по тексту */
.pub-banner:not(.done) .pub-banner-title { animation: pubBreathe 1.8s ease-in-out infinite; }
/* Довші повідомлення («Збережено та додано в чергу публікації») тепер вміщаються
   у два рядки, а не обрізаються трьома крапками на середині слова. */
.pub-banner-sub {
  font-size: 11px; line-height: 1.3; color: var(--hint); margin-top: 1px; font-weight: 500; max-width: 220px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Явне пояснення кількості каналів замість колишнього нечитабельного «×N» у кутку мініатюри */
.pub-banner-channels { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.pub-banner-avatars { display: flex; }
.pub-banner-avatar {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 1.5px solid var(--card-hi); margin-left: -6px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.pub-banner-avatar:first-child { margin-left: 0; }
.pub-banner-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-banner-avatar-more {
  display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.pub-banner-channels-label { font-size: 11.5px; font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.pub-banner.done .pub-banner-channels-label { color: var(--success); }
.pub-banner-thumb {
  position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--card-border); color: var(--hint);
}
.pub-banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-banner-thumb svg { width: 15px; height: 15px; }
/* Прогрес — окрема вбудована смужка під текстом, з відступами по боках
   (не лінія на самому краю картки, як було раніше) */
.pub-banner-progress {
  grid-column: 1 / -1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.pub-banner-progress-fill {
  height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: pubProgress 8s cubic-bezier(.12, .6, .25, 1) forwards; transition: width 0.3s ease;
}
.pub-banner.done .pub-banner-progress-fill { background: var(--success); }
@keyframes pubIconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.92); opacity: 0.78; } }
@keyframes pubBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes pubProgress { to { width: 88%; } }
@media (prefers-reduced-motion: reduce) { .pub-banner-icon, .pub-banner:not(.done) .pub-banner-title { animation: none; } .pub-banner { transition: opacity 0.2s ease; } }

/* ---------- Мова та тема: плитки замість смуги-скролу й вузького перемикача ---------- */
.lang-grid, .theme-grid { display: grid; gap: 10px; }
.lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lang-grid .segment, .theme-grid .segment {
  position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
  box-shadow: none; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.lang-grid .segment:active, .theme-grid .segment:active { transform: scale(0.97); }
.lang-grid .segment.active, .theme-grid .segment.active {
  background: rgba(255, 255, 255, 0.06); border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 22px var(--accent-glow); color: var(--text);
}

/* Рішення користувача 2026-09-28 ("сделай красивый дизайн", скрін — "Українськ"
   обрізане на 3 колонках) — той самий вертикальний патерн, що й .theme-grid
   поруч (іконка/зразок згори по центру, підпис знизу), а не рядок іконка+текст:
   на всю ширину колонки напис уже не тиснеться повз прапор і не обрізається. */
.lang-grid .segment {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 6px 13px; border-radius: 18px; white-space: normal; text-align: center;
  color: var(--hint); font-size: 12px; font-weight: 700; letter-spacing: 0.1px;
}
.lang-grid .segment-flag-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.lang-grid .segment.active .segment-flag-icon {
  box-shadow: 0 0 0 2px var(--accent), 0 8px 18px var(--accent-glow);
  transform: scale(1.06);
}

/* Рядок поточної мови в "Мова та тема" (2026-09-28, "выбор языка по меню") —
   клік відкриває #language-modal зі списком усіх мов нижче. */
.lang-current-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s ease;
}
.lang-current-row:active { background: rgba(255, 255, 255, 0.07); }
.lang-current-flag {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.lang-current-name { flex: 1; font-size: 14.5px; font-weight: 700; }

/* Рядки самого списку в #language-modal — той самий патерн, що .set-row
   (рамка-роздільник між сусідами), лише з круглим прапором замість
   кольорової іконки-плашки. */
.lang-option-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s ease;
}
.lang-option-row + .lang-option-row { border-top: 1px solid var(--card-border); }
.lang-option-row:active { background: rgba(255, 255, 255, 0.05); }
.lang-option-flag {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.lang-option-name { flex: 1; font-size: 15px; font-weight: 700; }
.lang-option-check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  display: none; align-items: center; justify-content: center; box-shadow: 0 0 12px var(--accent-glow);
}
.lang-option-row.active .lang-option-check { display: flex; }
.lang-option-check svg { width: 12px; height: 12px; }

.theme-grid .segment {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  padding: 8px 8px 11px; border-radius: 18px; color: var(--hint); font-size: 12.5px; font-weight: 700;
}
.theme-tile-label { display: block; text-align: center; }
.theme-swatch {
  position: relative; display: block; height: 58px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); background: var(--sw-bg);
}
.theme-swatch::before {
  content: ""; position: absolute; left: 8px; top: 8px; width: 42%; height: 6px; border-radius: 6px; background: var(--sw-accent);
}
.theme-swatch::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 20px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.1);
}
.sw-violet { --sw-bg: linear-gradient(135deg, #0a0713 0%, #1c1233 55%, #3b1d6e 100%); --sw-accent: #a855f7; }
.sw-blue { --sw-bg: linear-gradient(135deg, #070b16 0%, #101a36 55%, #2f5fe0 100%); --sw-accent: #4f8bff; }
.sw-crimson { --sw-bg: linear-gradient(135deg, #08050a 0%, #1a0b14 55%, #9f1239 100%); --sw-accent: #e11d48; }

/* Позначка вибору (галочка) — тільки CSS, без картинок */
.lang-grid .segment.active::after, .theme-grid .segment.active::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
}
.lang-grid .segment.active::before, .theme-grid .segment.active::before {
  content: ""; position: absolute; z-index: 1; width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.lang-grid .segment.active::after { right: 7px; top: 7px; width: 16px; height: 16px; }
.lang-grid .segment.active::before { right: 11.5px; top: 11px; width: 7px; height: 3.5px; }
.theme-grid .segment.active::after { right: 14px; top: 14px; }
.theme-grid .segment.active::before { right: 19px; top: 19px; }

/* ---------- Меню сповіщень (iOS-стиль) ---------- */
.notify-overlay { animation: fadeIn 0.25s ease; }
.notify-sheet { padding: 10px 16px 26px; animation: sheetUp 0.42s cubic-bezier(.2, .9, .25, 1) both; }
.sheet-grabber { width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 2px auto 14px; }
.notify-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.notify-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.notify-sub { font-size: 13px; color: var(--hint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.notify-head-actions { display: flex; align-items: center; gap: 8px; }
.notify-all-btn { padding: 7px 12px; font-size: 12px; white-space: nowrap; }
.notify-group-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint); margin: 20px 6px 8px; }
.notify-group { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--card-border); border-radius: 18px; overflow: hidden; }
.notify-row {
  display: flex; align-items: center; gap: 13px; padding: 13px 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; outline: none;
}
.notify-row + .notify-row { border-top: 1px solid var(--card-border); }
.notify-row:active { background: rgba(255, 255, 255, 0.05); }
.notify-ico {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.notify-ico svg { width: 18px; height: 18px; }
.notify-body { flex: 1; min-width: 0; }
.notify-row-title { font-size: 15px; font-weight: 700; }
.notify-row-desc { font-size: 12px; color: var(--hint); line-height: 1.35; margin-top: 2px; }
.notify-foot { font-size: 12px; line-height: 1.45; color: var(--hint); margin: 16px 6px 0; }
.ios-switch {
  position: relative; flex-shrink: 0; width: 51px; height: 31px; border-radius: 999px;
  background: rgba(120, 120, 140, 0.34); transition: background 0.25s ease;
}
.ios-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.32s cubic-bezier(.34, 1.56, .64, 1), width 0.2s ease;
}
.ios-switch.on { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
.ios-switch.on::after { transform: translateX(20px); }
.notify-row:active .ios-switch::after { width: 33px; }
.notify-row:active .ios-switch.on::after { transform: translateX(14px); }
.notify-overlay.closing { animation: fadeOutQuick 0.24s ease forwards; }
.notify-overlay.closing .notify-sheet { animation: sheetDown 0.24s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes sheetUp { from { transform: translateY(46px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes sheetDown { to { transform: translateY(60px); opacity: 0; } }
@keyframes fadeOutQuick { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .notify-sheet, .notify-overlay, .notify-overlay.closing, .notify-overlay.closing .notify-sheet { animation: none; } }

/* ---------- Екран технічних робіт ---------- */
#maintenance-screen .mt-card { max-width: 360px; width: 100%; padding: 26px 22px 22px; animation: mtIn 0.55s cubic-bezier(.2, .9, .25, 1) both; }
.mt-emblem { position: relative; width: 128px; height: 128px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.mt-emblem-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(167, 139, 250, 0.38);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: mtSpin 40s linear infinite;
}
/* Дві зубчасті шестерні реально зчеплені: співвідношення зубців 12:8 →
   мала крутиться в 1.5 раза швидше й у зворотний бік. */
.mt-gears { position: relative; width: 112px; height: 112px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.mt-g { transform-origin: 46px 50px; animation: mtSpin 14s linear infinite; }
.mt-g-small { transform-origin: 84px 82px; animation: mtSpin 9.333s linear infinite reverse; }
.mt-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #f6f6fa; line-height: 1.1; }
.mt-title-en { font-size: 14px; font-weight: 600; color: #9a9aae; margin-top: 4px; }
.mt-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; color: #a78bfa; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
}
.mt-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: mtBlink 1.4s ease-in-out infinite; }
#maintenance-screen .maintenance-desc { margin-top: 14px; }
.mt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mt-tile {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px; padding: 11px 4px 9px; text-align: center;
}
.mt-tile b { display: block; font-size: 30px; font-weight: 800; line-height: 1.05; color: #f6f6fa; font-variant-numeric: tabular-nums; }
.mt-tile i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9aae; margin-top: 4px; }
#maintenance-screen .maintenance-countdown { font-size: inherit; margin-top: 4px; }
#maintenance-screen .maintenance-countdown-label { margin-top: 10px; }
.mt-bar { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 18px; }
.mt-bar span { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: linear-gradient(90deg, transparent, #8b5cf6, #34d399, transparent); animation: mtSlide 1.8s ease-in-out infinite; }
@keyframes mtIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes mtSpin { to { transform: rotate(360deg); } }
@keyframes mtPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes mtBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes mtSlide { from { left: -40%; } to { left: 102%; } }
@media (prefers-reduced-motion: reduce) { .mt-g, .mt-emblem-ring, .mt-dot, .mt-bar span, #maintenance-screen .mt-card { animation: none; } }

/* ---------- «Ще»: профіль-шапка та згруповані рядки (iOS-налаштування) ---------- */
.profile-hero {
  position: relative; overflow: hidden; text-align: center; padding: 26px 18px 20px; margin-bottom: 6px;
  border-radius: 26px; border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
.profile-hero-glow {
  position: absolute; left: 50%; top: -60px; width: 260px; height: 200px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
}
.profile-hero .profile-header-avatar {
  position: relative; width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 10px 30px var(--accent-glow);
}
.profile-hero-name { position: relative; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.profile-hero-id {
  position: relative; display: inline-block; margin-top: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--hint); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
}
.profile-hero-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.profile-hero-stat {
  padding: 12px 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
  display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--hint);
}
.profile-hero-stat b { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }

.set-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint); margin: 22px 6px 8px; }
.set-group { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--card-border); border-radius: 20px; overflow: hidden; }
.set-group-pad { padding: 16px; }
.set-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.set-sublabel { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hint); margin-bottom: 8px; }
.set-row {
  display: flex; align-items: center; gap: 13px; padding: var(--ui-row-padding-v, 13px) 14px; cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent; transition: background 0.15s ease;
}
.set-row + .set-row { border-top: 1px solid var(--card-border); }
.set-row:active { background: rgba(255, 255, 255, 0.05); }
.set-ico {
  width: calc(34px * var(--ui-icon-scale, 1)); height: calc(34px * var(--ui-icon-scale, 1)); border-radius: 10px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25);
}
.set-ico svg { width: calc(18px * var(--ui-icon-scale, 1)); height: calc(18px * var(--ui-icon-scale, 1)); }
.set-body { flex: 1; min-width: 0; }
.set-title { font-size: calc(15px * var(--ui-font-scale, 1)); font-weight: 700; }
.set-desc { font-size: calc(12px * var(--ui-font-scale, 1)); color: var(--hint); margin-top: 2px; line-height: 1.3; }
.set-chev { color: var(--hint); display: flex; flex-shrink: 0; opacity: 0.7; }
.set-chev svg { width: 16px; height: 16px; }

/* ---------- ШІ-ключ ---------- */
#tab-aikey .back-btn { margin-bottom: 10px; }
#ai-key-card { border-radius: 24px; padding: 18px 16px 16px; }
#ai-key-card > .settings-card-header { align-items: center; padding-bottom: 14px; margin-bottom: 4px; }
#ai-key-card > .settings-card-header .settings-card-icon {
  width: 46px; height: 46px; border-radius: 14px; color: #fff;
  background: linear-gradient(160deg, var(--accent-2, #c084fc), var(--accent-deep, #9333ea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px var(--accent-glow);
}
#ai-key-card > .settings-card-header .settings-card-icon svg { width: 22px; height: 22px; }
#ai-key-card .settings-card-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
#ai-key-card .settings-card-desc { font-size: 12.5px; line-height: 1.45; }
#ai-key-explain .plan-card-features li { font-size: 13px; }
#ai-key-usage-widget { padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); }
#ai-key-usage-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important; box-shadow: 0 0 10px var(--accent-glow); }
#ai-key-input { border-radius: 14px; padding: 14px 16px; font-size: 14.5px; letter-spacing: 0.02em; }
#ai-key-save-btn { border-radius: 14px; min-height: 46px; }
#ai-key-test-btn { border-radius: 14px; min-height: 46px; }
#ai-key-clear-btn { border-radius: 14px; }

/* ---------- Чат підтримки ---------- */
.support-head { align-items: center; }
.support-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.support-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #60a5fa, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.support-avatar svg { width: 21px; height: 21px; }
.support-head-main > div { min-width: 0; }
.support-head-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.support-head-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--hint); margin-top: 2px; white-space: nowrap; }
.support-head-sub span { overflow: hidden; text-overflow: ellipsis; }
.support-online { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex-shrink: 0; }
/* Переписка: плоскі акуратні блоки без «хвостиків»; свої повідомлення без підпису «Ви» */
#support-modal .chat-thread { max-height: calc(52 * var(--vh1)); gap: 8px; padding: 6px 0 10px; }
#support-modal .chat-bubble-group { max-width: 86%; gap: 4px; }
#support-modal .chat-bubble-group.from-user .chat-bubble-sender { display: none; }
#support-modal .chat-bubble-sender { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--accent-2); }
#support-modal .chat-bubble { font-size: 14.5px; line-height: 1.45; padding: 9px 13px; box-shadow: none; }
#support-modal .chat-bubble.from-support {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 6px 14px 14px 14px;
}
#support-modal .chat-bubble.from-user { border-radius: 14px 6px 14px 14px; }
#support-modal .chat-bubble-time { font-size: 11px; opacity: 0.8; }
#support-modal .chat-bubble-attachment { margin-top: 8px; }
#support-modal .chat-bubble-attachment img, #support-modal .chat-bubble-attachment video { border-radius: 9px; width: 200px; height: 150px; }
#support-modal .chat-bubble.media-only .chat-bubble-attachment img, #support-modal .chat-bubble.media-only .chat-bubble-attachment video { border-radius: 0; }
#support-chat-empty { padding: 18px 0 8px; }
#support-chat-empty .chat-bubble { font-size: 15px; padding: 14px 18px; border-radius: 14px; }
#support-modal .section-label { font-size: 11.5px; letter-spacing: 0.04em; margin-bottom: 6px; }
#support-modal .faq-chip { border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
#support-modal .chat-composer {
  border-radius: 16px; padding: 6px 6px 6px 8px; margin-top: 12px; align-items: center;
  background: rgba(255, 255, 255, 0.05); transition: border-color 0.2s ease;
}
#support-modal .chat-composer:focus-within { border-color: var(--accent); }
#support-modal .chat-composer-send {
  border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff;
}

/* ---------- Чат підтримки: доопрацювання ---------- */
#support-modal .chat-thread { gap: 6px; padding: 8px 2px 12px; scroll-behavior: smooth; }
#support-modal .chat-bubble-group { max-width: 88%; }
#support-modal .chat-bubble { padding: 10px 14px; font-size: 15px; border-radius: 18px; }
#support-modal .chat-bubble.from-support {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border-radius: 6px 18px 18px 18px;
}
#support-modal .chat-bubble.from-user { border-radius: 18px 6px 18px 18px; box-shadow: 0 6px 18px var(--accent-glow); }
#support-modal .chat-bubble-sender { display: inline-flex; align-items: center; gap: 6px; }
#support-modal .chat-bubble-sender::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #60a5fa); box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18);
}
#support-modal .chat-bubble-time { font-variant-numeric: tabular-nums; }
#support-modal .faq-chip {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); color: var(--text);
  border-radius: 999px; padding: 8px 14px; max-width: 260px; font-weight: 500;
}
#support-modal .faq-chip:active { background: var(--accent-glow); border-color: var(--accent); }
#support-modal .chat-composer {
  border-radius: 24px; padding: 6px; background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#support-modal .chat-composer:focus-within { box-shadow: 0 0 0 3px var(--accent-glow); }
#support-modal .chat-composer-send { border-radius: 50%; width: 40px; height: 40px; min-width: 40px; }
.support-delete-link {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px auto 4px; padding: 7px 12px;
  background: none; border: none; color: var(--hint); font: inherit; font-size: 12px; border-radius: 10px; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.support-delete-link svg { width: 14px; height: 14px; opacity: 0.85; }
.support-delete-link:hover, .support-delete-link:active { color: var(--danger); background: rgba(239, 68, 68, 0.08); }

/* ---------- FAQ як у ChatGPT: заголовок + вертикальні плашки ---------- */
.support-delete-link[hidden] { display: none; }
#support-modal .modal-sheet.support-sheet #support-chat-empty { flex: 0 0 auto; align-items: flex-start; justify-content: flex-start; padding: 6px 2px 0; }
#support-modal .support-empty { text-align: left; align-items: flex-start; padding: 8px 2px 2px; }
#support-modal .support-empty-ico, #support-modal .support-empty-sub { display: none; }
#support-modal .support-empty-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
#support-modal .section-label[data-i18n="faq.label"] { display: none; }
#support-modal #support-faq-chips {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; flex-shrink: 1;
  min-height: 0; margin-top: 8px; padding: 2px 2px 10px; overflow-x: hidden; overflow-y: auto;
  -webkit-mask-image: none; mask-image: none;
}
#support-modal #support-faq-chips .faq-chip {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 11px 18px 11px 11px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text); font-size: 15.5px; font-weight: 500; text-align: left;
  transition: transform 0.15s ease, background 0.15s ease;
}
#support-modal #support-faq-chips .faq-chip:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.14); }
#support-faq-chips .faq-ico {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-glow); color: var(--accent-2);
}
#support-faq-chips .faq-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#support-faq-chips .faq-more {
  align-self: flex-start; background: none; border: none; color: var(--accent-2); font: inherit;
  font-size: 14px; font-weight: 600; padding: 8px 12px; cursor: pointer;
}
#support-modal #support-faq-chips[data-expanded="0"] .faq-extra { display: none; }

/* Переписка вже почалась (порожній стан сховано): FAQ ховається за рядком «Часті запитання»,
   по тапу розкривається той самий вертикальний список плашок над полем вводу. */
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) .section-label[data-i18n="faq.label"] {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: 4px 0 6px;
  padding: 8px 4px; user-select: none;
}
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) .section-label[data-i18n="faq.label"]::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-135deg); margin-right: 6px; transition: transform 0.25s ease; opacity: 0.7;
}
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) .section-label[data-i18n="faq.label"].open::after { transform: rotate(45deg); }
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) #support-faq-chips { display: none; }
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) #support-faq-chips[data-open="1"] {
  display: flex; flex: 0 0 auto; max-height: calc(38 * var(--vh1)); padding-bottom: 6px;
}

/* ---------- Порожня черга ---------- */
.queue-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 14px;
  padding: 28px 20px 22px; border-radius: 24px; border: 1px solid var(--card-border);
  background: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, 0.16), transparent 65%), rgba(255, 255, 255, 0.03);
}
.queue-empty-ico {
  width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; color: #fff; margin-bottom: 16px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: 0 12px 30px var(--accent-glow);
}
.queue-empty-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.queue-empty-text { font-size: 13.5px; line-height: 1.5; color: var(--hint); max-width: 300px; }
.queue-empty-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; align-self: stretch; text-align: left; }
.queue-empty-step {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: 13.5px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
}
.qe-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-glow); }
.queue-empty-step:nth-child(1) .qe-dot { animation: qeBlink 2.4s ease-in-out infinite; }
.queue-empty-step:nth-child(2) .qe-dot { animation: qeBlink 2.4s ease-in-out 0.8s infinite; }
.queue-empty-step:nth-child(3) .qe-dot { animation: qeBlink 2.4s ease-in-out 1.6s infinite; }
@keyframes qeBlink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.queue-empty-actions { display: flex; gap: 8px; align-self: stretch; }
.queue-empty-actions .pill { flex: 1; justify-content: center; min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .qe-dot { animation: none !important; } }

/* ---------- Запит на видалення даних ---------- */
.sdel-sheet { max-height: calc(92 * var(--vh1)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sdel-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.sdel-list { display: flex; flex-direction: column; gap: 8px; }
.sdel-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.sdel-item:active { transform: scale(0.985); }
.sdel-item input { position: absolute; opacity: 0; pointer-events: none; }
.sdel-check {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.25); color: transparent; transition: all 0.15s ease;
}
.sdel-item input:checked ~ .sdel-check { background: var(--danger); border-color: var(--danger); color: #fff; }
.sdel-item:has(input:checked) { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); }
.sdel-item input:focus-visible ~ .sdel-check { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35); }
.sdel-item-text { font-size: 14px; line-height: 1.3; }
.sdel-note {
  margin: 12px 0 8px; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45; color: var(--hint);
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--card-border);
}
.sdel-id { font-size: 12px; color: var(--hint); margin-bottom: 8px; }
#sdel-comment {
  width: 100%; box-sizing: border-box; resize: vertical; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 12px; color: var(--text); font: inherit;
}
.sdel-confirm { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 13.5px; cursor: pointer; }
.sdel-confirm input { width: 20px; height: 20px; accent-color: var(--danger); flex-shrink: 0; }
.sdel-actions { display: flex; gap: 8px; }
.sdel-actions .pill { flex: 1; justify-content: center; min-height: 46px; }
.sdel-danger { background: var(--danger); color: #fff; border: none; }
.sdel-danger:disabled { opacity: 0.4; cursor: not-allowed; }
.sdel-pending { text-align: center; padding: 22px 8px 6px; }
.sdel-pending-ico {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(245, 194, 107, 0.12); color: #f5c26b;
}
.sdel-pending-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sdel-pending-text { font-size: 13px; line-height: 1.45; color: var(--hint); margin-bottom: 16px; }
.sdel-pending .pill { min-width: 140px; justify-content: center; }

/* ---------- Налаштування каналу: єдиний стиль із «Ще» ---------- */
.watermark-toggle { gap: 12px; }

#channel-modal .modal-header { margin-bottom: 14px; }
#channel-modal .modal-hero {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 16px; gap: 14px;
  border-radius: 22px; border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
#channel-modal .modal-hero::before {
  content: ""; position: absolute; left: -40px; top: -70px; width: 200px; height: 160px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
}
#channel-modal .modal-hero-avatar {
  position: relative; width: 64px; height: 64px; min-width: 64px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 8px 22px var(--accent-glow);
}
#channel-modal .modal-hero-info { position: relative; }
#channel-modal .modal-hero-title { font-size: 19px; }
#channel-modal .modal-hero-meta {
  display: inline-flex; margin-top: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 600; font-size: 12px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
}

/* Вкладки: липкий сегмент-контрол, що не зникає при прокрутці */
#channel-modal .modal-tab-bar {
  margin: 0 0 14px; padding: 4px;
  border-radius: 16px; background: rgba(20, 16, 34, 0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
#channel-modal .modal-tab-btn { border-radius: 12px; padding: 10px 14px; flex: 1 0 auto; }
#channel-modal .modal-tab-btn.active { box-shadow: 0 4px 14px var(--accent-glow); }

/* Картки: спокійні, без товстої лівої смуги (вона ламала заокруглення) */
#channel-modal .settings-card { border-radius: 20px; padding: 14px 14px; margin-bottom: 12px; }
#channel-modal .modal-tab-panel > .settings-card[style*="margin-top:14px"] { margin-top: 0 !important; }
#channel-modal .settings-card.state-accent-on { border-left: 1px solid rgba(52, 211, 153, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 24px rgba(52, 211, 153, 0.07); }
#channel-modal .settings-card.state-accent-off { border-left: 1px solid var(--card-border); }
#channel-modal .settings-card-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 12px; color: #fff;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25);
}
#channel-modal .settings-card.state-accent-on .settings-card-icon { background: linear-gradient(160deg, #4ade80, #16a34a); }
#channel-modal .settings-card.state-accent-off .settings-card-icon { background: linear-gradient(160deg, #6b6b80, #45455a); }
#channel-modal .settings-card-icon svg { width: 19px; height: 19px; }
#channel-modal .settings-card-title { font-size: 15.5px; font-weight: 700; }
#channel-modal .settings-card-desc { font-size: 12.5px; line-height: 1.4; }
#channel-modal .settings-card-extra { margin-top: 14px; padding-top: 14px; }
#channel-modal .settings-card-extra > .pill, #channel-modal .pill-row > .pill { border-radius: 14px; min-height: 44px; font-weight: 700; }
#channel-modal .settings-card-header.clickable:active { opacity: 1; background: rgba(255, 255, 255, 0.04); border-radius: 12px; }
#channel-modal .oblast-summary-chevron { display: flex; opacity: 0.7; }
#channel-modal .oblast-summary-chevron svg { width: 16px; height: 16px; }

/* ---------- Канал → Тривоги ---------- */
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-extra {
  margin-top: 12px; padding: 12px; border-top: none; border-radius: 14px; background: rgba(255, 255, 255, 0.035);
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
#channel-modal .chip-compact {
  min-height: 42px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04);
  color: var(--hint); font-weight: 600; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#channel-modal .chip-compact:active { transform: scale(0.98); }
#channel-modal .chip-compact.checked { color: var(--text); border-color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); }
#channel-modal .chip-compact .channel-chip-check {
  width: 18px; height: 18px; border-radius: 6px; background: var(--accent); flex: none; display: flex; align-items: center; justify-content: center;
}
#channel-modal .chip-compact .channel-chip-check svg { stroke: #fff; width: 12px; height: 12px; }
#channel-modal .chip-actions-row { display: flex; gap: 8px; margin-bottom: 10px; }
#channel-modal .chip-action-btn {
  flex: 1; min-height: 38px; border-radius: 10px; border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .pill-row > .pill { width: 100%; justify-content: center; }

/* ---------- Канал → Команда ---------- */
#channel-modal .modal-tab-panel[data-panel="team"] .section-label {
  margin: 20px 4px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint);
}
#channel-modal .modal-tab-panel[data-panel="team"] > .settings-card:first-child .settings-card-icon { background: linear-gradient(160deg, #60a5fa, #2563eb); }
#channel-modal .modal-tab-panel[data-panel="team"] .settings-card-extra { margin-top: 12px; padding: 12px; border-top: none; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
#channel-modal .modal-tab-panel[data-panel="team"] #team-members-list .settings-card { margin: 0 0 8px !important; padding: 12px 14px; }
#channel-modal .segmented { border-radius: 14px; padding: 3px; }
#channel-modal .segment { border-radius: 11px; padding: 10px 6px; }
/* Статистика */
.rank-row { padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); }
.rank-row.me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Драбина рівнів реферальної системи (2026-09-28) — той самий .rank-row, що
   й таблиця лідерів, лише зі станом: locked (ще не досягнуто — притлумлено),
   current (наступний щабель — підсвічено рамкою, той самий прийом, що й
   .rank-row.me), done (уже отримано — звичайний вигляд рядка, колір бейджа
   сам сигналізує "живий/зданий" щабель). */
.referral-level-row.referral-level-locked { opacity: 0.5; }
.referral-level-row.referral-level-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rank-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 13.5px; }
.rank-place { width: 22px; display: flex; justify-content: center; flex-shrink: 0; }
.rank-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.trend-wrap {
  display: flex; align-items: flex-end; gap: 3px; margin-top: 8px; padding: 10px 8px 6px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border);
}
.team-stat-card { margin-top: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); }
.team-stat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.team-stat-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
}
.team-stat-who { flex: 1; min-width: 0; }
.team-stat-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-stat-user { font-size: 12px; color: var(--hint); }
.team-stat-total { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--accent-glow); color: var(--accent-2); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.stat-tile { padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stat-tile b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-tile span { font-size: 10.5px; line-height: 1.25; color: var(--hint); }
.stat-tile.good b { color: var(--success); }
.stat-tile.bad b { color: var(--danger); }

/* ---------- Налаштування каналу: загальний порядок ---------- */
/* Вкладки: рівна сітка (усі 4 видно без прокрутки), значок над підписом */
#channel-modal .modal-tab-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; overflow: visible; }
#channel-modal .modal-tab-btn {
  flex-direction: column; gap: 4px; padding: 9px 4px 8px; font-size: 11.5px; min-width: 0; flex: none;
}
#channel-modal .modal-tab-btn svg { width: 20px; height: 20px; }
/* Кнопки-дії: одна логіка скрізь — головна (акцент), другорядна (скло), небезпечна (червона) */
#channel-modal .pill {
  min-height: 44px; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; justify-content: center; text-align: center; line-height: 1.2;
}
#channel-modal .pill.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px var(--accent-glow);
}
#channel-modal .btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
#channel-modal .btn-row .pill { width: 100%; }
#channel-modal .pill-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
#channel-modal .pill-row > input { grid-column: 1 / -1; }
/* Заглушка вимкнених тривог */
.alerts-off { text-align: center; padding: 34px 20px 28px; border-radius: 22px; border: 1px dashed var(--card-border-hi, var(--card-border)); background: rgba(255, 255, 255, 0.03); }
.alerts-off-ico {
  width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: var(--hint); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
}
.alerts-off-ico svg { width: 28px; height: 28px; }
.alerts-off-title { font-size: 17px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
.alerts-off-text { font-size: 13.5px; line-height: 1.5; color: var(--hint); max-width: 300px; margin: 0 auto 18px; min-height: 40px; }
.alerts-off .pill { min-width: 200px; }
/* Медіа: акуратніші повзунки, дропзона й сітка позицій */
#channel-modal input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); outline: none; margin: 8px 0 4px; }
#channel-modal input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
#channel-modal input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
#channel-modal .file-dropzone { border: 1.5px dashed var(--card-border-hi, var(--card-border)); border-radius: 16px; background: rgba(255, 255, 255, 0.03); }
#channel-modal .position-grid { max-width: 210px; gap: 8px; }
#channel-modal .position-btn { border-radius: 12px; }
#channel-modal .modal-tab-panel[data-panel="media"] .settings-card-extra { margin-top: 12px; padding: 12px; border-top: none; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card[data-role="keywords-card"] .settings-card-icon { background: linear-gradient(160deg, #fbbf24, #d97706); }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card[data-role="automation-card"] .settings-card-icon { background: linear-gradient(160deg, #2dd4bf, #0d9488); }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card[data-role="alert-monitor-card"] .settings-card-icon { background: linear-gradient(160deg, #fb7185, #e11d48); }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card[data-role="comment-mod-card"] .settings-card-icon { background: linear-gradient(160deg, #94a3b8, #475569); }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card[data-role="growth-insight-card"] .settings-card-icon { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
/* Подвійні перемикачі всередині розкритих блоків: підпис і перемикач в один рядок, підказка під ним */
#channel-modal .settings-card-extra .watermark-toggle { justify-content: space-between; flex-direction: row-reverse; font-weight: 600; font-size: 13.5px; }
#channel-modal .settings-card-extra .muted[style*="margin:-8px 0 12px 52px"],
#channel-modal .settings-card-extra .muted[style*="margin:-4px 0 0 52px"] { margin-left: 0 !important; margin-top: 2px !important; }

/* ---------- Чат підтримки (сторона користувача): фіксований каркас ---------- */
/* Шапка зверху, повідомлення прокручуються посередині, поле вводу завжди внизу. */
#support-modal .modal-sheet.support-sheet { display: flex; flex-direction: column; height: min(calc(86 * var(--vh1)), 760px); max-height: calc(86 * var(--vh1)); overflow: hidden; }
#support-modal .modal-sheet.support-sheet > * { flex-shrink: 0; }
#support-modal .modal-sheet.support-sheet > .chat-thread { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; padding: 10px 2px; }
#support-modal #support-chat-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
#support-modal #support-chat-empty[style*="display: none"], #support-modal #support-chat-empty[style*="display:none"] { display: none; }
.chat-day { align-self: center; margin: 10px 0 4px; }
.chat-day span { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--hint); background: rgba(255, 255, 255, 0.06); }
#support-modal .chat-bubble:has(.chat-bubble-attachment):not(.media-only) { padding: 6px; }
#support-modal .chat-bubble:has(.chat-bubble-attachment):not(.media-only) { white-space: pre-wrap; }
#support-modal .chat-bubble.from-user { box-shadow: 0 4px 14px var(--accent-glow); }
#support-modal .chat-bubble-time { padding: 0 4px; }
#support-modal .faq-chip-row { flex-shrink: 0; }
#support-modal .chat-composer { flex-shrink: 0; margin-bottom: 4px; }
#support-modal #support-status:empty { display: none; }
#support-modal .chat-thread { scrollbar-width: none; } #support-modal .chat-thread::-webkit-scrollbar { display: none; }

/* =====================================================================
   Чат підтримки — власний «месенджерний» стиль (сторона користувача)
   ===================================================================== */
#support-modal .support-head {
  padding: 12px 12px 12px 14px; margin-bottom: 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.26), color-mix(in srgb, var(--accent) 26%, transparent) 60%, rgba(236, 72, 153, 0.18));
  position: relative; overflow: hidden;
}
#support-modal .support-head::after {
  content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
}
#support-modal .support-avatar { border-radius: 14px; background: linear-gradient(150deg, #60a5fa, #8b5cf6); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45); }
#support-modal .support-head-sub { color: rgba(255, 255, 255, 0.72); }
#support-modal .support-head .icon-btn, #support-modal .support-head .modal-close { background: rgba(255, 255, 255, 0.12); border: none; border-radius: 12px; }
/* Порожній стан */
.support-empty { text-align: center; padding: 10px 24px; }
.support-empty-ico {
  width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, #60a5fa, #8b5cf6); box-shadow: 0 12px 30px rgba(99, 102, 241, 0.4); transform: rotate(-6deg);
}
.support-empty-ico svg { width: 34px; height: 34px; }
.support-empty-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.support-empty-sub { font-size: 13.5px; line-height: 1.5; color: var(--hint); max-width: 280px; margin: 0 auto; }
/* Повідомлення */
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.chat-msg.from-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.from-support { align-self: flex-start; }
.chat-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, #60a5fa, #8b5cf6);
}
.chat-avatar svg { width: 14px; height: 14px; }
.chat-msg .chat-bubble { max-width: 100%; padding: 9px 12px 7px; font-size: 14.5px; line-height: 1.4; position: relative; }
.chat-msg .chat-bubble.from-user {
  background: linear-gradient(140deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff; border: none; border-radius: 18px 18px 4px 18px;
  box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.chat-msg .chat-bubble.from-support {
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--card-border); border-radius: 18px 18px 18px 4px;
}
.chat-bubble-time.in { float: right; margin: 6px 0 0 12px; padding: 0; font-size: 10.5px; line-height: 1; opacity: 0.65; color: inherit; }
.chat-msg .chat-bubble::after { content: ""; display: table; clear: both; }
.chat-msg .chat-bubble.media-only { padding: 0; overflow: hidden; }
.chat-msg .chat-bubble.media-only .chat-bubble-time.in {
  position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 3px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; opacity: 1;
}
.chat-msg .chat-bubble-attachment { margin: 6px 0 4px; clear: both; }
/* Поле вводу: кнопка «оживає», коли є текст */
#support-modal .chat-composer { border-radius: 16px; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }
#support-modal .chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#support-modal .chat-composer:has(textarea:placeholder-shown) .chat-composer-send { opacity: 0.4; box-shadow: none; transform: scale(0.94); }
#support-modal .chat-composer-send { transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.34, 1.6, .5, 1), box-shadow 0.2s ease; box-shadow: 0 6px 16px var(--accent-glow); }
#support-modal .faq-chip { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); border-radius: 12px; }

/* =====================================================================
   Налаштування каналу — власний плоский стиль (без «айфонних» елементів):
   підкреслені вкладки, прямокутні перемикачі, плоскі іконки й картки
   ===================================================================== */
#channel-modal .modal-hero { background: none; border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; padding: 4px 0 16px; margin-bottom: 4px; }
#channel-modal .modal-hero::before { display: none; }
#channel-modal .modal-hero-avatar { border-radius: 16px; box-shadow: none; width: 58px; height: 58px; min-width: 58px; }
#channel-modal .modal-hero-avatar img { border-radius: 16px; }
#channel-modal .modal-hero-meta { background: none; border: none; padding: 0; }
/* Вкладки: підкреслення замість сегмент-контролу */
#channel-modal .modal-tab-bar { background: none; border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; padding: 0; gap: 0; margin: 0 0 16px; }
#channel-modal .modal-tab-btn { border-radius: 0; background: none; color: var(--hint); padding: 12px 4px 11px; box-shadow: inset 0 -2px 0 transparent; }
#channel-modal .modal-tab-btn.active { background: none; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
#channel-modal .modal-tab-btn.active svg { color: var(--accent-2); }
/* Картки: плоскі, менше скруглення */
#channel-modal .settings-card { border-radius: 14px; background: rgba(255, 255, 255, 0.03); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
#channel-modal .settings-card.state-accent-on { border-color: rgba(52, 211, 153, 0.45); box-shadow: none; }
#channel-modal .settings-card-extra, #channel-modal .modal-tab-panel .settings-card-extra { border-radius: 10px; background: rgba(255, 255, 255, 0.025); }
/* Кнопки й контроли — прямокутніші */
#channel-modal .pill { border-radius: 10px; }
#channel-modal .pill.primary { box-shadow: none; }
#channel-modal .segmented { border-radius: 10px; padding: 3px; }
#channel-modal .segment { border-radius: 8px; }
#channel-modal .chip-compact { border-radius: 8px; }
#channel-modal .chip-compact .channel-chip-check { border-radius: 4px; }
#channel-modal .stat-tile, #channel-modal .rank-row, #channel-modal .team-stat-card, #channel-modal .trend-wrap { border-radius: 10px; }
#channel-modal .team-stat-avatar { border-radius: 8px; }
#channel-modal input[type="text"], #channel-modal input[type="number"] { border-radius: 10px; }
.alerts-off { border-radius: 14px; }
.alerts-off-ico { border-radius: 12px; }

/* ---------- Текстовий водяний знак (Головна, розкривна картка) ---------- */
.wmt-preview {
  min-height: 110px; padding: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-conic-gradient(#1c1f2b 0% 25%, #232736 0% 50%) 50% / 18px 18px; border: 1px solid var(--card-border);
}
.wmt-preview img { max-width: 100%; max-height: 150px; display: block; }
.wmt-label { margin: 16px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hint); }
.wmt-label b { color: var(--text); font-weight: 800; }
[data-role="wm-text-panel"] textarea { width: 100%; min-height: 64px; resize: none; }
.wmt-select { width: 100%; min-height: 44px; }
.wmt-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wmt-btn {
  min-width: 42px; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--card-border); cursor: pointer;
  background: rgba(255, 255, 255, 0.05); color: var(--text); font-family: inherit; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
}
.wmt-btn svg { width: 18px; height: 18px; }
.wmt-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.wmt-sep { width: 1px; height: 24px; background: var(--card-border); margin: 0 4px; }
.wmt-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.wmt-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--card-border); cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.wmt-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.wmt-swatch-custom { background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); }
.wmt-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wmt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.wmt-row-end { display: inline-flex; align-items: center; gap: 10px; }
.wmt-color-input { width: 32px; height: 28px; padding: 0; border: 1px solid var(--card-border); border-radius: 6px; background: none; cursor: pointer; }

/* Кнопки в картці публікації: у колонку, в один рядок кожна — без переносу тексту на 3 рядки */
#channel-modal .btn-row { grid-template-columns: 1fr; }
#channel-modal .btn-row .pill { justify-content: flex-start; text-align: left; min-height: 44px; gap: 10px; }

/* ---------- Тех-підтримка: шаблони відповідей (FAQ) ---------- */
.faq-tpl-list { flex-direction: column; gap: 6px; margin-top: 10px; max-height: 240px; overflow-y: auto; padding: 2px; scrollbar-width: none; }
.faq-tpl-list::-webkit-scrollbar { display: none; }
.faq-tpl {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); border-left: 3px solid var(--accent); border-radius: 8px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.faq-tpl:active { transform: scale(0.99); background: var(--accent-glow); }
.faq-tpl-num {
  flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--accent);
}
.faq-tpl-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.faq-tpl-q { font-size: 13px; font-weight: 700; line-height: 1.3; }
.faq-tpl-a { font-size: 11.5px; color: var(--hint); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* =====================================================================
   Канал → Головна: компактна «мозаїка» замість довгого стовпчика карток
   ===================================================================== */
#channel-modal .modal-tab-panel[data-panel="main"].active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
#channel-modal .modal-tab-panel[data-panel="main"] > * { grid-column: 1 / -1; margin: 0 !important; min-width: 0; }
#channel-modal .modal-tab-panel[data-panel="main"] > .settings-card { padding: 12px 14px; border-radius: 12px; }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card-title { font-size: 14.5px; }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card-desc { font-size: 12px; line-height: 1.35; margin-top: 1px; }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; }
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card-icon svg { width: 17px; height: 17px; }
/* Стан вкл/викл — лише кольором іконки та перемикача, без рамки навколо всієї картки */
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card.state-accent-on { border-color: var(--card-border); }

/* Рядки-списки: одна щільна лінія, опис в один рядок */
#channel-modal .modal-tab-panel[data-panel="main"] [data-role="keywords-card"] .settings-card-desc,
#channel-modal .modal-tab-panel[data-panel="main"] [data-role="automation-card"] .settings-card-desc,
#channel-modal .modal-tab-panel[data-panel="main"] [data-role="publish-card"] .settings-card-desc {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Плитки 1×1: значок і перемикач зверху, назва й підпис під ними */
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="alert-monitor-card"],
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="comment-mod-card"] { grid-column: auto; display: flex; flex-direction: column; }
#channel-modal [data-role="alert-monitor-card"] .settings-card-header,
#channel-modal [data-role="comment-mod-card"] .settings-card-header {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 10px; align-items: center; flex: 1;
}
#channel-modal [data-role="alert-monitor-card"] .settings-card-body,
#channel-modal [data-role="comment-mod-card"] .settings-card-body { grid-column: 1 / -1; grid-row: 2; align-self: start; }
#channel-modal [data-role="alert-monitor-card"] .watermark-toggle,
#channel-modal [data-role="comment-mod-card"] .watermark-toggle { grid-column: 3; grid-row: 1; }
#channel-modal [data-role="comment-mod-card"] .muted[data-role="comment-mod-stats"] {
  font-size: 11px !important; margin-top: 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Публікація новин: широка картка, дві компактні кнопки в одному ряду */
#channel-modal .settings-card-extra.btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; background: none; margin-top: 12px; }
#channel-modal .btn-row .pill { justify-content: center; text-align: center; min-height: 38px; padding: 8px 10px; font-size: 12.5px; gap: 6px; white-space: nowrap; }

/* ШІ-інсайт: тонка смуга-нотатка */
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="growth-insight-card"] { border-left: 3px solid var(--accent); }
#channel-modal [data-role="growth-insight-card"] .settings-card-desc { font-size: 12.5px; }

/* =====================================================================
   Налаштування каналу — стиль розділу «Ще»: кольорові плитки-іконки,
   підписи секцій, картки-групи, плитки вибору з галочкою
   ===================================================================== */
/* Шапка каналу — як шапка профілю */
#channel-modal .modal-hero {
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 16px; gap: 14px; border-radius: 22px; border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}
#channel-modal .modal-hero::before {
  display: block; content: ""; position: absolute; left: -40px; top: -70px; width: 200px; height: 160px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 70%);
}
#channel-modal .modal-hero-avatar { border-radius: 50%; width: 64px; height: 64px; min-width: 64px; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 8px 22px var(--accent-glow); }
#channel-modal .modal-hero-avatar img { border-radius: 50%; }
/* Підписи секцій */
#channel-modal .set-label { margin: 22px 6px 8px; }
#channel-modal .modal-tab-panel > .set-label:first-child, #channel-modal [data-role="alerts-config-block"] > .set-label:first-child { margin-top: 2px; }
#channel-modal .modal-tab-panel[data-panel="main"] > .set-label { grid-column: 1 / -1; }
/* Картки-групи */
#channel-modal .settings-card { border-radius: 20px; background: rgba(255, 255, 255, 0.045); }
#channel-modal .modal-tab-panel[data-panel="main"] > .settings-card { border-radius: 16px; }
#channel-modal .settings-card-extra, #channel-modal .modal-tab-panel .settings-card-extra { border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
/* Кольорові градієнтні плитки-іконки */
#channel-modal .settings-card-icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px; color: #fff; border: none;
  background: linear-gradient(160deg, var(--accent-2, #c084fc), var(--accent-deep, #9333ea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25);
}
#channel-modal .modal-tab-panel[data-panel="main"] .settings-card-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; }
#channel-modal [data-tone="green"] .settings-card-icon, #channel-modal [data-role="publish-card"].state-accent-on .settings-card-icon { background: linear-gradient(160deg, #4ade80, #16a34a); }
#channel-modal [data-tone="red"] .settings-card-icon, #channel-modal [data-role="alert-monitor-card"] .settings-card-icon { background: linear-gradient(160deg, #fb7185, #e11d48); }
#channel-modal [data-tone="amber"] .settings-card-icon, #channel-modal [data-role="keywords-card"] .settings-card-icon { background: linear-gradient(160deg, #fbbf24, #d97706); }
#channel-modal [data-tone="blue"] .settings-card-icon { background: linear-gradient(160deg, #60a5fa, #2563eb); }
#channel-modal [data-tone="sky"] .settings-card-icon { background: linear-gradient(160deg, #38bdf8, #0284c7); }
#channel-modal [data-tone="pink"] .settings-card-icon { background: linear-gradient(160deg, #f472b6, #c026d3); }
#channel-modal [data-tone="violet"] .settings-card-icon, #channel-modal [data-role="growth-insight-card"] .settings-card-icon { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
#channel-modal [data-role="automation-card"] .settings-card-icon { background: linear-gradient(160deg, #2dd4bf, #0d9488); }
#channel-modal [data-role="comment-mod-card"] .settings-card-icon { background: linear-gradient(160deg, #94a3b8, #475569); }
#channel-modal [data-role="publish-card"].state-accent-off .settings-card-icon { background: linear-gradient(160deg, #7c7c92, #4a4a5e); }
#channel-modal .settings-card.state-accent-on { border-color: var(--card-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* Перемикачі й кнопки — заокруглені, як у решті «Ще» */
#channel-modal .watermark-switch, #channel-modal .switch { width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
#channel-modal .watermark-switch::after, #channel-modal .switch::after { top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; }
#channel-modal .watermark-switch.on, #channel-modal .switch.on { background: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
#channel-modal .watermark-switch.on::after, #channel-modal .switch.on::after { transform: translateX(18px); }
#channel-modal .pill { border-radius: 14px; }
#channel-modal .pill.primary { box-shadow: 0 6px 16px var(--accent-glow); }
#channel-modal input[type="text"], #channel-modal input[type="number"], #channel-modal textarea { border-radius: 14px; }
/* Плитки вибору з галочкою (області, типи цілей, райони) */
#channel-modal .chip-compact { position: relative; min-height: 46px; padding: 10px 34px 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); color: var(--hint); }
#channel-modal .chip-compact.checked {
  color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 16px var(--accent-glow);
}
#channel-modal .chip-compact .channel-chip-check {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
#channel-modal .chip-compact .channel-chip-check svg { width: 12px; height: 12px; stroke: #fff; }
#channel-modal .chip-action-btn { border-radius: 12px; }
/* Сегменти (Editor/Moderator, періоди статистики) — як плитки мови й теми */
#channel-modal .segmented { background: none; border: none; padding: 0; gap: 8px; border-radius: 0; }
#channel-modal .segment {
  border: 1px solid var(--card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.04); padding: 12px 6px; font-weight: 700; color: var(--hint);
}
#channel-modal .segment.active { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); }
/* Сітка позицій водяного знака та плитки статистики */
#channel-modal .position-btn { border-radius: 12px; }
#channel-modal .position-btn.active { box-shadow: 0 0 14px var(--accent-glow); }
#channel-modal .stat-tile, #channel-modal .rank-row, #channel-modal .team-stat-card, #channel-modal .trend-wrap { border-radius: 14px; }
#channel-modal .team-stat-avatar { border-radius: 11px; }
#channel-modal .wmt-btn { border-radius: 12px; }
#channel-modal .wmt-swatch { border-radius: 10px; }
.alerts-off { border-radius: 20px; }
.alerts-off-ico { border-radius: 16px; }
#channel-modal .modal-tab-btn.active svg { color: var(--accent-2); }

/* =====================================================================
   Чат підтримки: фон-шпалери й нові бульбашки
   ===================================================================== */
#support-modal .modal-sheet.support-sheet > .chat-thread {
  position: relative; margin: 4px -2px 8px; padding: 14px 12px; border-radius: 20px; gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 42%),
    radial-gradient(circle at 92% 30%, rgba(236, 72, 153, 0.20), transparent 40%),
    radial-gradient(circle at 20% 95%, rgba(59, 130, 246, 0.26), transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(20, 15, 38, 0.95), rgba(10, 8, 22, 0.98));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}
/* Повідомлення користувача: насичений діагональний градієнт із глянцем */
.chat-msg .chat-bubble.from-user {
  background: linear-gradient(135deg, #a78bfa 0%, var(--accent) 45%, #c026d3 100%);
  color: #fff; border: none; border-radius: 20px 20px 6px 20px; padding: 10px 14px 8px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.chat-msg .chat-bubble.from-user::before {
  content: ""; position: absolute; inset: 0 0 55% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
}
/* Відповіді підтримки: матове скло */
.chat-msg .chat-bubble.from-support {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px 20px 20px 6px; padding: 10px 14px 8px;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.chat-msg .chat-bubble { font-size: 15px; line-height: 1.42; }
/* Година — маленька «пігулка» в кутку */
.chat-bubble-time.in {
  float: right; margin: 6px -4px -2px 12px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; line-height: 1.4; opacity: 1;
  background: rgba(0, 0, 0, 0.22); color: rgba(255, 255, 255, 0.85);
}
.chat-msg .chat-bubble.from-support .chat-bubble-time.in { background: rgba(255, 255, 255, 0.10); color: var(--hint); }
/* Вкладення: рамка з тонкою обводкою */
.chat-msg .chat-bubble-attachment { margin: 8px 0 4px; }
.chat-msg .chat-bubble-attachment img, .chat-msg .chat-bubble-attachment video {
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.chat-msg .chat-bubble.media-only { overflow: hidden; }
.chat-msg .chat-bubble.media-only img, .chat-msg .chat-bubble.media-only video { border-radius: 0; box-shadow: none; }
.chat-msg .chat-bubble.media-only::before { display: none; }
/* Аватар підтримки — з кільцем */
.chat-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(99, 102, 241, 0.4); }
/* Роздільник дня на шпалерах */
#support-modal .chat-day span { background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* =====================================================================
   Розвантаження: згорнуті блоки, компактні чипи, менше службового тексту
   ===================================================================== */
/* Фільтр за словами: компактні «пігулки» замість великих кнопок */
#channel-modal [data-role="keywords-list"], #channel-modal [data-role="keyword-suggestions"] {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px;
}
#channel-modal [data-role="keywords-list"]:empty { display: none; }
#channel-modal [data-role="keywords-panel"] .chip-compact {
  min-height: 0; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 12.5px; gap: 4px; flex: 0 0 auto; box-shadow: none; color: var(--text);
}
#channel-modal [data-role="keywords-panel"] .chip-compact span { flex: 0 1 auto; }
#channel-modal [data-role="keywords-panel"] .chip-compact svg { width: 13px; height: 13px; }
#channel-modal [data-role="keyword-suggestions"] .chip-compact { color: var(--hint); background: transparent; border-style: dashed; }
#channel-modal [data-role="keywords-panel"] .pill-row { display: flex; gap: 8px; margin: 0 0 12px; }
#channel-modal [data-role="keywords-panel"] .pill-row > input { flex: 1; min-width: 0; grid-column: auto; margin: 0; }
#channel-modal [data-role="keywords-panel"] .pill-row > .pill { flex: none; width: auto; min-width: 96px; }
#channel-modal [data-role="keywords-panel"] .muted { font-size: 11.5px; margin-top: 6px; }
/* Тривоги: налаштування картки ховаються, поки її перемикач вимкнений */
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card:has(> .settings-card-header > .watermark-switch:not(.on)) > .settings-card-extra { display: none; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card { margin-bottom: 8px; }
/* Команда: картки учасників статистики згорнуті, тап розкриває */
.team-stat-card .stat-tiles { display: none; margin-top: 12px; }
.team-stat-card.open .stat-tiles { display: grid; }
.team-stat-card .team-stat-head { margin-bottom: 0; cursor: pointer; }
.team-stat-head::after {
  content: ""; width: 8px; height: 8px; margin: 0 4px 0 2px; flex: none; border-right: 2px solid var(--hint); border-bottom: 2px solid var(--hint);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.team-stat-card.open .team-stat-head::after { transform: rotate(-135deg); }
#channel-modal .modal-tab-panel[data-panel="team"] .muted[style*="margin:-8px 0 10px"] { display: none; }
/* Медіа: спокійніші підписи повзунків і компактніша дропзона */
#channel-modal .modal-tab-panel[data-panel="media"] .section-label { margin-top: 14px !important; font-size: 11.5px !important; letter-spacing: 0.04em; text-transform: none; color: var(--text); font-weight: 700; }
#channel-modal .modal-tab-panel[data-panel="media"] .section-label span { color: var(--accent-2); font-weight: 800; }
#channel-modal .modal-tab-panel[data-panel="media"] .file-dropzone { padding: 12px; }
#channel-modal .modal-tab-panel[data-panel="media"] .file-dropzone .muted { display: none; }
#channel-modal .modal-tab-panel[data-panel="media"] .muted[style*="margin:2px 0 0 52px"] { margin: 4px 0 0 !important; font-size: 11px !important; }
/* Загальне: менше зайвого повітря між картками вкладок */
#channel-modal .modal-tab-panel:not([data-panel="main"]) > .settings-card { margin-bottom: 8px; }
#channel-modal .modal-tab-panel .set-label { margin-top: 18px; }

/* =====================================================================
   Чат підтримки — спокійний стиль додатку (як розділ «Ще»): без кислотних
   градієнтів і свічення, темні картки, акцент лише на власних повідомленнях
   ===================================================================== */
#support-modal .support-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--card-border);
}
#support-modal .support-head::after { display: none; }
#support-modal .support-avatar { background: linear-gradient(160deg, #60a5fa, #2563eb); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.25); }
#support-modal .support-head-sub { color: var(--hint); }
#support-modal .support-head .icon-btn, #support-modal .support-head .modal-close { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); }
/* Поле переписки: рівна темна картка з ледь помітним відблиском */
#support-modal .modal-sheet.support-sheet > .chat-thread {
  border: 1px solid var(--card-border); border-radius: 20px; box-shadow: none;
  background:
    radial-gradient(circle at 0% 0%, var(--accent-glow), transparent 38%),
    rgba(255, 255, 255, 0.025);
}
/* Мої повідомлення — акцентний колір додатку, без глянцю й свічення */
.chat-msg .chat-bubble.from-user {
  background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2)));
  border-radius: 18px 18px 6px 18px; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.chat-msg .chat-bubble.from-user::before { display: none; }
/* Відповіді — звичайна темна картка */
.chat-msg .chat-bubble.from-support {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 18px 18px 18px 6px;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.chat-bubble-time.in { background: none; padding: 0; margin: 6px 0 -1px 12px; font-size: 10.5px; color: rgba(255, 255, 255, 0.6); }
.chat-msg .chat-bubble.from-support .chat-bubble-time.in { background: none; color: var(--hint); }
.chat-msg .chat-bubble.media-only .chat-bubble-time.in { background: rgba(0, 0, 0, 0.55); padding: 3px 7px; color: #fff; }
.chat-msg .chat-bubble-attachment img, .chat-msg .chat-bubble-attachment video { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); border-radius: 12px; }
.chat-avatar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); background: linear-gradient(160deg, #60a5fa, #2563eb); }
#support-modal .chat-day span { background: rgba(255, 255, 255, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--hint); }
/* Швидкі питання й поле вводу — картки як у «Ще» */
#support-modal .faq-chip { background: rgba(255, 255, 255, 0.045); border: 1px solid var(--card-border); border-radius: 14px; color: var(--text); padding: 9px 14px; }
#support-modal .faq-chip:active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#support-modal .section-label { margin: 6px 4px 8px; }
#support-modal .chat-composer { background: rgba(255, 255, 255, 0.045); border-color: var(--card-border); border-radius: 18px; }
#support-modal .chat-composer:focus-within { border-color: var(--accent); box-shadow: none; }
#support-modal .chat-composer-send { box-shadow: none; }
.support-empty-ico { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transform: none; background: linear-gradient(160deg, #60a5fa, #2563eb); }
#support-modal .chat-msg .chat-bubble.from-user { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* =====================================================================
   Чат підтримки — повноекранний, адаптивний під екран телефона:
   шапка-смуга, переписка на весь простір, поле вводу прибите донизу
   з урахуванням вирізів (safe-area) і нижньої жестової смуги
   ===================================================================== */
@media (max-width: 520px) {
  #support-modal.modal-overlay { align-items: stretch; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #support-modal .modal-sheet.support-sheet {
    max-width: none; width: 100%; height: calc(100 * var(--vh1)); height: calc(100 * var(--dvh1)); max-height: none; border: none; border-radius: 0; box-shadow: none; animation: none;
    padding: calc(46px + env(safe-area-inset-top)) 0 0;
    background:
      radial-gradient(circle at 0% 0%, var(--accent-glow), transparent 34%),
      var(--bg);
  }
  #support-modal .support-sheet > .sheet-grabber, #support-modal .support-sheet::before { display: none; }
  /* Шапка — проста смуга без рамки-картки */
  #support-modal .support-head {
    margin: 0; padding: 4px 16px 12px; border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; background: none; overflow: visible;
  }
  /* Переписка — на всю ширину, без внутрішньої рамки */
  #support-modal .modal-sheet.support-sheet > .chat-thread {
    margin: 0; padding: 14px 14px 10px; border: none; border-radius: 0; background: none; box-shadow: none; gap: 8px;
  }
  #support-modal #support-chat-empty { padding: 0 24px; }
  /* Нижня панель: швидкі питання + поле вводу */
  #support-modal .support-sheet > .section-label { display: none; }
  #support-modal .faq-chip-row { margin: 0; padding: 8px 14px 6px; border-top: 1px solid var(--card-border); }
  #support-modal #support-faq-suggest { padding: 0 14px; }
  #support-modal .chat-composer {
    margin: 0; border-radius: 0; border: none; border-top: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) 10px;
  }
  #support-modal .chat-composer:focus-within { box-shadow: none; }
  #support-modal .chat-composer textarea { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 16px; padding: 10px 14px; }
  #support-modal #support-status { padding: 0 16px; margin: 0; }
  #support-modal .chat-msg { max-width: 86%; }
}

/* Відступи всередині розкритих блоків: вміст не липне до країв */
#channel-modal .settings-card-extra:not(.btn-row), #channel-modal .modal-tab-panel[data-panel="main"] .settings-card-extra:not(.btn-row) {
  margin-top: 12px; padding: 14px; border-top: none;
}
#channel-modal [data-role="keywords-panel"] > div:has(> [data-action="keywords-clear-all"][style*="none"]) { display: none; }
#channel-modal [data-role="keywords-panel"] > .muted:first-of-type, #channel-modal [data-role="keywords-list"] .muted { padding: 0; }
/* ШІ-інсайт: акцентна смуга всередині контуру, а не товста рамка, що ламає скруглення */
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="growth-insight-card"] { border-left: 1px solid var(--card-border); box-shadow: inset 3px 0 0 var(--accent); }

/* =====================================================================
   Чат: кнопки (історія, закрити, вкладення, відправка) — один комплект
   ===================================================================== */
#support-modal .support-head .icon-btn, #support-modal .support-head .modal-close {
  width: 40px !important; height: 40px !important; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; color: var(--text); transition: background 0.15s ease, transform 0.15s ease;
}
#support-modal .support-head .icon-btn:active, #support-modal .support-head .modal-close:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.12); }
#support-modal .support-head .icon-btn svg, #support-modal .support-head .modal-close svg { width: 19px !important; height: 19px !important; }
#support-modal .chat-composer { align-items: center; gap: 8px; }
#support-modal .chat-composer .icon-btn {
  width: 42px !important; height: 42px !important; flex: none; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); color: var(--hint);
  display: flex; align-items: center; justify-content: center; transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
#support-modal .chat-composer .icon-btn:active { transform: scale(0.94); color: var(--text); background: rgba(255, 255, 255, 0.12); }
#support-modal .chat-composer .icon-btn svg { width: 20px !important; height: 20px !important; }
#support-modal .chat-composer-send {
  width: 42px; height: 42px; flex: none; border-radius: 14px; border: none; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2))); opacity: 1; transform: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#support-modal .chat-composer-send svg { width: 20px; height: 20px; }
#support-modal .chat-composer-send:active { transform: scale(0.93); }
/* Порожнє поле — нейтральна кнопка, є текст — акцентна */
#support-modal .chat-composer:has(textarea:placeholder-shown) .chat-composer-send {
  background: rgba(255, 255, 255, 0.06); color: var(--hint); opacity: 1; box-shadow: none; transform: none; border: 1px solid var(--card-border);
}

/* Фільтр слів: виправлення накладання «×» на слово, компактні службові кнопки */
#channel-modal [data-role="keywords-list"] .chip-compact { padding: 6px 6px 6px 12px; gap: 6px; }
#channel-modal [data-role="keywords-list"] .chip-compact .channel-chip-check {
  position: static; transform: none; width: 20px; height: 20px; flex: none; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); cursor: pointer;
}
#channel-modal [data-role="keywords-list"] .chip-compact .channel-chip-check svg { width: 11px; height: 11px; stroke: var(--text); }
#channel-modal [data-role="keywords-list"] .chip-compact .channel-chip-check:active { background: var(--danger); }
#channel-modal [data-role="keywords-panel"] [data-action="keywords-clear-all"] {
  min-height: 32px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; gap: 5px;
  background: none; border: 1px solid rgba(239, 68, 68, 0.4); color: var(--danger);
}
#channel-modal [data-role="keywords-panel"] [data-action="keywords-clear-all"] svg { width: 14px; height: 14px; }
#channel-modal [data-role="keywords-count-badge"] {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--accent-glow); color: var(--accent-2); border: none;
}
#channel-modal [data-role="keywords-card"] .settings-card-title { white-space: normal; }

/* ---------- Тривоги: попередній перегляд повідомлення ---------- */
.alert-preview { border-radius: 20px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.alert-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--card-border); }
.alert-preview-title { font-size: 13px; font-weight: 700; color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-preview-test {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
}
.alert-preview-test svg { width: 14px; height: 14px; }
.alert-preview-test:active { background: var(--accent-glow); border-color: var(--accent); }
.alert-preview-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; min-height: 60px; }
.alert-msg {
  align-self: flex-start; max-width: 92%; padding: 9px 13px; border-radius: 4px 16px 16px 16px; font-size: 13.5px; line-height: 1.4;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--card-border);
}
.alert-msg-ok { border-color: rgba(74, 222, 128, 0.4); }
.alert-msg-note { margin-top: 4px; font-size: 11.5px; color: var(--hint); }

/* ---------- Команда: лінійний графік активності ---------- */
.tl-chart {
  padding: 14px 12px 12px; border-radius: 20px; border: 1px solid var(--card-border);
  background: radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.16), transparent 55%), rgba(255, 255, 255, 0.03);
}
.tl-chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; overflow: visible; }
.tl-caption { min-height: 18px; margin: 8px 4px 2px; font-size: 12px; color: var(--hint); line-height: 1.4; }
.tl-caption b { color: var(--text); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 4px 0; }
.tl-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
.tl-legend-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ---------- Тривоги / Медіа: один згрупований блок без заголовків секцій ---------- */
#channel-modal .modal-tab-panel[data-panel="alerts"] .set-label, #channel-modal .modal-tab-panel[data-panel="media"] .set-label { display: none; }
#channel-modal .settings-card.grp { margin: 0 0 -1px !important; border-radius: 0; }
#channel-modal .settings-card.grp-first { border-radius: 20px 20px 0 0; }
#channel-modal .settings-card.grp-last { border-radius: 0 0 20px 20px; margin-bottom: 0 !important; }
#channel-modal .settings-card.grp-first.grp-last { border-radius: 20px; }
#channel-modal .alert-preview { margin-top: 14px; }
/* Стрілка згортання біля перемикача */
#channel-modal .settings-card-header > .oblast-summary-chevron { margin-left: auto; margin-right: 6px; }
#channel-modal .settings-card-header > .oblast-summary-chevron + .watermark-toggle, #channel-modal .settings-card-header > .oblast-summary-chevron + .watermark-switch { margin-left: 0; }

/* =====================================================================
   Медіа: розвантаження налаштувань знака + плавні переходи в меню каналу
   ===================================================================== */
/* Живий перегляд: компактніше */
#channel-modal .wm-live-preview-wrap { max-width: 260px; margin: 0 auto; }
/* Прозорість і розмір — два повзунки в одному рядку */
#channel-modal [data-role="wm-opacity-slider"], #channel-modal [data-role="wm-scale-slider"] { margin-top: 4px; }
#channel-modal .modal-tab-panel[data-panel="media"] .section-label { margin-top: 12px !important; }
/* Позиції: маленька сітка 3×3 замість великих плиток */
#channel-modal .position-grid {
  display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 32px); gap: 6px; max-width: none; margin: 8px 0 4px;
  padding: 8px; width: fit-content; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
}
#channel-modal .position-btn { min-height: 0; height: 100%; width: 100%; border-radius: 8px; padding: 0; }
#channel-modal .position-btn .dot { width: 6px; height: 6px; }
/* Рух знака: сітка плиток 3×2 і один короткий рядок-пояснення */
#channel-modal .wm-motion-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#channel-modal .wm-motion-grid .segment { padding: 10px 4px; font-size: 12.5px; white-space: nowrap; }
#channel-modal .wm-motion-hint { min-height: 16px; margin: 8px 2px 0; font-size: 11.5px; line-height: 1.35; }
#channel-modal [data-role="wm-animate-switch"] { margin-left: auto; }
#channel-modal .modal-tab-panel[data-panel="media"] .watermark-toggle { margin-top: 12px; }

/* ---------- Плавне перемикання вкладок ---------- */
#channel-modal .modal-tab-bar { position: relative; }
#channel-modal .modal-tab-btn, #channel-modal .modal-tab-btn.active { box-shadow: none; }
#channel-modal .modal-tab-bar::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); pointer-events: none;
  width: calc(100% / var(--tabs-n, 4)); transform: translateX(calc(var(--tab-i, 0) * 100%));
  transition: transform 0.45s cubic-bezier(.32, 1.25, .5, 1);
}
#channel-modal .modal-tab-btn { transition: color 0.25s ease; }
#channel-modal .modal-tab-btn svg { transition: transform 0.3s cubic-bezier(.34, 1.6, .5, 1), color 0.25s ease; }
#channel-modal .modal-tab-btn.active svg { transform: translateY(-2px) scale(1.08); }
#channel-modal .modal-tab-panel.active { animation: chTabIn 0.32s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes chTabIn { from { opacity: 0; transform: translateX(var(--dx, 0px)); } to { opacity: 1; transform: none; } }
/* Розкриття/згортання блоків усередині вкладок */
#channel-modal .settings-card-extra:not(.collapsed) { animation: chExtraIn 0.3s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes chExtraIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#channel-modal .oblast-summary-chevron { transition: transform 0.3s cubic-bezier(.34, 1.4, .5, 1); }
/* Пояснення обраного руху знака м'яко змінюється */
#channel-modal .wm-motion-hint { transition: opacity 0.2s ease; }
#channel-modal .segment { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, transform 0.15s ease; }
#channel-modal .segment:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  #channel-modal .modal-tab-panel.active, #channel-modal .settings-card-extra:not(.collapsed) { animation: none; }
  #channel-modal .modal-tab-bar::after { transition: none; }
}

/* ---------- Тривоги / Медіа: той самий вигляд, що й «Головна» — окремі компактні картки ---------- */
/* Виправлення: згорнутий блок раніше лишався видимим, бо JS задає йому inline display */
#channel-modal .settings-card-extra.collapsed { display: none !important; }
#channel-modal [data-role="alerts-config-block"], #channel-modal .modal-tab-panel[data-panel="media"].active {
  display: flex; flex-direction: column; gap: 10px;
}
#channel-modal [data-role="alerts-config-block"][style*="none"] { display: none; }
#channel-modal .settings-card.grp, #channel-modal .settings-card.grp-first, #channel-modal .settings-card.grp-mid, #channel-modal .settings-card.grp-last {
  margin: 0 !important; border-radius: 16px; padding: 12px 14px;
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-desc,
#channel-modal .modal-tab-panel[data-panel="media"] .settings-card-desc {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin-top: 1px;
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-title, #channel-modal .modal-tab-panel[data-panel="media"] .settings-card-title { font-size: 14.5px; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-icon, #channel-modal .modal-tab-panel[data-panel="media"] .settings-card-icon {
  width: 36px; height: 36px; min-width: 36px; border-radius: 10px;
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .alert-preview { margin-top: 4px; border-radius: 16px; }

/* Під час демо-руху знімаємо розмиття фону модалки — дешевше для WebView */
#channel-modal.wm-animating { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 8, 14, 0.9); }
#channel-modal.wm-animating .modal-sheet { animation: none; }

/* Відступи між картками: через margin, бо JS ставить блоку inline display:block і flex-gap не діє */
#channel-modal .settings-card.grp, #channel-modal .settings-card.grp-first, #channel-modal .settings-card.grp-mid { margin: 0 0 10px !important; }
#channel-modal .settings-card.grp.grp-last { margin-bottom: 0 !important; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card.grp-last { margin-bottom: 14px !important; }

/* =====================================================================
   Живий перегляд знака: фото/відео-основа, позиції-точки на кадрі, CSS-рух
   (усе на GPU-анімаціях, без canvas і JS-циклу)
   ===================================================================== */
.wmp-source { margin-bottom: 10px; }
.wmp { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; border: 1px solid var(--card-border); background: #0f1320; }
.wmp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wmp-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wmp-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.35); }
.wmp-markers { position: absolute; inset: 0; }
.wmp-dot {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.35); transition: transform 0.2s cubic-bezier(.34, 1.6, .5, 1), background 0.2s ease, border-color 0.2s ease;
}
.wmp-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.wmp-dot.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1.12); box-shadow: 0 0 0 3px var(--accent-glow); }
.wmp-dot.on::after { background: #fff; }
.wmp-markers.off .wmp-dot { opacity: 0.25; pointer-events: none; }
.wmp-hint { margin: 8px 2px 0 !important; font-size: 11.5px !important; }

/* Знак: позиція + вкладені шари, що анімуються */
.wmp-mark { position: absolute; }
.wmp-mark img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.wmp-mark.p-top-left { left: var(--m); top: var(--m); }
.wmp-mark.p-top-right { right: var(--m); top: var(--m); }
.wmp-mark.p-bottom-left { left: var(--m); bottom: var(--m); }
.wmp-mark.p-bottom-right { right: var(--m); bottom: var(--m); }
.wmp-mark.p-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.wmp-a1, .wmp-a2 { will-change: transform; }
/* Дрейф: два незалежні хитання з різними періодами дають еліптичну траєкторію */
.m-drift .wmp-a1 { animation: wmpDX calc(9s / var(--spd, 1)) ease-in-out infinite alternate; }
.m-drift .wmp-a2 { animation: wmpDY calc(12s / var(--spd, 1)) ease-in-out infinite alternate; }
@keyframes wmpDX { from { translate: calc(var(--rx) * -0.7) 0; } to { translate: calc(var(--rx) * 0.7) 0; } }
@keyframes wmpDY { from { translate: 0 calc(var(--ry) * -0.7); } to { translate: 0 calc(var(--ry) * 0.7); } }
/* Відбиття: лінійний рух туди-назад з різними швидкостями по осях */
.m-bounce .wmp-a1 { animation: wmpBX 4.6s linear infinite alternate; }
.m-bounce .wmp-a2 { animation: wmpBY 3.1s linear infinite alternate; }
@keyframes wmpBX { from { translate: calc(var(--rx) * -1) 0; } to { translate: var(--rx) 0; } }
@keyframes wmpBY { from { translate: 0 calc(var(--ry) * -1); } to { translate: 0 var(--ry); } }
/* Орбіта: батько обертається, дитина зсунута на радіус, картинка обертається назад */
.m-orbit .wmp-a1 { animation: wmpSpin 9s linear infinite; }
.m-orbit .wmp-a2 { translate: var(--ro) 0; }
.m-orbit img { animation: wmpSpinRev 9s linear infinite; }
@keyframes wmpSpin { to { rotate: 360deg; } }
@keyframes wmpSpinRev { to { rotate: -360deg; } }
/* Плавання: легке погойдування біля позиції */
.m-float .wmp-a1 { animation: wmpFX calc(3.2s / var(--spd, 1)) ease-in-out infinite alternate; }
.m-float .wmp-a2 { animation: wmpFY calc(4.1s / var(--spd, 1)) ease-in-out infinite alternate; }
@keyframes wmpFX { from { translate: calc(var(--fx) * -1) 0; } to { translate: var(--fx) 0; } }
@keyframes wmpFY { from { translate: 0 calc(var(--fy) * -1); } to { translate: 0 var(--fy); } }
/* Пульс: прозорість дихає */
.m-pulse img { animation: wmpPulse 1.6s ease-in-out infinite alternate; }
@keyframes wmpPulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wmp-a1, .wmp-a2, .wmp-mark img { animation: none !important; } }

.wmp-textmark { color: #fff; text-align: center; font-weight: 600; line-height: 1.15; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.wmp-textmark b { font-weight: 800; letter-spacing: 0.02em; }
.wmp-markers.off .wmp-dot { opacity: 0.55; pointer-events: auto; }

/* Рамка прев'ю знака: розмір задає JS за пропорціями кадру */
.wmp { max-height: 560px; }

/* Рамка прев'ю знака: завжди прямокутник 4:3; фото й відео обрізаються під нього (object-fit: cover) */
.wmp { aspect-ratio: 4 / 3 !important; width: 100% !important; max-height: none; margin: 0 !important; }
.wmp-bg { object-fit: cover; }
/* Економія ресурсів телефона під час перегляду анімації */
#channel-modal.lite { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 8, 14, 0.94); }
.wmp-paused .wmp-a1, .wmp-paused .wmp-a2, .wmp-paused .wmp-mark img { animation-play-state: paused !important; }
.wmp-mark.m-none .wmp-a1, .wmp-mark.m-none .wmp-a2 { will-change: auto; }
.wmp-bg { pointer-events: none; }

/* ---------- Стабільність на iOS і Android: без стрибків фону й зайвих перемальовок ---------- */
/* Рішення користувача 2026-09-27 ("на главной тоже блюр дай") — раніше blur
   тут був вимкнений навмисно (блюр + перемикання вкладок/анімація прев'ю
   знака давали помітне миготіння на iOS/Android). Користувач свідомо
   прийняв цей ризик заради єдиного вигляду з рештою модалок застосунку.
   .lite/.wm-animating нижче й далі вимикають blur САМЕ в момент активної
   анімації прев'ю водяного знака — найризикованіший момент лишається
   захищеним, хоча загальний ризик миготіння при звичайному перемиканні
   вкладок тепер повертається. */
#channel-modal { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(6, 8, 14, 0.72); overscroll-behavior: contain; }
#channel-modal .modal-sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Швидкі тапи без затримки й без виділення/зуму; кнопки не «підстрибують» текстом */
#channel-modal button, #channel-modal .segment, #channel-modal .modal-tab-btn, #channel-modal .wmp-dot, #channel-modal .watermark-switch, #channel-modal .settings-card-header {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
#channel-modal input[type="range"] { touch-action: pan-y; }
/* Підказка під кадром має постійну висоту — зміна тексту не зсуває решту вмісту */
.wmp-hint { min-height: 32px; }
.wm-motion-hint { min-height: 32px !important; }
/* Знаки в прев'ю — окремі шари, що не викликають перерахунку розмітки навколо */
.wmp { contain: layout paint; transform: translateZ(0); }
.wmp-layer, .wmp-markers { contain: strict; }

.wm-speed { margin-top: 2px; }

/* =====================================================================
   Редагування посту (#editor-modal) — той самий словник, що й решта
   застосунку: кольорові плитки-іконки, згруповані рядки, плаский стиль.
   ===================================================================== */
/* Медіа: кнопки поверх фото/відео — консистентний розмір і легке скло */
#editor-modal .album-thumb-delogo, #editor-modal .album-thumb-remove {
  background: rgba(10, 8, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
#editor-modal .album-thumb-delogo:active, #editor-modal .album-thumb-remove:active { transform: scale(0.92); background: rgba(0, 0, 0, 0.7); }
/* Плитка "Додати медіа" — акуратне пунктирне коло замість голого "+" */
#editor-modal .album-thumb-add {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1.5px dashed rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease;
}
#editor-modal .album-thumb-add:active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#editor-modal .album-thumb-add-ico {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--hint); border: 1.5px solid currentColor;
}
#editor-modal .album-thumb-add-ico svg { width: 15px; height: 15px; }
#editor-modal .album-gallery-single .album-thumb-add-ico { width: 22px; height: 22px; }
#editor-modal .album-gallery-single .album-thumb-add-ico svg { width: 11px; height: 11px; }

/* Панель форматування: власний скрол-контейнер MUST лишатись overflow-x:auto
   (як у базовому .editor-flat-toolbar) — інакше кнопки, що не влазять в один
   ряд (9 штук), візуально виходять за заокруглену рамку замість скролу. */
#editor-modal .editor-flat-toolbar { overflow-x: auto; }

/* Поле тексту: трохи більше заокруглення й видима реакція на фокус */
#editor-modal .rich-editor.submission-edit-area {
  border-radius: var(--radius-md); padding: 14px 16px; min-height: 110px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#editor-modal .rich-editor.submission-edit-area:focus {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Швидкі дії (ШІ-рерайт/Заголовок/Перегляд) — рівні пігулки без верхньої лінії,
   toolbar над ними вже відділяє блок форматування */
#editor-modal .editor-quick-actions { border-top: none; padding-top: 0; }

/* Канали: акуратніші чіпи саме у редакторі (не займає інші списки з тим самим класом) */
#editor-channel-multiselect.channel-multiselect { gap: 9px; }
#editor-channel-multiselect .channel-chip { padding: 5px 13px 5px 5px; }
#editor-channel-multiselect .channel-chip.checked { box-shadow: 0 0 0 1px var(--accent) inset; }
#editor-channel-card .chip-action-btn { border-radius: 10px; }

/* Нижня панель дій: однакове заокруглення з рештою кнопок застосунку */
#editor-modal .icon-action-btn { border-radius: var(--radius-md); }
#editor-modal .modal-sticky-footer .primary-btn { border-radius: var(--radius-md); }

/* Тех.розділ → Автопілот */
.dev-autopilot-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; min-height: 24px; }
.dev-autopilot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.dev-autopilot-toolbar .section-label { margin: 0; }
.dev-autopilot-row { align-items: flex-start; gap: 10px; }
.dev-autopilot-row .status-badge { flex-shrink: 0; }

/* Черга: сортування + термін зберігання */
.queue-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 2px 12px; }
.queue-sort { display:flex; gap:13px; min-width:0; }
.queue-sort-tab { position:relative; padding:6px 0; border:0; background:transparent; color:var(--hint); font:inherit; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; transition:color .15s ease; }
.queue-sort-tab::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--accent); transform:scaleX(0); transition:transform .2s ease; }
.queue-sort-tab.active { color:var(--text); font-weight:700; }
.queue-sort-tab.active::after { transform:scaleX(1); }
.queue-sort-tab:focus-visible, .queue-ttl-chip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.queue-ttl-chip { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:5px 10px; border:0; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); font:inherit; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; transition:transform .12s ease; }
.queue-ttl-chip:active { transform:scale(.96); }
.queue-ttl-chip .icon { width:14px; height:14px; }
.queue-ttl-dialog { text-align:left; }
.queue-ttl-value { font-size:40px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; margin:14px 0 14px; text-align:center; line-height:1.1; }
.queue-ttl-range { -webkit-appearance:none; appearance:none; width:100%; height:28px; margin:0; background:transparent; --pct:50%; touch-action:pan-y; }
.queue-ttl-range::-webkit-slider-runnable-track { height:8px; border-radius:999px; background:linear-gradient(90deg, var(--accent) var(--pct), color-mix(in srgb, var(--text) 12%, transparent) var(--pct)); }
.queue-ttl-range::-moz-range-track { height:8px; border-radius:999px; background:color-mix(in srgb, var(--text) 12%, transparent); }
.queue-ttl-range::-moz-range-progress { height:8px; border-radius:999px; background:var(--accent); }
.queue-ttl-range::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.queue-ttl-range::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
.queue-ttl-scale { display:flex; justify-content:space-between; font-size:12px; color:var(--hint); margin:2px 2px 14px; }
.queue-ttl-presets { display:flex; gap:6px; margin-bottom:18px; }
.queue-ttl-preset { flex:1; min-width:0; height:34px; padding:0 4px; border-radius:10px; border:1px solid var(--border, rgba(255,255,255,.12)); background:transparent; color:var(--text); font:inherit; font-size:12.5px; font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap; transition:background .15s ease, border-color .15s ease, transform .1s ease; }
.queue-ttl-preset:active { transform:scale(.96); }
.queue-ttl-preset.active { background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); color:var(--accent); font-weight:700; }
.queue-ttl-dialog .queue-ttl-save { background:var(--accent); border-color:transparent; color:#fff; font-weight:700; }

/* Журнал новин */
.queue-bar-end { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.queue-log-btn { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:color-mix(in srgb, var(--text) 9%, transparent); color:var(--hint); cursor:pointer; transition:transform .12s ease, color .15s ease; }
.queue-log-btn:active { transform:scale(.92); color:var(--text); }
.queue-log-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.news-log-dialog { text-align:left; }
.news-log-list { max-height:calc(48 * var(--vh1)); overflow-y:auto; margin:6px -4px 16px; padding:0 4px; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.news-log-row { padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.news-log-row:last-child { border-bottom:0; }
.news-log-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.news-log-badge { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:999px; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.news-log-badge.ev-published { color:var(--success, #34c759); background:color-mix(in srgb, var(--success, #34c759) 15%, transparent); }
.news-log-badge.ev-failed, .news-log-badge.ev-removed { color:var(--danger, #ef4444); background:color-mix(in srgb, var(--danger, #ef4444) 14%, transparent); }
.news-log-badge.ev-retry, .news-log-badge.ev-expired { color:var(--warning, #f59e0b); background:color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent); }
.news-log-time { font-size:12px; color:var(--hint); font-variant-numeric:tabular-nums; }
.news-log-title { font-size:14px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.news-log-meta, .news-log-detail { font-size:12px; color:var(--hint); margin-top:2px; overflow-wrap:anywhere; }
.news-log-empty { padding:28px 0; text-align:center; color:var(--hint); font-size:14px; }

/* Черга: шапка (редизайн) */
.queue-actions { display:flex; gap:10px; margin-bottom:16px; }
.queue-compose-btn { flex:1; min-width:0; display:flex; align-items:center; gap:12px; height:56px; padding:0 14px 0 8px; border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius:18px; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:transform .14s ease, border-color .15s ease; }
.queue-compose-btn:active { transform:scale(.985); }
.queue-compose-btn:focus-visible, .queue-clear-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.queue-compose-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--accent); color:#fff; flex-shrink:0; }
.queue-compose-text { flex:1; font-size:16px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-compose-arrow { color:var(--accent); flex-shrink:0; transition:transform .15s ease; }
.queue-compose-btn:active .queue-compose-arrow { transform:translateX(3px); }
.queue-clear-btn { display:grid; place-items:center; width:56px; height:56px; padding:0; flex-shrink:0; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius:18px; background:color-mix(in srgb, var(--text) 5%, transparent); color:var(--hint); cursor:pointer; transition:transform .14s ease, color .15s ease, background .15s ease, border-color .15s ease; }
.queue-clear-btn:active { transform:scale(.94); color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, transparent); border-color:color-mix(in srgb, var(--danger) 35%, transparent); }
.queue-bar { margin:0 0 12px; padding:0 0 4px; border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent); align-items:flex-end; }
.queue-sort { gap:16px; overflow-x:auto; scrollbar-width:none; }
.queue-sort::-webkit-scrollbar { display:none; }
.queue-sort-tab { padding:8px 0 10px; font-size:14.5px; }
.queue-sort-tab::after { height:3px; bottom:-1px; border-radius:3px 3px 0 0; }
.queue-tools { display:flex; align-items:stretch; flex-shrink:0; margin-bottom:6px; border-radius:12px; background:color-mix(in srgb, var(--text) 6%, transparent); overflow:hidden; }
.queue-tools .queue-ttl-chip { border-radius:0; background:transparent; padding:6px 10px 6px 11px; }
.queue-tools .queue-log-btn { width:34px; height:auto; border-radius:0; background:transparent; border-left:1px solid color-mix(in srgb, var(--text) 10%, transparent); }

/* Черга: кнопки дій (v2) */
.queue-compose-btn { justify-content:center; gap:10px; padding:0 18px; border:0; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, var(--accent) 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.queue-compose-ico { width:auto; height:auto; background:transparent; }
.queue-compose-ico .icon { width:20px; height:20px; }
.queue-compose-text { flex:0 1 auto; font-size:16px; }
.queue-compose-arrow { display:none; }
.queue-clear-btn { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 45%, transparent); background:color-mix(in srgb, var(--danger) 16%, transparent); }
.queue-clear-btn:active { color:#fff; background:var(--danger); border-color:var(--danger); }
.queue-clear-btn { border-radius:50%; }

/* Планування: картка дати (v2) — значення вирівняне вліво під підписом (iOS центрує datetime-local) */
.schedule-dt-card { gap:14px; padding:14px 16px 14px 14px; border-radius:18px; }
.schedule-dt-ico { width:44px; height:44px; min-width:44px; border-radius:14px; }
.schedule-dt-ico svg { width:21px; height:21px; }
.schedule-dt-label { margin-bottom:5px; }
.schedule-datetime-input { display:block; -webkit-appearance:none; appearance:none; text-align:left; text-align-last:left; min-height:26px; font-size:19px; font-weight:800; line-height:1.2; }
.schedule-datetime-input::-webkit-date-and-time-value { text-align:left; margin:0; min-height:1.2em; }
.schedule-datetime-input::-webkit-datetime-edit { padding:0; }
.schedule-datetime-input::-webkit-calendar-picker-indicator { margin-left:auto; opacity:.7; }

/* Журнал новин: фільтри та відсіяні події */
.news-log-filters { display:flex; gap:8px; margin:2px 0 8px; }
.news-log-filters button { padding:6px 14px; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:999px; background:transparent; color:var(--hint); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.news-log-filters button.active { background:color-mix(in srgb, var(--accent) 18%, transparent); border-color:var(--accent); color:var(--accent); }
.news-log-badge.ev-duplicate { color:#f59e0b; background:color-mix(in srgb, #f59e0b 15%, transparent); }
.news-log-badge.ev-junk { color:#ef4444; background:color-mix(in srgb, #ef4444 14%, transparent); }
.news-log-badge.ev-not_war { color:#94a3b8; background:color-mix(in srgb, #94a3b8 16%, transparent); }
.news-log-badge.ev-approved { color:var(--accent); }

/* =====================================================================
   Чат підтримки v3: месенджер без «коробки»
   ===================================================================== */
#support-modal .modal-sheet.support-sheet { background: linear-gradient(180deg, #1c1432 0%, #0e0b1b 44%); }
#support-modal .support-head { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 4px; }
#support-modal .support-avatar { box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35); }
#support-modal .modal-sheet.support-sheet > .chat-thread {
  margin: 0 -4px; padding: 10px 6px 12px; gap: 6px; border: none; border-radius: 0; background: none; box-shadow: none;
}
#support-modal .chat-thread::before { content: ""; margin-top: auto; }
#support-modal .chat-day { margin: 14px 0 6px; }
#support-modal .chat-day span { padding: 4px 14px; font-size: 11.5px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#support-modal .chat-msg { max-width: 88%; gap: 10px; }
#support-modal .chat-msg .chat-bubble { padding: 10px 14px 8px; font-size: 15px; line-height: 1.45; }
#support-modal .chat-msg .chat-bubble.from-user {
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2)));
  border-radius: 20px 20px 6px 20px; box-shadow: 0 8px 22px var(--accent-glow);
}
#support-modal .chat-msg .chat-bubble.from-support {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px 20px 20px 6px;
}
#support-modal .chat-avatar { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16); }
#support-modal .chat-avatar svg { width: 16px; height: 16px; }
#support-modal .support-sheet:has(#support-chat-empty:is([style*="display:none"], [style*="display: none"])) .section-label[data-i18n="faq.label"] {
  margin: 6px 0 8px; padding: 11px 14px; font-size: 12.5px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
}
#support-modal .chat-composer {
  margin: 6px 0 calc(8px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#support-modal .chat-composer textarea { font-size: 15px; padding: 9px 2px; }
#support-modal #support-attach-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-shrink: 0; }
#support-modal .chat-composer-send {
  width: 42px; height: 42px; min-width: 42px; border-radius: 50%;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 6px 16px var(--accent-glow);
}
#support-modal .support-delete-link { margin: 0 auto 2px; }

/* =====================================================================
   Повідомлення у стилі iPhone: банер-тост зверху та системний алерт
   ===================================================================== */
#toast-container {
  top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 56px) + 10px);
  bottom: auto; z-index: 400; padding: 0 12px;
}
.toast {
  width: min(100%, 390px); min-width: 0; max-width: 390px; padding: 11px 16px 11px 11px; gap: 12px;
  background: rgba(40, 38, 50, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.16); border-radius: 22px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(-130%) scale(0.96);
  transition: opacity 0.25s ease, transform 0.55s cubic-bezier(0.2, 1.15, 0.3, 1);
}
.toast.in { opacity: 1; transform: translateY(0) scale(1); }
.toast-ico { width: 30px; height: 30px; }
.toast-timer { display: none; }

.modal-overlay:has(> .ios-alert) { align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.42); }
.modal-sheet.ios-alert {
  width: min(280px, calc(100% - 56px)); max-width: 280px; padding: 0; margin: 0; overflow: hidden;
  border-radius: 16px; border: 0.5px solid rgba(255, 255, 255, 0.14); text-align: center;
  background: rgba(46, 44, 56, 0.84);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  animation: iosAlertIn 0.32s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
@keyframes iosAlertIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.ios-alert .confirm-dialog-icon { width: 44px; height: 44px; margin: 18px auto 0; }
.ios-alert .confirm-dialog-icon svg { width: 22px; height: 22px; }
.ios-alert .confirm-dialog-title { padding: 18px 16px 0; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.ios-alert .confirm-dialog-message { padding: 6px 16px 18px; margin: 0; font-size: 13px; line-height: 1.38; color: rgba(255, 255, 255, 0.82); }
.ios-alert .confirm-dialog-title:first-child + .confirm-dialog-message,
.ios-alert .confirm-dialog-message:first-child { padding-top: 20px; }
.ios-alert .confirm-dialog-actions { gap: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.2); }
.ios-alert .confirm-dialog-actions .pill {
  flex: 1; min-height: 46px; padding: 0 8px; border: none; border-radius: 0; box-shadow: none; background: none;
  font-size: 17px; font-weight: 400; color: var(--accent-2); letter-spacing: -0.02em;
}
.ios-alert .confirm-dialog-actions .pill + .pill { border-left: 0.5px solid rgba(255, 255, 255, 0.2); font-weight: 600; }
.ios-alert .confirm-dialog-actions .pill.danger { color: #ff453a; background: none; }
.ios-alert .confirm-dialog-actions .pill:active { background: rgba(255, 255, 255, 0.1); }
.ios-alert .confirm-dialog-actions .pill:disabled { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  .modal-sheet.ios-alert { animation: none; }
  .toast { transform: none; transition: opacity 0.15s ease; }
}

/* ---------- Порожня черга v2: «живий радар» ---------- */
.queue-empty.qe2 { padding: 26px 18px 20px; background: radial-gradient(90% 70% at 50% 0%, rgba(139, 92, 246, 0.18), transparent 70%), rgba(255, 255, 255, 0.025); }
.qe2-radar { position: relative; width: 112px; height: 112px; margin-bottom: 14px; display: grid; place-items: center; }
.qe2-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent-2); opacity: 0; animation: qe2Ping 3s ease-out infinite; }
.qe2-ring:nth-child(2) { animation-delay: 1s; }
.qe2-ring:nth-child(3) { animation-delay: 2s; }
@keyframes qe2Ping { 0% { transform: scale(0.35); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
.qe2-core {
  position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 10px 26px var(--accent-glow);
}
.qe2-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.qe2-sub { font-size: 13.5px; line-height: 1.45; color: var(--hint); max-width: 280px; }
.qe2-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 16px 0 18px; }
.qe2-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--hint); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border);
}
.qe2-chip.live { color: #34d399; border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.1); }
.qe2-chip.live i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: qeBlink 1.6s ease-in-out infinite; }
.qe2-actions { display: flex; gap: 8px; align-self: stretch; }
.qe2-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border-radius: 14px;
  border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.06); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform 0.12s ease;
}
.qe2-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .qe2-ring { animation: none; opacity: 0.2; transform: scale(0.8); } .qe2-chip.live i { animation: none; } }

/* Невидима зона для свайпу-закриття шторок, створених на льоту (над ручкою зверху) */
.modal-sheet:has(> .sheet-grabber) { position: relative; }
.sheet-grabber { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 3; touch-action: none; }
.modal-sheet { overscroll-behavior: contain; }

/* ---------- Тривоги: плитки цілей не вилазять за картку, підписи переносяться ---------- */
#channel-modal .modal-tab-panel[data-panel="alerts"] .chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#channel-modal .chip-compact.chip-plain { min-width: 0; padding: 8px 6px; gap: 8px; justify-content: flex-start; }
#channel-modal .chip-compact.chip-plain > span:not(.threat-chip-check):not(.threat-chip-icon):not(.channel-chip-check) {
  flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-size: 13px; line-height: 1.25;
}
#channel-modal .chip-compact.chip-plain .threat-chip-icon { width: 30px; height: 30px; min-width: 30px; max-width: 30px; }
#channel-modal .chip-compact.chip-plain .threat-chip-check { flex: 0 0 18px; margin-left: auto; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-desc {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: clip;
}
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-body { min-width: 0; }

/* ---------- Чат підтримки v3.1: відступи від країв, чисте поле вводу ---------- */
#support-modal .modal-sheet.support-sheet > .chat-thread { margin: 0; padding: 10px 14px 12px; }
#support-modal .modal-sheet.support-sheet > .chat-composer,
#support-modal .modal-sheet.support-sheet > .section-label,
#support-modal .modal-sheet.support-sheet > #support-faq-chips,
#support-modal .modal-sheet.support-sheet > #support-attachment-chip { margin-left: 14px; margin-right: 14px; }
#support-modal .modal-sheet.support-sheet > .support-head { padding-left: 14px; padding-right: 14px; }
#support-modal .modal-sheet.support-sheet > #support-chat-empty { padding-left: 16px; padding-right: 16px; }
#support-modal .chat-composer textarea {
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 10px 4px; outline: none;
}
#support-modal .chat-bubble-attachment img, #support-modal .chat-bubble-attachment video { border-radius: 14px; width: 220px; height: 160px; }
#support-modal .chat-msg .chat-bubble:has(.chat-bubble-attachment) { padding: 6px 6px 8px; }
#support-modal .chat-msg .chat-bubble:has(.chat-bubble-attachment) .chat-bubble-time.in { margin-right: 8px; }
#support-modal #support-status { text-align: center; }

/* ---------- Чат: фото зверху, підпис під ним (як у Telegram) ---------- */
#support-modal .chat-msg .chat-bubble.has-media { padding: 0; overflow: hidden; width: 252px; max-width: 100%; }
#support-modal .chat-bubble.has-media .chat-bubble-attachment,
#support-modal .chat-bubble.has-media .chat-bubble-attachment-loading { margin: 0; border-radius: 0; width: 100%; max-width: 100%; clear: both; }
#support-modal .chat-bubble.has-media .chat-bubble-attachment img,
#support-modal .chat-bubble.has-media .chat-bubble-attachment video {
  display: block; width: 100%; height: auto; min-height: 120px; max-height: 320px; object-fit: cover; border-radius: 0;
}
#support-modal .chat-bubble.has-media .chat-bubble-attachment-loading { height: 200px; }
#support-modal .chat-bubble.has-media .chat-caption { padding: 8px 12px 7px; white-space: pre-wrap; word-break: break-word; }
#support-modal .chat-bubble.has-media .chat-caption::after { content: ""; display: table; clear: both; }
#support-modal .chat-bubble.has-media.media-only .chat-bubble-time.in {
  position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 3px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; opacity: 1;
}

/* ---------- Тех-панель, Підтримка: прокрутка списку звернень і переписки у будь-якій ширині ---------- */
.dev-support-list-pane {
  max-height: calc(72 * var(--vh1)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.dev-support-list-pane::-webkit-scrollbar { width: 6px; }
.dev-support-list-pane::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 6px; }
.dev-support-list-pane::-webkit-scrollbar-track { background: transparent; }
#dev-support-thread {
  max-height: calc(60 * var(--vh1)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
#dev-support-thread::-webkit-scrollbar { width: 6px; }
#dev-support-thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 6px; }

/* ---------- Тех-панель: швидкі відповіді (вкладки «Технічні проблеми» / «Інструкції») ---------- */
.faq-tpl-list { max-height: 340px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.faq-tpl-list::-webkit-scrollbar { display: block; width: 5px; }
.faq-tpl-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 5px; }
.faq-tpl-tabs { display: flex; gap: 6px; position: sticky; top: 0; z-index: 2; padding: 2px 0 6px; background: var(--bg, #0b0a14); }
.faq-tpl-tab {
  flex: 1; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--hint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
}
.faq-tpl-tab.active { color: #fff; border-color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); }
.faq-tpl-a { -webkit-line-clamp: 3; }


/* ---------- Spotify-плеєр у сайдбарі (ПК) ---------- */
.sidebar-spotify { display: none; }
body.desktop-platform .sidebar-spotify:not([hidden]) {
  display: block; margin: 14px 4px 0; padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border);
}
.sp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-head-ico { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #1db954, #129a43); }
.sp-head-title { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; flex: 1; }
.sp-link-btn { background: none; border: none; color: var(--hint); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.sp-link-btn:hover { color: var(--danger); }
.sp-btn-main {
  width: 100%; min-height: 40px; border: none; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #04140a; background: #1db954; transition: transform 0.12s ease, filter 0.15s ease;
}
.sp-btn-main:hover { filter: brightness(1.08); }
.sp-btn-main:active { transform: scale(0.97); }
.sp-now { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-cover { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08) center / cover no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.sp-meta { min-width: 0; }
.sp-title, .sp-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-title { font-size: 13px; font-weight: 700; }
.sp-artist { font-size: 11.5px; color: var(--hint); margin-top: 1px; }
.sp-range { width: 100%; height: 4px; margin: 0; accent-color: #1db954; cursor: pointer; }
.sp-times { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--hint); font-variant-numeric: tabular-nums; margin: 3px 0 6px; }
.sp-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.sp-ctl {
  width: 36px; height: 36px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); color: var(--text); transition: transform 0.12s ease, background 0.15s ease;
}
.sp-ctl:hover { background: rgba(255, 255, 255, 0.14); }
.sp-ctl:active { transform: scale(0.92); }
.sp-ctl.sp-play { width: 44px; height: 44px; background: #1db954; color: #04140a; }
.sp-volume { display: flex; align-items: center; gap: 8px; color: var(--hint); }
.sp-hint { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--hint); }

/* ---------- Spotify у згорнутому сайдбарі: компактний вертикальний міні-плеєр ---------- */
body.desktop-platform.sidebar-collapsed .sidebar-spotify:not([hidden]) { margin: 12px 0 0; padding: 8px 4px; border-radius: 14px; }
body.desktop-platform.sidebar-collapsed .sp-head-title,
body.desktop-platform.sidebar-collapsed .sp-link-btn,
body.desktop-platform.sidebar-collapsed .sp-meta,
body.desktop-platform.sidebar-collapsed .sp-times,
body.desktop-platform.sidebar-collapsed .sp-range,
body.desktop-platform.sidebar-collapsed .sp-volume,
body.desktop-platform.sidebar-collapsed .sp-hint { display: none !important; }
body.desktop-platform.sidebar-collapsed .sp-head { justify-content: center; margin-bottom: 6px; }
body.desktop-platform.sidebar-collapsed .sp-now { justify-content: center; margin-bottom: 8px; }
body.desktop-platform.sidebar-collapsed .sp-cover { width: 40px; height: 40px; border-radius: 9px; }
body.desktop-platform.sidebar-collapsed .sp-controls { flex-direction: column; gap: 6px; margin: 0; }
body.desktop-platform.sidebar-collapsed .sp-ctl { width: 32px; height: 32px; }
body.desktop-platform.sidebar-collapsed .sp-ctl.sp-play { width: 36px; height: 36px; }
body.desktop-platform.sidebar-collapsed .sp-btn-main {
  display: block; width: 36px; height: 36px; min-height: 0; margin: 0 auto; padding: 0; border-radius: 50%; font-size: 0;
  background: #1db954 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304140a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>") center / 18px no-repeat;
}


/* ---------- Spotify: красивіший плеєр (v2) ---------- */
body.desktop-platform .sidebar-spotify:not([hidden]) {
  position: relative; overflow: hidden; margin: 14px 4px 0; padding: 14px 14px 12px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}
.sidebar-spotify::before {
  content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--sp-img, none) center / cover no-repeat;
  filter: blur(34px) saturate(1.5); opacity: 0.38; transition: opacity 0.4s ease; pointer-events: none;
}
.sidebar-spotify::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(16, 12, 28, 0.25), rgba(16, 12, 28, 0.6));
}
.sp-head { margin-bottom: 12px; }
.sp-logo { flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(29, 185, 84, 0.45)); }
.sp-head-title { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; }
.sp-link-btn { font-size: 11px; opacity: 0.75; }
.sp-now { gap: 12px; margin-bottom: 12px; }
.sp-cover { width: 58px; height: 58px; border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); transition: transform 0.3s ease; }
.sidebar-spotify.is-playing .sp-cover { transform: scale(1.03); }
.sp-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; min-width: 0; }
.sp-artist { font-size: 12px; margin-top: 2px; }
.sp-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; flex-shrink: 0; }
.sidebar-spotify.is-playing .sp-eq { display: inline-flex; }
.sp-eq i { width: 3px; border-radius: 2px; background: #1db954; height: 40%; animation: spEq 0.9s ease-in-out infinite; }
.sp-eq i:nth-child(2) { animation-delay: 0.2s; }
.sp-eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes spEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.sp-range {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #1db954 var(--pct, 0%), rgba(255, 255, 255, 0.2) var(--pct, 0%));
}
.sp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.15s ease; }
.sp-range:hover::-webkit-slider-thumb, .sp-range:active::-webkit-slider-thumb, .sp-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.sp-range::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; }
.sp-times { margin: 4px 0 8px; }
.sp-controls { gap: 14px; margin-bottom: 10px; }
.sp-ctl { background: rgba(255, 255, 255, 0.1); }
.sp-ctl.sp-play { width: 48px; height: 48px; box-shadow: 0 8px 20px rgba(29, 185, 84, 0.45); }
.sp-ctl.sp-play:hover { filter: brightness(1.08); }
.sp-device { margin-top: 8px; font-size: 11px; color: var(--hint); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-btn-main { box-shadow: 0 8px 20px rgba(29, 185, 84, 0.35); }
@media (prefers-reduced-motion: reduce) { .sp-eq i { animation: none; height: 70%; } }
body.desktop-platform.sidebar-collapsed .sp-eq,
body.desktop-platform.sidebar-collapsed .sp-device { display: none !important; }
body.desktop-platform.sidebar-collapsed .sidebar-spotify:not([hidden]) { padding: 8px 4px; }
body.desktop-platform.sidebar-collapsed .sp-cover { width: 40px; height: 40px; }

/* ---------- Spotify (згорнутий сайдбар): та сама краса, у вузькому форматі ---------- */
body.desktop-platform.sidebar-collapsed .sidebar-spotify:not([hidden]) {
  margin: 12px 4px 0; padding: 10px 4px 12px; border-radius: 18px;
}
body.desktop-platform.sidebar-collapsed .sp-logo { width: 20px; height: 20px; }
body.desktop-platform.sidebar-collapsed .sp-head { margin-bottom: 8px; }
body.desktop-platform.sidebar-collapsed .sp-cover { width: 44px; height: 44px; border-radius: 12px; }
body.desktop-platform.sidebar-collapsed .sidebar-spotify.is-playing .sp-cover { animation: spGlow 2.4s ease-in-out infinite; transform: none; }
@keyframes spGlow {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(29, 185, 84, 0); }
  50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(29, 185, 84, 0.6); }
}
body.desktop-platform.sidebar-collapsed .sp-controls { gap: 4px; }
body.desktop-platform.sidebar-collapsed .sp-ctl { width: 30px; height: 30px; background: transparent; }
body.desktop-platform.sidebar-collapsed .sp-ctl:hover { background: rgba(255, 255, 255, 0.12); }
body.desktop-platform.sidebar-collapsed .sp-ctl.sp-play { width: 38px; height: 38px; background: #1db954; box-shadow: 0 6px 16px rgba(29, 185, 84, 0.45); }
@media (prefers-reduced-motion: reduce) { body.desktop-platform.sidebar-collapsed .sidebar-spotify.is-playing .sp-cover { animation: none; } }

/* ---------- Spotify: притиснутий до низу, одразу над профілем і налаштуваннями ---------- */
body.desktop-platform .sidebar-spotify:not([hidden]) { margin-top: auto; margin-bottom: 0; }
body.desktop-platform .sidebar-spotify:not([hidden]) + .sidebar-footer { margin-top: 12px; }
body.desktop-platform.sidebar-collapsed .sidebar-spotify:not([hidden]) { margin-top: auto; }

/* Невидима зона свайпу: жодного фону/рамки (баг: із'являвся сірий квадрат) */
.sheet-grabber {
  left: 0; right: 0; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0; padding: 0; margin: 0; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1;
}



/* =====================================================================
   Джерела: новий дизайн (зведення, рядок додавання, список зі статусами)
   ===================================================================== */
.src-hero {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
}
.src-hero-ico {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 10px 26px var(--accent-glow);
}
.src-hero-main { min-width: 0; flex: 1; }
.src-hero-num { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.src-hero-label { font-size: 12.5px; color: var(--hint); margin-top: 4px; }
.src-hero-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; flex-shrink: 0;
  color: #f5c26b; background: rgba(245, 194, 107, 0.12); border: 1px solid rgba(245, 194, 107, 0.3);
}
.src-hero-chip[hidden] { display: none; }
.src-add { margin-top: 18px; }
.src-add-row {
  display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.src-add-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.src-add-row input { flex: 1; min-width: 0; margin: 0; border: none !important; background: none !important; box-shadow: none !important; padding: 11px 12px; font-size: 14.5px; }
.src-add-btn { flex-shrink: 0; width: auto; margin: 0; min-height: 44px; padding: 0 16px; border-radius: 14px; white-space: nowrap; gap: 8px; }
@media (max-width: 440px) { .src-add-btn span { display: none; } .src-add-btn { padding: 0 14px; } }

.sources-tile-grid { grid-template-columns: 1fr; gap: 8px; }
body.desktop-platform .sources-tile-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.source-tile {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 18px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.source-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.source-tile:active { transform: scale(0.992); }
.source-tile-head { flex: 1; min-width: 0; gap: 12px; }
.source-tile-head .channel-avatar { width: 46px; height: 46px; min-width: 46px; min-height: 46px; font-size: 14px; }
.src-avatar-wrap { position: relative; flex-shrink: 0; }
.src-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #15101f; background: #6b7280; }
.src-dot.on { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); }
.src-dot.auto { background: #f5c26b; }
.src-dot.err { background: #f87171; }
.source-tile-name { font-size: 14.5px; }
.src-state { font-size: 11.5px; font-weight: 600; margin-top: 3px; color: var(--hint); }
.src-state.on { color: #34d399; }
.src-state.auto { color: #f5c26b; }
.src-state.err { color: #f87171; }
.source-tile-action { flex-shrink: 0; }
.source-tile-action .pill { width: auto; min-width: 74px; min-height: 34px; padding: 0 14px; justify-content: center; }

/* Іконки у перемикачі Публікації / Джерела / Читачі */
#content-segmented .segment { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#content-segmented .segment svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; }
#content-segmented .segment.active svg { opacity: 1; }
@media (max-width: 380px) { #content-segmented .segment svg { display: none; } }


/* ---------- Вікно джерела: оновлене оформлення + фільтри автопостингу ---------- */
#source-modal .settings-card { border-radius: 20px; padding: 16px; margin-top: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); }
#source-modal .settings-card-icon { border-radius: 14px; background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff; box-shadow: 0 6px 16px var(--accent-glow); }
#source-modal .settings-card[data-src-tone="amber"] .settings-card-icon { background: linear-gradient(160deg, #fbbf24, #d97706); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35); }
#source-modal .settings-card[data-src-tone="rose"] .settings-card-icon { background: linear-gradient(160deg, #fb7185, #e11d48); box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35); }
#source-modal .settings-card[data-src-tone="green"] .settings-card-icon { background: linear-gradient(160deg, #4ade80, #16a34a); box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35); }
#source-modal .settings-card[data-src-tone="sky"] .settings-card-icon { background: linear-gradient(160deg, #38bdf8, #2563eb); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35); }
#source-modal .settings-card-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
#source-modal .settings-card-desc { font-size: 12.5px; line-height: 1.4; }
#source-modal .ads-row-stat { border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)); }
#source-modal .pill-row .pill { min-height: 42px; border-radius: 14px; }
.src-flt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.src-flt-label { font-size: 12px; color: var(--hint); margin: 10px 0 6px; }
.src-flt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.src-flt-status { font-size: 11.5px; min-height: 16px; margin-top: 10px; text-align: right; }


/* ---------- Налаштування: рядок-перемикач ---------- */
.set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); }
.set-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-toggle-title { font-size: 14px; font-weight: 700; }
.set-toggle-hint { font-size: 12px; color: var(--hint); }

/* =====================================================================
   Сучасний стиль бічної панелі (ПК): плаваюча скляна панель, плитки-іконки
   ===================================================================== */
body.desktop-platform.sidebar-style-modern .bottom-nav {
  margin: 34px 0 12px 12px; align-self: start; height: calc(calc(100 * var(--vh1)) - 46px); border-radius: 28px; padding: 16px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.desktop-platform.sidebar-style-modern .nav-btn,
body.desktop-platform.sidebar-style-modern .nav-btn-extra {
  border-radius: 16px; padding: 7px 8px; gap: 12px; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
body.desktop-platform.sidebar-style-modern .nav-btn:hover,
body.desktop-platform.sidebar-style-modern .nav-btn-extra:hover { background: rgba(255, 255, 255, 0.06); }
body.desktop-platform.sidebar-style-modern .nav-btn:active,
body.desktop-platform.sidebar-style-modern .nav-btn-extra:active { transform: scale(0.98); }
body.desktop-platform.sidebar-style-modern .nav-primary-ico,
body.desktop-platform.sidebar-style-modern .nav-extra-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.07); transition: background 0.18s ease, box-shadow 0.18s ease;
}
body.desktop-platform.sidebar-style-modern .nav-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 10px 26px var(--accent-glow);
}
body.desktop-platform.sidebar-style-modern .nav-btn.active .nav-primary-ico {
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); color: #fff; box-shadow: 0 6px 16px var(--accent-glow);
}
body.desktop-platform.sidebar-style-modern .nav-btn > span:not(.nav-primary-ico),
body.desktop-platform.sidebar-style-modern .nav-btn-extra > span:not(.nav-extra-ico) { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
body.desktop-platform.sidebar-style-modern .sidebar-footer {
  border-radius: 18px; padding: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); border-top: 1px solid var(--card-border);
}
body.desktop-platform.sidebar-style-modern.sidebar-collapsed .bottom-nav { padding: 14px 8px; }

/* Сучасний сайдбар: висота береться з сітки (а не 100vh), щоб профіль унизу не обрізався */
body.desktop-platform.sidebar-style-modern .bottom-nav {
  height: auto; align-self: stretch; margin: 10px 0 12px 12px; max-height: none;
}


/* =====================================================================
   Вікно «Налаштування» (ПК): ширше, групи-картки, плитки стилю, Spotify з логотипом
   ===================================================================== */
#desktop-settings-modal .modal-sheet { max-width: 560px !important; width: min(560px, calc(100% - 32px)); }
#desktop-settings-modal .set-label { margin-top: 4px; }
#desktop-settings-modal #ui-scale-row {
  margin-top: 18px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--card-border);
}
#desktop-settings-modal #ui-scale-row .set-sublabel { margin-top: 18px; }
#desktop-settings-modal #ui-scale-row .set-head-sub { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
#desktop-settings-modal #ui-scale-row .set-head-sub .set-title { font-size: 15px; font-weight: 800; }
#desktop-settings-modal #ui-scale-row .set-head-sub + .set-sublabel { margin-top: 14px; }

.sb-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-tile {
  display: flex; flex-direction: column; gap: 9px; padding: 9px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--hint);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.sb-tile:hover { background: rgba(255, 255, 255, 0.07); }
.sb-tile:active { transform: scale(0.98); }
.sb-tile.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 3px var(--accent-glow); }
.sb-label { font-size: 13px; font-weight: 700; text-align: center; }
.sb-prev { position: relative; display: block; height: 70px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #1a1430, #0d0a1a); }
.sb-prev i { position: absolute; display: block; }
.sb-prev .sb-bar {
  left: 0; top: 0; bottom: 0; width: 32%; border-right: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(var(--accent), var(--accent)) 8px 21px / calc(100% - 16px) 7px no-repeat,
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 14px) 8px 9px / calc(100% - 16px) calc(100% - 16px) no-repeat,
    rgba(255, 255, 255, 0.07);
}
.sb-prev.modern .sb-bar { left: 6px; top: 6px; bottom: 6px; width: 30%; border-right: none; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
.sb-prev .sb-content { left: 38%; right: 8px; top: 9px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); box-shadow: 0 17px 0 rgba(255, 255, 255, 0.08), 0 34px 0 rgba(255, 255, 255, 0.06); }

#desktop-settings-modal .set-toggle-row { margin-top: 18px; padding: 12px 14px; }
.set-toggle-logo { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: rgba(29, 185, 84, 0.1); border: 1px solid rgba(29, 185, 84, 0.25); }
.set-toggle-logo .sp-logo { filter: drop-shadow(0 2px 8px rgba(29, 185, 84, 0.4)); }
.set-toggle-row .set-toggle-text { flex: 1; }

/* ---------- Бічна панель (ПК): прибрані зайві елементи мобільної навігації та «вилізання» за край ---------- */
body.desktop-platform .bottom-nav::before, body.desktop-platform .bottom-nav::after { display: none; }
body.desktop-platform.sidebar-style-modern .nav-btn.active::before,
body.desktop-platform.sidebar-style-modern .nav-btn-extra.active::before { display: none; }
body.desktop-platform.sidebar-style-modern .sidebar-collapse-btn { top: 22px; right: 12px; background: rgba(255, 255, 255, 0.08); }
body.desktop-platform.sidebar-style-modern.sidebar-collapsed .sidebar-collapse-btn { top: 74px; right: 50%; margin-right: -12px; }


/* =====================================================================
   Вікно «Налаштування» (ПК): кожна настройка — окремий блок-картка
   ===================================================================== */
#desktop-settings-modal #appearance-settings-card .set-group,
#desktop-settings-modal #appearance-settings-card .set-group-pad {
  background: none; border: none; box-shadow: none; padding: 0; border-radius: 0;
}
#desktop-settings-modal #appearance-settings-card .set-head { margin: 4px 2px 6px; }
#desktop-settings-modal .set-block {
  margin-top: 10px; padding: 14px 14px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
}
#desktop-settings-modal .set-block .set-sublabel { margin: 0 0 10px !important; }
#desktop-settings-modal .set-block .theme-grid { margin-top: 0; }
#desktop-settings-modal .set-block .segmented { margin-top: 0; }
#desktop-settings-modal #ui-scale-row { margin-top: 18px; padding: 0; background: none; border: none; border-radius: 0; }
#desktop-settings-modal #ui-scale-row .set-head-sub { margin: 0 2px 6px; }
#desktop-settings-modal #ui-scale-row .set-block:first-of-type { margin-top: 6px; }
#desktop-settings-modal #ui-scale-row .set-toggle-row { margin-top: 10px; border-radius: 18px; padding: 14px; }

/* Сучасний сайдбар: активний пункт ОДНАКОВИЙ усюди — м'яка плитка-іконка зі світлою іконкою (як «ШІ-ключ») */
body.desktop-platform.sidebar-style-modern .nav-btn.active,
body.desktop-platform.sidebar-style-modern .nav-btn-extra.active {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-2) 75%, transparent);
}
body.desktop-platform.sidebar-style-modern .nav-btn.active .nav-primary-ico,
body.desktop-platform.sidebar-style-modern .nav-btn-extra.active .nav-extra-ico {
  background: rgba(255, 255, 255, 0.1); color: var(--accent-2); box-shadow: none;
}
body.desktop-platform.sidebar-style-modern .nav-btn.active .nav-primary-ico svg,
body.desktop-platform.sidebar-style-modern .nav-btn-extra.active .nav-extra-ico svg { stroke: var(--accent-2); color: var(--accent-2); }

/* Сучасний сайдбар: рівні відступи від країв (зверху як і ліворуч) і кнопка згортання не накриває назву */
body.desktop-platform.sidebar-style-modern .bottom-nav { margin: -8px 0 12px 12px; }
body.desktop-platform.sidebar-style-modern .sidebar-brand { padding-right: 38px; justify-content: flex-start; }
body.desktop-platform.sidebar-style-modern .sidebar-collapse-btn { top: 16px; right: 14px; width: 26px; height: 26px; z-index: 6; }
body.desktop-platform.sidebar-style-modern.sidebar-collapsed .sidebar-brand { padding-right: 0; justify-content: center; }
body.desktop-platform.sidebar-style-modern.sidebar-collapsed .bottom-nav { margin-left: 8px; }

/* Сучасний сайдбар: без щілин по краях — панель притиснута до лівого, верхнього й нижнього краю, скруглення лише справа */
body.desktop-platform.sidebar-style-modern .bottom-nav,
body.desktop-platform.sidebar-style-modern.sidebar-collapsed .bottom-nav {
  margin: -20px 0 0 0; border-radius: 0 28px 28px 0; border-left: none; border-top: none; border-bottom: none;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ====================================================================
   Масштаб для 4K (ПК): html{zoom} + компенсація vh/vw (--vh1/--vw1 = 1 одиниця вікна у «зумлених» px)
   ==================================================================== */
:root { --vh1: calc(1vh / var(--ui-fit, var(--ui-zoom, 1))); --dvh1: calc(1dvh / var(--ui-fit, var(--ui-zoom, 1))); --vw1: calc(1vw / var(--ui-fit, var(--ui-zoom, 1))); }
html.ui-zoomed { zoom: var(--ui-zoom); }

/* ---------- Банер «Публікується…» у стилі iPhone ---------- */
.pub-banner {
  min-width: 290px; padding: 13px 15px; column-gap: 13px; row-gap: 11px; border-radius: 26px;
  background: rgba(44, 42, 58, 0.72);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  align-items: center;
  transform: translateY(28px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.2, 1.15, 0.3, 1);
}
.pub-banner.in { transform: none; }
.pub-banner.out { transform: translateY(20px) scale(0.94); }
.pub-banner-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 14px; }
.pub-banner-icon svg { width: 20px; height: 20px; }
.pub-banner-text { padding-top: 0; }
.pub-banner-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.pub-banner-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); margin-top: 2px; }
.pub-banner-thumb { width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, 0.08); border: 0.5px solid rgba(255, 255, 255, 0.14); }
.pub-banner-progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.pub-banner-progress-fill { border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* ---------- Профіль у сайдбарі: клік, власна плашка статусу ---------- */
.sidebar-footer-avatar, .sidebar-footer-info { cursor: pointer; }
.sidebar-footer-role.is-custom {
  display: inline-block !important; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 42%, transparent);
  -webkit-text-fill-color: var(--rc); background-clip: border-box; -webkit-background-clip: border-box;
}
.pc-overlay { align-items: center; justify-content: center; }
.pc-sheet { width: min(420px, calc(100% - 32px)); padding: 20px; border-radius: 26px; }
.pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.pc-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pc-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; font-size: 32px; font-weight: 800; color: #fff; background: linear-gradient(150deg, #fb7185, #f97316); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); }
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.pc-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hint); margin: 16px 0 8px; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-input { width: 100%; box-sizing: border-box; margin-top: 10px; }
.pc-colors { display: flex; gap: 10px; margin-top: 12px; }
.pc-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.pc-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pc-preview { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--hint); }


/* =====================================================================
   Тех-розділ: жорстке виправлення багів і дизайну
   ===================================================================== */
/* БАГ: аватарки в списках (канали/адміни/джерела) витягувались у «яйця» — min-height із щільності
   (calc(44px * --ui-icon-scale)) перебивав менший inline height. Прибираємо min-height, лишаємо aspect-ratio. */
.channel-avatar { min-height: 0; flex: none; aspect-ratio: 1 / 1; }
.channel-avatar img { aspect-ratio: 1 / 1; }

/* Вкладки: рівна сітка замість «ламаного» переносу (6+5 на широких, 4 на вужчих); без подвійного кільця на активній */
body.desktop-platform #tab-dev .modal-tab-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 20px; overflow: visible;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border);
}
@media (min-width: 1200px) { body.desktop-platform #tab-dev .modal-tab-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
body.desktop-platform #tab-dev .modal-tab-btn {
  flex: none; width: 100%; min-width: 0; justify-content: center; padding: 11px 10px; border-radius: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
body.desktop-platform #tab-dev .modal-tab-btn:hover { background: rgba(255, 255, 255, 0.06); }
body.desktop-platform #tab-dev .modal-tab-btn:active { transform: scale(0.97); }
body.desktop-platform #tab-dev .modal-tab-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 8px 22px var(--accent-glow); }
#tab-dev .modal-tab-btn.active:focus-visible { outline: none; }

/* Огляд: плитки статистики замість голих чисел */
#dev-stats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 10px !important; }
#dev-stats-grid .stat-chip, #dev-stats-grid .health-chip {
  padding: 13px 15px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--card-border);
}
#dev-stats-grid .stat-chip-value { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#dev-stats-grid .stat-chip-label { font-size: 11.5px !important; margin-top: 4px !important; }
#dev-stats-grid .health-chip { min-height: 50px; gap: 10px !important; }
#dev-stats-grid .health-dot { width: 10px !important; height: 10px !important; box-shadow: 0 0 10px currentColor; }
#dev-stats-grid .health-label { font-size: 13.5px !important; font-weight: 600; }

/* Вікно адміна: перемикачі каналів — підпис ліворуч, перемикач праворуч; рівні відступи */
#dev-user-channels-modal .watermark-toggle { flex-direction: row-reverse; justify-content: space-between; width: 100%; gap: 12px; padding: 10px 2px; font-size: 14px; font-weight: 600; }
#dev-user-channels-modal .watermark-toggle + .watermark-toggle { border-top: 1px solid var(--card-border); }
#dev-user-channels-modal .pill-row { gap: 8px; flex-wrap: wrap; }
#dev-user-channels-modal .settings-card { border-radius: 20px; }

/* Списки тех-розділу: рядки-картки однакової висоти та ритму */
#tab-dev .settings-card { border-radius: 20px; }
#tab-dev .settings-card-title { letter-spacing: -0.01em; }


/* ПК: сама сторінка НЕ прокручується (прокручуються лише внутрішні списки/панелі), на будь-якому екрані й масштабі */
html:has(body.desktop-platform), body.desktop-platform { overflow: hidden; height: 100%; overscroll-behavior: none; }
body.desktop-platform .app { overflow: hidden; }

/* ---------- Фікс: невидимий grabber перекривав крестик закриття ---------- */
.sheet-grabber { height: 22px; }
body.desktop-platform .sheet-grabber { display: none; }
.modal-sheet .modal-close,
.modal-sheet .icon-btn,
.modal-sheet .modal-header-actions,
.modal-sheet .pc-head button { position: relative; z-index: 6; }

/* ---------- Згорнутий сайдбар: профіль і обкладинка — рівні квадрати/кола, без порожнього місця ---------- */
body.desktop-platform.sidebar-collapsed .sidebar-footer-info { display: none !important; }
body.desktop-platform.sidebar-collapsed .sidebar-footer { align-items: center; gap: 8px; padding: 10px 0 8px; }
body.desktop-platform .sidebar-footer-avatar { aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; }
body.desktop-platform .sidebar-footer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.desktop-platform .sp-cover { aspect-ratio: 1 / 1; flex: none; }
body.desktop-platform .sp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ---------- Вікно «Профіль»: герой-картка, drag&drop, лічильник, «Готово» ---------- */
.pc-sheet { width: min(480px, calc(100% - 32px)); padding: 22px; }
.pc-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; padding: 18px; border-radius: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255, 255, 255, 0.03)); border: 1px dashed var(--card-border); transition: border-color 0.18s, background 0.18s; }
.pc-hero.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.pc-hero .pc-avatar { width: 96px; height: 96px; padding: 0; border: 0; cursor: pointer; grid-row: span 2; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.45); }
.pc-hero .pc-avatar:hover { transform: scale(1.04); box-shadow: 0 0 0 3px var(--accent), 0 12px 30px rgba(0,0,0,0.45); }
.pc-cam { position: absolute; left: 88px; top: 88px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; pointer-events: none;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); border: 2px solid var(--bg, #0b0a14); }
.pc-hero-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pc-hero-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-hint { font-size: 12px; color: var(--hint); line-height: 1.35; }
.pc-hero .pc-avatar-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
.pc-input-wrap { position: relative; margin-top: 10px; }
.pc-input-wrap .pc-input { margin-top: 0; padding-right: 54px; }
.pc-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; pointer-events: none; }
.pc-swatch { width: 32px; height: 32px; transition: transform 0.12s ease; }
.pc-swatch:hover { transform: scale(1.12); }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.pc-saved { font-size: 12px; color: var(--hint); }

/* =====================================================================
   Тех-розділ «Система»: обмеження розділів, воркери, розсилка, оновлення
   ===================================================================== */
/* Обмеження розділів: плитки-перемикачі (виділена = прихована від адмінів) */
.rs-summary { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); }
.rs-summary.has { color: #fb7185; background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.35); }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.rs-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; cursor: pointer; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.16s, border-color 0.16s, transform 0.12s; }
.rs-chip:hover { background: rgba(255, 255, 255, 0.08); }
.rs-chip:active { transform: scale(0.98); }
.rs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rs-state { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--hint); background: rgba(255, 255, 255, 0.06); transition: background 0.16s, color 0.16s; }
.rs-slash { opacity: 0; transition: opacity 0.16s; }
.rs-chip:has(input:checked) { background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.45); }
.rs-chip:has(input:checked) .rs-state { background: linear-gradient(150deg, #fb7185, #e11d48); color: #fff; }
.rs-chip:has(input:checked) .rs-slash { opacity: 1; }
.rs-chip:has(input:checked) .rs-name { text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, 0.7); }
.rs-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Воркери: три плитки-дії */
.sys-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sys-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; text-align: left; color: var(--text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.16s, border-color 0.16s, transform 0.12s, box-shadow 0.16s; }
.sys-action:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.sys-action:active { transform: scale(0.97); }
.sys-action:disabled { opacity: 0.55; cursor: progress; }
.sys-action-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.sys-action-danger { border-color: rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.07); }
.sys-action-danger:hover { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.6); }
@media (max-width: 560px) { .sys-actions { grid-template-columns: 1fr; } .sys-action { flex-direction: row; align-items: center; } }

/* Розсилка */
.bc-text-wrap { position: relative; margin-bottom: 10px; }
.bc-text-wrap textarea { width: 100%; box-sizing: border-box; min-height: 120px; padding-bottom: 28px; resize: vertical; margin: 0; border-radius: 16px; }
.bc-count { position: absolute; right: 14px; bottom: 10px; font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; pointer-events: none; }
.bc-media { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--hint);
  border: 1.5px dashed var(--card-border); transition: border-color 0.16s, color 0.16s, background 0.16s; }
.bc-media:hover { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bc-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.bc-btn-row input { margin: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .bc-btn-row { grid-template-columns: 1fr; } }

/* Головні кнопки дій */
.sys-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 10px 24px var(--accent-glow); transition: transform 0.12s, filter 0.16s, box-shadow 0.16s; }
.sys-cta:hover { filter: brightness(1.08); }
.sys-cta:active { transform: scale(0.985); }
.sys-cta:disabled { opacity: 0.6; cursor: progress; }
.sys-cta-danger { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 24px rgba(225, 29, 72, 0.35); }
.sys-warn { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; color: #fbbf24; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.28); }
.sys-warn svg { flex: none; }
.sys-card-danger { border-color: rgba(251, 113, 133, 0.25); }

/* =====================================================================
   Редагування посту: тулбар у два ряди, картки-перемикачі, швидкий розклад, індикатор довжини
   ===================================================================== */
#editor-modal .editor-flat-toolbar { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 8px; row-gap: 6px; }
#editor-modal .editor-flat-toolbar .tb-divider { display: none; }
#editor-modal .editor-flat-toolbar .tb-btn { flex: 1 1 calc(12.5% - 6px); min-width: 44px; }
#editor-modal .editor-flat-toolbar .tb-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* Лічильник + прогрес */
#editor-modal .textarea-wrap { position: relative; }
.ed-mini-btn { position: absolute; left: 12px; bottom: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--card-border); color: var(--hint); background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: color 0.15s, background 0.15s; }
.ed-mini-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }
.ed-progress { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; pointer-events: none; }
.ed-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 0.2s ease, background 0.2s ease; }
.ed-progress i[data-level="warn"] { background: #fbbf24; }
.ed-progress i[data-level="over"] { background: #fb7185; }
#editor-modal .editor-word-stats { padding-left: 44px; }

/* Перемикачі як картки */
#editor-modal .editor-inline-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#editor-modal .editor-inline-toggles .watermark-toggle {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.16s, border-color 0.16s;
}
#editor-modal .editor-inline-toggles .watermark-toggle:hover { background: rgba(255, 255, 255, 0.07); }
#editor-modal .editor-inline-toggles .watermark-toggle:has(.watermark-switch.on) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wt-title { font-size: 14px; font-weight: 700; }
.wt-hint { font-size: 11.5px; color: var(--hint); line-height: 1.3; }
@media (max-width: 560px) { #editor-modal .editor-inline-toggles { grid-template-columns: 1fr; } }

/* Швидкий вибір часу */
.sched-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sched-presets .chip-action-btn { transition: background 0.15s, color 0.15s, border-color 0.15s; }
.sched-presets .chip-action-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }
.sched-presets .chip-action-btn.active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Кнопка публікації */
#editor-publish-btn { gap: 10px; }
.ed-kbd { margin-left: 6px; padding: 2px 7px; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 700; opacity: 0.85; background: rgba(255, 255, 255, 0.2); }
@media (hover: none) { .ed-kbd { display: none; } }

/* =====================================================================
   Кнопки-дії з іконками (вікно адміна) і глянцеві значки карток
   ===================================================================== */
/* Значок картки з inline-градієнтом: біла іконка (раніше бралась фіолетова) + глянець і тінь */
.settings-card-icon[style*="gradient"] { color: #fff; position: relative; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 12px rgba(0, 0, 0, 0.12); }
.settings-card-icon[style*="gradient"] svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); stroke-width: 2; }
#tab-dev .settings-card-icon { width: calc(40px * var(--ui-icon-scale, 1)); height: calc(40px * var(--ui-icon-scale, 1)); min-width: calc(40px * var(--ui-icon-scale, 1)); border-radius: 13px; }
#tab-dev .settings-card-icon:not([style*="gradient"]) { color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 8px 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
#tab-dev .settings-card-icon svg { width: calc(19px * var(--ui-icon-scale, 1)); height: calc(19px * var(--ui-icon-scale, 1)); }

/* Кнопки у вікні адміна */
#dev-user-channels-modal .pill-row { gap: 10px; }
.ub-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-weight: 700; transition: transform 0.12s, background 0.16s, border-color 0.16s, box-shadow 0.16s, color 0.16s; }
.ub-btn svg { flex: none; }
.ub-btn:hover { background: rgba(255, 255, 255, 0.1); }
.ub-btn:active { transform: scale(0.96); }
/* Тарифи: сегменти зі своїм кольором */
.ub-plan { --pc: #94a3b8; }
.ub-plan-free { --pc: #34d399; } .ub-plan-pro { --pc: #fbbf24; } .ub-plan-business { --pc: #a78bfa; }
.ub-plan svg { color: var(--pc); }
.ub-plan.on { color: #fff; border-color: color-mix(in srgb, var(--pc) 65%, transparent); background: color-mix(in srgb, var(--pc) 18%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 16%, transparent), 0 8px 20px color-mix(in srgb, var(--pc) 22%, transparent); }
/* Дії */
.ub-tech svg { color: #a78bfa; } .ub-beta svg { color: #38bdf8; }
.ub-tech.on, .ub-beta.on { color: #fff; }
.ub-tech.on { background: rgba(167, 139, 250, 0.18); border-color: rgba(167, 139, 250, 0.6); }
.ub-beta.on { background: rgba(56, 189, 248, 0.16); border-color: rgba(56, 189, 248, 0.55); }
.ub-danger { color: #fb7185; background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.4); }
.ub-danger:hover { background: rgba(251, 113, 133, 0.2); }
.ub-ok { color: #34d399; background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.4); }

/* ---------- Тулбар редактора (мобільний): рівна сітка 5×3, нічого не вилазить за рамку ---------- */
body:not(.desktop-platform) #editor-modal .editor-flat-toolbar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px; box-sizing: border-box; overflow: hidden; }
body:not(.desktop-platform) #editor-modal .editor-flat-toolbar .tb-btn { flex: none; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }

/* ---------- Перегляд як у Telegram-каналі ---------- */
.tg-chat { padding: 18px 14px 14px; border-radius: 18px; box-sizing: border-box;
  background: radial-gradient(120% 90% at 20% 0%, rgba(80, 110, 160, 0.16), transparent 60%), radial-gradient(100% 80% at 90% 100%, rgba(120, 90, 170, 0.14), transparent 55%), #0e1621; }
.tg-chat .tg-bubble { position: relative; max-width: 420px; margin: 0; background: #182533; border: 0; border-radius: 16px 16px 16px 5px; color: #f5f5f5; font-size: 15px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.tg-chat .tg-bubble::after { content: ""; position: absolute; left: -6px; bottom: 0; width: 10px; height: 12px; background: #182533; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-left-radius: 0; }
.tg-chat .tg-bubble a { color: #6ab3f3; text-decoration: none; }
.tg-chat .tg-preview-gallery { padding: 3px 3px 0; }
.tg-chat .tg-preview-item { border-radius: 13px 13px 4px 4px; }
.tg-chat .tg-preview-gallery .tg-preview-item:only-child { border-radius: 13px 13px 4px 4px; }
.tg-chat .tg-preview-gallery-1 .tg-preview-item { aspect-ratio: auto; max-height: 360px; }
.tg-chat .tg-preview-gallery-1 .tg-preview-item img, .tg-chat .tg-preview-gallery-1 .tg-preview-item video { height: auto; max-height: 360px; object-fit: cover; }
.tg-chat .tg-preview-text { padding: 7px 12px 6px; }
.tg-chat .tg-preview-footer { border-top: 0; margin-top: 6px; padding-top: 0; font-size: inherit; opacity: 1; }
.tg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; font-size: 11.5px; color: #6d7f8f; font-variant-numeric: tabular-nums; }
.tg-meta svg { opacity: 0.9; }
.tg-meta-time { margin-left: 4px; }
#editor-preview-modal .modal-sheet { padding-bottom: 18px; }
#editor-focus-preview-pane .tg-chat { height: auto; }

/* ---------- Вкладення: мініатюра + обрізана назва + розмір (підтримка й розсилка) ---------- */
.att-thumb { width: 34px; height: 34px; flex: none; border-radius: 9px; object-fit: cover; display: block; }
.att-thumb-ico { display: grid; place-items: center; color: var(--hint); background: rgba(255, 255, 255, 0.08); }
.chat-composer-attach-chip.att-chip { max-width: 100%; box-sizing: border-box; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px; align-items: center; }
.chat-composer-attach-chip.att-chip #support-attachment-name { max-width: 200px; min-width: 0; font-size: 13px; font-weight: 600; }
.att-card { display: flex; align-items: center; gap: 12px; max-width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); }
.att-card .att-thumb { width: 44px; height: 44px; border-radius: 11px; }
.att-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.att-name { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: 11.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.att-x { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; border: 0; cursor: pointer; color: var(--hint); background: rgba(255, 255, 255, 0.06); }
.att-x:hover { color: #fb7185; background: rgba(251, 113, 133, 0.14); }
#dev-broadcast-file-name { min-height: 0; margin: 10px 0 12px; }
#dev-broadcast-file-name:empty { margin: 0; }

/* ---------- Сайдбар: «Онлайн» (тех-адміни, ПК) ---------- */
.sidebar-presence { display: none; }
body.desktop-platform .sidebar-presence:not([hidden]) { display: block; margin: 12px 8px 0; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); flex: none; }
body.desktop-platform .sidebar-presence:not([hidden]) ~ .sidebar-spotify:not([hidden]) { margin-top: 12px; }
body.desktop-platform .sidebar-presence:not([hidden]) { margin-top: auto; }
body.desktop-platform .sidebar-presence:not([hidden]) + .sidebar-spotify:not([hidden]) { margin-top: 12px; }
.sp-pres-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); }
.pres-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #6b7280; }
.has-online .pres-dot { background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: presPulse 2s ease-out infinite; }
@keyframes presPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
.pres-title { font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; flex: 1; text-align: left; }
.pres-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-align: center; color: var(--hint); background: rgba(255, 255, 255, 0.08); font-variant-numeric: tabular-nums; }
.has-online .pres-count { color: #34d399; background: rgba(52, 211, 153, 0.14); }
.pres-chev { color: var(--hint); transition: transform 0.2s ease; }
.sidebar-presence:not(.is-open) .pres-chev { transform: rotate(-90deg); }
.pres-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 232px; overflow-y: auto; scrollbar-width: thin; }
.pres-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 11px; }
.pres-row:hover { background: rgba(255, 255, 255, 0.06); }
.pres-av { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.pres-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pres-row:not(.on) .pres-av { filter: grayscale(0.7); opacity: 0.7; }
.pres-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.pres-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-sub { font-size: 11px; color: var(--hint); }
.pres-row.on .pres-sub { color: #34d399; font-weight: 700; }
.pres-status { width: 7px; height: 7px; flex: none; border-radius: 50%; background: transparent; }
.pres-row.on .pres-status { background: #34d399; }
.pres-empty { padding: 8px 6px; font-size: 12px; color: var(--hint); }
/* згорнутий сайдбар: лише точка й лічильник */
body.desktop-platform.sidebar-collapsed .sidebar-presence:not([hidden]) { margin: 12px 6px 0; padding: 6px 2px; }
body.desktop-platform.sidebar-collapsed .pres-title, body.desktop-platform.sidebar-collapsed .pres-chev, body.desktop-platform.sidebar-collapsed .pres-list { display: none; }
body.desktop-platform.sidebar-collapsed .sp-pres-head { flex-direction: column; gap: 4px; padding: 2px; }
body.desktop-platform.sidebar-collapsed .pres-count { padding: 1px 5px; }
@media (prefers-reduced-motion: reduce) { .has-online .pres-dot { animation: none; } }

/* =====================================================================
   Редактор: медіа-блок — скляні кнопки дій, бейдж типу, рядок «водяний знак»
   ===================================================================== */
#editor-modal .media-preview-card { border-radius: 20px; background: rgba(255, 255, 255, 0.03); }
#editor-modal .album-gallery { padding: 10px; gap: 10px; }
#editor-modal .album-thumb { border-radius: 14px; }
#editor-modal .album-gallery-single .album-thumb:not(.album-thumb-add) { height: auto; aspect-ratio: 16 / 10; max-height: 300px; }
#editor-modal .album-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 44%; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); pointer-events: none; }
/* Кнопки дій: єдина скляна «капсула» у верхньому лівому куті, різні іконки */
#editor-modal .album-thumb-edit, #editor-modal .album-thumb-delogo, #editor-modal .album-thumb-remove {
  z-index: 3; top: 8px; bottom: auto; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(12, 10, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
#editor-modal .album-thumb-edit { left: 8px; }
#editor-modal .album-thumb-delogo { left: 46px; }
#editor-modal .album-thumb-remove { right: 8px; left: auto; }
#editor-modal .album-thumb-edit:hover, #editor-modal .album-thumb-delogo:hover { background: color-mix(in srgb, var(--accent) 55%, rgba(12, 10, 24, 0.6)); border-color: rgba(255, 255, 255, 0.35); }
#editor-modal .album-thumb-remove:hover { background: rgba(225, 29, 72, 0.7); border-color: rgba(255, 255, 255, 0.35); }
#editor-modal .album-thumb-edit:active, #editor-modal .album-thumb-delogo:active, #editor-modal .album-thumb-remove:active { transform: scale(0.92); }
#editor-modal .album-thumb-edit svg, #editor-modal .album-thumb-delogo svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Бейдж типу: маленька «пілюля» внизу, не налазить на кнопки */
#editor-modal .album-type-badge { z-index: 3; left: 10px; bottom: 10px; width: auto; height: 24px; padding: 0 8px; border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(12, 10, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); }
/* У мультиальбомі плитки малі: кроп+ластик зліва з'єднані в одну капсулу
   (не два окремих "плаваючих" квадрати з розривом) — читається як один
   кластер інструментів; видалення праворуч окремо, воно деструктивне. */
#editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-edit, #editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-delogo, #editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-remove { width: 26px; height: 26px; top: 6px; }
#editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-edit { left: 6px; border-radius: 9px 9px 0 0; }
#editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-delogo { left: 6px; top: 32px; border-radius: 0 0 9px 9px; border-top-color: rgba(255,255,255,.1) !important; }
#editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-remove { right: 6px; border-radius: 9px; }
#editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-edit svg, #editor-modal .album-gallery:not(.album-gallery-single) .album-thumb-delogo svg { width: 14px; height: 14px; }
/* Бейдж типу тут — пасивна підказка, не дія: менший, без рамки, тьмяніший за
   робочі кнопки поруч, щоб не читався як "четверта кнопка". */
#editor-modal .album-gallery:not(.album-gallery-single) .album-type-badge { left: 6px; bottom: 6px; height: 18px; padding: 0 5px; border-radius: 6px; border: none; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#editor-modal .album-gallery:not(.album-gallery-single) .album-type-badge svg { width: 10px; height: 10px; opacity: .85; }
/* Плитка «додати» */
#editor-modal .album-gallery-single .album-thumb-add { width: 64px; height: 64px; border-radius: 16px; }
#editor-modal .album-thumb-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#editor-modal .album-thumb-add::after { display: none; }
/* Одиночне фото/відео — своє, просторіше оформлення кнопок (не той самий
   компактний стиль, що й дрібні тайли альбому): великий кадр дозволяє
   кнопкам бути помітнішими, з м'яким підйомом-тінню замість пласкої плашки. */
#editor-modal .album-gallery-single .album-thumb-edit,
#editor-modal .album-gallery-single .album-thumb-delogo,
#editor-modal .album-gallery-single .album-thumb-remove {
  width: 38px; height: 38px; border-radius: 13px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.6) !important;
}
#editor-modal .album-gallery-single .album-thumb-edit svg,
#editor-modal .album-gallery-single .album-thumb-delogo svg,
#editor-modal .album-gallery-single .album-thumb-remove svg { width: 19px !important; height: 19px !important; }
#editor-modal .album-gallery-single .album-thumb-delogo { top: 10px; left: 10px; }
#editor-modal .album-gallery-single .album-thumb-remove { top: 10px; right: 10px; }
/* top:auto обов'язковий: базове правило вище (.album-thumb-edit) ставить
   top:8px, а з явно заданою height "bottom" без скидання top просто
   ігнорується браузером (over-constrained) — кнопка кропу інакше й далі
   малювалась би зверху, поверх ластика, замість знизу. */
#editor-modal .album-gallery-single .album-thumb-edit { top: auto; bottom: 10px; left: 10px; }
/* Бейдж типу тут інакше сідає в той самий кут, що й кроп (обидва bottom+left)
   — переносимо праворуч-знизу, єдиний вільний кут при такому розкладі кнопок. */
#editor-modal .album-gallery-single .album-type-badge { left: auto; right: 10px; bottom: 10px; }
/* Рядок «Накласти водяний знак» — картка з перемикачем справа */
#editor-modal .media-preview-controls { padding: 0 10px 10px; }
#editor-modal .media-preview-controls .watermark-toggle { width: 100%; flex-direction: row-reverse; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.16s, border-color 0.16s; }
#editor-modal .media-preview-controls .watermark-toggle:hover { background: rgba(255, 255, 255, 0.07); }
#editor-modal .media-preview-controls .watermark-toggle:has(.watermark-switch.on) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
#editor-modal .media-preview-controls .watermark-toggle > span:not(.watermark-switch) { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
#editor-modal .media-preview-controls .watermark-toggle svg { width: 18px; height: 18px; color: var(--accent-2); }

/* ---------- Фікс: у сайдбарі віджети не стискаються (Spotify обрізався знизу), натомість скролиться панель ---------- */
body.desktop-platform .bottom-nav > .sidebar-presence,
body.desktop-platform .bottom-nav > .sidebar-spotify,
body.desktop-platform .bottom-nav > .sidebar-footer,
body.desktop-platform .bottom-nav > .sidebar-brand { flex-shrink: 0; }
body.desktop-platform .bottom-nav > .nav-btn, body.desktop-platform .bottom-nav > .nav-btn-extra { flex-shrink: 0; }
.pres-list { max-height: 118px; }

.tg-footer-note { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #6d7f8f; background: rgba(255, 255, 255, 0.07); white-space: nowrap; }

/* =====================================================================
   Сайдбар ПК без прокрутки: рівні стиснення sb-c1…sb-c4 (JS initSidebarFit додає, поки все не влізе)
   ===================================================================== */
body.desktop-platform .bottom-nav { overflow-y: hidden; }
/* Якщо навіть sb-c4 (максимальне стиснення, initSidebarFit у app-beta.js) не
   вмістив усі пункти по висоті — скрол замість обрізання нижніх елементів
   (футер/кнопка виходу) невидимою межею overflow-y:hidden. */
body.desktop-platform .bottom-nav.sb-overflow { overflow-y: auto; }
/* c1: щільніші пункти, без другорядного у Spotify, «Онлайн» без списку */
body.desktop-platform.sb-c1 .bottom-nav { padding-top: 12px; padding-bottom: 12px; }
body.desktop-platform.sb-c1 .bottom-nav .nav-btn, body.desktop-platform.sb-c1 .bottom-nav .nav-btn-extra { padding-top: 4px !important; padding-bottom: 4px !important; }
body.desktop-platform.sb-c1 .nav-primary-ico, body.desktop-platform.sb-c1 .nav-extra-ico { width: 34px !important; height: 34px !important; min-height: 0 !important; }
body.desktop-platform.sb-c1 .sp-volume, body.desktop-platform.sb-c1 .sp-device, body.desktop-platform.sb-c1 .sp-hint { display: none !important; }
body.desktop-platform.sb-c1 .sidebar-brand { padding-top: 0; padding-bottom: 8px; }
/* c2: іконки менші, Spotify без перемотування */
body.desktop-platform.sb-c2 .nav-primary-ico, body.desktop-platform.sb-c2 .nav-extra-ico { width: 30px !important; height: 30px !important; border-radius: 10px; }
body.desktop-platform.sb-c2 .bottom-nav .nav-btn, body.desktop-platform.sb-c2 .bottom-nav .nav-btn-extra { padding-top: 2px !important; padding-bottom: 2px !important; font-size: 13px; }
body.desktop-platform.sb-c2 .sp-range, body.desktop-platform.sb-c2 .sp-times { display: none !important; }
body.desktop-platform.sb-c2 .sidebar-spotify:not([hidden]) { padding: 10px 12px !important; }
body.desktop-platform.sb-c2 .sp-head { margin-bottom: 6px !important; }
body.desktop-platform.sb-c2 .sidebar-footer { padding-top: 8px; }
/* c3: Spotify — лише обкладинка з назвою й кнопками; «Онлайн» тільки заголовок; підпис бренду зникає */
body.desktop-platform.sb-c3 .pres-list { display: none; }
body.desktop-platform.sb-c3 .sp-head, body.desktop-platform.sb-c3 .sidebar-brand-subtitle { display: none !important; }
body.desktop-platform.sb-c3 .sp-cover { width: 36px !important; height: 36px !important; }
body.desktop-platform.sb-c3 .nav-primary-ico, body.desktop-platform.sb-c3 .nav-extra-ico { width: 28px !important; height: 28px !important; }
body.desktop-platform.sb-c3 .sidebar-presence:not([hidden]) { padding: 4px 6px; }
/* c4: найкомпактніше — без Spotify і «Онлайн» */
body.desktop-platform.sb-c4 .sidebar-spotify, body.desktop-platform.sb-c4 .sidebar-presence { display: none !important; }

/* =====================================================================
   Профіль (мобільний): тап по фото змінює його; плашка статусу
   ===================================================================== */
.profile-avatar-wrap { position: relative; width: 84px; margin: 0 auto 12px; }
.profile-avatar-wrap .profile-header-avatar { margin: 0 !important; cursor: pointer; }
.profile-cam { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bg, #0b0a14); cursor: pointer; color: #fff; padding: 0;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 4px 12px var(--accent-glow); transition: transform 0.12s ease; }
.profile-cam:active { transform: scale(0.9); }
.profile-hero-status { position: relative; margin-top: 8px; cursor: pointer; }

/* =====================================================================
   Адаптація під телефони (≤ 600px): тех-розділ, редактор, вікно профілю, адмін-вікна
   ===================================================================== */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  .settings-card, .settings-card-body, .modal-sheet, .tab-screen { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .settings-card-title, .settings-card-desc { overflow-wrap: anywhere; }
  /* тех-розділ */
  #tab-dev .modal-tab-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tab-dev .settings-card-header { gap: 10px; }
  .rs-grid { grid-template-columns: 1fr 1fr; }
  .rs-chip { padding: 9px 10px; font-size: 12.5px; }
  .rs-state { width: 28px; height: 28px; }
  .sys-actions { grid-template-columns: 1fr; }
  .sys-action { flex-direction: row; align-items: center; }
  .bc-btn-row { grid-template-columns: 1fr; }
  .att-card { padding: 6px 8px; }
  /* вікно адміна: кнопки у дві колонки */
  #dev-user-channels-modal .pill-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #dev-user-channels-modal .pill-row .ub-btn { justify-content: center; padding: 10px 8px; font-size: 13px; }
  #dev-user-channels-modal .pill-row .ub-plan { grid-column: auto; }
  /* редактор посту */
  #editor-modal .editor-flat-toolbar { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
  #editor-modal .editor-inline-toggles { grid-template-columns: 1fr; }
  #editor-modal .editor-quick-actions { flex-wrap: wrap; }
  #editor-modal .editor-quick-actions .pill { flex: 1 1 calc(50% - 8px); }
  .tg-chat { padding: 12px 8px; }
  .tg-chat .tg-bubble { max-width: 100%; }
  /* вікно профілю: фото зверху по центру */
  .pc-sheet { padding: 18px 16px; max-height: calc(100% - 24px); overflow-y: auto; }
  .pc-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 12px; }
  .pc-hero .pc-avatar { grid-row: auto; }
  .pc-cam { left: calc(50% + 14px); top: 88px; }
  .pc-hero-info { align-items: center; }
  .pc-hero .pc-avatar-actions { grid-column: 1; justify-content: center; }
  .pc-foot { flex-direction: column-reverse; align-items: stretch; }
  .pc-foot .pill { justify-content: center; }
  /* підтримка: вкладення */
  .chat-composer-attach-chip.att-chip #support-attachment-name { max-width: 130px; }
}

/* ---------- Чернетки в черзі ---------- */
.queue-card.is-draft { border-style: dashed; border-color: rgba(251, 191, 36, 0.45); background: linear-gradient(160deg, rgba(251, 191, 36, 0.07), rgba(255, 255, 255, 0.02)); }

/* ---------- Док згорнутого редактора ---------- */
#editor-dock { position: fixed; right: 24px; bottom: 24px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px 10px 10px;
  border-radius: 18px; cursor: pointer; font: inherit; color: var(--text); text-align: left; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 24%, #151225), #151225); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transform: translateY(16px) scale(0.96); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
#editor-dock.show { transform: none; opacity: 1; }
#editor-dock:hover { filter: brightness(1.08); }
#editor-dock:active { transform: scale(0.98); }
#editor-dock[hidden] { display: none; }
.ed-dock-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 6px 16px var(--accent-glow); }
.ed-dock-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ed-dock-title { font-size: 13.5px; font-weight: 800; }
.ed-dock-sub { font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-dock-go { margin-left: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.14); white-space: nowrap; }
@media (max-width: 600px) { #editor-dock { right: 12px; left: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; } }

/* =====================================================================
   Кнопки сайдбару: єдиний охайний вигляд (обидва стилі, обидва стани), центрування у згорнутому
   ===================================================================== */
body.desktop-platform .bottom-nav .nav-btn, body.desktop-platform .bottom-nav .nav-btn-extra {
  border-radius: 14px; border: 1px solid transparent; box-shadow: none; background: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.18s ease, transform 0.12s ease, color 0.16s ease;
}
body.desktop-platform .bottom-nav .nav-btn:hover, body.desktop-platform .bottom-nav .nav-btn-extra:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
body.desktop-platform .bottom-nav .nav-btn:active, body.desktop-platform .bottom-nav .nav-btn-extra:active { transform: scale(0.98); }
body.desktop-platform .bottom-nav .nav-btn:focus-visible, body.desktop-platform .bottom-nav .nav-btn-extra:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.desktop-platform .bottom-nav .nav-primary-ico, body.desktop-platform .bottom-nav .nav-extra-ico {
  border-radius: 12px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.16s ease, transform 0.18s ease;
}
body.desktop-platform .bottom-nav .nav-btn:hover .nav-primary-ico, body.desktop-platform .bottom-nav .nav-btn-extra:hover .nav-extra-ico { transform: scale(1.06); color: var(--text); }
/* Активний: градієнтна плитка + м'яка підсвітка рядка, без грубого контуру */
body.desktop-platform .bottom-nav .nav-btn.active, body.desktop-platform .bottom-nav .nav-btn-extra.active {
  color: var(--text); font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}
body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico, body.desktop-platform .bottom-nav .nav-btn-extra.active .nav-extra-ico {
  color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico svg, body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico .icon,
body.desktop-platform .bottom-nav .nav-btn-extra.active .nav-extra-ico svg { stroke: #fff; color: #fff; }

/* Згорнутий сайдбар: кожна кнопка — квадрат 48px по центру; іконка рівно всередині контуру (баг: зсув через gap) */
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn, body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra {
  width: 48px; height: 48px; min-height: 0; margin: 0 auto; padding: 0 !important; gap: 0 !important; justify-content: center; align-items: center;
}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn > span:not(.nav-primary-ico), body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra > span:not(.nav-extra-ico) {
  display: none !important;
}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-primary-ico, body.desktop-platform.sidebar-collapsed .bottom-nav .nav-extra-ico { margin: 0; }
body.desktop-platform.sidebar-collapsed .bottom-nav .sidebar-section-label:not(:first-of-type) { margin: 8px 14px; }
/* «Онлайн» у згорнутому: акуратне коло з числом */
body.desktop-platform.sidebar-collapsed .sidebar-presence:not([hidden]) { padding: 0; margin: 12px auto 0; width: 48px; background: none; border: 0; }
body.desktop-platform.sidebar-collapsed .sp-pres-head { width: 48px; height: 48px; padding: 0; justify-content: center; align-items: center; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); position: relative; }
body.desktop-platform.sidebar-collapsed .pres-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; }
body.desktop-platform.sidebar-collapsed .pres-count { background: none; font-size: 15px; padding: 0; }

/* =====================================================================
   Панель черги: сегментований перемикач з іконками + скляні кнопки інструментів
   ===================================================================== */
.queue-bar { align-items: center; padding: 0; border-bottom: 0; margin: 0 0 14px; gap: 12px; flex-wrap: wrap; }
.queue-sort { gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); overflow-x: auto; }
.queue-sort-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--hint);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.queue-sort-tab::after { display: none; }
.queue-sort-tab .icon { width: 16px; height: 16px; opacity: 0.8; }
.queue-sort-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.queue-sort-tab:active { transform: scale(0.97); }
.queue-sort-tab.active { color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.queue-sort-tab.active .icon { opacity: 1; }
.queue-sort-tab.qs-urgent:not(.active) .icon { color: #fbbf24; opacity: 1; }
.queue-tools { margin: 0; gap: 8px; background: none; overflow: visible; align-items: center; }
.queue-tools .queue-ttl-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 12px; border-radius: 14px; color: var(--text); font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); transition: background 0.16s, border-color 0.16s, transform 0.12s; }
.queue-tools .queue-ttl-chip .icon { width: 16px; height: 16px; color: var(--accent-2); }
.queue-tools .queue-ttl-chip .qt-chev { width: 13px; height: 13px; color: var(--hint); }
.queue-tools .queue-ttl-chip:hover, .queue-tools .queue-log-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.queue-tools .queue-log-btn { width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.05); color: var(--text); display: grid; place-items: center; transition: background 0.16s, border-color 0.16s, transform 0.12s; }
.queue-tools .queue-log-btn .icon { width: 18px; height: 18px; }
.queue-tools .queue-ttl-chip:active, .queue-tools .queue-log-btn:active { transform: scale(0.95); }
@media (max-width: 600px) {
  .queue-bar { gap: 8px; }
  .queue-sort { flex: 1 1 100%; }
  .queue-sort-tab { padding: 8px 11px; flex: 1; justify-content: center; }
  .queue-sort-tab .icon { display: none; }
  .queue-tools { margin-left: auto; }
}

/* =====================================================================
   Сайдбар: КЛАСИЧНИЙ і СУЧАСНИЙ мають власні стилі кнопок
   Сучасний — скляні плитки-іконки + градієнтний активний пункт (блок вище).
   Класичний — плоскі іконки без плиток, активний = м'яка підсвітка рядка + акцентна рисочка зліва.
   ===================================================================== */
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra {
  border-radius: 10px; border-color: transparent; box-shadow: none; background: transparent;
}
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn:hover,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra:hover { background: rgba(255, 255, 255, 0.05); }
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-primary-ico,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-extra-ico {
  background: none; box-shadow: none; border-radius: 0; border: 0; transform: none !important;
}
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn:hover .nav-primary-ico,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra:hover .nav-extra-ico { color: var(--text); }
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn.active,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra.active {
  background: var(--accent-glow); border-color: transparent; box-shadow: none; color: var(--text);
}
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn.active .nav-primary-ico,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra.active .nav-extra-ico {
  background: none; box-shadow: none; color: var(--accent-2);
}
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn.active .nav-primary-ico svg,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn.active .nav-primary-ico .icon,
body.desktop-platform:not(.sidebar-style-modern) .bottom-nav .nav-btn-extra.active .nav-extra-ico svg { stroke: var(--accent-2); color: var(--accent-2); }
/* Класичний: рисочка активного пункту на лівому краї панелі */
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .bottom-nav .nav-btn.active::before,
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .bottom-nav .nav-btn-extra.active::before {
  content: ""; display: block; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent-2);
}
/* Сучасний: плитки з тінню лишаються, але підсвітка без рисочки */
body.desktop-platform.sidebar-style-modern .bottom-nav .nav-btn.active::before,
body.desktop-platform.sidebar-style-modern .bottom-nav .nav-btn-extra.active::before { display: none; }

/* =====================================================================
   Анімація вікон: плавне відкриття (будь-яке .modal-overlay) і закриття («привид» .ov-ghost)
   ===================================================================== */
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetInC { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes sheetOutC { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes sheetInB { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes sheetOutB { from { transform: none; opacity: 1; } to { transform: translateY(48px); opacity: 0; } }
.modal-overlay:not(.ov-ghost) { animation: ovIn 0.2s ease backwards; }
.modal-overlay:not(.ov-ghost) > .modal-sheet { animation: sheetInB 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
body.desktop-platform .modal-overlay:not(.ov-ghost) > .modal-sheet { animation-name: sheetInC; }
.modal-overlay.ov-ghost { position: fixed; z-index: 99998; pointer-events: none; animation: none; }
.modal-overlay.ov-ghost.closing { animation: ovOut 0.22s ease forwards; }
.modal-overlay.ov-ghost > .modal-sheet { animation: none; }
.modal-overlay.ov-ghost.closing > .modal-sheet { animation: sheetOutB 0.22s ease forwards; }
body.desktop-platform .modal-overlay.ov-ghost.closing > .modal-sheet { animation-name: sheetOutC; }
@media (prefers-reduced-motion: reduce) {
  .modal-overlay:not(.ov-ghost), .modal-overlay:not(.ov-ghost) > .modal-sheet { animation: none; }
  .modal-overlay.ov-ghost { display: none !important; }
}

/* =====================================================================
   Політика приватності: герой-шапка, чипи, картки-розділи з іконками
   ===================================================================== */
.pv-sheet { max-width: 560px !important; width: min(560px, calc(100% - 24px)); display: flex; flex-direction: column; max-height: min(86vh, 860px); padding-bottom: 0; overflow: hidden; }
.pv-header { align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.pv-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pv-hero-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(150deg, #34d399, #059669); box-shadow: 0 10px 24px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.pv-hero-ico svg { width: 24px; height: 24px; }
.pv-hero-text { min-width: 0; }
.pv-sub { margin-top: 3px; font-size: 12.5px; color: var(--hint); line-height: 1.35; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.28); }
.pv-chip svg { width: 13px; height: 13px; }
.pv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 22px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.pv-card { --pc: #a78bfa; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 7%, transparent), rgba(255, 255, 255, 0.02)); border: 1px solid color-mix(in srgb, var(--pc) 22%, var(--card-border)); }
.pv-data { --pc: #a78bfa; } .pv-why { --pc: #38bdf8; } .pv-time { --pc: #fbbf24; } .pv-del { --pc: #fb7185; }
.pv-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pv-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.pv-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(150deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pv-ico svg { width: 19px; height: 19px; }
.pv-body p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.pv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pv-list li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.pv-tick { width: 20px; height: 20px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.pv-cta { margin-top: 14px; width: 100%; padding: 12px 16px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 10px 24px rgba(225, 29, 72, 0.3); transition: transform 0.12s, filter 0.16s; }
.pv-cta:hover { filter: brightness(1.08); } .pv-cta:active { transform: scale(0.985); }
@media (max-width: 600px) { .pv-sheet { max-height: 92vh; } .pv-hero-ico { width: 42px; height: 42px; } }

/* =====================================================================
   Екран обов'язкової згоди з Політикою приватності (блокує весь застосунок)
   ===================================================================== */
#consent-gate { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: radial-gradient(120% 90% at 20% 0%, rgba(120, 90, 200, 0.22), transparent 60%), radial-gradient(100% 80% at 90% 100%, rgba(52, 211, 153, 0.12), transparent 55%), var(--bg, #0b0a14);
  animation: ovIn 0.25s ease backwards; transition: opacity 0.25s ease; }
#consent-gate.done { opacity: 0; pointer-events: none; }
body.consent-locked { overflow: hidden; }
.cg-card { width: min(600px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 28px; box-sizing: border-box;
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); animation: sheetInC 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.cg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cg-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.cg-card .pv-scroll { padding-bottom: 14px; }
.cg-foot { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.cg-agree { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.4; user-select: none; }
.cg-agree input { position: absolute; opacity: 0; pointer-events: none; }
.cg-box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1.5px solid rgba(255, 255, 255, 0.3); color: transparent; background: rgba(255, 255, 255, 0.04); transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s; }
.cg-agree:active .cg-box { transform: scale(0.92); }
.cg-agree input:checked + .cg-box { color: #fff; border-color: transparent; background: linear-gradient(150deg, #34d399, #059669); box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4); }
.cg-agree input:focus-visible + .cg-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.cg-btn { width: 100%; padding: 14px 16px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 12px 28px var(--accent-glow); transition: transform 0.12s, filter 0.16s, opacity 0.16s; }
.cg-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cg-btn:active:not(:disabled) { transform: scale(0.985); }
.cg-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.cg-btn.loading { opacity: 0.7; cursor: progress; }
@media (max-width: 600px) { .cg-card { padding: 16px 14px 14px; border-radius: 22px; max-height: 96vh; } .cg-title { font-size: 18px; } }

/* =====================================================================
   Мобільна адаптація панелі (телефони ≤ 600px): тех-розділ, картки, форми, таблиці
   ===================================================================== */
@media (max-width: 600px) {
  body:not(.desktop-platform) .bottom-nav { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tab-screen { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
  /* Вкладки (тех-розділ, канал, реклама): горизонтальна смуга зі скролом і зручними зонами натискання */
  #tab-dev .modal-tab-bar, #channel-modal .modal-tab-bar, #tab-ads .modal-tab-bar {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  #tab-dev .modal-tab-bar::-webkit-scrollbar, #channel-modal .modal-tab-bar::-webkit-scrollbar, #tab-ads .modal-tab-bar::-webkit-scrollbar { display: none; }
  #tab-dev .modal-tab-btn, #channel-modal .modal-tab-btn, #tab-ads .modal-tab-btn { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; padding: 9px 14px; min-height: 40px; }
  #dev-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  /* Контент не вилазить за екран */
  .card-list > *, .settings-card, .settings-card-body, .list-row, .submission-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .settings-card { padding-left: 14px; padding-right: 14px; }
  .settings-card-title, .settings-card-desc, .submission-title, .submission-meta { overflow-wrap: anywhere; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  img, video, canvas { max-width: 100%; }
  /* Форми: 16px — iOS не наближає екран при фокусі */
  input, textarea, select { font-size: 16px; max-width: 100%; box-sizing: border-box; }
  /* Ряди кнопок переносяться, дії картки — на всю ширину */
  .pill-row, .chip-actions-row, .card-actions { flex-wrap: wrap; }
  .card-actions > * { flex: 1 1 140px; justify-content: center; }
  .modal-sheet { max-width: 100% !important; box-sizing: border-box; }
  .modal-header { gap: 10px; }
  .modal-header > span, .support-head-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Сповіщення: цілий рядок — зона натискання, тумблер не стискається */
  .notify-row { padding: 14px; min-height: 64px; }
  .ios-switch { flex: none; }
  .notify-head-actions { flex-wrap: nowrap; }
  .notify-all-btn { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}
/* Тачскріни: прибираємо hover-стрибки й затримку подвійного тапу */
@media (hover: none) {
  button, .pill, .notify-row, [role="button"], [role="switch"], label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* =====================================================================
   Баги на телефоні (скріншоти iPhone / Telegram): джерела, вікно адміна, швидкі дії редактора, смуга під кнопками Telegram
   ===================================================================== */
/* Джерела: довгі назви розпирали сітку й картки виїжджали за правий край */
.sources-tile-grid { grid-template-columns: minmax(0, 1fr); }
.source-tile { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.source-tile-name, .source-tile-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Вікно адміна: тарифи в один ряд (3), дії у дві колонки, без «дірок» */
#dev-user-channels-modal [data-role="plan-picker"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#dev-user-channels-modal [data-role="plan-picker"] .ub-btn { justify-content: center; padding: 10px 6px; font-size: 13px; gap: 6px; min-width: 0; }
#dev-user-channels-modal [data-role="actions"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
#dev-user-channels-modal [data-role="actions"] .ub-btn { justify-content: center; text-align: center; line-height: 1.2; min-width: 0; padding: 10px 8px; }

@media (max-width: 600px) {
  /* Швидкі дії редактора: ШІ-рерайт на всю ширину, «Заголовок» і «Перегляд» поруч (раніше стискались у кола з обрізаним текстом) */
  #editor-modal .editor-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #editor-modal .editor-quick-actions > div:first-child { grid-column: 1 / -1; }
  #editor-modal .editor-quick-actions .pill { flex: none; width: 100%; min-height: 44px; justify-content: center; border-radius: 14px; }
  #dev-user-channels-modal [data-role="plan-picker"] .ub-btn svg { display: none; }
}

/* Контент, що прокручується під нативними кнопками Telegram («Закрити», «…»), більше не просвічує:
   суцільна смуга висотою safe-area + content-safe-area (змінні виставляє сам Telegram у повноекранному режимі) */
body:not(.desktop-platform)::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  height: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  background: var(--bg, #0b0a14);
}

/* Джерела на телефоні: знову ДВА в ряд (як було), картка вертикальна: аватар+назва, статус, кнопка знизу */
@media (max-width: 600px) {
  .sources-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .source-tile { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: 12px; border-radius: 18px; }
  .source-tile-head { flex: none; gap: 10px; align-items: center; }
  .source-tile-head .channel-avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 13px; }
  .source-tile-body { min-width: 0; flex: 1; }
  .source-tile-name { font-size: 13.5px; min-width: 0; }
  .source-tile-name > span:first-child, .source-tile-name .src-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .source-tile-action { width: 100%; }
  .source-tile-action .pill { width: 100%; min-width: 0; }
}

/* Панель черги на телефоні: вкладки на всю ширину, нижче — один широкий ряд «Зберігання … 1 год» + журнал (без порожнього місця) */
.queue-tools .qt-cap { display: none; }
@media (max-width: 600px) {
  .queue-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .queue-sort { width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
  .queue-sort::-webkit-scrollbar { display: none; }
  .queue-sort-tab { flex: 1 0 auto; justify-content: center; padding: 10px 12px; font-size: 14px; }
  .queue-tools { width: 100%; margin: 0; display: flex; gap: 8px; }
  .queue-tools .queue-ttl-chip { flex: 1; min-width: 0; height: 46px; justify-content: flex-start; padding: 0 14px; gap: 10px; font-size: 14px; }
  .queue-tools .queue-ttl-chip .qt-cap { display: block; flex: 1; min-width: 0; text-align: left; font-size: 13px; font-weight: 600; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .queue-tools .queue-ttl-chip #queue-ttl-label { color: var(--text); font-weight: 800; }
  .queue-tools .queue-log-btn { flex: none; width: 46px; height: 46px; border-radius: 14px; }
}

/* Телефон: вкладка «Контент» без перевантаження — компактніші блоки, вкладки й інструменти в ОДНОМУ ряду */
@media (max-width: 600px) {
  #content-segmented { padding: 3px; border-radius: 14px; }
  #content-segmented .segment { padding: 9px 6px; font-size: 13px; gap: 5px; border-radius: 11px; box-shadow: none; }
  #content-segmented .segment svg { width: 15px; height: 15px; }
  #content-panel-queue { margin-top: 10px !important; }
  .queue-actions { gap: 8px; margin-bottom: 10px; }
  .queue-compose-btn { height: 46px; border-radius: 14px; box-shadow: none; }
  .queue-compose-text { font-size: 15px; }
  .queue-clear-btn { width: 46px; height: 46px; flex: none; }
  /* один ряд: вкладки зліва (скрол), компактні інструменти справа */
  .queue-bar { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
  .queue-sort { flex: 1 1 auto; width: auto; min-width: 0; padding: 3px; border-radius: 12px; gap: 2px; }
  .queue-sort-tab { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; border-radius: 9px; }
  .queue-sort-tab .icon { display: none; }
  .queue-tools { flex: none; width: auto; gap: 6px; }
  .queue-tools .queue-ttl-chip { flex: none; height: 36px; padding: 0 10px; gap: 6px; font-size: 12.5px; border-radius: 11px; }
  .queue-tools .queue-ttl-chip .qt-cap, .queue-tools .queue-ttl-chip .qt-chev { display: none; }
  .queue-tools .queue-ttl-chip #queue-ttl-label { color: var(--text); font-weight: 800; }
  .queue-tools .queue-log-btn { width: 36px; height: 36px; border-radius: 11px; }
  .queue-tools .queue-log-btn .icon { width: 16px; height: 16px; }
}

/* =====================================================================
   Щільність панелі масштабує і РАМКИ (картки, відступи, радіуси), а не лише текст з іконками:
   контент вкладок масштабується разом, а множники шрифту/іконок усередині скидаються, щоб не множилось двічі.
   Бічна панель далі керується власними змінними (зона .bottom-nav поза .tab-screen).
   ===================================================================== */
body.desktop-platform { --ui-content-zoom: 1; }
body.desktop-platform.ui-density-compact { --ui-content-zoom: 0.93; }
body.desktop-platform.ui-density-spacious { --ui-content-zoom: 1.25; }
body.desktop-platform .tab-screen {
  zoom: var(--ui-content-zoom, 1);
  --ui-font-scale: 1; --ui-icon-scale: 1; --ui-card-padding: 16px; --ui-card-gap: 10px;
  --ui-row-padding-v: 13px; --ui-row-padding-v-lg: 16px; --ui-row-padding-v-xl: 20px;
}

/* «Додати за посиланням» — просто плюсик, приглушений (текст лишається лише в підказці) */
#add-public-tg-btn.src-add-btn {
  width: 44px; min-width: 44px; padding: 0; justify-content: center; gap: 0; flex: none;
  color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
#add-public-tg-btn.src-add-btn span { display: none; }
#add-public-tg-btn.src-add-btn .icon { width: 20px; height: 20px; stroke-width: 2; }
#add-public-tg-btn.src-add-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
#add-public-tg-btn.src-add-btn:active { transform: scale(0.94); }

/* Галочки «офіційне джерело» — кольору теми (SVG currentColor), а не фіксоване фіолетове зображення */
.rec-source-verified { display: inline-flex; width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-2); filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--accent) 45%, transparent)); }
.rec-source-verified svg { display: block; }

/* =====================================================================
   Сайдбар: однакові відступи між усіма пунктами + плитка лише трохи більша за іконку
   (основні пункти мали height:52px від мобільного таб-бару, «Сервіс» — ні, тому ритм відрізнявся)
   ===================================================================== */
body.desktop-platform .bottom-nav .nav-btn, body.desktop-platform .bottom-nav .nav-btn-extra {
  height: auto; min-height: 46px; padding-top: 5px; padding-bottom: 5px; margin: 0; font-size: calc(13.5px * var(--ui-font-scale, 1));
}
body.desktop-platform .bottom-nav .nav-primary-ico, body.desktop-platform .bottom-nav .nav-extra-ico { width: 34px; height: 34px; min-height: 0; }
body.desktop-platform .bottom-nav .nav-primary-ico .icon, body.desktop-platform .bottom-nav .nav-primary-ico svg,
body.desktop-platform .bottom-nav .nav-extra-ico svg { width: 22px; height: 22px; }
/* рівні стиснення (sb-c*) — плитка ≈ іконка + 10px */
body.desktop-platform.sb-c1 .nav-primary-ico, body.desktop-platform.sb-c1 .nav-extra-ico { width: 32px !important; height: 32px !important; }
body.desktop-platform.sb-c2 .nav-primary-ico, body.desktop-platform.sb-c2 .nav-extra-ico { width: 29px !important; height: 29px !important; }
body.desktop-platform.sb-c2 .nav-primary-ico svg, body.desktop-platform.sb-c2 .nav-extra-ico svg { width: 20px; height: 20px; }
body.desktop-platform.sb-c3 .nav-primary-ico, body.desktop-platform.sb-c3 .nav-extra-ico { width: 27px !important; height: 27px !important; }
body.desktop-platform.sb-c3 .nav-primary-ico svg, body.desktop-platform.sb-c3 .nav-extra-ico svg { width: 18px; height: 18px; }
body.desktop-platform.sb-c1 .bottom-nav .nav-btn, body.desktop-platform.sb-c1 .bottom-nav .nav-btn-extra { min-height: 40px; }
body.desktop-platform.sb-c2 .bottom-nav .nav-btn, body.desktop-platform.sb-c2 .bottom-nav .nav-btn-extra { min-height: 36px; }
body.desktop-platform.sb-c3 .bottom-nav .nav-btn, body.desktop-platform.sb-c3 .bottom-nav .nav-btn-extra { min-height: 32px; }

/* Плитки-іконки по застосунку: символ займає ~60% плитки (раніше ~50% — плитка здавалась завеликою) */
.home-dash-icon svg { width: calc(21px * var(--ui-icon-scale, 1)); height: calc(21px * var(--ui-icon-scale, 1)); }
.settings-card-icon svg { width: calc(20px * var(--ui-icon-scale, 1)); height: calc(20px * var(--ui-icon-scale, 1)); }
#tab-dev .settings-card-icon svg { width: calc(23px * var(--ui-icon-scale, 1)); height: calc(23px * var(--ui-icon-scale, 1)); }
.set-ico svg { width: calc(20px * var(--ui-icon-scale, 1)); height: calc(20px * var(--ui-icon-scale, 1)); }

/* Сайдбар: роздільник між «Навігацією» та «Сервісом» — тонка лінія без великого проміжку;
   натомість гарантований відступ між пунктами меню й плеєром Spotify / профілем */
body.desktop-platform .bottom-nav .sidebar-section-label { display: block; height: 0; min-height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
body.desktop-platform .bottom-nav .sidebar-section-label:not(:first-of-type) { height: 1px; margin: 6px 16px 6px; background: var(--card-border); }
body.desktop-platform .sidebar-service-grid { margin-bottom: 18px; }
body.desktop-platform .bottom-nav > .sidebar-spotify:not([hidden]) { margin-top: auto; }
body.desktop-platform.sb-c1 .sidebar-service-grid { margin-bottom: 12px; }
body.desktop-platform.sb-c2 .sidebar-service-grid { margin-bottom: 8px; }
body.desktop-platform.sb-c3 .sidebar-service-grid { margin-bottom: 4px; }

/* Синя тема: сайдбар і картки з холодним скляним відблиском, неактивні пункти читабельніші */
[data-theme="brown"] .bottom-nav { background: linear-gradient(180deg, rgba(26, 40, 74, 0.92) 0%, rgba(11, 18, 36, 0.96) 100%); }
[data-theme="brown"] .bottom-nav .nav-btn:not(.active), [data-theme="brown"] .bottom-nav .nav-btn-extra:not(.active) { color: #9db0d0; }
[data-theme="brown"] .settings-card, [data-theme="brown"] .list-row, [data-theme="brown"] .source-tile, [data-theme="brown"] .submission-card {
  background-image: linear-gradient(160deg, rgba(120, 160, 255, 0.05), transparent 55%);
}
[data-theme="brown"] .primary-btn, [data-theme="brown"] .queue-compose-btn { background: linear-gradient(135deg, #5b94ff, #2f5fe0); }


/* =====================================================================
   Командна палітра (Ctrl+K)
   ===================================================================== */
#cmdk { position: fixed; inset: 0; z-index: 99990; display: flex; justify-content: center; align-items: flex-start; padding: 13vh 16px 16px; box-sizing: border-box;
  background: rgba(6, 5, 12, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ovIn 0.16s ease backwards; transition: opacity 0.14s ease; }
#cmdk.closing { opacity: 0; pointer-events: none; }
.pal-card { width: min(640px, 100%); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; box-sizing: border-box;
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); animation: sheetInC 0.22s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
#cmdk.closing .pal-card { transform: translateY(-6px) scale(0.985); transition: transform 0.14s ease; }
.pal-search { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--card-border); }
.pal-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted, #8b87a3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; font-weight: 600; }
.pal-input::placeholder { color: var(--muted, #8b87a3); font-weight: 500; }
.pal-search kbd, .pal-foot { font-size: 11px; color: var(--muted, #8b87a3); }
.pal-search kbd { padding: 3px 7px; border-radius: 7px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); font-family: inherit; font-weight: 700; }
.pal-list { max-height: min(52vh, 440px); overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.pal-group { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #8b87a3); }
.pal-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.pal-item.sel { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.pal-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.pal-item.sel .pal-ico { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.pal-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted, #8b87a3); }
.pal-foot { padding: 9px 16px; border-top: 1px solid var(--card-border); }
@media (prefers-reduced-motion: reduce) { #cmdk, .pal-card { animation: none; } }


/* =====================================================================
   Біометричний вхід: екран-замок і перемикач
   ===================================================================== */
#bio-lock { position: fixed; inset: 0; z-index: 100010; display: grid; place-items: center; padding: 20px; box-sizing: border-box;
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), var(--bg, #0b0a14);
  animation: ovIn 0.2s ease backwards; transition: opacity 0.25s ease; }
#bio-lock.done { opacity: 0; pointer-events: none; }
.bio-card { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 24px 22px; border-radius: 28px; box-sizing: border-box; text-align: center;
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); animation: sheetInC 0.32s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.bio-ico { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px; color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 14px 34px var(--accent-glow); margin-bottom: 6px; }
.bio-ico svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bio-ico.pulse { animation: bioPulse 1.3s ease-in-out infinite; }
@keyframes bioPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.bio-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.bio-hint { font-size: 13.5px; line-height: 1.45; color: var(--muted, #8b87a3); margin-bottom: 8px; }
.bio-hint.err { color: #f87171; }
.bio-close { border: 0; background: transparent; color: var(--muted, #8b87a3); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; border-radius: 10px; }
.bio-close:hover { color: inherit; background: rgba(255, 255, 255, 0.05); }
.bio-logo { display: grid; place-items: center; color: var(--accent); }
.bio-logo svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .bio-ico.pulse { animation: none; } }


/* =====================================================================
   Черга: мультивибір, плашка Undo, кнопка пошуку в сайдбарі
   ===================================================================== */
.qsel-box { position: absolute; top: 12px; left: -11px; z-index: 3; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.35); background: var(--card, #14111f); color: transparent; opacity: 0; transform: scale(0.8); transition: opacity 0.14s, transform 0.14s, background 0.14s, border-color 0.14s; }
.qsel-box svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .swipe-wrap:hover .qsel-box { opacity: 1; transform: none; } }
#queue-list.qsel-active .qsel-box { opacity: 1; transform: none; }
.swipe-wrap.qsel-on .qsel-box { color: #fff; border-color: transparent; background: linear-gradient(150deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 4px 12px var(--accent-glow); opacity: 1; transform: none; }
.swipe-wrap.qsel-on .queue-card { box-shadow: 0 0 0 2px var(--accent), 0 10px 26px var(--accent-glow); }
#q-bulk, #q-undo { position: fixed; left: 50%; bottom: 24px; z-index: 9000; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 18px; box-sizing: border-box; max-width: calc(100vw - 24px);
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.2s ease; }
#q-bulk.show, #q-undo.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.q-bulk-on #q-undo { bottom: 84px; }
.qb-count { font-size: 13px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.qb-btn, .qu-btn { border: 0; border-radius: 12px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: inherit; background: rgba(255, 255, 255, 0.07); transition: filter 0.14s, transform 0.12s; white-space: nowrap; }
.qb-btn:hover, .qu-btn:hover { filter: brightness(1.18); }
.qb-btn:active, .qu-btn:active { transform: scale(0.96); }
.qb-btn.ok { background: linear-gradient(135deg, #34d399, #059669); color: #fff; }
.qb-btn.bad { background: linear-gradient(135deg, #f87171, #dc2626); color: #fff; }
.qb-btn.ghost { padding: 8px; display: grid; place-items: center; background: transparent; }
.qb-btn.ghost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#q-undo { overflow: hidden; padding-bottom: 11px; }
.qu-msg { font-size: 13.5px; font-weight: 600; margin-right: 4px; }
.qu-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.qu-btn kbd { font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--card-border); color: var(--muted, #8b87a3); }
.qu-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; animation: quShrink linear forwards; }
@keyframes quShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) { .qu-btn kbd { display: none; } #q-bulk, #q-undo { bottom: 84px; } body.q-bulk-on #q-undo { bottom: 140px; } .qb-count { display: none; } }

.sidebar-search-btn { display: none; }
body.desktop-platform .sidebar-search-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 4px); margin: 4px 2px 8px; padding: 9px 12px; border-radius: 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted, #8b87a3);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.16s, color 0.16s, border-color 0.16s; }
body.desktop-platform .sidebar-search-btn:hover { color: inherit; background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sidebar-search-btn svg { width: 17px; height: 17px; flex: none; }
.sidebar-search-btn .sbs-text { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-search-btn .sbs-kbd { font-family: inherit; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--card-border); }
body.sidebar-collapsed.desktop-platform .sidebar-search-btn { justify-content: center; width: 48px; margin: 4px auto 8px; padding: 12px 0; }
body.sidebar-collapsed .sidebar-search-btn .sbs-text, body.sidebar-collapsed .sidebar-search-btn .sbs-kbd { display: none; }
@media (prefers-reduced-motion: reduce) { #q-bulk, #q-undo, .qsel-box { transition: none; } .qu-bar { animation: none; } }


/* Підказка хоткеїв: довгий список прокручується, а не вилазить за екран */
.hotkey-sheet { max-height: min(86vh, 760px); overflow-y: auto; }
.hotkey-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border); font-size: 11.5px; color: var(--muted, #8b87a3); }


/* PIN-код: клавіатура, крапки, діалог */
#pin-dlg { position: fixed; inset: 0; z-index: 100020; display: grid; place-items: center; padding: 20px; box-sizing: border-box; background: rgba(6, 5, 12, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: ovIn 0.18s ease backwards; transition: opacity 0.2s ease; }
#pin-dlg.done { opacity: 0; pointer-events: none; }
.pin-host { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 4px 0 6px; }
.pin-dots { display: flex; gap: 14px; height: 16px; align-items: center; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.pin-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }
.pin-dots.shake { animation: pinShake 0.36s ease; }
@keyframes pinShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.pin-grid { display: grid; grid-template-columns: repeat(3, 68px); gap: 12px; justify-content: center; }
.pin-key { height: 56px; border: 0; border-radius: 18px; font: inherit; font-size: 22px; font-weight: 700; color: inherit; cursor: pointer; background: rgba(255, 255, 255, 0.07); transition: background 0.12s, transform 0.1s; }
.pin-key:hover { background: rgba(255, 255, 255, 0.12); }
.pin-key:active { transform: scale(0.94); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.pin-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-del { display: grid; place-items: center; background: transparent; }
.pin-del svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .pin-dots.shake { animation: none; } }


/* =====================================================================
   Діалог підтвердження — власний стиль (замінює iOS-алерт): плитка-іконка зліва,
   текст по лівому краю, кнопки різної ширини, поява знизу з пружиною
   ===================================================================== */
.modal-overlay:has(> .ios-alert) { align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: rgba(5, 4, 10, 0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal-overlay:has(> .ios-alert.is-danger) { background: radial-gradient(55% 45% at 50% 58%, rgba(220, 38, 38, 0.18), transparent 70%), rgba(5, 4, 10, 0.68); }
.modal-sheet.ios-alert { width: min(380px, 100%); max-width: 380px; padding: 22px 22px 20px; margin: 0; overflow: visible; box-sizing: border-box; text-align: left;
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start;
  border-radius: 24px; border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 46%), var(--card, #14111f);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: dlgIn 0.34s cubic-bezier(0.22, 1.1, 0.36, 1) both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(22px) scale(0.965); } to { opacity: 1; transform: none; } }
.ios-alert .confirm-dialog-icon { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; display: grid; place-items: center; border-radius: 16px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.ios-alert .confirm-dialog-icon svg { width: 24px; height: 24px; }
.ios-alert.is-danger .confirm-dialog-icon { color: #fb7185; background: rgba(244, 63, 94, 0.14); border-color: rgba(251, 113, 133, 0.4); box-shadow: 0 8px 24px rgba(244, 63, 94, 0.28); }
.ios-alert .confirm-dialog-title { grid-column: 2; padding: 2px 0 0; margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.ios-alert .confirm-dialog-message { grid-column: 2; padding: 0; margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted, rgba(255, 255, 255, 0.72)); }
.ios-alert .confirm-dialog-title + .confirm-dialog-message { margin-top: 6px; }
.ios-alert .confirm-dialog-title:first-child + .confirm-dialog-message,
.ios-alert .confirm-dialog-message:first-child { padding-top: 0; }
.ios-alert .confirm-dialog-icon + .confirm-dialog-message { align-self: center; color: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ios-alert .confirm-dialog-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 20px; padding: 0; border-top: 0; }
.ios-alert .confirm-dialog-actions .pill { flex: 1 1 62%; min-height: 46px; padding: 0 14px; margin: 0; border: 0; border-radius: 14px; box-shadow: none; justify-content: center;
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); transition: transform 0.12s, filter 0.16s, opacity 0.16s; }
.ios-alert .confirm-dialog-actions .pill:first-child { flex: 1 1 38%; color: inherit; font-weight: 700; background: rgba(255, 255, 255, 0.07); }
.ios-alert .confirm-dialog-actions .pill + .pill { border-left: 0; font-weight: 800; }
.ios-alert .confirm-dialog-actions .pill.danger { color: #fff; background: linear-gradient(135deg, #fb7185, #dc2626); box-shadow: 0 10px 24px rgba(220, 38, 38, 0.38); }
.ios-alert .confirm-dialog-actions .pill:hover:not(:disabled) { filter: brightness(1.1); }
.ios-alert .confirm-dialog-actions .pill:active:not(:disabled) { transform: scale(0.97); background-color: transparent; }
.ios-alert .confirm-dialog-actions .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ios-alert .confirm-dialog-actions .pill:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
/* Діалог підтвердження: той самий стиль, трохи більше життя (2026-10-04) */
.modal-sheet.ios-alert { position: relative; }
.modal-sheet.ios-alert::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, #fff 10%), transparent); opacity: .7; }
.modal-sheet.ios-alert.is-danger::before { background: linear-gradient(90deg, transparent, #fb7185, transparent); }
.modal-sheet.ios-alert.is-danger { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px -18px rgba(244, 63, 94, .45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.ios-alert .confirm-dialog-icon { position: relative; }
.ios-alert .confirm-dialog-icon svg { animation: dlgIco .55s cubic-bezier(.3,1.5,.5,1) .12s both; }
.ios-alert.is-danger .confirm-dialog-icon::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; border: 1px solid rgba(251, 113, 133, .6);
  pointer-events: none; animation: dlgPulse 1.9s ease-out .35s infinite; }
@keyframes dlgIco { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 60% { transform: scale(1.12) rotate(5deg); } 100% { opacity: 1; transform: none; } }
@keyframes dlgPulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes dlgOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }
.modal-overlay.is-closing { opacity: 0; transition: opacity .17s ease; pointer-events: none; }
.modal-overlay.is-closing > .ios-alert { animation: dlgOut .17s ease both; }
.ios-alert .confirm-dialog-actions .pill.danger { position: relative; overflow: hidden; }
.ios-alert .confirm-dialog-actions .pill.danger::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: dlgShine 3.2s ease-in-out 1s infinite; }
@keyframes dlgShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
/* Іконка: корзина з кришкою, що підстрибує; для інших небезпечних дій — трикутник зі «стрибаючим» знаком */
/* Текст по центру відносно іконки: підпис притиснутий до середини знизу, вопрос — зверху від середини */
.modal-sheet.ios-alert.is-danger .confirm-dialog-icon { grid-row: 1 / span 2; align-self: center; }
.modal-sheet.ios-alert.is-danger .confirm-dialog-eyebrow { grid-row: 1; align-self: end; }
.modal-sheet.ios-alert.is-danger .confirm-dialog-message { grid-row: 2; align-self: start; }
.modal-sheet.ios-alert.is-danger .confirm-dialog-actions { grid-row: 3; }
.ios-alert .confirm-dialog-icon { grid-row: 1 / span 2; width: 54px; height: 54px; border-radius: 18px; }
.ios-alert .confirm-dialog-icon svg { width: 27px; height: 27px; overflow: visible; }
.ios-alert.is-danger .confirm-dialog-icon { background: radial-gradient(circle at 30% 20%, rgba(251, 113, 133, .34), rgba(244, 63, 94, .1) 70%); }
.ios-alert.is-danger .confirm-dialog-icon::after { border-radius: 18px; }
.dlg-lid { transform-box: fill-box; transform-origin: 85% 100%; animation: dlgLid 3.4s cubic-bezier(.3,1.4,.5,1) .7s infinite; }
@keyframes dlgLid { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-2.4px) rotate(-22deg); } 80% { transform: translateY(-1.6px) rotate(-12deg); } 90% { transform: translateY(-.4px) rotate(-3deg); } }
.dlg-warn-bar, .dlg-warn-dot { animation: dlgBang 2.6s ease-in-out .8s infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes dlgBang { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-1.5px) scaleY(1.12); } 86% { transform: translateY(.6px); } }

/* Підпис «Увага» над текстом + текст, що проявляється по словах */
.confirm-dialog-eyebrow { grid-column: 2; align-self: end; display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fb7185; }
.confirm-dialog-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 0 0 rgba(251, 113, 133, .6); animation: dlgDot 1.6s ease-out infinite; }
@keyframes dlgDot { 0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, .55); } 100% { box-shadow: 0 0 0 7px rgba(251, 113, 133, 0); } }
.modal-sheet.ios-alert.is-danger .confirm-dialog-message { grid-column: 2; align-self: start; font-size: 19px; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; color: #fff; text-wrap: balance;
  background: none; -webkit-text-fill-color: #fff; text-shadow: 0 0 22px rgba(251, 113, 133, .25); }
.dlg-w { display: inline-block; opacity: 0; animation: dlgWord .42s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(.16s + var(--i, 0) * 55ms); }
@keyframes dlgWord { from { opacity: 0; transform: translateY(7px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .dlg-lid, .dlg-warn-bar, .dlg-warn-dot, .confirm-dialog-eyebrow i { animation: none; }
  .dlg-w { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ios-alert .confirm-dialog-icon svg, .ios-alert.is-danger .confirm-dialog-icon::after, .ios-alert .confirm-dialog-actions .pill.danger::after { animation: none; }
}
@media (max-width: 360px) { .modal-sheet.ios-alert { grid-template-columns: 1fr; } .ios-alert .confirm-dialog-icon { grid-row: auto; margin-bottom: 12px; } .ios-alert .confirm-dialog-title, .ios-alert .confirm-dialog-message { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-sheet.ios-alert { animation: none; } }


/* =====================================================================
   Екран завантаження: потік новин (джерела -> хаб з логотипом -> канали)
   ===================================================================== */
#splash-screen { background: radial-gradient(90% 72% at 50% 44%, #15112c 0%, #0a0c18 56%, #05060d 100%); }
.splash-grid { opacity: 0.2; }
#splash-screen .blob-1 { opacity: 0.3; }
#splash-screen .blob-2 { opacity: 0.26; }
#splash-screen .blob-3 { opacity: 0.22; }
.splash-overlay { background: radial-gradient(72% 58% at 50% 45%, transparent 0%, rgba(3, 4, 10, 0.62) 100%); }
.splash-flow { position: absolute; left: 50%; top: 45%; width: min(130vmin, 920px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.splash-flow svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sf-node { transform-box: fill-box; transform-origin: center; animation: sfNode 3.2s ease-in-out infinite; }
@keyframes sfNode { 0%, 100% { opacity: 0.72; transform: scale(1); } 8% { opacity: 1; transform: scale(1.06); } 22% { opacity: 0.85; transform: scale(1); } }
.splash-logo { filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.6)); }
.splash-progress-track { width: 220px; }
@media (prefers-reduced-motion: reduce) { .sf-node { animation: none; opacity: 0.85; } .splash-flow animateMotion { display: none; } }


/* =====================================================================
   Тех-розділ → Розбір логів
   ===================================================================== */
.lp-hint { margin: 2px 0 14px; font-size: 13px; line-height: 1.5; color: var(--hint, var(--muted)); max-width: 62ch; }
.lp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border-radius: 22px; cursor: pointer; text-align: center;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); transition: background 0.16s, border-color 0.16s, transform 0.12s; }
.lp-drop[hidden] { display: none; }
.lp-drop:hover, .lp-drop.over { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.lp-drop.over { transform: scale(1.01); }
.lp-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp-drop.error { border-color: #f87171; background: rgba(248, 113, 113, 0.08); }
.lp-drop.error .lp-drop-title { color: #f87171; }
.lp-drop-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; margin-bottom: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lp-drop-ico svg { width: 26px; height: 26px; }
.lp-drop-title { font-size: 15px; font-weight: 700; }
.lp-drop-sub { font-size: 12.5px; color: var(--hint, var(--muted)); overflow-wrap: anywhere; }
.lp-summary { padding: 14px 16px; border-radius: 18px; margin-bottom: 12px; border: 1px solid var(--card-border); background: var(--card, rgba(255, 255, 255, 0.04)); }
.lp-sum-main { font-size: 15px; } .lp-sum-main b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-right: 4px; }
.lp-sum-meta { font-size: 12.5px; color: var(--hint, var(--muted)); margin-top: 3px; overflow-wrap: anywhere; }
.lp-filters { flex-wrap: wrap; }
.lp-count { margin-left: 4px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.lp-search { width: 100%; box-sizing: border-box; margin: 4px 0 6px; padding: 11px 14px; border-radius: 14px; font: inherit; font-size: 14px; color: inherit; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); outline: none; }
.lp-search:focus { border-color: var(--accent); }
.lp-list { display: flex; flex-direction: column; }
.lp-list .news-log-row { padding: 14px 4px; }
.lp-list .news-log-title { font-size: 15px; }
.lp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.lp-shown { flex: 1 1 100%; font-size: 12px; color: var(--hint, var(--muted)); }
.lp-foot .pill[hidden] { display: none; }
.news-log-badge.ev-unknown { color: #94a3b8; background: color-mix(in srgb, #94a3b8 16%, transparent); }


/* Екран завантаження: плавніше зникає (узгоджено з таймером у runSplashSequence) */
#splash-screen { transition: opacity 0.6s ease; }


/* =====================================================================
   Тех-розділ: повний лог користувача
   ===================================================================== */
.user-log-sheet { width: min(720px, 100%); max-width: 720px; display: flex; flex-direction: column; max-height: calc(88 * var(--vh1, 1vh)); overflow: hidden; }
.ul-user { font-size: 15px; margin: 2px 0 10px; overflow-wrap: anywhere; }
.ul-tabs { flex-wrap: wrap; }
.ul-hint { font-size: 12px; color: var(--hint, var(--muted)); margin: 2px 0 8px; line-height: 1.4; }
.ul-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.ul-ticket { margin-bottom: 16px; }
.ul-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, 0.05); }
.ul-action { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.ticket-detail-head.is-link { cursor: pointer; border-radius: 14px; transition: background 0.14s; }
.ticket-detail-head.is-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ticket-detail-head.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* Корзина «Очистити чергу» ховається, поки черга порожня */
.queue-clear-btn[hidden] { display: none; }


/* =====================================================================
   Порожня Черга: пояснення «Як це працює»
   ===================================================================== */
.qe2-how { width: min(580px, 100%); margin: 22px auto 6px; text-align: left; }
.qe2-how-title { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hint, var(--muted)); margin: 0 0 14px 2px; }
.qe2-steps { list-style: none; margin: 0; padding: 0; }
.qe2-step { position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; padding-bottom: 18px; }
.qe2-step:last-child { padding-bottom: 2px; }
.qe2-step:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
.qe2-step-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.qe2-step-body b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; margin-top: 1px; }
.qe2-step-body p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--hint, var(--muted)); }
.qe2-why { margin-top: 16px; border: 1px solid var(--card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.qe2-why summary { cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qe2-why summary::-webkit-details-marker { display: none; }
.qe2-why summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--hint, var(--muted)); border-bottom: 2px solid var(--hint, var(--muted)); transform: rotate(45deg); transition: transform 0.18s; margin-right: 2px; }
.qe2-why[open] summary::after { transform: rotate(-135deg); }
.qe2-why summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.qe2-why ul { margin: 0; padding: 0 16px 14px 32px; font-size: 13px; line-height: 1.5; color: var(--hint, var(--muted)); }
.qe2-why li + li { margin-top: 6px; }
@media (max-width: 600px) { .qe2-how { margin-top: 16px; } .qe2-step { grid-template-columns: 34px 1fr; column-gap: 12px; } .qe2-step-ico { width: 34px; height: 34px; border-radius: 11px; } .qe2-step:not(:last-child)::before { left: 16px; top: 36px; } }


/* Тех-розділ → Підтримка (ПК): консоль займає рівно залишок вікна, сторінка не скролиться —
   прокручуються лише список звернень і переписка, поле відповіді закріплене знизу */
@media (min-width: 900px) {
  body.desktop-platform.dev-support-fit .dev-support-panel { height: var(--ds-h, calc(66 * var(--vh1))); grid-template-rows: minmax(0, 1fr); }
  body.desktop-platform.dev-support-fit .dev-support-list-pane,
  body.desktop-platform.dev-support-fit .dev-support-detail-pane { height: 100%; min-height: 0; max-height: none; }
  body.desktop-platform.dev-support-fit .dev-support-detail-pane { overflow: hidden; }
  body.desktop-platform.dev-support-fit .dev-support-detail-inner > *:not(#dev-support-thread) { flex-shrink: 0; }
  body.desktop-platform.dev-support-fit #dev-support-faq-picker { max-height: 30%; overflow-y: auto; }
}


/* Консоль поддержки на ПК вмещается точно в окно: сам контейнер не прокручивается */
@media (min-width: 900px) {
  body.desktop-platform.dev-support-fit .content { overflow-y: hidden; }
}


/* =====================================================================
   Шапка: кнопка «Сайт бота»
   ===================================================================== */
.topbar-site-icon { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: background 0.16s, border-color 0.16s, transform 0.12s; }
.topbar-site-icon svg { width: 24px; height: 24px; }
#topbar-site-btn:hover .topbar-site-icon { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: var(--accent); }
#topbar-site-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

/* =====================================================================
   Тех-розділ (ПК): навігація — вертикальна рейка з групами замість двох рядів вкладок.
   Рейка вузька й липка зліва, вміст займає решту; панелі стають вищими (нема 2 рядів вкладок над ними).
   ===================================================================== */
.dev-tab-group { display: none; }
@media (min-width: 900px) {
  body.desktop-platform #tab-dev.active { display: grid; grid-template-columns: 208px minmax(0, 1fr); column-gap: 22px; align-items: start; }
  body.desktop-platform #tab-dev > :first-child { grid-column: 1 / -1; }
  body.desktop-platform #tab-dev > .modal-tab-bar { grid-column: 1; grid-row: 2 / span 40; position: sticky; top: 0; align-self: start; }
  body.desktop-platform #tab-dev > .modal-tab-panel { grid-column: 2; grid-row: 2; min-width: 0; }
  body.desktop-platform #tab-dev > :not(.modal-tab-bar):not(.modal-tab-panel):not(:first-child) { grid-column: 1 / -1; }
  body.desktop-platform #tab-dev .modal-tab-bar { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 10px; border-radius: 22px; }
  body.desktop-platform #tab-dev .dev-tab-group { display: block; padding: 14px 12px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hint, var(--muted)); }
  body.desktop-platform #tab-dev .modal-tab-bar > .dev-tab-group:first-child { padding-top: 4px; }
  body.desktop-platform #tab-dev .modal-tab-btn { justify-content: flex-start; width: 100%; padding: 10px 14px; border-radius: 13px; font-size: 13.5px; gap: 11px; }
  body.desktop-platform #tab-dev .modal-tab-btn svg { width: 17px; height: 17px; flex: none; }
}


/* Тех-розділ (ПК): ширше за звичайні вкладки (було 1100px для всього застосунку — чат поддержки стискався до смужки);
   рейка компактніша; звичайні вкладки лишаються читабельної ширини, а широкий простір отримує «Підтримка» */
@media (min-width: 900px) {
  body.desktop-platform .content:has(> #tab-dev.active) { width: min(100%, 1560px); }
  body.desktop-platform #tab-dev.active { grid-template-columns: 196px minmax(0, 1fr); column-gap: 20px; }
  body.desktop-platform #tab-dev .modal-tab-bar { padding: 8px; border-radius: 20px; }
  body.desktop-platform #tab-dev .modal-tab-btn { padding: 9px 12px; font-size: 13px; gap: 10px; border-radius: 12px; }
  body.desktop-platform #tab-dev .modal-tab-btn svg { width: 16px; height: 16px; }
  body.desktop-platform #tab-dev .dev-tab-group { padding: 12px 12px 4px; font-size: 10px; }
  body.desktop-platform #tab-dev > .modal-tab-panel:not([data-devpanel="support"]) { max-width: 1000px; }
  body.desktop-platform.dev-support-fit .dev-support-panel { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
}


/* «Як це працює» у порожній Черзі: за замовчуванням згорнуто в один рядок-перемикач */
details.qe2-how { margin: 18px auto 4px; }
details.qe2-how > summary.qe2-how-title { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: inherit; transition: background 0.16s, border-color 0.16s; }
details.qe2-how > summary.qe2-how-title:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
details.qe2-how > summary::-webkit-details-marker { display: none; }
details.qe2-how > summary::after { content: ""; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--hint, var(--muted)); border-bottom: 2px solid var(--hint, var(--muted)); transform: rotate(45deg); transition: transform 0.18s; }
details.qe2-how[open] > summary::after { transform: rotate(-135deg); }
details.qe2-how[open] > summary { margin-bottom: 16px; }
details.qe2-how > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* «Як це працює»: вирівняно по ширині з кнопками внизу картки, є відступи, список підказки не липне до заголовка */
details.qe2-how { align-self: stretch; width: auto; max-width: none; margin: 4px 0 16px; }
details.qe2-how > .qe2-steps, details.qe2-how > .qe2-why { max-width: 640px; margin-left: auto; margin-right: auto; }
details.qe2-how > .qe2-why { margin-top: 14px; }
.qe2-why summary:focus-visible { outline-offset: -2px; }
.qe2-why[open] summary { padding-bottom: 8px; }
.qe2-why ul { padding: 4px 16px 14px 34px; }


/* =====================================================================
   Пачка A: черга — свайп вправо, фільтри, «Пізніше», схожі новини, перегляд публікації
   ===================================================================== */
.swipe-approve-bg { position: absolute; inset: 0; border-radius: var(--radius-md, 14px); display: flex; align-items: center; justify-content: flex-start; padding-left: 24px; color: #fff; opacity: 0;
  background: linear-gradient(90deg, #16a34a, #22c55e); pointer-events: none; }
.swipe-approve-bg svg { width: 26px; height: 26px; }
.queue-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.queue-filter[hidden] { display: none; }
.qf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--hint, var(--muted));
  background: transparent; border: 1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.qf-chip:hover { color: inherit; }
.qf-chip.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.qf-n { opacity: 0.7; font-variant-numeric: tabular-nums; }
.qf-snz { margin-left: auto; color: #f59e0b; border-color: color-mix(in srgb, #f59e0b 40%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); }
.qf-snz svg { width: 14px; height: 14px; }
.qe2-mini { padding: 30px 18px; }
.q-score { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; color: #22c55e; background: color-mix(in srgb, #22c55e 14%, transparent); }
.q-woke { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.q-snooze-btn, .q-dup-chip { display: inline-flex; align-items: center; gap: 6px; }
.q-snooze-btn span { white-space: nowrap; }
.q-pop { position: absolute; right: 12px; bottom: 60px; z-index: 6; min-width: 190px; padding: 6px; border-radius: 16px; background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); animation: sheetInC 0.18s ease backwards; }
.q-pop-title { padding: 8px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hint, var(--muted)); }
.q-pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.q-pop button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qd-sheet { width: min(640px, 100%); max-height: calc(88 * var(--vh1, 1vh)); display: flex; flex-direction: column; overflow: hidden; }
.qd-hint { font-size: 12.5px; color: var(--hint, var(--muted)); line-height: 1.45; margin: 2px 0 10px; }
.qd-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.qd-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); }
.qd-main { flex: 1; min-width: 0; }
.qd-title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.qd-meta { font-size: 12px; color: var(--hint, var(--muted)); margin-top: 2px; }
.qd-text { font-size: 12.5px; color: var(--hint, var(--muted)); margin-top: 6px; line-height: 1.4; overflow-wrap: anywhere; }
.qd-pick { flex: none; }
.qd-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.home-dash-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hdc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent); background: transparent; color: inherit; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.hdc i { width: 7px; height: 7px; border-radius: 50%; background: var(--hint, #888); }
.hdc-pending i { background: #f59e0b; } .hdc-queued i { background: #22c55e; } .hdc-draft i { background: #94a3b8; }
.hdc:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }


/* =====================================================================
   Пачка B: редактор — варіанти ШІ, найкращий час, перегляд «Телефон / ПК / Обидва»
   ===================================================================== */
.av-sheet { width: min(560px, 100%); max-height: calc(88 * var(--vh1, 1vh)); overflow-y: auto; }
.av-hint { font-size: 12.5px; color: var(--hint, var(--muted)); line-height: 1.45; margin: 2px 0 8px; }
.av-label { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hint, var(--muted)); margin: 12px 0 6px; }
.av-group { display: flex; flex-direction: column; gap: 6px; }
.av-opt { text-align: left; width: 100%; padding: 11px 14px; border-radius: 13px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.35; cursor: pointer; color: inherit;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); transition: background 0.14s, border-color 0.14s; overflow-wrap: anywhere; }
.av-opt:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.av-opt.active { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); }
.av-tags { color: var(--accent); }
.av-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.av-foot .pill[disabled] { opacity: 0.45; cursor: not-allowed; }
.best-time-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.best-time-btn svg { width: 14px; height: 14px; }
.best-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.best-slots[hidden] { display: none; }
.best-slots .chip-action-btn.active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent); }
.best-slots-hint { flex: 1 1 100%; font-size: 11.5px; color: var(--hint, var(--muted)); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pv-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.pv-seg button { border: 0; background: transparent; color: var(--hint, var(--muted)); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.pv-seg button.active { background: var(--accent); color: #fff; }
.editor-focus-preview-pane .pv-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center; }
.pv-phone .pv-wrap .tg-bubble { width: 100%; max-width: 340px; }
.pv-desktop .pv-wrap .tg-bubble { width: 100%; max-width: 620px; }
.pv-both .pv-wrap > .tg-bubble:first-child { width: 100%; max-width: 340px; }
.pv-both .pv-wrap > .pv-second { width: 100%; max-width: 560px; flex: 1 1 360px; }


/* =====================================================================
   Пачка C1: голос, режим «в дорозі», закріплений перегляд, макроси, недавні вкладки
   ===================================================================== */
.voice-btn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--hint, var(--muted)); cursor: pointer; }
.voice-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.voice-btn.rec { color: #fff; background: #ef4444; animation: voiceRec 1.1s ease-in-out infinite; }
@keyframes voiceRec { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }
body.lite-mode *, body.lite-mode *::before, body.lite-mode *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
body.lite-mode *, body.lite-mode *::before, body.lite-mode *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-mode .maintenance-blob, body.lite-mode .splash-grid { display: none !important; }
body.lite-mode .btn-primary, body.lite-mode .btn-secondary, body.lite-mode .pill, body.lite-mode .nav-btn, body.lite-mode .qe2-btn { min-height: 52px; font-size: 15px; }
body.lite-mode .swipe-content { padding-top: 16px; padding-bottom: 16px; }
#float-preview { position: fixed; right: 20px; bottom: 96px; z-index: 100040; width: 340px; max-width: calc(100vw - 24px); max-height: 60vh; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: grab; user-select: none; touch-action: none; background: rgba(255, 255, 255, 0.05); }
.fp-head:active { cursor: grabbing; }
.fp-x { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.fp-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fp-body { overflow-y: auto; padding: 10px; }
.mc-sheet { width: min(560px, 100%); max-height: calc(88 * var(--vh1, 1vh)); overflow-y: auto; }
.mc-hint { font-size: 12.5px; color: var(--hint, var(--muted)); margin: 2px 0 10px; line-height: 1.45; }
.mc-list { display: flex; flex-direction: column; gap: 8px; }
.mc-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); }
.mc-main { flex: 1; min-width: 0; }
.mc-name { font-size: 14px; font-weight: 700; } .mc-name kbd { margin-left: 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--card-border); font-family: inherit; font-size: 10.5px; color: var(--hint, var(--muted)); }
.mc-sum { font-size: 12px; color: var(--hint, var(--muted)); margin-top: 2px; overflow-wrap: anywhere; }
.mc-empty { padding: 18px; text-align: center; color: var(--hint, var(--muted)); font-size: 13px; }
.mc-new { margin-top: 12px; border: 1px solid var(--card-border); border-radius: 14px; padding: 4px 12px 12px; }
.mc-new summary { cursor: pointer; padding: 10px 0; font-size: 13.5px; font-weight: 700; }
.mc-new label { display: block; font-size: 12px; font-weight: 700; color: var(--hint, var(--muted)); margin: 8px 0 0; }
.mc-new input, .mc-new select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 14px; }
.mc-new .pill { margin-top: 12px; }
.recent-tabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 6px; overflow-x: auto; margin: -6px 0 12px; padding: 6px 2px; background: color-mix(in srgb, var(--bg, #0b0a14) 82%, transparent); scrollbar-width: none; }
.recent-tabs[hidden] { display: none; }
.recent-tabs::-webkit-scrollbar { display: none; }
.rc-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 6px 8px 6px 11px; border-radius: 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); }
.rc-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rc-chip svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.rc-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-x { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.55; cursor: pointer; font-size: 14px; line-height: 1; }
.rc-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }


/* Експорт журналу: діалог із фільтрами */
.ex-sheet { width: min(520px, 100%); max-height: calc(88 * var(--vh1, 1vh)); overflow-y: auto; }
.ex-l { display: block; font-size: 12px; font-weight: 700; color: var(--hint, var(--muted)); margin: 10px 0 0; }
.ex-l select, .ex-l input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 14px; }
.ex-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }


/* =====================================================================
   Пачка D: здоров'я каналів, календар, тихі години, A/B підписів
   ===================================================================== */
.ch-health { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.ch-health[hidden] { display: none; }
.ch-health i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ch-health.ok { color: #22c55e; background: color-mix(in srgb, #22c55e 12%, transparent); }
.ch-health.warn { color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, transparent); }
.ch-health.bad { color: #ef4444; background: color-mix(in srgb, #ef4444 14%, transparent); }
.ch-health.ok span { display: none; }
.hl-sheet { width: min(480px, 100%); }
.hl-item { padding: 12px 14px; border-radius: 14px; margin-top: 10px; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); }
.hl-item b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.hl-item.bad { border-color: color-mix(in srgb, #ef4444 45%, transparent); } .hl-item.bad b { color: #ef4444; }
.hl-item.warn { border-color: color-mix(in srgb, #f59e0b 45%, transparent); } .hl-item.warn b { color: #f59e0b; }
.hl-item.ok b { color: #22c55e; }
.hl-last { margin-top: 12px; font-size: 12.5px; color: var(--hint, var(--muted)); }
.cal-sheet { width: min(1120px, 100%); max-height: calc(90 * var(--vh1, 1vh)); overflow-y: auto; }
.cal-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.cal-range { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--hint, var(--muted)); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cal-day { min-height: 150px; padding: 8px; border-radius: 14px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 6px; transition: background 0.14s, border-color 0.14s; }
.cal-day.today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cal-day.empty { border-style: dashed; }
.cal-day.over { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
.cal-day-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hint, var(--muted)); }
.cal-day-h b { font-size: 16px; letter-spacing: 0; color: inherit; }
.cal-day.today .cal-day-h b { color: var(--accent); }
.cal-empty { margin: auto; font-size: 12px; color: var(--hint, var(--muted)); opacity: 0.7; }
.cal-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; width: 100%; text-align: left; padding: 7px 9px; border-radius: 10px; border: 0; font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; }
.cal-item.sched { background: color-mix(in srgb, var(--accent) 22%, transparent); cursor: grab; }
.cal-item.sched[data-ro] { cursor: pointer; }
.cal-item.auto { background: rgba(255, 255, 255, 0.07); cursor: default; }
.cal-item.drag { opacity: 0.45; }
.cal-t { font-weight: 800; font-variant-numeric: tabular-nums; }
.cal-ti { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.cal-item em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.65; }
.cal-none { padding: 18px; text-align: center; font-size: 13px; color: var(--hint, var(--muted)); }
.cal-foot { margin-top: 10px; font-size: 11.5px; color: var(--hint, var(--muted)); }
@media (max-width: 800px) { .cal-grid { grid-template-columns: 1fr; } .cal-day { min-height: 0; } .cal-foot { display: none; } }

/* ===== ПК: той самий календар, "консольна" картка замість напівпрозорого
   скла — непрозорі var(--card)/var(--card-hi) замість rgba(255,255,255,.03),
   межа по висоті дня (зі скролом) замість необмеженого росту колонки на
   завантажений день, порожній день — клікабельний (JS: openCalendar вище,
   "и логику тоже" — скорочений шлях "клік по порожньому дню -> редактор із
   уже підставленою датою", а не просто порожня інформаційна клітинка). ===== */
@media (min-width: 900px) {
  body.desktop-platform .cal-day { background: var(--card); max-height: 280px; overflow-y: auto; min-height: 100px; }
  body.desktop-platform .cal-day.today { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
  body.desktop-platform .cal-day.over { background: color-mix(in srgb, var(--accent) 20%, var(--card)); }
  body.desktop-platform .cal-item.sched { background: color-mix(in srgb, var(--accent) 20%, var(--card-hi)); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
  body.desktop-platform .cal-item.auto { background: var(--card-hi); border: 1px solid var(--card-border); }
  body.desktop-platform .cal-day-clickable { cursor: pointer; }
  body.desktop-platform .cal-day-clickable:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
  body.desktop-platform .cal-day-clickable:hover .cal-empty { color: var(--accent-2, var(--accent)); }
}
.cal-edit { width: min(440px, 100%); }
.ce-title { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; margin-top: 4px; }
.ce-snip, .ce-ch { font-size: 12.5px; color: var(--hint, var(--muted)); margin-top: 6px; line-height: 1.45; overflow-wrap: anywhere; }
.ce-l { display: block; font-size: 12px; font-weight: 700; color: var(--hint, var(--muted)); margin-top: 12px; }
.ce-l input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 14px; }
.ce-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.qh-times { display: flex; gap: 10px; }
.qh-times label { flex: 1; font-size: 12px; font-weight: 700; color: var(--hint, var(--muted)); }
.qh-times input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); color: inherit; font: inherit; font-size: 15px; }
.qh-status { margin-top: 8px; font-size: 12px; font-weight: 700; color: #f59e0b; }
.fb-ab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 4px; padding: 7px 10px; border-radius: 10px; font-size: 12px; background: rgba(255, 255, 255, 0.04); color: var(--hint, var(--muted)); }
.fb-ab b { color: inherit; font-weight: 800; }
.fb-ab.lead { background: color-mix(in srgb, #22c55e 12%, transparent); color: #22c55e; }
.fb-ab-lead { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fb-ab-none { opacity: 0.7; }
.fb-ab-hint { font-size: 12px; color: var(--hint, var(--muted)); margin: 2px 0 8px; line-height: 1.4; }

/* ==================== Налаштування каналу — новий дизайн (body.cm-v2) ====================
   Увімкнений за замовчуванням; секретне слово (див. CM_SECRET_WORD в app-beta.js) знімає
   клас і повертає попередній вигляд цілком — тут нічого не перевизначається поза цим класом. */
body.cm-v2 #channel-modal .modal-header { margin-bottom: 16px; letter-spacing: -0.01em; }
body.cm-v2 #channel-modal .modal-hero {
  padding: 18px; gap: 16px; border-radius: 26px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--card-border));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px -18px var(--accent-glow);
}
body.cm-v2 #channel-modal .modal-hero::before { display: none; }
body.cm-v2 #channel-modal .modal-hero-avatar {
  width: 72px; height: 72px; min-width: 72px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 12px 28px -10px var(--accent-glow);
}
body.cm-v2 #channel-modal .modal-hero-avatar img { border-radius: 0; }
body.cm-v2 #channel-modal .modal-hero-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
body.cm-v2 #channel-modal .modal-hero-meta {
  background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.08); font-size: 12.5px; letter-spacing: .01em;
}

body.cm-v2 #channel-modal .modal-tab-bar {
  padding: 5px; gap: 4px; border-radius: 20px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
body.cm-v2 #channel-modal .modal-tab-btn {
  border-radius: 15px; padding: 10px 12px; border: 1px solid transparent; box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
body.cm-v2 #channel-modal .modal-tab-btn::after, body.cm-v2 #channel-modal .modal-tab-btn::before { display: none; }
body.cm-v2 #channel-modal .modal-tab-btn:active { transform: scale(.97); }
body.cm-v2 #channel-modal .modal-tab-btn.active {
  color: var(--text); box-shadow: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

body.cm-v2 #channel-modal .settings-card {
  border-radius: 22px; padding: 16px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.075); border-left-width: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
body.cm-v2 #channel-modal .settings-card.state-accent-on {
  border-color: color-mix(in srgb, #34d399 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px -16px rgba(52,211,153,.55);
}
body.cm-v2 #channel-modal .settings-card.state-accent-off { border-color: rgba(255,255,255,.075); }
body.cm-v2 #channel-modal .settings-card-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 16px -8px rgba(0,0,0,.6);
}
body.cm-v2 #channel-modal .settings-card.state-accent-on .settings-card-icon { background: linear-gradient(160deg, #34d399, #059669); }
body.cm-v2 #channel-modal .settings-card.state-accent-off .settings-card-icon { background: linear-gradient(160deg, #4b4b5e, #33333f); }
body.cm-v2 #channel-modal .settings-card-title { font-size: 15.5px; font-weight: 750; letter-spacing: -0.01em; }
body.cm-v2 #channel-modal .settings-card-desc { font-size: 12.5px; opacity: .78; }
body.cm-v2 #channel-modal .settings-card-extra { border-top-color: rgba(255,255,255,.06); }
body.cm-v2 #channel-modal .settings-card-header.clickable { border-radius: 14px; transition: background .15s ease; }
body.cm-v2 #channel-modal .settings-card-header.clickable:active { background: rgba(255,255,255,.06); }
body.cm-v2 #channel-modal .settings-card-extra > .pill, body.cm-v2 #channel-modal .pill-row > .pill {
  border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  transition: background .15s ease, transform .12s ease;
}
body.cm-v2 #channel-modal .settings-card-extra > .pill:active, body.cm-v2 #channel-modal .pill-row > .pill:active { transform: scale(.98); background: rgba(255,255,255,.1); }
body.cm-v2 #channel-modal .watermark-switch { width: 46px; height: 28px; }
body.cm-v2 #channel-modal .watermark-switch::after { width: 22px; height: 22px; }
body.cm-v2 #channel-modal .watermark-switch.on::after { transform: translateX(18px); }

@keyframes cm2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.cm-v2 #channel-modal .modal-tab-panel.active > * { animation: cm2-rise .32s cubic-bezier(.2,.8,.2,1) both; }
body.cm-v2 #channel-modal .modal-tab-panel.active > *:nth-child(2) { animation-delay: .04s; }
body.cm-v2 #channel-modal .modal-tab-panel.active > *:nth-child(3) { animation-delay: .08s; }
body.cm-v2 #channel-modal .modal-tab-panel.active > *:nth-child(4) { animation-delay: .12s; }
body.cm-v2 #channel-modal .modal-tab-panel.active > *:nth-child(n+5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { body.cm-v2 #channel-modal .modal-tab-panel.active > * { animation: none; } }

/* ПК: окремі кнопки «Перегляд» і «Закріпити» не потрібні — є живий перегляд у режимі фокусу (2026-10-04) */
body.desktop-platform #editor-preview-btn,
body.desktop-platform #editor-float-preview-btn { display: none !important; }

/* Редактор: кнопка мікрофона стояла в тому самому кутку, що й «Копіювати текст», і іконки накладались.
   Тепер мікрофон — окрема квадратна кнопка праворуч від копіювання (2026-10-04). */
.ed-mini-btn.voice-btn { left: 48px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--card-border); }
.ed-mini-btn.voice-btn:not(.rec) { background: rgba(255, 255, 255, 0.05); }
.ed-mini-btn.voice-btn:not(.rec):hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }

/* Зелений індикатор «усе гаразд» біля каналу прибрано (2026-10-04); жовтий/червоний показуємо лише коли є проблема */
.ch-health.ok { display: none !important; }

/* Редактор: однакові кнопки «Копіювати» й мікрофон на ПК і телефоні (2026-10-04) */
.ed-mini-btn { padding: 0; line-height: 0; }
.ed-mini-btn svg, .ed-mini-btn .icon { display: block; margin: 0; width: 16px; height: 16px; flex: none; }
.ed-mini-btn.voice-btn { left: 50px; }
.ed-mini-btn.voice-btn.rec {
  color: #f87171; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}
@media (hover: none), (max-width: 700px) {
  .ed-mini-btn { width: 34px; height: 34px; bottom: 8px; }
  .ed-mini-btn.voice-btn { left: 54px; width: 34px; height: 34px; }
}

/* Телефон: «Закріпити» і кнопка фокус-режиму (рамка-розгортання) не потрібні — вистачає «Перегляд» (2026-10-04) */
body:not(.desktop-platform) #editor-float-preview-btn,
body:not(.desktop-platform) #editor-focus-toggle-btn { display: none !important; }
#editor-float-preview-btn { display: none !important; }

/* ==================== Телефон: «Контент → Черга» без перегруза (2026-10-04) ====================
   Було: п'ять елементів керування в 3 рядки впритул. Стало: тихий верхній перемикач, одна головна
   дія, сортування на всю ширину (лише текст, прокручується), інструменти окремим легким рядком. */
body:not(.desktop-platform) #content-segmented .segment svg { display: none; }
body:not(.desktop-platform) #content-segmented .segment { justify-content: center; }

body:not(.desktop-platform) #content-panel-queue { margin-top: 18px !important; }
body:not(.desktop-platform) .queue-actions { gap: 10px; margin-bottom: 16px; }
body:not(.desktop-platform) .queue-compose-btn { min-height: 54px; }
body:not(.desktop-platform) .queue-compose-arrow { display: none; }
body:not(.desktop-platform) .queue-clear-btn {
  width: 46px; min-width: 46px; background: transparent; border-color: rgba(255,255,255,.1); box-shadow: none;
}
body:not(.desktop-platform) .queue-clear-btn svg { opacity: .75; }

body:not(.desktop-platform) .queue-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
body:not(.desktop-platform) .queue-sort {
  width: 100%; display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 4px;
}
body:not(.desktop-platform) .queue-sort::-webkit-scrollbar { display: none; }
body:not(.desktop-platform) .queue-sort-tab { flex: 1 0 auto; padding: 9px 14px; white-space: nowrap; }
body:not(.desktop-platform) .queue-sort-tab svg { display: none; }

body:not(.desktop-platform) .queue-tools { display: flex; align-items: center; gap: 8px; }
body:not(.desktop-platform) .queue-ttl-chip { flex: 1; min-width: 0; justify-content: flex-start; background: transparent; border-color: rgba(255,255,255,.08); }
body:not(.desktop-platform) .queue-tools .queue-log-btn { width: 42px; height: 42px; background: transparent; border-color: rgba(255,255,255,.08); }
body:not(.desktop-platform) .queue-tools .queue-log-btn svg { opacity: .8; }

body:not(.desktop-platform) .queue-filter { gap: 8px; margin-bottom: 14px; }
body:not(.desktop-platform) .queue-filter > * { font-size: 13px; padding: 6px 12px; min-height: 0; border-color: rgba(255,255,255,.08); }

/* «Нещодавні»: без чорної смуги-підкладки, легкі капсули з кольором за типом (2026-10-04) */
.recent-tabs {
  position: static; background: none; margin: 0 0 14px; padding: 2px 0 4px; gap: 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.rc-chip {
  --rc-c: var(--accent); max-width: 200px; padding: 5px 6px 5px 6px; gap: 8px; border-radius: 999px; font-size: 12.5px; font-weight: 650;
  background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.09); transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.rc-chip.rc-post { --rc-c: #fbbf24; }
.rc-chip.rc-source { --rc-c: #60a5fa; }
.rc-chip:hover { background: color-mix(in srgb, var(--rc-c) 12%, transparent); border-color: color-mix(in srgb, var(--rc-c) 40%, transparent); }
.rc-chip:active { transform: scale(.97); }
.rc-chip > svg {
  box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 50%; opacity: 1; color: var(--rc-c);
  background: color-mix(in srgb, var(--rc-c) 16%, transparent);
}
.rc-x { margin-left: -2px; opacity: 0; transition: opacity .15s ease; }
.rc-chip:hover .rc-x, .rc-chip:focus-within .rc-x { opacity: .7; }
.rc-chip:not(:hover) .rc-t { padding-right: 8px; }

/* Телефон: сортування + статуси — один рядок капсул, як «Всі / Чернетки» (2026-10-04) */
.queue-chiprow {
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.queue-chiprow::-webkit-scrollbar { display: none; }
.queue-chiprow .queue-sort { display: contents; }
.queue-chiprow .queue-sort-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--hint, var(--muted)); background: transparent; box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--text, #fff) 12%, transparent);
}
.queue-chiprow .queue-sort-tab svg { display: none; }
.queue-chiprow .queue-sort-tab.active {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); box-shadow: none;
}
.queue-chiprow .queue-filter { flex: none; flex-wrap: nowrap; margin: 0; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); }
.queue-chiprow .qf-chip { flex: none; white-space: nowrap; }
.queue-chiprow .qf-snz { margin-left: 0; }

/* Face ID / PIN / «в дорозі»: плитка іконки була зеленою (від Spotify) — тепер у кольорі теми (2026-10-04) */
.set-toggle-logo.bio-logo {
  color: var(--accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 9%, transparent));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===== Телефон: сортування + статуси — один цілісний блок (2026-10-04) =====
   Перебиває попередні правила рядка (специфічність вища, ніж у body:not(.desktop-platform) .queue-sort). */
body:not(.desktop-platform) .queue-chiprow {
  display: flex; align-items: center; gap: 2px; padding: 4px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity;
}
body:not(.desktop-platform) .queue-chiprow .queue-sort {
  display: contents; background: none; border: 0; padding: 0; width: auto; overflow: visible;
}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab,
body:not(.desktop-platform) .queue-chiprow .qf-chip {
  flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 16px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--hint, var(--muted)); background: transparent; border: 1px solid transparent; box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab:active,
body:not(.desktop-platform) .queue-chiprow .qf-chip:active { transform: scale(.96); }
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab.active,
body:not(.desktop-platform) .queue-chiprow .qf-chip.active {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
}
body:not(.desktop-platform) .queue-chiprow .queue-filter {
  flex: none; display: flex; flex-wrap: nowrap; gap: 2px; margin: 0 0 0 6px; padding: 0 0 0 8px; border-left: 1px solid rgba(255,255,255,.12);
}
body:not(.desktop-platform) .queue-chiprow .qf-n {
  min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 11.5px; opacity: 1;
  background: rgba(255,255,255,.08); color: inherit;
}
body:not(.desktop-platform) .queue-chiprow .qf-chip.active .qf-n { background: color-mix(in srgb, var(--accent) 28%, transparent); }
body:not(.desktop-platform) .queue-chiprow .qf-snz { margin-left: 0; }

/* PIN: повернуто попередній вигляд (2026-10-04); лишилась лише анімація натискання з клавіатури */
.pin-key.pressed { transform: scale(0.94); background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ===== Телефон: інструменти + сортування + статуси — один блок (2026-10-04) ===== */
body:not(.desktop-platform) .queue-panel {
  margin: 0 0 14px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body:not(.desktop-platform) .queue-panel .queue-bar { margin: 0; padding: 8px 8px 6px; gap: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
body:not(.desktop-platform) .queue-panel .queue-tools { gap: 6px; }
body:not(.desktop-platform) .queue-panel .queue-ttl-chip { border: 0; background: transparent; min-height: 40px; padding-left: 8px; }
body:not(.desktop-platform) .queue-panel .queue-tools .queue-log-btn {
  width: 40px; height: 40px; border: 0; border-radius: 14px; background: rgba(255,255,255,.05);
}
body:not(.desktop-platform) .queue-panel .queue-tools .queue-log-btn:active { background: rgba(255,255,255,.1); }
body:not(.desktop-platform) .queue-panel .queue-chiprow {
  margin: 0; padding: 6px 8px 8px; border: 0; border-radius: 0; background: none; box-shadow: none;
}

/* Швидкі емодзі: прапори картинками */
.emoji-quickbar-btn .eq-flag { width: 30px; height: 20px; object-fit: cover; border-radius: 4px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); pointer-events: none; }

/* Екран тимчасового блокування PIN (зворотний відлік) */
.pin-ban .bio-ico { background: linear-gradient(145deg, #f59e0b, #b45309); box-shadow: 0 14px 34px rgba(245, 158, 11, .35); }
.pin-ban-time { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }

/* Кнопки-фільтри «Всі / Чернетки…» прибрано (2026-10-04); сама система чернеток працює. Лишається лише чіп «відкладені». */
.queue-filter .qf-chip:not(.qf-snz) { display: none !important; }
.queue-filter:not(:has(.qf-snz)) { display: none !important; }

/* ==================== PIN-екран без «коробки» (2026-10-04, за запитом «покруче, без прямокутника») ====================
   Немає картки: на загальному фоні — круглий символ замка зі свіченням, велика типографіка, круглі клавіші-скло,
   крапки з «поп»-анімацією. Те саме для екрана блокування. */
.bio-card:has(.pin-host), .bio-card.pin-ban {
  width: min(330px, 100%); padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.bio-card:has(.pin-host) .bio-ico, .bio-card.pin-ban .bio-ico { width: 68px; height: 68px; border-radius: 50%; margin-bottom: 10px; }
.bio-card:has(.pin-host) .bio-ico {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 7%, transparent), 0 14px 44px -8px var(--accent-glow);
}
.bio-card.pin-ban .bio-ico { box-shadow: 0 0 0 9px rgba(245,158,11,.08), 0 14px 44px -8px rgba(245,158,11,.5); }
.bio-card:has(.pin-host) .bio-ico svg, .bio-card.pin-ban .bio-ico svg { width: 30px; height: 30px; stroke-width: 1.9; }
.bio-card:has(.pin-host) .bio-title, .bio-card.pin-ban .bio-title { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; }
.bio-card:has(.pin-host) .bio-hint { margin-bottom: 14px; font-size: 13.5px; }
.pin-host { gap: 28px; margin: 2px 0 10px; }
.pin-dots { gap: 16px; height: 20px; }
.pin-dots i { width: 13px; height: 13px; border-color: rgba(255,255,255,.3); }
.pin-dots i.on { transform: none; box-shadow: 0 0 14px var(--accent-glow); animation: pinPop .22s cubic-bezier(.3,1.6,.5,1); }
@keyframes pinPop { 0% { transform: scale(.5); } 100% { transform: scale(1); } }
.pin-grid { grid-template-columns: repeat(3, 76px); gap: 14px 18px; }
.pin-key {
  position: relative; overflow: hidden; width: 76px; height: 76px; border-radius: 50%; font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .15s ease, transform .14s cubic-bezier(.3,1.5,.5,1), border-color .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.pin-key:hover { background: rgba(255,255,255,.1); }
.pin-key:active, .pin-key.pressed {
  transform: scale(.88); background: color-mix(in srgb, var(--accent) 32%, transparent);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 22px var(--accent-glow);
}
.pin-key::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
}
.pin-key.pressed::after { animation: pinRipple .38s ease-out; }
@keyframes pinRipple { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.5); } }
.pin-del { background: transparent; border-color: transparent; box-shadow: none; }
.pin-del:hover { background: rgba(255,255,255,.06); }
.pin-grid > span { display: block; }
@media (max-width: 380px), (max-height: 680px) {
  .pin-grid { grid-template-columns: repeat(3, 66px); gap: 10px 14px; }
  .pin-key { width: 66px; height: 66px; font-size: 24px; }
  .bio-card:has(.pin-host) .bio-ico { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .pin-key.pressed::after, .pin-dots i.on { animation: none; } .pin-key { transition: background .15s ease; } }

/* Перемикачі безпеки: Spotify/трей/автозапуск — лише ПК; решта (Face ID, PIN, «в дорозі») доступні й на телефоні */
body:not(.desktop-platform) #spotify-enable-row, body:not(.desktop-platform) #tray-close-row, body:not(.desktop-platform) #autostart-row { display: none !important; }
#desktop-settings-modal #sec-toggles .set-toggle-row { margin-top: 10px; border-radius: 18px; padding: 14px; }

/* ==================== Телефон: «Ще» — новий дизайн (2026-10-04) ==================== */
body:not(.desktop-platform) #tab-profile .profile-hero-stats {
  display: flex; gap: 0; margin-top: 14px; padding: 12px 0; border-radius: 22px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
}
body:not(.desktop-platform) #tab-profile .profile-hero-stat {
  flex: 1; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0 8px;
}
body:not(.desktop-platform) #tab-profile .profile-hero-stat + .profile-hero-stat { border-left: 1px solid rgba(255,255,255,.1); }
body:not(.desktop-platform) #tab-profile .profile-hero-stat b { font-size: 26px; letter-spacing: -0.02em; }

body:not(.desktop-platform) #tab-profile .set-label {
  display: flex; align-items: center; gap: 8px; margin: 22px 4px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hint);
}
body:not(.desktop-platform) #tab-profile .set-label::before {
  content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}

/* «Сервіс» — сітка плиток 2×N замість довгого списку */
body:not(.desktop-platform) #profile-service-section .set-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
body:not(.desktop-platform) #profile-service-section .set-row {
  position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; min-height: 0; padding: 14px 14px 15px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .12s ease, background .15s ease;
}
body:not(.desktop-platform) #profile-service-section .set-row::before, body:not(.desktop-platform) #profile-service-section .set-row::after { display: none; }
body:not(.desktop-platform) #profile-service-section .set-row:active { transform: scale(.97); background: rgba(255,255,255,.09); }
body:not(.desktop-platform) #profile-service-section .set-ico { width: 42px; height: 42px; border-radius: 14px; }
body:not(.desktop-platform) #profile-service-section .set-body { width: 100%; }
body:not(.desktop-platform) #profile-service-section .set-title { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; }
body:not(.desktop-platform) #profile-service-section .set-desc {
  margin-top: 3px; font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body:not(.desktop-platform) #profile-service-section .set-chev { position: absolute; top: 14px; right: 12px; opacity: .45; }
body:not(.desktop-platform) #profile-service-section .set-chev svg { width: 14px; height: 14px; }
body:not(.desktop-platform) #profile-service-section #profile-dev-row { grid-column: 1 / -1; flex-direction: row; align-items: center; }
body:not(.desktop-platform) #profile-service-section #profile-dev-row .set-chev { position: static; margin-left: auto; }

/* Оформлення + безпека на телефоні — спокійніша картка */
body:not(.desktop-platform) #appearance-settings-card .set-group-pad { border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.022)); border-color: rgba(255,255,255,.08); }
body:not(.desktop-platform) #sec-toggles { margin-top: 6px; }
body:not(.desktop-platform) #sec-toggles .set-toggle-row { margin-top: 12px; border-radius: 18px; padding: 12px 14px; }

/* Кнопка очищення черги (кошик) — завжди червона, на ПК і телефоні (2026-10-04) */
.queue-clear-btn, body:not(.desktop-platform) .queue-clear-btn {
  color: #ef4444; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.45); box-shadow: none;
}
.queue-clear-btn svg, body:not(.desktop-platform) .queue-clear-btn svg { opacity: 1; stroke: currentColor; }
.queue-clear-btn:hover, .queue-clear-btn:active { background: rgba(239, 68, 68, 0.22); border-color: rgba(239, 68, 68, 0.7); }

/* Face ID / Touch ID — клавіша в сітці PIN; екрани без PIN (лише біометрія, перевірка) — теж без «коробки» (2026-10-04) */
.pin-bio { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pin-bio svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bio-card:has(#bio-unlock-btn), .bio-card:has(.bio-ico.pulse) {
  width: min(330px, 100%); padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; border-radius: 0;
}
.bio-card:has(#bio-unlock-btn) .bio-ico, .bio-card:has(.bio-ico.pulse) .bio-ico {
  width: 68px; height: 68px; border-radius: 50%; margin-bottom: 10px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 7%, transparent), 0 14px 44px -8px var(--accent-glow);
}
.bio-card:has(#bio-unlock-btn) .bio-ico svg, .bio-card:has(.bio-ico.pulse) .bio-ico svg { width: 30px; height: 30px; }
.bio-card:has(#bio-unlock-btn) .bio-title { font-size: 24px; letter-spacing: -0.025em; }

/* Сайдбар ПК: однаковий колір підписів у всіх пунктів. У рубіновій темі «Головна/Контент/Реклама» були темно-сірими (#4b5563,
   правило для мобільної нижньої навігації), а «Сервіс» — світлішими. Тепер усі неактивні — var(--hint) (2026-10-04). */
body.desktop-platform .bottom-nav .nav-btn:not(.active),
body.desktop-platform .bottom-nav .nav-btn-extra:not(.active) { color: var(--hint); }
body.desktop-platform .bottom-nav .nav-btn:not(.active):hover,
body.desktop-platform .bottom-nav .nav-btn-extra:not(.active):hover { color: var(--text); }

/* Клавіша біометрії: іконка була зсунута від центру кола (inline-svg на базовій лінії) — центруємо гридом */
.pin-key.pin-bio { display: grid; place-items: center; padding: 0; line-height: 0; }
.pin-key.pin-bio svg { display: block; width: 34px; height: 34px; margin: 0; }
.pin-key.pin-del { display: grid; place-items: center; padding: 0; line-height: 0; }
.pin-key.pin-del svg { display: block; margin: 0; }

/* ==================== «Схожі новини»: вибір картками + зручні кнопки (2026-10-04) ==================== */
.qd-sheet .modal-header em.qd-count { font-style: normal; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); vertical-align: middle; }
.qd-list { gap: 10px; padding: 2px 2px 8px; }
.qd-card {
  position: relative; display: flex; gap: 12px; padding: 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.09); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent;
}
.qd-card:active { transform: scale(.985); }
.qd-card.sel {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  box-shadow: 0 10px 26px -14px var(--accent-glow);
}
.qd-radio { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: border-color .15s ease, background .15s ease; }
.qd-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.qd-card.sel .qd-radio { border-color: var(--accent); background: var(--accent); }
.qd-card.sel .qd-radio::after { transform: scale(1); }
.qd-body { flex: 1; min-width: 0; }
.qd-top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.qd-top:empty { display: none; }
.qd-chip { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--hint); background: rgba(255,255,255,.07); }
.qd-chip.rec { color: #22c55e; background: color-mix(in srgb, #22c55e 15%, transparent); }
.qd-chip.same { color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.qd-title { font-size: 15px; font-weight: 750; line-height: 1.3; }
.qd-text { font-size: 13px; line-height: 1.45; margin-top: 8px; color: color-mix(in srgb, var(--text) 78%, transparent); white-space: pre-wrap; }
.qd-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.qd-more { margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.qd-foot { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.qd-keep {
  min-height: 52px; padding: 0 16px; border: 0; border-radius: 18px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 10px 24px -10px var(--accent-glow);
  transition: transform .12s ease, opacity .15s ease;
}
.qd-keep:active { transform: scale(.98); }
.qd-keep:disabled { opacity: .45; box-shadow: none; }
.qd-foot2 { display: flex; gap: 8px; }
.qd-danger, .qd-close {
  flex: 1; min-height: 46px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .12s ease;
}
.qd-danger { color: #ef4444; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4); }
.qd-danger:active { background: rgba(239,68,68,.2); transform: scale(.98); }
.qd-close { color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.qd-close:active { background: rgba(255,255,255,.12); transform: scale(.98); }

/* Картка новини в черзі: головна дія на всю ширину, другорядні — рівним рядом (2026-10-04) */
#queue-list .card-actions { gap: 8px; }
#queue-list .card-actions > .btn-primary { order: -1; flex: 1 1 100%; min-height: 48px; border-radius: 16px; font-size: 15px; font-weight: 800; }
#queue-list .card-actions > .btn-secondary { flex: 1 1 0; min-width: 0; min-height: 44px; border-radius: 14px; padding: 0 10px; font-size: 13.5px; white-space: nowrap; }
#queue-list .card-actions > .q-dup-chip {
  order: 0; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Другорядні дії на картці новини — значками (підписи в title/aria-label) (2026-10-04) */
#queue-list .card-actions > .btn-secondary {
  font-size: 0; gap: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0;
}
#queue-list .card-actions > .btn-secondary svg { width: 22px; height: 22px; flex: none; margin: 0; stroke: currentColor; }
#queue-list .card-actions > .btn-secondary span { display: none; }
#queue-list .card-actions > .q-dup-chip { gap: 6px; }
#queue-list .card-actions > .q-dup-chip::after { content: "+" attr(data-n); font-size: 14px; font-weight: 800; line-height: 1; }
#queue-list .card-actions > .q-snooze-btn svg { opacity: .9; }

/* Картка новини на ПК: інфо ліворуч, дії компактним рядом праворуч (2026-10-04) */
body.desktop-platform #queue-list .queue-card.submission-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: center;
  padding: 16px 20px;
}
body.desktop-platform #queue-list .queue-card > :not(.card-actions) { grid-column: 1; min-width: 0; }
body.desktop-platform #queue-list .queue-card > .card-actions {
  grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; flex-wrap: nowrap; gap: 8px;
}
body.desktop-platform #queue-list .queue-card .avatar-stack { margin: 8px 0 0; }
body.desktop-platform #queue-list .card-actions > .btn-primary {
  order: 5; flex: 0 0 auto; min-width: 0; min-height: 46px; padding: 0 24px; border-radius: 14px; font-size: 14.5px; white-space: nowrap;
}
body.desktop-platform #queue-list .card-actions > .btn-secondary {
  flex: 0 0 46px; width: 46px; min-height: 46px; border-radius: 14px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
body.desktop-platform #queue-list .card-actions > .btn-secondary:hover {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
body.desktop-platform #queue-list .card-actions > .q-dup-chip { flex: 0 0 auto; width: auto; padding: 0 14px; }


/* ==================== Spotify у сайдбарі: два вигляди (2026-10-04) ====================
   «Сучасний» стиль панелі — багатий плеєр (велика обкладинка, перемішування/повтор, гучність, пристрій);
   «Класичний» — компактний міні-плеєр в один рядок. Згорнутий сайдбар лишається як був. */
.sp-extra { display: none; }
.sp-extra svg { stroke: currentColor; }
.sp-rep1 { display: none; }
.sp-ctl.on { color: #1db954; background: rgba(29, 185, 84, .16); }
.sp-ctl.one .sp-rep1 { display: inline; }

/* — Класичний: компакт — */
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sidebar-spotify:not([hidden]) { padding: 10px 12px; border-radius: 16px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-head { margin-bottom: 8px; justify-content: space-between; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-head-title { display: none; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-head .sp-logo { width: 16px; height: 16px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-player:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-now { flex: 1 1 0; min-width: 0; margin: 0; gap: 9px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-cover { width: 38px; height: 38px; border-radius: 9px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-title { font-size: 13px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-artist { font-size: 11.5px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-eq { display: none !important; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-controls { order: 2; margin: 0; gap: 2px; flex: none; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-ctl { width: 28px; height: 28px; background: transparent; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-ctl svg { width: 16px; height: 16px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-ctl.sp-play { width: 32px; height: 32px; box-shadow: none; background: #1db954; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) #sp-seek { order: 3; flex: 1 1 100%; height: 3px; }
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-times,
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-volume,
body.desktop-platform:not(.sidebar-style-modern):not(.sidebar-collapsed) .sp-device { display: none !important; }

/* — Сучасний: багатий плеєр — */
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sidebar-spotify:not([hidden]) { padding: 16px; border-radius: 26px; box-shadow: 0 22px 50px -18px rgba(0,0,0,.7); }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sidebar-spotify::before { opacity: .55; filter: blur(30px) saturate(1.7); }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-now { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 12px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-cover {
  width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 20px; box-shadow: 0 20px 40px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
}
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-title { font-size: 16px; font-weight: 800; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-artist { font-size: 12.5px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-extra { display: inline-flex; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-controls { gap: 8px; justify-content: space-between; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl { width: 38px; height: 38px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl.sp-play { width: 58px; height: 58px; box-shadow: 0 10px 28px rgba(29,185,84,.55); }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl.sp-play svg { width: 26px; height: 26px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-range { height: 5px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-device {
  display: block; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
}
/* Згорнутий сайдбар: додаткові кнопки не показуємо */
body.desktop-platform.sidebar-collapsed .sp-extra { display: none !important; }

/* Spotify «сучасний»: зменшено — обкладинка збоку замість величезного квадрата (2026-10-04) */
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sidebar-spotify:not([hidden]) { padding: 12px 12px 10px; border-radius: 22px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-head { margin-bottom: 8px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-now { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 8px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-cover { width: 64px; height: 64px; flex: none; aspect-ratio: auto; border-radius: 14px; box-shadow: 0 10px 22px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-title { font-size: 14.5px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-artist { font-size: 12px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-controls { gap: 4px; margin-bottom: 6px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl { width: 32px; height: 32px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl svg { width: 16px; height: 16px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl.sp-play { width: 46px; height: 46px; box-shadow: 0 8px 20px rgba(29,185,84,.5); }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-ctl.sp-play svg { width: 20px; height: 20px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-times { margin: 3px 0 6px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .sp-device { margin-top: 6px; padding: 2px 10px; font-size: 10.5px; }


/* ==================== Головна: розумні картки «Черга» / «Тривоги» (2026-10-04) ==================== */
.home-dash-extra { margin-top: 12px; cursor: default; }
.home-dash-extra .hd-pc, .home-dash-extra .hd-mob { display: none; }
body.desktop-platform .home-dash-extra .hd-pc { display: block; }
body:not(.desktop-platform) .home-dash-extra .hd-mob { display: block; }
.hd-done { font-size: 13px; font-weight: 700; color: #22c55e; padding: 8px 0 2px; }
.hd-eta { font-size: 12.5px; color: var(--hint); line-height: 1.4; }

/* ПК: робочий список з швидкими діями */
.hd-rows { display: flex; flex-direction: column; gap: 6px; }
.hd-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.hd-row-main { flex: 1; min-width: 0; }
.hd-row-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-row-sub { font-size: 11.5px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.hd-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hd-ic.ok { color: #22c55e; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
.hd-ic.no { color: #ef4444; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }
.hd-ic:hover { filter: brightness(1.2); }
.hd-ic:active { transform: scale(.92); }
.hd-more { margin: 6px 2px 0; font-size: 12px; color: var(--hint); }
.hd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.hd-btn { padding: 8px 14px; border-radius: 12px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent); cursor: pointer; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: background .15s ease, transform .12s ease; }
.hd-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.hd-btn:active { transform: scale(.97); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #ef4444; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }

/* Телефон: одна головна дія */
.hd-cta { width: 100%; min-height: 46px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent-2))); box-shadow: 0 10px 22px -10px var(--accent-glow); transition: transform .12s ease; }
.hd-cta:active { transform: scale(.98); }
body:not(.desktop-platform) .hd-mob .hd-eta { margin-top: 8px; }
body:not(.desktop-platform) .hd-mob .hd-btn { width: 100%; margin-top: 10px; min-height: 42px; }

/* Блок «Черга на публікацію / Тривоги зараз» на Головній прибрано (2026-10-04, рішення користувача). Розмітку лишено прихованою:
   від неї живляться віджет «Зараз» у сайдбарі, бейдж тривог угорі та «Швидка публікація». */
#home-dashboard { display: none !important; }


/* ==================== Телефон: «Черга» ще легша (2026-10-04) ====================
   «Написати новину» — на всю ширину; календар, журнал і очищення сховані в меню «⋯» поруч зі строком зберігання. */
#queue-more-btn { display: none; }
body:not(.desktop-platform) #queue-more-btn { display: inline-grid; }
body:not(.desktop-platform) .queue-panel #queue-cal-btn,
body:not(.desktop-platform) .queue-panel #queue-log-btn,
body:not(.desktop-platform) #clear-queue-btn { display: none !important; }
body:not(.desktop-platform) .queue-actions { display: block; }
body:not(.desktop-platform) .queue-compose-btn { width: 100%; }
.qm-pop {
  position: fixed; z-index: 100030; min-width: 220px; padding: 6px; border-radius: 18px;
  background: color-mix(in srgb, var(--card, #14111f) 92%, #000); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.6); animation: ovIn .14s ease backwards;
}
.qm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 650; text-align: left; cursor: pointer; }
.qm-row:active { background: rgba(255,255,255,.08); }
.qm-row svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qm-row.danger { color: #ef4444; }


/* ===== Телефон: верхній ряд панелі прибрано; час зберігання теж у меню «⋯», яке стоїть поруч із «Написати новину» (2026-10-04) ===== */
body:not(.desktop-platform) .queue-panel .queue-bar { display: none !important; }
body:not(.desktop-platform) .queue-actions { display: flex; gap: 10px; align-items: stretch; }
body:not(.desktop-platform) .queue-compose-btn { flex: 1; width: auto; }
.queue-more-btn { display: none; }
body:not(.desktop-platform) .queue-more-btn {
  display: grid; place-items: center; flex: none; width: 56px; padding: 0; border-radius: 18px; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background .15s ease, transform .12s ease;
}
body:not(.desktop-platform) .queue-more-btn:active { background: rgba(255,255,255,.12); transform: scale(.96); }
body:not(.desktop-platform) .queue-more-btn svg { width: 22px; height: 22px; }
body:not(.desktop-platform) .queue-panel { border-radius: 20px; }

/* ==================== Телефон: нижня навігація — оновлений дизайн (2026-10-04) ====================
   Плаваюча скляна панель із відступами від країв; неактивні пункти приглушені, активний підсвічує ковзна «пігулка»
   (той самий --nav-i, що й раніше, лише замість тонкої лінії зверху). ПК-сайдбар не чіпаємо. */
body:not(.desktop-platform) .bottom-nav {
  left: 12px; right: 12px; bottom: max(8px, calc(env(safe-area-inset-bottom) - 12px)); max-width: 456px;
  padding: 6px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(30, 24, 52, 0.82), rgba(14, 11, 26, 0.92));
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body:not(.desktop-platform) .bottom-nav::after { display: none; }
body:not(.desktop-platform) .bottom-nav::before {
  top: 6px; left: 6px; height: calc(100% - 12px); width: calc((100% - 12px) / 4); border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 8px 22px -8px var(--accent-glow);
  transform: translateX(calc(var(--nav-i) * 100%));
}
body:not(.desktop-platform) .bottom-nav .nav-btn {
  height: 54px; border-radius: 22px; gap: 2px; font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
  color: color-mix(in srgb, var(--text) 58%, transparent); z-index: 1;
}
body:not(.desktop-platform) .bottom-nav .nav-btn .icon { width: 24px; height: 24px; stroke-width: 1.9; }
body:not(.desktop-platform) .bottom-nav .nav-btn.active { color: var(--text); }
body:not(.desktop-platform) .bottom-nav .nav-btn.active .icon { color: var(--accent-2); transform: translateY(-1px) scale(1.1); filter: drop-shadow(0 2px 8px var(--accent-glow)); }

/* ===== Нижня навігація (телефон): виправлення багів (2026-10-04) =====
   1) активна «пігулка» вилазила за край панелі — позиція тепер через left (а не translateX у % власної ширини) + border-box;
   2) крізь напівпрозору панель просвічував контент — фон майже непрозорий, під панеллю суцільна підкладка до самого краю екрана;
   3) контент не ховається під панеллю — запас знизу. */
body:not(.desktop-platform) .bottom-nav {
  background: linear-gradient(180deg, rgba(28, 22, 48, 0.97), rgba(14, 11, 26, 0.99));
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
body:not(.desktop-platform) .bottom-nav::before {
  box-sizing: border-box; transform: none;
  left: calc(6px + var(--nav-i) * ((100% - 12px) / 4)); width: calc((100% - 12px) / 4);
  transition: left 0.5s cubic-bezier(.32, 1.25, .5, 1);
}
body:not(.desktop-platform)::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; pointer-events: none;
  height: calc(max(8px, calc(env(safe-area-inset-bottom) - 12px)) + 30px);
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
body:not(.desktop-platform) .content { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { body:not(.desktop-platform) .bottom-nav::before { transition: none; } }

/* Чернетка: пунктирна рамка в Safari/WebView з округленням і transform малювалась криво (товстий обрізаний низ) —
   тепер суцільна янтарна рамка з м'яким свіченням і акцентною смужкою зліва (2026-10-04) */
.queue-card.is-draft {
  border-style: solid; border-width: 1px; border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.09), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 26px -16px rgba(251, 191, 36, 0.5);
}

/* Телефон: вкладки «Реклама» (Реклами / Календар / Налаштування) — усі три вміщуються, без обрізаного третього пункту (2026-10-04) */
body:not(.desktop-platform) #tab-ads .modal-tab-bar { display: flex; overflow: hidden; gap: 2px; }
body:not(.desktop-platform) #tab-ads .modal-tab-bar .modal-tab-btn {
  flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 13px; white-space: nowrap;
}
body:not(.desktop-platform) #tab-ads .modal-tab-bar .modal-tab-btn svg { display: none; }
body:not(.desktop-platform) #tab-ads .modal-tab-bar .modal-tab-btn span { overflow: hidden; text-overflow: ellipsis; }

/* Нижня навігація (телефон): неактивні іконки були напівпрозорими, тому в місцях перетину ліній (двері будинку, «газета»,
   рупор) штрихи подвоювались і світилися яскравіше. Тепер колір суцільний, без прозорості (2026-10-04). */
body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active) { color: color-mix(in srgb, var(--text) 56%, var(--bg)); }
body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active) .icon { opacity: 1; filter: none; }


/* ==================== Роль «Саппорт»: у Тех.розділі лише «Підтримка» (2026-10-04) ==================== */
body.support-only #tab-dev .modal-tab-bar .modal-tab-btn:not([data-devtab="support"]),
body.support-only #tab-dev .modal-tab-bar .dev-tab-group { display: none !important; }
body.support-only #dev-support-purge-btn, body.support-only #dev-support-purge-panel,
body.support-only #dev-support-userlog-btn { display: none !important; }
body.support-only #dev-support-head-link { pointer-events: none; }

/* ПК: відступ під жовтий банер «ТЕСТОВА ПАНЕЛЬ» потрібен лише коли банер є (у робочій панелі його нема — без порожньої смуги) */
body.desktop-platform:not(:has(#beta-banner)) .app { padding-top: 0; }

/* ==================== Телефон: теми (фіолетова / синя / рубінова) доведено до кінця (2026-10-04) ====================
   Усе, що було захардкоджене під фіолетову (панель навігації, бульбашки чату, порожні стани), тепер бере колір активної теми.
   Лише телефон: вигляд ПК-тем не змінюється; екрани сплеша/техробіт навмисно мають фіксований брендовий вигляд. */
body:not(.desktop-platform) .bottom-nav {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), color-mix(in srgb, var(--accent) 3%, var(--bg)));
  border-color: color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.06));
}
body:not(.desktop-platform) .chat-msg .chat-bubble.from-user {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 50%, var(--accent-deep) 100%);
}
body:not(.desktop-platform) .queue-empty.qe2 {
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), rgba(255, 255, 255, 0.025);
}
body:not(.desktop-platform) .mt-emblem-ring { border-color: color-mix(in srgb, var(--accent-2) 40%, transparent); }
body:not(.desktop-platform) .mt-status, body:not(.desktop-platform) .splash-percent { color: var(--accent-2); }
/* Скляні поверхні телефону: рамка й підсвітка по краю в тон теми (раніше скрізь нейтрально-біла) */
body:not(.desktop-platform) .queue-panel, body:not(.desktop-platform) .qd-card.sel, body:not(.desktop-platform) .pin-bio {
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.08));
}
/* Плитки вибору теми в «Ще»: активна тема світиться власним кольором, а не однаковою рамкою */
body:not(.desktop-platform) #profile-theme-segmented .segment.active {
  border-color: var(--accent); box-shadow: 0 10px 26px -10px var(--accent-glow);
}


/* Журнал дій: кольорова крапка типу дії й рядок фільтрів (2026-10-04) */
.audit-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.audit-row .muted { line-height: 1.4; }


/* ===== Телефон: виправлення за скріншотами (2026-10-04) ===== */
/* 1) «Пігулка» нижньої навігації: позиція/ширина з JS (_syncNavPill) — працює й коли один із розділів прихований */
body:not(.desktop-platform) .bottom-nav::before {
  left: var(--pill-x, calc(6px + var(--nav-i) * ((100% - 12px) / 4)));
  width: var(--pill-w, calc((100% - 12px) / 4));
  transition: left 0.45s cubic-bezier(.32, 1.25, .5, 1), width 0.3s ease;
}
/* 2) Чат підтримки: кнопка мікрофона — така сама кругла, як «фото» й «надіслати»; підказка не обрізається */
.chat-composer .voice-btn, .chat-composer .icon-btn.voice-btn {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%; padding: 0; display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--hint);
}
.chat-composer .voice-btn.rec { color: #f87171; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.55); }
.chat-composer textarea { line-height: 1.35; min-height: 40px; }
.chat-composer textarea::placeholder { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==================== Тех-розділ → Підтримка: чат і швидкі відповіді (2026-10-04) ==================== */
/* Панель швидких відповідей: єдина поверхня замість чорного прямокутника під вкладками й обрізаного списку */
#dev-support-faq-picker.faq-tpl-list {
  --pk-bg: color-mix(in srgb, var(--bg-2) 88%, #fff 5%);
  padding: 8px 8px 12px; margin: 10px 0 12px; border-radius: 20px; max-height: 320px;
  background: var(--pk-bg); border: 1px solid rgba(255, 255, 255, 0.09);
  scrollbar-gutter: stable; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
}
#dev-support-faq-picker .faq-tpl-tabs {
  background: var(--pk-bg); padding: 2px 0 8px; margin: -2px 0 0; gap: 6px;
}
#dev-support-faq-picker .faq-tpl-tab { border-radius: 14px; min-height: 40px; }
#dev-support-faq-picker .faq-tpl { border-radius: 16px; }
/* Кнопки в рядку відповіді — однакові круглі 40px («?», мікрофон) */
.chat-composer #dev-support-faq-btn, .chat-composer .voice-btn {
  width: 40px !important; height: 40px !important; min-width: 40px; border-radius: 50%; padding: 0;
  display: inline-grid; place-items: center;
}
.chat-composer #dev-support-faq-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--hint); }


/* ==================== Реклама: календар і налаштування — виправлення та доробка (2026-10-04) ==================== */
/* ПК: календар ліворуч, список реклами вибраного дня праворуч (замість вузького календаря по центру з порожніми боками) */
body.desktop-platform [data-adspanel="calendar"].active {
  display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); column-gap: 24px; align-items: start;
}
body.desktop-platform [data-adspanel="calendar"] .ads-calendar-header { grid-column: 1; }
body.desktop-platform [data-adspanel="calendar"] .ads-calendar-grid { grid-column: 1; max-width: none; margin: 0; }
body.desktop-platform [data-adspanel="calendar"] #ads-calendar-day-list {
  grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; position: sticky; top: 12px; align-self: start; min-height: 140px;
}
.ads-calendar-month-label { text-transform: none; }
.ads-calendar-day { min-height: 42px; font-size: 14px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.ads-calendar-day:not(.is-empty):not(.has-ads) { color: color-mix(in srgb, var(--text) 70%, transparent); }
.ads-calendar-day.is-today { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); }
.ads-calendar-day.has-ads { border-color: rgba(255, 255, 255, 0.09); }
.ads-calendar-day-dots { bottom: 5px; gap: 4px; }
.ads-calendar-day-dot { width: 7px; height: 7px; }
@media (hover: hover) { .ads-calendar-day:not(.is-empty):not(.has-ads):hover { background: rgba(255, 255, 255, 0.04); } }

/* Налаштування реклами по каналах: без зрізаної смужки зліва (на скругленій картці вона виглядала як «серп»);
   стан показує плашка «Увімкнено/Вимкнено» + тонка кольорова рамка; на ПК — сітка у кілька колонок */
#ads-settings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
#ads-settings-list > .settings-card { margin: 0 !important; border-left-width: 1px !important; border-radius: 22px; }
#ads-settings-list > .settings-card.state-accent-on {
  border-color: color-mix(in srgb, #34d399 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px -18px rgba(52, 211, 153, 0.6);
}
#ads-settings-list > .settings-card.state-accent-off { border-color: rgba(255, 255, 255, 0.09); }
#ads-settings-list .settings-card-icon { border-radius: 14px; }


/* Власний випадний список (ПК) — замість системного <select> (2026-10-04) */
.cs-menu {
  position: fixed; z-index: 100040; max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 92%, #fff 5%); border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: ovIn 0.14s ease backwards; scrollbar-width: thin;
}
.cs-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px;
  background: none; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s ease;
}
.cs-opt:hover, .cs-opt.hl { background: rgba(255, 255, 255, 0.07); }
.cs-opt.sel { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cs-opt[disabled] { opacity: 0.4; cursor: default; }
.cs-opt svg { flex: none; }


/* Календар реклами (ПК) — друга редакція (2026-10-04): дві колонки лише коли місця справді вистачає, інакше список під календарем.
   Раніше вузька права колонка стискала картки реклами до літери в назві, а висока колонка розтягувала рядок із заголовком
   і між «вересень» і сіткою з'являлась порожня прогалина. */
body.desktop-platform [data-adspanel="calendar"].active { display: block; }
body.desktop-platform [data-adspanel="calendar"] .ads-calendar-grid { max-width: 640px; margin: 0 auto; }
body.desktop-platform [data-adspanel="calendar"] #ads-calendar-day-list { position: static; margin-top: 16px !important; min-height: 0; }
@media (min-width: 1180px) {
  body.desktop-platform [data-adspanel="calendar"].active {
    display: grid; grid-template-columns: minmax(360px, 520px) minmax(340px, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start;
  }
  body.desktop-platform [data-adspanel="calendar"] .ads-calendar-header { grid-column: 1; grid-row: 1; }
  body.desktop-platform [data-adspanel="calendar"] .ads-calendar-grid { grid-column: 1; grid-row: 2; max-width: none; margin: 0; align-self: start; }
  body.desktop-platform [data-adspanel="calendar"] #ads-calendar-day-list {
    grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; position: sticky; top: 12px; align-self: start; min-height: 140px;
  }
}


/* ==================== Реклама → «Біржа»: панель, картки, адаптація ПК/телефон (2026-10-04) ==================== */
.ads-dash { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ads-attn {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.05)); border: 1px solid rgba(245, 158, 11, 0.42);
}
.ads-attn.ok { background: linear-gradient(160deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.03)); border-color: rgba(34, 197, 94, 0.3); }
.ads-attn-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fbbf24; background: rgba(245, 158, 11, 0.18); }
.ads-attn.ok .ads-attn-ico { color: #4ade80; background: rgba(34, 197, 94, 0.18); }
.ads-attn-ico svg { width: 19px; height: 19px; }
.ads-attn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--hint); }
.ads-attn-body b { font-size: 14px; color: var(--text); }
.ads-attn.ok .ads-attn-body { color: color-mix(in srgb, var(--text) 80%, transparent); font-weight: 600; }
.ads-attn-btn { flex: none; padding: 9px 16px; border-radius: 14px; border: 0; font: inherit; font-size: 13px; font-weight: 800; color: #1a1200; background: #fbbf24; cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.ads-attn-btn:hover { filter: brightness(1.08); }
.ads-attn-btn:active { transform: scale(.96); }
.ads-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ads-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); }
.ads-kpi b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ads-kpi span { font-size: 11.5px; font-weight: 700; color: var(--hint); }
.ads-kpi.hot { border-color: rgba(245, 158, 11, 0.5); } .ads-kpi.hot b { color: #fbbf24; }
.ads-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ads-filter-empty { padding: 14px; border-radius: 16px; text-align: center; font-size: 13px; color: var(--hint); background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.12); }
.ads-filter-empty[hidden] { display: none; }

/* Картка оголошення: компактні чипи замість трьох великих плиток */
.ads-row-stats { display: none; }
.ads-row-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ads-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); font-size: 13px; }
.ads-chip i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7c7c92, #4a4a5e); }
.ads-chip i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.ads-chip i.ic-amt { background: linear-gradient(160deg, var(--accent), var(--accent-deep, var(--accent-2))); }
.ads-chip i.ic-ch { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.ads-chip.ok i { background: linear-gradient(160deg, #4ade80, #16a34a); }
.ads-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ads-chip small { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--hint); }
.settings-card.is-attention { border-color: rgba(245, 158, 11, 0.5) !important; box-shadow: 0 12px 28px -18px rgba(245, 158, 11, 0.7); }
.settings-card.has-dispute { border-color: rgba(239, 68, 68, 0.4) !important; }
.ads-sub-label { grid-column: 1 / -1; margin-top: 4px; }

/* Списки реклами: на ПК — сітка карток (стільки колонок, скільки влізає), на телефоні — одна колонка */
#ads-scheduled-list:not(.card-list), #ads-published-list:not(.card-list) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 12px; align-items: start; }
#ads-scheduled-list:not(.card-list) > .settings-card, #ads-published-list:not(.card-list) > .settings-card { margin: 0 !important; border-radius: 22px; }
@media (max-width: 600px) { .ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ads-attn { flex-wrap: wrap; } .ads-attn-btn { width: 100%; padding: 11px; } }

/* Біржа v3: лічильники на фільтрах, красиві порожні стани, ПК — список ліворуч + липка панель стану праворуч (2026-10-04) */
.ads-filters .qf-chip { display: inline-flex; align-items: center; gap: 8px; }
.ads-fc { font-style: normal; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hint); background: rgba(255, 255, 255, .08); }
.ads-filters .qf-chip.active .ads-fc { color: #fff; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.ads-filters .qf-chip.hot:not(.active) .ads-fc { color: #1a1200; background: #fbbf24; }
#ads-scheduled-list.card-list > .card-row.muted, #ads-published-list.card-list > .card-row.muted {
  padding: 26px 18px; text-align: center; font-size: 13.5px; font-weight: 600; border-radius: 20px;
  background: rgba(255, 255, 255, .025); border: 1px dashed rgba(255, 255, 255, .14);
}
#ads-scheduled-list.card-list > .card-row.muted::before, #ads-published-list.card-list > .card-row.muted::before {
  content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 10px; background: color-mix(in srgb, var(--accent) 75%, #fff 10%); opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
#ads-published-list.card-list > .card-row.muted::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a2 2 0 0 0 2 2h1l3 5V4L6 9H5a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M15 8a4 4 0 0 1 0 8M18 5a8 8 0 0 1 0 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a2 2 0 0 0 2 2h1l3 5V4L6 9H5a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M15 8a4 4 0 0 1 0 8M18 5a8 8 0 0 1 0 14'/%3E%3C/svg%3E");
}

@media (min-width: 1000px) {
  body.desktop-platform #tab-ads .modal-tab-panel.active[data-adspanel="list"] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 26px; align-items: start; }
  body.desktop-platform #tab-ads [data-adspanel="list"] > * { grid-column: 1; min-width: 0; }
  body.desktop-platform #tab-ads [data-adspanel="list"] > .ads-dash {
    grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 16px; margin: 0; gap: 14px; padding: 16px; border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid var(--card-border);
    box-shadow: 0 22px 50px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  body.desktop-platform #tab-ads [data-adspanel="list"] > .section-label:first-of-type { margin-top: 0; }
  body.desktop-platform .ads-dash .ads-attn { flex-wrap: wrap; }
  body.desktop-platform .ads-dash .ads-attn-btn { width: 100%; padding: 11px; }
  body.desktop-platform .ads-dash .ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.desktop-platform .ads-dash .ads-kpi { padding: 14px 16px; border-radius: 20px; }
  body.desktop-platform .ads-dash .ads-kpi b { font-size: 28px; }
  body.desktop-platform .ads-dash .ads-filters { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
  body.desktop-platform .ads-dash .ads-filters .qf-chip { width: 100%; justify-content: space-between; border-radius: 14px; padding: 10px 14px; text-align: left; }
  body.desktop-platform #ads-scheduled-list:not(.card-list), body.desktop-platform #ads-published-list:not(.card-list) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
  /* Верхня картка «заплановано зараз» дублює плитку в панелі — на ПК робимо її тонкою смугою */
  body.desktop-platform #tab-ads .ads-hero-card { padding-top: 12px; padding-bottom: 12px; }
  body.desktop-platform #tab-ads .ads-hero-value { font-size: 26px; }
}


/* Тех-підтримка: нове звернення/повідомлення підсвічується, доки його не відкрито (2026-10-04) */
#dev-support-list [data-ticket-id].has-new { position: relative; background: color-mix(in srgb, var(--accent) 10%, transparent); }
#dev-support-list [data-ticket-id].has-new::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 0 0 var(--accent-glow); animation: devNewPulse 1.6s ease-out infinite;
}
@keyframes devNewPulse { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { #dev-support-list [data-ticket-id].has-new::after { animation: none; } }

/* ===== Банер «Публікується…»: фінальні правила В КІНЦІ файлу (раніше блок v2 стояв раніше за «iPhone-блок» і програвав йому за порядком: іконка лишалась квадратом із кільцем-колом) ===== */
.pub-banner .pub-banner-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; }
.pub-banner .pub-banner-icon::before { inset: -5px; border-radius: 50%; }
.pub-banner .pub-banner-icon svg { width: 20px; height: 20px; }
.pub-banner.done .pub-banner-icon::before { border-radius: 50%; }
.pub-banner .pub-banner-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.pub-banner .pub-banner-thumb { border-radius: 14px; }

/* ===== Блоки, перенесені в кінець файлу, щоб не програвати за порядком більш пізнім правилам (2026-10-05) ===== */
/* «Швидка публікація» — перероблена картка (2026-10-04): іконка · текст · кнопка в один ряд,
   смужка-відлік вздовж нижнього краю картки; на вузьких екранах кнопка йде під текст на всю ширину. */
#home-dash-quick-publish.qp2 {
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 12px;
  padding: 16px 18px 19px; border-radius: 22px; margin-bottom: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--card-border));
  box-shadow: 0 18px 40px -22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: qp2In .5s cubic-bezier(.2,1,.3,1) both;
}
#home-dash-quick-publish.qp2::before { display: none; }
@keyframes qp2In { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.qp2-icon { position: relative; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -6px var(--accent-glow); }
.qp2-icon::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff 10%); pointer-events: none; animation: qp2Ring 2.2s ease-out .3s infinite; }
@keyframes qp2Ring { 0% { opacity: .75; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.qp2-icon svg { width: 24px; height: 24px; animation: qp2Float 2.6s ease-in-out infinite; }
@keyframes qp2Float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -2.5px); } }
.qp2-body { min-width: 0; }
.qp2-eyebrow { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.qp2-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dlgDot 1.6s ease-out infinite; }
.qp2-eyebrow b { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--hint); background: rgba(255, 255, 255, .08); }
.qp2-title { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qp2-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none; min-height: 50px; padding: 0 24px; border: 0; border-radius: 16px;
  font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 50%, var(--accent-deep, var(--accent)));
  box-shadow: 0 14px 28px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.qp2-btn svg { width: 20px; height: 20px; transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.qp2-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); animation: dlgShine 3.4s ease-in-out 1.2s infinite; }
.qp2-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.qp2-btn:hover:not(:disabled) svg { transform: translate(3px, -3px) rotate(8deg); }
.qp2-btn:active:not(:disabled) { transform: scale(.97); }
.qp2-btn:disabled { opacity: .6; cursor: progress; }
.qp2-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qp2-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.qp2-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); border-radius: 0 999px 999px 0; }
.qp2-timer-fill.counting { animation: quickPublishCountdown 10s linear forwards; }
@media (max-width: 640px) {
  #home-dash-quick-publish.qp2 { grid-template-columns: auto minmax(0, 1fr); padding: 14px 14px 18px; }
  .qp2-btn { grid-column: 1 / -1; width: 100%; min-height: 48px; }
  .qp2-icon { width: 42px; height: 42px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #home-dash-quick-publish.qp2, .qp2-icon::after, .qp2-icon svg, .qp2-eyebrow i, .qp2-btn::after { animation: none; }
}

/* Картка успіху «Опубліковано» (2026-10-04) */
.modal-overlay.pb-overlay { background: radial-gradient(55% 45% at 50% 52%, rgba(52, 211, 153, 0.2), transparent 70%), rgba(5, 4, 10, 0.62); cursor: pointer; }
.modal-sheet.ios-alert.pb-card { display: block; text-align: center; width: min(340px, 100%); padding: 28px 22px 22px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 70px -18px rgba(52, 211, 153, .5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.modal-sheet.ios-alert.pb-card::before { background: linear-gradient(90deg, transparent, #34d399, transparent); }
.pb-badge { position: relative; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 14px 34px -8px rgba(16, 185, 129, .65), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: pbPop .55s cubic-bezier(.3,1.6,.5,1) both; }
.pb-badge svg { width: 34px; height: 34px; overflow: visible; }
.pb-tick { stroke-dasharray: 26; stroke-dashoffset: 26; animation: pbDraw .45s cubic-bezier(.5,0,.2,1) .28s forwards; }
.pb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .75); pointer-events: none; animation: pbRing .9s ease-out .2s both; }
.pb-sparks { position: absolute; inset: 0; pointer-events: none; }
.pb-sparks i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #6ee7b7; opacity: 0;
  animation: pbSpark .7s cubic-bezier(.2,.8,.3,1) .3s both; }
.pb-sparks i:nth-child(3n) { background: #fde68a; width: 5px; height: 5px; }
.pb-sparks i:nth-child(3n+1) { background: #fff; width: 4px; height: 4px; }
@keyframes pbPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes pbDraw { to { stroke-dashoffset: 0; } }
@keyframes pbRing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes pbSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3); } }
.pb-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fff; animation: dlgWord .45s cubic-bezier(.2,.9,.3,1) .22s both; }
.pb-chs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.pb-ch { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #6ee7b7; background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .32);
  animation: dlgWord .4s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(.4s + var(--i, 0) * 70ms); }
.pb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .07); }
.pb-bar span { display: block; height: 100%; background: linear-gradient(90deg, #059669, #34d399); animation: quickPublishCountdown 2.6s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .pb-badge, .pb-ring, .pb-sparks i, .pb-title, .pb-ch { animation: none; }
  .pb-tick { animation: none; stroke-dashoffset: 0; }
}

/* Картка успіху v2: літачок прилітає — галочка, час, рядки каналів з відмітками */
.modal-sheet.ios-alert.pb-card { width: min(380px, 100%); padding: 22px 22px 24px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(52, 211, 153, .22), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 50%), var(--card, #14111f); }
.pb-sky { position: relative; height: 84px; display: grid; place-items: center; margin-bottom: 10px; }
.pb-sky .pb-badge { margin: 0; animation-delay: .5s; }
.pb-sky .pb-ring { animation-delay: .55s; }
.pb-sky .pb-sparks i { animation-delay: .6s; }
.pb-sky .pb-tick { animation-delay: .72s; }
.pb-plane { position: absolute; left: 0; top: 0; width: 26px; height: 26px; color: #6ee7b7; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 8px rgba(52, 211, 153, .7)); animation: pbFly .62s cubic-bezier(.4,0,.6,1) .02s both; }
@keyframes pbFly {
  0%   { opacity: 0; left: 4%;  top: 84%; transform: translate(-50%, -50%) rotate(8deg) scale(.7); }
  15%  { opacity: 1; }
  35%  { left: 20%; top: 40%; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  65%  { left: 36%; top: 18%; transform: translate(-50%, -50%) rotate(8deg) scale(.95); }
  100% { opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(30deg) scale(.4); }
}
.pb-title { font-size: 25px; letter-spacing: -0.025em; background: linear-gradient(180deg, #fff 35%, #a7f3d0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation-delay: .62s; }
.pb-time { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; animation: dlgWord .4s cubic-bezier(.2,.9,.3,1) .72s both; }
.pb-time svg { width: 14px; height: 14px; }
.pb-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; text-align: left; }
.pb-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
  animation: dlgWord .4s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(.85s + var(--i, 0) * 110ms); }
.pb-av { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, hsl(var(--h) 62% 48%), hsl(calc(var(--h) + 30) 60% 34%)); }
.pb-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-ok { flex: none; width: 20px; height: 20px; padding: 3px; box-sizing: border-box; border-radius: 50%; color: #052e22; background: #34d399; overflow: visible;
  stroke-dasharray: 26; stroke-dashoffset: 26; animation: pbDraw .35s ease-out both; animation-delay: calc(1.05s + var(--i, 0) * 110ms); }
.pb-ok { stroke-dasharray: none; stroke-dashoffset: 0; animation: pbOk .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(1.0s + var(--i, 0) * 110ms); }
@keyframes pbOk { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.pb-more { align-self: flex-start; margin: 2px 0 0 8px; font-size: 12.5px; font-weight: 800; color: #6ee7b7; }
@media (prefers-reduced-motion: reduce) { .pb-plane { display: none; } .pb-time, .pb-row, .pb-ok { animation: none; } }

/* Бейдж-лічильник нових новин (2026-10-04): колір із теми, стрибок при зміні, кільце на новому, червоний — коли є термінові */
.nbadge {
  position: absolute; z-index: 3; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  display: grid; place-items: center; pointer-events: none; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent)));
  box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 6px 14px -3px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: nbPop .5s cubic-bezier(.3, 1.7, .5, 1) both;
}
.nbadge.hot { background: linear-gradient(145deg, #fb7185, #ef4444 55%, #b91c1c); box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 6px 16px -3px rgba(239, 68, 68, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
.nbadge.bump { animation: nbBump .46s cubic-bezier(.3, 1.8, .5, 1) both; }
.nbadge.out { animation: nbOut .26s ease-in both; }
.nb-num { display: block; overflow: hidden; }
.nb-num.roll { animation: nbRoll .34s cubic-bezier(.2, .9, .3, 1) both; }
.nb-ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent-2, var(--accent)); opacity: 0; pointer-events: none; }
.nbadge.hot .nb-ring { border-color: #fb7185; }
.nbadge.fresh .nb-ring { animation: nbRing 1.35s ease-out infinite; }
@keyframes nbPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes nbBump { 0% { transform: scale(1); } 40% { transform: scale(1.38); } 100% { transform: scale(1); } }
@keyframes nbOut { to { opacity: 0; transform: scale(.2); } }
@keyframes nbRoll { from { opacity: 0; transform: translateY(80%); } to { opacity: 1; transform: none; } }
@keyframes nbRing { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
/* Нижня навігація (телефон): кутик іконки */
.nav-btn > .nbadge { top: 3px; left: calc(50% + 6px); }
/* ПК-сайдбар: у кінці рядка; у згорнутому — кутик іконки */
body.desktop-platform .nav-btn > .nbadge { top: 50%; margin-top: -10px; left: auto; right: 14px; }
body.desktop-platform.sidebar-collapsed .nav-btn > .nbadge { top: 5px; margin-top: 0; right: 7px; min-width: 18px; height: 18px; font-size: 10.5px; }
/* Сегмент «Публікації»: вбудований праворуч від підпису */
.segment > .nbadge { position: relative; flex: none; margin-left: 7px; min-width: 19px; height: 19px; font-size: 11px; box-shadow: 0 0 0 0 transparent, 0 4px 10px -3px var(--accent-glow); }
.segment > .nbadge.hot { box-shadow: 0 4px 10px -3px rgba(239, 68, 68, .6); }
/* На активному (акцентному) фоні — світлий бейдж, щоб не зливався */
.segment.active > .nbadge:not(.hot), body.desktop-platform .nav-btn.active > .nbadge:not(.hot) { color: var(--accent-deep, var(--accent)); background: #fff; box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 6px 14px -3px rgba(0, 0, 0, .4); }
.segment.active > .nbadge:not(.hot) { box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .nbadge, .nbadge.bump, .nb-num.roll { animation: none; } .nbadge.fresh .nb-ring { animation: none; } }

/* ==================== Профіль + Сповіщення: нові дизайни (2026-10-04) ==================== */
/* --- Профіль: обкладинка-аврора, велике фото по центру з кільцем, центровані статус і дії --- */
.pc-sheet { width: min(480px, calc(100% - 32px)); padding: 0 0 20px; overflow: hidden; }
.pc-sheet > * { margin-left: 22px; margin-right: 22px; }
.pc-sheet > .pc-head { position: absolute; z-index: 5; top: 14px; left: 0; right: 0; margin: 0 14px 0 22px; font-size: 0; }
.pc-sheet > .pc-head > span { display: none; }
.pc-sheet > .pc-head .modal-close { margin-left: auto; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pc-sheet > .pc-hero { margin: 0; border: 0; border-radius: 0; padding: 70px 22px 18px; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px;
  background:
    radial-gradient(70% 90% at 20% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(60% 80% at 90% 10%, color-mix(in srgb, var(--accent-2, var(--accent)) 38%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }
.pc-sheet > .pc-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.2px); background-size: 14px 14px; -webkit-mask: linear-gradient(180deg, #000, transparent 75%); mask: linear-gradient(180deg, #000, transparent 75%); }
.pc-sheet > .pc-hero.drag { background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 75%); }
.pc-hero .pc-avatar { position: relative; width: 108px; height: 108px; grid-row: auto; z-index: 1;
  box-shadow: 0 0 0 4px var(--bg, #0a0713), 0 0 0 6px var(--accent), 0 22px 44px -12px var(--accent-glow); animation: pcRing 3.2s ease-in-out infinite; }
.pc-hero .pc-avatar:hover { box-shadow: 0 0 0 4px var(--bg, #0a0713), 0 0 0 7px var(--accent-2, var(--accent)), 0 26px 50px -10px var(--accent-glow); }
@keyframes pcRing { 0%, 100% { box-shadow: 0 0 0 4px var(--bg, #0a0713), 0 0 0 6px var(--accent), 0 22px 44px -14px var(--accent-glow); } 50% { box-shadow: 0 0 0 4px var(--bg, #0a0713), 0 0 0 6px var(--accent), 0 26px 56px -8px var(--accent-glow); } }
.pc-cam { z-index: 2; left: calc(50% + 24px); top: 138px; width: 34px; height: 34px; box-shadow: 0 8px 18px -4px var(--accent-glow); }
.pc-hero .pc-hero-info { align-items: center; gap: 8px; margin-top: 6px; }
.pc-hero .pc-hero-name { font-size: 22px; letter-spacing: -0.025em; }
.pc-hero .pc-hint { max-width: 300px; }
.pc-hero .pc-avatar-actions { grid-column: 1; justify-content: center; margin-top: 4px; }
.pc-sheet .pc-label { display: flex; align-items: center; gap: 8px; margin: 20px 22px 8px; }
.pc-sheet .pc-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-border), transparent); }
.pc-sheet .pc-input { border-radius: 16px; padding-top: 13px; padding-bottom: 13px; font-weight: 600; transition: border-color .15s ease, box-shadow .15s ease; }
.pc-sheet .pc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pc-sheet .pc-chips { gap: 8px; }
.pc-sheet .pc-chips .footer-chip { border-radius: 999px; padding: 8px 14px; font-weight: 700; transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.pc-sheet .pc-chips .footer-chip:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-1px); }
.pc-sheet .pc-swatch { position: relative; width: 34px; height: 34px; border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 14px -5px currentColor; }
.pc-sheet .pc-swatch.active { box-shadow: 0 0 0 3px var(--bg, #0a0713), 0 0 0 5px #fff; transform: scale(1.1); }
.pc-sheet .pc-swatch.active::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); width: 13px; height: 7px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.pc-sheet > .pc-foot { margin: 20px 22px 0; }
.pc-sheet .pc-foot .pill.on { padding: 11px 26px; border-radius: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 12px 24px -10px var(--accent-glow); }
@media (max-width: 520px) { .pc-sheet { padding-bottom: 16px; } .pc-sheet > .pc-hero { padding-top: 62px; } .pc-cam { top: 130px; } }
@media (prefers-reduced-motion: reduce) { .pc-hero .pc-avatar { animation: none; } }

/* --- Сповіщення: шкала активних, великі «живі» плитки (вимкнені — приглушені), новий перемикач, каскад появи --- */
.notify-sheet { padding: 12px 16px 24px; }
.notify-sheet .notify-title { font-size: 28px; }
.notify-sheet .notify-all-btn { border-radius: 999px; padding: 8px 14px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.notify-meter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 12px 4px 2px; }
.notify-meter i { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.notify-meter i.on { background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); box-shadow: 0 0 10px var(--accent-glow); transform: scaleY(1.25); }
.notify-sheet .notify-group-label { display: flex; align-items: center; gap: 8px; margin: 22px 6px 8px; }
.notify-sheet .notify-group-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.notify-sheet .notify-group { display: flex; flex-direction: column; gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
.notify-sheet .notify-row { gap: 14px; padding: 14px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease; animation: nfIn .45s cubic-bezier(.2, .9, .3, 1) both; }
.notify-sheet .notify-row + .notify-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.notify-sheet .notify-row.is-on { border-color: color-mix(in srgb, var(--accent) 34%, rgba(255, 255, 255, .08)); box-shadow: 0 14px 30px -22px var(--accent-glow); }
.notify-sheet .notify-row:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)); }
.notify-sheet .notify-row:active { transform: scale(.985); }
.notify-sheet .notify-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notify-sheet .notify-ico { width: 44px; height: 44px; border-radius: 15px; transition: filter .25s ease, opacity .25s ease, transform .35s cubic-bezier(.3, 1.7, .5, 1), box-shadow .25s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -8px var(--c2); }
.notify-sheet .notify-ico svg { width: 22px; height: 22px; }
.notify-sheet .notify-row:not(.is-on) .notify-ico { filter: grayscale(.9) brightness(.8); opacity: .55; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.notify-sheet .notify-row.is-on .notify-ico { transform: scale(1.04); }
.notify-sheet .notify-row-title { font-size: 15.5px; transition: color .2s ease; }
.notify-sheet .notify-row:not(.is-on) .notify-row-title { color: color-mix(in srgb, var(--text) 62%, transparent); }
.notify-sheet .notify-row-desc { font-size: 12.5px; }
.notify-sheet .ios-switch { width: 54px; height: 32px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .25s ease, box-shadow .25s ease; }
.notify-sheet .ios-switch::after { top: 3px; left: 3px; width: 26px; height: 26px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.notify-sheet .ios-switch.on { background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 0 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); }
.notify-sheet .ios-switch.on::after { transform: translateX(22px); }
.notify-sheet .notify-row:active .ios-switch::after { width: 32px; }
.notify-sheet .notify-row:active .ios-switch.on::after { transform: translateX(16px); }
.notify-sheet .notify-foot { display: flex; align-items: flex-start; gap: 9px; margin: 18px 4px 0; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px dashed rgba(255, 255, 255, .14); }
.notify-sheet .notify-foot::before { content: "i"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; font-style: italic; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
@keyframes nfIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.notify-sheet .notify-group:nth-of-type(1) .notify-row:nth-child(1) { animation-delay: .04s; }
.notify-sheet .notify-group .notify-row:nth-child(2) { animation-delay: .1s; }
.notify-sheet .notify-group:nth-of-type(2) .notify-row:nth-child(1) { animation-delay: .12s; }
.notify-sheet .notify-group:nth-of-type(3) .notify-row:nth-child(1) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .notify-sheet .notify-row { animation: none; } .notify-meter i, .notify-sheet .notify-ico { transition: none; } }

/* Діалог підтвердження «з заголовком» (перевірка перед публікацією тощо): той самий стиль, що й небезпечний, у кольорах теми */
.modal-sheet.ios-alert { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px -22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.modal-sheet.ios-alert.is-danger { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px -18px rgba(244, 63, 94, .45), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-icon { grid-row: 1 / span 3; align-self: start; width: 54px; height: 54px; border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-2, var(--accent)) 38%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 70%); }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-icon::after { content: ""; position: absolute; inset: -1px; border-radius: 18px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff 10%); animation: dlgPulse 2.2s ease-out .35s infinite; }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-eyebrow { grid-row: 1; align-self: end; }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-title { grid-row: 2; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 8px; animation: dlgWord .45s cubic-bezier(.2,.9,.3,1) .12s both; }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-message { grid-row: 3; }
.modal-sheet.ios-alert.has-eyebrow .confirm-dialog-actions { grid-row: 4; }
.confirm-dialog-eyebrow.is-soft { color: var(--accent-2, var(--accent)); }
.confirm-dialog-eyebrow.is-soft i { background: currentColor; animation: nfDot 1.6s ease-out infinite; }
@keyframes nfDot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.dlg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dlg-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.42; font-weight: 600; color: color-mix(in srgb, var(--text) 88%, transparent); text-align: left;
  animation: dlgWord .42s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(.28s + var(--i, 0) * 90ms); }
.dlg-li-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 0 10px var(--accent-glow); }
.modal-sheet.ios-alert .confirm-dialog-message.has-list { color: inherit; font-weight: 600; }
.modal-sheet.ios-alert:not(.is-danger) .confirm-dialog-actions .pill:last-child { position: relative; overflow: hidden; flex: 1 1 auto; white-space: nowrap; }
.modal-sheet.ios-alert:not(.is-danger) .confirm-dialog-actions .pill:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26), transparent); animation: dlgShine 3.4s ease-in-out 1.2s infinite; }
.modal-sheet.ios-alert:not(.is-danger) .confirm-dialog-actions .pill:first-child { flex: 0 0 auto; padding: 0 22px; }
@media (max-width: 380px) { .modal-sheet.ios-alert:not(.is-danger) .confirm-dialog-actions .pill:last-child { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .modal-sheet.ios-alert.has-eyebrow .confirm-dialog-icon::after, .confirm-dialog-eyebrow.is-soft i, .dlg-list li, .modal-sheet.ios-alert:not(.is-danger) .confirm-dialog-actions .pill:last-child::after { animation: none; } }

/* Сайдбар під 4K / великі екрани: рівномірно збільшуємо лише сайдбар (--sbk з JS: initSidebarFit), колонка росте разом із ним */
body.desktop-platform.sb-k .bottom-nav { zoom: var(--sbk); }
body.desktop-platform.sb-k:not(.sidebar-collapsed) .app { grid-template-columns: calc(292px * var(--sbk)) 1fr; }
body.desktop-platform.sb-k.sidebar-collapsed .app { grid-template-columns: calc(72px * var(--sbk)) 1fr; }
body.desktop-platform.sb-k.sidebar-style-modern .bottom-nav,
body.desktop-platform.sb-k.sidebar-style-modern.sidebar-collapsed .bottom-nav { margin-top: calc(-20px / var(--sbk)); }
/* Бейдж-лічильник у збільшеному сайдбарі лишається пропорційним */
body.desktop-platform.sb-k .nav-btn > .nbadge { right: 12px; }

/* Бейдж-лічильник v2 (2026-10-05): «скляна» таблетка з обертовим конічним кільцем у кольорах ТЕМИ (без червоного);
   термінові — те саме, але кільце крутиться швидше + яскрава іскра по краю. Стрибок/кільце-хвиля/прокрутка цифри — як раніше. */
@property --nb-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.nbadge {
  --nb-fill: color-mix(in srgb, var(--accent-deep, var(--accent)) 58%, #0a0713);
  box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid transparent; border-radius: 999px;
  color: #fff; font-size: 11.5px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background:
    linear-gradient(var(--nb-fill), var(--nb-fill)) padding-box,
    conic-gradient(from var(--nb-a), var(--accent-2, var(--accent)), var(--accent-deep, var(--accent)) 35%, var(--accent) 60%, #fff 78%, var(--accent-2, var(--accent))) border-box;
  box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 0 14px var(--accent-glow), 0 6px 14px -4px var(--accent-glow);
  animation: nbPop2 .6s cubic-bezier(.3, 1.7, .5, 1) both, nbSpin 3.6s linear infinite, nbBreath 2.8s ease-in-out .6s infinite;
}
.nbadge.hot {
  --nb-fill: color-mix(in srgb, var(--accent) 70%, #0a0713);
  background:
    linear-gradient(var(--nb-fill), var(--nb-fill)) padding-box,
    conic-gradient(from var(--nb-a), #fff, var(--accent-2, var(--accent)) 25%, var(--accent-deep, var(--accent)) 55%, var(--accent-2, var(--accent)) 80%, #fff) border-box;
  box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 0 18px var(--accent-glow), 0 8px 18px -4px var(--accent-glow);
  animation: nbPop2 .6s cubic-bezier(.3, 1.7, .5, 1) both, nbSpin 1.3s linear infinite, nbBreath 1.4s ease-in-out .6s infinite;
}
.nbadge.hot::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; pointer-events: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px #fff; animation: nbSpark 1.4s ease-in-out infinite; }
.nbadge.hot .nb-ring { border-color: var(--accent-2, var(--accent)); }
.nbadge.bump { animation: nbBump2 .5s cubic-bezier(.3, 1.8, .5, 1) both, nbSpin 3.6s linear infinite; }
.nbadge.hot.bump { animation: nbBump2 .5s cubic-bezier(.3, 1.8, .5, 1) both, nbSpin 1.3s linear infinite; }
.nbadge.out { animation: nbOut .26s ease-in both; }
@keyframes nbSpin { to { --nb-a: 360deg; } }
@keyframes nbPop2 { 0% { opacity: 0; transform: scale(.2) rotate(-50deg); } 100% { opacity: 1; transform: none; } }
@keyframes nbBump2 { 0% { transform: scale(1); } 35% { transform: scale(1.42) rotate(-8deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1); } }
@keyframes nbBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
@keyframes nbSpark { 0%, 100% { transform: scale(.7); opacity: .75; } 50% { transform: scale(1.25); opacity: 1; } }
/* На акцентному (активному) фоні — світла заливка, щоб таблетка не зливалась */
.segment.active > .nbadge, body.desktop-platform .nav-btn.active > .nbadge { --nb-fill: #fff; color: var(--accent-deep, var(--accent)); text-shadow: none; }
.segment.active > .nbadge:not(.hot), body.desktop-platform .nav-btn.active > .nbadge:not(.hot) { box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 6px 14px -3px rgba(0, 0, 0, .4); }
.segment > .nbadge { min-width: 21px; height: 21px; }
body.desktop-platform.sidebar-collapsed .nav-btn > .nbadge { min-width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) { .nbadge, .nbadge.hot, .nbadge.bump, .nbadge.hot.bump { animation: none; } .nbadge.hot::after { animation: none; } }

/* Бейдж-лічильник v3 (2026-10-05): мінімалізм — однотонна пілюля кольору теми, без кілець і іскор; мʼяка пульсація (хвиля + «дихання» цифри) */
.nbadge, .nbadge.hot {
  min-width: 20px; height: 20px; padding: 0 6px; border: 0; border-radius: 999px; color: #fff; font-size: 11.5px; font-weight: 800; text-shadow: none;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg, #0a0713);
  animation: nbPop3 .45s cubic-bezier(.3, 1.6, .5, 1) both; filter: none;
}
.nbadge.hot::after { display: none; }
.nbadge.bump, .nbadge.hot.bump { animation: nbBump3 .42s cubic-bezier(.3, 1.8, .5, 1) both; }
.nbadge.out { animation: nbOut .24s ease-in both; }
.nbadge .nb-ring, .nbadge.hot .nb-ring { inset: 0; border: 0; background: var(--accent); opacity: 0; z-index: -1; animation: nbWave 2.6s ease-out infinite; }
.nbadge.hot .nb-ring { animation-duration: 1.3s; }
.nbadge.fresh .nb-ring { animation: nbWave 1.3s ease-out infinite; }
.nbadge .nb-num { animation: nbBreath3 2.6s ease-in-out infinite; }
.nbadge.hot .nb-num { animation-duration: 1.3s; }
.nbadge .nb-num.roll { animation: nbRoll .3s cubic-bezier(.2, .9, .3, 1) both, nbBreath3 2.6s ease-in-out .3s infinite; }
@keyframes nbPop3 { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes nbBump3 { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes nbWave { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes nbBreath3 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* На акцентному (активному) фоні — світла пілюля з цифрою кольору теми */
.segment.active > .nbadge, body.desktop-platform .nav-btn.active > .nbadge { background: #fff; color: var(--accent-deep, var(--accent)); box-shadow: 0 0 0 2px var(--accent); }
.segment.active > .nbadge .nb-ring, body.desktop-platform .nav-btn.active > .nbadge .nb-ring { background: #fff; }
.segment > .nbadge { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .nbadge, .nbadge.hot, .nbadge.bump, .nbadge .nb-ring, .nbadge .nb-num, .nbadge .nb-num.roll { animation: none; } }

/* Редактор → «Канали»: плитки-картки з кружком вибору замість пілюль; лічильник «обрано/усього», Всі/Жодного — парою (2026-10-05) */
#editor-channel-card .editor-section-label-row { align-items: center; }
#editor-channel-card .chip-actions-row { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
#editor-channel-card .chip-action-btn { border: 0; background: none; border-radius: 11px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; color: var(--hint); transition: background .15s ease, color .15s ease; }
#editor-channel-card .chip-action-btn:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
#editor-channel-card .chip-action-btn:active { transform: scale(.96); }
.ed-ch-count { min-width: 38px; margin: 0 4px 0 6px; padding: 3px 9px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hint); background: rgba(255, 255, 255, .07); transition: color .2s ease, background .2s ease; }
.ed-ch-count.on { color: #fff; background: var(--accent); }
#editor-channel-multiselect.channel-multiselect { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; max-height: 264px; padding: 3px; margin-bottom: 16px; }
#editor-channel-multiselect .channel-chip { position: relative; min-width: 0; gap: 11px; padding: 10px 12px 10px 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .09); box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; }
#editor-channel-multiselect .channel-chip:active { transform: scale(.97); }
#editor-channel-multiselect .channel-chip.checked { box-shadow: 0 14px 28px -18px var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
#editor-channel-multiselect .channel-chip-avatar { width: 38px; height: 38px; border-radius: 13px; transition: filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
#editor-channel-multiselect .channel-chip:not(.checked) .channel-chip-avatar { filter: grayscale(.8); opacity: .62; }
#editor-channel-multiselect .channel-chip.checked .channel-chip-avatar { transform: scale(1.04); }
#editor-channel-multiselect .channel-chip > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); transition: color .2s ease; }
#editor-channel-multiselect .channel-chip:not(.checked) > span:nth-child(2) { color: color-mix(in srgb, var(--text) 66%, transparent); }
#editor-channel-multiselect .channel-chip-check { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); box-sizing: border-box;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
#editor-channel-multiselect .channel-chip.checked .channel-chip-check { border-color: transparent; box-shadow: 0 6px 14px -4px var(--accent-glow);
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); animation: edChPop .38s cubic-bezier(.3, 1.8, .5, 1); }
#editor-channel-multiselect .channel-chip-check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3; }
@keyframes edChPop { from { transform: scale(.4); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #editor-channel-multiselect .channel-chip.checked .channel-chip-check { animation: none; } }

/* Галочка вибору каналу v2: крупніша, з ореолом; малюється штрихом і дає хвилю лише на щойно натиснутому каналі */
#editor-channel-multiselect .channel-chip-check { position: relative; width: 28px; height: 28px; border-width: 2px; border-color: rgba(255, 255, 255, .24); }
#editor-channel-multiselect .channel-chip:not(.checked):hover .channel-chip-check { border-color: color-mix(in srgb, var(--accent) 70%, #fff 10%); }
#editor-channel-multiselect .channel-chip.checked .channel-chip-check {
  animation: none; border-color: transparent;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent)));
  background-origin: border-box; background-clip: border-box; /* без этого градиент под прозрачной рамкой «повторялся» и давал шов-прямоугольник внутри кружка */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), 0 8px 16px -5px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .4);
}
#editor-channel-multiselect .channel-chip-check svg { width: 15px; height: 15px; stroke-width: 3.2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); overflow: visible; }
#editor-channel-multiselect .channel-chip-check svg path, #editor-channel-multiselect .channel-chip-check svg polyline { stroke-linecap: round; stroke-linejoin: round; }
#editor-channel-multiselect .channel-chip.just .channel-chip-check { animation: edChPop2 .42s cubic-bezier(.3, 1.8, .5, 1) both; }
#editor-channel-multiselect .channel-chip.just .channel-chip-check svg path, #editor-channel-multiselect .channel-chip.just .channel-chip-check svg polyline { stroke-dasharray: 26; stroke-dashoffset: 26; animation: edChDraw .34s cubic-bezier(.5, 0, .2, 1) .1s forwards; }
#editor-channel-multiselect .channel-chip.just .channel-chip-check::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent-2, var(--accent)); pointer-events: none; animation: edChRipple .6s ease-out .05s both; }
@keyframes edChPop2 { 0% { transform: scale(.55); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes edChDraw { to { stroke-dashoffset: 0; } }
@keyframes edChRipple { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { #editor-channel-multiselect .channel-chip.just .channel-chip-check, #editor-channel-multiselect .channel-chip.just .channel-chip-check::after { animation: none; } #editor-channel-multiselect .channel-chip.just .channel-chip-check svg path, #editor-channel-multiselect .channel-chip.just .channel-chip-check svg polyline { animation: none; stroke-dashoffset: 0; } }

/* Позначка джерела в рядку картки черги: іконка за типом + назва; «Переслано» — з чіпом */
.q-src { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; min-width: 0; }
.q-src-ico { flex: none; width: 14px; height: 14px; opacity: .75; }
.q-src-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 17em; }
.q-src-forwarded { color: var(--text); }
.q-src-forwarded .q-src-ico { color: var(--accent-2, var(--accent)); opacity: 1; }
.q-fwd-chip { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
  color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.q-src-editorial_chat .q-src-ico { color: #fbbf24; opacity: 1; }
.q-src-manual .q-src-ico { color: var(--accent-2, var(--accent)); opacity: .9; }

/* Банер «Публікується… / Готово» v2 (2026-10-05): тёмна «капсула», іконка-кругляк із кільцем, що крутиться (готово — зелене кільце і галочка, що малюється),
   заголовок із ковзним блиском, смужка прогресу з відблиском; у кольорах теми */
.pub-banner {
  min-width: 300px; padding: 12px 14px 14px; column-gap: 13px; row-gap: 12px; border-radius: 30px; align-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, rgba(14, 12, 22, .88)), rgba(14, 12, 22, .92));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255, 255, 255, .1));
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .75), 0 0 46px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.2, .3, 1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
.pub-banner.done {
  background: linear-gradient(180deg, rgba(16, 185, 129, .2), rgba(14, 12, 22, .92));
  border-color: rgba(52, 211, 153, .55);
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .75), 0 0 46px -12px rgba(16, 185, 129, .55), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pub-banner-icon { position: relative; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; animation: none;
  background: linear-gradient(150deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pub-banner-icon::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--accent-2, var(--accent)) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: pbSpin 1.1s linear infinite; }
.pub-banner-icon svg { width: 20px; height: 20px; }
.pub-banner:not(.done) .pub-banner-icon svg { animation: pbFly 1.4s ease-in-out infinite; }
.pub-banner.done .pub-banner-icon { background: linear-gradient(150deg, #34d399, #059669); box-shadow: 0 8px 18px -6px rgba(16, 185, 129, .7), inset 0 1px 0 rgba(255, 255, 255, .4); animation: pbDonePop .5s cubic-bezier(.3, 1.8, .5, 1); }
.pub-banner.done .pub-banner-icon::before { background: conic-gradient(#34d399, #34d399); animation: pbRipple .7s ease-out forwards; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.pub-banner.done .pub-banner-icon svg { stroke-width: 3; }
.pub-banner.done .pub-banner-icon svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: pbDraw .35s cubic-bezier(.5, 0, .2, 1) .12s forwards; }
.pub-banner-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.pub-banner:not(.done) .pub-banner-title {
  background: linear-gradient(100deg, var(--text) 35%, var(--accent-2, var(--accent)) 50%, var(--text) 65%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: pbShimmer 2s linear infinite; }
.pub-banner-sub { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.pub-banner-thumb { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.pub-banner-progress { position: relative; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.pub-banner-progress-fill { position: relative; border-radius: 5px; overflow: hidden; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); }
.pub-banner-progress-fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: pbGloss 1.3s ease-in-out infinite; }
.pub-banner.done .pub-banner-progress-fill { background: linear-gradient(90deg, #059669, #34d399); }
.pub-banner.done .pub-banner-progress-fill::after { animation: none; display: none; }
.pub-banner.done .pub-banner-channels-label { color: #6ee7b7; }
@keyframes pbSpin { to { transform: rotate(360deg); } }
@keyframes pbFly { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
@keyframes pbShimmer { to { background-position: -220% 0; } }
@keyframes pbGloss { to { left: 110%; } }
@keyframes pbDraw { to { stroke-dashoffset: 0; } }
@keyframes pbDonePop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pbRipple { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) {
  .pub-banner-icon::before, .pub-banner:not(.done) .pub-banner-icon svg, .pub-banner:not(.done) .pub-banner-title, .pub-banner-progress-fill::after, .pub-banner.done .pub-banner-icon { animation: none; }
  .pub-banner:not(.done) .pub-banner-title { -webkit-text-fill-color: var(--text); background: none; }
  .pub-banner.done .pub-banner-icon svg path { animation: none; stroke-dashoffset: 0; }
}

/* Діалог-повідомлення з однією кнопкою (showAppConfirm({hideCancel})) — нейтральна кнопка на всю ширину, навіть у «небезпечному» вигляді */
.modal-sheet.ios-alert .confirm-dialog-actions.single .pill { flex: 1 1 100%; }
.modal-sheet.ios-alert.is-danger .confirm-dialog-actions.single .pill.danger { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.modal-sheet.ios-alert.is-danger .confirm-dialog-actions.single .pill.danger::after { display: none; }

/* Запланований пост у стрічці «Публікації»: лишається в списку, лише позначений плашкою «Заплановано» і часом виходу */
.queue-card.is-scheduled { border-color: color-mix(in srgb, var(--accent) 42%, var(--card-border)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255, 255, 255, 0.02)); }
.q-sched-row { color: var(--accent-2, var(--accent)); font-weight: 600; }
.q-sched-row b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.q-sched-row svg { color: var(--accent-2, var(--accent)); }

/* Журнал: клікабельні рядки + вікно допису «як чат у Telegram» (2026-10-05) */
.news-log-row.is-clickable { cursor: pointer; transition: background .15s ease; border-radius: 12px; margin: 0; padding-left: 8px; padding-right: 8px; box-sizing: border-box; }
.news-log-list { overflow-x: hidden; }
.news-log-row.is-clickable:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.news-log-row.is-clickable:active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.news-log-row.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.news-log-badge.ev-scheduled { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.news-log-badge.ev-unscheduled { color: #94a3b8; background: color-mix(in srgb, #94a3b8 16%, transparent); }

.modal-overlay.lp-overlay { align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; background: rgba(5, 4, 10, .72); }
.modal-overlay.lp-overlay.is-closing { opacity: 0; transition: opacity .18s ease; }
.modal-sheet.lp-sheet { width: min(460px, 100%); max-height: min(calc(100 * var(--vh1, 1vh) - 150px), 760px); margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px;
  background: var(--card, #14111f); border: 1px solid var(--card-border); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: dlgIn .34s cubic-bezier(.22, 1.1, .36, 1) both; }
.lp-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); border-bottom: 1px solid var(--card-border); }
.lp-back { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--accent-2, var(--accent)); background: none; cursor: pointer; }
.lp-back svg { width: 22px; height: 22px; }
.lp-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent))); color: #fff; font-weight: 800; }
.lp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-who { flex: 1; min-width: 0; }
.lp-name { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-sub { font-size: 12px; color: var(--hint); }
.lp-status { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lp-status.ev-published { color: var(--success, #34c759); background: color-mix(in srgb, var(--success, #34c759) 15%, transparent); }
.lp-status.ev-failed, .lp-status.ev-removed, .lp-status.ev-junk { color: #ef4444; background: color-mix(in srgb, #ef4444 14%, transparent); }
.lp-status.ev-duplicate, .lp-status.ev-retry, .lp-status.ev-expired { color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.lp-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin;
  background:
    radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg, #0a0713)), var(--bg, #0a0713)); }
.lp-chat > * { flex: none; } /* без этого бабл сжимался вместо прокрутки чата */
.lp-day { align-self: center; font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .8); padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lp-loading { align-self: center; color: var(--hint); font-size: 13px; padding: 20px 0; }
.lp-bubble { align-self: flex-start; max-width: 94%; overflow: hidden; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--card-hi, #1b1730) 92%, #fff 3%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); animation: nfIn .4s cubic-bezier(.2, .9, .3, 1) both; }
.lp-text { padding: 10px 14px 4px; font-size: 14.5px; line-height: 1.5; word-break: break-word; }
.lp-text a { color: var(--accent-2, var(--accent)); }
.lp-meta { padding: 0 14px 8px; font-size: 11.5px; color: var(--hint); text-align: right; }
.lp-note { align-self: center; max-width: 92%; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--hint); padding: 9px 12px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .18); }
.lp-nomedia { padding: 22px 14px; text-align: center; font-size: 12.5px; color: var(--hint); background: rgba(0, 0, 0, .25); }
.lp-gallery { display: grid; gap: 2px; background: #000; position: relative; }
.lp-g1 { grid-template-columns: 1fr; } .lp-g1 .lp-gi { aspect-ratio: 4 / 3; }
.lp-g2 { grid-template-columns: 1fr 1fr; } .lp-g2 .lp-gi { aspect-ratio: 1 / 1; }
.lp-g3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .lp-g3 .lp-gi:first-child { grid-row: 1 / 3; } .lp-g3 .lp-gi:not(:first-child) { aspect-ratio: 1 / 1; }
.lp-g4 { grid-template-columns: 1fr 1fr; } .lp-g4 .lp-gi { aspect-ratio: 1 / 1; }
.lp-gi { position: relative; overflow: hidden; background: #0b0b12; }
.lp-gi img, .lp-gi video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, .55); pointer-events: none; }
.lp-play::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.lp-more { position: absolute; right: 8px; bottom: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 800; }
.lp-foot { flex: none; display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--card-border); }
.lp-foot .pill { flex: 1; min-height: 44px; justify-content: center; border-radius: 14px; font-weight: 800; }
.lp-foot .pill.on { background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); color: #fff; border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .modal-sheet.lp-sheet, .lp-bubble { animation: none; } }

/* Відкладена («нагадати через…») новина лишається в списку внизу, приглушена, з позначкою часу й кнопкою «Повернути» */
.queue-card.is-snoozed { opacity: .72; }
.queue-card.is-snoozed:hover, .queue-card.is-snoozed:focus-within { opacity: 1; }
.q-snz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--hint); }
.q-snz-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.q-snz-back { margin-left: auto; padding: 3px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-2, var(--accent)); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.q-pop-sep { height: 1px; margin: 6px 8px; background: var(--card-border); }

/* Бейдж на активному (акцентному) сегменті/пункті: «матове скло» замість білого кружка з чорною рамкою */
.segment.active > .nbadge, body.desktop-platform .nav-btn.active > .nbadge {
  background: rgba(255, 255, 255, .24); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 4px 12px -4px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.segment.active > .nbadge .nb-ring, body.desktop-platform .nav-btn.active > .nbadge .nb-ring { background: rgba(255, 255, 255, .5); }

/* Кнопка «Опублікувати зараз» на картці: градієнт теми зі свічінням, блиск, ракета; у стані відправки — біжить смужка й летить ракета, потім зелена «Готово» */
.btn-primary[data-action="queue-publish-now"] {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 52%, var(--accent-deep, var(--accent)));
  box-shadow: 0 14px 28px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition: transform .14s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease, background .35s ease, filter .2s ease;
}
.btn-primary[data-action="queue-publish-now"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 38%; z-index: -1; pointer-events: none; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); animation: dlgShine 3.6s ease-in-out 1.2s infinite; }
.btn-primary[data-action="queue-publish-now"] svg { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .btn-primary[data-action="queue-publish-now"]:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
  .btn-primary[data-action="queue-publish-now"]:hover:not(:disabled) svg { transform: translate(3px, -3px) rotate(8deg); } }
.btn-primary[data-action="queue-publish-now"]:active:not(:disabled) { transform: scale(.95); box-shadow: 0 6px 14px -8px var(--accent-glow), inset 0 2px 6px rgba(0, 0, 0, .25); }
.btn-primary[data-action="queue-publish-now"] .pb-label { display: inline-block; animation: pbLabelIn .28s cubic-bezier(.2, .9, .3, 1) both; }
.btn-primary[data-action="queue-publish-now"].is-sending { cursor: progress; opacity: 1; filter: none; }
.btn-primary[data-action="queue-publish-now"].is-sending::after { left: 0; width: 100%; transform: none; animation: pbBar 1.1s linear infinite;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .22) 14px 28px); background-size: 56px 100%; }
.btn-primary[data-action="queue-publish-now"] .pb-rocket { display: inline-flex; animation: pbLaunch 1s cubic-bezier(.5, 0, .3, 1) infinite; }
.btn-primary[data-action="queue-publish-now"].is-sent { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 14px 28px -12px rgba(16, 185, 129, .7), inset 0 1px 0 rgba(255, 255, 255, .4); animation: pbSentPop .45s cubic-bezier(.3, 1.8, .5, 1); }
.btn-primary[data-action="queue-publish-now"].is-sent::after { display: none; }
.btn-primary[data-action="queue-publish-now"] .pb-check { display: inline-flex; }
.btn-primary[data-action="queue-publish-now"] .pb-check svg { stroke-width: 3; }
.btn-primary[data-action="queue-publish-now"] .pb-check svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: pbDraw .32s cubic-bezier(.5, 0, .2, 1) .05s forwards; }
.btn-primary[data-action="queue-publish-now"].is-fail { animation: pbShake .45s ease; }
@keyframes pbLabelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pbBar { to { background-position: 56px 0; } }
@keyframes pbLaunch { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 55% { transform: translate(14px, -14px) scale(.7); opacity: 0; } 56% { transform: translate(-12px, 12px) scale(.7); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes pbSentPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes pbShake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .btn-primary[data-action="queue-publish-now"]::after, .btn-primary[data-action="queue-publish-now"] .pb-rocket, .btn-primary[data-action="queue-publish-now"] .pb-label, .btn-primary[data-action="queue-publish-now"].is-sent { animation: none; }
  .btn-primary[data-action="queue-publish-now"] .pb-check svg path { animation: none; stroke-dashoffset: 0; }
}

/* «Публікується…» v2: без смуг — спокійна хвиля світла по кнопці, тонкий індикатор знизу, ракета ледь «пливе» */
.btn-primary[data-action="queue-publish-now"].is-sending, .btn-primary[data-action="queue-publish-now"].is-sending:disabled { opacity: 1; filter: saturate(.92) brightness(.97); transform: none; }
.btn-primary[data-action="queue-publish-now"].is-sending::after {
  display: block; top: 0; bottom: 0; left: -50%; width: 50%; z-index: -1; transform: none; background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); background-size: auto; background-repeat: no-repeat;
  animation: pbWave 1.35s cubic-bezier(.4, 0, .4, 1) infinite;
}
.btn-primary[data-action="queue-publish-now"].is-sending::before {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 7px; height: 3px; border-radius: 3px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .95) 50%, transparent 100%) -60% 0 / 45% 100% no-repeat, rgba(255, 255, 255, .22);
  animation: pbTrack 1.35s cubic-bezier(.4, 0, .4, 1) infinite;
}
.btn-primary[data-action="queue-publish-now"] .pb-rocket { animation: pbBob 1.1s ease-in-out infinite; }
.btn-primary[data-action="queue-publish-now"].is-sending { gap: 10px; padding-bottom: 6px; }
@keyframes pbWave { to { left: 110%; } }
@keyframes pbTrack { to { background-position: 160% 0, 0 0; } }
@keyframes pbBob { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(2px, -3px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .btn-primary[data-action="queue-publish-now"].is-sending::after, .btn-primary[data-action="queue-publish-now"].is-sending::before { animation: none; } }

/* Курси в редакторі тарифів */
.fx-panel { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 9px; }
.fx-line { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--hint); }
.fx-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.fx-time { opacity: .75; }
.fx-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.fx-dot.live { background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: fxPulse 2s ease-out infinite; }
.fx-dot.stale { background: #f59e0b; } .fx-dot.bad { background: #ef4444; }
@keyframes fxPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
.fx-refresh { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, .06); color: var(--text); font-size: 16px; cursor: pointer; }
.fx-refresh.spin { animation: fxSpin .7s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-stars { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fx-stars input { width: 96px; margin: 0; padding: 7px 10px; border-radius: 12px; }
.fx-stars em { font-style: normal; font-size: 11.5px; color: var(--hint); }
.fx-auto { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; cursor: pointer; }
.fx-auto input { width: 16px; height: 16px; min-width: 16px; accent-color: var(--accent-2); margin: 1px 0 0; }
.fx-warn { font-size: 12px; color: #fbbf24; padding: 7px 10px; border-radius: 12px; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); }
input.fx-invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
input.fx-flash { animation: fxFlash .7s ease; }
@keyframes fxFlash { 0% { background-color: color-mix(in srgb, var(--accent) 38%, transparent); } 100% { background-color: transparent; } }

/* PayPal у виборі способу оплати: логотип-монограма на світлій плитці + «PayPal» у фірмових кольорах (світла версія для темного фону) */
.pay-method-icon.pm-paypal { background: #fff; border-color: rgba(255, 255, 255, .9); box-shadow: 0 8px 18px -8px rgba(0, 156, 222, .55); }
.pp-word { font-style: italic; font-weight: 900; letter-spacing: -0.02em; font-size: 1.04em; }
.pp-word b { color: #fff; font-weight: 900; }
.pp-word i { color: #009cde; font-style: italic; font-weight: 900; }

/* Стан каналу в рядку: бейдж — окремим рядком під лічильником, у один рядок (довгий текст — з трикрапкою), макет рядка не «ламається» */
.ch-health-row { margin-top: 6px; min-width: 0; }
.ch-health-row:has(> .ch-health[hidden]), .ch-health-row:has(> .ch-health.ok) { display: none; }
.ch-health-row .ch-health { display: inline-flex; max-width: 100%; margin-left: 0; padding: 3px 10px 3px 8px; box-sizing: border-box; white-space: nowrap; }
.ch-health-row .ch-health i { flex: none; }
.ch-health-row .ch-health span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-summary-body { min-width: 0; }


/* Одиночна «Редагувати» (у схваленої новини) — значок + підпис; у рядку з кількома кнопками лишаються самі значки */
#queue-list .card-actions.single-sec > .btn-secondary:not(.q-dup-chip) { font-size: 14.5px; font-weight: 700; gap: 9px; }
#queue-list .card-actions.single-sec > .btn-secondary:not(.q-dup-chip) svg { width: 20px; height: 20px; }
body.desktop-platform #queue-list .card-actions.single-sec > .btn-secondary:not(.q-dup-chip) { flex: 0 0 auto; width: auto; padding: 0 18px; }

/* Значок джерела в картці: у всіх типів — колір теми, як у «Переслано» (раніше у звичайного джерела був сірий) */
.q-src .q-src-ico { color: var(--accent-2, var(--accent)); opacity: 1; }
.q-src-editorial_chat .q-src-ico { color: #fbbf24; }
.queue-card .queue-time-row > svg { color: var(--accent-2, var(--accent)); }

/* Вікно «Профіль»: прокручується (раніше overflow:hidden відрізав низ — «Готово» було недосяжним), не лізе під верхню панель Telegram, хрестик прилипає зверху */
.modal-overlay.pc-overlay { align-items: center; padding: 0 10px; box-sizing: border-box; }
.pc-sheet { max-height: calc(100 * var(--vh1, 1vh) - 170px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pc-sheet::-webkit-scrollbar { display: none; }
.pc-sheet > .pc-head { position: sticky; top: 12px; z-index: 6; height: 0; margin: 0 14px 0 22px; padding: 0; overflow: visible; display: flex; justify-content: flex-end; align-items: flex-start; }
.pc-sheet > .pc-head .modal-close { margin: 0; }
@media (max-width: 520px) { .pc-sheet { max-height: calc(100 * var(--vh1, 1vh) - 160px); } }

/* ===== Вибір мови: вікно по центру (замість нижньої шторки), плитки-картки з прапорцями, анімація появи й вибору ===== */
#language-modal { align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: radial-gradient(60% 45% at 50% 55%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%), rgba(5, 4, 10, .72); }
#language-modal .modal-sheet { position: relative; width: min(400px, 100%); max-width: 400px; margin: 0; padding: 20px 18px 18px; box-sizing: border-box; border-radius: 28px;
  max-height: calc(100 * var(--vh1, 1vh) - 170px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%), var(--card, #14111f); border: 1px solid var(--card-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px -22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: dlgIn .34s cubic-bezier(.22, 1.1, .36, 1) both; }
#language-modal .modal-sheet::-webkit-scrollbar { display: none; }
#language-modal .modal-header { margin-bottom: 14px; }
#language-modal .lang-head { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
#language-modal .lang-head-ico { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
#language-modal .lang-head-ico svg { width: 22px; height: 22px; animation: langSpin 14s linear infinite; }
@keyframes langSpin { to { transform: rotate(360deg); } }
#language-modal .lang-option-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 14px; border-radius: 20px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .14s cubic-bezier(.3, 1.5, .5, 1);
  animation: nfIn .42s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.05s + var(--i, 0) * 55ms); }
@media (hover: hover) { #language-modal .lang-option-row:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); transform: translateY(-1px); } }
#language-modal .lang-option-row:active { transform: scale(.97); }
#language-modal .lang-option-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#language-modal .lang-option-row.active { border-color: color-mix(in srgb, var(--accent) 58%, transparent); box-shadow: 0 14px 28px -18px var(--accent-glow);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); }
#language-modal .lang-option-row.picked { animation: langPick .22s ease both; }
@keyframes langPick { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(.98); opacity: .85; } }
#language-modal .lang-option-flag { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 8px 16px -8px rgba(0, 0, 0, .65); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
#language-modal .lang-option-row.active .lang-option-flag { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent), 0 8px 18px -8px var(--accent-glow); }
#language-modal .lang-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#language-modal .lang-option-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
#language-modal .lang-option-code { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--hint); }
#language-modal .lang-option-row.active .lang-option-code { color: var(--accent-2, var(--accent)); }
#language-modal .lang-option-check { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: scale(.4);
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 6px 14px -4px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: opacity .2s ease, transform .35s cubic-bezier(.3, 1.8, .5, 1); }
#language-modal .lang-option-row.active .lang-option-check { opacity: 1; transform: none; }
#language-modal .lang-option-check svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { #language-modal .modal-sheet, #language-modal .lang-option-row, #language-modal .lang-head-ico svg { animation: none; } }

/* ===== Профіль: вікно завжди нижче панелі Telegram, скрол жестом, хрестик у зоні дотику ===== */
.modal-overlay.pc-overlay { align-items: flex-start; justify-content: center; padding: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 96px) 10px 14px; box-sizing: border-box; }
#profile-custom-overlay .pc-sheet { max-height: calc(100 * var(--vh1, 1vh) - calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 120px)); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; transform: none; }
#profile-custom-overlay .pc-sheet > .pc-head { top: 10px; }
#profile-custom-overlay .pc-sheet > .pc-head .modal-close { width: 38px; height: 38px; }

/* ===== Профіль v2: вікно по центру, компактна шапка, липка кнопка «Готово» ===== */
.modal-overlay.pc-overlay { align-items: center; justify-content: center; padding: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 92px) 14px 28px; background: radial-gradient(70% 50% at 50% 55%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 75%), rgba(5, 4, 10, .74); }
#profile-custom-overlay .pc-sheet { width: min(420px, 100%); border-radius: 30px; max-height: calc(100 * var(--vh1, 1vh) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-top, 0px) - 124px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%), var(--card, #14111f); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--card-border));
  box-shadow: 0 34px 90px rgba(0, 0, 0, .65), 0 0 70px -24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .07); animation: dlgIn .34s cubic-bezier(.22, 1.1, .36, 1) both; }
#profile-custom-overlay .pc-sheet::before { display: none; }
#profile-custom-overlay .pc-sheet > .pc-hero { display: grid; grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: start; gap: 12px 16px; padding: 22px 60px 18px 22px; }
#profile-custom-overlay .pc-hero .pc-avatar { width: 84px; height: 84px; align-self: start; grid-row: 1; animation: none;
  box-shadow: 0 0 0 3px var(--card, #14111f), 0 0 0 5px var(--accent), 0 16px 30px -12px var(--accent-glow); }
#profile-custom-overlay .pc-cam { left: 76px; top: 76px; width: 28px; height: 28px; }
#profile-custom-overlay .pc-hero .pc-hero-info { grid-row: 1; align-items: flex-start; align-self: center; margin-top: 0; gap: 6px; min-width: 0; }
#profile-custom-overlay .pc-hero .pc-hero-name { font-size: 20px; max-width: 100%; }
#profile-custom-overlay .pc-hero .pc-hint { display: none; }
#profile-custom-overlay .pc-hero .pc-avatar-actions { grid-column: 1 / -1; justify-content: flex-start; margin: 2px 0 0; }
#profile-custom-overlay .pc-sheet > .pc-head { top: 14px; }
#profile-custom-overlay .pc-sheet > .pc-head .modal-close { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
#profile-custom-overlay .pc-sheet .pc-label { margin: 18px 22px 8px; }
#profile-custom-overlay .pc-sheet > .pc-input-wrap, #profile-custom-overlay .pc-sheet > .segmented, #profile-custom-overlay .pc-sheet > [data-pc="custom-box"] { margin-left: 22px; margin-right: 22px; }
#profile-custom-overlay .pc-sheet > .pc-foot { position: sticky; bottom: 0; z-index: 5; margin: 18px 0 0; padding: 14px 22px 16px; flex-direction: row; align-items: center; border-top: 1px solid var(--card-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card, #14111f) 80%, transparent), var(--card, #14111f)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#profile-custom-overlay .pc-foot .pc-saved { flex: 1; font-size: 11.5px; line-height: 1.3; }
#profile-custom-overlay .pc-foot .pill.on { flex: none; padding: 12px 28px; }

/* профіль v3: фікси відступів, липкий футер без зазору, вікно трохи вище */
#profile-custom-overlay .pc-sheet { padding-bottom: 0; margin-bottom: 52px; }
#profile-custom-overlay .pc-input-wrap > [data-pc="nick-reset"] { margin: 10px 0 0 !important; }
#profile-custom-overlay .pc-sheet > .pc-foot { bottom: -1px; margin-bottom: 0; border-radius: 0 0 29px 29px; }
#profile-custom-overlay .pc-input-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#profile-custom-overlay .pc-input-wrap > .pc-input { margin: 0; flex: 1 1 100%; }
#profile-custom-overlay .pc-input-wrap > [data-pc="nick-reset"] { margin: 0 !important; }
#profile-custom-overlay .pc-input-wrap > .pc-count { position: absolute; right: 16px; top: 18px; }

/* профіль v4: кнопки фото/скидання/«Як у Telegram» */
#profile-custom-overlay .pc-hero .pc-avatar-actions { gap: 10px; }
#profile-custom-overlay [data-pc="upload"], #profile-custom-overlay [data-pc="reset-avatar"], #profile-custom-overlay [data-pc="nick-reset"] {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px 0 14px; border-radius: 14px; font-size: 14px; font-weight: 750; letter-spacing: -0.01em; cursor: pointer; overflow: hidden;
  transition: transform .14s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease, background .2s ease, border-color .2s ease; }
#profile-custom-overlay [data-pc="upload"]::before, #profile-custom-overlay [data-pc="reset-avatar"]::before, #profile-custom-overlay [data-pc="nick-reset"]::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--pc-ico) center / contain no-repeat; mask: var(--pc-ico) center / contain no-repeat; }
#profile-custom-overlay [data-pc="upload"] { --pc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
  color: #fff; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 12px 24px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); }
#profile-custom-overlay [data-pc="reset-avatar"] { --pc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
#profile-custom-overlay [data-pc="nick-reset"] { --pc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.5 4.3 2.9 11.5c-.9.4-.9 1.1-.2 1.3l4.7 1.5 1.8 5.5c.2.6.4.8.8.8.4 0 .6-.2.9-.5l2.3-2.2 4.7 3.5c.9.5 1.5.2 1.7-.8l3.1-14.600c.3-1.200-.5-1.800-1.200-1.400zM9 14l8.600-5.400c.4-.3.8-.1.5.2L11 15.200' /%3E%3C/svg%3E");
  color: color-mix(in srgb, var(--accent-2, var(--accent)) 85%, #fff); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); }
@media (hover: hover) { #profile-custom-overlay [data-pc="upload"]:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); }
  #profile-custom-overlay [data-pc="reset-avatar"]:hover { background: rgba(255, 255, 255, .1); }
  #profile-custom-overlay [data-pc="nick-reset"]:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } }
#profile-custom-overlay [data-pc="upload"]:active, #profile-custom-overlay [data-pc="reset-avatar"]:active, #profile-custom-overlay [data-pc="nick-reset"]:active { transform: scale(.96); }

/* Налаштування (мобільний): один цільний список — мова, тема, перемикачі рядками з розділювачами */
body:not(.desktop-platform) #appearance-settings-card > .set-group > .set-head { display: none; }
body:not(.desktop-platform) #appearance-settings-card .set-group-pad { padding: 16px 16px 6px; }
body:not(.desktop-platform) #appearance-settings-card .set-sublabel { margin: 0 0 8px !important; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
body:not(.desktop-platform) #appearance-settings-card .set-block + .set-block { margin-top: 16px; }
body:not(.desktop-platform) #appearance-settings-card .lang-current-row { min-height: 52px; border-radius: 16px; }
body:not(.desktop-platform) #appearance-settings-card .theme-grid { gap: 8px; }
body:not(.desktop-platform) #appearance-settings-card .theme-grid .segment { padding: 6px 6px 9px; gap: 7px; border-radius: 16px; font-size: 12px; }
body:not(.desktop-platform) #appearance-settings-card .theme-swatch { height: 34px; border-radius: 10px; }
body:not(.desktop-platform) #appearance-settings-card .theme-swatch::before { top: 6px; left: 6px; height: 5px; }
body:not(.desktop-platform) #appearance-settings-card .theme-swatch::after { left: 6px; right: 6px; bottom: 6px; height: 10px; border-radius: 5px; }
body:not(.desktop-platform) #appearance-settings-card .theme-grid .segment.active::after { right: 10px; top: 10px; width: 16px; height: 16px; }
body:not(.desktop-platform) #appearance-settings-card .theme-grid .segment.active::before { right: 14px; top: 14.5px; width: 7px; height: 3.5px; }
body:not(.desktop-platform) #sec-toggles { margin: 14px -16px 0; }
body:not(.desktop-platform) #sec-toggles .set-toggle-row { margin: 0; padding: 13px 16px; border-radius: 0; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
body:not(.desktop-platform) #sec-toggles .set-toggle-row:active { background: rgba(255, 255, 255, .04); }

/* Екран завантаження: цифри без «стрибків» ширини, смуга без відставання від відсотка, текст і шкала над декоративними картками */
.splash-logo, .splash-status, .splash-progress-track, .splash-percent, .splash-footer { z-index: 6; }
.splash-status { text-shadow: 0 1px 8px #0a0713, 0 0 14px #0a0713; }
.splash-progress-bar { transition: width .07s linear; }
.splash-percent, body:not(.desktop-platform) .splash-percent { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; color: #a78bfa; font-size: 14px; }
#profile-custom-overlay .pc-hero .pc-avatar-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
#profile-custom-overlay [data-pc="upload"], #profile-custom-overlay [data-pc="reset-avatar"] { flex: 0 1 auto; min-width: 0; height: 40px; padding: 0 14px 0 12px; font-size: 13.5px; white-space: nowrap; }
#profile-custom-overlay [data-pc="upload"] { flex: 1 1 auto; }

/* Мобільні «Налаштування»: згортання кнопкою, заголовок-рядок із зведенням */
.set-collapse-sum, .set-collapse-chev { display: none; }
body:not(.desktop-platform) #appearance-settings-card > .set-label { display: none; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > .set-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body:not(.desktop-platform) #appearance-settings-card > .set-group.is-collapsed > .set-head { margin-bottom: 8px; }
body:not(.desktop-platform) #appearance-settings-card .set-head .set-title { flex: none; font-size: 17px; font-weight: 800; }
body:not(.desktop-platform) .set-collapse-sum { display: block; flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; opacity: 0; transition: opacity .2s ease; }
body:not(.desktop-platform) #appearance-settings-card > .set-group.is-collapsed .set-collapse-sum { opacity: 1; }
body:not(.desktop-platform) .set-collapse-chev { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 11px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
body:not(.desktop-platform) .set-collapse-chev svg { width: 18px; height: 18px; }
body:not(.desktop-platform) #appearance-settings-card > .set-group:not(.is-collapsed) .set-collapse-chev { transform: rotate(180deg); }
body:not(.desktop-platform) #appearance-settings-card > .set-group.is-collapsed > :not(.set-head) { display: none; }
body:not(.desktop-platform) #appearance-settings-card .set-group-pad.is-collapsed { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { body:not(.desktop-platform) .set-collapse-chev { transition: none; } }
body:not(.desktop-platform) #appearance-settings-card .set-head { gap: 10px; }
body:not(.desktop-platform) #appearance-settings-card .set-head .set-title { font-size: 16px; white-space: nowrap; }
body:not(.desktop-platform) .set-collapse-sum { flex: 1 1 auto; min-width: max-content; font-size: 12.5px; }
body:not(.desktop-platform) .set-collapse-sum { display: none !important; }
body:not(.desktop-platform) #appearance-settings-card .set-head .set-title { flex: 1; }

/* Редактор: текст не заходить під кнопки копіювання/мікрофона та лічильник слів */
#editor-modal #editor-textarea.rich-editor { padding-bottom: 58px; box-sizing: border-box; }

/* Цитата (Telegram <blockquote>) у редакторі — видима позначка, а не звичайний абзац */
#editor-modal #editor-textarea blockquote {
  margin: 8px 0;
  padding: 8px 12px 8px 14px;
  border-left: 3px solid var(--accent, #a855f7);
  background: color-mix(in srgb, var(--accent, #a855f7) 10%, transparent);
  border-radius: 0 10px 10px 0;
}
#editor-modal #editor-textarea blockquote[expandable] { position: relative; }

/* Налаштування каналу v2 (мобільний): нижче панелі Telegram, без бокового «водіння», підписи вкладок не обрізаються */
body:not(.desktop-platform) #channel-modal .modal-sheet { max-height: calc(100 * var(--vh1, 1vh) - var(--tg-content-safe-area-inset-top, 0px) - var(--tg-safe-area-inset-top, 0px) - 128px); overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
body:not(.desktop-platform) #channel-modal #channel-modal-body { overflow-x: hidden; max-width: 100%; }
body:not(.desktop-platform) #channel-modal .modal-tab-bar { max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
body:not(.desktop-platform) #channel-modal .modal-tab-btn { font-size: 10.5px; letter-spacing: -0.01em; padding: 9px 1px 8px; }
body:not(.desktop-platform) #channel-modal .modal-tab-btn svg { width: 19px; height: 19px; }

/* Сповіщення («Збережено» тощо) — знизу, над нижньою навігацією, щоб не перекривати вміст */
#toast-container { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); flex-direction: column-reverse; }
body.desktop-platform #toast-container { bottom: 28px; }
.toast { transform: translateY(130%) scale(0.96); }
.toast.in { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .toast, .toast.in { transform: none; } }

/* Плашки «Відхилено · Скасувати» та масових дій — над нижньою навігацією, не перекривають її */
@media (max-width: 600px) { body:not(.desktop-platform) #q-bulk, body:not(.desktop-platform) #q-undo { bottom: calc(118px + env(safe-area-inset-bottom)); } body:not(.desktop-platform).q-bulk-on #q-undo { bottom: calc(176px + env(safe-area-inset-bottom)); } }

/* Налаштування каналу v3: висота без залежності від safe-area змінних (вікно не «просідає»), вкладки — рівні колонки на всю ширину */
body:not(.desktop-platform) #channel-modal .modal-sheet { max-height: calc(100 * var(--vh1, 1vh) - 104px); }
body:not(.desktop-platform) #channel-modal .modal-tab-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
body:not(.desktop-platform) #channel-modal .modal-tab-btn { width: auto; min-width: 0; }

/* «Відхилено · Скасувати»: нижче й у стилі тостів (скло, та сама форма), щоб зливалась з рештою сповіщень */
@media (max-width: 600px) { body:not(.desktop-platform) #q-bulk, body:not(.desktop-platform) #q-undo { bottom: 100px; } body:not(.desktop-platform).q-bulk-on #q-undo { bottom: 158px; } }
#toast-container { bottom: 100px; }
body.desktop-platform #toast-container { bottom: 28px; }
#q-undo, #q-bulk { background: rgba(40, 38, 50, 0.72); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: .5px solid rgba(255, 255, 255, .16); border-radius: 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); padding: 7px 8px 7px 18px; }
#q-undo { padding-bottom: 9px; }
#q-undo .qu-msg { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; margin-right: 10px; }
#q-undo .qu-btn { border-radius: 16px; padding: 9px 16px; font-size: 14px; background: rgba(255, 255, 255, .08); }
#q-undo .qu-bar { height: 2px; opacity: .55; }

/* ===== Налаштування каналу: охайні перемикачі, спокійні картки «Тривоги», попередній перегляд ===== */
body.cm-v2 #channel-modal .watermark-switch, #channel-modal .watermark-switch, #channel-modal .switch { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .25s ease, box-shadow .25s ease; }
body.cm-v2 #channel-modal .watermark-switch::after, #channel-modal .watermark-switch::after, #channel-modal .switch::after { top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .35); transition: transform .28s cubic-bezier(.3, 1.4, .5, 1); }
body.cm-v2 #channel-modal .watermark-switch.on, #channel-modal .watermark-switch.on, #channel-modal .switch.on { background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
body.cm-v2 #channel-modal .watermark-switch.on::after, #channel-modal .watermark-switch.on::after, #channel-modal .switch.on::after { transform: translateX(20px); }

#channel-modal [data-panel="alerts"] .chip-compact { hyphens: none; -webkit-hyphens: none; word-break: normal; line-height: 1.2; }
#channel-modal [data-panel="alerts"] .settings-card-extra .muted { opacity: .85; }
#channel-modal [data-panel="alerts"] .alert-preview-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); flex: none; margin-right: 8px; display: inline-block; }
#channel-modal [data-panel="alerts"] .alert-preview-test { border: 0; border-radius: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -10px var(--accent-glow); }

/* ===== Конструктор футера: зручні варіанти, перемикачі-«чекбокси», живий попередній перегляд ===== */
[data-role="footer-builder-card"] .settings-card-header { align-items: flex-start; margin-bottom: 4px; }
[data-role="footer-builder-card"] .fb-section-title { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 11.5px; letter-spacing: .12em; }
[data-role="footer-builder-card"] .fb-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-border), transparent); }
[data-role="footer-builder-card"] .fb-inline > .muted { display: block; padding: 18px 14px; margin-bottom: 10px; border-radius: 16px; text-align: center; font-size: 13px !important; line-height: 1.45; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .025); }

[data-role="footer-builder-card"] .fb-variant { counter-increment: fbv; position: relative; padding: 14px; margin-bottom: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
[data-role="footer-builder-card"] .fb-inline { counter-reset: fbv; }
[data-role="footer-builder-card"] .fb-variant-head { margin-bottom: 12px; }
[data-role="footer-builder-card"] .fb-variant-head b { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
[data-role="footer-builder-card"] .fb-variant-head b::before { content: counter(fbv); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; font-size: 14px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 6px 14px -6px var(--accent-glow); }
[data-role="footer-builder-card"] .fb-icon-btn { width: 36px; height: 36px; border-radius: 12px; }

/* попередній перегляд — як підпис під повідомленням у каналі */
[data-role="footer-builder-card"] .fb-prev { position: relative; padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; border: 0; border-left: 3px solid var(--accent); background: rgba(0, 0, 0, .28); font-size: 14.5px; line-height: 1.4; }
[data-role="footer-builder-card"] .fb-ab { margin: 0 0 10px; }
[data-role="footer-builder-card"] .fb-variant .ads-field-input { width: 100%; box-sizing: border-box; min-height: 46px; border-radius: 14px; padding: 0 14px; }

/* перемикачі «що показувати» й роздільник — компактні чекбокс-плитки */
[data-role="footer-builder-card"] .fb-variant .footer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
[data-role="footer-builder-card"] .fb-variant .footer-chip { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 14px; font-size: 13.5px; font-weight: 700; text-align: left; line-height: 1.2; color: var(--hint);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); box-shadow: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
[data-role="footer-builder-card"] .fb-variant .footer-chip::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); transition: background .2s ease, box-shadow .2s ease; }
[data-role="footer-builder-card"] .fb-variant .footer-chip:active { transform: scale(.97); }
[data-role="footer-builder-card"] .fb-variant .footer-chip.active { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: none; }
[data-role="footer-builder-card"] .fb-variant .footer-chip.active::before { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
[data-role="footer-builder-card"] .fb-variant .footer-chips-sep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-role="footer-builder-card"] .fb-variant .footer-chips-sep .footer-chip { justify-content: center; padding: 0; font-size: 18px; font-weight: 800; }
[data-role="footer-builder-card"] .fb-variant .footer-chips-sep .footer-chip::before { display: none; }
[data-role="footer-builder-card"] .fb-label { margin: 14px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* обрання варіанта й додавання */
[data-role="footer-builder-card"] .fb-inline > .footer-chips:not(.footer-chips-sep) { display: flex; flex-wrap: wrap; gap: 8px; }
[data-role="footer-builder-card"] .fb-inline > .footer-chips .footer-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 700; }
[data-role="footer-builder-card"] .fb-add { width: 100%; justify-content: center; min-height: 52px; margin-top: 2px; border-radius: 18px; font-size: 15px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); transition: background .2s ease, transform .12s ease; }
[data-role="footer-builder-card"] .fb-add:active { transform: scale(.98); background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-role="footer-builder-card"] .fb-status { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; }
[data-role="footer-builder-card"] .fb-status:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }

/* ===== Команда: ролі, картки учасників, додатковий доступ ===== */
.team-role-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.team-role-desc { font-size: 13px; line-height: 1.4; color: var(--hint); }
.team-members-label { display: flex; align-items: center; justify-content: space-between; }
.team-count { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--hint); }

.team-member { margin-top: 10px; border-radius: 22px; padding: 14px; }
.team-member .settings-card-header { gap: 14px; align-items: center; }
.team-member-name { font-size: 16px; font-weight: 800; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.team-member-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.team-perm-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--hint); background: rgba(255,255,255,.07); }
.team-member-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); transition: transform .3s cubic-bezier(.3,1.4,.5,1); flex: none; }
.team-member-chev svg { width: 16px; height: 16px; }
.team-member.open .team-member-chev { transform: rotate(90deg); }
.team-member-panel { display: none; margin-top: 14px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.team-member.open .team-member-panel { display: block; animation: nfIn .28s ease both; }
.team-sec-label { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.team-sec-label:not(:first-child) { margin-top: 16px; }
.team-role-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--hint); }
.team-perm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.team-perm { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: 14px; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; color: var(--hint); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.team-perm:active { transform: scale(.97); }
.team-perm-box { flex: none; width: 20px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); transition: background .2s ease, box-shadow .2s ease; }
.team-perm.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.team-perm.on .team-perm-box { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.team-remove { width: 100%; justify-content: center; margin-top: 16px; min-height: 46px; border-radius: 14px; }

/* ===== Футер → «Швидкий вибір»: перемикач режимів, список-радіо для тексту, плитки роздільників ===== */
#channel-modal .fb-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 14px 0; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
#channel-modal .fb-mode .footer-chip { min-height: 42px; border-radius: 14px; border: 0; background: transparent; box-shadow: none; color: var(--hint); font-size: 14px; font-weight: 800; justify-content: center; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
#channel-modal .fb-mode .footer-chip.active { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -10px var(--accent-glow); }

[data-role="footer-card"] .settings-card-extra { padding: 14px; border-radius: 18px; }
[data-role="footer-card"] .settings-card-extra > .muted:not([style*="11.5px"]) { margin: 0 0 10px !important; font-size: 11px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
[data-role="footer-card"] .settings-card-extra > .muted[style*="margin:14px"] { margin-top: 18px !important; }

[data-role="footer-labels"].footer-chips { display: flex; flex-direction: column; gap: 8px; }
[data-role="footer-labels"] .footer-chip { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 16px; font-size: 14.5px; font-weight: 700; text-align: left; color: var(--text);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); box-shadow: none; transition: background .2s ease, border-color .2s ease, transform .12s ease; }
[data-role="footer-labels"] .footer-chip::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); transition: box-shadow .2s ease, background .2s ease; }
[data-role="footer-labels"] .footer-chip:active { transform: scale(.985); }
[data-role="footer-labels"] .footer-chip.active { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); box-shadow: none; }
[data-role="footer-labels"] .footer-chip.active::before { box-shadow: inset 0 0 0 6px var(--accent), inset 0 0 0 20px #fff; }

[data-role="footer-seps"].footer-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[data-role="footer-seps"] .footer-chip { justify-content: center; min-height: 48px; padding: 0; border-radius: 16px; font-size: 18px; font-weight: 800; color: var(--text); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); box-shadow: none; transition: background .2s ease, border-color .2s ease, transform .12s ease; }
[data-role="footer-seps"] .footer-chip:active { transform: scale(.96); }
[data-role="footer-seps"] .footer-chip.active { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 8px 18px -12px var(--accent-glow); }
[data-role="footer-seps"] .footer-chip em, [data-role="footer-seps"] .footer-chip i { font-size: 13px; font-weight: 700; }

/* Редактор: лічильник слів стоїть правіше кнопок копіювання та мікрофона й по центру з ними */
#editor-modal .editor-word-stats { left: 104px; bottom: 15px; padding: 2px 8px; }
#editor-modal .char-counter { bottom: 15px; }

/* ШІ-рерайт: меню стилів — рядки з іконкою, назвою й коротким описом; «Під фото» виділено */
#ai-rewrite-style-menu.ai-style-menu { display: none; margin-top: 8px; padding: 6px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)), var(--card, #14111f); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .7); animation: nfIn .24s ease both; }
#ai-rewrite-style-menu .ai-style-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 16px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, transform .12s ease; }
#ai-rewrite-style-menu .ai-style-option + .ai-style-option { margin-top: 2px; }
#ai-rewrite-style-menu .ai-style-option:active { transform: scale(.98); background: rgba(255, 255, 255, .08); }
@media (hover: hover) { #ai-rewrite-style-menu .ai-style-option:hover { background: rgba(255, 255, 255, .06); } }
#ai-rewrite-style-menu .ai-style-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 13px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
#ai-rewrite-style-menu .ai-style-ico svg { width: 19px; height: 19px; }
#ai-rewrite-style-menu .ai-style-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ai-rewrite-style-menu .ai-style-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
#ai-rewrite-style-menu .ai-style-sub { font-size: 12.5px; line-height: 1.3; color: var(--hint); }
#ai-rewrite-style-menu .ai-style-option.is-photo { margin-top: 6px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
#ai-rewrite-style-menu .ai-style-option.is-photo .ai-style-ico { color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow); }

/* ===== «Знайти медіа» ===== */
.fm-sheet { max-height: calc(100 * var(--vh1, 1vh) - 110px); display: flex; flex-direction: column; }
.fm-hint { margin: -4px 0 12px; font-size: 13px; line-height: 1.4; color: var(--hint); }
.fm-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.fm-loading, .fm-empty { padding: 26px 14px; text-align: center; font-size: 14px; line-height: 1.45; color: var(--hint); border-radius: 18px; border: 1px dashed rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .025); }
.fm-card { padding: 12px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .09); }
.fm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fm-score { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #34d399; background: rgba(52, 211, 153, .14); }
.fm-src { font-size: 11.5px; font-weight: 700; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fm-thumb { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .06); cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
.fm-thumb:active { transform: scale(.96); }
.fm-thumb img, .fm-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-plus { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 6px 14px -4px var(--accent-glow); transition: background .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fm-plus svg { width: 15px; height: 15px; }
.fm-thumb.is-busy { opacity: .6; pointer-events: none; }
.fm-thumb.is-added { box-shadow: 0 0 0 2px #34d399 inset; }
.fm-thumb.is-added .fm-plus { background: #34d399; transform: rotate(45deg); }
.fm-play { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* «Перефразувати» — головна кнопка редактора: градиент, іконка-іскра, стрілка меню стилів */
.editor-quick-actions { flex-wrap: wrap; }
.editor-quick-actions > div:first-child { flex: 1 1 100%; }
#editor-ai-rewrite-btn.ai-rewrite-pill { position: relative; overflow: hidden; min-height: 48px; gap: 10px; border: 0; border-radius: 16px; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 14px 28px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .14s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s ease; }
#editor-ai-rewrite-btn.ai-rewrite-pill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-120%); animation: aiRwShine 5s ease-in-out infinite; pointer-events: none; }
@keyframes aiRwShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
#editor-ai-rewrite-btn.ai-rewrite-pill:active { transform: scale(.98); background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); }
#editor-ai-rewrite-btn .icon { width: 19px; height: 19px; }
#editor-ai-rewrite-btn .ai-rw-chev { width: 16px; height: 16px; margin-left: 2px; opacity: .85; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
div:has(> #editor-ai-rewrite-btn + #ai-rewrite-style-menu[style*="block"]) #editor-ai-rewrite-btn .ai-rw-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #editor-ai-rewrite-btn.ai-rewrite-pill::after { animation: none; display: none; } }

/* Меню стилів «Перефразувати»: суцільний фон (не просвічують кнопки й канали під ним), поверх усього */
#ai-rewrite-style-menu.ai-style-menu { position: absolute; z-index: 60; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)), var(--bg, #0a0713); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .0), 0 24px 50px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12); }
.editor-quick-actions { position: relative; z-index: 5; }

/* ===== Анімація «Перефразувати» (стримана, адаптується до теми) ===== */
@property --rwa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rwOrbit { to { --rwa: 360deg; } }
.rw-frame { position: relative; }
.rw-frame::before, #editor-ai-rewrite-btn.rw-busy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 8;
  background: conic-gradient(from var(--rwa), transparent 0 58%, var(--accent-deep, var(--accent)) 70%, var(--accent) 84%, var(--accent-2, var(--accent)) 96%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: rwOrbit 3s linear infinite; filter: drop-shadow(0 0 5px var(--accent-glow)); }
/* «Скелет» рядків: суцільна підкладка поверх тексту, мерехтіння в тоні теми */
.rw-skel { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 16px; padding: 24px 22px 70px; box-sizing: border-box; overflow: hidden; border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg, #0a0713)); transition: opacity .24s ease; }
.rw-skel.out { opacity: 0; }
.rw-skel i { display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .06) 35%, color-mix(in srgb, var(--accent-2, var(--accent)) 38%, transparent) 50%, rgba(255, 255, 255, .06) 65%, rgba(255, 255, 255, .06) 100%); background-size: 300% 100%;
  animation: rwSkel 1.8s ease-in-out infinite; }
@keyframes rwSkel { 0% { background-position: 110% 0; } 100% { background-position: -110% 0; } }
/* Кнопка: спокійне перетікання градієнта теми, без іскор і стрибаючих крапок */
#editor-ai-rewrite-btn { position: relative; }
#editor-ai-rewrite-btn.rw-busy { pointer-events: none; background-size: 200% 100%;
  background-image: linear-gradient(100deg, var(--accent-deep, var(--accent)), var(--accent), var(--accent-2, var(--accent)), var(--accent), var(--accent-deep, var(--accent))); animation: rwFlow 2.4s linear infinite; }
@keyframes rwFlow { to { background-position: -200% 0; } }
#editor-ai-rewrite-btn.rw-busy::after { display: none; }
#editor-ai-rewrite-btn.rw-busy .icon { animation: rwSpin 2.2s linear infinite; }
#editor-ai-rewrite-btn.rw-busy .ai-rw-chev { display: none; }
@keyframes rwSpin { to { transform: rotate(360deg); } }
/* Готовий текст плавно проявляється слово за словом (лише прозорість, легкий тон теми) */
.rw-w { display: inline-block; white-space: pre-wrap; animation: rwWordSoft .5s ease-out both; }
@keyframes rwWordSoft { 0% { opacity: 0; color: var(--accent-2, var(--accent)); } 100% { opacity: 1; color: inherit; } }
@media (prefers-reduced-motion: reduce) { .rw-frame::before, #editor-ai-rewrite-btn.rw-busy, #editor-ai-rewrite-btn.rw-busy::before, #editor-ai-rewrite-btn.rw-busy .icon, .rw-skel i { animation: none; } }

/* Тех.розділ: спільного ШІ-ключа більше немає (у кожного власний) — вимикач і «Статус ШІ» прибрано */
.settings-card:has(#dev-users-llm-kill-switch), .settings-card:has(#dev-llm-enabled-switch) { display: none !important; }

/* Редактор: заголовок секції «Канали» — чіткий, яскравий, з іконкою-плиткою */
#editor-channel-label.editor-section-label { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; text-transform: none; color: var(--text); text-shadow: none; opacity: 1; }
#editor-channel-label.editor-section-label::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent)));
  box-shadow: 0 8px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
#editor-channel-label.editor-section-label::after { content: ""; position: absolute; width: 36px; height: 36px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1a10 10 0 0 1 0-14.2M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M16.2 7.8a6 6 0 0 1 0 8.4'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='black'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1a10 10 0 0 1 0-14.2M7.8 16.2a6 6 0 0 1 0-8.4M19.1 4.9a10 10 0 0 1 0 14.2M16.2 7.8a6 6 0 0 1 0 8.4'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='black'/%3E%3C/svg%3E") center / 20px no-repeat; }
#editor-channel-label.editor-section-label { position: relative; }
#editor-channel-label.editor-section-label::after { left: 0; top: 50%; transform: translateY(-50%); }

/* Тех.розділ: вкладку «ШІ» прибрано повністю (у кожного власний ШІ-ключ, спільного немає) */
.modal-tab-btn[data-devtab="llm"], .modal-tab-panel[data-devpanel="llm"], #dev-test-llm-btn { display: none !important; }

/* ===== Ролі: свій колір і іконка бейджа (лише для себе) + нове оформлення карток ролей ===== */
.role-badge.editor { color: var(--rbc-editor, var(--accent-2)); background: color-mix(in srgb, var(--rbc-editor, var(--accent)) 14%, transparent); }
.role-badge.moderator { color: var(--rbc-moderator, var(--warning)); background: color-mix(in srgb, var(--rbc-moderator, var(--warning)) 14%, transparent); }
.role-badge.owner { color: var(--rbc-owner, var(--accent)); background: color-mix(in srgb, var(--rbc-owner, var(--accent)) 14%, transparent); }
.role-badge-icon.rb-svg { display: grid; place-items: center; }
.role-badge-icon.rb-svg svg { width: 14px; height: 14px; }
.team-role-row { position: relative; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); overflow: hidden; }
.team-role-row::before { content: ""; position: absolute; left: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; opacity: .22; filter: blur(26px); background: var(--rr, var(--accent)); pointer-events: none; }
.team-role-row.owner { --rr: var(--rbc-owner, var(--accent)); }
.team-role-row.editor { --rr: var(--rbc-editor, var(--accent-2)); }
.team-role-row.moderator { --rr: var(--rbc-moderator, var(--warning)); }
.team-role-row .role-badge { font-size: 13px; padding: 4px 12px 4px 7px; }
.team-role-row .role-badge-icon { width: 18px; height: 18px; }
.team-role-row .role-badge-icon.rb-svg svg { width: 16px; height: 16px; }
.rb-custom { width: 100%; margin-top: 4px; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .1); display: none; flex-direction: column; gap: 10px; }
.rb-custom[data-filled] { display: flex; }
.rb-line { display: flex; align-items: center; gap: 12px; }
.rb-lab { flex: none; width: 66px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.rb-colors, .rb-icons { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.rb-dot { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 6px 12px -6px var(--c); transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; }
.rb-dot:active { transform: scale(.9); }
.rb-dot.on { transform: scale(1.12); box-shadow: 0 0 0 2px var(--card, #14111f), 0 0 0 4px #fff, 0 6px 14px -6px var(--c); }
.rb-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; padding: 0; cursor: pointer; color: var(--hint); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.rb-ico svg, .rb-ico img { width: 18px; height: 18px; }
.rb-ico:active { transform: scale(.92); }
.rb-ico.on { color: var(--text); background: color-mix(in srgb, var(--rr, var(--accent)) 22%, transparent); border-color: color-mix(in srgb, var(--rr, var(--accent)) 65%, transparent); }
.rb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.35; color: var(--hint); }
.rb-reset { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rb-reset:active { transform: scale(.96); }

/* Футер → «Швидкий вибір»: ряд роздільників не вилазить за картку — «Випадково» на всю ширину, три символи під ним */
[data-role="footer-seps"].footer-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
[data-role="footer-seps"] .footer-chip:first-child { grid-column: 1 / -1; min-width: 0; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
[data-role="footer-seps"] .footer-chip { min-width: 0; }
[data-role="footer-card"] .settings-card-extra, [data-role="footer-labels"] { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ===== ШІ-ключ: герой-картка, плитки статистики, поради, швидкі ліміти ===== */
.aik-hero { --st: var(--accent); --st-rgb: 167, 139, 250; position: relative; overflow: hidden; margin-bottom: 14px; padding: 16px; border-radius: 26px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(var(--st-rgb), .22), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(var(--st-rgb), .35); box-shadow: 0 20px 44px -26px rgba(var(--st-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .07); transition: border-color .3s ease, box-shadow .3s ease; }
.aik-hero[data-state="active"] { --st: #34d399; --st-rgb: 52, 211, 153; }
.aik-hero[data-state="invalid"] { --st: #fb7185; --st-rgb: 251, 113, 133; }
.aik-hero[data-state="none"] { --st: var(--accent); --st-rgb: 167, 139, 250; }
.aik-top { display: flex; align-items: center; gap: 14px; }
.aik-orb { position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: #fff;
  background: linear-gradient(145deg, var(--st), color-mix(in srgb, var(--st) 55%, #000)); box-shadow: 0 14px 26px -10px rgba(var(--st-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .4); }
.aik-orb svg { width: 28px; height: 28px; animation: aikTwinkle 3.2s ease-in-out infinite; }
.aik-hero[data-state="loading"] .aik-orb svg { animation: aikSpin 1.2s linear infinite; }
@keyframes aikTwinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(12deg); } }
@keyframes aikSpin { to { transform: rotate(360deg); } }
.aik-top-text { flex: 1; min-width: 0; }
.aik-state { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.aik-key { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--hint); font-variant-numeric: tabular-nums; }
.aik-refresh { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer; }
.aik-refresh svg { width: 19px; height: 19px; }
.aik-refresh.spin svg { animation: aikSpin .8s linear infinite; }
.aik-refresh:active { transform: scale(.92); }
.aik-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.aik-metrics:empty { display: none; }
.aik-tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 18px; background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-tile b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aik-tile small { font-size: 12px; font-weight: 600; color: var(--hint); }
.aik-tl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-date { font-size: 16px !important; }
.aik-bal { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.aik-bal .aik-tl { flex: 0 0 100%; }
.aik-bal b { font-size: 26px; }
.aik-bal em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fbbf24; background: rgba(251, 191, 36, .14); }
.aik-bal.low { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .45); }
.aik-topup { margin-left: auto; padding: 8px 14px; border-radius: 12px; border: 0; font: inherit; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow); }
.aik-use { flex-direction: row; align-items: center; gap: 12px; }
.aik-use > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aik-ring { flex: none; width: 46px; height: 46px; transform: rotate(-90deg); }
.aik-ring circle { fill: none; stroke-width: 4; }
.aik-ring-bg { stroke: rgba(255, 255, 255, .1); }
.aik-ring-fg { stroke: var(--st); stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.3, 1.2, .5, 1); filter: drop-shadow(0 0 4px rgba(var(--st-rgb), .7)); }
.aik-guide { margin-top: 14px; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-guide-title { margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aik-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; }
.aik-steps b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; font-size: 13px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.aik-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.aik-open svg { width: 17px; height: 17px; }
.aik-open:active { transform: scale(.98); }
.aik-paste-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
.aik-paste { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.aik-paste svg { width: 15px; height: 15px; }
.aik-paste:active { transform: scale(.95); }
.aik-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -4px 0 16px; }
.aik-chip { min-width: 52px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--hint); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.aik-chip.on { color: var(--text); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-chip:active { transform: scale(.94); }
#tab-aikey #aikey-section-label { display: none; }
#tab-aikey #ai-key-card { border-radius: 26px; }
#tab-aikey #ai-key-explain .plan-card-features { font-size: 13px; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .aik-orb svg, .aik-refresh.spin svg { animation: none; } }

/* ШІ-ключ: денний ліміт не потрібен — прибрано */
#tab-aikey .muted:has(+ .stepper), #tab-aikey .stepper, #tab-aikey #ai-key-cap-presets { display: none !important; }

/* ===== ШІ-ключ: цілісне оформлення сторінки ===== */
#tab-aikey.active { display: flex; flex-direction: column; gap: 14px; }
#tab-aikey > * { margin: 0 !important; }
#tab-aikey .back-btn { align-self: flex-start; }

/* метрики героя: баланс на всю ширину, нижче три компактні плитки в ряд */
.aik-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aik-tile { padding: 11px 12px; border-radius: 16px; }
.aik-tile b { font-size: 20px; }
.aik-tile small { font-size: 11.5px; }
.aik-date { font-size: 17px !important; white-space: nowrap; }

/* картка ключа */
#tab-aikey #ai-key-card { padding: 16px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); }
#tab-aikey #ai-key-card .settings-card-header { align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
#tab-aikey #ai-key-card .settings-card-icon { width: 44px; height: 44px; border-radius: 15px; }
#tab-aikey #ai-key-card .settings-card-title { font-size: 17px; font-weight: 800; }
#tab-aikey #ai-key-card .settings-card-desc { font-size: 12.5px; line-height: 1.4; }
#tab-aikey #ai-key-card .settings-card-extra { padding: 0; border: 0; background: none; }
#ai-key-input { height: 50px; padding-left: 16px; border-radius: 16px; font-size: 15px; letter-spacing: .04em; }
#ai-key-save-btn { min-height: 50px; border-radius: 16px; font-size: 15px; }
#ai-key-test-btn { min-height: 50px; border-radius: 16px; font-weight: 800; }
#ai-key-clear-btn { min-height: 46px; border-radius: 14px; }

/* «Як це працює» */
.aik-how { margin-bottom: 14px; border-radius: 16px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-how summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.aik-how summary::-webkit-details-marker { display: none; }
.aik-how summary svg { width: 18px; height: 18px; color: var(--accent-2, var(--accent)); transition: transform .25s ease; }
.aik-how[open] summary svg { transform: rotate(180deg); }
.aik-how .plan-card-features { margin: 0 !important; padding: 0 14px 12px; font-size: 13px; }

/* старий блок використання: без смуги й ліміту, лишаємо графік 7 днів і «впіймано» */
#ai-key-usage-widget { margin-bottom: 14px !important; padding: 14px; border-radius: 20px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#ai-key-usage-widget > .muted:first-child, #ai-key-usage-widget > div:has(> #ai-key-usage-bar), #ai-key-usage-text { display: none !important; }
#ai-key-trend-chart { margin-bottom: 8px !important; }

/* меню «Керування» — плитки 2 в ряд */
#aikey-menu-root > .set-label { margin: 4px 0 10px; }
#aikey-menu-root .set-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
#aikey-menu-root .set-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 108px; padding: 14px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); transition: transform .14s cubic-bezier(.3, 1.5, .5, 1), border-color .2s ease; }
#aikey-menu-root .set-row:active { transform: scale(.97); }
#aikey-menu-root .set-row + .set-row { border-top: 1px solid rgba(255, 255, 255, .08); }
#aikey-menu-root .set-row .set-ico { width: 44px; height: 44px; border-radius: 15px; }
#aikey-menu-root .set-row .set-body { flex: 1; width: 100%; }
#aikey-menu-root .set-row .set-title { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
#aikey-menu-root .set-row .set-chev { position: absolute; right: 12px; top: 14px; opacity: .45; }
#aikey-menu-root .set-row[style*="display:none"] { display: none !important; }
#aikey-menu-root .set-row:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; }

/* ШІ-ключ: прибрано шапку «Ключ доступу» й дубль статистики; шапка-статус виправлена (текст і стилі) */
#tab-aikey #ai-key-card > .settings-card-header, #tab-aikey #ai-key-stats-grid { display: none !important; }
#tab-aikey #ai-key-card { padding: 14px; background: none; border: 0; box-shadow: none; }
#tab-aikey #ai-key-card .settings-card-extra { padding: 0; }

.aik-hero { padding: 16px; border-radius: 28px; }
.aik-state { font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
.aik-key { margin-top: 4px; font-size: 13px; letter-spacing: .06em; opacity: .85; }
.aik-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aik-tile { justify-content: space-between; min-width: 0; min-height: 84px; padding: 12px 12px 11px; overflow: hidden; }
.aik-tl { display: block; max-width: 100%; font-size: 10px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-tile b { display: block; max-width: 100%; font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-tile .aik-date { font-size: 17px !important; }
.aik-tile small { font-size: 11.5px; line-height: 1.2; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-bal { min-height: 0; }
.aik-bal .aik-tl { font-size: 10.5px; }

/* ===== ШІ-ключ: «фітнес»-дашборд — кільця активності, тижневі стовпчики, легенда ===== */
#tab-aikey #ai-key-trend-chart { display: none !important; }
.aik-metrics { display: block; margin-top: 16px; }
.aik-fit { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 24px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-rings-wrap { position: relative; flex: none; width: 128px; height: 128px; }
.aik-rings { width: 100%; height: 100%; transform: rotate(-90deg); }
.aik-rings circle { fill: none; stroke-width: 6.2; }
.aik-rg-bg { stroke: rgba(255, 255, 255, .07); }
.aik-rg-fg { stroke-linecap: round; filter: drop-shadow(0 0 5px currentColor); }
.aik-rg-fg.aik-rg-0 { stroke: var(--accent-2, var(--accent)); color: var(--accent-2, var(--accent)); }
.aik-rg-fg.aik-rg-1 { stroke: var(--accent); color: var(--accent); }
.aik-rg-fg.aik-rg-2 { stroke: #34d399; color: #34d399; }
.aik-rings-core { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.aik-rings-core b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.aik-rings-core small { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.aik-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.aik-lg { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aik-lg i { flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); }
.aik-lg.r0 { --c: var(--accent-2, var(--accent)); } .aik-lg.r1 { --c: var(--accent); } .aik-lg.r2 { --c: #34d399; }
.aik-lg.r1.low { --c: #fbbf24; }
.aik-lg > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aik-lg span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-lg b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aik-lg b small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--hint); }
.aik-week { margin-top: 10px; padding: 14px 14px 12px; border-radius: 22px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-week-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.aik-week-head span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-week-head em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--hint); }
.aik-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 118px; }
.aik-bar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.aik-bar i { display: block; width: 100%; max-width: 30px; height: var(--h); border-radius: 10px 10px 8px 8px; transform-origin: bottom; animation: aikGrow .7s cubic-bezier(.3, 1.2, .4, 1) both;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent-deep, var(--accent))); opacity: .5; }
.aik-bar.today i { opacity: 1; background: linear-gradient(180deg, var(--accent-2, var(--accent)), var(--accent)); box-shadow: 0 0 16px -2px var(--accent-glow); }
.aik-bar.zero i { opacity: .25; }
.aik-bar:nth-child(2) i { animation-delay: .05s; } .aik-bar:nth-child(3) i { animation-delay: .1s; } .aik-bar:nth-child(4) i { animation-delay: .15s; }
.aik-bar:nth-child(5) i { animation-delay: .2s; } .aik-bar:nth-child(6) i { animation-delay: .25s; } .aik-bar:nth-child(7) i { animation-delay: .3s; }
@keyframes aikGrow { from { transform: scaleY(0); } }
.aik-bv { font-size: 10.5px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.aik-bar.today .aik-bv { color: var(--text); }
.aik-bar em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: capitalize; color: var(--hint); }
.aik-bar.today em { color: var(--text); }
.aik-strip { display: flex; align-items: center; gap: 18px; margin-top: 10px; padding: 12px 14px; border-radius: 20px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-strip > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aik-strip span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-strip b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.aik-strip .aik-topup { margin-left: auto; }
.aik-topup.ghost { color: var(--text); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (max-width: 380px) { .aik-fit { gap: 12px; padding: 14px; } .aik-rings-wrap { width: 108px; height: 108px; } .aik-lg b { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .aik-bar i { animation: none; } .aik-rg-fg { transition: none !important; } }

/* Кнопки «Назад» (Профіль / Підписки / Тех.розділ): скляна пілюля з круглою стрілкою-плиткою */
.back-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 18px 5px 5px; border-radius: 999px; font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .15s cubic-bezier(.3, 1.5, .5, 1), background .2s ease, border-color .2s ease; }
.back-btn > svg, .back-btn > .icon { flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: #fff; stroke-width: 2.6; stroke: currentColor; fill: none;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 6px 14px -6px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.back-btn:active { transform: scale(.96); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.back-btn:active > svg { transform: translateX(-3px); }
@media (hover: hover) { .back-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .back-btn:hover > svg { transform: translateX(-2px); } }

/* ===== ШІ-ключ: шапка-статус у стилі застосунку (з легким натяком на «activity»), без копіювання фітнес-кілець ===== */
.aik-hero { padding: 16px; border-radius: 28px; }
.aik-metrics { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.aik-bal2 { padding: 14px 16px 16px; border-radius: 22px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aik-bal2.low { box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .5); }
.aik-bal2-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.aik-bal2-top span, .aik-l { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-bal2-top em { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: #fbbf24; background: rgba(251, 191, 36, .14); }
.aik-bal2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aik-bal2-num { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.aik-bal2-num small { margin-left: 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--hint); }
.aik-meter { height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.aik-meter i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); transition: width .9s cubic-bezier(.3, 1.1, .4, 1); }
.aik-bal2.low .aik-meter i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.aik-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aik-card2 { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; border-radius: 22px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.aik-card2 b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aik-card2 b small { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--hint); }
.aik-sub { margin-top: auto; padding-top: 6px; font-size: 11.5px; line-height: 1.3; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-spark { width: 100%; height: 38px; margin-top: 8px; overflow: visible; }
.aik-sp-line { fill: none; stroke: var(--accent-2, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--accent-glow)); vector-effect: non-scaling-stroke; }
.aik-sp-area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.aik-sp-dot { fill: #fff; stroke: var(--accent-2, var(--accent)); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.aik-days { display: flex; justify-content: space-between; gap: 2px; margin-top: 10px; }
.aik-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aik-day i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background .3s ease, box-shadow .3s ease; }
.aik-day.on i { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .55); }
.aik-day.today i { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.aik-day em { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--hint); }
.aik-day.today em { color: var(--text); }
/* вирівнювання нижньої частини сторінки по ширині шапки */
#tab-aikey #ai-key-card { padding: 0; }
#tab-aikey #ai-key-usage-widget { margin-bottom: 12px !important; }
#ai-key-decisions-label { margin: 2px 0 8px !important; font-size: 10.5px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#ai-key-decisions-grid { gap: 8px !important; }

/* ===== ШІ-ключ: нижня частина — «впіймано», поле ключа, кнопки ===== */
#ai-key-decisions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 0 !important; }
#ai-key-decisions-grid > * { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 66px; padding: 10px 14px 10px 18px !important; border-radius: 16px !important; overflow: hidden;
  background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .07) !important; }
#ai-key-decisions-grid > *::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--dc, var(--accent)); }
#ai-key-decisions-grid > *:nth-child(1) { --dc: #fbbf24; } #ai-key-decisions-grid > *:nth-child(2) { --dc: #fb7185; }
#ai-key-decisions-grid > *:nth-child(3) { --dc: #60a5fa; } #ai-key-decisions-grid > *:nth-child(4) { --dc: #34d399; }
#ai-key-decisions-grid > * > :first-child { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
#ai-key-decisions-grid > * > :last-child:not(:first-child) { font-size: 12px !important; font-weight: 600; color: var(--hint) !important; line-height: 1.2; }

#tab-aikey #ai-key-card .settings-card-extra { display: flex; flex-direction: column; gap: 10px; }
#ai-key-input { width: 100%; box-sizing: border-box; height: 52px; padding: 0 16px; border-radius: 16px; font-size: 15px; letter-spacing: .05em; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
#ai-key-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.aik-paste-row { margin: 0; gap: 8px; }
.aik-paste-row #ai-key-length-hint { font-size: 11.5px; line-height: 1.3; }
.aik-paste { height: 34px; padding: 0 12px; border-radius: 11px; }
#tab-aikey .pill-row { display: grid !important; grid-template-columns: 1.3fr 1fr; gap: 10px; margin: 0 !important; }
#ai-key-save-btn, #ai-key-test-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; }
#ai-key-save-btn::before, #ai-key-test-btn::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat; }
#ai-key-save-btn { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
#ai-key-test-btn { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.2 8 8 9 4.8-1 8-4.5 8-9V6l-8-3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
#ai-key-test-btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--text); }
#ai-key-clear-btn { align-self: center; width: auto !important; min-height: 40px; padding: 0 18px; margin: 4px 0 0 !important; border-radius: 999px; background: transparent !important; border: 1px solid rgba(251, 113, 133, .35); color: #fb7185 !important; font-size: 13.5px; font-weight: 700; }
#ai-key-clear-btn:active { background: rgba(251, 113, 133, .12) !important; }

/* ШІ-ключ: форма вводу з'являється лише коли ключа немає / він не працює / натиснули «Змінити ключ» */
#tab-aikey #ai-key-card.aik-form-hidden .settings-card-extra > #ai-key-input,
#tab-aikey #ai-key-card.aik-form-hidden .settings-card-extra > .aik-paste-row,
#tab-aikey #ai-key-card.aik-form-hidden .settings-card-extra > .pill-row,
#tab-aikey #ai-key-card.aik-form-hidden .settings-card-extra > #ai-key-clear-btn { display: none !important; }
#tab-aikey #ai-key-card:not(.aik-form-hidden) .settings-card-extra > #ai-key-input { animation: aikFormIn .3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes aikFormIn { from { opacity: 0; transform: translateY(-6px); } }
.aik-change { align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 12px; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 800; color: var(--text); cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s ease, border-color .2s ease, transform .12s ease; }
.aik-change svg { width: 19px; height: 19px; color: var(--accent-2, var(--accent)); }
.aik-change:active { transform: scale(.98); }
.aik-change.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
#ai-key-input::placeholder { font-size: 14.5px; letter-spacing: .01em; }

/* ===== ШІ-ключ → підрозділи (логи, канали, правила, дублі, шаблон, тест): єдине оформлення ===== */
#aikey-logs-modal .modal-sheet, #aikey-channels-modal .modal-sheet, #aikey-rules-modal .modal-sheet, #aikey-duplicates-modal .modal-sheet, #aikey-template-modal .modal-sheet, #aikey-test-modal .modal-sheet { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
#aikey-logs-modal .modal-header, #aikey-channels-modal .modal-header, #aikey-rules-modal .modal-header, #aikey-duplicates-modal .modal-header, #aikey-template-modal .modal-header, #aikey-test-modal .modal-header { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
#aikey-logs-modal .modal-header span, #aikey-channels-modal .modal-header span, #aikey-rules-modal .modal-header span, #aikey-duplicates-modal .modal-header span, #aikey-template-modal .modal-header span, #aikey-test-modal .modal-header span { display: inline-flex; align-items: center; gap: 12px; }
#aikey-logs-modal .modal-header span::before, #aikey-channels-modal .modal-header span::before, #aikey-rules-modal .modal-header span::before, #aikey-duplicates-modal .modal-header span::before, #aikey-template-modal .modal-header span::before, #aikey-test-modal .modal-header span::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(145deg, var(--m1), var(--m2)); box-shadow: 0 8px 16px -8px var(--m2), inset 0 1px 0 rgba(255, 255, 255, .35); }
#aikey-logs-modal { --m1: #60a5fa; --m2: #2563eb; } #aikey-channels-modal { --m1: #4ade80; --m2: #16a34a; } #aikey-rules-modal { --m1: #c084fc; --m2: #9333ea; }
#aikey-duplicates-modal { --m1: #fbbf24; --m2: #d97706; } #aikey-template-modal { --m1: #2dd4bf; --m2: #0d9488; } #aikey-test-modal { --m1: #fb7185; --m2: #e11d48; }
/* головні кнопки «Зберегти» — великі, градієнтні, липнуть до низу листа */
#dev-autopost-rules-save-btn, #dev-duplicate-threshold-save-btn, #dev-post-template-save-btn { position: sticky; bottom: 0; z-index: 5; min-height: 52px; border-radius: 16px; font-size: 15.5px; font-weight: 800; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 -14px 20px 4px var(--bg, #0a0713), 0 14px 26px -12px var(--accent-glow); }
#dev-autopost-rules-save-btn:active, #dev-duplicate-threshold-save-btn:active, #dev-post-template-save-btn:active { transform: scale(.98); }
/* поля */
#aikey-rules-modal textarea, #aikey-template-modal input[type="text"], #aikey-test-modal input[type="text"] { width: 100%; box-sizing: border-box; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 15px; }
#aikey-rules-modal textarea { min-height: 120px; line-height: 1.45; padding: 14px 44px 14px 14px; }
#aikey-template-modal input[type="text"], #aikey-test-modal input[type="text"] { height: 52px; padding: 0 16px; }
#aikey-rules-modal textarea:focus, #aikey-template-modal input:focus, #aikey-test-modal input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#dev-autopost-rules-counter { font-weight: 700; }
/* картка готових шаблонів правил */
#dev-autopost-rules-template-card { padding: 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); }
#dev-autopost-rules-template-name { font-size: 15px !important; font-weight: 800 !important; }
#dev-autopost-rules-template-text { font-size: 13px !important; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .24); }
#dev-autopost-rules-template-prev-btn, #dev-autopost-rules-template-next-btn { width: 38px; height: 38px; padding: 0 !important; justify-content: center; border-radius: 12px; }
#dev-autopost-rules-template-use-btn { min-height: 44px; border-radius: 14px; font-weight: 800; color: #fff; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
#dev-autopost-rules-template-copy-btn { width: 44px; height: 44px; padding: 0 !important; justify-content: center; border-radius: 14px; }
/* підказки-автодоповнення */
#dev-autopost-rules-suggest > *, #dev-autopost-rules-test-suggest > * { border-radius: 12px; }
/* чутливість дублів */
.aik-dup-hero { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 2px 0 12px; font-weight: 800; letter-spacing: -.04em; }
.aik-dup-hero #dev-duplicate-threshold-value { font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--accent-2, var(--accent)), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aik-dup-hero small { font-size: 24px; color: var(--hint); }
#dev-duplicate-threshold-slider { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 10px; outline: none; border: 0; padding: 0;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), rgba(255, 255, 255, .1) var(--p, 50%)); }
#dev-duplicate-threshold-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent); }
#dev-duplicate-threshold-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.aik-dup-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-dup-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.aik-dup-presets button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; font: inherit; color: var(--text); cursor: pointer; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s ease, border-color .2s ease, transform .12s ease; }
.aik-dup-presets button b { font-size: 13.5px; font-weight: 800; }
.aik-dup-presets button small { font-size: 12px; color: var(--hint); font-weight: 700; }
.aik-dup-presets button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-dup-presets button:active { transform: scale(.96); }
/* шаблон поста: превʼю */
.aik-tpl-prev { margin-top: 16px; }
.aik-tpl-cap { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-tpl-bubble { white-space: pre-wrap; padding: 14px 16px; border-radius: 18px 18px 18px 6px; font-size: 14.5px; line-height: 1.45; background: #1f2a3a; color: #e8eef7; box-shadow: 0 10px 22px -14px #000; }
.aik-tpl-bubble b { font-weight: 700; }
.aik-tpl-bubble span { color: #7cc4ff; }
/* логи: чіпи-фільтри */
#ai-key-decisions-filters { padding-bottom: 6px !important; scrollbar-width: none; }
#ai-key-decisions-filters::-webkit-scrollbar { display: none; }
#ai-key-decisions-filters > * { flex: none; border-radius: 999px !important; padding: 7px 14px !important; font-weight: 700; white-space: nowrap; }
#ai-key-decisions-list > *, #ai-key-channels-list > * { border-radius: 18px; }

/* ===== ШІ-ключ: окреме вікно додавання / зміни ключа ===== */
.aik-key-sheet { position: relative; padding: 26px 20px calc(22px + env(safe-area-inset-bottom)); max-height: calc(100 * var(--vh1, 1vh) - 104px); overflow-y: auto; text-align: center; }
.aik-key-sheet::before { display: none; }
.aik-key-x { position: absolute; top: 14px; right: 14px; }
.aik-key-orb { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 22px; color: #fff;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 18px 32px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .4); }
.aik-key-orb svg { width: 34px; height: 34px; }
.aik-key-title { font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.aik-key-sub { margin: 6px auto 0; max-width: 320px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.aik-key-current { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 13px; }
.aik-key-current span { color: var(--hint); font-weight: 700; }
.aik-key-current b { font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.aik-key-how { margin: 18px 0 0; text-align: left; }
.aik-key-how .aik-steps { padding: 0 14px; }
.aik-key-how .aik-open { width: calc(100% - 28px); margin: 0 14px 14px; }
.aik-key-form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.aik-key-form #ai-key-input { height: 58px; font-size: 16px; text-align: left; }
.aik-key-form .aik-paste-row { justify-content: flex-end; flex-wrap: wrap; }
.aik-key-form .aik-paste-row #ai-key-length-hint { flex: 1 1 100%; order: -1; }
.aik-key-form .pill-row { display: grid !important; grid-template-columns: 1.3fr 1fr; gap: 10px; margin: 4px 0 0 !important; flex-wrap: nowrap; }
.aik-key-form #ai-key-clear-btn { align-self: center; display: inline-flex; margin-top: 6px !important; }

/* Підрозділи «ШІ-ключ»: порожні кольорові плитки в заголовках прибрано; логи — як «Журнал новин» */
#aikey-logs-modal .modal-header span::before, #aikey-channels-modal .modal-header span::before, #aikey-rules-modal .modal-header span::before, #aikey-duplicates-modal .modal-header span::before, #aikey-template-modal .modal-header span::before, #aikey-test-modal .modal-header span::before { display: none !important; }
#ai-key-decisions-list.aik-log-list { max-height: none; margin: 0; padding: 0; overflow: visible; }
.aik-log-list .news-log-row { padding: 12px 2px; }
.aik-log-list .news-log-title { font-size: 15px; font-weight: 700; margin-top: 2px; }
.aik-kind { color: var(--kc); background: color-mix(in srgb, var(--kc) 16%, transparent); }
#ai-key-decisions-filters.news-log-filters { flex-wrap: nowrap; overflow-x: auto; margin: 4px 0 10px; scrollbar-width: none; }
#ai-key-decisions-filters.news-log-filters button { flex: none; white-space: nowrap; }

/* ===== Вікно ключа: акуратні кнопки ===== */
.aik-key-form { gap: 12px; }
.aik-field { position: relative; }
.aik-key-form .aik-field #ai-key-input { width: 100%; height: 58px; padding: 0 98px 0 18px; border-radius: 18px; }
.aik-field-btns { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; gap: 6px; }
.aik-key-form .aik-ibtn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0; border-radius: 12px; border: 0; cursor: pointer; color: var(--text);
  background: rgba(255, 255, 255, .08); transition: background .2s ease, transform .12s ease, color .2s ease; }
.aik-key-form .aik-ibtn svg { width: 19px; height: 19px; }
.aik-key-form .aik-ibtn span { display: none; }
.aik-key-form .aik-ibtn:active { transform: scale(.9); background: color-mix(in srgb, var(--accent) 28%, transparent); }
.aik-key-form #ai-key-paste-btn { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.aik-key-form .aik-hint { margin: -4px 4px 0; min-height: 14px; font-size: 12px; line-height: 1.3; color: var(--hint); }
.aik-actions { display: flex; flex-direction: column; gap: 10px; }
.aik-key-form #ai-key-save-btn { width: 100%; min-height: 58px; margin: 0 !important; border-radius: 18px; font-size: 16.5px; box-shadow: 0 16px 28px -14px var(--accent-glow); }
.aik-actions-row { display: flex; gap: 10px; }
.aik-actions-row > button { flex: 1 1 0; min-width: 0; min-height: 52px; margin: 0 !important; border-radius: 16px; font-size: 14.5px; }
.aik-key-form #ai-key-clear-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto !important; padding: 0 12px; border-radius: 16px; background: rgba(251, 113, 133, .08) !important; border: 1px solid rgba(251, 113, 133, .4); color: #fb7185 !important; font-weight: 800; }
.aik-key-form #ai-key-clear-btn::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 11v5m4-5v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2m-9 0 1 14h8l1-14M10 11v5m4-5v5'/%3E%3C/svg%3E") center / contain no-repeat; }
.aik-key-form #ai-key-clear-btn:active { background: rgba(251, 113, 133, .2) !important; }
/* Вікно ключа: хрестик у стандартній шапці (праворуч), як у інших вікнах */
.aik-key-sheet { padding-top: 18px; }
.aik-key-sheet .aik-key-head { margin: 0 0 4px; justify-content: space-between; }
.aik-key-sheet .aik-key-head .modal-close { position: static; margin-left: auto; }
.aik-key-sheet .aik-key-orb { margin-top: 0; }

/* ===== Правила автопостингу: бібліотека правил-чіпів ===== */
#aikey-rules-modal > .modal-sheet > .settings-card-desc { display: none; }
#aikey-rules-modal #dev-autopost-rules-template-card { display: none; }
.aik-rules { margin-bottom: 14px; }
.aik-rules-sub { margin-bottom: 14px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.aik-rules-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); font-size: 13.5px; font-weight: 700; color: var(--hint); }
.aik-rules-bar b { color: var(--accent-2, var(--accent)); font-size: 16px; font-variant-numeric: tabular-nums; }
.aik-rules-reset { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.aik-rules-reset:disabled { opacity: .35; pointer-events: none; }
.aik-rules-sets-label, .aik-rules-cat { margin: 16px 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-rules-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aik-set { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 16px; font: inherit; color: var(--text); cursor: pointer; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: transform .12s ease; }
.aik-set b { font-size: 14px; font-weight: 800; }
.aik-set small { flex: none; min-width: 24px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; text-align: center; background: rgba(255, 255, 255, .12); }
.aik-set:active { transform: scale(.97); }
.aik-rules-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.aik-rule { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 14px 0 10px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--hint); cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.aik-rule i { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); transition: background .2s ease, box-shadow .2s ease; }
.aik-rule.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-rule.on i { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.aik-rule:active { transform: scale(.96); }
.aik-custom { margin: 16px 0 12px; }
.aik-custom > summary { font-size: 13.5px; }
.aik-custom #dev-autopost-rules-input { margin: 0 14px 6px; width: calc(100% - 28px); }
.aik-custom > div { padding: 0 14px; }
.aik-custom #dev-autopost-rules-counter { display: block; padding: 0 14px 12px; }

/* ===== Віртуальний тестер правил ===== */
.aik-tester { margin: 18px 0 14px; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .09); }
.aik-tester-head { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.aik-tester-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow); }
.aik-tester-ico svg { width: 19px; height: 19px; }
.aik-tester-hint { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--hint); }
.aik-tester-samples { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.aik-tester-samples::-webkit-scrollbar { display: none; }
.aik-tester-samples button { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--hint); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.aik-tester-samples button:active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.aik-tester-in { width: 100%; box-sizing: border-box; min-height: 88px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; line-height: 1.45; resize: vertical; }
.aik-tester-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.aik-tester-run { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; margin-top: 10px; border: 0; border-radius: 16px; font: inherit; font-size: 15.5px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 12px 24px -12px var(--accent-glow); }
.aik-tester-run svg { width: 20px; height: 20px; }
.aik-tester-run:active { transform: scale(.98); }
.aik-tester-run.busy { pointer-events: none; opacity: .85; }
.aik-tester-run.busy svg { animation: aikTSpin 1s linear infinite; }
@keyframes aikTSpin { to { transform: rotate(360deg); } }
.aik-tester-out { margin-top: 14px; }
.aik-tester-out:empty { display: none; }
.aik-tester-skel { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.aik-tester-skel i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .06) 35%, color-mix(in srgb, var(--accent-2, var(--accent)) 38%, transparent) 50%, rgba(255, 255, 255, .06) 65%); background-size: 300% 100%; animation: rwSkel 1.6s ease-in-out infinite; }
.aik-tester-skel i:nth-child(2) { width: 82%; } .aik-tester-skel i:nth-child(3) { width: 58%; }
.aik-tester-err { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; color: #fb7185; background: rgba(251, 113, 133, .1); }
.aik-verdict { --vc: var(--accent); display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 45%, transparent); }
.aik-verdict.v-publish { --vc: #34d399; } .aik-verdict.v-review { --vc: #fbbf24; } .aik-verdict.v-skip { --vc: #fb7185; }
.aik-ring { position: relative; flex: none; width: 64px; height: 64px; }
.aik-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aik-ring circle { fill: none; stroke-width: 6; }
.aik-ring .bg { stroke: rgba(255, 255, 255, .09); }
.aik-ring .fg { stroke: var(--vc); stroke-linecap: round; filter: drop-shadow(0 0 5px var(--vc)); }
.aik-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.aik-verdict-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aik-verdict-text strong { font-size: 16.5px; font-weight: 800; color: var(--vc); letter-spacing: -.01em; }
.aik-verdict-text small { font-size: 12px; color: var(--hint); font-weight: 600; }
.aik-meters { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.aik-m { display: grid; grid-template-columns: 112px 1fr 30px; align-items: center; gap: 10px; font-size: 12.5px; }
.aik-m span { color: var(--hint); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aik-m div { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.aik-m i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); transition: width .8s cubic-bezier(.3, 1.1, .4, 1); }
.aik-m.bad i { background: linear-gradient(90deg, #f59e0b, #fb7185); }
.aik-m b { text-align: right; font-variant-numeric: tabular-nums; }
.aik-tester-cap { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-final { max-height: 260px; overflow-y: auto; }

/* ШІ-ключ: шапка повністю в кольорах активної теми (статус — лише маленька крапка), без зеленого сяйва */
.aik-hero, .aik-hero[data-state] { --st: var(--accent); --sc: #34d399;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent); box-shadow: 0 20px 44px -26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .07); }
.aik-hero[data-state="invalid"] { --sc: #fb7185; } .aik-hero[data-state="none"], .aik-hero[data-state="loading"] { --sc: var(--hint); }
.aik-hero .aik-orb { background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 14px 26px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .4); }
.aik-state { display: flex; align-items: center; gap: 9px; }
.aik-state::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 25%, transparent), 0 0 10px var(--sc); }
.aik-day.on i { background: var(--accent-2, var(--accent)); box-shadow: 0 0 8px var(--accent-glow); }
.aik-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.aik-ring-fg { stroke: var(--accent-2, var(--accent)); }

/* «Тест правил»: новий тестер — головний, старе поле тесту сховано */
.aik-test-sheet > .muted, .aik-test-sheet > div[style*="position:relative"], .aik-test-sheet #dev-autopost-rules-test-suggest, .aik-test-sheet #dev-autopost-rules-test-btn, .aik-test-sheet #dev-autopost-rules-test-result { display: none !important; }
.aik-test-sheet .aik-tester { margin-top: 4px; }
/* «Шаблон поста»: набори й чіпи */
.aik-tpl-sets { margin: 4px 0 16px; }
.aik-tpl-label { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-tpl-setrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aik-tpl-setrow button { min-height: 46px; padding: 0 14px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); cursor: pointer; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); transition: transform .12s ease; }
.aik-tpl-setrow button:active { transform: scale(.97); }
.aik-tpl-hint { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--hint); }
.aik-tpl-block { margin-bottom: 16px; }
.aik-tpl-block input { margin-bottom: 10px !important; }
.aik-tpl-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.aik-tpl-chips::-webkit-scrollbar { display: none; }
.aik-tchip { flex: none; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--hint); cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease; }
.aik-tchip.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-tchip:active { transform: scale(.95); }

/* Швидкі емодзі: у стилі панелі редактора — вкладки-категорії, сітка плиток */
.emoji-quickbar-card { padding: 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); animation: nfIn .25s ease both; }
.emoji-quickbar-header span { font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.emoji-quickbar-close { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.07); }
.eq-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 4px 0 12px; scrollbar-width: none; }
.eq-tabs::-webkit-scrollbar { display: none; }
.eq-tabs button { flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--hint); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.eq-tabs button.on { color: var(--text); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.emoji-quickbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-height: 232px; overflow-y: auto; scrollbar-width: none; }
.emoji-quickbar-btn { aspect-ratio: 1; min-width: 0; width: 100%; height: auto; display: grid; place-items: center; font-size: 26px; border-radius: 16px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.05); transition: transform .12s cubic-bezier(.3,1.5,.5,1), background .2s; }
.emoji-quickbar-btn:active { transform: scale(.88); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.emoji-quickbar-btn .eq-flag { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Тестер: нуль */
.aik-ring b { font-variant-numeric: lining-nums proportional-nums; font-feature-settings: "zero" 0, "tnum" 0; }
.aik-ring .fg[data-len="0.0"] { opacity: 0; }
.aik-verdict-text .aik-why { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--hint); }
/* Канали з цим ключем */
#ai-key-channels-list { gap: 10px !important; }
.ai-key-channel-card { padding: 12px 14px; border-radius: 20px; }
.ai-key-channel-card .settings-card-header { align-items: center; gap: 14px; }
.ai-key-channel-card .channel-avatar { width: 48px !important; height: 48px !important; min-width: 48px !important; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-ch-title { font-size: 16px !important; font-weight: 800; line-height: 1.25; white-space: normal !important; overflow: visible !important; }
.aik-ch-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.aik-ch-key { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border-radius: 999px; font-size: 11.5px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.aik-ch-key svg { width: 14px; height: 14px; }
.aik-ch-team { font-size: 12.5px; color: var(--hint); white-space: nowrap; }
/* Редактор: заголовок і кнопка «Зберегти» */
#editor-modal > .modal-sheet > .modal-header > span:first-child, #editor-modal .modal-header > span:first-child { font-size: 24px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent-2, var(--accent)) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#editor-modal .modal-sticky-footer { gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, transparent, var(--bg, #0a0713) 28%); }
#editor-publish-btn { position: relative; overflow: hidden; min-height: 58px; border: 0; border-radius: 20px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent)));
  box-shadow: 0 18px 32px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12); transition: transform .14s cubic-bezier(.3,1.5,.5,1), box-shadow .2s ease; }
#editor-publish-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-130%); animation: pubShine 6s ease-in-out infinite; pointer-events: none; }
@keyframes pubShine { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
#editor-publish-btn svg { width: 22px; height: 22px; stroke-width: 2.8; padding: 4px; box-sizing: content-box; border-radius: 50%; background: rgba(255,255,255,.22); }
#editor-publish-btn:active { transform: scale(.975); box-shadow: 0 8px 18px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
#editor-modal .modal-sticky-footer .icon-action-btn { width: 58px; height: 58px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) { #editor-publish-btn::after { animation: none; display: none; } }

/* Редактор: нижня панель в одному стилі із шапкою (прості плитки), без зайвого блиску */
#editor-modal .modal-sticky-footer { align-items: center; gap: 10px; }
#editor-publish-btn { min-height: 52px; border-radius: 16px; font-size: 16px; box-shadow: 0 10px 22px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
#editor-publish-btn::after { display: none; }
#editor-publish-btn svg { width: 20px; height: 20px; padding: 0; background: none; border-radius: 0; stroke-width: 2; }
#editor-modal .modal-sticky-footer .icon-action-btn { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.06); border: 0; box-shadow: none; }
#editor-modal .modal-sticky-footer .icon-action-btn.icon-action-danger { background: rgba(251,113,133,.1); color: #fb7185; }
#editor-modal .modal-sticky-footer .icon-action-btn:active { transform: scale(.94); }
.rw-skel { display: none !important; }

/* Історія версій: нижній лист + часова лінія */
.wm-remover-overlay:has(.editor-history-list) { align-items: flex-end; padding: 0; }
.wm-remover-overlay:has(.editor-history-list) .wm-remover-panel { width: 100%; max-width: 480px; max-height: calc(100 * var(--vh1, 1vh) - 110px); margin: 0; border-radius: 28px 28px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; animation: slideUp .28s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%), var(--bg, #0a0713); border: 1px solid var(--card-border); border-bottom: 0; box-shadow: 0 -24px 60px rgba(0,0,0,.6); }
.wm-remover-panel:has(.editor-history-list) .wm-remover-header { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.editor-history-list { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-left: 18px; max-height: none; overflow: visible; }
.editor-history-list::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent), rgba(255,255,255,.08)); }
.editor-history-item { position: relative; display: block; width: 100%; text-align: left; padding: 14px; border-radius: 20px; font: inherit; color: var(--text); cursor: pointer; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); transition: transform .12s ease, border-color .2s ease; }
.editor-history-item:active { transform: scale(.985); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.editor-history-item.is-latest { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.editor-history-item .hist-dot { position: absolute; left: -18px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--hc, var(--hint)); box-shadow: 0 0 0 3px var(--bg, #0a0713), 0 0 10px var(--hc, transparent); }
.hk-opened { --hc: #60a5fa; } .hk-before { --hc: #fbbf24; } .hk-after { --hc: #34d399; } .hk-other { --hc: var(--accent); }
.editor-history-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.editor-history-item-label { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--hc); background: color-mix(in srgb, var(--hc) 16%, transparent); }
.editor-history-item-time { font-size: 12px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.editor-history-item-snippet { font-size: 14px; line-height: 1.4; color: var(--text); opacity: .9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hist-restore { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.hist-restore svg { width: 14px; height: 14px; }

/* ШІ-ключ: статистика по днях */
.aik-day { background: none; border: 0; padding: 4px 0 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aik-day:active i { transform: scale(.85); }
.aik-day i { transition: transform .15s ease, background .3s ease, box-shadow .3s ease; }
.aik-day.today { }
.aik-day.today i { outline: 0; }
.aik-day.sel i { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.aik-day.sel em { color: var(--text); }
.aik-spark { pointer-events: none; }
.aik-daydetail { padding: 14px 16px; border-radius: 22px; background: rgba(0,0,0,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); animation: nfIn .25s ease both; }
.aik-dd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aik-dd-head b { font-size: 14px; font-weight: 800; text-transform: capitalize; }
.aik-dd-head em { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.aik-dd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.aik-dd-num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.aik-dd-num small { margin-left: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: 0; color: var(--hint); }
.aik-dd-cmp { font-size: 12.5px; font-weight: 800; color: var(--hint); }
.aik-dd-cmp.up { color: #34d399; } .aik-dd-cmp.down { color: #fbbf24; }
.aik-dd-bar { height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.aik-dd-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); transition: width .5s ease; }
.aik-dd-foot { margin-top: 8px; font-size: 11.5px; color: var(--hint); }

/* Шапка редактора: кнопки «історія» і «закрити» — однакові плитки, чіткі іконки */
#editor-modal .modal-header-actions { gap: 10px; }
#editor-modal .modal-header-actions .icon-action-btn, #editor-modal #editor-close-btn { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .12s ease, background .2s ease; }
#editor-modal #editor-history-btn svg, #editor-modal #editor-close-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text); }
#editor-modal #editor-history-btn svg { color: var(--accent-2, var(--accent)); }
#editor-modal #editor-history-btn:active, #editor-modal #editor-close-btn:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Планування: швидкі пресети — плитки-чіпи, «Найкращий час» виділено */
.sched-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sched-presets .chip-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); cursor: pointer;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); transition: transform .12s cubic-bezier(.3,1.5,.5,1), background .2s ease, border-color .2s ease; }
.sched-presets .chip-action-btn:active { transform: scale(.96); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sched-presets .best-time-btn { grid-column: 1 / -1; color: #fff; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -12px var(--accent-glow); }
.sched-presets .best-time-btn svg { width: 18px; height: 18px; }
.best-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.best-slots > * { padding: 8px 14px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* Окремий лист зі статистикою використання */
#aik-metrics .aik-card2 { cursor: pointer; }
.aik-daydetail { display: none; }

/* Планування (сильніші селектори — попередні правила перекривались) */
#editor-modal #editor-sched-presets.sched-presets { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; padding: 0; }
#editor-modal #editor-sched-presets > button { display: flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 50px; margin: 0; padding: 0 12px; border-radius: 16px; font-size: 14.5px; font-weight: 800; color: var(--text); text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s cubic-bezier(.3,1.5,.5,1), background .2s ease, border-color .2s ease; }
#editor-modal #editor-sched-presets > button:active { transform: scale(.95); border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
#editor-modal #editor-sched-presets > #editor-best-time { grid-column: 1 / -1; min-height: 54px; font-size: 15.5px; color: #fff; border: 0 !important;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))) !important; box-shadow: 0 14px 26px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
#editor-modal #editor-best-time svg { width: 20px; height: 20px; }
#editor-modal #editor-best-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#editor-modal #editor-best-slots[hidden] { display: none; }
#editor-modal #editor-schedule-datetime-row { padding: 14px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }

/* Варіанти від ШІ: плитки-вибір з галочкою, великі кнопки внизу */
.av-sheet { max-height: calc(100 * var(--vh1, 1vh) - 104px); overflow-y: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.av-sheet .modal-header { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.av-hint { margin-bottom: 4px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.av-label { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.av-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.av-group { display: flex; flex-direction: column; gap: 8px; }
.av-opt { position: relative; width: 100%; padding: 14px 52px 14px 16px; border-radius: 18px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: left; color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.1); transition: transform .12s cubic-bezier(.3,1.5,.5,1), border-color .2s ease, background .2s ease; }
.av-opt::after { content: ""; position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); transition: background .2s ease, box-shadow .2s ease; }
.av-opt:active { transform: scale(.985); }
.av-opt.active { border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); box-shadow: 0 12px 24px -16px var(--accent-glow); }
.av-opt.active::after { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.av-opt.av-tags { color: var(--accent-2, var(--accent)); }
.av-foot { position: sticky; bottom: -1px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 18px; padding-top: 12px; background: linear-gradient(180deg, transparent, var(--bg, #0a0713) 30%); }
.av-foot .pill { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; border-radius: 16px; font-size: 15px; font-weight: 800; }
.av-foot .pill.on { color: #fff; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 12px 24px -12px var(--accent-glow); }
.av-foot .pill.on:disabled { opacity: .4; box-shadow: none; }

/* Кнопка «Заголовок» в редакторі */
#editor-ai-title-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; }
#editor-ai-title-btn svg { width: 20px; height: 20px; color: var(--accent-2, var(--accent)); }
#editor-ai-title-btn:active { transform: scale(.96); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
#aik-metrics .aik-card2 { cursor: default; }
.aik-card2.flip b, .aik-card2.flip .aik-l, .aik-card2.flip .aik-sub { animation: aikFlip .3s ease both; }
@keyframes aikFlip { from { opacity: 0; transform: translateY(6px); } }
.aik-sp-dot { transition: cx .3s ease, cy .3s ease; }
.aik-card2 .aik-l { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* «Заголовок»: замість обертання іконки — три рядки «пишуться» по черзі, сяйво кнопки */
#editor-ai-title-btn.loading { pointer-events: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); animation: titleGlow 1.4s ease-in-out infinite; }
#editor-ai-title-btn.loading svg { animation: none !important; }
#editor-ai-title-btn.loading svg path { transform-box: fill-box; transform-origin: left center; animation: titleLine 1.2s cubic-bezier(.4,0,.2,1) infinite; }
#editor-ai-title-btn.loading svg path:nth-child(2) { animation-delay: .15s; }
#editor-ai-title-btn.loading svg path:nth-child(3) { animation-delay: .3s; }
@keyframes titleLine { 0% { transform: scaleX(.15); opacity: .35; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .35; } }
@keyframes titleGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px -4px var(--accent-glow); } }
@media (prefers-reduced-motion: reduce) { #editor-ai-title-btn.loading, #editor-ai-title-btn.loading svg path { animation: none; } }

/* Прибрати водяний знак / Обрізати фото: лист нижче панелі Telegram, зафіксовані шапка й кнопки, фото по центру */
.wm-remover-overlay:not(:has(.editor-history-list)) { align-items: flex-end; justify-content: center; padding: 0; background: rgba(5,4,10,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wm-remover-overlay:not(:has(.editor-history-list)) > .wm-remover-panel { display: flex; flex-direction: column; width: 100%; max-width: 480px; height: calc(100 * var(--vh1, 1vh) - 118px); max-height: none; margin: 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); overflow: hidden; border-radius: 28px 28px 0 0; border-bottom: 0; animation: slideUp .28s ease;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 25%), var(--bg, #0a0713); box-shadow: 0 -24px 60px rgba(0,0,0,.6); }
.wm-remover-panel:not(:has(.editor-history-list)) .wm-remover-header { flex: none; margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.wm-remover-panel:not(:has(.editor-history-list)) .wm-remover-hint { flex: none; margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; }
.wm-remover-panel .wm-remover-media-outer { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 10px; border-radius: 22px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); overflow: auto; }
.wm-remover-panel .wm-remover-media-wrap img, .wm-remover-panel .wm-remover-media-wrap video { max-height: calc(100 * var(--vh1, 1vh) - 380px); border-radius: 14px; }
.wm-remover-panel .crop-tool-rotate-row { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.wm-remover-panel .crop-tool-rotate-row .chip-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); }
.wm-remover-panel .crop-tool-rotate-row .chip-action-btn svg { width: 20px; height: 20px; color: var(--accent-2, var(--accent)); }
.wm-remover-panel .crop-tool-rotate-row .chip-action-btn:active { transform: scale(.96); }
.wm-remover-panel .crop-tool-rotate-row [data-action^="flip-"] { min-height: 40px; }
.wm-remover-panel .crop-tool-rotate-row [data-action^="flip-"].active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.wm-remover-panel .crop-ratio-row .chip-action-btn.active { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.wm-remover-panel .crop-tool-hint-small { flex: none; margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--hint); }
.wm-remover-panel .wm-preview-toggle { flex: none; }
.wm-remover-panel .crop-ratio-row { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; }
.wm-remover-panel .crop-ratio-row .chip-action-btn { min-height: 38px; border-radius: 12px; font-weight: 800; }
.wm-remover-panel .crop-adjust-block { flex: none; margin-top: 10px; max-height: 38vh; overflow-y: auto; padding-right: 2px; }
.wm-remover-panel .wm-remover-media-outer { min-height: 120px; }
.wm-remover-panel .pill-row { flex: none; display: grid !important; grid-template-columns: 1fr 1.5fr; gap: 10px; margin: 12px 0 0 !important; }
.wm-remover-panel .pill-row .pill { display: flex; align-items: center; justify-content: center; min-height: 54px; margin: 0; border-radius: 18px; font-size: 15.5px; font-weight: 800; }
.wm-remover-panel .pill-row .pill.on { color: #fff; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 14px 26px -14px var(--accent-glow); }
.wm-remover-panel .pill-row .pill.on:disabled { opacity: .4; box-shadow: none; }

/* Кнопки «Зберегти»: іконка не крутиться, стан завантаження — м'яке мерехтіння кнопки */
#editor-publish-btn.loading svg, #editor-publish-btn.loading .icon, .primary-btn.loading svg, .wm-remover-panel .pill.on.loading svg, [data-action="crop-save"].loading svg, #ai-key-save-btn.loading svg { animation: none !important; transform: none !important; }
#editor-publish-btn.loading, #ai-key-save-btn.loading, .wm-remover-panel .pill.on.loading { pointer-events: none; animation: saveBreath 1.1s ease-in-out infinite; }
@keyframes saveBreath { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { #editor-publish-btn.loading, #ai-key-save-btn.loading { animation: none; } }

/* Планування: плавне відкриття/закриття блоку, «Найкращий час» спокійніший */
#editor-modal #editor-schedule-datetime-row { overflow: hidden; transform-origin: top; }
#editor-modal #editor-schedule-datetime-row.sch-in { animation: schIn .34s cubic-bezier(.2,.8,.3,1) both; }
#editor-modal #editor-schedule-datetime-row.sch-out { animation: schOut .26s cubic-bezier(.4,0,.6,1) both; pointer-events: none; }
@keyframes schIn { from { opacity: 0; transform: translateY(-10px) scale(.98); max-height: 0; } to { opacity: 1; transform: none; max-height: 640px; } }
@keyframes schOut { from { opacity: 1; transform: none; max-height: 640px; } to { opacity: 0; transform: translateY(-10px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; } }
#editor-modal #editor-sched-presets > #editor-best-time { color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent) !important; box-shadow: none;
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important; }
#editor-modal #editor-best-time svg { color: var(--accent-2, var(--accent)); }
#editor-modal #editor-sched-presets > #editor-best-time:active { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; }
@media (prefers-reduced-motion: reduce) { #editor-modal #editor-schedule-datetime-row.sch-in, #editor-modal #editor-schedule-datetime-row.sch-out { animation: none; } }

/* Кнопка «Перегляд»: як «Заголовок», око кліпає */
#editor-preview-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; border-radius: 16px; font-size: 15px; font-weight: 800; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .12s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; }
#editor-preview-btn:active { transform: scale(.96); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
#editor-preview-btn .eye-ico { width: 22px; height: 22px; color: var(--accent-2, var(--accent)); overflow: visible; }
#editor-preview-btn .eye-ico .eye-lid, #editor-preview-btn .eye-ico .eye-iris { transform-box: fill-box; transform-origin: center; animation: eyeBlink 4.2s ease-in-out infinite; }
#editor-preview-btn:active .eye-ico .eye-lid, #editor-preview-btn:active .eye-ico .eye-iris { animation-duration: .6s; }
@keyframes eyeBlink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } 96% { transform: scaleY(1); } 97.5% { transform: scaleY(.08); } 99% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { #editor-preview-btn .eye-ico .eye-lid, #editor-preview-btn .eye-ico .eye-iris { animation: none; } }

/* Попередній перегляд на телефоні: лист нижче панелі Telegram, фіксована шапка, чипи каналів і «бульбашка» як у Telegram */
body:not(.desktop-platform) #editor-preview-modal .modal-sheet { display: flex; flex-direction: column; height: calc(100 * var(--vh1, 1vh) - 118px); max-height: none; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
body:not(.desktop-platform) #editor-preview-modal .modal-header { flex: none; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
#editor-preview-modal .preview-channel-tabs { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
#editor-preview-modal .preview-channel-tabs::-webkit-scrollbar { display: none; }
#editor-preview-modal .preview-channel-tabs > * { flex: none; }
body:not(.desktop-platform) #editor-preview-modal .tg-chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
#editor-preview-modal .tg-bubble { max-width: 100%; border-radius: 18px 18px 18px 6px; overflow: hidden; box-shadow: 0 10px 22px -14px #000; }
#editor-preview-modal .tg-bubble img, #editor-preview-modal .tg-bubble video { max-width: 100%; height: auto; }

/* Панель форматування редактора: чисті кнопки, без «туману» по краях */
#editor-modal .editor-flat-toolbar { -webkit-mask: none !important; mask: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important; box-shadow: none !important;
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 22px; padding: 10px; gap: 8px; overflow: visible !important; }
#editor-modal .editor-flat-toolbar::before, #editor-modal .editor-flat-toolbar::after { display: none !important; content: none !important; }
#editor-modal .editor-flat-toolbar .tb-btn { height: 46px; min-height: 46px; border-radius: 14px; font-size: 17px; font-weight: 800; color: var(--text); box-shadow: none !important; filter: none !important;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); transition: transform .12s cubic-bezier(.3,1.5,.5,1), background .2s ease, color .2s ease, border-color .2s ease; }
#editor-modal .editor-flat-toolbar .tb-btn svg { width: 20px; height: 20px; }
#editor-modal .editor-flat-toolbar .tb-btn:active { transform: scale(.9); background: color-mix(in srgb, var(--accent) 24%, transparent); }
#editor-modal .editor-flat-toolbar .tb-btn.active, #editor-modal .editor-flat-toolbar .tb-btn[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--accent) 38%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }

/* Панель форматування: прихована за кнопкою, плавно розкривається; сітка по 5 кнопок
   (15 кнопок / 5 колонок = рівно 3 повних ряди, без самотньої кнопки в хвості —
   на 7 колонках 15 кнопок давали 2 повних ряди + 1 кнопку саму в третьому) */
.fmt-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 8px; padding: 0 14px; border-radius: 16px; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--text); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1); transition: border-color .2s ease, background .2s ease; }
.fmt-toggle > svg:first-child { width: 20px; height: 20px; color: var(--accent-2, var(--accent)); }
.fmt-toggle span { flex: 1; }
.fmt-toggle .fmt-chev { width: 20px; height: 20px; color: var(--hint); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.fmt-toggle.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fmt-toggle.open .fmt-chev { transform: rotate(180deg); }
.fmt-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0; transition: grid-template-rows .34s cubic-bezier(.2,.8,.3,1), opacity .25s ease, margin .3s ease; }
.fmt-wrap.open { grid-template-rows: 1fr; opacity: 1; margin: 0 0 10px; }
.fmt-inner { min-height: 0; overflow: hidden; }
body:not(.desktop-platform) #editor-modal .editor-flat-toolbar { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; padding: 8px !important; margin: 0 !important; }
#editor-modal .editor-flat-toolbar { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 6px !important; padding: 8px !important; margin: 0 !important; }
#editor-modal .editor-flat-toolbar .tb-btn { height: 42px; min-height: 42px; font-size: 16px; border-radius: 12px; }
#editor-modal .editor-flat-toolbar .tb-btn svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .fmt-wrap { transition: none; } }

/* Медіа в редакторі: акуратна картка, скляні кнопки на фото, широка кнопка «Додати» */
#editor-modal .media-preview-card { padding: 12px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
#editor-modal .album-gallery { gap: 10px; }
#editor-modal .album-thumb:not(.album-thumb-add) { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 26px -16px #000; }
#editor-modal .album-thumb:not(.album-thumb-add)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
#editor-modal .album-thumb-edit, #editor-modal .album-thumb-delogo, #editor-modal .album-thumb-remove { z-index: 3; border: 1px solid rgba(255,255,255,.22); background: rgba(10,8,18,.55) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; transition: transform .12s ease, background .2s ease; }
#editor-modal .album-thumb-remove { background: rgba(120,20,40,.55) !important; }
#editor-modal .album-thumb-edit:active, #editor-modal .album-thumb-delogo:active, #editor-modal .album-thumb-remove:active { transform: scale(.88); }
#editor-modal .album-type-badge { z-index: 3; background: rgba(10,8,18,.55); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#editor-modal .album-thumb-add { display: flex; align-items: center; justify-content: flex-start; gap: 14px; flex: 1 1 100% !important; width: 100% !important; height: auto !important; min-height: 72px; padding: 12px 16px; border-radius: 20px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); transition: background .2s ease, transform .12s ease; }
#editor-modal .album-thumb-add:active { transform: scale(.985); background: color-mix(in srgb, var(--accent) 16%, transparent); }
#editor-modal .album-thumb-add-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 18px -10px var(--accent-glow); }
#editor-modal .album-thumb-add-ico svg { width: 22px; height: 22px; }
.album-thumb-add-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.album-thumb-add-txt b { font-size: 15.5px; font-weight: 800; color: var(--text); }
.album-thumb-add-txt small { font-size: 12px; color: var(--hint); }
#editor-modal .media-preview-controls { margin-top: 10px; }

/* «Форматування» і «Додати фото»: плитки-іконки, чітка типографіка */
.fmt-toggle { min-height: 56px; padding: 0 14px 0 10px; border-radius: 20px; gap: 12px; }
.fmt-toggle .fmt-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 13px; font-style: normal; font-size: 17px; font-weight: 900; line-height: 1; color: #fff; text-decoration: none;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.fmt-toggle .fmt-ico u { text-decoration: none; font-style: italic; font-weight: 700; font-size: 15px; margin-left: 1px; opacity: .9; }
.fmt-toggle span { font-size: 15.5px; letter-spacing: -.01em; }
.fmt-toggle .fmt-chev { display: block; width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--hint); }
.fmt-toggle.open .fmt-chev { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }

#editor-modal .album-thumb-add { min-height: 84px; padding: 14px 16px 14px 14px; gap: 14px; border-radius: 22px; border-width: 1.5px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
#editor-modal .album-thumb-add .album-thumb-add-ico { width: 52px; height: 52px; border-radius: 17px !important; border: 0 !important; outline: 0 !important; box-shadow: 0 12px 22px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35) !important; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))) !important; }
#editor-modal .album-thumb-add .album-thumb-add-ico svg { width: 26px !important; height: 26px !important; stroke: #fff; stroke-width: 2.4; }
.album-thumb-add-txt b { font-size: 16px; letter-spacing: -.01em; }
.album-thumb-add-txt small { font-size: 12.5px; }

/* Завантаження фото: великий dropzone, коли в пості ще немає медіа */
.album-thumb-add .ico-up { display: none; }
#editor-modal .album-gallery > .album-thumb-add:only-child { flex-direction: column; justify-content: center; align-items: center; gap: 12px; min-height: 190px; padding: 26px 20px; text-align: center; border-radius: 26px; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), color-mix(in srgb, var(--accent) 5%, transparent); }
#editor-modal .album-gallery > .album-thumb-add:only-child .ico-plus { display: none; }
#editor-modal .album-gallery > .album-thumb-add:only-child .ico-up { display: block; }
#editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-ico { width: 64px; height: 64px; border-radius: 20px !important; animation: dzFloat 3s ease-in-out infinite; }
#editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-ico svg { width: 30px !important; height: 30px !important; }
#editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-txt { align-items: center; gap: 4px; }
#editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-txt b { font-size: 17px; }
@keyframes dzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-ico { animation: none; } }

/* Адаптація під розкладки ПК: масштаб задає JS (html{zoom} за шириною/висотою вікна); тут — межі, щоб нічого не ламалось на крайніх розмірах */
@media (min-width: 1000px) and (max-width: 1500px) { body.desktop-platform .modal-sheet { max-width: 560px; } }
@media (min-width: 5000px) { body.desktop-platform .modal-sheet { max-width: 640px; } }
html.ui-zoomed body.desktop-platform { overflow: hidden; }

/* ===== Адаптація під планшети й різні телефони (мобільна гілка) =====
   Телефони: 360×800 (Android масс-маркет), 393×852 (iPhone), 412×892 (Android флагман), 430×932 (iPhone Pro Max) — рідка верстка, на вузьких трохи стискаємо відступи.
   Планшети: 820×1180, 1024×1366 — ширший робочий стовпчик замість вузької смуги 480px по центру. */
@media (max-width: 370px) {
  body.mobile-platform .app { padding-left: 10px; padding-right: 10px; }
  body.mobile-platform .bottom-nav .nav-btn { font-size: 10.5px; }
  body.mobile-platform .modal-sheet { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 700px) {
  body.mobile-platform .app { max-width: 680px; }
  body.mobile-platform .bottom-nav { max-width: 640px; left: 50%; right: auto; width: calc(100% - 32px); transform: translateX(-50%); border-radius: 26px; bottom: 12px; }
  body.mobile-platform .modal-sheet, body.mobile-platform .confirm-dialog { max-width: 620px; }
  body.mobile-platform .wm-remover-overlay > .wm-remover-panel { max-width: 620px !important; }
  body.mobile-platform #toast-container { max-width: 620px; left: 50%; right: auto; width: 100%; transform: translateX(-50%); }
  body.mobile-platform .chip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  body.mobile-platform .app { max-width: 820px; }
  body.mobile-platform .bottom-nav { max-width: 760px; }
  body.mobile-platform .modal-sheet, body.mobile-platform .confirm-dialog { max-width: 720px; }
  body.mobile-platform .wm-remover-overlay > .wm-remover-panel { max-width: 720px !important; }
  body.mobile-platform #toast-container { max-width: 720px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.mobile-platform .modal-sheet { max-height: calc(100 * var(--vh1, 1vh) - 24px); }
  body.mobile-platform .bottom-nav { padding-top: 4px; padding-bottom: 6px; }
}

/* ПК: вікна (редактор тощо) центруються в робочій області праворуч від сайдбару й не залазять під нього */
body.desktop-platform { --sb-off: 292px; }
body.desktop-platform.sidebar-collapsed { --sb-off: 72px; }
body.desktop-platform.sb-k { --sb-off: calc(292px * var(--sbk, 1)); }
body.desktop-platform.sb-k.sidebar-collapsed { --sb-off: calc(72px * var(--sbk, 1)); }
@media (min-width: 900px) {
  body.desktop-platform .modal-overlay:not(.ov-ghost), body.desktop-platform .wm-remover-overlay, body.desktop-platform .notify-overlay { padding-left: var(--sb-off) !important; box-sizing: border-box; }
  body.desktop-platform #editor-modal > .modal-sheet { max-width: min(1500px, calc(100% - 48px)); }
}

/* ПК: на широких екранах редактор збільшується (дрібний текст і кнопки у великому порожньому вікні) */
@media (min-width: 900px) {
  body.desktop-platform #editor-modal > .modal-sheet { zoom: var(--ed-zoom, 1); max-width: calc(1500px / var(--ed-zoom, 1)); max-height: calc((100 * var(--vh1, 1vh) - 40px) / var(--ed-zoom, 1)); }
}

/* ПК: усі вікна меню (налаштування каналу, підрозділи, діалоги) масштабуються під ширину екрана так само, як редактор */
@media (min-width: 900px) {
  body.desktop-platform .modal-overlay:not(#editor-modal) > .modal-sheet { zoom: var(--ed-zoom, 1); max-width: calc(760px / var(--ed-zoom, 1)); max-height: calc((100 * var(--vh1, 1vh) - 48px) / var(--ed-zoom, 1)); }
  body.desktop-platform .wm-remover-overlay > .wm-remover-panel { zoom: var(--ed-zoom, 1); max-width: calc(760px / var(--ed-zoom, 1)) !important; }
  body.desktop-platform .modal-overlay:not(#editor-modal) { align-items: center; }
}

/* ПК: редактор — компактне центроване вікно того ж типу, що «Налаштування каналу» (не на пів-екрана) */
@media (min-width: 900px) {
  body.desktop-platform #editor-modal { align-items: center; justify-content: center; }
  body.desktop-platform #editor-modal > .modal-sheet { max-width: calc(980px / var(--ed-zoom, 1)); width: 100%; max-height: calc((100 * var(--vh1, 1vh) - 48px) / var(--ed-zoom, 1)); border-radius: 28px; }
}

/* Сайдбар ПК: щільність за висотою робочої області (HD 1280×720, WXGA 1366×768, вікна) */
body.desktop-platform.sb-short .sidebar-search { margin-bottom: 8px; }
body.desktop-platform.sb-short .nav-btn-extra { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
body.desktop-platform.sb-short .nav-btn { padding-top: 8px; padding-bottom: 8px; }
body.desktop-platform.sb-short .sidebar-spotify { transform: scale(.92); transform-origin: bottom left; margin-bottom: -6px; }
body.desktop-platform.sb-short .bottom-nav { overflow-y: auto; scrollbar-width: none; }
body.desktop-platform.sb-short .bottom-nav::-webkit-scrollbar { display: none; }
body.desktop-platform.sb-tiny .sidebar-spotify { display: none !important; }
body.desktop-platform.sb-tiny .nav-btn-extra { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
body.desktop-platform.sb-tiny .sidebar-brand { padding-top: 6px; padding-bottom: 6px; }
/* Ширина колонки сайдбару зростає на дуже широких екранах (QHD → 8K), обмежується на вузьких */
@media (max-width: 1450px) { body.desktop-platform:not(.sidebar-collapsed) .app { grid-template-columns: 252px 1fr; } }

/* ПК: усі вікна-листи однакової висоти з відступами зверху й знизу (щоб не впиратись у краї екрана) */
@media (min-width: 900px) {
  body.desktop-platform .modal-overlay:not(#editor-modal) > .modal-sheet { max-height: calc((100 * var(--vh1, 1vh) - 96px) / var(--ed-zoom, 1)); border-radius: 28px; padding-bottom: 22px; }
  body.desktop-platform #editor-modal > .modal-sheet { max-height: calc((100 * var(--vh1, 1vh) - 96px) / var(--ed-zoom, 1)); }
}

/* Реклама: порожній стан «Немає запланованої/опублікованої реклами» — іконка й текст разом по центру (на ПК розʼїжджались по краях) */
#ads-scheduled-list > .card-row.muted, #ads-published-list > .card-row.muted { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 150px; padding: 26px 20px; font-size: 15px; font-weight: 700; color: var(--hint); }
#ads-scheduled-list > .card-row.muted::before, #ads-published-list > .card-row.muted::before { position: static !important; margin: 0 !important; flex: none; }
#ads-scheduled-list > .card-row.muted > *, #ads-published-list > .card-row.muted > * { margin: 0 !important; }

/* Реклама: порожній стан — без подвійної рамки (контейнер списку + пунктирна картка всередині) */
#ads-scheduled-list:has(> .card-row.muted:only-child), #ads-published-list:has(> .card-row.muted:only-child) { padding: 0; background: none; border: 0; box-shadow: none; }
#ads-scheduled-list > .card-row.muted:only-child, #ads-published-list > .card-row.muted:only-child { margin: 0; border: 1.5px dashed color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--accent) 4%, transparent); box-shadow: none; }

/* Реклама → «Прийом реклами по каналах»: акуратні картки з ціною-чипом, рівна сітка */
#ads-settings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
@media (max-width: 899px) { #ads-settings-list { grid-template-columns: 1fr; } }
#ads-settings-list > .settings-card, #ads-settings-list > .card-row, #ads-settings-list > div { margin: 0 !important; padding: 14px 16px; border-radius: 22px; min-height: 84px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; cursor: pointer; }
#ads-settings-list > *:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
#ads-settings-list > *:active { transform: scale(.985); }
#ads-settings-list .channel-avatar { width: 52px !important; height: 52px !important; min-width: 52px !important; box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 0 0 3.5px color-mix(in srgb, var(--accent) 55%, transparent); }
#ads-settings-list .settings-card-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
#ads-settings-list .settings-card-desc { margin-top: 5px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent-2, var(--accent)); }
#ads-settings-list .oblast-summary-chevron, #ads-settings-list .set-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; background: rgba(255,255,255,.06); color: var(--hint); }

/* Сайдбар «Сучасний»: розміри як у «Класичного» (плоскі рядки 44 px, іконка без плитки, заливка активного пункту) */
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn-extra { min-height: 44px; padding: 8px 14px; gap: 16px; border-radius: 12px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-primary-ico, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-extra-ico { width: 24px !important; height: 24px !important; min-height: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-primary-ico svg, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-extra-ico svg { width: 22px; height: 22px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn > span:not(.nav-primary-ico), body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn-extra > span:not(.nav-extra-ico) { font-size: 16px; font-weight: 700; }
body.desktop-platform.sidebar-style-modern .nav-btn.active { background: color-mix(in srgb, var(--accent) 38%, transparent); border: 0; box-shadow: none; color: #fff; }
body.desktop-platform.sidebar-style-modern .nav-btn.active .nav-primary-ico { background: none !important; box-shadow: none !important; }

/* Сайдбар «Сучасний»: іконки знову на плитці-фоні, але компактні (36 px) в рядках 48 px */
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-btn-extra { min-height: 48px; padding: 6px 12px 6px 8px; gap: 14px; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-primary-ico, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-extra-ico { width: 36px !important; height: 36px !important; border-radius: 12px !important; display: grid; place-items: center;
  background: rgba(255,255,255,.07) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; }
body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-primary-ico svg, body.desktop-platform.sidebar-style-modern:not(.sidebar-collapsed) .nav-extra-ico svg { width: 20px; height: 20px; }
body.desktop-platform.sidebar-style-modern .nav-btn.active .nav-primary-ico { background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))) !important; box-shadow: 0 8px 16px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35) !important; color: #fff; }

/* Форматування: на ПК панель завжди видима, кнопка-згортання — лише на телефоні */
body.desktop-platform .fmt-toggle { display: none !important; }
body.desktop-platform .fmt-wrap { grid-template-rows: 1fr !important; opacity: 1 !important; margin: 0 0 10px !important; transition: none; }

/* Канали в редакторі (ПК й телефон): список рядків із круглим вибором справа */
body #editor-channel-multiselect.channel-multiselect { display: flex !important; flex-direction: column; gap: 10px; max-height: none; overflow: visible; padding: 2px; }
body #editor-channel-multiselect .channel-chip { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 70px 10px 12px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s ease, background .2s ease, box-shadow .2s ease; }
body #editor-channel-multiselect .channel-chip .channel-chip-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; }
body #editor-channel-multiselect .channel-chip > span:nth-child(2) { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; white-space: normal; overflow: visible; }
body #editor-channel-multiselect .channel-chip::after { content: ""; position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.25); transition: background .2s ease, box-shadow .2s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
body #editor-channel-multiselect .channel-chip.checked { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); box-shadow: 0 16px 30px -20px var(--accent-glow); }
body #editor-channel-multiselect .channel-chip.checked::after { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.04);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 17px no-repeat; }
body #editor-channel-multiselect .channel-chip > .channel-chip-check, body #editor-channel-multiselect .channel-chip > span:last-child:not(:nth-child(2)) { display: none; }
body #editor-channel-multiselect .channel-chip:active { transform: scale(.985); }

/* ПК: меню стилів «Перефразувати» — широкий компактний поповер (без переносів), тінь, плавне появлення */
body.desktop-platform #ai-rewrite-style-menu.ai-style-menu { width: max(100%, 400px); min-width: 400px; padding: 8px; border-radius: 20px; transform-origin: top left; animation: aiMenuIn .18s cubic-bezier(.2,.8,.3,1) both; box-shadow: 0 28px 60px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); }
@keyframes aiMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
body.desktop-platform #ai-rewrite-style-menu .ai-style-option { padding: 8px 12px; gap: 12px; border-radius: 14px; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-ico { width: 34px; height: 34px; border-radius: 11px; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-title { font-size: 14.5px; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-sub { font-size: 12px; white-space: nowrap; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-option.is-photo { margin-top: 4px; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-option:hover { background: rgba(255,255,255,.07); }
body.desktop-platform #ai-rewrite-style-menu .ai-style-option.is-photo:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ПК: «Прибрати водяний знак» / «Обрізати фото» — звичайне центроване вікно за розміром фото (мобільний «лист на всю висоту» тут не потрібен) */
@media (min-width: 900px) {
  body.desktop-platform .wm-remover-overlay:not(:has(.editor-history-list)) { align-items: center !important; justify-content: center; padding: 24px 24px 24px var(--sb-off, 292px) !important; }
  body.desktop-platform .wm-remover-overlay:not(:has(.editor-history-list)) > .wm-remover-panel { zoom: 1 !important; height: auto !important; width: min(720px, 100%) !important; max-width: 720px !important; max-height: calc(100 * var(--vh1, 1vh) - 48px) !important; border-radius: 28px !important; border-bottom: 1px solid var(--card-border); padding-bottom: 18px; overflow: auto; animation: none; }
  body.desktop-platform .wm-remover-panel .wm-remover-media-outer { flex: none; min-height: 0; padding: 8px; }
  body.desktop-platform .wm-remover-panel .wm-remover-media-wrap img, body.desktop-platform .wm-remover-panel .wm-remover-media-wrap video { max-height: calc(100 * var(--vh1, 1vh) - 360px); width: auto; max-width: 100%; }
}

/* Кнопка «Додати фото чи відео», коли медіа вже є: той самий квадрат 100×100,
   що й фото-тайли поруч (не full-width !important з :only-child-варіанту —
   саме звідти плитка намагалась зайняти всю ширину ряду й майже повністю
   виїжджала за край екрана, лишаючи на видноті тільки вузький краєчок). */
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child) {
  flex: 0 0 100px !important; width: 100px !important; height: 100px !important; min-height: 0 !important;
  flex-direction: column !important; justify-content: center !important; align-items: center !important;
  padding: 0 !important; gap: 6px !important; border-radius: 20px !important;
  border: 1.5px dashed rgba(255,255,255,.2) !important; background: rgba(255,255,255,.03) !important; box-shadow: none !important;
}
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child) .album-thumb-add-ico { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: rgba(255,255,255,.08) !important; box-shadow: none !important; color: var(--hint); }
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child) .album-thumb-add-ico svg { width: 20px !important; height: 20px !important; }
/* Текст-підпис тут не влазить у 100px без обрізання — іконка "+" серед
   фото-тайлів достатньо самоочевидна, підпис лишаємо лише для :only-child */
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child) .album-thumb-add-txt { display: none; }
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child):hover, #editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child):active { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
#editor-modal .album-gallery:not(.album-gallery-single) > .album-thumb-add:not(:only-child):active { transform: scale(.96); }
/* Одиночне медіа: плитка «Додати» лишається на весь рядок під фото/відео —
   простору досить, щоб показати іконку+підпис (стиль :only-child, лише трохи
   тихіший — акцент уже на самому медіа, а не на запрошенні додати перше). */
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child) {
  flex: 1 1 100% !important; width: 100% !important; height: auto !important; min-height: 60px !important;
  flex-direction: row !important; justify-content: flex-start !important; padding: 10px 14px !important; gap: 12px !important;
  border-radius: 18px !important; border: 1.5px dashed rgba(255,255,255,.18) !important; background: rgba(255,255,255,.03) !important; box-shadow: none !important;
}
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child) .album-thumb-add-ico { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: rgba(255,255,255,.08) !important; box-shadow: none !important; color: var(--hint); }
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child) .album-thumb-add-ico svg { width: 18px !important; height: 18px !important; }
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child) .album-thumb-add-txt b { font-size: 14px; }
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child) .album-thumb-add-txt small { display: block; }
#editor-modal .album-gallery-single > .album-thumb-add:not(:only-child):hover, #editor-modal .album-gallery-single > .album-thumb-add:not(:only-child):active { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.fmt-toggle .fmt-ico svg { width: 22px; height: 22px; }

/* Панель форматування (телефон): іконки й літери читаються — крупніші, яскравіші */
body #editor-modal .editor-flat-toolbar .tb-btn { color: #fff; font-size: 20px; }
body #editor-modal .editor-flat-toolbar .tb-btn svg, body #editor-modal .editor-flat-toolbar .tb-btn .icon, body #editor-modal .editor-flat-toolbar .tb-btn img { width: 26px !important; height: 26px !important; min-width: 26px; stroke-width: 2.2; opacity: 1; }
body.mobile-platform #editor-modal .editor-flat-toolbar .tb-btn { height: 50px; min-height: 50px; }
body #editor-modal .editor-flat-toolbar .tb-btn b, body #editor-modal .editor-flat-toolbar .tb-btn i, body #editor-modal .editor-flat-toolbar .tb-btn u, body #editor-modal .editor-flat-toolbar .tb-btn s { font-size: 21px; font-weight: 800; }

/* Панель форматування: золота середина розмірів */
body #editor-modal .editor-flat-toolbar .tb-btn { font-size: 17px; }
body #editor-modal .editor-flat-toolbar .tb-btn svg, body #editor-modal .editor-flat-toolbar .tb-btn .icon, body #editor-modal .editor-flat-toolbar .tb-btn img { width: 20px !important; height: 20px !important; min-width: 20px; stroke-width: 2; }
body.mobile-platform #editor-modal .editor-flat-toolbar .tb-btn { height: 46px; min-height: 46px; }
body #editor-modal .editor-flat-toolbar .tb-btn b, body #editor-modal .editor-flat-toolbar .tb-btn i, body #editor-modal .editor-flat-toolbar .tb-btn u, body #editor-modal .editor-flat-toolbar .tb-btn s { font-size: 17px; font-weight: 800; }

/* Тестова відправка джерела: такий самий список каналів, як у редакторі */
body [data-role="test-channel-list"] { display: flex !important; flex-direction: column; gap: 10px; max-height: none; overflow: visible; padding: 2px; }
body [data-role="test-channel-list"] .channel-chip { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 70px 10px 12px; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); box-shadow: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s ease, background .2s ease, box-shadow .2s ease; }
body [data-role="test-channel-list"] .channel-chip .channel-chip-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; }
body [data-role="test-channel-list"] .channel-chip > span:nth-child(2) { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; white-space: normal; overflow: visible; }
body [data-role="test-channel-list"] .channel-chip::after { content: ""; position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.25); transition: background .2s ease, box-shadow .2s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
body [data-role="test-channel-list"] .channel-chip.checked { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); box-shadow: 0 16px 30px -20px var(--accent-glow); }
body [data-role="test-channel-list"] .channel-chip.checked::after { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.04);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 17px no-repeat; }
body [data-role="test-channel-list"] .channel-chip > .channel-chip-check, body [data-role="test-channel-list"] .channel-chip > span:last-child:not(:nth-child(2)) { display: none; }
body [data-role="test-channel-list"] .channel-chip:active { transform: scale(.985); }
body [data-role="test-channel-list"] { display: flex !important; flex-direction: column; gap: 10px; flex-wrap: nowrap; margin: 12px 0; }
body [data-role="test-channel-list"] .channel-chip { position: relative; }

/* Прийом реклами по каналах: рівні картки — аватар, назва + ціна/категорія, статус-чип, стрілка; все по центру по вертикалі */
#ads-settings-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 899px) { #ads-settings-list { grid-template-columns: 1fr; } }
#ads-settings-list > .settings-card { margin: 0 !important; padding: 0 !important; min-height: 92px; display: flex; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 16px 30px -22px #000, inset 0 1px 0 rgba(255,255,255,.06); }
#ads-settings-list > .settings-card.state-accent-on { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255,255,255,.02)); }
#ads-settings-list > .settings-card.state-accent-off { opacity: .85; }
#ads-settings-list .settings-card-header { flex: 1; display: flex; align-items: center !important; gap: 16px; padding: 16px 18px; margin: 0; min-width: 0; width: 100%; box-sizing: border-box; }
#ads-settings-list .settings-card-icon[data-role="avatar"] { flex: none; width: 58px !important; height: 58px !important; min-width: 58px; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--bg, #0a0713), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent) !important; }
#ads-settings-list .settings-card-icon[data-role="avatar"] img { width: 100%; height: 100%; object-fit: cover; }
#ads-settings-list .settings-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#ads-settings-list .settings-card-title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; white-space: normal; }
#ads-settings-list .settings-card-desc { display: inline-flex; align-items: center; align-self: flex-start; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#ads-settings-list .badge, #ads-settings-list .settings-card-header > [class*="badge"] { flex: none; }
#ads-settings-list .oblast-summary-chevron { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.07); color: var(--hint); transition: transform .2s ease, background .2s ease; }
#ads-settings-list > .settings-card:hover .oblast-summary-chevron { transform: translateX(3px); background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
#ads-settings-list > .settings-card:active { transform: scale(.985); }

/* Аватари каналів у списках: без синюватого ободка/кільця — чисте коло */
body .channel-chip-avatar, body #editor-channel-multiselect .channel-chip .channel-chip-avatar, body [data-role="test-channel-list"] .channel-chip-avatar,
body #ads-settings-list .settings-card-icon[data-role="avatar"], .ai-key-channel-card .channel-avatar, body .channel-avatar { box-shadow: none !important; outline: 0 !important; border: 0 !important; }
body .channel-chip-avatar img, body .channel-avatar img, body #ads-settings-list .settings-card-icon[data-role="avatar"] img { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
body .channel-chip-avatar::before, body .channel-chip-avatar::after, body .channel-avatar::before, body .channel-avatar::after { display: none !important; }
body .team-member .channel-avatar { box-shadow: none !important; }

/* ПК: редактор відкривається «компактно» — медіа не займає пів-екрана, текст і кнопки ШІ видно одразу */
@media (min-width: 900px) {
  body.desktop-platform #editor-modal .album-gallery-single .album-thumb:not(.album-thumb-add) { height: 190px !important; }
  body.desktop-platform #editor-modal .media-preview-card { padding: 8px; border-radius: 20px; margin-bottom: 8px; }
  body.desktop-platform #editor-modal .media-preview-controls { margin-top: 6px; }
  body.desktop-platform #editor-modal .media-preview-controls .watermark-toggle { padding: 8px 12px; }
  body.desktop-platform #editor-modal .album-gallery > .album-thumb-add:not(:only-child) { min-height: 40px !important; }
  body.desktop-platform #editor-modal .editor-flat-toolbar { padding: 6px !important; gap: 5px !important; }
  body.desktop-platform #editor-modal .editor-flat-toolbar .tb-btn { height: 40px; min-height: 40px; }
  body.desktop-platform #editor-modal #editor-textarea { min-height: 200px; }
}

/* Список каналів (редактор, тестова відправка): компактніше — рядки 50 px */
body #editor-channel-multiselect.channel-multiselect, body [data-role="test-channel-list"] { gap: 7px !important; }
body #editor-channel-multiselect .channel-chip, body [data-role="test-channel-list"] .channel-chip { min-height: 50px !important; padding: 6px 54px 6px 8px !important; gap: 11px !important; border-radius: 16px !important; }
body #editor-channel-multiselect .channel-chip .channel-chip-avatar, body [data-role="test-channel-list"] .channel-chip .channel-chip-avatar { width: 36px !important; height: 36px !important; }
body #editor-channel-multiselect .channel-chip > span:nth-child(2), body [data-role="test-channel-list"] .channel-chip > span:nth-child(2) { font-size: 15px !important; }
body #editor-channel-multiselect .channel-chip::after, body [data-role="test-channel-list"] .channel-chip::after { right: 12px !important; width: 24px !important; height: 24px !important; margin-top: -12px !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
body #editor-channel-multiselect .channel-chip.checked::after, body [data-role="test-channel-list"] .channel-chip.checked::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent) !important; background-size: 14px !important; }

/* Тестова відправка: невибрані канали сірі (як у редакторі), при виборі «загораються» кольором */
body [data-role="test-channel-list"] .channel-chip:not(.checked) .channel-chip-avatar { filter: grayscale(.85); opacity: .6; }
body [data-role="test-channel-list"] .channel-chip:not(.checked) > span:nth-child(2) { color: color-mix(in srgb, var(--text) 62%, transparent) !important; }
body [data-role="test-channel-list"] .channel-chip .channel-chip-avatar { transition: filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.3,1.6,.5,1); }
body [data-role="test-channel-list"] .channel-chip.checked .channel-chip-avatar { filter: none; opacity: 1; transform: scale(1.05); }
body [data-role="test-channel-list"] .channel-chip.checked > span:nth-child(2) { color: var(--text); }
body [data-role="test-channel-list"] .channel-chip { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }

/* Редактор: плавне відкриття/закриття живого перегляду й розширення вікна, плавна поява самого вікна */
.editor-focus-preview-pane.pv-in { animation: pvIn .38s cubic-bezier(.2,.8,.3,1) both; }
.editor-focus-preview-pane.pv-out { animation: pvOut .26s cubic-bezier(.4,0,.6,1) both; pointer-events: none; }
@keyframes pvIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pvOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(28px); } }
#editor-modal > .modal-sheet { transition: max-width .38s cubic-bezier(.2,.8,.3,1); }
#editor-modal:not(.ov-ghost) > .modal-sheet { animation-duration: .38s; }
@media (prefers-reduced-motion: reduce) { .editor-focus-preview-pane.pv-in, .editor-focus-preview-pane.pv-out { animation: none; } #editor-modal > .modal-sheet { transition: none; } }

/* ПК: «Історія версій» — центроване вікно з відступами, а не лист, що впирається в низ екрана */
@media (min-width: 900px) {
  body.desktop-platform .wm-remover-overlay:has(.editor-history-list) { align-items: center !important; justify-content: center; padding: 24px 24px 24px var(--sb-off, 292px) !important; }
  body.desktop-platform .wm-remover-overlay:has(.editor-history-list) > .wm-remover-panel { zoom: 1 !important; width: min(680px, 100%); max-width: 680px !important; max-height: calc(100 * var(--vh1, 1vh) - 48px); border-radius: 28px !important; border-bottom: 1px solid var(--card-border); padding-bottom: 20px; }
}

/* Реклама → налаштування (телефон): картка каналу в сітку «аватар | назва+ціна | стрілка», статус під назвою — текст більше не стискається в стовпчик */
@media (max-width: 899px) {
  #ads-settings-list > .settings-card { min-height: 0; }
  #ads-settings-list .settings-card-header { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 32px; grid-template-areas: "av body chev" "av badge chev"; column-gap: 12px; row-gap: 8px; align-items: center !important; padding: 12px 14px; }
  #ads-settings-list .settings-card-icon[data-role="avatar"] { grid-area: av; width: 48px !important; height: 48px !important; min-width: 48px !important; align-self: center; }
  #ads-settings-list .settings-card-body { grid-area: body; min-width: 0; }
  #ads-settings-list .settings-card-title { font-size: 16px; overflow-wrap: anywhere; word-break: normal; }
  #ads-settings-list .settings-card-desc { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #ads-settings-list .settings-card-header > :not(.settings-card-icon):not(.settings-card-body):not(.oblast-summary-chevron) { grid-area: badge; justify-self: start; }
  #ads-settings-list .oblast-summary-chevron { grid-area: chev; width: 32px; height: 32px; }
}

/* Оплата: крипта — головний спосіб */
.pay-method-icon.pm-crypto { color: #fff; background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 8px 16px -8px rgba(16,185,129,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.pay-method-row[data-method="crypto"] { border-color: color-mix(in srgb, #34d399 45%, transparent); background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(255,255,255,.02)); }
.pm-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #34d399; background: rgba(52,211,153,.16); vertical-align: middle; }

/* ===== ШІ-ключ: провайдери з логотипами й режим економії ===== */
.aik-prov { margin: 16px 0 6px; text-align: left; }
.aik-prov-label { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.aik-prov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aik-prov-btn { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px 8px 8px; border-radius: 16px; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--hint); cursor: pointer; text-align: left;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); transition: transform .12s cubic-bezier(.3,1.5,.5,1), background .2s ease, border-color .2s ease, color .2s ease; }
.aik-prov-btn svg { flex: none; border-radius: 10px; filter: grayscale(.7) opacity(.7); transition: filter .2s ease; }
.aik-prov-btn.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.aik-prov-btn.on svg { filter: none; }
.aik-prov-btn:active { transform: scale(.96); }
.aik-orb.is-logo { background: none !important; box-shadow: none !important; padding: 0; overflow: hidden; border-radius: 18px; }
.aik-orb.is-logo svg { width: 54px; height: 54px; animation: none; border-radius: 14px; }
.aik-key span { letter-spacing: .05em; }
.aik-model-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aik-model-name b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aik-eco { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; border-radius: 22px; cursor: pointer; background: rgba(0,0,0,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: box-shadow .25s ease, background .25s ease; }
.aik-eco.on { box-shadow: inset 0 0 0 1px rgba(52,211,153,.5); background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(0,0,0,.26)); }
.aik-eco-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 8px 16px -8px rgba(16,185,129,.7); }
.aik-eco-ico svg { width: 22px; height: 22px; }
.aik-eco-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aik-eco-text b { font-size: 15.5px; font-weight: 800; }
.aik-eco-text small { font-size: 12.5px; color: var(--hint); line-height: 1.35; }
.aik-eco-text em { font-style: normal; font-size: 11.5px; color: var(--hint); opacity: .8; }

/* ШІ-ключ: без ключа розділи «Керування» (логи, правила, дублі, шаблон, тест) недоступні й не показуються */
#tab-aikey:has(.aik-hero[data-state="none"]) #aikey-menu-root, #tab-aikey:has(.aik-hero[data-state="none"]) #ai-key-usage-widget, #tab-aikey:has(.aik-hero[data-state="none"]) #aikey-team-status { display: none !important; }

/* ШІ-ключ без ключа: чистий онбординг, без довгих підказок на сторінці (вони у вікні додавання) */
.aik-hero.aik-onb .aik-guide, #tab-aikey:has(.aik-hero[data-state="none"]) .aik-how, #tab-aikey:has(.aik-hero[data-state="none"]) #ai-key-none-status, #tab-aikey:has(.aik-hero[data-state="none"]) #ai-key-explain { display: none !important; }
.aik-hero.aik-onb .aik-top { margin-bottom: 4px; }
.aik-onb-sub { margin: 4px 0 14px; font-size: 14px; line-height: 1.45; color: var(--hint); }
.aik-onb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .aik-onb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aik-onb-prov { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; border-radius: 22px; font: inherit; color: var(--text); cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; }
.aik-onb-prov svg { border-radius: 14px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.7); }
.aik-onb-prov b { font-size: 14.5px; font-weight: 800; }
.aik-onb-prov:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.aik-onb-prov:active { transform: scale(.96); }
.aik-onb-note { margin-top: 12px; text-align: center; font-size: 12px; color: var(--hint); }
.aik-hero.aik-onb #aik-change-btn { display: none !important; }
.aik-hero.aik-onb .aik-state::before { display: none; }
.aik-logo { display: block; flex: none; object-fit: contain; border-radius: 22%; background: #fff; }
.aik-prov-btn .aik-logo { border-radius: 10px; filter: grayscale(.7) opacity(.7); transition: filter .2s ease; }
.aik-prov-btn.on .aik-logo { filter: none; }
.aik-onb-prov .aik-logo { border-radius: 14px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.7); }
.aik-orb.is-logo .aik-logo { width: 54px; height: 54px; border-radius: 16px; }

/* Вікно ключа: чіткий потік 1 → 2 → 3 */
.aik-key-sheet .aik-key-orb.is-logo { width: 76px; height: 76px; margin-bottom: 12px; background: none; box-shadow: 0 18px 34px -14px rgba(0,0,0,.8); border-radius: 22px; padding: 0; overflow: hidden; }
.aik-key-sheet .aik-key-orb .aik-logo { width: 76px; height: 76px; border-radius: 22px; }
.aik-key-title { font-size: 22px; }
.aik-prov-label, .aik-form-label { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-prov-label b, .aik-form-label b, .aik-stepnum { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; font-style: normal; font-size: 12px; letter-spacing: 0; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.aik-stepnum { margin-right: 10px; }
.aik-prov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aik-prov-btn { flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 4px 8px; text-align: center; font-size: 11.5px; }
.aik-prov-btn .aik-logo { width: 38px; height: 38px; }
.aik-prov-btn.on { box-shadow: 0 12px 24px -16px var(--accent-glow); }
.aik-key-how { margin-top: 16px; }
.aik-key-how summary { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.aik-key-form { margin-top: 4px; }
.aik-key-form .aik-form-label { margin: 18px 0 2px; }

/* ПК: вікно ключа компактне — шапка в рядок, кроки щільніше, кнопки в один ряд; усе вміщується без прокрутки */
@media (min-width: 900px) {
  body.desktop-platform #aik-key-modal .aik-key-sheet { max-width: calc(780px / var(--ed-zoom, 1)); padding: 20px 26px 22px; overflow-y: auto; text-align: left; }
  body.desktop-platform #aik-key-modal .aik-key-head { margin: 0; position: absolute; top: 16px; right: 18px; z-index: 3; }
  body.desktop-platform #aik-key-modal .aik-key-orb.is-logo, body.desktop-platform #aik-key-modal .aik-key-orb { float: left; width: 56px !important; height: 56px !important; margin: 0 16px 0 0; border-radius: 16px; }
  body.desktop-platform #aik-key-modal .aik-key-orb .aik-logo { width: 56px !important; height: 56px !important; border-radius: 16px; }
  body.desktop-platform #aik-key-modal .aik-key-title { font-size: 20px; padding-top: 4px; }
  body.desktop-platform #aik-key-modal .aik-key-sub { margin: 2px 0 0; max-width: none; font-size: 13px; }
  body.desktop-platform #aik-key-modal .aik-key-current { margin-top: 10px; }
  body.desktop-platform #aik-key-modal .aik-prov { clear: both; margin-top: 18px; }
  body.desktop-platform #aik-key-modal .aik-prov-label, body.desktop-platform #aik-key-modal .aik-form-label { margin: 14px 0 8px; }
  body.desktop-platform #aik-key-modal .aik-prov-btn { flex-direction: row; justify-content: flex-start; min-height: 52px; padding: 6px 12px 6px 8px; gap: 10px; text-align: left; font-size: 13.5px; }
  body.desktop-platform #aik-key-modal .aik-prov-btn .aik-logo { width: 34px; height: 34px; }
  body.desktop-platform #aik-key-modal .aik-key-how { margin-top: 12px; }
  body.desktop-platform #aik-key-modal .aik-key-how summary { padding: 10px 14px; }
  body.desktop-platform #aik-key-modal .aik-key-how .aik-steps { gap: 6px; margin-bottom: 10px; }
  body.desktop-platform #aik-key-modal .aik-key-how .aik-steps li { font-size: 13.5px; }
  body.desktop-platform #aik-key-modal .aik-key-how .aik-open { min-height: 38px; }
  body.desktop-platform #aik-key-modal .aik-key-form { gap: 10px; margin-top: 0; }
  body.desktop-platform #aik-key-modal .aik-key-form .aik-field #ai-key-input { height: 50px; }
  body.desktop-platform #aik-key-modal .aik-actions { flex-direction: row; gap: 10px; align-items: stretch; }
  body.desktop-platform #aik-key-modal .aik-key-form #ai-key-save-btn { flex: 1.4; width: auto; min-height: 50px; }
  body.desktop-platform #aik-key-modal .aik-actions-row { flex: 1.2; }
  body.desktop-platform #aik-key-modal .aik-actions-row > button { min-height: 50px; }
}

/* ПК: онбординг «Підключіть свій ШІ» — компактніше, заголовок і підказка зліва від плиток, без порожнього місця */
@media (min-width: 900px) {
  body.desktop-platform .aik-hero.aik-onb { padding: 20px 22px; }
  body.desktop-platform .aik-hero.aik-onb .aik-top { gap: 14px; margin-bottom: 0; }
  body.desktop-platform .aik-hero.aik-onb .aik-orb { width: 46px; height: 46px; border-radius: 15px; }
  body.desktop-platform .aik-hero.aik-onb .aik-orb svg { width: 24px; height: 24px; }
  body.desktop-platform .aik-hero.aik-onb .aik-state { font-size: 20px; }
  body.desktop-platform .aik-hero.aik-onb .aik-refresh { display: none; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-sub { margin: 8px 0 14px; font-size: 13.5px; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-grid { gap: 10px; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-prov { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 18px; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-prov .aik-logo { width: 38px; height: 38px; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-prov b { font-size: 14.5px; text-align: left; }
  body.desktop-platform .aik-hero.aik-onb .aik-onb-note { margin-top: 12px; text-align: left; font-size: 12px; }
}

/* ПК: «Сьогодні впіймано» — чотири компактні плитки в один ряд, число й підпис в одну лінію */
@media (min-width: 900px) {
  body.desktop-platform #ai-key-usage-widget { padding: 14px 16px; }
  body.desktop-platform #ai-key-decisions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.desktop-platform #ai-key-decisions-grid > * { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 54px; padding: 8px 14px 8px 18px !important; border-radius: 14px !important; }
  body.desktop-platform #ai-key-decisions-grid > * > :first-child { font-size: 22px !important; }
  body.desktop-platform #ai-key-decisions-grid > * > :last-child:not(:first-child) { font-size: 13px !important; line-height: 1.2; }
  body.desktop-platform #ai-key-decisions-label { margin: 0 0 10px !important; }
}

/* ШІ-ключ без ключа: спокійний порожній стан по центру (як у стрічці новин) — без вибору провайдера на сторінці */
.aik-hero.aik-onb { padding: 26px 20px 22px; }
.aik-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aik-empty-orb { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: 6px; }
.aik-empty-ring { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.aik-empty-ring.r1 { inset: 0; animation: aikPulse 3.6s ease-in-out infinite; }
.aik-empty-ring.r2 { inset: 18px; border-color: color-mix(in srgb, var(--accent) 50%, transparent); animation: aikPulse 3.6s ease-in-out .5s infinite; }
@keyframes aikPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: .4; } }
.aik-empty-core { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 18px 36px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.aik-empty-core svg { width: 40px; height: 40px; }
.aik-empty-title { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.aik-empty-sub { margin-top: 6px; max-width: 460px; font-size: 14px; line-height: 1.45; color: var(--hint); }
.aik-empty-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 18px; }
.aik-empty-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.aik-empty-chip .aik-logo { width: 22px; height: 22px; border-radius: 7px; }
.aik-empty-how { width: 100%; margin: 0 0 12px; text-align: left; }
.aik-empty-list { margin: 0; padding: 0 16px 14px 34px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--hint); }
.aik-empty-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 0; border-radius: 18px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent) 55%, var(--accent-deep, var(--accent))); box-shadow: 0 14px 28px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.aik-empty-cta svg { width: 20px; height: 20px; }
.aik-empty-cta:active { transform: scale(.985); }
@media (min-width: 900px) { .aik-empty-cta { max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .aik-empty-ring { animation: none; } }

/* Підтримка: фон вікна й елементів — у кольорах активної теми (а не фіксований темно-фіолетовий) */
#support-modal .modal-sheet.support-sheet, #support-modal .modal-sheet { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), var(--bg, #0a0713) !important; border-color: color-mix(in srgb, var(--accent) 22%, var(--card-border)); }
#support-modal .support-head, #support-modal [class*="support-header"] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255,255,255,.03)) !important; border-color: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.08)) !important; }
#support-modal .chat-composer { background: color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,.04)) !important; border-color: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.09)) !important; }
#support-modal .faq-chip, #support-modal [class*="faq-chip"], #support-modal [class*="faq-q"] { background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04)) !important; border-color: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,.08)) !important; }
#support-modal .faq-chip svg, #support-modal [class*="faq-chip"] > span:first-child { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; color: var(--accent-2, var(--accent)) !important; }

/* Підтримка: виправлення — контейнери без суцільного фону, іконки лише круглі, чипи в кольорі теми */
#support-modal [class*="faq-q"]:not(.faq-chip), #support-modal [class*="faq-chip"]:not(.faq-chip), #support-modal .faq-tpl-list, #support-modal .faq-tpl-tabs { background: none !important; border-color: transparent !important; }
#support-modal .faq-chip { background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04)) !important; border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.08)) !important; }
#support-modal .faq-chip svg { background: none !important; border-radius: 0 !important; color: var(--accent-2, var(--accent)); }
#support-modal .faq-chip .faq-ico { background: color-mix(in srgb, var(--accent) 24%, transparent) !important; color: var(--accent-2, var(--accent)) !important; border-radius: 50% !important; }
#support-modal .faq-chip .faq-ico svg { background: none !important; }
#support-modal .faq-more { background: none !important; border: 0 !important; color: var(--accent-2, var(--accent)); }

/* ШІ-ключ: пояснення «Навіщо й як це працює» */
.aik-explain { margin: 12px 0 0; text-align: left; }
.aik-explain .aik-x { padding: 2px 16px 14px; }
.aik-x-t { margin: 12px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2, var(--accent)); }
.aik-x ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.aik-x li::marker { color: var(--accent); }
#aik-key-modal .aik-explain { margin-bottom: 4px; }

/* Реклама → налаштування: без свічення/тіней під картками каналів */
#ads-settings-list > .settings-card, #ads-settings-list > .settings-card.state-accent-on, #ads-settings-list > .settings-card.state-accent-off { box-shadow: none !important; filter: none !important; }
#ads-settings-list > .settings-card::before, #ads-settings-list > .settings-card::after { display: none !important; }
#ads-settings-list { filter: none !important; }
/* порожній екран ШІ-ключа: показуємо «Навіщо й як це працює» (раніше ховалось разом зі старими підказками) */
#tab-aikey:has(.aik-hero[data-state="none"]) .aik-how.aik-explain { display: block !important; width: 100%; margin: 0 0 14px; }
.aik-empty .aik-explain { text-align: left; }
.aik-hero:not(.aik-onb) .aik-explain { display: none !important; }

/* Гайд «Автопостинг: як налаштувати» */
#ap-guide { margin-top: 14px; }
.ap-guide { border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); overflow: hidden; }
.ap-guide > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.ap-guide > summary::-webkit-details-marker { display: none; }
.ap-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow); }
.ap-ico svg { width: 22px; height: 22px; }
.ap-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-sum b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ap-sum small { font-size: 12.5px; color: var(--hint); }
.ap-chev { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 10px; color: var(--hint); background: rgba(255,255,255,.07); transition: transform .25s ease; flex: none; }
.ap-guide[open] .ap-chev { transform: rotate(180deg); color: var(--accent-2, var(--accent)); }
.ap-steps { list-style: none; margin: 0; padding: 2px 16px 6px; display: flex; flex-direction: column; gap: 12px; }
.ap-steps li { display: flex; gap: 12px; align-items: flex-start; }
.ap-steps li > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 9px; font-style: normal; font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.ap-steps li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-steps li b { font-size: 14.5px; font-weight: 800; }
.ap-steps li span { font-size: 13px; line-height: 1.45; color: var(--hint); }
.ap-tips { margin: 6px 16px 16px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.ap-tips-t { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2, var(--accent)); }
.ap-tips ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.4; color: var(--hint); }

#ai-guide { margin-top: 14px; }
#tab-aikey:has(.aik-hero[data-state="none"]) #ai-guide { margin-top: 14px; }

/* ===== Докладний гайд: кроки з ілюстраціями екранів ===== */
.ap-pro-list { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 6px; }
.ap-pro-step { padding: 14px; border-radius: 20px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ap-pro-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-pro-head i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; font-style: normal; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.ap-pro-head b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.ap-pro-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .ap-pro-body { grid-template-columns: 1fr; } }
.ap-pro-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ap-pro-row { display: flex; flex-direction: column; gap: 3px; }
.ap-pro-row em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.ap-pro-row span { font-size: 13.5px; line-height: 1.5; }
.ap-pro-row.ok em { color: #34d399; }
.ap-pro-pic { min-width: 0; }
/* схематичні «скріни» інтерфейсу */
.mk-win { border-radius: 16px; overflow: hidden; background: var(--bg, #0a0713); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 30px -18px #000; }
.mk-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07); }
.mk-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.mk-bar i:nth-child(1) { background: #fb7185; } .mk-bar i:nth-child(2) { background: #fbbf24; } .mk-bar i:nth-child(3) { background: #34d399; }
.mk-bar span { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--hint); }
.mk-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.mk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.mk-row.center { justify-content: center; gap: 16px; padding: 12px; }
.mk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-col b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-col small { font-size: 10.5px; color: var(--hint); }
.mk-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); }
.mk-orb { flex: none; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.mk-sq { flex: none; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, var(--c), color-mix(in srgb, var(--c) 45%, #000)); }
.mk-tg { flex: none; position: relative; width: 34px; height: 20px; border-radius: 20px; background: rgba(255,255,255,.18); }
.mk-tg i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.mk-tg.on { background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent)); }
.mk-tg.on i { left: 16px; }
.mk-btn { flex: none; padding: 8px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 800; text-align: center; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.mk-btn.full { width: 100%; box-sizing: border-box; padding: 10px; }
.mk-input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; font-size: 11px; color: var(--hint); background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--hint); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.mk-chip.on { color: var(--text); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mk-chip.ok { color: #34d399; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); }
.mk-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-weight: 800; background: rgba(255,255,255,.08); }
.mk-big { font-size: 20px; letter-spacing: -.02em; }
.mk-ring { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 3px #34d399; }
.mk-bubble { padding: 10px 12px; border-radius: 14px 14px 14px 4px; font-size: 11.5px; line-height: 1.4; background: #1f2a3a; color: #e8eef7; }
.mk-foot { margin-top: 6px; font-size: 11px; color: #7cc4ff; }
.mk-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: #fff; background: var(--accent); }
.mk-log { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 12px; background: rgba(255,255,255,.05); border-left: 3px solid var(--lc); }
.mk-log.ok { --lc: #34d399; } .mk-log.bad { --lc: #fb7185; } .mk-log.warn { --lc: #fbbf24; }
.mk-log small { color: var(--hint); }

/* Кнопка гайда на головній + вікно гайда */
.ap-guide-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; height: 48px; padding: 0 16px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.14); transition: transform .12s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; }
.ap-guide-btn svg { width: 22px; height: 22px; color: var(--accent-2, var(--accent)); }
.ap-guide-btn:active { transform: scale(.95); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.channels-header-row { gap: 10px; }
.apg-sheet { display: flex; flex-direction: column; max-width: 820px; height: calc(100 * var(--vh1, 1vh) - 104px); max-height: none; padding: 18px 18px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
.apg-sheet .modal-header { flex: none; font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.apg-rail { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.apg-rail::-webkit-scrollbar { display: none; }
.apg-dot { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.apg-dot i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.1); }
.apg-dot span { display: none; }
.apg-dot.on { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.apg-dot.on span { display: inline; }
.apg-dot.on i { color: #fff; background: var(--accent); }
.apg-dot.done i { color: #fff; background: #34d399; }
.apg-main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 10px; animation: nfIn .25s ease both; }
.apg-step-t { display: flex; align-items: center; gap: 14px; }
.apg-step-t > i { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 16px; font-style: normal; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -10px var(--accent-glow); }
.apg-step-t small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
.apg-step-t b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.apg-pic { padding: 14px; border-radius: 22px; background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.apg-pic .mk-win { max-width: 460px; margin: 0 auto; }
.apg-block { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); }
.apg-block em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.apg-block span { font-size: 14.5px; line-height: 1.5; }
.apg-block.ok { background: rgba(52,211,153,.08); box-shadow: inset 0 0 0 1px rgba(52,211,153,.25); }
.apg-block.ok em { color: #34d399; }
.apg-errs { padding: 12px 14px; border-radius: 16px; background: rgba(251,113,133,.07); box-shadow: inset 0 0 0 1px rgba(251,113,133,.25); }
.apg-errs-t { margin-bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fb7185; }
.apg-err { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; line-height: 1.45; }
.apg-err + .apg-err { border-top: 1px solid rgba(255,255,255,.06); }
.apg-err svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #fb7185; }
.apg-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.apg-count { font-size: 13px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.apg-btn { min-width: 110px; height: 48px; padding: 0 20px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 12px 24px -12px var(--accent-glow); }
.apg-btn.ghost { color: var(--text); background: rgba(255,255,255,.07); box-shadow: none; }
.apg-btn:active { transform: scale(.97); }
@media (min-width: 900px) { body.desktop-platform .apg-sheet { zoom: var(--ed-zoom, 1); max-width: calc(820px / var(--ed-zoom, 1)); } }

/* мобільний: кнопка «Гайд» компактна (лише іконка), не виїжджає за екран */
@media (max-width: 899px) { #ap-guide-btn { width: 48px; padding: 0; } #ap-guide-btn span { display: none; } .channels-header-row { flex-wrap: nowrap; } }
.aik-guide-open { float: right; margin: 0 0 12px; }
#tab-aikey .back-btn { float: left; }
#tab-aikey > .aik-hero, #tab-aikey > #ai-key-card { clear: both; }
.mk-img { height: 72px; border-radius: 12px; background: linear-gradient(135deg, #1e3a5f, #7c3aed 60%, #f472b6); }
.mk-prov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-prov span { padding: 10px 4px; border-radius: 10px; text-align: center; font-size: 10.5px; font-weight: 800; color: var(--hint); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.mk-prov span.on { color: var(--text); background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mk-meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.mk-meter i { display: block; width: 55%; height: 100%; background: linear-gradient(90deg, var(--accent-deep, var(--accent)), var(--accent-2, var(--accent))); }
.mk-center { text-align: center; }
.mk-huge { font-size: 34px; letter-spacing: -.03em; color: var(--accent-2, var(--accent)); }
.mk-slider { position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); }
.mk-slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 55%; border-radius: 8px; background: var(--accent); }
.mk-slider span { position: absolute; left: 55%; top: -5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.mk-row.eco { box-shadow: inset 0 0 0 1px rgba(52,211,153,.5); }
.apg-main { touch-action: pan-y; }
.apg-main[style*="translateX"] { will-change: transform; }
.apg-arrow { font-weight: 800; opacity: .85; }
.apg-sheet .modal-header { gap: 8px; }
.apg-sheet .modal-header > span { flex: 1; }
.apg-voice { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: var(--hint); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.apg-voice svg { width: 20px; height: 20px; }
.apg-voice.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 8px 16px -8px var(--accent-glow); }
.apg-voice.on svg { animation: apgWave 1.2s ease-in-out infinite; }
@keyframes apgWave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .apg-voice.on svg { animation: none; } }

.apg-voice.loading svg { animation: apgWave .7s ease-in-out infinite; opacity: .7; }

.ghub-sheet { max-width: 560px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.ghub-sheet .modal-header { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.ghub-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 10px; padding: 14px; border-radius: 22px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.1); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s ease; }
.ghub-card:active { transform: scale(.985); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ghub-ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -10px var(--accent-glow); }
.ghub-ico svg { width: 26px; height: 26px; }
.ghub-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ghub-t b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.ghub-t small { font-size: 12.5px; line-height: 1.35; color: var(--hint); }
.ghub-go { flex: none; width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 10px; background: rgba(255,255,255,.07); color: var(--hint); }
.mk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.mk-tile b { font-size: 20px; letter-spacing: -.02em; }
.mk-tile small { font-size: 11px; color: var(--hint); }
.mk-tile.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mk-cal span { display: grid; place-items: center; height: 26px; border-radius: 8px; font-size: 11px; color: var(--hint); background: rgba(255,255,255,.05); }
.mk-cal span.on { color: #fff; background: var(--accent); } .mk-cal span.dot { box-shadow: inset 0 0 0 1.5px var(--accent-2, var(--accent)); color: var(--text); }

/* Автонастройка каналу */
.as-btn { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border-radius: 20px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .14s cubic-bezier(.3,1.5,.5,1); }
.as-btn:active { transform: scale(.985); }
.as-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow); }
.as-ico svg { width: 22px; height: 22px; }
.as-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-bt b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.as-bt small { font-size: 12.5px; color: var(--hint); }
.as-go { flex: none; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 9px; background: rgba(255,255,255,.08); color: var(--hint); }
.as-sheet { max-width: 560px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.as-sheet .modal-header { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.as-intro { margin-bottom: 12px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }
.as-load { padding: 28px 10px; text-align: center; color: var(--hint); }
.as-list { display: flex; flex-direction: column; gap: 8px; }
.as-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.as-item input { position: absolute; opacity: 0; pointer-events: none; }
.as-box { flex: none; width: 24px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: background .2s ease, box-shadow .2s ease; }
.as-item input:checked + .as-box { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 15px no-repeat; }
.as-item.is-ok { opacity: .6; cursor: default; }
.as-item.is-ok .as-box { box-shadow: none; background: #34d399 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 15px no-repeat; }
.as-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-t b { font-size: 14.5px; font-weight: 800; }
.as-t small { font-size: 12px; color: var(--hint); line-height: 1.3; }
.as-v { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.as-v s { color: var(--hint); }
.as-v i { font-style: normal; color: var(--hint); }
.as-v b { color: var(--accent-2, var(--accent)); }
.as-v em { font-style: normal; color: #34d399; }
.as-note { margin: 12px 0; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; color: var(--hint); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.as-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.as-actions .apg-btn { min-width: 0; }
.as-actions .apg-btn:disabled { opacity: .4; }
@media (max-width: 420px) { .as-v { flex-direction: column; align-items: flex-end; gap: 0; } .as-v i { display: none; } }

/* Віртуальний тур */
body.vt-open { overflow: hidden; }
.vt-ov { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg)); color: var(--text); animation: vtIn .3s ease both; }
@keyframes vtIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.vt-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 6px) 16px 10px; }
.vt-demo { margin-right: auto; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.vt-real { height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vt-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
.vt-x svg { width: 18px; height: 18px; }
.vt-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; justify-content: center; padding: 0 14px; }
.vt-app { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 460px; min-height: 0; }
.vt-box { order: 1; flex: 1; min-height: 0; overflow: hidden; border-radius: 22px 22px 0 0; background: color-mix(in srgb, var(--bg) 90%, #fff 4%); border: 1px solid rgba(255,255,255,.1); border-bottom: 0; }
.vt-scr { height: 100%; overflow-y: auto; scrollbar-width: none; }
.vt-scr::-webkit-scrollbar { display: none; }
.vt-pg { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 70px; animation: vtPg .35s ease both; }
@keyframes vtPg { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vt-side { order: 2; display: flex; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-radius: 0 0 22px 22px; background: color-mix(in srgb, var(--bg) 80%, #fff 8%); border: 1px solid rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.06); }
.vt-nv { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 60px; padding: 5px 8px; border-radius: 12px; color: var(--hint); font-size: 11px; font-weight: 700; transition: background .25s, color .25s; }
.vt-nv svg { width: 20px; height: 20px; }
.vt-nv em { font-style: normal; }
.vt-nv.on { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.vt-nv.x { display: none; }
.vt-spot { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; border-radius: 16px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.58), 0 0 0 2px var(--accent-2, var(--accent)), 0 0 24px var(--accent-glow, transparent); transition: left .42s cubic-bezier(.4,0,.2,1), top .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1), opacity .25s; }
.vt-spot::after { content: ""; position: absolute; inset: -4px; border-radius: 20px; border: 2px solid var(--accent-2, var(--accent)); animation: vtPulse 1.8s ease-out infinite; }
@keyframes vtPulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }
.vt-card-t { position: relative; z-index: 3; width: 100%; max-width: 460px; margin: 0 auto; box-sizing: border-box; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 82%, var(--accent) 10%); border-top: 1px solid rgba(255,255,255,.12); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 40px -20px rgba(0,0,0,.6); }
.vt-bar { height: 4px; margin: -2px 0 10px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.vt-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); transition: width .35s ease; }
.vt-card-t small { font-size: 12px; font-weight: 800; color: var(--accent-2, var(--accent)); letter-spacing: .04em; }
.vt-card-t b { display: block; margin-top: 2px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.vt-card-t p { margin: 6px 0 12px; max-height: 24vh; overflow-y: auto; font-size: 14.5px; line-height: 1.5; color: var(--text); opacity: .92; }
.vt-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vt-nav > span { font-size: 12.5px; font-weight: 700; color: var(--hint); }
.vt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 14px; font: inherit; font-size: 14.5px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 20px -12px var(--accent-glow); }
.vt-btn.ghost { color: var(--text); background: rgba(255,255,255,.08); box-shadow: none; }
.vt-btn:active { transform: scale(.97); }
.vt-pg .vt-btn { min-height: 0; padding: 9px 14px; font-size: 13px; border-radius: 12px; }
.vt-pg .vt-btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 10px; }
.vt-btn.red { background: #ef4444; }
.vt-btn.green { background: #10b981; }
.vt-card, .vt-post, .vt-tile, .vt-quick, .vt-plan, .vt-hero, .vt-list, .vt-input, .vt-auto { border-radius: 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.vt-card { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vt-ct { font-size: 13px; font-weight: 800; color: var(--hint); }
.vt-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.vt-list { padding: 4px 10px; }
.vt-list .vt-row + .vt-row, .vt-list > div + div { border-top: 1px solid rgba(255,255,255,.06); }
.vt-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-col b, .vt-post b, .vt-hero b { font-size: 14px; font-weight: 800; }
.vt-col small, .vt-post small, .vt-tile small, .vt-edprev small { font-size: 12px; color: var(--hint); font-weight: 600; }
.vt-hero { display: flex; align-items: center; gap: 10px; padding: 12px; }
.vt-ava { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; font-weight: 800; color: #fff; background: var(--c, var(--accent)); }
.vt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hint); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.vt-chip.on { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.vt-tg { flex: none; position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.14); }
.vt-tg i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.vt-tg.on { background: var(--accent); }
.vt-tg.on i { left: 21px; }
.vt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vt-tile { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.vt-tile b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.vt-tile em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-2, var(--accent)); }
.vt-tile.alert em { color: var(--danger, #f87171); }
.vt-quick { display: flex; align-items: center; gap: 10px; padding: 12px; }
.vt-timer { height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.vt-timer i { display: block; width: 62%; height: 100%; background: var(--accent); }
.vt-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 15px; font-weight: 800; }
.vt-guidebtn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 13px; font-weight: 800; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); }
.vt-guidebtn svg { width: 17px; height: 17px; }
.vt-auto { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.vt-aico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.vt-aico svg { width: 20px; height: 20px; }
.vt-tabs, .vt-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.vt-post { padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.vt-bulkbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-size: 13px; font-weight: 800; }
.vt-bulkbar span:first-child { margin-right: auto; }
.vt-sched { display: flex; gap: 8px; flex-wrap: wrap; }
.vt-pg .vt-sched .vt-btn { background: rgba(255,255,255,.1); box-shadow: none; color: var(--text); }
.vt-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; font-size: 13px; color: var(--hint); }
.vt-edcols { display: flex; flex-direction: column; gap: 10px; }
.vt-edmain { display: flex; flex-direction: column; gap: 10px; }
.vt-tool { display: flex; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; color: var(--hint); }
.vt-ta { font-size: 14px; line-height: 1.5; }
.vt-media { display: flex; gap: 8px; }
.vt-media i { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), rgba(255,255,255,.08)); }
.vt-media i.plus { display: grid; place-items: center; font-style: normal; font-size: 22px; color: var(--hint); background: rgba(255,255,255,.06); }
.vt-save { display: flex; flex-direction: column; gap: 10px; }
.vt-edprev { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 8px; }
.vt-bubble { padding: 10px 12px; border-radius: 14px 14px 14px 4px; font-size: 13.5px; line-height: 1.45; background: rgba(255,255,255,.08); }
.vt-bubble b { display: block; margin-bottom: 3px; color: var(--accent-2, var(--accent)); }
.vt-bubble em { display: block; text-align: right; font-style: normal; font-size: 11px; color: var(--hint); }
.vt-price { font-size: 20px; font-weight: 800; color: var(--accent-2, var(--accent)); }
.vt-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.vt-cal span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.05); }
.vt-cal .on { background: var(--accent); color: #fff; }
.vt-cal .dot { box-shadow: inset 0 -3px 0 var(--accent-2, var(--accent)); }
.vt-provs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vt-prov { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.vt-prov img { width: 22px; height: 22px; }
.vt-prov.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.vt-plan { display: flex; align-items: center; gap: 10px; padding: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255,255,255,.04)); }
@media (min-width: 900px) {
  .vt-stage { padding: 0 28px 14px; }
  .vt-app { flex-direction: row; max-width: 1040px; }
  .vt-box { order: 2; border-radius: 0 24px 24px 0; border: 1px solid rgba(255,255,255,.1); }
  .vt-side { order: 1; flex-direction: column; justify-content: flex-start; gap: 4px; width: 200px; padding: 14px 10px; border-radius: 24px 0 0 24px; border: 1px solid rgba(255,255,255,.1); border-right: 0; }
  .vt-nv { flex-direction: row; gap: 10px; min-width: 0; padding: 10px 12px; font-size: 14px; }
  .vt-nv.x { display: flex; }
  .vt-pg { padding: 20px 24px 40px; }
  .vt-tile b { font-size: 36px; }
  .vt-card-t { max-width: 1040px; width: calc(100% - 56px); margin: 0 auto 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding-bottom: 14px; }
  .vt-edcols { flex-direction: row; align-items: flex-start; }
  .vt-edmain { flex: 1.5; min-width: 0; }
  .vt-edprev { flex: 1; position: sticky; top: 0; }
  .vt-provs { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .vt-ov, .vt-pg, .vt-spot::after { animation: none; } .vt-spot { transition: none; } }

.as-v .as-kw { max-width: 150px; font-size: 11.5px; line-height: 1.3; text-align: right; overflow-wrap: anywhere; }
.as-item:has(.as-kw) { align-items: flex-start; }
.as-item:has(.as-kw) .as-v { flex-direction: column; align-items: flex-end; }

/* Стоп-слова для всіх джерел */
.sw-global { margin: 0 0 14px; }
.sw-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.sw-pack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s, background .2s; }
.sw-pack:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sw-pack:active { transform: scale(.98); }
.sw-pack:disabled { opacity: .55; }
.sw-pack b { font-size: 14px; font-weight: 800; }
.sw-pack small { font-size: 12px; line-height: 1.35; color: var(--hint); }
.sw-pack em { margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--accent-2, var(--accent)); }
.sw-addall { margin-top: 2px; font-weight: 800; color: var(--accent-2, var(--accent)); }

/* Стоп-слова для всіх джерел: компактна згортна картка */
.sw2 { margin: 0 0 14px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), rgba(255,255,255,.04)); border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.08)); }
.sw2-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.sw2-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -9px var(--accent-glow); }
.sw2-ico svg { width: 20px; height: 20px; }
.sw2-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw2-t b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.sw2-t small { font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw2-chev { flex: none; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 9px; color: var(--hint); background: rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
.sw2.open .sw2-chev { transform: rotate(180deg); }
.sw2-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1); }
.sw2.open .sw2-wrap { grid-template-rows: 1fr; }
.sw2-body { min-height: 0; overflow: hidden; padding: 0 14px; }
.sw2.open .sw2-body { padding-bottom: 14px; }
.sw2-packs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.sw2-pack { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); transition: transform .14s cubic-bezier(.3,1.5,.5,1), background .2s, border-color .2s; }
.sw2-pack em { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-style: normal; font-size: 11.5px; color: #fff; background: var(--accent); }
.sw2-pack:active { transform: scale(.96); }
.sw2-pack:disabled { opacity: .5; }
.sw2-add { display: flex; gap: 8px; margin-top: 10px; }
.sw2-add input { flex: 1; min-width: 0; height: 40px; margin: 0; padding: 0 14px; box-sizing: border-box; border-radius: 14px; font: inherit; font-size: 14px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sw2-add button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 14px; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.sw2-add button svg { width: 18px; height: 18px; }
.sw2-add button:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .sw2-wrap, .sw2-chev { transition: none; } }

/* Автонастройка: безпечна зона під шапкою Telegram, чіпи, липка кнопка */
.as-overlay { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 56px); }
.as-overlay .as-sheet { width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.as-overlay .as-sheet::-webkit-scrollbar { display: none; }
.as-sheet .modal-header { position: sticky; top: 0; z-index: 2; margin: 0 0 6px; padding: 4px 0 8px; background: linear-gradient(var(--bg) 70%, transparent); }
.as-item { flex-wrap: wrap; row-gap: 10px; padding: 13px 14px; transition: border-color .2s, background .2s; }
.as-item:not(.is-ok):has(input:checked) { background: color-mix(in srgb, var(--accent) 9%, rgba(255,255,255,.04)); border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.09)); }
.as-item .as-t { flex: 1 1 0; }
.as-cr { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.as-c { font-style: normal; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.07); color: var(--hint); }
.as-c.add { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.as-c.keep { color: #34d399; background: rgba(52,211,153,.14); }
.as-c.del { color: #fb7185; background: rgba(251,113,133,.12); }
.as-c.src { color: var(--text); background: rgba(255,255,255,.1); }
.as-actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -2px; padding: 14px 2px 2px; background: linear-gradient(transparent, var(--bg) 38%); }
.as-actions .apg-btn { white-space: nowrap; }

/* ===== Джерела: оформлення розділу (на телефоні лишається по 2 в ряд) ===== */
#content-panel-sources { display: flex; flex-direction: column; gap: 14px; }
#content-panel-sources[style*="display:none"], #content-panel-sources[style*="display: none"] { display: none !important; }
#content-panel-sources > * { margin-top: 0 !important; }
#content-panel-sources .src-hero { padding: 14px 16px; border-radius: 22px; border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08)); background: radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%), radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--accent-2, var(--accent)) 14%, transparent), transparent 60%), rgba(255,255,255,.035); }
#content-panel-sources .src-hero-ico { width: 48px; height: 48px; border-radius: 16px; }
#content-panel-sources .src-hero-num { font-size: 32px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent-2, var(--accent)) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#content-panel-sources .src-hero-label { margin-top: 3px; font-weight: 600; }
#content-panel-sources .src-add { margin-top: 0 !important; }
#content-panel-sources .section-label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
#content-panel-sources .section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
#content-panel-sources .src-add-row { border-radius: 18px; padding: 5px 5px 5px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
#content-panel-sources .src-add-btn { min-height: 42px; border-radius: 14px; }
#content-panel-sources .sources-tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.desktop-platform #content-panel-sources .sources-tile-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
#content-panel-sources .source-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 12px; padding: 13px 12px 12px; border-radius: 20px; min-width: 0; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 10px 24px -16px rgba(0,0,0,.7); transition: transform .16s cubic-bezier(.3,1.5,.5,1), border-color .2s, box-shadow .2s; }
#content-panel-sources .source-tile::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--accent-2, var(--accent)), transparent); opacity: .55; }
#content-panel-sources .source-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 14px 28px -16px var(--accent-glow); }
#content-panel-sources .source-tile:active { transform: scale(.975); }
#content-panel-sources .source-tile-head { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
#content-panel-sources .source-tile-head .channel-avatar { width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 15px; font-size: 13px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
#content-panel-sources .src-dot { right: -3px; bottom: -3px; width: 13px; height: 13px; border: 2.5px solid #16111f; }
#content-panel-sources .source-tile-body { min-width: 0; flex: 1; }
#content-panel-sources .source-tile-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
#content-panel-sources .source-tile-name .rec-source-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#content-panel-sources .source-tile-meta { margin-top: 1px; font-size: 11.5px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content-panel-sources .src-state { display: inline-flex; align-items: center; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; background: rgba(255,255,255,.06); }
#content-panel-sources .src-state.on { color: #34d399; background: rgba(52,211,153,.12); }
#content-panel-sources .src-state.auto { color: #f5c26b; background: rgba(245,194,107,.12); }
#content-panel-sources .src-state.err { color: #fb7185; background: rgba(251,113,133,.12); }
#content-panel-sources .source-tile-action { width: 100%; }
#content-panel-sources .source-tile-action .pill { width: 100%; min-width: 0; min-height: 36px; justify-content: center; border-radius: 12px; font-size: 12.5px; font-weight: 800; }
#content-panel-sources .source-tile-action .pill.on { color: #34d399; background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.35); }
#content-panel-sources .source-tile-action .pill.off { color: var(--hint); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
#content-panel-sources #sources-show-more-btn { align-self: center; padding: 9px 18px; border-radius: 999px; font-weight: 800; }
#content-panel-sources .card-row.muted { padding: 22px 16px; text-align: center; border-radius: 18px; border: 1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.03); }

/* ===== Мобайл: спокійніше й чистіше (Джерела, стоп-слова, автонастройка) ===== */
@media (max-width: 899px) {
  /* Джерела */
  #content-panel-sources { gap: 12px; }
  #content-panel-sources .src-hero { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
  #content-panel-sources .src-hero-ico { width: 42px; height: 42px; border-radius: 14px; box-shadow: none; }
  #content-panel-sources .src-hero-num { font-size: 28px; background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
  #content-panel-sources .section-label::after { display: none; }
  #content-panel-sources .section-label { margin-bottom: 6px; font-size: 11px; letter-spacing: .06em; }
  #content-panel-sources .sources-tile-grid { gap: 8px; }
  #content-panel-sources .source-tile { gap: 10px; padding: 11px; border-radius: 16px; background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); box-shadow: none; }
  #content-panel-sources .source-tile::before { display: none; }
  #content-panel-sources .source-tile:hover { box-shadow: none; border-color: rgba(255,255,255,.08); }
  #content-panel-sources .source-tile-head .channel-avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 12px; box-shadow: none; }
  #content-panel-sources .src-dot { width: 11px; height: 11px; right: -2px; bottom: -2px; box-shadow: none; }
  #content-panel-sources .source-tile-name { font-size: 13px; }
  #content-panel-sources .source-tile-meta { font-size: 11px; }
  #content-panel-sources .src-state { margin-top: 3px; padding: 0; font-size: 10.5px; font-weight: 700; background: none; }
  #content-panel-sources .source-tile-action .pill { min-height: 32px; border-radius: 10px; font-size: 12px; font-weight: 700; }
  /* Стоп-слова для всіх джерел */
  .sw2 { border-radius: 16px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
  .sw2-head { padding: 10px 12px; gap: 10px; }
  .sw2-ico { width: 34px; height: 34px; border-radius: 11px; box-shadow: none; }
  .sw2-ico svg { width: 18px; height: 18px; }
  .sw2-t b { font-size: 14px; }
  .sw2-t small { display: none; }
  .sw2-chev { background: none; }
  .sw2-pack { height: 34px; font-size: 13px; background: rgba(255,255,255,.06); }
  /* Автонастройка */
  .as-sheet .modal-header { font-size: 19px; }
  .as-intro { font-size: 12.5px; margin-bottom: 10px; }
  .as-list { gap: 6px; }
  .as-item { padding: 11px 12px; gap: 10px; row-gap: 8px; border-radius: 16px; }
  .as-item .as-t small { display: none; }
  .as-t b { font-size: 14px; }
  .as-box { width: 22px; height: 22px; border-radius: 7px; }
  .as-cr { padding-left: 32px; gap: 5px; }
  .as-c { height: 22px; padding: 0 9px; font-size: 11.5px; font-weight: 600; }
  .as-note { font-size: 12px; padding: 9px 11px; margin: 10px 0; }
  .as-btn { padding: 10px 12px; border-radius: 16px; gap: 12px; }
  .as-ico { width: 38px; height: 38px; border-radius: 13px; box-shadow: none; }
  .as-bt small { display: none; }
}

/* ===== Джерела, мобайл: чистий мінімалістичний вигляд ===== */
@media (max-width: 899px) {
  #content-panel-sources { gap: 10px; }
  #content-panel-sources .src-hero { padding: 10px 14px; gap: 12px; border-radius: 16px; }
  #content-panel-sources .src-hero-ico { width: 36px; height: 36px; border-radius: 12px; }
  #content-panel-sources .src-hero-ico svg { width: 19px; height: 19px; }
  #content-panel-sources .src-hero-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  #content-panel-sources .src-hero-num { font-size: 24px; }
  #content-panel-sources .src-hero-label { margin: 0; font-size: 13px; font-weight: 700; }
  #content-panel-sources .src-hero-chip { padding: 4px 10px; font-size: 11px; }
  #content-panel-sources .section-label, #content-panel-sources #sources-list-label { margin: 6px 0 6px !important; padding: 0 2px; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; color: var(--hint); }
  #content-panel-sources .src-add-row { padding: 4px 4px 4px 12px; border-radius: 16px; }
  #content-panel-sources .src-add-btn { min-height: 38px; padding: 0 12px; }
  /* плитка: аватар зверху, назва під ним, перемикач у куті */
  #content-panel-sources .source-tile { gap: 6px; padding: 12px; border-radius: 16px; }
  #content-panel-sources .source-tile-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  #content-panel-sources .source-tile-body { width: 100%; }
  #content-panel-sources .source-tile-name { font-size: 13.5px; }
  #content-panel-sources .source-tile-meta { font-size: 11.5px; }
  #content-panel-sources .src-state.on { display: none; }
  #content-panel-sources .src-state { margin-top: 4px; }
  #content-panel-sources .source-tile-action:has([data-action="quick-toggle"]) { position: absolute; top: 12px; right: 12px; width: auto; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"] { position: relative; width: 42px; min-width: 42px; height: 26px; min-height: 26px; padding: 0; border: 0; border-radius: 999px; font-size: 0; line-height: 0; color: transparent; background: rgba(255,255,255,.16); transition: background .22s; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .24s cubic-bezier(.3,1.4,.5,1); }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"].on { background: var(--accent); border: 0; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"].on::after { transform: translateX(16px); }
  #content-panel-sources #sources-show-more-btn { margin-top: 4px; padding: 8px; border: 0; background: none; color: var(--accent-2, var(--accent)); font-size: 13px; font-weight: 800; }
  /* Рекомендовані та спільнота: компактні рядки */
  #content-panel-sources .settings-card { margin-top: 4px !important; border-radius: 16px; }
  #content-panel-sources .settings-card-header { padding: 10px 12px; gap: 10px; }
  #content-panel-sources .settings-card-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 11px; }
  #content-panel-sources .settings-card-title { font-size: 14px; }
  #content-panel-sources .settings-card-desc { margin-top: 1px; font-size: 12px; line-height: 1.3; }
}

/* ===== Джерела: сучасні плитки + окреме вікно джерела ===== */
/* Плитки: статус — кільцем навколо аватара, вимкнені приглушені */
#content-panel-sources .source-tile { border-radius: 22px; padding: 14px 12px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); transition: transform .16s cubic-bezier(.3,1.5,.5,1), background .2s; }
#content-panel-sources .source-tile:active { transform: scale(.97); background: rgba(255,255,255,.06); }
#content-panel-sources .source-tile-head .channel-avatar { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px rgba(255,255,255,.18); transition: box-shadow .25s, opacity .25s; }
#content-panel-sources .src-avatar-wrap:has(.src-dot.on) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px #34d399; }
#content-panel-sources .src-avatar-wrap:has(.src-dot.auto) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px #f5c26b; }
#content-panel-sources .src-avatar-wrap:has(.src-dot.err) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px #fb7185; }
#content-panel-sources .src-dot { display: none; }
#content-panel-sources .source-tile:has(.pill.off) .channel-avatar { opacity: .5; filter: grayscale(.6); }
#content-panel-sources .source-tile:has(.pill.off) .source-tile-name { color: var(--hint); }
#content-panel-sources .source-tile-name { font-size: 14px; font-weight: 800; }
#content-panel-sources .source-tile-meta { font-size: 12px; }

/* Вікно джерела */
#source-modal { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); }
#source-modal .modal-sheet { max-height: 100%; overflow-y: auto; scrollbar-width: none; border-radius: 28px 28px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
#source-modal .modal-sheet::-webkit-scrollbar { display: none; }
#source-modal .modal-header { position: sticky; top: 0; z-index: 3; margin: 0 0 4px; padding: 6px 0 10px; font-size: 17px; font-weight: 800; background: linear-gradient(var(--bg, #0b0a14) 72%, transparent); }
#source-modal #source-modal-body { display: flex; flex-direction: column; gap: 10px; }
#source-modal #source-modal-body > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#source-modal .modal-hero { display: flex; align-items: center; gap: 14px; padding: 6px 2px 2px; background: none; border: 0; }
#source-modal .modal-hero-avatar { width: 60px; height: 60px; min-width: 60px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent); }
#source-modal .modal-hero-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
#source-modal .modal-hero-meta { margin-top: 3px; font-size: 12.5px; color: var(--hint); }
#source-modal .ads-row-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#source-modal .ads-row-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
#source-modal .ads-row-stat-icon { width: 28px; height: 28px; border-radius: 10px; box-shadow: none; }
#source-modal .ads-row-stat-icon svg { width: 15px; height: 15px; }
#source-modal .ads-row-stat-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
#source-modal .ads-row-stat-label { font-size: 11px; line-height: 1.2; text-align: center; color: var(--hint); }
#source-modal #source-modal-body > .pill-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#source-modal .pill-row .pill { height: 44px; min-height: 44px; justify-content: center; border-radius: 15px; font-size: 14px; font-weight: 800; }
#source-modal .pill-row .pill.on { color: #34d399; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.32); }
#source-modal .pill-row .pill.off { color: var(--hint); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
#source-modal .pill-row .pill.danger { padding: 0 16px; color: #fb7185; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.28); }
#source-modal .settings-card { margin: 0; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); box-shadow: none; }
#source-modal .settings-card-header { gap: 12px; }
#source-modal .settings-card-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 12px; box-shadow: none; }
#source-modal .settings-card-icon svg { width: 18px; height: 18px; }
#source-modal .settings-card-title { font-size: 14.5px; }
#source-modal .settings-card-desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--hint); }
#source-modal .settings-card-extra { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
#source-modal .chip-grid { gap: 6px; }
#source-modal .chip-compact { height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
#source-modal [data-role="stop-word-suggestion"] { color: var(--hint); background: transparent; border-style: dashed; }
#source-modal input[type="text"] { height: 42px; margin: 0; padding: 0 14px; box-sizing: border-box; border-radius: 14px; font-size: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
#source-modal .src-flt-label { margin: 12px 0 6px; font-size: 12px; font-weight: 800; color: var(--hint); }
#source-modal .src-flt-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; }
#source-modal .footer-chip { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }

@media (max-width: 899px) {
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"] { width: 38px; min-width: 38px; height: 22px; min-height: 22px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"]::after { top: 3px; left: 3px; width: 16px; height: 16px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"].on::after { transform: translateX(16px); }
  #content-panel-sources .source-tile-action:has([data-action="quick-toggle"]) { top: 14px; right: 12px; }
}

/* ===== Режим продуктивності для телефонів (body.perf вмикається автоматично на мобайлі) ===== */
html { -webkit-tap-highlight-color: transparent; }
button, .pill, .nav-btn, [role="button"], .segment, .chip-compact { touch-action: manipulation; }
body.perf { background-attachment: scroll !important; }
/* 1. Без дорогого розмиття фону: замість blur — щільніша підкладка */
body.perf *, body.perf *::before, body.perf *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; will-change: auto !important; }
body.perf .modal-overlay { background: rgba(6, 8, 14, .9); }
body.perf .bottom-nav { background-color: color-mix(in srgb, var(--bg, #0b0a14) 94%, transparent); }
body.perf .topbar { background-color: color-mix(in srgb, var(--bg, #0b0a14) 92%, transparent); }
body.perf .modal-sheet { background-color: var(--bg, #0b0a14); }
/* 2. Декоративні нескінченні анімації вимкнено, лишаються лише індикатори завантаження */
body.perf *, body.perf *::before, body.perf *::after { animation-iteration-count: 1 !important; }
body.perf .maintenance-blob, body.perf .splash-grid, body.perf .desktop-ambient { display: none !important; }
body.perf .loading svg, body.perf .loading, body.perf .fx-refresh.spin, body.perf .aik-refresh.spin svg,
body.perf .aik-hero[data-state="loading"] .aik-orb svg, body.perf .aik-tester-run.busy svg, body.perf .voice-btn.rec,
body.perf [class*="skeleton"], body.perf [class*="skeleton"]::before, body.perf [class*="skeleton"]::after,
body.perf .pub-banner:not(.done) *, body.perf .pub-banner:not(.done) *::before, body.perf .pub-banner:not(.done) *::after,
body.perf .is-sending, body.perf .is-sending::after, body.perf .is-sending *, body.perf .rw-busy, body.perf .rw-busy *, body.perf .rw-busy::after,
body.perf #editor-ai-title-btn.loading *, body.perf #editor-publish-btn.loading, body.perf #editor-publish-btn.loading *,
body.perf #splash-screen *, body.perf .apg-voice.loading svg, body.perf .qe2-ring { animation-iteration-count: infinite !important; }
/* 3. Менше важких тіней та фільтрів */
body.perf .settings-card, body.perf .channel-card, body.perf .submission-card, body.perf .queue-card, body.perf .source-tile,
body.perf .home-dash-card, body.perf .modal-sheet, body.perf .src-hero, body.perf .ads-hero-card, body.perf .aik-hero { box-shadow: none !important; }
/* 4. Довгі списки малюються лише коли потрапляють у екран */
body.perf .swipe-wrap, body.perf .source-tile { content-visibility: auto; contain-intrinsic-size: auto 104px; }
body.perf .tab-screen { overscroll-behavior-y: contain; }
@media (prefers-reduced-motion: reduce) { body.perf *, body.perf *::before, body.perf *::after { animation-duration: .01ms !important; } }

/* Меню стилів «Перефразувати» на телефоні: на всю ширину екрана й поверх решти кнопок (було обрізане навпіл) */
@media (max-width: 899px) {
  .editor-quick-actions > div:has(> #ai-rewrite-style-menu[style*="block"]) { z-index: 90; }
  #ai-rewrite-style-menu.ai-style-menu { left: 0; right: auto; width: calc(100vw - 34px); max-width: calc(100vw - 34px); box-sizing: border-box; z-index: 90; }
  #ai-rewrite-style-menu .ai-style-sub { white-space: normal; }
  #ai-rewrite-style-menu .ai-style-text { flex: 1; min-width: 0; }
}

/* Менше смикань: стабільні шари для нижньої панелі та шапки, плавний скрол без стрибків */
body.perf .bottom-nav, body.perf .topbar { transform: translateZ(0); backface-visibility: hidden; }
body.perf { scroll-behavior: auto; -webkit-overflow-scrolling: touch; }
body.perf .modal-sheet, body.perf .tab-screen, body.perf .apg-main, body.perf .as-sheet { overscroll-behavior: contain; }
body.perf img { content-visibility: auto; }
body.perf .channel-avatar, body.perf .modal-hero-avatar { transform: translateZ(0); }

/* Баг-репорт */
.topbar-bug-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 8px; padding: 0; border-radius: 13px; color: var(--text); cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: transform .14s cubic-bezier(.3,1.5,.5,1), background .2s; }
.topbar-bug-btn[hidden] { display: none; }
.topbar-bug-btn svg { width: 20px; height: 20px; }
.topbar-bug-btn:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 22%, transparent); }
#report-bug-modal { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); }
#report-bug-modal .modal-sheet { max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.bug-shot-row { margin: 4px 0 6px; padding: 10px 12px; align-items: center; flex-wrap: nowrap; row-gap: 0; }
.bug-shot-row img { flex: none; width: 54px; height: 54px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); }
.bug-shot-row img[hidden] { display: none; }
.bug-meta { margin: 0 2px 10px; font-size: 11.5px; line-height: 1.4; color: var(--hint); }

/* Стоп-слова джерела: згорнуті, доки не натиснуть */
#source-modal .sw-collapsible .settings-card-header { cursor: pointer; align-items: center; }
#source-modal .sw-collapsible:not(.open) .settings-card-extra { display: none; }
#source-modal .sw-collapsible.open .settings-card-extra { animation: swOpen .28s cubic-bezier(.2,.8,.3,1) both; }
@keyframes swOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#source-modal .sw-count { flex: none; min-width: 26px; height: 26px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
#source-modal .sw-chev { flex: none; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 9px; color: var(--hint); background: rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
#source-modal .sw-collapsible.open .sw-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { #source-modal .sw-collapsible.open .settings-card-extra, #source-modal .sw-chev { animation: none; transition: none; } }

/* ===== Вікно джерела: фінальна полірування ===== */
#source-modal .modal-header { align-items: center; padding: 4px 0 12px; }
#source-modal .modal-header > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
#source-modal .modal-header .modal-close { width: 36px; height: 36px; border-radius: 12px; }
#source-modal .modal-hero { position: relative; overflow: hidden; padding: 16px; border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.08)); }
#source-modal .modal-hero-avatar { width: 56px; height: 56px; min-width: 56px; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 4px var(--accent), 0 10px 26px -8px var(--accent-glow); }
#source-modal .modal-hero-title { font-size: 18px; }
#source-modal .modal-hero-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
#source-modal .modal-hero .modal-close { align-self: flex-start; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.08); }
#source-modal .ads-row-stats { gap: 0; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
#source-modal .ads-row-stat { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 2px 8px; padding: 12px 6px; border: 0; border-radius: 0; background: none; }
#source-modal .ads-row-stat + .ads-row-stat { border-left: 1px solid rgba(255,255,255,.07); }
#source-modal .ads-row-stat-icon { display: none; }
#source-modal .ads-row-stat-value { flex: 0 0 100%; text-align: center; font-size: 22px; letter-spacing: -.03em; color: var(--text); }
#source-modal .ads-row-stat-label { flex: 0 0 100%; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#source-modal .ads-row-stat:nth-child(1) .ads-row-stat-value { color: var(--accent-2, var(--accent)); }
#source-modal .ads-row-stat:nth-child(2) .ads-row-stat-value { color: #fbbf24; }
#source-modal .ads-row-stat:nth-child(3) .ads-row-stat-value { color: #34d399; }
#source-modal .settings-card { border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
#source-modal .settings-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#source-modal .sw-collapsible:not(.open) .settings-card-desc { display: none; }
#source-modal .sw-collapsible:not(.open) .settings-card-title { font-size: 15px; }
#source-modal .settings-card-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 13px; box-shadow: 0 8px 18px -10px currentColor; }

/* Іконка автонастройки: чиста, об'ємна плитка */
.as-ico { width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2, var(--accent)) 92%, #fff 8%), var(--accent-deep, var(--accent))); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -8px 14px -10px rgba(0,0,0,.35), 0 10px 22px -10px var(--accent-glow); }
.as-ico svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); }
@media (max-width: 899px) { .as-ico { width: 42px; height: 42px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px -10px var(--accent-glow); } .as-ico svg { width: 22px; height: 22px; } }

/* ШІ-інсайт тижня */
[data-role="growth-insight-card"] .settings-card-title { display: inline-block; vertical-align: middle; }
.gi-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 9px 3px 7px; vertical-align: middle; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.gi-chip svg { width: 13px; height: 13px; }
.gi-chip.v-growth { color: #34d399; background: rgba(52,211,153,.14); }
.gi-chip.v-drop { color: #fb7185; background: rgba(251,113,133,.14); }
.gi-chip.v-stable { color: #fbbf24; background: rgba(251,191,36,.14); }
.gi { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 8px; }
.gi-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.gi-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; }
.gi-stats > div + div { border-left: 1px solid rgba(255,255,255,.07); }
.gi-stats b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gi-stats b.pos { color: #34d399; } .gi-stats b.neg { color: #fb7185; }
.gi-stats small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hint); }
.gi-head { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--text); }
.gi-reason { font-size: 13px; line-height: 1.45; color: var(--hint); }
.gi-acts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gi-acts li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.gi-acts li svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--accent-2, var(--accent)); }
.gi-btn { align-self: flex-start; height: 38px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.gi-btn:active { transform: scale(.97); }
.gi-ai-label { margin: 6px 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }

/* ===== Джерела, мобайл: максимально компактно ===== */
@media (max-width: 899px) {
  #content-panel-sources { gap: 8px; }
  #content-panel-sources .src-hero { flex-wrap: nowrap; padding: 8px 12px; gap: 10px; border-radius: 16px; }
  #content-panel-sources .src-hero-ico { width: 32px; height: 32px; border-radius: 11px; }
  #content-panel-sources .src-hero-ico svg { width: 17px; height: 17px; }
  #content-panel-sources .src-hero-main { flex-wrap: nowrap; gap: 8px; min-width: 0; }
  #content-panel-sources .src-hero-num { font-size: 22px; line-height: 1; }
  #content-panel-sources .src-hero-label { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #content-panel-sources .src-hero-chip { padding: 3px 9px; font-size: 10.5px; }
  .sw2 { border-radius: 14px; }
  .sw2-head { padding: 7px 10px; gap: 9px; }
  .sw2-ico { width: 30px; height: 30px; border-radius: 10px; }
  .sw2-ico svg { width: 16px; height: 16px; }
  .sw2-t b { font-size: 13.5px; }
  .sw2-body { padding-left: 10px; padding-right: 10px; }
  #content-panel-sources #add-tg-block > .section-label { display: none; }
  #content-panel-sources .src-add-row { padding: 3px 3px 3px 12px; border-radius: 14px; }
  #content-panel-sources .src-add-row input { font-size: 14px; }
  #content-panel-sources .src-add-btn { min-height: 36px; padding: 0 11px; border-radius: 11px; }
  #content-panel-sources #sources-list-label { margin: 2px 0 0 !important; font-size: 11.5px; }
  #content-panel-sources #sources-search { height: 38px; margin-bottom: 0 !important; padding: 0 12px; border-radius: 12px; font-size: 13.5px; }
  #content-panel-sources .sources-tile-grid { gap: 7px; }
  #content-panel-sources .source-tile { gap: 4px; padding: 10px 10px 9px; border-radius: 14px; }
  #content-panel-sources .source-tile-head { gap: 6px; }
  #content-panel-sources .source-tile-head .channel-avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3px rgba(255,255,255,.16); }
  #content-panel-sources .src-avatar-wrap:has(.src-dot.on) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3px #34d399; }
  #content-panel-sources .src-avatar-wrap:has(.src-dot.auto) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3px #f5c26b; }
  #content-panel-sources .src-avatar-wrap:has(.src-dot.err) .channel-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3px #fb7185; }
  #content-panel-sources .source-tile-name { font-size: 13px; }
  #content-panel-sources .source-tile-meta { font-size: 11px; margin-top: 0; }
  #content-panel-sources .source-tile-action:has([data-action="quick-toggle"]) { top: 10px; right: 10px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"] { width: 34px; min-width: 34px; height: 20px; min-height: 20px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"]::after { top: 2px; left: 2px; width: 16px; height: 16px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"].on::after { transform: translateX(14px); }
  #content-panel-sources .settings-card { border-radius: 14px; }
  #content-panel-sources .settings-card-header { padding: 8px 10px; gap: 9px; }
  #content-panel-sources .settings-card-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 10px; }
  #content-panel-sources .settings-card-title { font-size: 13.5px; }
  #content-panel-sources .settings-card-desc { display: none; }
  #content-panel-sources .settings-card-extra { padding: 4px 10px 10px; }
}

/* ===== Підтримка: головний екран, теми, шаблони ===== */
#support-modal .support-sheet { display: flex; flex-direction: column; }
#support-chat-empty:not([style*="none"]) ~ .section-label, #support-chat-empty:not([style*="none"]) ~ #support-faq-chips { display: none; }
#support-chat-empty { padding: 0; }
.sh { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 6px; }
.sh-hero { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.08)); }
.sh-hero b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sh-hero span { font-size: 13px; line-height: 1.4; color: var(--hint); }
.sh-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sh-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.sh-search svg { flex: none; width: 18px; height: 18px; color: var(--hint); }
.sh-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 14.5px; color: var(--text); }
.sh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sh-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s; }
.sh-tile:active { transform: scale(.96); border-color: var(--accent); }
.sh-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.sh-ico svg { width: 17px; height: 17px; }
.sh-tile b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.sh-tile small { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; color: var(--hint); }
.sh-sub { margin: 2px 2px -4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.sh-list { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: var(--text); cursor: pointer; }
.sh-row + .sh-row { border-top: 1px solid rgba(255,255,255,.07); }
.sh-row:active { background: rgba(255,255,255,.06); }
.sh-row svg { flex: none; width: 16px; height: 16px; color: var(--hint); }
.sh-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px 6px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); cursor: pointer; }
.sh-back svg { width: 15px; height: 15px; }
.sh-empty { padding: 18px 14px; border-radius: 16px; text-align: center; font-size: 13px; color: var(--hint); border: 1px dashed rgba(255,255,255,.14); }
.sh-quick { display: flex; gap: 8px; }
.sh-quick button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 14px; font: inherit; font-size: 13px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sh-quick button svg { width: 16px; height: 16px; color: var(--accent-2, var(--accent)); }
/* панель над композером */
#sup-tools { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 8px; }
.sup-cats { display: flex; gap: 6px; }
.sup-cat { flex: 1; height: 32px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .2s, color .2s, border-color .2s; }
.sup-cat.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
#sup-tools.has-ticket .sup-cats, #sup-tools.has-ticket .sup-tpl { display: none; }
.sup-tpl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.sup-tpl::-webkit-scrollbar { display: none; }
.sup-tp { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text); cursor: pointer; background: transparent; border: 1px dashed rgba(255,255,255,.2); }
.sup-tp:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sup-opts { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sup-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--hint); cursor: pointer; }
.sup-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sup-box { width: 20px; height: 20px; border-radius: 7px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: background .2s, box-shadow .2s; }
.sup-opt input:checked + .sup-box { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.sup-shot { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.sup-shot svg { width: 16px; height: 16px; color: var(--accent-2, var(--accent)); }
.sup-shot:disabled { opacity: .6; }
/* відгук під відповіддю */
.sup-fb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px 38px; font-size: 12.5px; color: var(--hint); }
.sup-fb button { height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.sup-fb button[data-v="no"] { color: var(--accent-2, var(--accent)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sup-fb .ok { color: #34d399; font-weight: 700; }
@media (max-width: 899px) { .sh-hero { padding: 12px 14px; } .sh-tile { padding: 10px; } }

/* ===== Налаштування каналу → Головна ===== */
#channel-modal .mp { display: flex; flex-direction: column; gap: 14px; }
.mp-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mp-st { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 10px 10px 12px; border-radius: 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s; }
.mp-st:active { transform: scale(.96); }
.mp-st i { position: absolute; top: 11px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.mp-st small { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hint); }
.mp-st b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.mp-st[data-s="on"] i { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.7); }
.mp-st[data-s="on"] b { color: #34d399; }
.mp-st[data-s="warn"] i { background: #f5c26b; }
.mp-st[data-s="warn"] b { color: #f5c26b; }
.mp-st[data-s="off"] b { color: var(--hint); }
.mp-group { display: flex; flex-direction: column; gap: 8px; }
.mp-title { display: flex; align-items: center; gap: 10px; padding: 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.mp-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.mp-cards { display: flex; flex-direction: column; gap: 8px; }
.mp-tiles .mp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
#channel-modal .mp .settings-card { margin: 0 !important; padding: 12px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
#channel-modal .mp .settings-card-header { gap: 12px; align-items: center; }
#channel-modal .mp .settings-card-icon { width: 38px; height: 38px; min-width: 38px; border-radius: 13px; }
#channel-modal .mp .settings-card-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
#channel-modal .mp .settings-card-desc { margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--hint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#channel-modal .mp .settings-card-extra:not(.collapsed) { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
#channel-modal .mp .settings-card-extra.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal .mp .settings-card-extra.btn-row .pill { height: 40px; justify-content: center; border-radius: 13px; font-size: 13px; font-weight: 800; }
#channel-modal .mp .state-accent-on { border-color: color-mix(in srgb, #34d399 30%, rgba(255,255,255,.08)); }
/* плитки: сповіщення й модерація */
#channel-modal .mp-tiles .settings-card { padding: 12px; }
#channel-modal .mp-tiles .settings-card-header { flex-wrap: wrap; row-gap: 8px; }
#channel-modal .mp-tiles .settings-card-icon { order: 1; }
#channel-modal .mp-tiles .watermark-toggle { order: 2; margin-left: auto !important; }
#channel-modal .mp-tiles .settings-card-body { order: 3; flex: 1 0 100%; }
#channel-modal .mp-tiles .settings-card-desc { -webkit-line-clamp: 2; }
/* інсайт */
#channel-modal .mp > [data-role="growth-insight-card"] { border-left: 0; }
.mp-flash { animation: mpFlash 1.1s ease-out; }
@keyframes mpFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); border-color: var(--accent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (max-width: 420px) { .mp-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .mp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .mp-group[data-g="pub"] .mp-cards { grid-template-columns: 1fr; }
  .mp-tiles .mp-cards { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mp-flash { animation: none; } }

/* ===== Налаштування каналу → Головна: друга ітерація (чистіше й компактніше) ===== */
#channel-modal .mp { gap: 12px; }
/* ШІ-інсайт: заголовок у шапці, вміст на всю ширину (без порожньої лівої колонки) */
#channel-modal .mp > [data-role="growth-insight-card"] { padding: 12px 14px; }
#channel-modal .mp > [data-role="growth-insight-card"] .settings-card-header { flex-wrap: wrap; align-items: center; row-gap: 10px; }
#channel-modal .mp > [data-role="growth-insight-card"] .settings-card-body { display: contents; }
#channel-modal .mp > [data-role="growth-insight-card"] .settings-card-icon { order: 0; width: 34px; height: 34px; min-width: 34px; border-radius: 12px; }
#channel-modal .mp > [data-role="growth-insight-card"] .settings-card-title { order: 1; flex: 1; min-width: 0; font-size: 15px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-chip { order: 2; margin-left: 0; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi, #channel-modal .mp > [data-role="growth-insight-card"] .gi-ai-label, #channel-modal .mp > [data-role="growth-insight-card"] .growth-insight-text, #channel-modal .mp > [data-role="growth-insight-card"] .growth-insight-toggle { order: 3; flex: 1 0 100%; margin: 0; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi { gap: 8px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-head { font-size: 14.5px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-acts li { padding: 8px 11px; font-size: 12.5px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-stats > div { padding: 8px 2px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-stats b { font-size: 17px; }
#channel-modal .mp > [data-role="growth-insight-card"] .gi-ai-label { margin-top: 2px; }
#channel-modal .mp > [data-role="growth-insight-card"] .growth-insight-text { font-size: 12px; line-height: 1.4; }
/* панель стану: завжди 5 в ряд (джерела+новини+автопост+фільтр+тривоги), низька */
.mp-strip { grid-template-columns: repeat(5, 1fr) !important; gap: 6px; }
.mp-st { padding: 8px 8px 8px 10px; gap: 1px; border-radius: 14px; }
.mp-st i { top: 9px; right: 8px; width: 7px; height: 7px; }
.mp-st small { font-size: 9.5px; letter-spacing: .04em; }
.mp-st b { font-size: 13.5px; }
/* картки-рядки: в один рядок, без розтягування по висоті */
#channel-modal .mp .settings-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
#channel-modal .mp .settings-card-desc { -webkit-line-clamp: 1; font-size: 11.5px; }
#channel-modal .mp .settings-card { padding: 10px 12px; border-radius: 18px; }
#channel-modal .mp .settings-card-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 12px; }
#channel-modal .mp .settings-card-body { min-width: 0; }
#channel-modal .mp .badge-inactive { flex: none; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* кнопки «Тест-новина / Посилання» без зайвої підкладки */
#channel-modal .mp .settings-card-extra.btn-row { margin-top: 10px; padding: 0; border: 0; background: none; box-shadow: none; }
#channel-modal .mp .settings-card-extra.btn-row .pill { height: 38px; border-radius: 12px; font-size: 12.5px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); box-shadow: none; }
/* плитки внизу: компактніше */
#channel-modal .mp-tiles .settings-card { padding: 10px 12px; }
#channel-modal .mp-tiles .settings-card-title { white-space: normal; font-size: 13.5px; line-height: 1.25; }
#channel-modal .mp-tiles .settings-card-desc { -webkit-line-clamp: 2; }
#channel-modal .mp-tiles [data-role="comment-mod-stats"] { display: none; }
.mp-title { margin-top: 2px; }

/* ===== Налаштування каналу: єдиний сучасний вигляд для всіх вкладок ===== */
#channel-modal .modal-sheet { overscroll-behavior: contain; }
#channel-modal-body { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
#channel-modal .modal-header > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); }
#channel-modal .modal-header .modal-close { width: 36px; height: 36px; border-radius: 12px; }
/* картка каналу */
#channel-modal .modal-hero { position: relative; overflow: hidden; margin: 0 0 12px; padding: 14px; gap: 14px; border-radius: 24px; background: radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.08)); }
#channel-modal .modal-hero-avatar { width: 56px; height: 56px; min-width: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 4px var(--accent), 0 10px 24px -8px var(--accent-glow); }
#channel-modal .modal-hero-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
#channel-modal .modal-hero-meta { margin-top: 3px; font-size: 12.5px; color: var(--hint); }
/* панелі й картки всіх вкладок */
#channel-modal .modal-tab-panel.active { display: flex; flex-direction: column; gap: 10px; }
#channel-modal .modal-tab-panel .settings-card { margin: 0 !important; padding: 12px 14px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
#channel-modal .modal-tab-panel .settings-card-header { gap: 12px; align-items: center; }
#channel-modal .modal-tab-panel .settings-card-icon { width: 36px; height: 36px; min-width: 36px; border-radius: 12px; }
#channel-modal .modal-tab-panel .settings-card-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
#channel-modal .modal-tab-panel .settings-card-desc { margin-top: 1px; font-size: 12px; line-height: 1.38; color: var(--hint); }
#channel-modal .modal-tab-panel .settings-card-extra:not(.collapsed):not(.btn-row) { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
/* елементи керування */
#channel-modal input[type="text"], #channel-modal input[type="search"], #channel-modal input[type="time"], #channel-modal input[type="number"], #channel-modal textarea { box-sizing: border-box; border-radius: 14px; font-size: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
#channel-modal input[type="text"], #channel-modal input[type="search"] { height: 42px; padding: 0 14px; }
#channel-modal input:focus, #channel-modal textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#channel-modal .chip-compact, #channel-modal .footer-chip, #channel-modal .chip-action-btn { border-radius: 999px; font-size: 12.5px; font-weight: 700; }
#channel-modal .chip-action-btn { padding: 6px 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-2, var(--accent)); }
#channel-modal .stepper-btn { width: 40px; height: 40px; border-radius: 13px; font-size: 20px; font-weight: 800; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
#channel-modal .stepper-value { min-width: 84px; font-size: 16px; font-weight: 800; text-align: center; }
#channel-modal .watermark-toggle .wt-hint, #channel-modal .muted { line-height: 1.4; }
#channel-modal .pill { border-radius: 13px; font-weight: 800; }
@media (max-width: 899px) {
  #channel-modal .modal-hero { padding: 12px; border-radius: 22px; }
}

/* ===== Підтримка: друга ітерація (поля, компактність, телефон) ===== */
#support-modal .support-sheet { --sp: 14px; }
#support-chat-empty:not([style*="none"]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
#support-chat-empty::-webkit-scrollbar { display: none; }
.sh { padding: 10px var(--sp, 14px) 6px; gap: 10px; }
.sh-hero { padding: 12px 14px; border-radius: 18px; gap: 2px; }
.sh-hero b { font-size: 17px; }
.sh-hero span { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sh-search { height: 42px; border-radius: 14px; }
/* теми: два стовпці, один рядок кожна */
.sh-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-tile { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 15px; min-width: 0; }
.sh-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.sh-ico svg { width: 16px; height: 16px; }
.sh-tile b { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-tile small { position: static; flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 11px; color: var(--hint); background: rgba(255,255,255,.07); }
.sh-sub { margin: 4px 4px -2px; }
.sh-row { padding: 11px 14px; font-size: 13.5px; }
.sh-quick button { height: 40px; font-size: 13px; white-space: nowrap; }
/* стрічка «Часті запитання» і поля */
#support-modal .support-sheet > .section-label { margin: 6px var(--sp, 14px) 0; }
#support-modal #support-faq-chips { padding-left: var(--sp, 14px); padding-right: var(--sp, 14px); }
#support-modal #support-faq-suggest { margin-left: var(--sp, 14px); margin-right: var(--sp, 14px); }
/* панель інструментів над композером: одна тонка смуга */
#sup-tools { margin: 6px var(--sp, 14px) 6px; gap: 6px; }
.sup-row { display: flex; align-items: center; gap: 6px; }
.sup-cats { flex: 1; min-width: 0; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.sup-cat { height: 28px; font-size: 12px; border: 0; background: transparent; }
.sup-cat.on { box-shadow: 0 6px 14px -8px var(--accent-glow); }
.sup-ib { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 12px; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: color .2s, background .2s, border-color .2s, transform .14s cubic-bezier(.3,1.5,.5,1); }
.sup-ib svg { width: 18px; height: 18px; }
.sup-ib:active { transform: scale(.92); }
.sup-ib.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.sup-ib.busy { opacity: .55; animation: supPulse 1s ease-in-out infinite; }
@keyframes supPulse { 50% { opacity: .9; } }
#sup-tools.has-ticket .sup-row { justify-content: flex-end; }
#sup-tools.has-thread .sup-tpl, #sup-tools.has-ticket .sup-tpl { display: none; }
.sup-tpl { margin: 0 calc(var(--sp, 14px) * -1); padding: 0 var(--sp, 14px); }
.sup-tp { height: 28px; font-size: 11.5px; }
.sup-fb { margin-left: calc(var(--sp, 14px) + 38px); margin-right: var(--sp, 14px); }
@media (prefers-reduced-motion: reduce) { .sup-ib.busy { animation: none; } }

/* Баг: «Головна» залишалась видимою на всіх вкладках, бо display:flex перебивав приховування неактивних панелей */
#channel-modal .modal-tab-panel:not(.active) { display: none !important; }

/* ===== Налаштування каналу → Головна: третя ітерація (списки замість окремих карток) ===== */
#channel-modal .mp { gap: 14px; }
/* ШІ-інсайт: згорнутий рядок */
#channel-modal .mp > .gi-card { padding: 0; overflow: hidden; }
#channel-modal .mp > .gi-card .settings-card-header { padding: 12px 14px; cursor: pointer; flex-wrap: wrap; row-gap: 8px; }
#channel-modal .mp > .gi-card:not(.open) .gi-stats, #channel-modal .mp > .gi-card:not(.open) .gi-reason, #channel-modal .mp > .gi-card:not(.open) .gi-acts, #channel-modal .mp > .gi-card:not(.open) .gi-btn,
#channel-modal .mp > .gi-card:not(.open) .gi-ai-label, #channel-modal .mp > .gi-card:not(.open) .growth-insight-text, #channel-modal .mp > .gi-card:not(.open) .growth-insight-toggle { display: none; }
#channel-modal .mp > .gi-card:not(.open) .gi-head { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); opacity: .92; }
#channel-modal .mp > .gi-card.open { border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08)); }
.gi-chev { order: 2; flex: none; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 9px; color: var(--hint); background: rgba(255,255,255,.07); transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
.gi-card.open .gi-chev { transform: rotate(180deg); }
/* панель стану: один контейнер з розділювачами */
.mp-strip { gap: 0 !important; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.mp-st { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 9px 10px 9px 12px; }
.mp-st + .mp-st { border-left: 1px solid rgba(255,255,255,.07) !important; }
/* групи: одна підкладка, рядки з розділювачами */
#channel-modal .mp .mp-cards, #channel-modal .mp .mp-tiles .mp-cards { display: flex; flex-direction: column; gap: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.08); }
#channel-modal .mp .mp-cards > .settings-card { border: 0; border-radius: 0; background: none; padding: 12px 14px; }
#channel-modal .mp .mp-cards > .settings-card + .settings-card { border-top: 1px solid rgba(255,255,255,.07); }
#channel-modal .mp .mp-cards > .settings-card.state-accent-on { border-color: transparent; box-shadow: inset 3px 0 0 #34d399; }
#channel-modal .mp .mp-tiles .settings-card-header { flex-wrap: nowrap; row-gap: 0; }
#channel-modal .mp .mp-tiles .settings-card-icon, #channel-modal .mp .mp-tiles .watermark-toggle, #channel-modal .mp .mp-tiles .settings-card-body { order: 0; flex: initial; margin-left: 0 !important; }
#channel-modal .mp .mp-tiles .settings-card-body { flex: 1; min-width: 0; }
#channel-modal .mp .mp-tiles .watermark-toggle { flex: none; }
#channel-modal .mp .mp-tiles .settings-card-title { white-space: nowrap; font-size: 14px; }
#channel-modal .mp .mp-tiles .settings-card-desc { -webkit-line-clamp: 1; }
#channel-modal .mp .mp-tiles [data-role="comment-mod-stats"] { display: none; }
#channel-modal .mp .settings-card-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 11px; }
#channel-modal .mp .settings-card-extra.btn-row { margin-top: 10px; }
@media (min-width: 900px) { #channel-modal .mp .mp-cards, #channel-modal .mp .mp-group[data-g="pub"] .mp-cards { display: flex; grid-template-columns: none; } }
@media (prefers-reduced-motion: reduce) { .gi-chev { transition: none; } }

/* ===== Головна каналу: четверта ітерація ===== */
/* ШІ-інсайт у згорнутому вигляді: лише назва розділу */
#channel-modal .mp > .gi-card:not(.open) .gi-head, #channel-modal .mp > .gi-card:not(.open) .gi-chip { display: none !important; }
#channel-modal .mp > .gi-card:not(.open) .settings-card-header { padding: 11px 14px; row-gap: 0; }
#channel-modal .mp > .gi-card .settings-card-header { align-items: center; }
/* сповіщення й модерація: звичайні рядки з перемикачем справа */
#channel-modal .mp .mp-rows .settings-card-header { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 12px; }
#channel-modal .mp .mp-rows .settings-card-icon { order: 0 !important; flex: none !important; }
#channel-modal .mp .mp-rows .settings-card-body { order: 1 !important; flex: 1 1 0 !important; min-width: 0; }
#channel-modal .mp .mp-rows .watermark-toggle { order: 2 !important; flex: none !important; margin: 0 !important; }
#channel-modal .mp .mp-rows .settings-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
#channel-modal .mp .mp-rows .settings-card-desc { -webkit-line-clamp: 1; }
#channel-modal .mp .mp-rows [data-role="comment-mod-stats"] { display: none; }
/* розкрита «Автоматизація»: рівні рядки, підказки під назвою */
#channel-modal .mp [data-role="automation-panel"]:not(.collapsed) { margin-top: 10px; padding: 4px 0 0; border-top: 1px solid rgba(255,255,255,.07); background: none; }
#channel-modal .mp [data-role="automation-panel"] .watermark-toggle { width: 100%; justify-content: space-between; margin: 0 0 2px !important; padding: 10px 0; font-size: 14px; font-weight: 700; }
#channel-modal .mp [data-role="automation-panel"] .muted { margin: 0 0 8px !important; padding-right: 56px; font-size: 11.5px; line-height: 1.4; }
#channel-modal .mp [data-role="automation-panel"] [data-role="cd-stepper-block"] .stepper { gap: 14px; padding: 8px 0 2px; }
#channel-modal .mp [data-role="automation-panel"] [data-role="cd-stepper-block"] .muted { padding-right: 0; text-align: center; }
#channel-modal .mp [data-role="automation-panel"] [data-role="qh-block"] { border-top: 1px solid rgba(255,255,255,.07); }
#channel-modal .mp [data-role="automation-panel"] .qh-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal .mp [data-role="automation-panel"] .qh-times input { width: 100%; height: 42px; }

/* Підтримка: кнопки шапки */
#support-modal .support-head > div:last-child { gap: 8px !important; }
#support-modal .sup-head-btn { display: inline-grid; place-items: center; width: 40px !important; height: 40px !important; padding: 0; border-radius: 14px; color: var(--text); cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .14s cubic-bezier(.3,1.5,.5,1), background .2s, border-color .2s, opacity .2s; }
#support-modal .sup-head-btn svg { width: 19px !important; height: 19px !important; }
#support-modal .sup-head-btn:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 24%, transparent); }
#support-modal .sup-new { color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 8px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.3); }
#support-modal .sup-new:disabled { opacity: .35; box-shadow: none; filter: saturate(.5); cursor: default; }
#support-modal .support-head-main { min-width: 0; }
#support-modal .support-head-title { font-size: 19px; letter-spacing: -.02em; }
#support-modal .support-head-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { #support-modal .sup-head-btn { width: 36px !important; height: 36px !important; } }

/* Підтримка: нижня частина (стрічка FAQ, інструменти, поле вводу) */
#support-modal .sup-bar { display: flex; align-items: center; gap: 8px; margin: 8px var(--sp, 14px) 0; }
#support-modal .sup-bar .section-label { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0 !important; padding: 0 14px; border-radius: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
#support-modal .sup-bar .sup-ib { width: 40px; height: 40px; border-radius: 14px; }
#support-modal .sup-bar .sup-ib svg { width: 19px; height: 19px; }
#sup-tools.has-ticket .sup-row { display: none; }
#sup-tools:has(.sup-row[style*="none"]) { margin-top: 0; }
/* поле вводу: однакові круглі кнопки, яскрава «Надіслати» */
#support-modal .chat-composer { align-items: center; gap: 6px; margin: 8px var(--sp, 14px) 0; padding: 6px; border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.1)); }
#support-modal .chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
#support-modal .chat-composer .icon-btn, #support-modal .chat-composer .voice-btn { flex: none; width: 38px !important; height: 38px !important; min-width: 38px; padding: 0; border-radius: 50% !important; color: var(--hint); background: rgba(255,255,255,.07); border: 0; display: inline-grid; place-items: center; }
#support-modal .chat-composer .icon-btn svg, #support-modal .chat-composer .voice-btn svg { width: 18px !important; height: 18px !important; }
#support-modal .chat-composer textarea { flex: 1; min-width: 0; margin: 0; padding: 9px 4px; font-size: 15px; line-height: 1.35; max-height: 120px; background: none; border: 0; outline: 0; box-shadow: none; }
#support-modal .chat-composer-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border: 0; box-shadow: 0 8px 18px -8px var(--accent-glow); transition: transform .14s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
#support-modal .chat-composer-send svg { width: 18px; height: 18px; }
#support-modal .chat-composer-send:active { transform: scale(.9); }
#support-modal .chat-composer-send:disabled { opacity: .5; }
#support-modal #support-status { margin: 4px var(--sp, 14px) 0; }
#support-modal .support-sheet { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
#support-chat-empty:not([style*="none"]) ~ .sup-bar { justify-content: flex-end; }
#support-chat-empty:not([style*="none"]) ~ .sup-bar .section-label { display: none; }

/* ===== Підтримка: фінальна краса (шапка, повідомлення, фон) ===== */
#support-modal .support-head { padding-top: 12px; padding-bottom: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)), rgba(255,255,255,.03); backdrop-filter: none; }
#support-modal .support-avatar { width: 44px; height: 44px; min-width: 44px; border-radius: 15px; box-shadow: 0 8px 20px -8px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.3); }
#support-modal .support-head-main { gap: 12px; }
#support-modal .support-head-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
#support-modal .support-head-sub { margin-top: 3px; gap: 7px; font-size: 12.5px; font-weight: 600; }
#support-modal .support-online { display: block; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); animation: none; }
/* фон чату: м'яке сяйво зверху */
#support-modal .support-sheet { background: radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--bg, #0b0a14); }
#support-modal .modal-sheet.support-sheet > .chat-thread { padding: 12px var(--sp, 14px); gap: 8px; }
/* повідомлення */
#support-modal .chat-bubble { font-size: 15px; line-height: 1.42; padding: 9px 13px 8px; }
#support-modal .chat-bubble.from-user { border-radius: 20px 20px 6px 20px; background: linear-gradient(150deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 22px -12px var(--accent-glow); color: #fff; }
#support-modal .chat-bubble.from-support { border-radius: 20px 20px 20px 6px; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.09); box-shadow: none; }
#support-modal .chat-msg { gap: 8px; align-items: flex-end; }
#support-modal .chat-avatar { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg, #0b0a14); }
#support-modal .chat-day span { padding: 4px 13px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); }
#support-modal .chat-bubble-time, #support-modal .chat-bubble em { font-size: 10.5px; font-weight: 600; opacity: .7; }
/* смуга FAQ та поле вводу */
#support-modal .sup-bar .section-label { font-size: 11px; letter-spacing: .09em; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); }
#support-modal .sup-bar .section-label.open { color: var(--accent-2, var(--accent)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
#support-modal .chat-composer { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.6); }

/* Підтримка: поле вводу піднято від нижнього краю (індикатор жестів і заокруглення екрана) */
#support-modal .modal-sheet.support-sheet { padding-bottom: calc(28px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) !important; }
#support-modal .chat-composer { margin-bottom: 4px; }

/* ===== Налаштування каналу: Тривоги · Медіа · Футер · Команда — новий дизайн ===== */
#channel-modal .modal-tab-panel:not([data-panel="main"]).active { gap: 12px; }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .set-label, #channel-modal .modal-tab-panel:not([data-panel="main"]) .section-label { display: flex; align-items: center; gap: 10px; margin: 6px 4px 0; padding: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .set-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card { position: relative; overflow: hidden; padding: 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(120% 90% at 0% 0%, var(--tone, transparent), transparent 55%); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card > * { position: relative; }
#channel-modal .settings-card[data-tone="red"] { --tone: rgba(244,63,94,.16); }
#channel-modal .settings-card[data-tone="green"] { --tone: rgba(52,211,153,.14); }
#channel-modal .settings-card[data-tone="amber"] { --tone: rgba(251,191,36,.14); }
#channel-modal .settings-card[data-tone="blue"], #channel-modal .settings-card[data-tone="sky"] { --tone: rgba(56,189,248,.15); }
#channel-modal .settings-card[data-tone="violet"] { --tone: color-mix(in srgb, var(--accent) 20%, transparent); }
#channel-modal .settings-card[data-tone="pink"] { --tone: rgba(236,72,153,.15); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card-title { font-size: 15px; }
#channel-modal .modal-tab-panel:not([data-panel="main"]) .settings-card-extra:not(.collapsed) { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
#channel-modal .modal-tab-panel .muted { font-size: 12px; line-height: 1.45; }
#channel-modal .modal-tab-panel .muted[style*="52px"] { margin-left: 0 !important; }
#channel-modal .modal-tab-panel .chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
#channel-modal .modal-tab-panel .chip-compact { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .2s, border-color .2s, color .2s, transform .14s cubic-bezier(.3,1.5,.5,1); }
#channel-modal .modal-tab-panel .chip-compact:active { transform: scale(.95); }
#channel-modal .modal-tab-panel .chip-compact.active, #channel-modal .modal-tab-panel .chip-compact.selected, #channel-modal .modal-tab-panel .chip-compact.on, #channel-modal .modal-tab-panel .chip-compact[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 8px 16px -10px var(--accent-glow); }
#channel-modal .modal-tab-panel .segmented { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
#channel-modal .modal-tab-panel .segmented .segment { flex: 1; min-height: 36px; padding: 0 10px; border: 0; border-radius: 12px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--hint); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
#channel-modal .modal-tab-panel .segmented .segment.active { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -10px var(--accent-glow); }
#channel-modal .modal-tab-panel .wm-motion-grid { flex-wrap: wrap; }
#channel-modal .modal-tab-panel .wm-motion-grid .segment { flex: 1 0 30%; }
#channel-modal input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 10px 0 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); outline: 0; box-shadow: none; }
#channel-modal input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 10px rgba(0,0,0,.4); cursor: pointer; }
#channel-modal input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 40%, transparent); }
#channel-modal .modal-tab-panel .section-label span, #channel-modal .modal-tab-panel .wmt-label b { color: var(--accent-2, var(--accent)); font-weight: 800; }
#channel-modal .chip-select, #channel-modal select { height: 40px; padding: 0 32px 0 14px; border-radius: 13px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); background-color: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
#channel-modal .file-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 14px; border-radius: 18px; text-align: center; font-weight: 800; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
#channel-modal .file-dropzone svg { width: 26px; height: 26px; color: var(--accent-2, var(--accent)); }
#channel-modal .wmp { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px -18px rgba(0,0,0,.7); }
#channel-modal .tgp { border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), rgba(255,255,255,.04); }
#channel-modal .fb-mode { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
#channel-modal .fb-mode .footer-chip { flex: 1; min-height: 38px; justify-content: center; border: 0; background: transparent; color: var(--hint); font-weight: 800; }
#channel-modal .fb-mode .footer-chip.active { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -10px var(--accent-glow); }
#channel-modal .footer-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#channel-modal .footer-chips .footer-chip { height: 34px; padding: 0 13px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
#channel-modal .footer-chips .footer-chip.active { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
#channel-modal .alert-preview { border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); }
#channel-modal .alert-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
#channel-modal .alert-preview-title { font-size: 14px; font-weight: 800; }
#channel-modal .alert-preview-test { height: 34px; padding: 0 13px; border-radius: 11px; font: inherit; font-size: 12.5px; font-weight: 800; color: #fff; cursor: pointer; border: 0; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
#channel-modal .alert-preview-body { padding: 12px 14px; }
#channel-modal .team-role-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; }
#channel-modal .role-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; flex: none; }
#channel-modal [data-role="team-members-list"] { display: flex; flex-direction: column; gap: 8px; }
#channel-modal [data-role="team-members-list"] > * { border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); }
#channel-modal .team-stat-card { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
#channel-modal .team-count { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#channel-modal .pill-row { display: flex; gap: 8px; }
#channel-modal .pill-row .pill { flex: 1; justify-content: center; min-height: 42px; }
#channel-modal .pill.danger { color: #fb7185; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.3); }
#channel-modal .pill.primary { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border: 0; }

/* ШІ-інсайт: перегляди й повний коментар ШІ */
.gv { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.gv-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.gv-chip { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: .02em; text-transform: none; }
.gv-chip.up { color: #34d399; background: rgba(52,211,153,.14); } .gv-chip.down { color: #fb7185; background: rgba(251,113,133,.14); }
.gv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gv-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.gv-stats b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gv-stats small { font-size: 10.5px; font-weight: 700; color: var(--hint); }
.gv-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.gv-bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.gv-bars i { display: block; width: 100%; height: var(--h); min-height: 3px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); opacity: .85; }
.gv-bars span:last-child i { opacity: 1; box-shadow: 0 0 10px var(--accent-glow); }
.gv-axis { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--hint); }
#channel-modal .mp > [data-role="growth-insight-card"] .growth-insight-text, .growth-insight-text { display: block; -webkit-line-clamp: unset; max-height: none; overflow: visible; padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; color: var(--text); opacity: .92; white-space: pre-line; background: rgba(255,255,255,.04); border-left: 3px solid var(--accent); }

/* Календар реклами: сітка більше не вилазить за картку на телефоні */
#ads-calendar-grid.ads-calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); box-sizing: border-box; width: 100%; max-width: 100%; gap: 4px; padding: 12px 10px; overflow: hidden; border-radius: 22px; }
#ads-calendar-grid .ads-calendar-weekday { min-width: 0; padding-bottom: 8px; font-size: 10.5px; letter-spacing: .04em; }
#ads-calendar-grid .ads-calendar-day { min-width: 0; width: 100%; border-radius: 12px; font-size: 13.5px; }
#ads-calendar-grid .ads-calendar-day.is-today { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#ads-calendar-grid .ads-calendar-day.has-ads { background: rgba(255,255,255,.07); }

/* ШІ-інсайт: картка-рядок + окреме вікно */
#channel-modal .mp > .gi-card { padding: 0; }
#channel-modal .mp > .gi-card .settings-card-header { padding: 12px 14px; flex-wrap: nowrap; }
#channel-modal .mp > .gi-card .settings-card-body { display: block; flex: 1; min-width: 0; }
#channel-modal .mp > .gi-card .gi-chev { transform: none !important; }
#channel-modal .mp > .gi-card:active { transform: scale(.985); }
.gi-ov { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); z-index: 200; }
.gi-sheet { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding-bottom: calc(24px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
.gi-sheet::-webkit-scrollbar { display: none; }
.gi-sheet .modal-header { position: sticky; top: 0; z-index: 3; padding: 4px 0 12px; background: linear-gradient(var(--bg, #0b0a14) 72%, transparent); }
.gi-mt { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.gi-mt .gi-chip { margin: 0; }
.gi-mbody { display: flex; flex-direction: column; gap: 12px; }
.gi-mbody .gi-head { font-size: 16px; }
.gi-mbody .gi-reason { font-size: 13.5px; }
.gi-ai { padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-line; background: rgba(255,255,255,.045); border-left: 3px solid var(--accent); }
.gi-ai-label { margin: 2px 2px -6px; }

/* Картка «Опубліковано!»: круглі аватарки каналів */
.pb-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
.pb-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-av.has-img { background: none !important; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }

/* Коментар ШІ: картка з висновком і порадою */
.gi-aic { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 22px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.08)); }
.gi-aic-h { display: flex; align-items: center; gap: 10px; }
.gi-aic-h b { flex: 1; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.gi-aic-h i { font-style: normal; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.gi-aic-orb { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 16px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.gi-aic-orb svg { width: 17px; height: 17px; }
.gi-aic-sec small, .gi-aic-tip small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.gi-aic p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.gi-aic p b { font-weight: 800; color: var(--accent-2, var(--accent)); font-variant-numeric: tabular-nums; }
.gi-aic-tip { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.24); }
.gi-aic-tip small { color: #fbbf24; }
.gi-aic-bulb { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #1a1205; background: linear-gradient(145deg, #fde68a, #f59e0b); }
.gi-aic-bulb svg { width: 17px; height: 17px; }
.gi-aic-tip p b { color: #fbbf24; }
.gi-aic-f { font-size: 11px; font-weight: 600; color: var(--hint); opacity: .8; }

/* Липка шапка вікон: суцільний фон, вміст не просвічує й не виглядає над шапкою */
.gi-sheet, .as-overlay .as-sheet, #source-modal .modal-sheet { padding-top: 0 !important; }
.gi-sheet .modal-header, .as-overlay .as-sheet .modal-header, #source-modal .modal-header { position: sticky; top: 0; z-index: 5; margin: 0 0 6px; padding: 20px 0 12px; background: var(--bg, #0b0a14) !important; }
.gi-sheet .modal-header::after, .as-overlay .as-sheet .modal-header::after, #source-modal .modal-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none; background: linear-gradient(var(--bg, #0b0a14), transparent); }

/* ===== Автоматизація: вікно ===== */
.am-ov { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); z-index: 200; }
.am-sheet { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding-top: 0 !important; padding-bottom: calc(26px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
.am-sheet::-webkit-scrollbar { display: none; }
.am-sheet .modal-header { position: sticky; top: 0; z-index: 5; margin: 0 0 6px; padding: 20px 0 12px; background: var(--bg, #0b0a14) !important; }
.am-sheet .modal-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none; background: linear-gradient(var(--bg, #0b0a14), transparent); }
.am-mt { display: inline-flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.am-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #2dd4bf, #0d9488); box-shadow: 0 8px 18px -8px rgba(13,148,136,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.am-ico svg { width: 20px; height: 20px; }
/* стан */
.am-hero { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, rgba(45,212,191,.14), transparent 60%), rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.am-st { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px; }
.am-st + .am-st { border-left: 1px solid rgba(255,255,255,.07); }
.am-st i { position: absolute; top: 14px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.am-st small { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.am-st b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--hint); }
.am-st[data-s="on"] i { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.7); }
.am-st[data-s="on"] b { color: #34d399; }
/* секції */
.am-body [data-role="automation-panel"] { display: flex !important; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
.am-sec { border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.am-sec-t { padding: 12px 16px 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.am-sec-b { display: flex; flex-direction: column; }
.am-sec-b > * + * { border-top: 1px solid rgba(255,255,255,.07); }
.am-item { padding: 6px 16px 10px; }
.am-body .watermark-toggle { display: flex !important; align-items: center; justify-content: space-between; width: 100%; gap: 14px; margin: 0 !important; padding: 10px 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); cursor: pointer; }
.am-body .am-item .muted, .am-body [data-role="autopost-cd-block"] .muted, .am-body [data-role="qh-block"] .muted { margin: 0 0 4px !important; padding: 0 58px 0 0; font-size: 12px; line-height: 1.45; color: var(--hint); }
.am-body [data-role="autopost-cd-block"] { margin: 0 !important; padding: 8px 16px 14px; }
.am-body [data-role="cd-stepper-block"] { margin-top: 6px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.06); }
.am-body .stepper { display: flex; align-items: center; justify-content: center; gap: 16px; }
.am-body .stepper-btn { width: 46px; height: 46px; border-radius: 15px; font-size: 22px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.am-body .stepper-btn:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.am-body .stepper-value { min-width: 96px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent-2, var(--accent)); }
.am-body [data-role="cd-stepper-block"] .muted { margin: 8px 0 0 !important; padding: 0 !important; text-align: center; }
.am-body [data-role="qh-block"] { margin: 0 !important; padding: 8px 16px 14px !important; border: 0 !important; }
.am-body .qh-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.am-body .qh-times label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.am-body .qh-times input { width: 100%; height: 46px; padding: 0 12px; box-sizing: border-box; border-radius: 14px; font: inherit; font-size: 18px; font-weight: 800; text-align: center; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.am-body [data-role="qh-body"] { margin-top: 8px; }
.am-queue { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 11px 14px !important; border-radius: 16px; font-size: 13px !important; color: var(--hint); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07) !important; }
.am-queue b { font-size: 15px; color: var(--accent-2, var(--accent)); }
@media (prefers-reduced-motion: reduce) { .am-body .stepper-btn { transition: none; } }

/* ===== Підтримка: третя ітерація (поле вводу завжди видно) ===== */
@media (max-width: 899px) {
  #support-modal .modal-sheet.support-sheet { display: flex; flex-direction: column; height: calc(100dvh - 78px); max-height: calc(100dvh - 78px); overflow: hidden; }
  #support-modal .support-sheet > .chat-thread { flex: 1 1 auto; min-height: 0; }
  #support-modal .support-sheet > .chat-composer, #support-modal .support-sheet > #sup-tools, #support-modal .support-sheet > .sup-bar { flex: none; }
}
#support-chat-empty:not([style*="none"]) ~ .sup-bar { display: none !important; }
.sup-row .sup-ib { width: 38px; height: 38px; border-radius: 13px; }
.sup-row .sup-cats { flex: 1; }
.sup-row .sup-cat { font-size: 12px; padding: 0 6px; }
.sh-sub { margin: 8px 4px 0; }
.sh { gap: 10px; }
.sh-hero { padding: 11px 14px; }
.sh-hero span { -webkit-line-clamp: 1; }
.sh-tile b { font-size: 13.5px; }
@media (max-height: 760px) { .sup-tpl { display: none !important; } .sh-hero { display: none; } }

/* ===== Фільтр за ключовими словами: зручне вікно ===== */
.modal-overlay:has(.keywords2-modal-sheet) { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); }
.keywords2-modal-sheet { width: 100%; max-height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding-top: 0 !important; padding-bottom: calc(26px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) !important; }
.keywords2-modal-sheet::-webkit-scrollbar { display: none; }
.k2-top { position: sticky; top: 0; z-index: 6; margin: 0 -2px; padding: 0 2px 10px; background: var(--bg, #0b0a14); }
.k2-top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: linear-gradient(var(--bg, #0b0a14), transparent); }
.k2-top .modal-header { position: static; margin: 0; padding: 20px 0 12px; background: none !important; font-size: 19px; }
.k2-top .modal-header::after { display: none; }
.k2-top .pill-row { margin: 0 !important; gap: 8px; }
.k2-top .pill-row input { height: 44px; border-radius: 14px; }
.k2-top .pill-row .pill { min-width: 44px; height: 44px; border-radius: 14px; justify-content: center; }
.k2-tools { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.k2-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.k2-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.k2-search > svg { flex: none; width: 17px; height: 17px; color: var(--hint); }
.k2-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 14px; color: var(--text); }
.k2-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: var(--hint); background: rgba(255,255,255,.1); cursor: pointer; }
.k2-x svg { width: 12px; height: 12px; }
.k2-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px; }
.k2-cats::-webkit-scrollbar { display: none; }
.k2-cat { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.k2-cat em { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,.09); }
.k2-cat.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.k2-cat.on em { background: rgba(255,255,255,.22); }
.k2-count { padding: 0 4px; font-size: 11.5px; font-weight: 700; color: var(--hint); }
.k2-none { flex: 1 0 100%; padding: 22px 12px; text-align: center; font-size: 13px; color: var(--hint); border: 1px dashed rgba(255,255,255,.14); border-radius: 16px; }
/* слова: компактні чипи у потік, а не дві високі колонки */
.keywords2-modal-sheet [data-role="keywords2-list"] { display: flex; flex-wrap: wrap; gap: 6px; }
.keywords2-modal-sheet .cascade-tag-chip { display: inline-flex; align-items: center; gap: 6px; width: auto; max-width: 100%; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: none; }
.keywords2-modal-sheet .cascade-tag-chip .channel-chip-check { width: 20px; height: 20px; }
.keywords2-modal-sheet [data-role="keywords2-list-toggle"] { display: none !important; }
.keywords2-modal-sheet [data-role="keywords2-list-section"] { display: block !important; margin-top: 4px; }

/* ===== Підтримка: спрощена версія ===== */
/* рамка: вікно займає екран нижче кнопок Telegram, поле вводу завжди внизу */
#support-modal { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 40px) !important; }
#support-modal .modal-sheet.support-sheet { position: relative; display: flex !important; flex-direction: column; height: 100% !important; max-height: 100% !important; overflow: hidden !important; }
#support-modal .support-sheet > .chat-thread, #support-modal .support-sheet > #support-chat-empty { flex: 1 1 auto; min-height: 0; }
#support-modal .support-sheet > .chat-composer, #support-modal .support-sheet > .sup-bar, #support-modal .support-sheet > #support-status { flex: none; }
/* прибрано зайве: шаблони, окремі рядки категорій та іконок, швидкі кнопки */
#sup-tools, .sup-tpl, .sup-row, .sh-quick, #support-modal .sup-bar .sup-ib { display: none !important; }
#support-new-btn:disabled { display: none; }
#support-modal .sup-bar { margin-top: 4px; }
/* головний екран: чисто */
.sh { gap: 12px; padding: 12px var(--sp, 14px) 8px; }
.sh-hero { padding: 14px 16px; }
.sh-hero b { font-size: 20px; }
.sh-hero span { font-size: 13.5px; }
/* кнопка «+» біля поля вводу */
.sup-optb { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; color: var(--accent-2, var(--accent)); cursor: pointer; background: color-mix(in srgb, var(--accent) 16%, transparent); transition: transform .2s cubic-bezier(.3,1.4,.5,1), background .2s; position: relative; }
.sup-optb svg { width: 18px; height: 18px; }
.sup-optb.on { transform: rotate(45deg); background: color-mix(in srgb, var(--accent) 30%, transparent); }
.sup-optb.has::after { content: ""; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px var(--bg, #0b0a14); }
/* меню параметрів */
.sup-pop { position: absolute; left: var(--sp, 14px); right: var(--sp, 14px); bottom: calc(100px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); z-index: 20; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: color-mix(in srgb, var(--bg, #0b0a14) 94%, var(--accent) 6%); border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.1)); box-shadow: 0 -20px 50px -20px rgba(0,0,0,.8); animation: supPopIn .22s cubic-bezier(.2,.9,.3,1) both; }
@keyframes supPopIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.sp-t { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.sp-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.sp-seg button { flex: 1; height: 36px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; color: var(--hint); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.sp-seg button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.sp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); }
.sp-row:active { background: rgba(255,255,255,.09); }
.sp-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sp-ico svg { width: 18px; height: 18px; }
.sp-row b { font-size: 14px; font-weight: 800; }
.sp-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-tx small { font-size: 11.5px; color: var(--hint); line-height: 1.3; }
.sp-sw { flex: none; position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.16); transition: background .2s; }
.sp-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.sp-sw.on { background: var(--accent); } .sp-sw.on i { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .sup-pop { animation: none; } .sup-optb, .sp-sw i { transition: none; } }

#support-attach-btn { display: none !important; }

/* ===== Єдиний заголовок вікон: іконка · назва · закриття ===== */
.modal-header.mh { display: flex !important; align-items: center; gap: 12px; padding: 20px 0 12px; }
.modal-header.mh .mh-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--mh-c1, var(--accent-2, var(--accent))), var(--mh-c2, var(--accent-deep, var(--accent)))); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--mh-c2, var(--accent)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.modal-header.mh .mh-ico svg { width: 20px; height: 20px; }
.modal-header.mh .mh-t { flex: 1; min-width: 0; margin: 0; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--text) !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-header.mh .modal-close { flex: none; width: 40px; height: 40px; border-radius: 14px; margin: 0; }
.gi-verdict { display: flex; }
.gi-verdict .gi-chip { margin: 0; }

/* Діалог підтвердження: деталі, незворотність і кнопка з заповненням за час очікування */
.ios-alert .dlg-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px 16px; }
.dlg-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.dlg-count b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fb7185; font-variant-numeric: tabular-nums; }
.dlg-count span { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.75); }
.dlg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dlg-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 5px 0 11px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.dlg-chip b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,.14); }
.dlg-chip.c-pending b { background: rgba(251,191,36,.3); } .dlg-chip.c-queued b { background: rgba(52,211,153,.3); } .dlg-chip.c-scheduled b { background: rgba(56,189,248,.3); }
.dlg-note { max-width: 300px; font-size: 11.5px; line-height: 1.4; text-align: center; color: rgba(255,255,255,.55); }
.confirm-dialog-actions .pill[data-hold] { position: relative; overflow: hidden; isolation: isolate; }
.confirm-dialog-actions .pill[data-hold]::before { content: ""; position: absolute; inset: 0; z-index: -1; width: 0; background: linear-gradient(90deg, rgba(244,63,94,.85), rgba(190,18,60,.95)); }
.confirm-dialog-actions .pill[data-hold].is-holding { opacity: 1 !important; color: rgba(255,255,255,.9); background: rgba(244,63,94,.16) !important; border-color: rgba(244,63,94,.35) !important; }
.confirm-dialog-actions .pill[data-hold].is-holding::before { animation: dlgHold var(--hold, 4s) linear forwards; }
.confirm-dialog-actions .pill[data-hold].is-ready { color: #fff; background: linear-gradient(90deg, #f43f5e, #be123c) !important; border-color: transparent !important; box-shadow: 0 10px 22px -10px rgba(244,63,94,.8); animation: dlgReady .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes dlgHold { to { width: 100%; } }
@keyframes dlgReady { 0% { transform: scale(.94); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .confirm-dialog-actions .pill[data-hold].is-holding::before { animation-duration: .01s; } .confirm-dialog-actions .pill[data-hold].is-ready { animation: none; } }

/* Кнопка підтвердження з очікуванням: іконка, назва, лічильник-кружок, спалах готовності */
.confirm-dialog-actions .pill[data-hold] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 16px; border-radius: 17px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.confirm-dialog-actions .pill[data-hold] .hb-i { display: grid; place-items: center; }
.confirm-dialog-actions .pill[data-hold] .hb-i svg { width: 19px; height: 19px; }
.confirm-dialog-actions .pill[data-hold] .hb-n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.16); }
.confirm-dialog-actions .pill[data-hold].is-holding { color: rgba(255,255,255,.82); }
.confirm-dialog-actions .pill[data-hold].is-holding .hb-i { opacity: .7; }
.confirm-dialog-actions .pill[data-hold].is-ready::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: dlgSweep .9s ease-out .1s 1 both; pointer-events: none; }
.confirm-dialog-actions .pill[data-hold].is-ready .hb-i svg { animation: dlgShake .5s ease .1s 1; }
@keyframes dlgSweep { to { left: 120%; } }
@keyframes dlgShake { 20% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 80% { transform: rotate(-5deg); } 100% { transform: none; } }
.confirm-dialog-actions:has(.pill[data-hold]) .pill[data-action="cancel"] { height: 52px; border-radius: 17px; font-size: 15px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog-actions .pill[data-hold].is-ready::after, .confirm-dialog-actions .pill[data-hold].is-ready .hb-i svg { animation: none; } }

/* Діалог підтвердження: блок деталей на всю ширину (він ламав сітку іконка+текст) */
.ios-alert .dlg-extra { grid-column: 1 / -1; width: 100%; box-sizing: border-box; margin-top: 16px; padding: 14px 14px 12px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(244,63,94,.16), transparent 60%), rgba(255,255,255,.04); border: 1px solid rgba(244,63,94,.22); }
.ios-alert .dlg-extra .dlg-count b { font-size: 38px; }
.ios-alert .dlg-extra .dlg-note { max-width: none; }
.ios-alert .confirm-dialog-actions { margin-top: 16px; }
.ios-alert .confirm-dialog-actions .pill[data-hold] { flex: 1 1 62%; }

/* ===== Рекомендовані джерела: теми, пошук, плитки ===== */
.rec-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.rec-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 14px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); }
.rec-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rec-search svg { flex: none; width: 17px; height: 17px; color: var(--hint); }
.rec-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 14px; color: var(--text); }
.rec-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.rec-tabs::-webkit-scrollbar { display: none; }
.rec-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 7px 0 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .2s, color .2s, border-color .2s, transform .14s cubic-bezier(.3,1.5,.5,1); }
.rec-tab:active { transform: scale(.95); }
.rec-tab em { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-style: normal; font-size: 11px; background: rgba(255,255,255,.09); }
.rec-tab.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent-glow); }
.rec-tab.on em { background: rgba(255,255,255,.24); }
.rec-topic { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rec-topic.t-war { color: #fb7185; background: rgba(251,113,133,.13); } .rec-topic.t-economy { color: #34d399; background: rgba(52,211,153,.13); }
.rec-topic.t-tech { color: #38bdf8; background: rgba(56,189,248,.13); } .rec-topic.t-sport { color: #fbbf24; background: rgba(251,191,36,.13); }
.rec-topic.t-culture { color: #f472b6; background: rgba(244,114,182,.13); } .rec-topic.t-health { color: #2dd4bf; background: rgba(45,212,191,.13); }
#recommended-sources-list .source-tile-action .pill:not(.on):not(.off) { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border: 0; box-shadow: 0 8px 16px -10px var(--accent-glow); }
@media (prefers-reduced-motion: reduce) { .rec-tab { transition: none; } }

/* ===== Джерела: вкладки замість довгої сторінки ===== */
.src-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }
.src-tabs button { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 8px; border: 0; border-radius: 14px; font: inherit; font-size: 13px; font-weight: 800; color: var(--hint); background: transparent; cursor: pointer; transition: background .2s, color .2s, transform .14s cubic-bezier(.3,1.5,.5,1); }
.src-tabs button:active { transform: scale(.96); }
.src-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-tabs button em { flex: none; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-style: normal; font-size: 11px; background: rgba(255,255,255,.09); }
.src-tabs button em:empty { display: none; }
.src-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 18px -10px var(--accent-glow); }
.src-tabs button.on em { background: rgba(255,255,255,.24); }
.src-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.src-pane[hidden] { display: none !important; }
.src-embed { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible; }
.src-embed .settings-card-header { display: none !important; }
.src-embed .settings-card-extra { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { .src-tabs button { transition: none; } }

/* ===== Джерела: зручно на телефоні ===== */
.sm-add { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: 20px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); transition: transform .14s cubic-bezier(.3,1.5,.5,1); }
.sm-add:active { transform: scale(.985); }
.sm-add-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 22px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.sm-add-ico svg { width: 22px; height: 22px; }
.sm-add-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-add-t b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.sm-add-t small { font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-add-go { flex: none; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 9px; color: var(--hint); background: rgba(255,255,255,.08); }
.sm-ov { box-sizing: border-box; padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px); z-index: 200; }
.sm-sheet { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; scrollbar-width: none; padding-top: 0 !important; padding-bottom: calc(26px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))); }
.sm-sheet::-webkit-scrollbar { display: none; }
.sm-sheet .modal-header { position: sticky; top: 0; z-index: 5; background: var(--bg, #0b0a14) !important; margin: 0 0 6px; }
.sm-body #add-tg-block { margin: 0 !important; }
.sm-body #add-tg-block > .section-label { display: block !important; margin: 0 0 10px; font-size: 12.5px; line-height: 1.4; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--hint); }
.sm-body .src-add-row input { font-size: 16px; }
.sm-bar { display: flex; align-items: center; gap: 8px; }
.sm-chips { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px; }
.sm-chips::-webkit-scrollbar { display: none; }
.sm-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 7px 0 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .2s, color .2s; }
.sm-chip em { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; font-style: normal; font-size: 11px; background: rgba(255,255,255,.09); }
.sm-chip.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.sm-chip.on em { background: rgba(255,255,255,.24); }
.sm-view { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.sm-view button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 10px; color: var(--hint); background: transparent; cursor: pointer; }
.sm-view button svg { width: 17px; height: 17px; }
.sm-view button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.source-tile[hidden] { display: none !important; }
#content-panel-sources .src-pane[data-p="own"] #sources-list-label { display: none; }
/* крупніші цілі для пальця */
@media (max-width: 899px) {
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"] { width: 44px; min-width: 44px; height: 26px; min-height: 26px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"]::after { top: 3px; left: 3px; width: 20px; height: 20px; }
  #content-panel-sources .source-tile-action .pill[data-action="quick-toggle"].on::after { transform: translateX(18px); }
  #content-panel-sources .source-tile-action:has([data-action="quick-toggle"]) { top: 10px; right: 10px; }
  /* вигляд «список»: один рядок на джерело, великий перемикач справа */
  .src-pane.view-list .sources-tile-grid#sources-list { grid-template-columns: 1fr !important; gap: 8px; }
  .src-pane.view-list #sources-list .source-tile { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; min-height: 68px; }
  .src-pane.view-list #sources-list .source-tile-head { flex: 1; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
  .src-pane.view-list #sources-list .source-tile-head .channel-avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .src-pane.view-list #sources-list .source-tile-body { padding-right: 62px; }
  .src-pane.view-list #sources-list .src-state { display: inline-flex; }
  .src-pane.view-list #sources-list .src-state.on { display: inline-flex; }
  .src-pane.view-list #sources-list .source-tile-action:has([data-action="quick-toggle"]) { top: 50%; right: 14px; transform: translateY(-50%); }
  .src-pane.view-list #sources-list .source-tile-action .pill[data-action="quick-toggle"] { width: 52px; min-width: 52px; height: 30px; min-height: 30px; }
  .src-pane.view-list #sources-list .source-tile-action .pill[data-action="quick-toggle"]::after { top: 3px; left: 3px; width: 24px; height: 24px; }
  .src-pane.view-list #sources-list .source-tile-action .pill[data-action="quick-toggle"].on::after { transform: translateX(22px); }
}
@media (prefers-reduced-motion: reduce) { .sm-add { transition: none; } }

/* Спец-адмін: керування рекомендованими */
.rec-admin { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--accent-2, var(--accent)); cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rec-admin svg { width: 18px; height: 18px; }
.rec-admin span { flex: 1; text-align: left; }
.rec-admin i { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.source-tile.has-del { position: relative; }
.rec-del { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; color: #fb7185; cursor: pointer; background: rgba(251,113,133,.14); border: 1px solid rgba(251,113,133,.3); }
.rec-del svg { width: 13px; height: 13px; }
.rec-del:active { transform: scale(.9); background: rgba(251,113,133,.28); }
.ra-body { display: flex; flex-direction: column; gap: 14px; }
.ra-f { display: flex; flex-direction: column; gap: 6px; }
.ra-f small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.ra-f input { height: 46px; padding: 0 14px; box-sizing: border-box; border-radius: 14px; font: inherit; font-size: 16px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ra-f input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.ra-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-topics button { height: 34px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.ra-topics button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.ra-save { height: 50px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 22px -10px var(--accent-glow); }
.ra-save:disabled { opacity: .4; box-shadow: none; }

/* ===== Рекомендовані: каталог (як у каталогах каналів): перевірені, усі теми, списки рядків ===== */
.rec-tabs { display: none !important; }
.rc { display: flex; flex-direction: column; gap: 18px; }
.rc-sec { display: flex; flex-direction: column; gap: 10px; }
.rc-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; }
.rc-sh h4 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.rc-sh span { font-size: 13px; font-weight: 700; color: var(--hint); }
.rc-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.022)); border: 1px solid rgba(255,255,255,.08); }
.rc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 68px; }
.rc-row + .rc-row { border-top: 1px solid rgba(255,255,255,.07); }
.rc-av { flex: none; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.07); box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.rc-av img { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
.rc-av > * { max-width: 100%; max-height: 100%; }
.rc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rc-tx b { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.rc-tx b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tx b svg { flex: none; }
.rc-tx small { font-size: 13px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-act { flex: none; display: flex; align-items: center; gap: 8px; }
.rc-add { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 13px; font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 18px -10px var(--accent-glow); transition: transform .14s cubic-bezier(.3,1.5,.5,1); }
.rc-add svg { width: 15px; height: 15px; }
.rc-add:active { transform: scale(.94); }
.rc-add:disabled { opacity: .55; }
.rc-done { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.12); }
.rc-done svg { width: 14px; height: 14px; }
.rc-del { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: #fb7185; cursor: pointer; background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.28); }
.rc-del svg { width: 13px; height: 13px; }
.rc-topics { padding: 6px 0; }
.rc-topic { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border: 0; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.rc-topic + .rc-topic { border-top: 1px solid rgba(255,255,255,.06); }
.rc-topic:active { background: rgba(255,255,255,.06); }
.rc-ti { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.rc-ti svg { width: 20px; height: 20px; }
.rc-tn { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.rc-topic em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.rc-tc { flex: none; width: 18px; height: 18px; color: var(--hint); opacity: .7; }
.rc-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--accent-2, var(--accent)); cursor: pointer; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rc-back svg { width: 17px; height: 17px; }
.rc-empty { padding: 28px 16px; text-align: center; border-radius: 20px; font-size: 14px; color: var(--hint); border: 1px dashed rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce) { .rc-add { transition: none; } }

/* ===== Каталог: компактні дії, мої джерела, без зайвих плашок ===== */
@media (max-width: 899px) { #content-panel-sources .src-hero { display: none !important; } }
.src-tabs button { font-size: 13px; gap: 6px; padding: 0 6px; }
.rc-row { gap: 12px; padding: 12px; }
.rc-av { width: 50px; height: 50px; border-radius: 15px; }
.rc-tx b { font-size: 15px; }
.rc-add { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.rc-add span { display: none; }
.rc-add svg { width: 18px; height: 18px; }
.rc-done { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #34d399; background: rgba(52,211,153,.14); box-shadow: inset 0 0 0 1px rgba(52,211,153,.3); }
.rc-done span { display: none; }
.rc-done svg { width: 18px; height: 18px; }
.rc-done:active { transform: scale(.92); }
.rc-del { width: 28px; height: 28px; }
.rc-sh h4 { font-size: 17px; }
.rc-all { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; color: var(--accent-2, var(--accent)); cursor: pointer; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rc-all svg { width: 15px; height: 15px; }
.rc-mine { cursor: pointer; }
.rc-mine:active { background: rgba(255,255,255,.05); }
.rc-st { display: inline-flex; align-items: center; gap: 6px; }
.rc-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #6b7280; }
.rc-st.on { color: #34d399; } .rc-st.on i { background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.7); }
.rc-st.err { color: #fb7185; } .rc-st.err i { background: #fb7185; }
.rc-sw { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.16); transition: background .22s; }
.rc-sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.35); transition: transform .24s cubic-bezier(.3,1.4,.5,1); }
.rc-sw.on { background: var(--accent); } .rc-sw.on i { transform: translateX(22px); }
.rec-admin span { font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .rc-sw, .rc-sw i { transition: none; } }
@media (max-width: 899px) { .rec-admin i { display: none; } .rec-admin span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* «Налаштування» в «Ще»: плавне розкриття й закриття, елементи з'являються каскадом */
body:not(.desktop-platform) #appearance-settings-card > .set-group:not(.is-collapsed) > :not(.set-head) { animation: setIn .42s cubic-bezier(.2,.85,.3,1) both; animation-delay: calc(var(--k, 0) * 55ms); transform-origin: top center; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(2) { --k: 0; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(3) { --k: 1; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(4) { --k: 2; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(5) { --k: 3; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(6) { --k: 4; }
body:not(.desktop-platform) #appearance-settings-card > .set-group > :nth-child(n+7) { --k: 5; }
@keyframes setIn { from { opacity: 0; transform: translateY(-14px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
body:not(.desktop-platform) #appearance-settings-card > .set-group.is-closing:not(.is-collapsed) > :not(.set-head) { animation: setOut .22s cubic-bezier(.4,0,1,1) both; animation-delay: 0ms; }
@keyframes setOut { to { opacity: 0; transform: translateY(-10px) scale(.98); } }
#appearance-settings-card > .set-group .set-collapse-chev { transition: transform .36s cubic-bezier(.3,1.4,.5,1); }
body:not(.desktop-platform) #appearance-settings-card > .set-group:not(.is-collapsed) > .set-head { animation: setHead .4s ease both; }
@keyframes setHead { 0% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { body:not(.desktop-platform) #appearance-settings-card > .set-group > *, #appearance-settings-card .set-collapse-chev { animation: none !important; transition: none !important; } }

/* ===== Шапка: аватар із кільцем, привітання, скляна підкладка ===== */
.topbar { gap: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 90%); }
.topbar .avatar { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 4px color-mix(in srgb, var(--accent-2, var(--accent)) 75%, transparent), 0 14px 30px -10px var(--accent-glow); animation: tbPop .55s cubic-bezier(.3,1.5,.5,1) both; }
.topbar .avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-title { font-size: 20px; line-height: 1.15; background: linear-gradient(90deg, #fff 30%, color-mix(in srgb, var(--accent-2, var(--accent)) 70%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: tbIn .5s .08s cubic-bezier(.2,.8,.3,1) both; }
.topbar-subtitle { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13.5px; animation: tbIn .5s .16s cubic-bezier(.2,.8,.3,1) both; }
.topbar-subtitle .tb-hi { color: var(--hint); font-weight: 600; }
.topbar-subtitle .tb-name { color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.topbar-subtitle .tb-wave { flex: none; width: 16px; height: 16px; color: #fbbf24; transform-origin: 70% 80%; animation: tbWave 2.4s ease-in-out .9s 2; }
@keyframes tbPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tbIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes tbWave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .topbar .avatar, .topbar-title, .topbar-subtitle, .tb-wave { animation: none; } }

/* ===== Єдиний стиль аватарок: «сквіркл» зі світлим кільцем, фото на всю площу ===== */
:root { --av-r: 28%; }
.channel-avatar, .channel-chip-avatar, .modal-hero-avatar, #channel-modal .modal-hero-avatar, #source-modal .modal-hero-avatar,
.topbar .avatar, .pc-avatar, .sidebar-footer-avatar, #profile-header-avatar, .team-stat-avatar, .pb-av, .rc-av, .chat-avatar, #support-modal .chat-avatar,
#ads-settings-list .settings-card-icon[data-role="avatar"], #content-panel-sources .source-tile-head .channel-avatar, .avatar-stack-item,
.src-avatar-wrap .channel-avatar, .vt-ava, .mk-ava { border-radius: var(--av-r) !important; overflow: hidden; }
.channel-avatar img, .channel-chip-avatar img, .modal-hero-avatar img, .topbar .avatar img, .pc-avatar img, .sidebar-footer-avatar img, #profile-header-avatar img,
.team-stat-avatar img, .pb-av img, .rc-av img, .chat-avatar img, .avatar-stack-item img, [data-role="avatar"] img { border-radius: 0 !important; width: 100%; height: 100%; object-fit: cover; display: block; }
.channel-avatar > div, .channel-chip-avatar > div, .pb-av > div, .rc-av > div { border-radius: 0 !important; }
.channel-avatar, .channel-chip-avatar, .modal-hero-avatar, .pc-avatar, .rc-av, .avatar-stack-item { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 6px 14px -8px rgba(0,0,0,.6); }
.topbar .avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px color-mix(in srgb, var(--accent-2, var(--accent)) 70%, transparent), 0 14px 30px -10px var(--accent-glow); }
#channel-modal .modal-hero-avatar, #source-modal .modal-hero-avatar { box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 3.5px var(--accent), 0 10px 24px -8px var(--accent-glow); }
.avatar-stack-item { border-radius: 32% !important; }

/* ===== Заголовки вікон як у редакторі: великий градієнтний заголовок, квадратні скляні кнопки ===== */
.modal-header.mh .mh-ico { display: none !important; }
.modal-header.mh { gap: 10px; padding: 18px 0 14px; }
.modal-header.mh .mh-t, .modal-sheet > .modal-header:not(.support-head) > span:first-child:not(.mh-ico):not(.gi-mt):not(.am-mt) {
  font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.15; text-transform: none !important;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent-2, var(--accent)) 55%, #fff)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent;
}
.modal-sheet > .modal-header:not(.support-head) .modal-close, .modal-header.mh .modal-close {
  flex: none; width: 44px !important; height: 44px !important; border-radius: 15px !important; display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); color: var(--text);
  transition: transform .12s ease, background .2s ease;
}
.modal-sheet > .modal-header:not(.support-head) .modal-close svg, .modal-header.mh .modal-close svg { width: 22px; height: 22px; stroke-width: 2; }
.modal-sheet > .modal-header:not(.support-head) .modal-close:active, .modal-header.mh .modal-close:active { transform: scale(.92); background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }

/* Єдина форма аватарок: коло (як на плитках джерел) */
:root { --av-r: 50%; }
.avatar-stack-item { border-radius: 50% !important; }
.rc-av { border-radius: 50% !important; }
.channel-avatar, .channel-chip-avatar, .modal-hero-avatar, .pc-avatar, .rc-av, .avatar-stack-item { box-shadow: 0 0 0 1px rgba(255,255,255,.1); }

/* Теми каталогу: розділ розкривається прямо під рядком (акордеон), відкритий закривається при відкритті наступного */
.rc-topics { padding: 0; }
.rc-tg + .rc-tg { border-top: 1px solid rgba(255,255,255,.06); }
.rc-topics .rc-topic + .rc-topic { border-top: 0; }
.rc-tg > .rc-topic { padding: 12px 14px; }
.rc-tb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s cubic-bezier(.4,0,.2,1); }
.rc-tg.open > .rc-tb { grid-template-rows: 1fr; }
.rc-tbi { min-height: 0; overflow: hidden; margin: 0 10px; border-radius: 16px; background: rgba(0,0,0,.18); opacity: 0; transition: opacity .28s ease .06s; }
.rc-tg.open > .rc-tb > .rc-tbi { opacity: 1; margin-bottom: 10px; }
.rc-tbi .rc-row { padding: 10px 10px; min-height: 62px; }
.rc-tbi .rc-av { width: 44px; height: 44px; }
.rc-tg.open > .rc-topic { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rc-tg.open > .rc-topic .rc-tc { transform: rotate(90deg); opacity: 1; color: var(--accent-2, var(--accent)); }
.rc-tc { transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
@media (prefers-reduced-motion: reduce) { .rc-tb, .rc-tbi, .rc-tc { transition: none; } }
/* поява по черзі робиться скриптом по окремих пунктах, а не блоками */
body:not(.desktop-platform) #appearance-settings-card > .set-group:not(.is-collapsed) > :not(.set-head) { animation: none; }

/* ===== Джерела: єдиний «редакторський» вигляд: скляні елементи 46–52 px, радіус 15–17, градієнт для активного ===== */
#content-panel-sources { --ctl-r: 16px; --ctl-bg: rgba(255,255,255,.06); --ctl-bd: rgba(255,255,255,.09); gap: 12px; }
/* підвкладки: як верхній перемикач (Публікації / Джерела / Читачі) */
.src-tabs { gap: 4px; padding: 5px; border-radius: 20px; background: var(--ctl-bg); border: 1px solid var(--ctl-bd); }
.src-tabs button { height: 46px; border-radius: 15px; padding: 0 8px; gap: 6px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.src-tabs button span { overflow: visible; text-overflow: clip; }
.src-tabs button em { min-width: 0; height: auto; padding: 0; background: none !important; border-radius: 0; font-size: 12px; font-weight: 800; opacity: .6; }
.src-tabs button.on { box-shadow: 0 10px 22px -12px var(--accent-glow); }
.src-tabs button.on em { opacity: .85; color: #fff; }
/* «Додати джерело» */
.sm-add { padding: 10px 12px; border-radius: 18px; gap: 12px; }
.sm-add-ico { width: 42px; height: 42px; border-radius: 14px; }
.sm-add-ico svg { width: 20px; height: 20px; }
.sm-add-t b { font-size: 15px; }
.sm-add-t small { font-size: 12px; }
.sm-add-go { width: 30px; height: 30px; border-radius: 11px; background: rgba(255,255,255,.08); }
/* стоп-слова для всіх */
.sw2 { border-radius: 18px; background: var(--ctl-bg); border: 1px solid var(--ctl-bd); }
.sw2-head { padding: 8px 12px; min-height: 52px; }
.sw2-ico { width: 34px; height: 34px; border-radius: 12px; }
.sw2-t b { font-size: 14.5px; font-weight: 800; }
/* фільтри за станом — рівні сегменти в один ряд без прокрутки */
.sm-bar { gap: 8px; }
.sm-chips { flex: 1; min-width: 0; display: flex; gap: 4px; padding: 4px; overflow: visible; border-radius: 16px; background: var(--ctl-bg); border: 1px solid var(--ctl-bd); }
.sm-chip { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; height: 38px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sm-chip em { min-width: 0; height: auto; padding: 0; background: none !important; border-radius: 0; font-size: 12px; opacity: .6; }
.sm-chip.on { box-shadow: 0 8px 18px -10px var(--accent-glow); }
.sm-chip.on em { opacity: .85; color: #fff; }
.sm-view { padding: 4px; border-radius: 16px; background: var(--ctl-bg); border: 1px solid var(--ctl-bd); }
.sm-view button { width: 38px; height: 38px; border-radius: 12px; }
.sm-view button svg { width: 18px; height: 18px; }
/* пошук */
#sources-search, #community-sources-search, .rec-search { height: 46px; box-sizing: border-box; padding: 0 14px; border-radius: var(--ctl-r); background: var(--ctl-bg); border: 1px solid var(--ctl-bd); font-size: 15px; }
.rec-search { display: flex; }
#sources-search:focus, #community-sources-search:focus, .rec-search:focus-within { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* картки списків: однакова обводка й радіус */
.rc-card, .rc-topics { border-radius: 20px; border: 1px solid var(--ctl-bd); }
#content-panel-sources .source-tile { border: 1px solid var(--ctl-bd); }

.rc-row.rc-link { cursor: pointer; }
.rc-row.rc-link:active { background: rgba(255,255,255,.05); }
.sm-open-tg { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--text); cursor: pointer; background: color-mix(in srgb, #38bdf8 12%, transparent); box-shadow: inset 0 0 0 1px rgba(56,189,248,.3); }
.sm-open-tg svg { width: 18px; height: 18px; color: #38bdf8; }
.sm-open-tg span { flex: 1; text-align: left; }
.sm-open-tg i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.sm-open-tg:active { transform: scale(.985); }

/* ===== Додати джерело: вкладки; єдиний стиль «джерел» для перемикачів, пошуку й плашок у всьому застосунку ===== */
.as-tabs { margin-bottom: 12px; }
.as-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.as-pane[hidden] { display: none !important; }
.as-cl { max-height: 46vh; overflow-y: auto; scrollbar-width: none; }
.as-cl::-webkit-scrollbar { display: none; }
.segmented { padding: 5px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); gap: 4px; }
.segmented .segment { min-height: 42px; border-radius: 14px; font-weight: 800; letter-spacing: -.01em; }
.segmented .segment.active { background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); color: #fff; box-shadow: 0 10px 22px -12px var(--accent-glow); }
.modal-sheet input[type="text"], .modal-sheet input[type="search"], .modal-sheet textarea, .modal-sheet select { border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); }
.modal-sheet input[type="text"], .modal-sheet input[type="search"] { min-height: 46px; }
.modal-sheet input:focus, .modal-sheet textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); outline: 0; }
.settings-card, .set-group { border-radius: 20px; border: 1px solid rgba(255,255,255,.09); }
.pill { border-radius: 14px; font-weight: 800; }
.chip-action-btn, .chip-compact { border-radius: 999px; font-weight: 700; }

/* «Налаштування»: без стрибків — жодних зсувів, розмиття й анімацій блоків, лише плавна поява пунктів */
body:not(.desktop-platform) #appearance-settings-card > .set-group > *,
body:not(.desktop-platform) #appearance-settings-card > .set-group.is-closing > :not(.set-head),
body:not(.desktop-platform) #appearance-settings-card > .set-group:not(.is-collapsed) > .set-head { animation: none !important; filter: none !important; }
#appearance-settings-card, #tab-profile { overflow-anchor: none; }
#appearance-settings-card > .set-group { contain: layout; }

/* Категорії каналу */
.cc-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--hint); }
.cc-sub::first-line { font-weight: 800; color: var(--text); }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-tile { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px 10px 10px; border-radius: 16px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: background .2s, border-color .2s, transform .14s cubic-bezier(.3,1.5,.5,1); }
.cc-tile:active { transform: scale(.96); }
.cc-i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.cc-i svg { width: 18px; height: 18px; }
.cc-tile b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.cc-tile i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: transparent; background: rgba(255,255,255,.08); transition: background .2s, color .2s; }
.cc-tile i svg { width: 13px; height: 13px; }
.cc-tile.on { background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.cc-tile.on i { color: #fff; background: var(--c); }
.cc-note { margin: 12px 2px 14px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; color: var(--hint); background: rgba(255,255,255,.04); }
.cc-note.on { color: #34d399; background: rgba(52,211,153,.1); }
.cc-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px; padding: 11px 14px; border-radius: 18px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.cc-btn .cc-bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc-btn small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.cc-btn b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-btn svg { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 8px; color: var(--hint); background: rgba(255,255,255,.07); }

/* Теми по всьому застосунку */
body.no-alert-topics #home-dash-alerts, body.no-alert-topics #profile-map-row, body.no-alert-topics #sidebar-map-btn, body.no-alert-topics #sidebar-glance-alerts, body.no-alert-topics .sidebar-glance-alerts-row { display: none !important; }
body.no-alert-topics #home-dashboard { grid-template-columns: 1fr; }
.ch-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ch-cats i { font-style: normal; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ch-cats i.more { color: var(--hint); background: rgba(255,255,255,.07); }

/* ===== Підтримка: виправлення — порожній проміжок зверху, поле вводу за нижнім краєм, подвійна рамка пошуку ===== */
#support-modal.modal-overlay { padding: 0 !important; align-items: stretch !important; }
#support-modal .modal-sheet.support-sheet { box-sizing: border-box !important; width: 100%; max-width: none !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; padding: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 52px) 0 calc(10px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px))) !important; }
#support-modal .support-head { margin: 0 !important; padding: 8px 16px 12px !important; background: none !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; border-radius: 0 !important; }
.sh-search input, .rec-search input, .k2-search input, .sh-search input[type="search"], .rec-search input[type="search"], .k2-search input[type="search"] { border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; outline: 0 !important; }
.sh-search input::-webkit-search-cancel-button, .rec-search input::-webkit-search-cancel-button, .k2-search input::-webkit-search-cancel-button { display: none; }

/* Вихід із панелі на сайті */
.web-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 14px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: #fb7185; cursor: pointer; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.28); }
.web-logout svg { width: 18px; height: 18px; }
.sidebar-footer .web-logout { height: 38px; margin: 8px 12px 12px; width: auto; font-size: 13px; }

/* Підтримка: зайвий відступ над шапкою та обрізана крапка статусу */
#support-modal .modal-sheet.support-sheet { padding-top: calc(max(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px), 46px) + 6px) !important; }
#support-modal .support-head-main { overflow: visible; }
#support-modal .support-head-sub { overflow: visible; padding-left: 4px; }
#support-modal .support-online { box-shadow: 0 0 0 3px rgba(52,211,153,.2) !important; margin: 0 2px 0 0; background: #34d399; }
#support-modal .support-head-sub span { overflow: hidden; text-overflow: ellipsis; }

/* ===== Бежева тема (темна, як фіолетова й рубінова): глибокий теплий фон і пісочний акцент ===== */
.sw-beige { --sw-bg: linear-gradient(135deg, #0f0c09 0%, #231c14 55%, #c9a36b 100%); --sw-accent: #d6b98c; }
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-theme="beige"] {
  color-scheme: dark;
  --bg: #1a1611; --bg-2: #231d15; --card: rgba(50, 42, 31, 0.86); --card-hi: rgba(70, 58, 43, 0.92);
  --card-border: rgba(226, 200, 160, 0.22); --card-border-hi: rgba(232, 204, 160, 0.55);
  --accent: #c9a36b; --accent-glow: rgba(201, 163, 107, 0.32); --accent-2: #e2c796; --accent-deep: #9a7440;
  --success: #34d399; --success-bg: rgba(5, 150, 105, 0.16); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(217, 119, 6, 0.16);
  --text: #f8f1e6; --hint: #ae9f88; --bg-glow-1: rgba(201, 163, 107, 0.16); --bg-glow-2: rgba(154, 116, 64, 0.12);
}
[data-theme="beige"] .nav-btn:not(.active) { color: #8f8068; }
/* на пісочному акценті — темний текст/іконки, щоб читалось */
[data-theme="beige"] :is(.btn-primary, .primary-btn, .segment.active, .src-tabs button.on, .sm-chip.on, .rec-tab.on, .rc-add, .apg-btn:not(.ghost), .ra-save, .cc-save, .sp-seg button.on, .sup-cat.on, .sup-ib.on, .gi-btn, .mp-add, .sm-view button.on, .fb-mode .footer-chip.active, .pill.on.primary, .mh-ico, .as-ico, .sm-add-ico, .sw2-ico, .vt-btn:not(.ghost), .gi-aic-orb, .sh-ico, .ic) { color: #1b1307 !important; }
[data-theme="beige"] :is(.src-tabs button.on em, .sm-chip.on em, .rec-tab.on em) { color: #1b1307; }

/* Без стрибків: вітання в підтримці не зникає при появі клавіатури; вкладка «Ще» не зсувається при розкритті налаштувань */
@media (max-height: 760px) { .sh-hero { display: block !important; } .sup-tpl { display: flex !important; } }
#support-modal .support-sheet { overscroll-behavior: contain; }
#support-chat-empty:not([style*="none"]) { overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-padding-bottom: 20px; }
#tab-profile, #appearance-settings-card, #appearance-settings-card > .set-group { overflow-anchor: none; scroll-behavior: auto; }
#appearance-settings-card > .set-group.is-collapsed > :not(.set-head) { display: none; }

[data-theme="beige"] .theme-grid .segment.active, [data-theme="beige"] .theme-grid .segment.active .theme-tile-label { color: var(--text) !important; }
[data-theme="beige"] .theme-grid .segment .theme-tile-label { color: var(--hint); }
[data-theme="beige"] .theme-grid .segment.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 22px -12px var(--accent-glow); }
[data-theme="beige"] .sw-beige { --sw-bg: linear-gradient(135deg, #1a1611 0%, #3a2f21 55%, #c9a36b 100%); }
[data-theme="beige"] .modal-sheet { background: #211b14; }

/* ===== Підписка ===== */
#tab-subscriptions .back-btn { margin-bottom: 12px; }
.subs-hero { margin: 0 0 14px; padding: 16px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%), var(--card); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--card-border)); }
.sh-top { display: flex; align-items: center; gap: 12px; }
.sh-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #1a1025; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.sh-ic svg { width: 24px; height: 24px; }
.sh-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sh-top small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.sh-top b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.sh-badge { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.14); }
.sh-badge.free { color: var(--hint); background: rgba(255,255,255,.07); }
.sh-bar { height: 6px; margin: 14px 0 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); }
.sh-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--hint); }
.sh-bar + .sh-meta { margin-top: 0; }
.sh-meta b { color: var(--text); }
#subscriptions-plans-list { display: flex; flex-direction: column; gap: 12px; }
.pv2 { margin: 0 !important; padding: 16px !important; border-radius: 22px !important; }
.pv2.is-popular { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--card); }
.pv2.is-cur { box-shadow: 0 0 0 2px var(--accent) !important; }
.pv2 .plan-card-ribbon { top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; }
.pv2 .settings-card-header { align-items: center; gap: 14px; }
.pv2 .plan-card-icon-badge { width: 52px; height: 52px; border-radius: 17px; }
.pv2 .settings-card-title { font-size: 17px; font-weight: 800; }
.pv2 .plan-card-price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.pv2 .plan-card-price-value { font-size: 20px; font-weight: 800; }
.pv2-p { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pv2-c { font-size: 18px; font-weight: 800; margin-left: 2px; }
.pv2 .plan-card-price-unit { font-size: 13px; color: var(--hint); }
.pv2 .plan-card-price-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--hint); }
.pv2-st { display: inline-flex; align-items: center; gap: 3px; }
.pv2-st svg { width: 12px; height: 12px; }
.pv2 .settings-card-desc { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-2, var(--accent)); }
.pv2 .settings-card-extra { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.pv2 .plan-card-features { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pv2 .plan-card-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.35; }
.pv2 .plan-card-feature-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; margin-top: 1px; }
.pv2 .plan-card-feature-check svg { width: 12px; height: 12px; }
.pv2-cta { width: 100% !important; height: 50px; margin-top: 16px !important; border-radius: 16px !important; font-size: 15px !important; font-weight: 800 !important; color: #fff !important; border: 0 !important; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))) !important; box-shadow: 0 12px 24px -14px var(--accent-glow); }
.pv2-cta.alt { color: var(--text) !important; background: rgba(255,255,255,.07) !important; box-shadow: none; border: 1px solid var(--card-border) !important; }
.pv2-cta:active { transform: scale(.98); }
.pv2-cur { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 16px; border-radius: 14px; font-size: 14px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.1); }
.pv2-cur svg { width: 18px; height: 18px; }
.pv2-pay { display: flex; flex-direction: column; gap: 8px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.pv2-pm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); }
.pv2-pm > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-size: 20px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pv2-pm b { display: block; font-size: 14.5px; }
.pv2-pm small { font-size: 12px; color: var(--hint); }
.pv2-note { padding: 4px 6px; font-size: 12px; line-height: 1.45; color: var(--hint); }

/* ===== Підписка v3 ===== */
.subs-hidden-list { display: none !important; }
#tab-subscriptions .section-label, #tab-subscriptions #subs-purchase-paused-banner + * { }
.sv3 { display: flex; flex-direction: column; gap: 14px; }
.sv3-hero { position: relative; padding: 16px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), var(--card); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--card-border)); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.sv3-hi small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.sv3-hi b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.sv3-st { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.14); }
.sv3-st.free { color: var(--hint); background: rgba(255,255,255,.08); }
.sv3-bar { grid-column: 1 / -1; height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.sv3-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); }
.sv3-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--hint); }
.sv3-meta b { color: var(--text); }
.sv3-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--card-border); }
.sv3-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 9px 4px 8px; border: 0; border-radius: 15px; font: inherit; color: var(--hint); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.sv3-tabs b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sv3-tabs small { font-size: 12px; font-weight: 700; opacity: .8; }
.sv3-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 22px -12px var(--accent-glow); }
.sv3-tabs button.cur:not(.on)::after { content: ""; position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.sv3-tabs i { position: absolute; top: -6px; right: 8px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #f43f5e; }
/* "Поинтереснее" (2026-10-23) — колір обраного тарифу (--pa, inline зі
   списку _PLAN_ACCENT) тепер ледь тонує й саму картку, не лише чіп/кнопку:
   перемикання вкладок «Старт/Пілот/Штаб» відчувається візуально, а не лише
   текстом. radial-gradient у кутку, той самий прийом, що й .sv3-hero/.src-hero. */
.sv3-card { position: relative; padding: 18px; border-radius: 24px; background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--pa, var(--accent)) 10%, transparent), transparent 60%), var(--card); border: 1px solid var(--card-border); overflow: hidden; }
.sv3-card.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sv3-pico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9px; color: #1a1025; flex: none; }
.sv3-pico svg { width: 15px; height: 15px; }
.sv3-pn { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--accent-2, var(--accent)); }
.sv3-pn em { font-style: normal; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: #34d399; background: rgba(52,211,153,.14); }
.sv3-pr { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 2px; }
.sv3-pp { font-size: 46px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sv3-pc { font-size: 22px; font-weight: 800; }
.sv3-pu { margin-left: 4px; font-size: 14px; color: var(--hint); }
.sv3-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--hint); }
.sv3-star { display: inline-flex; align-items: center; gap: 3px; }
.sv3-star svg { width: 12px; height: 12px; }
.sv3-chip { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sv3-chip svg { width: 16px; height: 16px; }
.sv3-f { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.sv3-f li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.4; }
.sv3-f li > span { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border-radius: 8px; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sv3-f li svg { width: 13px; height: 13px; }
.sv3-more { margin-top: 12px; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--accent-2, var(--accent)); cursor: pointer; }
.sv3-cta { width: 100%; height: 54px; margin-top: 16px; border: 0; border-radius: 17px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 14px 28px -14px var(--accent-glow); }
.sv3-cta.alt { color: var(--text); background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--card-border); }
.sv3-cta:active { transform: scale(.98); }
.sv3-curb { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 16px; border-radius: 16px; font-size: 14.5px; font-weight: 800; color: #34d399; background: rgba(52,211,153,.1); }
.sv3-curb svg { width: 18px; height: 18px; }
.sv3-pay { padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--card-border); }
.sv3-pl { margin-bottom: 10px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.sv3-pm { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.sv3-pm > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.sv3-pm span { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 18px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.sv3-pm b { font-size: 14px; }
.sv3-pm small { font-size: 11.5px; color: var(--hint); }
.sv3-pay p { margin: 10px 2px 0; font-size: 12px; line-height: 1.45; color: var(--hint); }
@media (prefers-reduced-motion: reduce) { .sv3-tabs button { transition: none; } }

.sv3-tag { margin: 2px 0 6px; font-size: 13.5px; color: var(--hint); }
.sv3-pn { font-size: 20px; letter-spacing: -.02em; }

/* Вікно способу оплати */
.pay-sheet { padding-top: 14px; }
.pay-sheet-eyebrow { display: none; }
.ps-sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 2px 16px; padding: 14px 16px; border-radius: 20px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), var(--card); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--card-border)); }
.ps-sum small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.ps-sum b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.ps-r { text-align: right; }
.ps-row { border-radius: 18px !important; }
.ps-amt { font-size: 15px !important; font-weight: 800 !important; letter-spacing: -.01em; white-space: nowrap; }
.ps-rec { border-color: rgba(52,211,153,.5) !important; box-shadow: 0 10px 24px -16px rgba(52,211,153,.6); }
.ps-foot { margin: 10px 4px 6px; font-size: 12px; line-height: 1.45; text-align: center; color: var(--hint); }

/* ===== Реферальна система v2 ===== */
#referral-modal .modal-sheet { max-height: calc(100dvh - 90px); overflow-y: auto; scrollbar-width: none; }
#referral-modal .modal-sheet::-webkit-scrollbar { display: none; }
.rf-link { padding: 14px !important; border-radius: 20px !important; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), var(--card) !important; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--card-border)); }
#referral-link-value { font-size: 13px !important; padding: 10px 12px; margin-bottom: 10px !important; border-radius: 12px; background: rgba(0,0,0,.22); }
.rf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rf-btns .pill, .rf-share { height: 46px; justify-content: center; border-radius: 14px; font-weight: 800; }
.rf-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; font: inherit; font-size: 14px; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 10px 22px -12px var(--accent-glow); }
.rf-share svg { width: 17px; height: 17px; }
.rf-win { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.rf-w { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); }
.rf-wi { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; }
.rf-wi svg { width: 18px; height: 18px; }
.rf-wi.you { color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rf-wi.fr { color: #34d399; background: rgba(52,211,153,.14); }
.rf-w b { display: block; font-size: 13.5px; }
.rf-w small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--hint); }
.rf-lim { grid-column: 1 / -1; padding: 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--hint); }
.rf-fl { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--card-border); }
.rf-f { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.rf-f + .rf-f { border-top: 1px solid var(--card-border); }
.rf-fa { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.rf-f > div { flex: 1; min-width: 0; }
.rf-f b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-f small { font-size: 12px; color: var(--hint); }
.rf-f em { flex: none; font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.rf-f em.active { color: #34d399; background: rgba(52,211,153,.14); }
.rf-f em.joined { color: var(--hint); background: rgba(255,255,255,.07); }
.rf-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px; text-align: center; border-radius: 18px; border: 1px dashed var(--card-border); }
.rf-empty b { font-size: 16px; } .rf-empty span { font-size: 13px; color: var(--hint); }
@media (max-width: 420px) { .rf-win { grid-template-columns: 1fr; } }

/* ===== Таблиця лідерів ===== */
#referral-leaderboard-list { gap: 12px !important; }
.lb-pod { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 8px; padding: 6px 0 2px; }
.lb-p { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.lb-p b { max-width: 100%; margin-top: 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-p small { font-size: 11.5px; color: var(--hint); }
.lb-pa { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.lb-p.p1 .lb-pa { width: 64px; height: 64px; font-size: 25px; box-shadow: 0 0 0 3px #fbbf24, 0 12px 26px -10px rgba(251,191,36,.6); }
.lb-p.p2 .lb-pa { box-shadow: 0 0 0 3px #cbd5e1; }
.lb-p.p3 .lb-pa { box-shadow: 0 0 0 3px #d08a52; }
.lb-crown { position: absolute; top: -16px; color: #fbbf24; }
.lb-crown svg { width: 22px; height: 22px; }
.lb-bar { display: grid; place-items: start center; width: 100%; margin-top: 8px; padding-top: 8px; border-radius: 14px 14px 0 0; font-weight: 800; font-size: 18px; color: var(--hint); background: var(--card); border: 1px solid var(--card-border); border-bottom: 0; }
.lb-p.p1 .lb-bar { height: 70px; color: #fbbf24; background: linear-gradient(180deg, rgba(251,191,36,.18), var(--card)); }
.lb-p.p2 .lb-bar { height: 52px; }
.lb-p.p3 .lb-bar { height: 40px; }
.lb-p.me b { color: var(--accent-2, var(--accent)); }
.lb-list { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--card-border); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.lb-row + .lb-row { border-top: 1px solid var(--card-border); }
.lb-row.me { background: color-mix(in srgb, var(--accent) 13%, transparent); }
#referral-leaderboard-me .lb-row { border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.lb-rk { flex: none; width: 24px; text-align: center; font-weight: 800; color: var(--hint); }
.lb-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.lb-nm { flex: 1; min-width: 0; }
.lb-nm b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-nm i { font-style: normal; font-size: 11px; color: var(--accent-2, var(--accent)); }
.lb-nm small, .lb-sc small { font-size: 11.5px; color: var(--hint); }
.lb-sc { flex: none; text-align: right; display: flex; flex-direction: column; }
.lb-sc b { font-size: 18px; line-height: 1; }

/* ===== Щаблі рівнів ===== */
.ld { display: flex; flex-direction: column; }
.ld-i { position: relative; display: flex; gap: 14px; padding-bottom: 14px; }
.ld-i:last-child { padding-bottom: 0; }
.ld-i:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; border-radius: 2px; background: var(--card-border); }
.ld-i.done:not(:last-child)::before { background: #34d399; }
.ld-n { flex: none; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 16px; color: var(--hint); background: var(--bg-2, var(--card)); border: 2px solid var(--card-border); }
.ld-n svg { width: 18px; height: 18px; }
.ld-i.done .ld-n { color: #04120c; background: #34d399; border-color: #34d399; }
.ld-i.current .ld-n { color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ld-b { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-border); }
.ld-i.current .ld-b { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), var(--card); }
.ld-i.locked .ld-b { opacity: .62; }
.ld-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-h b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.ld-chip { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.ld-i.biz .ld-chip { color: #fbbf24; background: rgba(251,191,36,.14); }
.ld-i.done .ld-chip { color: #34d399; background: rgba(52,211,153,.14); }
.ld-s { margin-top: 3px; font-size: 12.5px; color: var(--hint); }
.ld-bar { height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.ld-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); }

.ld-m { margin-left: 8px; padding: 2px 6px; border-radius: 6px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; vertical-align: 2px; color: #1a1205; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.ld-i.media .ld-b { border-color: rgba(251,191,36,.35); }
.ld-i.media.locked .ld-b { opacity: .72; }

/* ===== Службова мітка в пузирі чату ===== */
.chat-ctx { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; background: rgba(0,0,0,.22); color: rgba(255,255,255,.82); }
.chat-bubble.from-support .chat-ctx { background: rgba(255,255,255,.08); color: var(--hint); }
.chat-ctx svg { flex: none; width: 13px; height: 13px; opacity: .85; }

/* ===== Інтерактивний тур: оновлений вигляд ===== */
.tour-backdrop { background: radial-gradient(120% 90% at 50% 0%, rgba(8, 6, 14, .72), rgba(4, 3, 8, .86)); backdrop-filter: blur(7px) saturate(120%); -webkit-backdrop-filter: blur(7px) saturate(120%); }
.tour-spotlight { border-radius: 18px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 7px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 36px 4px var(--accent-glow); animation: tourRing 2.2s ease-in-out infinite; }
@keyframes tourRing { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 30px 2px var(--accent-glow); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 0 11px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 42px 6px var(--accent-glow); } }
body.perf .tour-spotlight { animation: none; }
.tour-card { max-width: 360px; padding: 18px 20px 16px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 46%), color-mix(in srgb, var(--bg-2, #14101e) 94%, #000); border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,.08)); box-shadow: 0 24px 50px -12px rgba(0,0,0,.65), 0 0 40px -10px var(--accent-glow); }
.tour-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: var(--tp, 10%); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); transition: width .45s cubic-bezier(.3, .9, .3, 1); box-shadow: 0 0 12px var(--accent-glow); }
.tour-card.tour-in { animation: tourCardIn .38s cubic-bezier(.2, .9, .3, 1.15) both; }
.tour-card.centered.tour-in { animation: tourCardInC .42s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes tourCardIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tourCardInC { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }
.tour-step-counter { display: inline-flex; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tour-card.centered .tour-step-counter { display: flex; width: fit-content; margin: 0 auto 12px; }
.tour-card-text { margin-bottom: 16px; font-size: 14.5px; line-height: 1.55; }
.tour-card-icon { place-items: center; width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 14px 30px -10px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.tour-card.centered .tour-card-icon { display: grid !important; }
.tour-card-icon svg { width: 32px; height: 32px; }
.tour-card-title { font-size: 21px; letter-spacing: -.02em; margin-bottom: 8px; }
.tour-skip-btn { padding: 10px 6px; font-size: 13px; opacity: .8; }
.tour-skip-btn:active { opacity: 1; }
.tour-next-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 15px; font-size: 14.5px; transition: transform .15s ease; }
.tour-next-btn::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 2.4px 2.4px 0 0; border-radius: 1px; transform: rotate(45deg); margin-left: -2px; }
.tour-card[data-last="1"] .tour-next-btn::after { display: none; }
.tour-next-btn:active { transform: scale(.96); }
.tour-card.tour-pc { max-width: 400px; }
@media (prefers-reduced-motion: reduce) { .tour-spotlight, .tour-card.tour-in { animation: none; } }

/* ===== Моніторинг тривог вимкнено: прибираємо пов'язані елементи ===== */
/* (правило, що ховало плитки тривог, прибрано: тривоги знову працюють від радара) */

/* ===== Чат підтримки на ПК: центрована картка замість повноекранного мобільного вигляду ===== */
@media (min-width: 900px) {
  #support-modal.modal-overlay { box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 28px !important; background: rgba(4, 3, 9, .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #support-modal .modal-sheet.support-sheet {
    width: min(780px, 100%) !important; height: min(88vh, 880px) !important; max-height: 88vh !important;
    padding: 16px 20px 16px !important; border-radius: 28px !important;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--card-border));
    background: radial-gradient(90% 34% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%), var(--bg-2, #0d0b18) !important;
    box-shadow: 0 50px 100px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  }
  #support-modal .support-head { padding: 4px 2px 14px !important; margin-bottom: 6px; }
  #support-modal .chat-bubble-group { max-width: 74%; }
  #support-modal .chat-thread { padding: 8px 4px 12px; }
  #support-modal .chat-composer { margin-bottom: 0; }
}
/* ===== Згорнутий сайдбар (тільки іконки): єдина геометрія без вкладених рамок і перекриттів ===== */
body.desktop-platform.sidebar-collapsed .sidebar-brand {
  flex-direction: column !important; align-items: center !important; gap: 10px !important;
  padding: 8px 0 14px !important; margin-bottom: 12px !important; height: auto !important; min-height: 0 !important;
}
body.desktop-platform.sidebar-collapsed .sidebar-collapse-btn {
  position: static !important; inset: auto !important; top: auto !important; right: auto !important; margin: 0 !important;
  width: 30px !important; height: 30px !important; flex: none;
}
/* пошук: така сама плитка 48×48, як і решта пунктів */
body.desktop-platform.sidebar-collapsed .sidebar-search-btn {
  width: 48px !important; height: 48px !important; min-height: 48px !important; padding: 0 !important; margin: 0 auto 10px !important;
  justify-content: center !important; border-radius: 15px !important;
}
/* пункти: прозорий контейнер, видима лише одна плитка-іконка (без «рамки в рамці») */
body.desktop-platform.sidebar-collapsed .nav-btn, body.desktop-platform.sidebar-collapsed .nav-btn-extra {
  width: 48px !important; height: 48px !important; margin: 2px auto !important; padding: 0 !important; justify-content: center !important;
  background: none !important; border-color: transparent !important; box-shadow: none !important;
}
body.desktop-platform.sidebar-collapsed .nav-btn.active { background: none !important; box-shadow: none !important; }
body.desktop-platform.sidebar-collapsed .nav-btn.active::before, body.desktop-platform.sidebar-collapsed .nav-btn.active::after { display: none !important; }
body.desktop-platform.sidebar-collapsed .nav-primary-ico, body.desktop-platform.sidebar-collapsed .nav-extra-ico {
  width: 42px !important; height: 42px !important; border-radius: 14px !important; transition: transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .2s;
}
body.desktop-platform.sidebar-collapsed .nav-btn.active .nav-primary-ico {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 80%, #fff), 0 8px 20px -6px var(--accent-glow) !important;
  background: linear-gradient(145deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))) !important;
}
body.desktop-platform.sidebar-collapsed .nav-btn:not(.active):hover .nav-primary-ico, body.desktop-platform.sidebar-collapsed .nav-btn-extra:hover .nav-extra-ico { transform: scale(1.07); }
/* ===== ПК: поки відкрите будь-яке вікно, сайдбар теж розмитий і приглушений (фон повністю м'який) ===== */
@media (min-width: 900px) {
  /* сайдбар і банер лишаються чіткими (без розмиття) — розмивається тільки фон вікна */
  /* підкладка вікна підтримки: сильніше розмиття, як у решти вікон */
  #support-modal.modal-overlay { backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; background: rgba(6, 5, 12, .6) !important; }
}
/* свернутый сайдбар: прихований текст бренду не має займати місце */
body.desktop-platform.sidebar-collapsed .sidebar-brand-text { display: none !important; }
body.desktop-platform.sidebar-collapsed .sidebar-brand { gap: 8px !important; padding: 6px 0 12px !important; }
/* ===== ПК: «Налаштування каналу» — дві колонки (ліворуч канал і вкладки, праворуч вміст) ===== */
@media (min-width: 1100px) {
  body.desktop-platform #channel-modal > .modal-sheet { max-width: calc(1160px / var(--ed-zoom, 1)) !important; }
  body.desktop-platform #channel-modal-body::after { content: ""; display: block; clear: both; }
  body.desktop-platform #channel-modal-body > .modal-hero,
  body.desktop-platform #channel-modal-body > #as-btn,
  body.desktop-platform #channel-modal-body > #cc-btn,
  body.desktop-platform #channel-modal-body > .modal-tab-bar {
    float: left; clear: left; width: 290px; box-sizing: border-box; margin: 0 0 12px !important;
  }
  body.desktop-platform #channel-modal-body > .modal-tab-panel { margin-left: 322px !important; min-width: 0; }
  /* вертикальні вкладки */
  body.desktop-platform #channel-modal .modal-tab-bar {
    display: flex !important; flex-direction: column; gap: 4px; padding: 8px !important; overflow: visible;
    border: 1px solid var(--card-border) !important; border-radius: 20px !important; background: var(--card) !important;
  }
  body.desktop-platform #channel-modal .modal-tab-bar::after { display: none !important; }
  body.desktop-platform #channel-modal .modal-tab-btn {
    display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 12px !important;
    width: 100%; padding: 12px 14px !important; border-radius: 13px !important; font-size: 14.5px; text-align: left; flex: none !important;
    box-shadow: none !important; color: var(--hint);
  }
  body.desktop-platform #channel-modal .modal-tab-btn svg { width: 20px; height: 20px; flex: none; transform: none !important; }
  body.desktop-platform #channel-modal .modal-tab-btn:hover { background: rgba(255, 255, 255, .05) !important; color: var(--text); }
  body.desktop-platform #channel-modal .modal-tab-btn.active {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important; color: var(--text);
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }
  body.desktop-platform #channel-modal .modal-hero { padding: 16px !important; }
}
/* ===== Фільтр слів: копіювання / вставка ===== */
.k2io { display: flex; gap: 8px; margin: 10px 0 12px; }
.k2-top .k2io { margin-top: 8px; margin-bottom: 4px; }
.k2io-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 13px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid var(--card-border); transition: transform .14s ease, background .2s, border-color .2s; }
.k2io-btn svg { width: 17px; height: 17px; flex: none; color: var(--accent-2, var(--accent)); }
.k2io-btn:active { transform: scale(.97); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.k2io-box { margin: 0 0 12px; padding: 10px; border-radius: 16px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--card-border)); }
.k2io-box textarea { width: 100%; box-sizing: border-box; min-height: 92px; padding: 10px 12px; border-radius: 12px; resize: vertical; font: inherit; font-size: 14px; color: var(--text); background: rgba(0,0,0,.22); border: 1px solid var(--card-border); }
.k2io-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.k2io-row small { color: var(--hint); font-size: 12.5px; }
.k2io-row .pill { height: 38px; padding: 0 16px; }
/* ===== «По учасниках»: нова картка учасника ===== */
.ts2-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.ts2-sort { display: inline-flex; padding: 3px; gap: 2px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid var(--card-border); }
.ts2-sort button { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--hint); background: none; cursor: pointer; transition: background .2s, color .2s; }
.ts2-sort button.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 6px 14px -8px var(--accent-glow); }
.ts2-copy { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--card-border); cursor: pointer; }
.ts2-copy svg { width: 16px; height: 16px; color: var(--accent-2, var(--accent)); }
.ts2-copy:active { transform: scale(.97); }
.ts2-card .team-stat-head { gap: 10px; align-items: center; cursor: pointer; }
.ts2-medal { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--hint); background: rgba(255,255,255,.07); }
.ts2-medal.m1 { color: #3a2600; background: linear-gradient(145deg, #fde68a, #f59e0b); }
.ts2-medal.m2 { color: #1d2433; background: linear-gradient(145deg, #e2e8f0, #94a3b8); }
.ts2-medal.m3 { color: #35190b; background: linear-gradient(145deg, #f3c9a3, #c2763a); }
.ts2-share { height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.ts2-share i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent))); }
.ts2-tot { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.ts2-tot b { font-size: 20px; font-weight: 800; color: var(--accent-2, var(--accent)); font-variant-numeric: tabular-nums; }
.ts2-tot small { font-size: 11px; color: var(--hint); }
.ts2-chev { flex: none; width: 22px; color: var(--hint); transition: transform .25s ease; }
.ts2-chev svg { width: 20px; height: 20px; }
.ts2-card.open .ts2-chev { transform: rotate(180deg); }
.ts2-card .ts2-body { display: none; padding: 12px 2px 4px; }
.ts2-card.open .ts2-body { display: block; animation: ts2In .26s ease both; }
@keyframes ts2In { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ts2-card .stat-tiles { display: none !important; }
.ts2-rate { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); --rc: var(--accent-2, var(--accent)); }
.ts2-rate.good { --rc: #34d399; } .ts2-rate.mid { --rc: #fbbf24; } .ts2-rate.bad { --rc: #fb7185; }
.ts2-rate-top { display: flex; align-items: baseline; gap: 8px; }
.ts2-rate-top b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--rc); font-variant-numeric: tabular-nums; }
.ts2-rate-top span { font-size: 13px; font-weight: 700; }
.ts2-rate-top small { margin-left: auto; font-size: 12px; color: var(--hint); }
.ts2-bar { height: 7px; margin-top: 8px; border-radius: 7px; background: rgba(255,255,255,.09); overflow: hidden; }
.ts2-bar i { display: block; height: 100%; border-radius: 7px; background: var(--rc); transition: width .5s cubic-bezier(.3,.9,.3,1); }
.ts2-sharetxt { margin-top: 8px; font-size: 12px; color: var(--hint); }
.ts2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ts2-sec { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); }
.ts2-sec.wide { grid-column: 1 / -1; }
.ts2-sec h5 { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.ts2-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ts2-pair span, .ts2-react span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--hint); line-height: 1.25; }
.ts2-pair b, .ts2-react b { font-size: 19px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ts2-pair .good b { color: #34d399; } .ts2-pair .bad b { color: #fb7185; }
.ts2-react { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ts2-react b { font-size: 16px; }
.ts2-card .team-stat-head::after, .ts2-card .team-stat-head::before { display: none !important; content: none !important; }
/* ===== Вкладки «Тривоги» і «Команда» (сводка, групи, швидкий вибір) ===== */
.modal-tab-panel.al.active, .modal-tab-panel.tm.active { display: flex; flex-direction: column; gap: 14px; }
.al [data-role="alerts-config-block"] { display: flex; flex-direction: column; gap: 18px; }
.al-hero-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #fff; background: linear-gradient(145deg, #fb7185, #e11d48); box-shadow: 0 10px 22px -10px rgba(225,29,72,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.al-hero-ic svg { width: 22px; height: 22px; }
@keyframes alPulse { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.al-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.al-t { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 10px 10px 12px; border-radius: 15px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s; }
.al-t:active { transform: scale(.96); }
.al-t small { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hint); }
.al-t b { max-width: 100%; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-t[data-s="on"] { border-color: rgba(52,211,153,.35); } .al-t[data-s="on"] b { color: #34d399; }
.al-t[data-s="warn"] { border-color: rgba(251,191,36,.4); } .al-t[data-s="warn"] b { color: #fbbf24; }
.al-t[data-s="off"] b { color: var(--hint); }
.tm .team-member { border-radius: 18px; transition: border-color .2s, box-shadow .2s; }
.tm .team-member[data-role-kind="editor"] { border-left: 3px solid #60a5fa; }
.tm .team-member[data-role-kind="moderator"] { border-left: 3px solid #f59e0b; }
.tm .team-member.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border)); box-shadow: 0 14px 30px -20px var(--accent-glow); }
.tm .set-label.team-members-label { display: flex; align-items: center; justify-content: space-between; }
.tm .team-count { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--accent-2, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (max-width: 380px) { .al-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { body.desktop-platform .al .al-tiles { grid-template-columns: repeat(4, 1fr); } }
/* ===== «Тривоги» v2: головний перемикач, чіпи стану, кольорові картки ===== */
.modal-tab-panel.al { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.al-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 11px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid var(--card-border); transition: transform .14s ease; }
.al-chip:active { transform: scale(.96); }
.al-chip i { width: 7px; height: 7px; border-radius: 50%; background: #6b7280; }
.al-chip[data-s="on"] i { background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.7); }
.al-chip[data-s="warn"] { color: #fbbf24; border-color: rgba(251,191,36,.45); } .al-chip[data-s="warn"] i { background: #fbbf24; }
.al-chip[data-s="off"] { color: var(--hint); }
.al .alerts-off { padding: 22px 18px 20px; border-radius: 22px; border: 1px solid var(--card-border) !important; background: var(--card) !important; }
.al .alerts-off-ico { width: 52px; height: 52px; }
/* ===== «Тривоги» v3: плоский «пульт оператора» (без градієнтів і неонових плиток) ===== */
#channel-modal .al { --al-line: rgba(255,255,255,.09); --al-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; gap: 14px; }
#channel-modal .al .al-hero-ic { display: none; }
/* типи цілей: сітка перемикачів із квадратною міткою */
#channel-modal .al [data-role="alerts-type-list"] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal .al [data-role="alerts-type-list"] .chip-compact { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 54px; padding: 8px 36px 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--hint); background: rgba(255,255,255,.03); border: 1px solid var(--al-line); box-shadow: none; }
#channel-modal .al [data-role="alerts-type-list"] .chip-compact.checked { color: var(--text); background: color-mix(in srgb, var(--accent) 11%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
#channel-modal .al [data-role="alerts-type-list"] .chip-compact:not(.checked)::after { content: ""; position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; margin-top: -8px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.22); }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-check { position: absolute; top: 50%; right: 10px; width: 18px; height: 18px; margin-top: -9px; display: grid; place-items: center; border-radius: 5px; background: var(--accent); box-shadow: none; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-check svg { width: 12px; height: 12px; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-icon img { width: 22px; height: 22px; object-fit: contain; opacity: .9; }
/* області: плоскі прямокутники у дві колонки */
#channel-modal .al [data-role="alerts-oblast-list"] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#channel-modal .al [data-role="alerts-oblast-list"] .chip-compact, #channel-modal .al [data-role="kyiv-raions-list"] .chip-compact { justify-content: space-between; min-height: 38px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.03); border: 1px solid var(--al-line); box-shadow: none; }
#channel-modal .al [data-role="alerts-oblast-list"] .chip-compact.checked, #channel-modal .al [data-role="kyiv-raions-list"] .chip-compact.checked { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
#channel-modal .al .chip-action-btn { border-radius: 8px; }
#channel-modal .al .alert-preview { margin: 0; padding: 14px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#channel-modal .al .alerts-off { padding: 20px 16px 18px; border-radius: 14px; border: 1px solid var(--al-line) !important; background: var(--card) !important; }
#channel-modal .al .alerts-off-ico { display: none; }
#channel-modal .al .alerts-off-title { font-size: 18px; font-weight: 700; }#channel-modal .al [data-role="alerts-type-list"] .chip-compact { gap: 8px; padding: 8px 32px 8px 8px; font-size: 12px; overflow-wrap: break-word; hyphens: auto; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-icon { width: 22px; height: 22px; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-icon img { width: 20px; height: 20px; }
#channel-modal .al [data-role="alerts-type-list"] .threat-chip-check, #channel-modal .al [data-role="alerts-type-list"] .chip-compact:not(.checked)::after { right: 8px; }
#channel-modal .al .alerts-off .pill.primary, #channel-modal .al .alerts-off button { height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 700; box-shadow: none !important; background: var(--accent) !important; color: #fff; border: 0; }#channel-modal .al [data-role="alerts-type-list"] .chip-compact { font-size: 11.5px; letter-spacing: -.005em; hyphens: manual; overflow-wrap: normal; word-break: normal; padding-right: 30px; }
/* ===== Тривоги вимкнені: окремий екран замість сводки ===== */
/* ===== Тривоги: стиль редактора ключів (м'які скруглені поверхні, пілюлі) ===== */
#channel-modal .al { gap: 18px; }
#channel-modal .al [data-role="alerts-type-list"] .chip-compact, #channel-modal .al [data-role="alerts-oblast-list"] .chip-compact, #channel-modal .al [data-role="kyiv-raions-list"] .chip-compact { border-radius: 14px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
#channel-modal .al [data-role="alerts-type-list"] .chip-compact.checked, #channel-modal .al [data-role="alerts-oblast-list"] .chip-compact.checked, #channel-modal .al [data-role="kyiv-raions-list"] .chip-compact.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
#channel-modal .al .alerts-off { border-radius: 20px; background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.1) !important; }
#channel-modal .al .alerts-off .pill.primary, #channel-modal .al .alerts-off button { height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))) !important; }
/* ===== Тривоги: акуратні відступи, сітки областей і типів цілей ===== */
#channel-modal .modal-tab-panel[data-panel="alerts"] > .settings-card, #channel-modal .modal-tab-panel[data-panel="alerts"] .mp-cards > .settings-card { margin: 0 0 12px; }
#channel-modal .modal-tab-panel[data-panel="alerts"] .settings-card-extra { margin-top: 10px; padding: 12px; border-top: 0; border-radius: 14px; }
#channel-modal [data-role="alerts-oblast-list"], #channel-modal [data-role="kyiv-raions-list"] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal [data-role="alerts-oblast-list"] .chip-compact, #channel-modal [data-role="kyiv-raions-list"] .chip-compact { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: auto; min-height: 42px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; }
#channel-modal [data-role="alerts-oblast-list"] .chip-compact.checked, #channel-modal [data-role="kyiv-raions-list"] .chip-compact.checked { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
#channel-modal [data-role="alerts-type-list"] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal [data-role="alerts-type-list"] .chip-compact { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: 14px; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: left; }
#channel-modal [data-role="alerts-type-list"] .chip-compact > span:not(.threat-chip-icon):not(.threat-chip-check) { flex: 1; min-width: 0; }
#channel-modal [data-role="alerts-type-list"] .threat-chip-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
#channel-modal [data-role="alerts-type-list"] .threat-chip-icon img { width: 22px; height: 22px; object-fit: contain; }
#channel-modal [data-role="alerts-type-list"] .chip-compact:not(.checked) { opacity: .65; }
#channel-modal [data-role="alerts-type-list"] .chip-compact.checked { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
#channel-modal .modal-tab-panel[data-panel="alerts"] .watermark-toggle { gap: 12px; }
/* ===== Тривоги: відступи між картками та дизайн списку областей ===== */
#channel-modal [data-role="alerts-config-block"] > .settings-card { margin: 0 0 14px !important; }
#channel-modal [data-role="alerts-config-block"] > .alert-preview { margin-top: 4px; }
#channel-modal [data-role="alerts-oblast-panel"] .chip-actions-row { display: none; }
#channel-modal .ob-presets { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 0 2px; }
#channel-modal .ob-presets::-webkit-scrollbar { display: none; }
#channel-modal .ob-pre { flex: none; height: 32px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .14s, background .2s, border-color .2s; }
#channel-modal .ob-pre:active { transform: scale(.96); background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }
#channel-modal .ob-pre.ghost { color: var(--hint); }
#channel-modal .ob-count { margin: 2px 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--hint); }
#channel-modal .ob-count:empty { display: none; }
#channel-modal .chip-grid[data-role="alerts-oblast-list"], #channel-modal .chip-grid[data-role="kyiv-raions-list"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal .chip-grid[data-role="alerts-oblast-list"] .chip-compact, #channel-modal .chip-grid[data-role="kyiv-raions-list"] .chip-compact { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: auto; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; overflow-wrap: anywhere; }
#channel-modal .chip-grid[data-role="alerts-oblast-list"] .chip-compact:not(.checked) { color: var(--hint); }
#channel-modal .chip-grid[data-role="alerts-oblast-list"] .chip-compact .channel-chip-check { flex: none; }
#channel-modal .chip-grid[data-role="alerts-type-list"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
#channel-modal .chip-grid[data-role="alerts-type-list"] .chip-compact { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; min-width: 0; min-height: 52px; padding: 8px 10px; border-radius: 14px; font-size: 12.5px; line-height: 1.2; text-align: left; }
/* Головна: крапка стану не налазить на підпис показника */
.mp-st { min-width: 0; }
.mp-st i { top: auto !important; bottom: 12px; right: 9px; }
.mp-st small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-st b { padding-right: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }
/* ===== Головна: статус-плитки (замість суцільної смуги з крапками) ===== */
.mp-strip { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; background: none !important; }
.mp-st { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 66px; padding: 10px 10px 13px 11px !important; border: 1px solid rgba(255,255,255,.09) !important; border-left: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; background: rgba(255,255,255,.045) !important; transition: transform .14s cubic-bezier(.3,1.5,.5,1), border-color .2s, background .2s; }
.mp-st + .mp-st { border-left: 1px solid rgba(255,255,255,.09) !important; }
.mp-st i { display: none !important; }
.mp-st::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: rgba(255,255,255,.12); transition: background .2s; }
.mp-st[data-s="on"] { background: linear-gradient(180deg, rgba(52,211,153,.12), rgba(52,211,153,.03)) !important; border-color: rgba(52,211,153,.28) !important; }
.mp-st[data-s="on"]::after { background: #34d399; box-shadow: 0 0 10px rgba(52,211,153,.55); }
.mp-st[data-s="warn"]::after { background: #f5c26b; }
.mp-st[data-s="warn"] { border-color: rgba(245,194,107,.3) !important; }
.mp-st small { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-st b { padding: 0; font-size: 16px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Тема новини в картці черги ===== */
.tl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 2px; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; font-size: 12.5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); }
.tl-chip svg { flex: none; width: 14px; height: 14px; color: var(--hint); }
.tl-chip .tl-lab { color: var(--hint); font-weight: 600; }
.tl-chip b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-chip[data-s="manual"] { background: color-mix(in srgb, var(--success, #34d399) 14%, transparent); border-color: color-mix(in srgb, var(--success, #34d399) 45%, transparent); }
.tl-chip[data-s="manual"] svg { color: var(--success, #34d399); }
.tl-chip[data-s="none"] b { color: var(--hint); font-weight: 600; }
.tl-act { display: inline-flex; gap: 6px; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .14s, background .2s, border-color .2s; }
.tl-btn svg { width: 13px; height: 13px; }
.tl-btn:active { transform: scale(.96); }
.tl-btn.ok { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.tl-pick { flex: 1 0 100%; margin-top: 2px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); animation: tlIn .18s ease-out; }
@keyframes tlIn { from { opacity: 0; transform: translateY(-4px); } }
.tl-pick-t { margin: 0 2px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.tl-pick-g { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-opt { height: 32px; padding: 0 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.tl-opt.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.tl-opt:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .tl-pick { animation: none; } }

/* Список каналів: без плашок тематик (як у «Резерв Тривоги») */
.ch-cats { display: none !important; }

/* ===== Фільтр: «з чого почати» і підказки ===== */
.ks-box { margin: 14px 0 6px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
.ks-box[hidden], .ks-sug[hidden] { display: none; }
.ks-t { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ks-s { margin: 3px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--hint); }
.ks-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ks-pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 76px; padding: 11px 12px; border-radius: 14px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.09); transition: transform .14s, border-color .2s, background .2s; }
.ks-pack:active { transform: scale(.97); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ks-pack b { font-size: 14.5px; font-weight: 800; }
.ks-pack small { font-size: 12px; color: var(--hint); }
.ks-plus { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--accent-2, var(--accent)); }
.ks-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.ks-w { height: 30px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.ks-w:active { transform: scale(.96); border-color: var(--accent); }
/* ===== Фільтр за словами: компактно й зручно ===== */
.keywords2-modal-sheet .k2-top .modal-header { padding: 18px 0 10px; gap: 12px; align-items: center; }
.keywords2-modal-sheet .k2-top .modal-header > span:first-child { flex: 1; min-width: 0; font-size: 18px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.keywords2-modal-sheet .k2-top .pill-row input { height: 46px; padding: 0 14px; font-size: 15px; }
.keywords2-modal-sheet .k2-top .pill-row .pill { height: 46px; min-width: 46px; border-radius: 14px; }
.keywords2-modal-sheet .k2-top .pill-row .pill:not([disabled]):not(.danger) { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); border-color: transparent; }
.keywords2-modal-sheet .k2io { gap: 6px; margin: 8px 0 0; }
.keywords2-modal-sheet .k2io-btn { height: 38px; min-width: 0; padding: 0 10px; border-radius: 12px; font-size: 13px; }
.keywords2-modal-sheet .k2io-btn span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keywords2-modal-sheet .k2io-btn svg { width: 16px; height: 16px; }
.keywords2-modal-sheet .k2-tools { margin: 12px 0 4px; }
.keywords2-modal-sheet .k2-search { height: 40px; border-radius: 12px; }
.keywords2-modal-sheet .k2-count { padding: 2px 4px 0; font-size: 12px; letter-spacing: .02em; }
/* чипси слів: щільніше, зі зручною ціллю для видалення */
.keywords2-modal-sheet [data-role="keywords2-list"] { gap: 6px; }
.keywords2-modal-sheet .cascade-tag-chip { min-height: 34px; padding: 0 6px 0 12px; gap: 6px; font-size: 13px; font-weight: 700; }
.keywords2-modal-sheet .cascade-tag-chip .channel-chip-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.keywords2-modal-sheet .cascade-tag-chip .channel-chip-check svg { width: 12px; height: 12px; }
.keywords2-modal-sheet .cascade-suggestion-chip { min-height: 34px; font-size: 13px; }
/* «з чого почати» */
.ks-box { padding: 12px; margin: 12px 0 4px; }
.ks-s { margin-bottom: 10px; font-size: 12px; }
.ks-g { gap: 6px; }
.ks-pack { min-height: 62px; padding: 10px 40px 10px 12px; gap: 2px; border-radius: 13px; }
.ks-pack b { font-size: 14px; }
.ks-pack small { font-size: 11.5px; }
.ks-plus { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border-radius: 50%; font-size: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ks-plus::before { content: "+"; font-size: 17px; font-weight: 800; line-height: 1; color: var(--accent-2, var(--accent)); }
.ks-pack:active .ks-plus { background: var(--accent); }
.ks-pack:active .ks-plus::before { color: #fff; }
.ks-sug { gap: 6px; margin: 6px 0 4px; }
.ks-w { height: 32px; }
.keywords2-modal-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
/* ===== Налаштування каналу: розгортання (спойлер) працює й коли JS виставив inline display ===== */
#channel-modal .settings-card-extra.collapsed { display: none !important; }

/* ===== Окремий дизайн для ПК: Головна і Тривоги як дашборд у дві колонки ===== */
@media (min-width: 1100px) {
  body.desktop-platform #channel-modal .modal-tab-panel.mp.active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; align-items: start; }
  body.desktop-platform #channel-modal .mp > [data-role="growth-insight-card"],
  body.desktop-platform #channel-modal .mp > .mp-strip,
  body.desktop-platform #channel-modal .mp > .mp-group[data-g="notify"] { grid-column: 1 / -1; }
  body.desktop-platform #channel-modal .mp .mp-group[data-g="pub"] .mp-cards,
  body.desktop-platform #channel-modal .mp .mp-group[data-g="flow"] .mp-cards { grid-template-columns: minmax(0, 1fr); }
  body.desktop-platform #channel-modal .mp .mp-group[data-g="notify"] .mp-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.desktop-platform #channel-modal .mp .settings-card { padding: 14px 16px; }
  body.desktop-platform #channel-modal .mp .settings-card-title { font-size: 15px; }
  body.desktop-platform #channel-modal .mp .settings-card-desc { font-size: 12.5px; }
  body.desktop-platform #channel-modal .mp .settings-card-header { width: 100%; box-sizing: border-box; }
  body.desktop-platform #channel-modal .mp .settings-card-body { flex: 1 1 auto; }
  body.desktop-platform #channel-modal .mp .settings-card { transition: border-color .2s, background .2s, transform .18s; }
  body.desktop-platform #channel-modal .mp .settings-card:hover { border-color: rgba(255,255,255,.16); }
  body.desktop-platform #channel-modal .mp-strip { gap: 10px !important; }

  /* Тривоги: картки у два стовпці, перегляд і тест — на всю ширину */
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > .settings-card { margin: 0 !important; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > .alert-preview,
  body.desktop-platform #channel-modal [data-role="alerts-save-status"] { grid-column: 1 / -1; }

  /* .chip-grid сама по собі безпечна в половину ширини (auto-fill/minmax(120px,1fr) —
     перетікає в додаткові рядки, а не вилазить за межі), тож «Тривоги» вище лишаються
     двоколонковими завжди. Реальна причина старого "обрізала картки" — розгорнута
     automation-card (рядок часу тихих годин, два number-інпути ритму) у групі «flow»,
     яка в 2-колонковому дашборді «Головна» має лише ПОЛОВИНУ звичайної ширини. Фікс:
     поки ця картка розгорнута — вся група «flow» бере собі весь рядок сітки. */
  body.desktop-platform #channel-modal .mp .mp-group[data-g="flow"]:has(.settings-card-extra:not(.collapsed)) { grid-column: 1 / -1; }
}@media (min-width: 1100px) {
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="main"] > .mp-group[data-g="pub"] { grid-column: 1; }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="main"] > .mp-group[data-g="flow"] { grid-column: 2; }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="main"] > .mp-group[data-g="notify"] { grid-column: 1 / -1; }
}/* вужчі ПК-екрани: без двох стовпців, щоб картки не стискались */
@media (min-width: 1100px) and (max-width: 1399px) {
  body.desktop-platform #channel-modal .modal-tab-panel.mp.active { display: flex; flex-direction: column; gap: 12px; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] { display: block; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > .settings-card { margin: 0 0 12px !important; }
}
/* ===== ПК: двоколонкова сітка (Головна/Тривоги) повернута назад (2026-10-24) =====
   Раніше тут стояв "одна колонка на всю ширину", бо двоколонкова сітка "обрізала
   картки" — причина, як з'ясувалось: картка, чия .settings-card-extra розгорнута
   (не .collapsed — довгий список областей/ключових слів/чипів), не влазила в
   половину ширини й переповнювала свою грід-колонку, а overflow-x:hidden вище по
   дереву візуально "обрізав" її праву частину. Фікс нижче (:has(.settings-card-extra
   :not(.collapsed))) — така картка тепер сама займає весь рядок сітки, замість
   того, щоб ламатись чи ламати сітку для всіх. Рядки нижче, що НЕ про примусовий
   одноколонковий режим (вирівнювання перемикача/бейджа/стрілки праворуч), лишені
   як є — вони корисні незалежно від сітки/флексу. */
@media (min-width: 1100px) {
  /* перемикачі, бейджі й стрілки — завжди біля правого краю картки */
  body.desktop-platform #channel-modal .mp .settings-card-header { display: flex !important; align-items: center; width: 100%; }
  body.desktop-platform #channel-modal .mp .settings-card-body { flex: 1 1 0; min-width: 0; grid-column: auto; grid-row: auto; }
  body.desktop-platform #channel-modal .mp .settings-card-header > .watermark-toggle,
  body.desktop-platform #channel-modal .mp .settings-card-header > .watermark-switch,
  body.desktop-platform #channel-modal .mp .settings-card-header > .badge-inactive,
  body.desktop-platform #channel-modal .mp .settings-card-header > .oblast-summary-chevron { margin-left: auto; flex: none; grid-column: auto; grid-row: auto; }
  body.desktop-platform #channel-modal .mp .settings-card-header > .badge-inactive + .oblast-summary-chevron { margin-left: 8px; }
  body.desktop-platform #channel-modal .mp .settings-card-header > .settings-card-body + .badge-inactive,
  body.desktop-platform #channel-modal .mp .settings-card-header > .settings-card-body + .watermark-toggle { margin-left: auto; }
}@media (min-width: 1100px) {
  body.desktop-platform #channel-modal .modal-tab-panel.mp.active { align-items: stretch; }
  body.desktop-platform #channel-modal .mp .settings-card { width: 100%; box-sizing: border-box; }
  body.desktop-platform #channel-modal .mp-strip { width: 100%; box-sizing: border-box; }
}
/* ===== ПК: «Команда» — форма додавання й «Ролі та доступи» поряд, решта (список
   учасників, статистика, графік активності) на всю ширину (2026-10-24, раніше тут
   узагалі не було ПК-розкладки — все йшло одна картка під одною). ===== */
@media (min-width: 1100px) {
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start;
  }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > .set-label,
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > .muted,
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > #team-members-list,
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > [data-role="stats-period-segmented"],
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > [data-role="team-stats-content"] {
    grid-column: 1 / -1;
  }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="team"] > .settings-card { margin: 0 !important; }
}
/* ===== Годинник у шапці (ПК) ===== */
.topbar-clock { display: none; }
body.desktop-platform .topbar-clock:not([hidden]) { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; margin: 0 14px 0 auto; padding: 0 2px; line-height: 1; text-align: right; }
.topbar-clock b { font-size: 20px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--text); }
.topbar-clock small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--hint); text-transform: capitalize; white-space: nowrap; }
body.desktop-platform .topbar-clock:not([hidden]) + .topbar-actions { margin-left: 0; }
#clock-enable-row { display: none; }
body.desktop-platform #clock-enable-row { display: flex; }
/* ПК: у модалці «Налаштування» вміст завжди видно (згортання лише для мобільного) */
body.desktop-platform #desktop-settings-modal #appearance-settings-card > .set-group > .set-head { cursor: default; }
body.desktop-platform #desktop-settings-modal .set-collapse-chev { display: none; }
/* ===== Клавіатурна навігація: помітний фокус по всій панелі (лише ПК) ===== */
body.desktop-platform :is(button, a[href], input, select, textarea, [tabindex="0"], [role="button"], [role="switch"], [role="tab"], .watermark-switch, .switch):focus { outline: none; }
body.desktop-platform :is(button, a[href], [tabindex="0"], [role="button"], [role="switch"], [role="tab"], .watermark-switch, .switch, .segment, .chip-compact, .footer-chip, .set-row, .settings-card-header, .nav-btn, .nav-btn-extra, .modal-tab-btn):focus-visible {
  outline: 2px solid var(--accent-2, var(--accent)); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); border-radius: inherit; position: relative; z-index: 1;
}
body.desktop-platform :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
body.desktop-platform .watermark-switch:focus-visible, body.desktop-platform .switch:focus-visible { border-radius: 999px; }
body.desktop-platform .modal-tab-btn:focus-visible { outline-offset: -2px; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { body.desktop-platform :focus-visible { transition: outline-offset .12s ease, box-shadow .12s ease; } }
/* ===== Категорії каналу: групи, лічильники, нижня панель дій ===== */
.cc-ov .cc-sub { margin: 2px 0 16px; }
.cc-grp { margin: 0 0 16px; }
.cc-gh { display: flex; align-items: baseline; gap: 8px; margin: 0 4px 8px; }
.cc-gt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.cc-gs { flex: 1; min-width: 0; font-size: 12px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-gc { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; color: var(--hint); background: rgba(255,255,255,.07); }
.cc-ov .cc-grid { gap: 8px; }
.cc-ov .cc-tile { min-height: 56px; border-radius: 16px; }
.cc-ov .cc-tile:hover { border-color: color-mix(in srgb, var(--c) 40%, rgba(255,255,255,.12)); background: color-mix(in srgb, var(--c) 7%, rgba(255,255,255,.04)); }
.cc-ov .cc-tile.on { box-shadow: 0 8px 22px -14px var(--c), inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.cc-ov .cc-tile.on .cc-i { background: color-mix(in srgb, var(--c) 26%, transparent); }
.cc-ov .cc-tile i { transform: scale(.85); transition: background .2s, color .2s, transform .22s cubic-bezier(.3,1.6,.5,1); }
.cc-ov .cc-tile.on i { transform: scale(1); }
.cc-ov .cc-note { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; padding: 11px 14px; border-radius: 16px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.cc-ov .cc-note svg { flex: none; width: 18px; height: 18px; }
.cc-foot { display: flex; align-items: stretch; gap: 8px; position: sticky; bottom: 0; padding-top: 4px; }
.cc-clear { flex: none; padding: 0 18px; min-height: 48px; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 800; color: var(--hint); cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .14s, opacity .2s; }
.cc-clear:disabled { opacity: .4; cursor: default; }
.cc-clear:not(:disabled):active { transform: scale(.97); }
.cc-foot .cc-save { flex: 1; width: auto; min-height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 800; }
.cc-save-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,.24); }
.cc-save-n:empty { display: none; }
@media (max-width: 420px) { .cc-gs { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-ov .cc-tile i { transition: none; } }
/* Налаштування каналу: без кольорової «дужки» зліва на картках */
#channel-modal .settings-card,
#channel-modal .settings-card.state-accent-on,
#channel-modal .settings-card.state-accent-off,
#channel-modal [data-role="growth-insight-card"],
#channel-modal .mp > [data-role="growth-insight-card"],
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="growth-insight-card"],
#channel-modal [data-role="alert-monitor-card"],
#channel-modal [data-role="comment-mod-card"],
#channel-modal [data-role="publish-card"] {
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-left: 1px solid rgba(255, 255, 255, .09) !important;
}
#channel-modal .settings-card::before, #channel-modal .settings-card::after { box-shadow: none; }
/* Рамка фокуса — лише при навігації клавіатурою; на перемикачах без «ореолу» */
body.desktop-platform:not(.kbd-nav) :focus-visible { outline: none !important; box-shadow: none !important; }
body.desktop-platform:not(.kbd-nav) :is(.watermark-switch, .switch, [role="switch"]):focus { outline: none !important; box-shadow: none; }
body.desktop-platform :is(.watermark-switch, .switch, [role="switch"]):focus-visible { box-shadow: none; outline: 2px solid var(--accent-2, var(--accent)); outline-offset: 3px; }
/* Налаштування каналу: перемикачі без свічення й тіней */
#channel-modal .watermark-switch, #channel-modal .watermark-switch.on, #channel-modal .switch, #channel-modal .switch.on { box-shadow: none !important; filter: none; }
#channel-modal .watermark-switch::after, #channel-modal .switch::after { box-shadow: none !important; }
#channel-modal .watermark-switch.on { background: var(--accent); }
/* Редактор поста (ПК): меню «Перефразувати» не вилазить за край лівої колонки */
body.desktop-platform #ai-rewrite-style-menu.ai-style-menu { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; left: 0; right: auto; overflow: hidden; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-option { box-sizing: border-box; min-width: 0; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-text { min-width: 0; }body.desktop-platform #ai-rewrite-style-menu.ai-style-menu { width: min(460px, calc(100vw - 48px)); min-width: 0; max-width: none; overflow: visible; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-text { flex: 1; min-width: 0; }
body.desktop-platform #ai-rewrite-style-menu .ai-style-title, body.desktop-platform #ai-rewrite-style-menu .ai-style-sub { white-space: normal; overflow-wrap: anywhere; }
/* ===== ПК: нове компонування вікна «Налаштування каналу» ===== */
.pc-ph { display: none; }
@media (min-width: 1100px) {
  body.desktop-platform #channel-modal-body { container-type: inline-size; container-name: chm; }
  body.desktop-platform #channel-modal .pc-ph { display: flex; flex-direction: column; gap: 4px; margin: 0 2px 4px; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
  body.desktop-platform #channel-modal .pc-ph b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
  body.desktop-platform #channel-modal .pc-ph span { font-size: 13.5px; line-height: 1.4; color: var(--hint); }
  body.desktop-platform #channel-modal .modal-tab-panel > .pc-ph { grid-column: 1 / -1; }
}
@container chm (min-width: 1240px) {
  body.desktop-platform #channel-modal .modal-tab-panel.mp.active { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; align-items: start; }
  body.desktop-platform #channel-modal .modal-tab-panel.mp > .pc-ph,
  body.desktop-platform #channel-modal .modal-tab-panel.mp > [data-role="growth-insight-card"],
  body.desktop-platform #channel-modal .modal-tab-panel.mp > .mp-strip,
  body.desktop-platform #channel-modal .modal-tab-panel.mp > .mp-group[data-g="notify"] { grid-column: 1 / -1; }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="main"] > .mp-group[data-g="pub"] { grid-column: 1; }
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="main"] > .mp-group[data-g="flow"] { grid-column: 2; }
  body.desktop-platform #channel-modal .mp .mp-group[data-g="notify"] .mp-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  body.desktop-platform #channel-modal .mp .mp-group[data-g="pub"] .mp-cards, body.desktop-platform #channel-modal .mp .mp-group[data-g="flow"] .mp-cards { display: flex; flex-direction: column; gap: 12px; }
  /* Тривоги: картки у два стовпці, перегляд і тест — на всю ширину */
  body.desktop-platform #channel-modal .modal-tab-panel[data-panel="alerts"].active { display: block; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > .settings-card { margin: 0 !important; }
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > .alert-preview,
  body.desktop-platform #channel-modal [data-role="alerts-config-block"] > [data-role="alerts-save-status"] { grid-column: 1 / -1; }
}
/* прибрано кольорові смужки зліва, зроблені через inset box-shadow */
#channel-modal [data-role="growth-insight-card"],
#channel-modal .modal-tab-panel[data-panel="main"] > [data-role="growth-insight-card"],
#channel-modal .mp .mp-cards > .settings-card,
#channel-modal .mp .mp-cards > .settings-card.state-accent-on,
#channel-modal .mp .mp-cards > .settings-card.state-accent-off,
#channel-modal [data-role="publish-card"],
#channel-modal [data-role="alert-monitor-card"] { box-shadow: none !important; }
/* Журнал дій: фільтр за учасником */
.audit-actors { margin: 0 0 12px; }
.audit-actor-sel { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 460px; }
.audit-actor-sel > span { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.audit-actor-sel select { flex: 1; min-width: 0; height: 40px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b929b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; font: inherit; font-weight: 700; color: var(--text); }
.audit-actor-sel select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Тех-розділ → Люди: пошук нагорі, поле й кнопка в одному рядку */
.dev-user-search-row { display: flex; gap: 8px; margin: 0 0 12px; }
.dev-user-search-row input { flex: 1; min-width: 0; margin: 0; }
.dev-user-search-row .primary-btn { flex: none; width: auto; margin: 0; padding: 0 20px; }

/* ===== Тех-розділ → E2E-тести ===== */
.e2e .e2e-lbl { margin: 14px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--hint); }
.e2e .e2e-lbl:first-child { margin-top: 0; }
.e2e input[type="text"], .e2e input[type="password"], .e2e select { width: 100%; box-sizing: border-box; }
.e2e .e2e-ta { width: 100%; box-sizing: border-box; min-height: 190px; padding: 11px 12px; border-radius: 14px; resize: vertical; font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text); background: rgba(0,0,0,.25); border: 1px solid var(--card-border); }
.e2e .e2e-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
.e2e .e2e-note code { padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.08); font-size: 11.5px; }
.e2e .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.e2e-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.e2e-chips .pill { height: 30px; padding: 0 12px; font-size: 12.5px; }
.e2e .e2e-run { width: 100%; margin-top: 14px; }
.e2e-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; color: var(--hint); background: rgba(255,255,255,.07); text-transform: none; letter-spacing: 0; }
.e2e-tag.ok { color: #34d399; background: rgba(52,211,153,.12); }
.e2e-tag.warn { color: #fbbf24; background: rgba(251,191,36,.12); }
.e2e-tag.bad { color: #fb7185; background: rgba(251,113,133,.13); }
.e2e-tag.info { color: #60a5fa; background: rgba(96,165,250,.13); }
.e2e-acc { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--card-border); }
.e2e-acc > div { flex: 1; min-width: 0; }
.e2e-acc b, .e2e-run b { display: block; font-size: 14px; }
.e2e-acc small, .e2e-run small { display: block; color: var(--hint); font-size: 12px; }
.e2e-acc .pill { height: 30px; padding: 0 12px; font-size: 12.5px; }
.e2e-term-wrap { position: relative; }
.e2e-stop { position: absolute; top: 10px; right: 10px; z-index: 2; height: 30px; padding: 0 12px; font-size: 12.5px; }
.e2e-term { height: 340px; overflow: auto; padding: 12px 14px; border-radius: 16px; background: #090b0d; border: 1px solid var(--card-border); color: #cfd5da; font: 12px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; -webkit-overflow-scrolling: touch; }
.e2e-l { display: grid; grid-template-columns: 62px 44px minmax(0, 1fr); gap: 8px; white-space: pre-wrap; word-break: break-word; }
.e2e-l time { color: #5d646d; }
.e2e-l b { font-weight: 700; }
.e2e-l.info b { color: #6aa5ff; } .e2e-l.success b { color: #34d3a1; } .e2e-l.warning b { color: #f2b441; } .e2e-l.error b { color: #ff6b81; }
.e2e-l.error span { color: #ffb4bf; }
.e2e-l span i { margin-left: 8px; font-style: normal; color: #5d646d; }
.e2e-runs { padding: 4px 0; }
.e2e-run { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--card-border); cursor: pointer; }
.e2e-run:last-child { border-bottom: 0; }
.e2e-run.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.e2e-bugs { font-size: 12px; font-weight: 700; color: var(--hint); font-variant-numeric: tabular-nums; }
.e2e-bugs.bad { color: #fb7185; }
@media (min-width: 1100px) { body.desktop-platform .e2e { max-width: 920px; } .e2e-term { height: 420px; } }
.e2e .pill.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.e2e .pill.primary:disabled { opacity: .45; }

.e2e-adv { margin: 12px 0 0; }
.e2e-adv summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--hint); list-style: none; }
.e2e-adv summary::before { content: '+ '; }
.e2e-adv[open] summary::before { content: '− '; }

.e2e-status { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--hint); background: rgba(255,255,255,.06); }
.e2e-status.bad { color: #fb7185; background: rgba(251,113,133,.12); }
.e2e-status.ok { color: #34d399; background: rgba(52,211,153,.12); }
.e2e-status.info { color: #60a5fa; background: rgba(96,165,250,.12); }
.e2e-status[hidden] { display: none; }

.e2e-qr { display: grid; place-items: center; margin: 12px 0 0; padding: 14px; border-radius: 18px; background: #fff; max-width: 280px; }
.e2e-qr svg { width: 100%; height: auto; display: block; }

.e2e-chk { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hint); }
.e2e-chk input { margin-top: 2px; flex: none; }

/* ===== E2E: новий інтерфейс (картки кроків, двоколонковий макет на ПК) ===== */
.e2e .e2e-grid { display: block; }
.e2e .e2e-lbl .e2e-cnt { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0; background: rgba(255,255,255,.09); color: var(--text); }
.e2e-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.e2e-row2 > div > .e2e-lbl { margin-top: 0; }
.e2e-steps { display: flex; flex-direction: column; gap: 8px; }
.e2e-step { padding: 10px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--card-border); }
.e2e-step-h { display: flex; align-items: center; gap: 8px; }
.e2e-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.e2e-type { flex: 1; min-width: 0; font-weight: 700; }
.e2e-step-a { display: flex; gap: 4px; flex: none; }
.e2e-step-a button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--card-border); background: rgba(255,255,255,.05); color: var(--hint); cursor: pointer; transition: background .15s, color .15s, transform .12s; }
.e2e-step-a button svg { width: 15px; height: 15px; }
.e2e-step-a button:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,.1); }
.e2e-step-a button:active:not(:disabled) { transform: scale(.94); }
.e2e-step-a button:disabled { opacity: .3; cursor: default; }
.e2e-step-a button.bad:hover:not(:disabled) { color: #fb7185; }
.e2e-hint { margin: 8px 2px 0; font-size: 12px; color: var(--hint); line-height: 1.4; }
.e2e-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; }
.e2e-f { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.e2e-f label { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--hint); }
.e2e-f input[type="text"], .e2e-f input[type="number"], .e2e-f select { width: 100%; box-sizing: border-box; height: 38px; }
.e2e-f:first-child:not(.e2e-f-b) { grid-column: 1 / -1; }
.e2e-f-b { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; min-height: 38px; }
.e2e-f-b label { font-size: 12.5px; letter-spacing: 0; color: var(--text); font-weight: 600; }
.e2e-sw { position: relative; flex: none; width: 42px; height: 24px; }
.e2e-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.e2e-sw span { position: absolute; inset: 0; border-radius: 999px; background: rgba(120,120,128,.4); transition: background .2s; }
.e2e-sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.3,.9,.3,1); }
.e2e-sw input:checked + span { background: var(--accent); }
.e2e-sw input:checked + span::after { transform: translateX(18px); }
.e2e-sw input:focus-visible + span { outline: 2px solid var(--accent-2, var(--accent)); outline-offset: 2px; }
.e2e-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.e2e-add select { flex: 1 1 220px; min-width: 0; }
.e2e-add .pill { display: inline-flex; align-items: center; gap: 6px; }
.e2e-add .pill svg { width: 15px; height: 15px; }
.e2e-runbar .e2e-run { width: 100%; margin-top: 12px; height: 46px; }
.e2e-runbar select { width: 100%; }
@media (min-width: 1100px) {
  body.desktop-platform .e2e { max-width: none; }
  body.desktop-platform .e2e .e2e-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
  body.desktop-platform .e2e .e2e-sticky { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 24px); overflow: auto; scrollbar-width: none; }
  body.desktop-platform .e2e .e2e-term { height: 360px; }
}
@media (max-width: 520px) { .e2e-fields, .e2e-row2 { grid-template-columns: minmax(0, 1fr); } }
/* власне меню типу кроку: прокрутка завжди працює */
.e2e-pk { position: relative; flex: 1; min-width: 0; }
.e2e-pk-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255,255,255,.055); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.e2e-pk-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2e-pk-b svg { flex: none; width: 15px; height: 15px; color: var(--hint); }
.e2e-pk-b:hover { border-color: var(--accent); }
.e2e-pk-m { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; border-radius: 16px; background: var(--bg, #0b0a14); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 50px -12px rgba(0,0,0,.8); }
.e2e-pk-m[hidden] { display: none; }
.e2e-pk-m.up { top: auto; bottom: calc(100% + 6px); }
.e2e-pk-g { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--hint); }
.e2e-pk-o { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.e2e-pk-o small { font-size: 11.5px; color: var(--hint); line-height: 1.3; }
.e2e-pk-o:hover, .e2e-pk-o:focus-visible { background: rgba(255,255,255,.07); }
.e2e-pk-o.on { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.e2e-add .e2e-pk { flex: 1 1 240px; }
/* плашка «нова версія» */
#ver-bar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 99998; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--text); background: var(--card-solid, #1b1730); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 18px 40px -14px rgba(0,0,0,.7); animation: verIn .3s ease-out; }
#ver-bar button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
@keyframes verIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.e2e-json { margin-top: 12px; }
.e2e-json summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--hint); }
.e2e-json summary::-webkit-details-marker { display: none; }
.e2e-json summary svg { width: 15px; height: 15px; }
.e2e-json[open] summary { margin-bottom: 8px; }

/* звіт E2E */
.e2e-rep-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.e2e-rep-sum > div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); }
.e2e-rep-sum b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.e2e-rep-sum small { font-size: 11.5px; color: var(--hint); }
.e2e-rep-sum .bad b { color: #fb7185; }
.e2e-bugs-l { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: bg; }
.e2e-bugs-l li { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: rgba(251,113,133,.09); border: 1px solid rgba(251,113,133,.25); overflow-wrap: anywhere; }
.e2e-rep-ch { display: flex; flex-direction: column; gap: 6px; }
.e2e-rep-ch > div { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.04); }
.e2e-rep-ch b { display: block; font-size: 13.5px; }
.e2e-rep-ch small { display: block; font-size: 12px; color: var(--hint); }
/* ===== компактний перелік кроків: рядки, групи-цикли ===== */
.e2e-tools { display: flex; gap: 8px; margin: 0 0 8px; }
.e2e-tools .pill { height: 30px; padding: 0 12px; font-size: 12.5px; }
.e2e-groups { display: flex; flex-direction: column; gap: 8px; }
.e2e-g { border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--card-border); overflow: hidden; }
.e2e-g.open { background: rgba(255,255,255,.05); }
.e2e-g-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.e2e-g-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2e-cnt { flex: none; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--hint); background: rgba(255,255,255,.09); }
.e2e-g .e2e-steps { padding: 0 8px 8px; gap: 4px; }
.e2e-r { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid transparent; }
.e2e-steps > .e2e-r { border-color: var(--card-border); }
.e2e-r.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border)); background: rgba(255,255,255,.06); }
.e2e-r-h { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; min-height: 42px; }
.e2e-r .e2e-n { width: 22px; height: 22px; font-size: 11.5px; border-radius: 7px; }
.e2e-r-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; padding: 4px 2px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.e2e-r-t b { flex: none; max-width: 62%; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2e-r-t small { flex: 1; min-width: 0; font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e2e-r-chev { flex: none; display: grid; place-items: center; width: 18px; color: var(--hint); transition: transform .2s; }
.e2e-r-chev svg { width: 15px; height: 15px; }
.e2e-r.open > .e2e-r-h .e2e-r-chev, .e2e-g.open > .e2e-g-h .e2e-r-chev { transform: rotate(180deg); }
.e2e-r .e2e-step-a { opacity: 0; transition: opacity .15s; }
.e2e-r:hover .e2e-step-a, .e2e-r.open .e2e-step-a, .e2e-r:focus-within .e2e-step-a { opacity: 1; }
@media (hover: none) { .e2e-r .e2e-step-a { opacity: 1; } .e2e-r .e2e-step-a button:nth-child(-n+3) { display: none; } .e2e-r.open .e2e-step-a button { display: grid; } }
.e2e-r .e2e-step-a button { width: 26px; height: 26px; border-radius: 8px; }
.e2e-r-body { padding: 4px 10px 12px; }
.e2e-r-type { margin: 4px 0 2px; }
.e2e-r-type .e2e-pk { flex: none; width: 100%; }
/* ===== E2E: акаунти й вхід (чіткий вигляд) ===== */
.e2e .e2e-acc { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
.e2e-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.e2e .e2e-acc small { display: block; margin-top: 1px; color: var(--hint); font-size: 12.5px; }
.e2e-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255,255,255,.05); color: var(--hint); cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.e2e-x svg { width: 15px; height: 15px; }
.e2e-x:hover { color: #fb7185; border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.1); }
.e2e-empty { display: flex; flex-direction: column; gap: 3px; padding: 4px 0 2px; }
.e2e-empty b { font-size: 14px; }
.e2e-empty span { font-size: 12.5px; color: var(--hint); line-height: 1.45; }
.e2e-addacc { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 12px; height: 42px; border-style: dashed; }
.e2e-addacc svg { width: 15px; height: 15px; }
.e2e .e2e-acc + #e2e-login .e2e-lg, .e2e-lg { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.e2e-lg-steps { display: flex; gap: 6px; margin: 0 0 14px; }
.e2e-lg-steps span { flex: 1; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--hint); background: rgba(255,255,255,.04); }
.e2e-lg-steps i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; background: rgba(255,255,255,.1); }
.e2e-lg-steps .on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.e2e-lg-steps .on i { color: #fff; background: var(--accent); }
.e2e-lg-steps .done i { color: #fff; background: #34d399; }
.e2e-tabs { display: flex; gap: 4px; padding: 3px; margin: 0 0 4px; border-radius: 12px; background: rgba(255,255,255,.05); }
.e2e-tabs button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: none; color: var(--hint); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s, color .15s; }
.e2e-tabs button.on { color: var(--text); background: rgba(255,255,255,.12); }
.e2e-phone-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px; }
.e2e-phone-row .e2e-lbl { margin-top: 14px; }
.e2e-phone-row select, .e2e-phone-row input { width: 100%; box-sizing: border-box; height: 42px; }
.e2e-lg .e2e-lbl { margin-top: 14px; }
.e2e-lg input[type="text"], .e2e-lg input[type="password"] { width: 100%; box-sizing: border-box; height: 42px; }
.e2e-adv { margin: 14px 0 0; padding: 0; }
.e2e-adv summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--hint); list-style: none; }
.e2e-adv summary::-webkit-details-marker { display: none; }
.e2e-adv summary::before { content: "+"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; font-size: 14px; background: rgba(255,255,255,.08); }
.e2e-adv[open] summary::before { content: "−"; }
.e2e-lg .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.e2e-lg .pill { height: 42px; }
.e2e-wide { flex: 1 1 160px; justify-content: center; }
.e2e .pill.ghost { background: none; color: var(--hint); }
.e2e-code { text-align: center; font: 700 26px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; letter-spacing: .5em; height: 56px !important; padding-left: .5em !important; }
.e2e-qr-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.e2e-qr-wrap .e2e-qr { margin: 0; flex: none; width: 210px; }
.e2e-qr-steps { flex: 1 1 180px; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--hint); }
.e2e-qr-steps b { color: var(--text); }
.e2e-status { margin: 0 0 12px; }
/* ===== Зміна пароля Тех.розділу ===== */
.pwm { max-width: 460px; width: calc(100vw - 32px); padding: 22px 22px 20px; }
.pwm-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.pwm-head > div { flex: 1; min-width: 0; }
.pwm-head b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.pwm-head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--hint); line-height: 1.35; }
.pwm-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); }
.pwm-ico svg { width: 22px; height: 22px; }
.pwm-f { display: block; margin: 0 0 12px; }
.pwm-f > span { display: block; margin: 0 0 6px 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); }
.pwm-in { position: relative; }
.pwm-in input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 48px 0 14px; border-radius: 14px; font-size: 16px; margin: 0; }
.pwm-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--hint); cursor: pointer; }
.pwm-eye svg { width: 18px; height: 18px; }
.pwm-eye:hover, .pwm-eye.on { color: var(--text); background: rgba(255,255,255,.08); }
.pwm-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); }
.pwm-meter { display: flex; gap: 5px; margin: -2px 0 6px; }
.pwm-meter i { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.1); transition: background .2s; }
.pwm-meter i.on.s1 { background: #fb7185; } .pwm-meter i.on.s2 { background: #fbbf24; } .pwm-meter i.on.s3 { background: #a3e635; } .pwm-meter i.on.s4 { background: #34d399; }
.pwm-meter-t { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 14px; font-size: 12px; }
.pwm-meter-t span { font-weight: 800; white-space: nowrap; }
.pwm-meter-t small { color: var(--hint); text-align: right; line-height: 1.3; }
.pwm-hint { min-height: 18px; margin: 0 0 12px 2px; font-size: 13px; font-weight: 700; }
.pwm-hint.bad { color: #fb7185; } .pwm-hint.ok { color: #34d399; }
.pwm-actions { display: flex; gap: 10px; }
.pwm-actions .pill { flex: 1; height: 46px; justify-content: center; }
.pwm-actions .pill.primary { flex: 1.6; }
.pwm-actions .pill:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) { .pwm-meter-t small { display: none; } }
/* ===== E2E: AI-стиль постів ===== */
.e2e-ai textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 14px; font: inherit; font-size: 14px; line-height: 1.45; color: var(--text); background: rgba(0,0,0,.22); border: 1px solid var(--card-border); resize: vertical; }
.e2e-ai .e2e-ta { font: inherit; font-size: 14px; min-height: 0; }
.e2e-ai input[type="text"] { width: 100%; box-sizing: border-box; height: 42px; }
/* ===== AI-стиль: чіткий вигляд (виправлено кнопки, шрифти, відступи) ===== */
.e2e-ai { padding: 16px; }
.e2e-ai .e2e-lbl { margin: 16px 0 6px; }
.e2e-ai .e2e-row2 { align-items: end; }
.e2e-ai .e2e-row2 + .e2e-row2 { margin-top: 2px; }
.e2e-ai textarea, .e2e-ai input[type="text"] { font-weight: 500; font-size: 14px; letter-spacing: 0; }
.e2e-ai textarea { padding: 11px 13px; min-height: 0; line-height: 1.5; }
.e2e-ai textarea:focus, .e2e-ai input[type="text"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.e2e-ai .pill { height: 42px; padding: 0 16px; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.e2e-ai .pill svg { width: 16px !important; height: 16px !important; flex: none; }
.e2e-ai .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.e2e-ai .pill-row .pill { flex: 1 1 auto; }
.e2e-ai .pill.primary { flex: 1.4 1 auto; }
.e2e-ai .e2e-cnt { margin-left: 8px; }
.e2e-qr { display: block; padding: 10px; }
.e2e-qr img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; border-radius: 8px; }

.dch-go{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,.12));background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}.dch-go svg{width:16px;height:16px}.dch-go:hover{background:rgba(255,255,255,.08)}.settings-card-header.clickable{cursor:pointer}.dch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}.dch-tools .pill{display:inline-flex;align-items:center;gap:6px}.dch-tools .pill svg{width:14px;height:14px}.dch-note{font-size:12px;opacity:.65}
.e2e-accsel{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}.e2e-accsel .e2e-chk{margin:0}.e2e-accsel small{opacity:.6;margin-left:4px}
.e2e-hist-h{display:flex;align-items:center;justify-content:space-between;gap:10px}.e2e-clear{font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,90,90,.35);background:rgba(255,90,90,.1);color:#ff8a8a;cursor:pointer}.e2e-clear:hover{background:rgba(255,90,90,.2)}
.e2e-term-wrap{display:flex;flex-direction:column}.e2e-stop{position:static;align-self:flex-end;margin:0 0 8px}
.e2e-acs{display:flex;flex-direction:column;gap:8px;margin:8px 0 6px}
.e2e-ac{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);cursor:pointer;transition:background .18s,border-color .18s,transform .12s}
.e2e-ac:hover{background:rgba(255,255,255,.06)}
.e2e-ac:active{transform:scale(.985)}
.e2e-ac input{position:absolute;opacity:0;pointer-events:none}
.e2e-ac.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.e2e-ac:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.e2e-ac-t{display:flex;flex-direction:column;min-width:0;flex:1}
.e2e-ac-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e2e-ac-t small{font-size:12.5px;opacity:.6;font-variant-numeric:tabular-nums}
.e2e-ac-ck{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.22);color:transparent;transition:background .18s,border-color .18s,color .18s}
.e2e-ac-ck svg{width:14px;height:14px}
.e2e-ac.on .e2e-ac-ck{background:var(--accent);border-color:var(--accent);color:#fff}
.e2e-ac-sum{margin:2px 2px 10px}
.e2e-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-top:1px solid rgba(255,255,255,.07)}
.e2e-opt b{display:block;font-size:14.5px}
.e2e-opt small{display:block;font-size:12.5px;opacity:.6;margin-top:2px;line-height:1.35}
.e2e-runbar .e2e-run{margin-top:6px}
.e2e-term:has(.e2e-term-empty){height:auto;min-height:230px;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 0%,rgba(139,92,246,.10),transparent 60%),#090b0d}
.e2e-term-empty,.e2e-hist-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:300px;margin:0 auto;font-family:inherit}
.e2e-term-empty svg,.e2e-hist-empty svg{width:34px;height:34px;padding:9px;box-sizing:content-box;border-radius:14px;color:var(--accent-2,#b79cff);background:rgba(139,92,246,.14);margin-bottom:4px}
.e2e-term-empty b,.e2e-hist-empty b{font-size:15px;color:var(--text,#fff);font-weight:700}
.e2e-term-empty span,.e2e-hist-empty span{font-size:12.5px;line-height:1.5;color:var(--hint,#9aa0aa)}
.e2e-hist-empty{padding:22px 14px}
.e2e-runs:has(.e2e-hist-empty){padding:0}

/* ===== Зберігання новин у стрічці: діалог і підказка над списком ===== */
.qt-sheet{max-height:92vh;max-height:92dvh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.qt-head{display:flex;align-items:center;gap:12px}
.qt-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--accent,#a855f7),var(--accent-deep,var(--accent-2,#7c3aed)));box-shadow:0 6px 16px color-mix(in srgb,var(--accent,#a855f7) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.qt-ico svg{width:22px;height:22px}
.qt-hd{flex:1;min-width:0}
.qt-title{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.qt-sub{font-size:12.5px;color:var(--hint);margin-top:2px}
.qt-x{flex:none;width:36px;height:36px;border-radius:12px;border:1px solid var(--card-border,rgba(255,255,255,.1));background:rgba(255,255,255,.05);color:inherit;display:grid;place-items:center;cursor:pointer}
.qt-x svg{width:17px;height:17px}
.qt-val{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 0;text-align:center}
.qt-val b{font-size:52px;line-height:1;font-weight:850;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.qt-val span{font-size:13px;color:var(--hint)}
.qt-slider{position:relative;padding:14px 4px 32px}
.qt-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;margin:0;border-radius:99px;outline:0;cursor:pointer;background:linear-gradient(90deg,var(--accent,#a855f7) var(--pct,0%),rgba(255,255,255,.1) var(--pct,0%))}
.qt-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#a855f7) 35%,transparent),0 4px 12px rgba(0,0,0,.4)}
.qt-range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#a855f7) 35%,transparent),0 4px 12px rgba(0,0,0,.4)}
.qt-range:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#a855f7) 50%,transparent)}
.qt-ticks{position:absolute;left:19px;right:19px;top:34px;height:20px;pointer-events:none}
.qt-ticks i{position:absolute;top:0;width:1px;height:6px;background:rgba(255,255,255,.28)}
.qt-ticks em{position:absolute;top:9px;left:0;transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--hint);white-space:nowrap}
.qt-lab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint);margin-bottom:-6px}
.qt-chips{display:flex;flex-wrap:wrap;gap:8px}
.qt-chip{height:38px;padding:0 15px;border-radius:12px;border:1px solid var(--card-border,rgba(255,255,255,.12));background:rgba(255,255,255,.04);color:inherit;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .15s,border-color .15s}
.qt-chip.on{background:color-mix(in srgb,var(--accent,#a855f7) 24%,transparent);border-color:var(--accent,#a855f7);color:#fff}
.qt-chip.ghost{border-style:dashed;color:var(--hint)}
.qt-impact{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--card-border,rgba(255,255,255,.1));display:flex;flex-direction:column;gap:10px}
.qt-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.qt-bar i{display:block;height:100%;transition:width .2s}
.qt-bar i.k{background:#34d399}.qt-bar i.h{background:#f59e0b}
.qt-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--hint)}
.qt-leg b{font-size:15px;color:var(--text,#fff);font-variant-numeric:tabular-nums}
.qt-leg .k b{color:#34d399}.qt-leg .h b{color:#f59e0b}.qt-leg .b b{color:#60a5fa}
.qt-empty{font-size:13px;line-height:1.45;color:var(--hint)}
.qt-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--hint)}
.qt-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:2px}
.qt-btn{height:50px;border-radius:16px;border:1px solid var(--card-border,rgba(255,255,255,.12));background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:15.5px;font-weight:750;cursor:pointer}
.qt-btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--accent,#a855f7),var(--accent-deep,var(--accent-2,#7c3aed)));box-shadow:0 8px 20px color-mix(in srgb,var(--accent,#a855f7) 38%,transparent)}
.qt-btn:disabled{opacity:.5;box-shadow:none;cursor:default}
@media (min-width:700px){.qt-sheet{max-width:520px;margin:auto}}
/* підказка про приховані новини над списком і відлік на картці */
.queue-ttl-note{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);font-size:13px;line-height:1.35}
.queue-ttl-note .qtn-ic{flex:none;color:#f59e0b;display:grid}
.queue-ttl-note .qtn-t{flex:1;min-width:0}
.queue-ttl-note .qtn-b{flex:none;height:30px;padding:0 13px;border-radius:10px;border:0;background:#f59e0b;color:#1b1000;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.queue-time-row.q-ttl-row{color:var(--hint)}
.queue-time-row.q-ttl-row.soon{color:#f59e0b}
@media (prefers-reduced-motion:reduce){.qt-bar i,.qt-chip{transition:none}}
.qt-ticks i:first-child em{transform:none;left:-6px}.qt-ticks i:last-child em{transform:translateX(-100%);left:6px}

/* ===== Rabyra: заставка в кольорах бренду (синє й жовте), лого-кролик ===== */
#splash-screen{background:radial-gradient(80% 66% at 50% 42%,#0c2a58 0%,#08142a 56%,#03060f 100%)}
#splash-screen .splash-grid{opacity:.22}
#splash-screen .blob-1{background:radial-gradient(circle,#0a6cff 0%,transparent 70%);opacity:.5}
#splash-screen .blob-2{background:radial-gradient(circle,#ffd800 0%,transparent 70%);opacity:.28}
#splash-screen .blob-3{background:radial-gradient(circle,#2f8bff 0%,transparent 70%);opacity:.34}
#splash-screen .splash-overlay{background:radial-gradient(70% 56% at 50% 44%,transparent 0%,rgba(2,4,10,.6) 100%)}
#splash-screen .splash-flow circle,#splash-screen .splash-flow path,#splash-screen .splash-flow line{stroke:rgba(47,139,255,.4)!important}
#splash-screen .splash-flow rect{fill:rgba(10,108,255,.12)!important;stroke:rgba(47,139,255,.45)!important}
.splash-logo{width:min(46vw,200px);height:min(46vw,200px);filter:drop-shadow(0 0 28px rgba(10,108,255,.6)) drop-shadow(0 0 70px rgba(255,216,0,.16))}
.splash-progress-bar{background:linear-gradient(90deg,#0a6cff 0%,#0a6cff 55%,#ffd800 100%);box-shadow:0 0 12px rgba(10,108,255,.55)}
.splash-percent,body:not(.desktop-platform) .splash-percent{color:#ffd800}
.splash-status{color:#9db4d6}

/* Телефон: бейдж «ТЕСТОВА ПАНЕЛЬ» компактною плашкою під системним рядком статусу, а не смугою на всю ширину поверх годинника й зв'язку */
body:not(.desktop-platform) #beta-banner{font-size:0!important;left:50%!important;right:auto!important;width:auto!important;transform:translateX(-50%);top:calc(var(--tg-safe-area-inset-top,0px) + 3px)!important;padding:4px 11px!important;border-radius:99px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.4);white-space:nowrap}
body:not(.desktop-platform) #beta-banner::before{content:"ТЕСТОВА ПАНЕЛЬ";font:800 10px/1 -apple-system,system-ui,sans-serif;letter-spacing:.1em}

/* Верхня смуга: суцільна лише під системним рядком статусу, а під кнопками Telegram («Закрити», «…») плавно розчиняється,
   щоб не різати вміст жорстким прямокутником (аватар на початку сторінки більше не обрізається) */
body:not(.desktop-platform)::before {
  height: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  background: linear-gradient(to bottom,
    var(--bg, #0b0a14) 0,
    var(--bg, #0b0a14) calc(var(--tg-safe-area-inset-top, 0px) * 0.92),
    color-mix(in srgb, var(--bg, #0b0a14) 72%, transparent) calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) * 0.35),
    color-mix(in srgb, var(--bg, #0b0a14) 0%, transparent) 100%);
}

/* ===== Телефон: нижня навігація в стилі соцмереж: лише іконки, плоска панель, велика кнопка «+» по центру, червоні крапки замість лічильників ===== */
.nav-compose{display:none}
body:not(.desktop-platform) .bottom-nav{
  left:0;right:0;bottom:0;max-width:none;margin:0;width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:2px;
  padding:8px 8px calc(8px + max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px)));
  border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.08);
  background:var(--bg,#0b0a14);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body:not(.desktop-platform) .bottom-nav::before,body:not(.desktop-platform) .bottom-nav::after{display:none}
body:not(.desktop-platform) .bottom-nav .nav-btn{flex:1 1 0;height:50px;border-radius:14px;gap:0;color:#767683;display:grid;place-items:center}
body:not(.desktop-platform) .bottom-nav .nav-btn>span:not(.nav-primary-ico):not(.nbadge){display:none}
body:not(.desktop-platform) .bottom-nav .nav-btn .icon{width:28px;height:28px;stroke-width:1.65;filter:none;transform:none;color:inherit}
body:not(.desktop-platform) .bottom-nav .nav-btn.active{color:#fff}
body:not(.desktop-platform) .bottom-nav .nav-btn.active .icon{color:#fff;transform:none;filter:none;stroke-width:2.1}
body:not(.desktop-platform) .bottom-nav .nav-compose{display:grid;place-items:center;flex:none;width:66px;height:46px;margin:0 4px;border:0;border-radius:15px;background:#1f1f27;color:#a9a9b6;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .15s}
body:not(.desktop-platform) .bottom-nav .nav-compose svg{width:26px;height:26px}
body:not(.desktop-platform) .bottom-nav .nav-compose:active{transform:scale(.94);background:#2a2a35}
/* червона крапка замість числа на значку */
body:not(.desktop-platform) .bottom-nav .nbadge{top:7px;left:calc(50% + 7px);width:11px;height:11px;min-width:0;padding:0;border-radius:50%;background:#ff1744;box-shadow:0 0 0 2px var(--bg,#0b0a14);font-size:0}
body:not(.desktop-platform) .bottom-nav .nbadge .nb-num{display:none}
body:not(.desktop-platform) .bottom-nav .nbadge .nb-ring{display:none}
/* аватар у пункті «Ще» */
body:not(.desktop-platform) .bottom-nav .nav-btn .nav-av{display:none;width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
body:not(.desktop-platform) .bottom-nav .nav-btn .has-av>svg{display:none}
body:not(.desktop-platform) .bottom-nav .nav-btn .has-av .nav-av{display:block}
body:not(.desktop-platform) .bottom-nav .nav-btn.active .has-av .nav-av{box-shadow:0 0 0 2px #fff}

/* ===== Телефон: вкладка «Контент» без зайвого: вкладки-підкреслення, плоскі чипи, «⋯» у рядку чипів; кнопки «Написати новину» нема («+» у нижній навігації) ===== */
body:not(.desktop-platform) #content-segmented{display:flex!important;gap:0!important;padding:0!important;margin:0 -2px!important;background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;box-shadow:none!important}
body:not(.desktop-platform) #content-segmented .segment{flex:1 1 0;position:relative;display:flex;align-items:center;justify-content:center;gap:0;height:48px;padding:0;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#777784!important;font-size:15.5px;font-weight:700;letter-spacing:-.005em}
body:not(.desktop-platform) #content-segmented .segment svg{display:none!important}
body:not(.desktop-platform) #content-segmented .segment.active{color:#fff!important}
body:not(.desktop-platform) #content-segmented .segment.active::after{content:"";position:absolute;left:24%;right:24%;bottom:-1px;height:2px;border-radius:2px;background:#fff}
body:not(.desktop-platform) #content-segmented .segment .nbadge{position:absolute!important;top:11px!important;left:calc(50% + 34px)!important;right:auto!important;width:9px!important;height:9px!important;min-width:0!important;padding:0!important;border-radius:50%!important;background:#ff1744!important;font-size:0!important;box-shadow:none!important}
body:not(.desktop-platform) #content-segmented .segment .nbadge .nb-num,body:not(.desktop-platform) #content-segmented .segment .nbadge .nb-ring{display:none!important}
body:not(.desktop-platform) #content-panel-queue{margin-top:4px!important}
body:not(.desktop-platform) #content-panel-queue .queue-actions{display:none!important}
body:not(.desktop-platform) .queue-panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:12px 0 10px!important;backdrop-filter:none!important}
body:not(.desktop-platform) .queue-bar{display:none!important}
body:not(.desktop-platform) .queue-chiprow{display:flex!important;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px!important;margin:0 -2px;background:none!important;border:0!important}
body:not(.desktop-platform) .queue-chiprow::-webkit-scrollbar{display:none}
body:not(.desktop-platform) .queue-chiprow .queue-sort,body:not(.desktop-platform) .queue-chiprow .queue-filter{display:contents!important}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab,body:not(.desktop-platform) .queue-chiprow .qf-chip{flex:none!important;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px!important;border:0!important;border-radius:99px!important;background:#1b1b22!important;color:#9d9daa!important;font:inherit;font-size:14px;font-weight:650;box-shadow:none!important;white-space:nowrap}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab .icon{display:none}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab::after{display:none!important}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab.active,body:not(.desktop-platform) .queue-chiprow .qf-chip.active{background:#fff!important;color:#0b0a14!important}
body:not(.desktop-platform) .queue-chiprow .qf-chip{height:32px;font-size:13px;background:transparent!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
body:not(.desktop-platform) .queue-chiprow .qf-chip.active{box-shadow:none!important}
body:not(.desktop-platform) .queue-chiprow .qf-chip .qf-n{font-family:ui-monospace,Menlo,monospace;font-size:12px;opacity:.7}
body:not(.desktop-platform) .queue-chiprow .queue-filter:not([hidden])::before{content:"";flex:none;width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 2px}
body:not(.desktop-platform) .queue-more-btn{flex:none;margin-left:auto;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:#1b1b22;color:#c9c9d4;cursor:pointer;position:sticky;right:0}
body:not(.desktop-platform) .queue-more-btn{position:static!important;margin-left:4px}body:not(.desktop-platform) #content-segmented .segment .nbadge{left:calc(50% + 26px)!important}

/* ===== Телефон: той самий плоский стиль на «Джерела», у меню «⋯» та порожньому стані ===== */
body:not(.desktop-platform) #src-tabs{display:flex!important;gap:0!important;padding:0!important;margin:0 -2px 12px!important;background:none!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;border-radius:0!important;box-shadow:none!important}
body:not(.desktop-platform) #src-tabs button{flex:1 1 0;position:relative;height:46px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#777784!important;font:inherit;font-size:15px;font-weight:700}
body:not(.desktop-platform) #src-tabs button.on{color:#fff!important}
body:not(.desktop-platform) #src-tabs button.on::after{content:"";position:absolute;left:16%;right:16%;bottom:-1px;height:2px;border-radius:2px;background:#fff}
body:not(.desktop-platform) #src-tabs em{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:12px;opacity:.55;background:none!important;color:inherit!important;padding:0!important}
body:not(.desktop-platform) .rec-admin,body:not(.desktop-platform) .sm-add{background:#1b1b22!important;border:0!important;border-radius:14px!important;box-shadow:none!important;color:#ececf2!important}
body:not(.desktop-platform) .rec-admin i{color:#8d8d9a!important;opacity:1!important}
body:not(.desktop-platform) .sm-add-ico{background:#fff!important;color:#0b0a14!important;border-radius:10px!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources input[type="text"],body:not(.desktop-platform) #content-panel-sources input[type="search"],body:not(.desktop-platform) #content-panel-readers input[type="text"],body:not(.desktop-platform) #content-panel-readers input[type="search"]{background:#1b1b22!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources .search-input-wrap,body:not(.desktop-platform) #content-panel-sources .rec-search{background:#1b1b22!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
body:not(.desktop-platform) .sm-chips button,body:not(.desktop-platform) .sm-view button,body:not(.desktop-platform) #content-panel-sources .chip-action-btn,body:not(.desktop-platform) #content-panel-readers .chip-action-btn{background:#1b1b22!important;border:0!important;border-radius:99px!important;box-shadow:none!important;color:#9d9daa!important}
body:not(.desktop-platform) .sm-chips button.on,body:not(.desktop-platform) .sm-chips button.active,body:not(.desktop-platform) .sm-view button.on,body:not(.desktop-platform) .sm-view button.active{background:#fff!important;color:#0b0a14!important}
body:not(.desktop-platform) .sources-tile-grid .source-tile,body:not(.desktop-platform) #content-panel-sources .settings-card{background:#14141a!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:16px!important;box-shadow:none!important;backdrop-filter:none!important}
body:not(.desktop-platform) #content-panel-sources .section-label{color:#8d8d9a;letter-spacing:.1em;font-size:11.5px}
/* меню «⋯» */
body:not(.desktop-platform) .qm-pop{background:#1b1b22!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;box-shadow:0 18px 40px rgba(0,0,0,.65)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:not(.desktop-platform) .qm-pop .qm-row{color:#ececf2;border-radius:10px}
body:not(.desktop-platform) .qm-pop .qm-row.danger{color:#ff6b6b}
body:not(.desktop-platform) .qm-pop .qm-row:active{background:rgba(255,255,255,.07)}
/* порожній стан стрічки */
body:not(.desktop-platform) .queue-empty.qe2{background:#111116!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:18px!important;box-shadow:none!important}
body:not(.desktop-platform) .qe2-core{background:#1b1b22!important;color:#fff!important;box-shadow:none!important}
body:not(.desktop-platform) .qe2-ring{border-color:rgba(255,255,255,.12)!important;background:none!important}
body:not(.desktop-platform) .qe2-chip,body:not(.desktop-platform) .qe2-btn,body:not(.desktop-platform) .qe2-how{background:#1b1b22!important;border:0!important;box-shadow:none!important;color:#d6d6e0!important}
body:not(.desktop-platform) .qe2-chip.live{color:#41d9a0!important}

/* ===== Заставка в мінімалістичному стилі: рівний фон, іконка застосунку по центру, тонка смужка завантаження ===== */
#splash-screen{background:#0b0b10!important;gap:22px!important}
#splash-screen .splash-grid,#splash-screen .maintenance-blob,#splash-screen .splash-flow,#splash-screen .splash-overlay,#splash-screen .splash-status,#splash-screen .splash-percent,#splash-screen .splash-footer{display:none!important}
#splash-screen .splash-logo{width:112px!important;height:112px!important;border-radius:26px;object-fit:contain;filter:none!important;animation:splashIn .5s cubic-bezier(.22,1,.36,1) both!important;box-shadow:0 14px 40px rgba(0,0,0,.5)}
#splash-screen .splash-progress-track{width:112px!important;height:4px!important;margin:0!important;border-radius:99px;background:rgba(255,255,255,.12)!important}
#splash-screen .splash-progress-bar{background:#fff!important;box-shadow:none!important;border-radius:99px}
#splash-screen .splash-progress-bar::after{display:none!important}
@keyframes splashIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#splash-screen .splash-logo{animation:none!important}}

/* ===== Телефон: оформлення в кольорах теми застосунку (--accent): вкладки, чипи, меню, порожній стан, навігація ===== */
body:not(.desktop-platform){--qa:var(--accent);--qa2:var(--accent-2,var(--accent));--qd:var(--accent-deep,var(--accent));--qg:var(--accent-glow,rgba(168,85,247,.45))}
/* вкладки «Черга / Джерела / Читачі» і «Мої / Каталог / Спільнота» */
body:not(.desktop-platform) #content-segmented,body:not(.desktop-platform) #src-tabs{border-bottom:1px solid color-mix(in srgb,var(--qa) 26%,rgba(255,255,255,.06))!important}
body:not(.desktop-platform) #content-segmented .segment,body:not(.desktop-platform) #src-tabs button{color:color-mix(in srgb,var(--text,#fff) 50%,transparent)!important;transition:color .2s ease}
body:not(.desktop-platform) #content-segmented .segment.active,body:not(.desktop-platform) #src-tabs button.on{color:#fff!important;text-shadow:0 0 18px var(--qg)}
body:not(.desktop-platform) #content-segmented .segment.active::after,body:not(.desktop-platform) #src-tabs button.on::after{height:3px!important;left:18%!important;right:18%!important;bottom:-1.5px!important;border-radius:3px 3px 0 0!important;background:linear-gradient(90deg,var(--qa2),var(--qa))!important;box-shadow:0 0 14px var(--qg)}
body:not(.desktop-platform) #src-tabs em{color:var(--qa2)!important;opacity:.85!important}
/* чипи */
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab,body:not(.desktop-platform) .queue-chiprow .qf-chip,body:not(.desktop-platform) .sm-chips button,body:not(.desktop-platform) .sm-view button,body:not(.desktop-platform) #content-panel-sources .chip-action-btn,body:not(.desktop-platform) #content-panel-readers .chip-action-btn{background:color-mix(in srgb,var(--qa) 9%,rgba(255,255,255,.035))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 24%,rgba(255,255,255,.07))!important;color:color-mix(in srgb,var(--text,#fff) 68%,transparent)!important}
body:not(.desktop-platform) .queue-chiprow .queue-sort-tab.active,body:not(.desktop-platform) .queue-chiprow .qf-chip.active,body:not(.desktop-platform) .sm-chips button.on,body:not(.desktop-platform) .sm-chips button.active,body:not(.desktop-platform) .sm-view button.on,body:not(.desktop-platform) .sm-view button.active{background:linear-gradient(135deg,var(--qa),var(--qd))!important;color:#fff!important;box-shadow:0 6px 16px -4px var(--qg),inset 0 1px 0 rgba(255,255,255,.28)!important}
body:not(.desktop-platform) .queue-chiprow .qf-chip{background:transparent!important}
body:not(.desktop-platform) .queue-chiprow .qf-chip.active{background:linear-gradient(135deg,var(--qa),var(--qd))!important}
body:not(.desktop-platform) .queue-chiprow .queue-filter:not([hidden])::before{background:color-mix(in srgb,var(--qa) 35%,rgba(255,255,255,.1))!important}
body:not(.desktop-platform) .queue-more-btn{background:color-mix(in srgb,var(--qa) 14%,rgba(255,255,255,.04))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 30%,transparent)!important;color:var(--qa2)!important}
/* меню «⋯» */
body:not(.desktop-platform) .qm-pop{background:linear-gradient(180deg,color-mix(in srgb,var(--qa) 10%,rgba(24,20,40,.98)),rgba(14,11,26,.99))!important;border:1px solid color-mix(in srgb,var(--qa) 32%,rgba(255,255,255,.08))!important;box-shadow:0 22px 50px -10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03) inset!important}
body:not(.desktop-platform) .qm-pop .qm-row svg{color:var(--qa2)}
body:not(.desktop-platform) .qm-pop .qm-row.danger svg{color:#ff6b6b}
/* порожній стан стрічки */
body:not(.desktop-platform) .queue-empty.qe2{background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--qa) 22%,transparent),transparent 72%),color-mix(in srgb,var(--qa) 4%,rgba(255,255,255,.025))!important;border:1px solid color-mix(in srgb,var(--qa) 28%,rgba(255,255,255,.07))!important;border-radius:24px!important;box-shadow:0 24px 60px -30px var(--qg)!important}
body:not(.desktop-platform) .qe2-core{background:linear-gradient(145deg,var(--qa2),var(--qd))!important;color:#fff!important;box-shadow:0 10px 30px -6px var(--qg),inset 0 1px 0 rgba(255,255,255,.35)!important}
body:not(.desktop-platform) .qe2-ring{border-color:color-mix(in srgb,var(--qa) 38%,transparent)!important}
body:not(.desktop-platform) .qe2-chip,body:not(.desktop-platform) .qe2-btn,body:not(.desktop-platform) .qe2-how{background:color-mix(in srgb,var(--qa) 9%,rgba(255,255,255,.04))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 24%,rgba(255,255,255,.07))!important;color:var(--text,#fff)!important}
body:not(.desktop-platform) .qe2-chip.live{background:rgba(52,211,153,.12)!important;box-shadow:inset 0 0 0 1px rgba(52,211,153,.4)!important;color:#34d399!important}
/* джерела: кнопки додавання, картки, поля */
body:not(.desktop-platform) .rec-admin,body:not(.desktop-platform) .sm-add{background:linear-gradient(135deg,color-mix(in srgb,var(--qa) 20%,transparent),color-mix(in srgb,var(--qa) 7%,transparent))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 38%,transparent)!important}
body:not(.desktop-platform) .sm-add-ico{background:linear-gradient(145deg,var(--qa2),var(--qd))!important;color:#fff!important;box-shadow:0 6px 16px -4px var(--qg)!important}
body:not(.desktop-platform) .sources-tile-grid .source-tile,body:not(.desktop-platform) #content-panel-sources .settings-card{background:linear-gradient(180deg,color-mix(in srgb,var(--qa) 7%,rgba(255,255,255,.03)),rgba(255,255,255,.015))!important;border:1px solid color-mix(in srgb,var(--qa) 20%,rgba(255,255,255,.07))!important}
body:not(.desktop-platform) #content-panel-sources input[type="text"],body:not(.desktop-platform) #content-panel-sources input[type="search"],body:not(.desktop-platform) #content-panel-readers input[type="text"],body:not(.desktop-platform) #content-panel-readers input[type="search"],body:not(.desktop-platform) #content-panel-sources .search-input-wrap,body:not(.desktop-platform) #content-panel-sources .rec-search{background:color-mix(in srgb,var(--qa) 7%,rgba(255,255,255,.04))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 20%,rgba(255,255,255,.06))!important}
body:not(.desktop-platform) #content-panel-sources .section-label{color:var(--qa2)!important}
/* підказка про приховані новини */
body:not(.desktop-platform) .queue-ttl-note{background:linear-gradient(135deg,color-mix(in srgb,var(--qa) 14%,transparent),color-mix(in srgb,var(--qa) 5%,transparent))!important;border-color:color-mix(in srgb,var(--qa) 34%,transparent)!important}
body:not(.desktop-platform) .queue-ttl-note .qtn-ic{color:var(--qa2)!important}
body:not(.desktop-platform) .queue-ttl-note .qtn-b{background:linear-gradient(135deg,var(--qa),var(--qd))!important;color:#fff!important}
/* нижня навігація: активна іконка кольору теми зі свіченням, «+» — акцентна плитка */
body:not(.desktop-platform) .bottom-nav{background:linear-gradient(180deg,color-mix(in srgb,var(--qa) 8%,var(--bg,#0b0a14)),var(--bg,#0b0a14))!important;border-top:1px solid color-mix(in srgb,var(--qa) 24%,rgba(255,255,255,.06))!important}
body:not(.desktop-platform) .bottom-nav .nav-btn{color:color-mix(in srgb,var(--text,#fff) 48%,transparent)!important}
body:not(.desktop-platform) .bottom-nav .nav-btn.active,body:not(.desktop-platform) .bottom-nav .nav-btn.active .icon{color:var(--qa2)!important}
body:not(.desktop-platform) .bottom-nav .nav-btn.active .icon{filter:drop-shadow(0 2px 10px var(--qg))!important}
body:not(.desktop-platform) .bottom-nav .nav-compose{background:linear-gradient(145deg,var(--qa2),var(--qd))!important;color:#fff!important;box-shadow:0 10px 24px -8px var(--qg),inset 0 1px 0 rgba(255,255,255,.32)!important}
body:not(.desktop-platform) .bottom-nav .nav-compose:active{background:linear-gradient(145deg,var(--qa),var(--qd))!important}
body:not(.desktop-platform) .bottom-nav .nav-btn.active .has-av .nav-av{box-shadow:0 0 0 2px var(--qa2),0 0 14px var(--qg)!important}

/* Заставка: без смикання (стабільна висота, без анімації іконки, плавна смужка) + герб і «Developed in Ukraine» */
#splash-screen{top:0!important;left:0!important;right:0!important;bottom:auto!important;height:var(--tg-viewport-stable-height,100svh)!important;min-height:100svh}
#splash-screen .splash-logo{animation:none!important;opacity:1!important;transform:none!important;will-change:auto}
#splash-screen .splash-progress-bar{transition:width .55s cubic-bezier(.22,1,.36,1)!important;will-change:width}
#splash-screen .splash-footer{display:flex!important;position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:650;letter-spacing:.02em;color:#8a93a8;z-index:2}
#splash-screen .splash-footer-icon{width:24px;height:24px;object-fit:contain;opacity:.95}

/* порожня стрічка: без чипів сортування й статусів (лишається лише «⋯») */
body:not(.desktop-platform) .queue-panel.qp-empty .queue-sort,body:not(.desktop-platform) .queue-panel.qp-empty .queue-filter{display:none!important}
body:not(.desktop-platform) .queue-panel.qp-empty .queue-more-btn{margin-left:auto}

/* ===== Доведення: охайний порожній стан, крапка на вкладці, відступи ===== */
/* «Як це працює»: фон тільки на самому заголовку-пігулці, а не на обгортці (був прямокутник з гострими кутами) */
body:not(.desktop-platform) .qe2-how{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
body:not(.desktop-platform) .qe2-how > summary{background:color-mix(in srgb,var(--qa) 10%,rgba(255,255,255,.04))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa) 26%,rgba(255,255,255,.07))!important;border-radius:16px!important;color:var(--text,#fff)!important}
body:not(.desktop-platform) .qe2-how[open] > summary{border-radius:16px 16px 6px 6px!important}
/* кнопки під радаром: іконка й текст по центру, один рядок */
body:not(.desktop-platform) .qe2-actions{gap:10px!important}
body:not(.desktop-platform) .qe2-btn{flex:1 1 0;min-width:0;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;height:48px;padding:0 10px!important;border:0!important;border-radius:16px!important;font-size:14px!important;font-weight:700;text-align:center!important;line-height:1.15;white-space:nowrap}
body:not(.desktop-platform) .qe2-btn svg{flex:none}
body:not(.desktop-platform) .qe2-btn.qe2-btn-primary,body:not(.desktop-platform) .qe2-btn:first-child{background:linear-gradient(135deg,var(--qa),var(--qd))!important;color:#fff!important;box-shadow:0 8px 20px -8px var(--qg),inset 0 1px 0 rgba(255,255,255,.28)!important}
/* крапка непрочитаного на вкладці — одразу після тексту, а не поверх нього */
body:not(.desktop-platform) #content-segmented .segment .nbadge{position:static!important;align-self:flex-start;margin:15px 0 0 5px!important;left:auto!important;top:auto!important;flex:none}
/* порожня стрічка: «⋯» ближче до вкладок, без великої діри */
body:not(.desktop-platform) .queue-panel.qp-empty{margin:4px 0 8px!important}
body:not(.desktop-platform) .queue-panel.qp-empty .queue-chiprow{min-height:0!important;padding:0 2px!important}
/* карточки новин у кольорах теми */
body:not(.desktop-platform) #queue-list .queue-card,body:not(.desktop-platform) #queue-list .submission-card{border:1px solid color-mix(in srgb,var(--qa) 22%,rgba(255,255,255,.07))!important;background:linear-gradient(180deg,color-mix(in srgb,var(--qa) 7%,rgba(255,255,255,.035)),rgba(255,255,255,.015))!important;box-shadow:0 18px 40px -26px var(--qg)!important}
body:not(.desktop-platform) .qe2-btn{font-size:13.5px!important;white-space:normal!important;gap:6px!important;padding:0 8px!important;text-wrap:balance}

/* Кнопка підписки в шапці: корона у кольорі тарифу + підпис */
.topbar-promo-btn#topbar-subs-btn{gap:5px!important;padding:2px 4px!important;align-items:center}
#topbar-subs-btn .topbar-promo-icon{width:46px!important;height:46px!important;color:#f5c542;background:radial-gradient(120% 120% at 30% 15%,rgba(245,197,66,.34),rgba(245,197,66,.08) 70%)!important;border:1px solid rgba(245,197,66,.42)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px -8px rgba(245,197,66,.55)!important}
#topbar-subs-btn .subs-crown{width:26px;height:26px;filter:drop-shadow(0 2px 6px rgba(245,197,66,.55))}
#topbar-subs-btn[data-plan="free"] .topbar-promo-icon{color:color-mix(in srgb,var(--accent,#a855f7) 70%,#fff);background:radial-gradient(120% 120% at 30% 15%,color-mix(in srgb,var(--accent,#a855f7) 26%,transparent),rgba(255,255,255,.03) 70%)!important;border-color:color-mix(in srgb,var(--accent,#a855f7) 36%,rgba(255,255,255,.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px -10px var(--accent-glow,rgba(168,85,247,.5))!important}
#topbar-subs-btn[data-plan="free"] .subs-crown{filter:none;opacity:.9}
#topbar-subs-btn[data-plan="business"] .topbar-promo-icon{color:#ffe9a8;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(245,197,66,.12),0 10px 26px -6px rgba(245,197,66,.7)!important}
#topbar-subs-btn .subs-cap{font-size:10.5px;font-weight:800;letter-spacing:.03em;line-height:1;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f5c542}
#topbar-subs-btn[data-plan="free"] .subs-cap{color:color-mix(in srgb,var(--text,#fff) 55%,transparent)}
#topbar-subs-btn.expiring .subs-cap{color:#ff8a7a}
#topbar-subs-btn:not([data-plan]) .subs-cap:empty{display:none}

/* Виправлення подвійних рамок: поле всередині обгортки пошуку без власного фону/рамки, контейнер-картка без акцентної рамки */
body:not(.desktop-platform) #content-panel-sources .rec-search input,body:not(.desktop-platform) #content-panel-sources .sh-search input,body:not(.desktop-platform) #content-panel-sources .k2-search input,body:not(.desktop-platform) #content-panel-readers .rec-search input,body:not(.desktop-platform) #content-panel-sources label input[type="search"],body:not(.desktop-platform) #content-panel-sources label input[type="text"]{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important}
body:not(.desktop-platform) #content-panel-sources .rec-search,body:not(.desktop-platform) #content-panel-sources .search-input-wrap{background:color-mix(in srgb,var(--qa) 7%,rgba(255,255,255,.04))!important;border:1px solid color-mix(in srgb,var(--qa) 22%,rgba(255,255,255,.07))!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources .settings-card{background:none!important;border:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}

/* Нижня навігація: неактивні іконки суцільного сірого (без прозорості — штрихи не просвічують), «+» сірий */
body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active),body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active) .icon{color:#8f8aa3!important;opacity:1!important}
body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active) .icon *{opacity:1!important}
body:not(.desktop-platform) .bottom-nav .nav-compose,body:not(.desktop-platform) .bottom-nav .nav-compose .icon{color:#d9d5e3!important;opacity:1!important}

/* Заставка: світліший фон */
#splash-screen{background:linear-gradient(180deg,#0e1122 0%,#0a0c1a 55%,#070914 100%)!important}
#splash-screen .splash-progress-track{background:rgba(255,255,255,.2)!important}
#splash-screen .splash-footer{color:#a9b1c9!important}

/* порожня стрічка: «⋯» теж ховаємо */
body:not(.desktop-platform) .queue-panel.qp-empty .queue-more-btn,body:not(.desktop-platform) .queue-panel.qp-empty .queue-chiprow{display:none!important}

/* Кнопка підписки: капсула «самоцвіт + тариф» замість круглої корони */
#topbar-subs-btn .topbar-promo-icon.subs-pill{width:auto!important;height:38px!important;border-radius:999px!important;padding:0 14px 0 11px;gap:7px;color:#2a1a00!important;background:linear-gradient(135deg,#ffe08a,#f5b52e 55%,#e08a12)!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 20px -8px rgba(245,181,46,.75)!important}
#topbar-subs-btn .subs-gem{width:20px;height:20px;filter:none;color:#fff8e0}
#topbar-subs-btn .subs-pill .subs-cap{font-size:13px;font-weight:800;letter-spacing:.01em;color:#2a1a00!important;max-width:110px}
#topbar-subs-btn[data-plan="free"] .topbar-promo-icon.subs-pill{color:#fff!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -8px var(--accent-glow,rgba(168,85,247,.6))!important}
#topbar-subs-btn[data-plan="free"] .subs-pill .subs-cap{color:#fff!important}
#topbar-subs-btn[data-plan="free"] .subs-gem{color:#fff}
#topbar-subs-btn.expiring .subs-pill .subs-cap{color:#7a1500!important}
#topbar-subs-btn .subs-pill .topbar-alert-badge{top:-5px;right:-4px}

/* ===== Банер «Вийшла нова версія»: над нижньою навігацією, в один рядок, з іконкою ===== */
#ver-bar{bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;width:max-content;max-width:calc(100vw - 32px);gap:10px!important;padding:7px 7px 7px 12px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#1b1730),#171329)!important;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)!important;box-shadow:0 18px 40px -12px rgba(0,0,0,.75),0 0 28px -8px var(--accent-glow)!important}
#ver-bar::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
#ver-bar span{white-space:nowrap;font-size:13.5px;font-weight:700}
#ver-bar button{flex:none;white-space:nowrap;height:34px!important}

/* ===== Діалог підтвердження (видалення/небезпечні дії): по центру, іконка зверху, великі кнопки ===== */
.confirm-dialog.ios-alert{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:0!important;padding:26px 20px 18px!important;border-radius:28px!important;background:linear-gradient(180deg,#1d1830,#14111f)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 30px 70px -20px rgba(0,0,0,.85)!important}
.confirm-dialog.ios-alert.is-danger{background:radial-gradient(120% 70% at 50% 0%,rgba(255,77,109,.16),transparent 62%),linear-gradient(180deg,#1f1424,#14101c)!important;border-color:rgba(255,77,109,.28)!important}
.confirm-dialog.ios-alert .confirm-dialog-icon{margin:0 0 14px!important;width:60px!important;height:60px!important;border-radius:20px!important;display:grid!important;place-items:center!important}
.confirm-dialog.ios-alert .confirm-dialog-eyebrow{justify-content:center!important;margin:0 0 6px!important}
.confirm-dialog.ios-alert .confirm-dialog-title{font-size:20px!important;margin:0 0 6px!important}
.confirm-dialog.ios-alert .confirm-dialog-message{font-size:16.5px!important;line-height:1.38!important;font-weight:700!important;text-wrap:balance;margin:0 0 4px!important;max-width:30ch}
.confirm-dialog.ios-alert .dlg-extra{width:100%;margin-top:14px}
.confirm-dialog.ios-alert .dlg-count{display:flex!important;align-items:baseline;justify-content:center;gap:8px;padding:12px 14px!important;border-radius:18px!important}
.confirm-dialog.ios-alert .dlg-count b{font-size:34px!important;line-height:1!important}
.confirm-dialog.ios-alert .dlg-count span{font-size:14px!important}
.confirm-dialog.ios-alert .dlg-note{font-size:12.5px!important;line-height:1.4;opacity:.75;margin-top:8px}
.confirm-dialog.ios-alert .confirm-dialog-actions{display:flex!important;flex-direction:column-reverse!important;width:100%;gap:8px!important;margin-top:18px!important}
.confirm-dialog.ios-alert .confirm-dialog-actions .pill{width:100%;height:50px!important;border-radius:16px!important;justify-content:center!important;font-size:16px!important}
.confirm-dialog.ios-alert .confirm-dialog-actions .pill[data-action="cancel"]{background:rgba(255,255,255,.07)!important;box-shadow:none!important}

/* Кнопка підписки: лише іконка (зірка-іскра) в золотому кільці, без підпису */
#topbar-subs-btn .topbar-promo-icon.subs-orb{width:44px!important;height:44px!important;border-radius:50%!important;padding:0;color:#ffd978!important;border:0!important;background:radial-gradient(circle at 50% 35%,#2a2140 0%,#15111f 100%) padding-box,conic-gradient(from 210deg,#ffe28a,#f5a623,#8a5a12,#ffe28a) border-box!important;border:1.5px solid transparent!important;box-shadow:0 0 18px -4px rgba(245,181,46,.55),inset 0 1px 0 rgba(255,255,255,.12)!important}
#topbar-subs-btn .subs-orb .subs-gem{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(255,200,80,.7))}
#topbar-subs-btn[data-plan="free"] .topbar-promo-icon.subs-orb{color:color-mix(in srgb,var(--accent,#a855f7) 55%,#fff)!important;background:radial-gradient(circle at 50% 35%,#251c3d 0%,#15111f 100%) padding-box,conic-gradient(from 210deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)),rgba(255,255,255,.25),var(--accent-2,var(--accent))) border-box!important;box-shadow:0 0 18px -6px var(--accent-glow,rgba(168,85,247,.6)),inset 0 1px 0 rgba(255,255,255,.12)!important}
#topbar-subs-btn[data-plan="free"] .subs-orb .subs-gem{filter:none}
#topbar-subs-btn .subs-cap{display:none!important}
#topbar-subs-btn:active .subs-orb{transform:scale(.92)}
/* Нік у привітанні: капсула в кольорі теми */
.topbar-subtitle .tb-name{display:inline-block;padding:1px 10px 2px;margin-left:2px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent-deep,var(--accent)) 40%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);max-width:46vw;vertical-align:middle}

/* Плашка «Готово»: непрозорий фон, щоб текст не зливався з карткою під нею */
.pub-banner{background:linear-gradient(180deg,#16241f,#101a17)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:99990}
.pub-banner.done{border-color:rgba(52,211,153,.45)!important}

/* ===== Сповіщення: єдина картка на групу, тонкі роздільники, кольорові іконки-кола, лічильник групи ===== */
.notify-sheet{padding-top:calc(14px + var(--tg-content-safe-area-inset-top,0px))!important}
.notify-sheet .notify-title{font-size:30px!important;letter-spacing:-.02em}
.notify-sheet .notify-sub{font-size:13.5px!important;color:var(--hint)}
.notify-sheet .notify-all-btn{height:34px!important;padding:0 14px!important;font-size:13px!important;font-weight:800!important;border-radius:999px!important;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:color-mix(in srgb,var(--accent) 60%,#fff)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)!important}
.notify-sheet .notify-meter{gap:5px!important;margin:14px 0 6px!important}
.notify-sheet .notify-meter i{height:4px!important;opacity:1}
.notify-sheet .notify-group-label{display:flex!important;align-items:center;justify-content:space-between;margin:20px 4px 8px!important;font-size:12px!important;letter-spacing:.09em}
.notify-sheet .notify-gc{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:color-mix(in srgb,var(--accent) 55%,#fff)}
.notify-sheet .notify-gc.off{background:rgba(255,255,255,.06);color:var(--hint)}
.notify-sheet .notify-group{display:block!important;padding:0!important;border-radius:22px!important;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.035)),rgba(255,255,255,.02))!important;border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.07))!important;box-shadow:none!important}
.notify-sheet .notify-row{display:flex!important;align-items:center;gap:14px;margin:0!important;padding:14px 16px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;transition:background .15s}
.notify-sheet .notify-row + .notify-row{border-top:1px solid rgba(255,255,255,.07)!important}
.notify-sheet .notify-row:active{background:rgba(255,255,255,.04)!important}
/* 2026-10-25: той самий квадратно-градієнтний значок, що й усюди в налаштуваннях
   (.set-ico — «Профіль»/«Застосунок» тощо), замість плаского кола, яке тут було
   окремою, третьою мовою іконок поруч з рештою панелі. */
.notify-sheet .notify-ico{flex:none;width:42px!important;height:42px!important;border-radius:12px!important;display:grid;place-items:center;color:#fff!important;background:linear-gradient(160deg,var(--c1),var(--c2))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(0,0,0,.25)!important}
.notify-sheet .notify-ico svg{width:20px;height:20px}
.notify-sheet .notify-row:not(.is-on) .notify-ico{color:#fff!important;background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 55%,var(--hint)),color-mix(in srgb,var(--c2) 55%,var(--hint)))!important;opacity:.6;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.2)!important}
.notify-sheet .notify-row-title{font-size:15.5px!important;font-weight:750!important}
.notify-sheet .notify-row-desc{font-size:12.5px!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notify-sheet .notify-row:not(.is-on) .notify-row-title{color:var(--hint)}
.notify-sheet .notify-foot{margin-top:18px!important;padding:12px 14px!important;border-radius:16px;font-size:12.5px!important;line-height:1.45;background:rgba(255,255,255,.04);color:var(--hint);text-align:left!important}

/* ===== Повідомлення про публікацію («Публікується…» / «Готово»): нова картка .pbn ===== */
.pbn{position:fixed;left:12px;right:12px;margin:0 auto;max-width:460px;bottom:calc(104px + env(safe-area-inset-bottom,0px));z-index:99990;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px;padding:14px 14px 18px;border-radius:24px;overflow:hidden;color:var(--text);background:linear-gradient(180deg,#1d1730,#120e1f);border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.08));box-shadow:0 24px 50px -16px rgba(0,0,0,.85),0 0 40px -14px var(--accent-glow);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.4,.5,1),border-color .4s,box-shadow .4s}
.pbn.in{opacity:1;transform:none}
.pbn.out{opacity:0;transform:translateY(24px) scale(.97);transition-duration:.3s}
.pbn.done{background:linear-gradient(180deg,#14261f,#0e1a16);border-color:rgba(52,211,153,.5);box-shadow:0 24px 50px -16px rgba(0,0,0,.85),0 0 40px -12px rgba(52,211,153,.5)}
.pbn-ico{position:relative;width:48px;height:48px;display:grid;place-items:center}
.pbn-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pbn-ring circle{stroke-width:3;fill:none}
.pbn-ring-bg{stroke:rgba(255,255,255,.1)}
.pbn-ring-arc{stroke:var(--accent-2,var(--accent));stroke-linecap:round;stroke-dasharray:36 132;transform-origin:50% 50%;animation:pbnSpin 1.1s linear infinite}
.pbn-glyph{display:grid;place-items:center;color:var(--accent-2,var(--accent))}
.pbn-glyph svg{width:20px;height:20px;animation:pbnFly 1.6s ease-in-out infinite}
.pbn.done .pbn-ring-arc{stroke:#34d399;stroke-dasharray:132 0;animation:none}
.pbn.done .pbn-glyph{color:#34d399}
.pbn.done .pbn-glyph svg{animation:none;stroke-width:3}
.pbn-main{min-width:0}
.pbn-title{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.pbn-sub{font-size:12.5px;line-height:1.35;color:var(--hint);margin-top:2px}
.pbn-ch{display:flex;align-items:center;gap:8px;margin-top:8px}
.pbn-av{display:flex}
.pbn-a{width:22px;height:22px;border-radius:50%;overflow:hidden;margin-left:-7px;border:2px solid #1a1429;flex:none}
.pbn-a:first-child{margin-left:0}
.pbn-a img{width:100%;height:100%;object-fit:cover;display:block}
.pbn-a-more{display:grid;place-items:center;font-size:9px;font-weight:800;background:rgba(255,255,255,.16);color:#fff}
.pbn-ch-label{font-size:12px;font-weight:800;color:color-mix(in srgb,var(--accent) 60%,#fff)}
.pbn.done .pbn-ch-label{color:#6ee7b7}
.pbn-thumb{width:46px;height:46px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.pbn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pbn-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.08)}
.pbn-bar i{display:block;height:100%;width:8%;border-radius:0 5px 5px 0;background:linear-gradient(90deg,var(--accent-deep,var(--accent)),var(--accent-2,var(--accent)));animation:pbnFill 2.6s cubic-bezier(.2,.7,.3,1) forwards;transition:width .4s ease}
.pbn.done .pbn-bar i{background:linear-gradient(90deg,#059669,#34d399)}
@keyframes pbnSpin{to{transform:rotate(360deg)}}
@keyframes pbnFly{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-2px)}}
@keyframes pbnFill{to{width:88%}}
@media (prefers-reduced-motion:reduce){.pbn-ring-arc,.pbn-glyph svg,.pbn-bar i{animation:none}}

/* ===== Телефон: шапка в стилі «аватар · назва по центру · підписка» ===== */
body:not(.desktop-platform) .topbar{display:grid!important;grid-template-columns:48px 1fr 48px;align-items:center;column-gap:10px}
body:not(.desktop-platform) .topbar .avatar{width:44px!important;height:44px!important;min-width:44px;justify-self:start}
body:not(.desktop-platform) .topbar-text{min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center}
body:not(.desktop-platform) .topbar-title{display:inline-flex;align-items:center;gap:8px;font-size:19px!important;font-weight:800;letter-spacing:-.02em;max-width:100%}
body:not(.desktop-platform) .topbar-title::before{content:"";flex:none;width:24px;height:24px;border-radius:7px;background:url(icons/icon-192.png) center/cover}
body:not(.desktop-platform) .topbar-subtitle{display:flex!important;align-items:center;justify-content:center;gap:4px;font-size:11.5px!important;margin-top:2px;max-width:100%}
body:not(.desktop-platform) .topbar-subtitle .tb-name{font-size:11.5px!important;padding:0 8px 1px!important}
body:not(.desktop-platform) .topbar-subtitle .tb-wave{display:none}
body:not(.desktop-platform) .topbar-clock{display:none!important}
body:not(.desktop-platform) .topbar-actions{margin:0!important;justify-self:end}

/* Заставка: насичений статичний фон (синьо-жовте світіння, тонка сітка), без анімацій */
#splash-screen{background:radial-gradient(60% 38% at 50% 44%,rgba(37,99,235,.34),transparent 70%),radial-gradient(70% 30% at 50% 108%,rgba(255,213,0,.2),transparent 70%),radial-gradient(50% 30% at 105% 0%,rgba(99,102,241,.22),transparent 70%),radial-gradient(45% 28% at -5% 70%,rgba(14,165,233,.14),transparent 70%),linear-gradient(180deg,#0b0f22 0%,#080b19 55%,#060814 100%)!important}
#splash-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 45% at 50% 44%,#000 0%,transparent 100%);mask-image:radial-gradient(70% 45% at 50% 44%,#000 0%,transparent 100%)}

/* Шапка: назва бота суцільно біла, значок підписки сірий */
.topbar-title,body:not(.desktop-platform) .topbar-title{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important;text-shadow:none!important;animation:none!important}
#topbar-subs-btn .topbar-promo-icon.subs-orb,#topbar-subs-btn[data-plan] .topbar-promo-icon.subs-orb{color:#9a96ab!important;background:radial-gradient(circle at 50% 35%,#221d33 0%,#15111f 100%) padding-box,linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.08)) border-box!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important}
#topbar-subs-btn .subs-orb .subs-gem,#topbar-subs-btn[data-plan] .subs-orb .subs-gem{filter:none!important;color:#9a96ab}

/* Заставка в стилі Threads: плаский фон, логотип і назва, що з'являється по літерах */
#splash-screen{background:#0d0d11!important}
#splash-screen::before,#splash-screen .splash-grid,#splash-screen .maintenance-blob,#splash-screen .splash-overlay{display:none!important}
#splash-screen .splash-word{display:flex;gap:1px;font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;margin-top:-4px}
#splash-screen .splash-word span{display:inline-block;opacity:0;transform:translateY(14px);filter:blur(8px);animation:swIn .6s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--i) * .08s) forwards,swGlow 2.4s ease-in-out calc(1s + var(--i) * .12s) infinite}
@keyframes swIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes swGlow{0%,100%{color:#fff}50%{color:#8fa3c8}}
@media (prefers-reduced-motion:reduce){#splash-screen .splash-word span{animation:none;opacity:1;transform:none;filter:none}}

/* ===== Діалог підтвердження: вирівнювання по центру в усіх варіантах, одна рамка іконки, компактний блок кількості ===== */
.confirm-dialog.ios-alert > *{align-self:stretch}
.confirm-dialog.ios-alert .confirm-dialog-icon{align-self:center!important;width:64px!important;height:64px!important;margin:0 0 14px!important;border-radius:20px!important}
.confirm-dialog.ios-alert .confirm-dialog-icon::before,.confirm-dialog.ios-alert .confirm-dialog-icon::after{display:none!important}
.confirm-dialog.ios-alert .confirm-dialog-eyebrow{align-self:center!important;display:inline-flex!important;align-items:center;gap:7px;width:auto!important;margin:0 0 8px!important;padding:0!important;background:none!important;font-size:12px!important;letter-spacing:.14em}
.confirm-dialog.ios-alert .confirm-dialog-eyebrow i{width:7px!important;height:7px!important;margin:0!important}
.confirm-dialog.ios-alert .confirm-dialog-title,.confirm-dialog.ios-alert .confirm-dialog-message{text-align:center!important;width:100%;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
.confirm-dialog.ios-alert .confirm-dialog-message{font-size:17px!important;line-height:1.35!important}
.confirm-dialog.ios-alert .dlg-extra{display:flex!important;flex-direction:column;align-items:center;gap:8px;padding:14px 14px 12px!important;border-radius:20px!important;margin-top:14px!important}
.confirm-dialog.ios-alert .dlg-extra .dlg-count{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.confirm-dialog.ios-alert .dlg-extra .dlg-chips{justify-content:center;margin:0!important}
.confirm-dialog.ios-alert .dlg-extra .dlg-note{margin:0!important;text-align:center}
.confirm-dialog.ios-alert .confirm-dialog-actions{margin-top:16px!important}

/* Заставка: заєць «влітає» зліва зі слідами кольорів прапора, назва проявляється по літерах ОДИН раз і повільно */
#splash-screen .splash-mark{position:relative;display:flex;opacity:0;animation:smDash 1s cubic-bezier(.2,.9,.25,1.12) .1s forwards}
#splash-screen .splash-mark .splash-logo{animation:none!important;opacity:1!important;transform:none!important}
#splash-screen .splash-streak{position:absolute;right:92%;height:7%;width:70px;border-radius:99px 0 0 99px;transform-origin:100% 50%;transform:scaleX(0);opacity:0;pointer-events:none}
#splash-screen .splash-streak.s1{top:53%;background:linear-gradient(90deg,transparent,#1d6bff);animation:smStreak 1.1s ease-out .2s forwards}
#splash-screen .splash-streak.s2{top:65%;background:linear-gradient(90deg,transparent,#ffd400);animation:smStreak 1.1s ease-out .32s forwards}
@keyframes smDash{0%{opacity:0;transform:translateX(-70px) scale(.92);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes smStreak{0%{transform:scaleX(0);opacity:0}30%{transform:scaleX(1);opacity:.95}100%{transform:scaleX(1.25);opacity:0}}
#splash-screen .splash-word span{animation:swIn .9s cubic-bezier(.2,.8,.2,1) calc(1s + var(--i) * .15s) forwards!important}
@media (prefers-reduced-motion:reduce){#splash-screen .splash-mark{animation:none;opacity:1}#splash-screen .splash-streak{display:none}}

/* Кнопка «⋯» у стрічці: завжди на видноті справа (липка), суцільні крапки, м'яке згасання чипів під нею */
body:not(.desktop-platform) .queue-chiprow .queue-more-btn{position:sticky!important;right:0;flex:none;margin-left:auto;width:40px!important;height:40px!important;border-radius:14px!important;z-index:3;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--qa,var(--accent)) 28%,#17121f),#17121f)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--qa,var(--accent)) 40%,transparent),-14px 0 14px 4px var(--bg,#0b0a14)!important;color:#fff!important}
body:not(.desktop-platform) .queue-more-btn svg{width:20px;height:20px}
body:not(.desktop-platform) .queue-more-btn svg circle{fill:currentColor!important;stroke:none!important}
body:not(.desktop-platform) .queue-more-btn:active{transform:scale(.92)}

/* Заставка: PNG зайця (білий силует + прапор) без плитки; заєць проявляється, прапор «виїжджає» зліва, один раз */
#splash-screen .splash-mark{position:relative;display:block;width:200px;aspect-ratio:640/615;opacity:1;animation:none;filter:none;transform:none}
#splash-screen .splash-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
#splash-screen .sm-rabbit{opacity:0;transform:translateY(14px) scale(.9);filter:blur(8px);animation:smRabbit .95s cubic-bezier(.2,.85,.25,1) .1s forwards}
#splash-screen .sm-flag{clip-path:inset(0 100% 0 0);opacity:0;animation:smFlag .9s cubic-bezier(.3,.7,.2,1) .75s forwards}
@keyframes smRabbit{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes smFlag{0%{clip-path:inset(0 100% 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:1}}
#splash-screen .splash-word{margin-top:6px}
#splash-screen .splash-word span{animation:swIn .9s cubic-bezier(.2,.8,.2,1) calc(1.5s + var(--i) * .15s) forwards!important}
@media (prefers-reduced-motion:reduce){#splash-screen .sm-rabbit,#splash-screen .sm-flag{animation:none;opacity:1;transform:none;filter:none;clip-path:none}}

#splash-screen .splash-word{display:none!important}

/* Діалог видалення: типографіка тексту й кнопка «Видалити» */
.confirm-dialog.ios-alert .confirm-dialog-message{font-size:21px!important;line-height:1.28!important;font-weight:800!important;letter-spacing:-.015em;color:#fff}
.confirm-dialog.ios-alert .confirm-dialog-message .dlg-w2{font-size:15px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.62)}
/* "Буде видалено" — манифест-картка замість суцільного центрованого стеку:
   плитка з числом (пульсуюче кільце) + мітка зліва, розбивка по статусах
   рядками з кольоровою крапкою (не чипси), примітка про незворотність окремим
   подвалом з іконкою замка. Єдине місце використання (.dlg-extra для інших
   діалогів не застосовується), тож стилі старої версії (dlg-count/dlg-chip)
   вище лишились нечинним мертвим кодом — нова розмітка їх більше не емітить. */
.confirm-dialog.ios-alert .dlg-extra:has(.dlg-purge){background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.dlg-purge{width:100%;box-sizing:border-box;border-radius:18px;text-align:left;overflow:hidden;background:linear-gradient(165deg,rgba(244,63,94,.15),rgba(244,63,94,.02) 55%,rgba(255,255,255,.02));border:1px solid rgba(244,63,94,.25)}
.dlg-purge-head{display:flex;align-items:center;gap:12px;padding:15px 16px 13px}
.dlg-purge-num{position:relative;flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;background:linear-gradient(155deg,#fb7185,#e11d48);box-shadow:0 6px 16px -4px rgba(225,29,72,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.dlg-purge-num::after{content:"";position:absolute;inset:-5px;border-radius:17px;border:1.5px solid rgba(244,63,94,.4);animation:dlgPurgePulse 2.2s ease-out infinite}
@keyframes dlgPurgePulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.dlg-purge-num::after{animation:none;display:none}}
.dlg-purge-label{font-size:14px;font-weight:700;color:rgba(255,255,255,.88);line-height:1.3}
.dlg-purge-rows{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}
.dlg-purge-row{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.055)}
.dlg-purge-row:last-child{border-bottom:0}
.dlg-purge-row i{width:7px;height:7px;border-radius:50%;flex:none}
.dlg-purge-row span{flex:1}
.dlg-purge-row b{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.dlg-purge-row.c-pending i{background:#fbbf24}
.dlg-purge-row.c-queued i{background:#34d399}
.dlg-purge-row.c-scheduled i{background:#38bdf8}
.dlg-purge-row.c-draft i{background:#a78bfa}
.dlg-purge-note{display:flex;align-items:flex-start;gap:8px;padding:11px 16px 13px;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.52);border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14)}
.dlg-purge-note svg{flex:none;width:15px;height:15px;margin-top:1px;color:rgba(244,63,94,.7)}

.confirm-dialog.ios-alert .confirm-dialog-actions .pill.danger{height:54px!important;border-radius:18px!important;font-size:17px!important;font-weight:800!important;letter-spacing:.005em;color:#fff!important;background:linear-gradient(180deg,#f0485c 0%,#d12a42 55%,#b01e34 100%)!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 12px 26px -10px rgba(240,72,92,.75)!important;text-shadow:0 1px 0 rgba(0,0,0,.2);transition:transform .12s cubic-bezier(.3,1.5,.5,1),filter .15s}
.confirm-dialog.ios-alert .confirm-dialog-actions .pill.danger:active{transform:scale(.97);filter:brightness(.94)}
.confirm-dialog.ios-alert .confirm-dialog-actions .pill.danger::before{content:"";width:18px;height:18px;margin-right:8px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h17M9.5 6.5V4.6c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v1.9M6 6.5l.8 12a2 2 0 0 0 2 1.9h6.4a2 2 0 0 0 2-1.9l.8-12M10 11v5M14 11v5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5h17M9.5 6.5V4.6c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v1.9M6 6.5l.8 12a2 2 0 0 0 2 1.9h6.4a2 2 0 0 0 2-1.9l.8-12M10 11v5M14 11v5'/%3E%3C/svg%3E") center/contain no-repeat}
.confirm-dialog.ios-alert .confirm-dialog-actions .pill.danger:has(.hb-i)::before{display:none}

/* Заставка: заєць виїжджає зліва, потім із нього «виїжджає» прапор (праворуч → ліворуч), один раз */
#splash-screen .sm-rabbit{opacity:0;transform:translateX(-120px);filter:none;animation:smRabbitIn 1s cubic-bezier(.16,.9,.25,1) .1s forwards}
#splash-screen .sm-flag{opacity:0;clip-path:inset(0 0 0 100%);transform:translateX(70px);animation:smFlagOut .85s cubic-bezier(.25,.8,.25,1) 1.05s forwards}
@keyframes smRabbitIn{0%{opacity:0;transform:translateX(-120px)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes smFlagOut{0%{opacity:1;clip-path:inset(0 0 0 100%);transform:translateX(70px)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* режим body.perf зациклював усі анімації заставки — заєць і прапор грають рівно один раз і лишаються нерухомими */
body.perf #splash-screen .sm-rabbit,body.perf #splash-screen .sm-flag,#splash-screen .sm-rabbit,#splash-screen .sm-flag{animation-iteration-count:1!important;animation-fill-mode:forwards!important}

#splash-screen .sm-flag{animation-delay:.7s!important}

/* Підпис «Developed in Ukraine» на заставці: герб у м'якому колі + розрядка, плавна поява один раз після зайця і прапора */
#splash-screen .splash-footer{gap:11px!important;font-size:13px!important;font-weight:600!important;letter-spacing:.14em!important;text-transform:uppercase;color:#98a2bd!important;opacity:0;animation:sfIn 1s cubic-bezier(.2,.8,.2,1) 1.9s forwards!important}
#splash-screen .splash-footer-icon{width:30px!important;height:30px!important;padding:6px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;transform:scale(.6);animation:sfIcon .7s cubic-bezier(.3,1.6,.5,1) 2.1s forwards}
@keyframes sfIn{0%{opacity:0;transform:translateY(12px);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes sfIcon{to{opacity:.95;transform:none}}
body.perf #splash-screen .splash-footer,body.perf #splash-screen .splash-footer-icon{animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){#splash-screen .splash-footer,#splash-screen .splash-footer-icon{animation:none!important;opacity:1;transform:none;filter:none}}

/* Шапка: логотип — PNG зайця з прапором (без плитки), нік без капсули, поруч махає рука */
body:not(.desktop-platform) .topbar-title::before{width:30px!important;height:29px!important;border-radius:0!important;background:url(icons/mark-full.png) center/contain no-repeat!important}
body:not(.desktop-platform) .topbar-subtitle .tb-name,.topbar-subtitle .tb-name{display:inline!important;padding:0!important;margin:0 2px 0 0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#fff!important;font-weight:800!important;font-size:12.5px!important;max-width:44vw}
body:not(.desktop-platform) .topbar-subtitle .tb-wave{display:inline-block!important;width:17px;height:17px;color:#fbbf24;transform-origin:70% 80%;animation:tbWaveLoop 3.6s ease-in-out 1s infinite!important}
@keyframes tbWaveLoop{0%,45%,100%{transform:rotate(0)}5%{transform:rotate(16deg)}10%{transform:rotate(-10deg)}15%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}25%{transform:rotate(14deg)}30%{transform:rotate(-4deg)}35%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){body:not(.desktop-platform) .topbar-subtitle .tb-wave{animation:none!important}}

/* Підпис і герб з'являються одразу разом із зайцем; герб — PNG без підкладки */
#splash-screen .splash-footer{animation:sfIn .8s cubic-bezier(.2,.8,.2,1) .25s forwards!important}
#splash-screen .splash-footer-icon{width:28px!important;height:28px!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;object-fit:contain;opacity:.95!important;transform:none!important;animation:none!important}

/* Кнопка підписки: лише значок, без кола й обводки */
#topbar-subs-btn .topbar-promo-icon.subs-orb,#topbar-subs-btn[data-plan] .topbar-promo-icon.subs-orb{background:none!important;border:0!important;box-shadow:none!important;width:44px!important;height:44px!important}
#topbar-subs-btn .subs-orb .subs-gem,#topbar-subs-btn[data-plan] .subs-orb .subs-gem{width:30px!important;height:30px!important}

#topbar-subs-btn .subs-orb .subs-gem{width:28px!important;height:28px!important;fill:none!important}

/* ===== Головна: ряд «Додати канал / Вибрати / Посібник» — єдиний вигляд у кольорах теми ===== */
body:not(.desktop-platform) .channels-header-row{gap:8px!important;align-items:stretch}
body:not(.desktop-platform) .channels-header-row #add-channel-btn{flex:1.5 1 0!important;min-height:50px!important;height:50px;border-radius:17px!important;border:0!important;font-size:15px!important;font-weight:800!important;letter-spacing:-.005em;color:#fff!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 24px -12px var(--accent-glow)!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1),filter .15s}
body:not(.desktop-platform) .channels-header-row #add-channel-btn:active{transform:scale(.97);filter:brightness(.95)}
body:not(.desktop-platform) .channels-header-row #add-channel-btn .icon{width:20px!important;height:20px!important;stroke-width:2.4}
body:not(.desktop-platform) .channels-header-row #channels-select-btn{flex:1 1 0!important;min-height:50px!important;height:50px;border-radius:17px!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px!important;font-weight:700!important;color:color-mix(in srgb,var(--accent) 45%,#fff)!important;background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.03))!important;border:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.06))!important}
body:not(.desktop-platform) .channels-header-row #channels-select-btn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Cpath d='m8.2 12.2 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Cpath d='m8.2 12.2 2.6 2.6 5-5.4'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(.desktop-platform) .channels-header-row #channels-select-btn:active{transform:scale(.97)}
body:not(.desktop-platform) .channels-header-row #ap-guide-btn{flex:0 0 50px!important;width:50px!important;min-height:50px!important;height:50px;padding:0!important;border-radius:17px!important;display:grid;place-items:center;color:color-mix(in srgb,var(--accent) 45%,#fff)!important;background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.03))!important;border:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.06))!important}
body:not(.desktop-platform) .channels-header-row #ap-guide-btn svg{width:22px;height:22px}
body:not(.desktop-platform) .channels-header-row #ap-guide-btn:active{transform:scale(.94)}

/* Кнопка «Назад» (Головна/Профіль…): компактна капсула, шеврон кольору теми без кола */
body:not(.desktop-platform) .back-btn{display:inline-flex!important;align-items:center;gap:2px!important;height:40px!important;min-height:0!important;padding:0 16px 0 8px!important;border-radius:999px!important;border:0!important;font-size:15px!important;font-weight:700!important;letter-spacing:-.005em;color:var(--text,#fff)!important;background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.035))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07))!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1),background .15s}
body:not(.desktop-platform) .back-btn:active{transform:scale(.95);background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.05))!important}
body:not(.desktop-platform) .back-btn .icon,body:not(.desktop-platform) .back-btn svg{width:22px!important;height:22px!important;padding:0!important;margin:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--accent-2,var(--accent))!important;stroke-width:2.6}
body:not(.desktop-platform) .back-btn::before,body:not(.desktop-platform) .back-btn::after{display:none!important}

/* «Вибрати» — лише значок, як кнопка посібника */
body:not(.desktop-platform) .channels-header-row #channels-select-btn{flex:0 0 50px!important;width:50px!important;padding:0!important;gap:0!important;font-size:0!important;line-height:0}
body:not(.desktop-platform) .channels-header-row #channels-select-btn::before{width:24px!important;height:24px!important}
body:not(.desktop-platform) .channels-header-row #add-channel-btn{flex:1 1 0!important}

/* смужка завантаження — тієї ж ширини, що й логотип */
#splash-screen .splash-progress-track{width:200px!important}

/* «Вибрати» і посібник: лише значок, без рамки й фону, один колір із теми */
body:not(.desktop-platform) .channels-header-row #channels-select-btn,body:not(.desktop-platform) .channels-header-row #ap-guide-btn{background:none!important;box-shadow:none!important;border:0!important;color:var(--accent-2,var(--accent))!important}
body:not(.desktop-platform) .channels-header-row #ap-guide-btn svg,body:not(.desktop-platform) .channels-header-row #ap-guide-btn svg *{stroke:currentColor!important;color:inherit!important}
body:not(.desktop-platform) .channels-header-row #channels-select-btn:active,body:not(.desktop-platform) .channels-header-row #ap-guide-btn:active{background:color-mix(in srgb,var(--accent) 14%,transparent)!important}

/* значки «Вибрати» і посібника — більші */
body:not(.desktop-platform) .channels-header-row #channels-select-btn::before{width:32px!important;height:32px!important}
body:not(.desktop-platform) .channels-header-row #ap-guide-btn svg{width:32px!important;height:32px!important}
body:not(.desktop-platform) .channels-header-row #channels-select-btn,body:not(.desktop-platform) .channels-header-row #ap-guide-btn{flex:0 0 54px!important;width:54px!important}
/* фраза розділу в підзаголовку шапки */
.topbar-subtitle.tb-swap{animation:tbSwap .45s cubic-bezier(.2,.8,.2,1);color:var(--hint)}
@keyframes tbSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* Вкладки: рівні колонки, вміст по центру, підкреслення рівно під центром активної вкладки */
body:not(.desktop-platform) #content-segmented .segment,body:not(.desktop-platform) #src-tabs button{flex:1 1 0!important;min-width:0;display:inline-flex!important;align-items:center;justify-content:center!important;gap:6px;text-align:center;position:relative}
body:not(.desktop-platform) #content-segmented .segment.active::after,body:not(.desktop-platform) #src-tabs button.on::after{left:50%!important;right:auto!important;width:40px!important;transform:translateX(-50%)!important;margin:0!important}
body:not(.desktop-platform) #src-tabs button em{margin:0!important}

/* Масовий вибір: активна кнопка (акцент + хрестик), підсвітка вибраних, неактивні дії при 0 вибраних */
body:not(.desktop-platform) .channels-header-row #channels-select-btn.is-active{background:color-mix(in srgb,var(--accent) 22%,transparent)!important;color:#fff!important;border-radius:17px!important}
body:not(.desktop-platform) .channels-header-row #channels-select-btn.is-active::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
#channels-list .bulk-on{box-shadow:inset 0 0 0 2px var(--accent),0 12px 28px -16px var(--accent-glow)!important;background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
#channels-list .bulk-off{opacity:.45}
#channels-bulk-bar .settings-card-header{display:flex;align-items:center;gap:10px}
#channels-bulk-bar .settings-card-body{flex:1;min-width:0}
#channels-bulk-all{height:34px;padding:0 14px;border-radius:999px;font-weight:800;color:color-mix(in srgb,var(--accent) 50%,#fff);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);border:0}
#channels-bulk-bar.is-empty .settings-card-extra{opacity:.4;pointer-events:none}

/* ===== Масові дії над каналами: акуратна панель, вибрані рядки без різких рамок ===== */
#channels-bulk-bar{border-radius:24px!important;padding:16px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.035)),rgba(255,255,255,.02))!important;border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07))!important}
#channels-bulk-bar .settings-card-header{padding:0!important;border:0!important;margin:0 0 12px!important}
#channels-bulk-bar .settings-card-title{font-size:17px!important;font-weight:800!important}
#channels-bulk-bar .settings-card-desc{font-size:12.5px!important;line-height:1.35}
#channels-bulk-bar .settings-card-extra{padding:0!important;border:0!important;margin:0!important}
#channels-bulk-bar .bulk-ap-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#channels-bulk-bar .bulk-ap-row .pill{height:46px;margin:0;justify-content:center;border-radius:15px;font-size:13px;font-weight:800;white-space:normal;line-height:1.15;text-align:center;padding:0 8px}
#channels-bulk-bar .bulk-cd-row{display:flex;align-items:center;gap:10px;margin-top:10px}
#channels-bulk-bar .bulk-cd-row .stepper{flex:none;gap:2px;padding:3px;border-radius:15px;background:rgba(255,255,255,.05);justify-content:center}
#channels-bulk-bar .bulk-cd-row .stepper-btn{width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.07)}
#channels-bulk-bar .bulk-cd-row .stepper-value{min-width:52px;text-align:center;font-weight:800}
#channels-bulk-bar #channels-bulk-cd-apply{flex:1;min-width:0;height:46px;margin:0!important;border:0;border-radius:15px;font-size:13px;font-weight:800;line-height:1.15;white-space:normal;text-align:center;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -12px var(--accent-glow)}
#channels-bulk-bar #channels-bulk-status:empty{display:none}
#channels-bulk-bar #channels-bulk-status{margin:8px 0 0!important;min-height:0!important}
#channels-list .bulk-on{box-shadow:none!important;background:color-mix(in srgb,var(--accent) 14%,transparent)!important;border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important}
.bulk-checkbox{display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.bulk-checkbox.checked svg{width:15px;height:15px;color:#fff;stroke:#fff;stroke-width:3}

/* активний «Вибрати» (хрестик): без плитки й рамки, лише значок */
body:not(.desktop-platform) .channels-header-row #channels-select-btn.is-active{background:none!important;box-shadow:none!important;border:0!important;color:var(--accent-2,var(--accent))!important}

/* Масові дії: число крупно, кнопки в один рядок без переносів, КД окремим повним рядком */
#channels-bulk-bar #channels-bulk-count{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;white-space:nowrap}
#channels-bulk-bar .bk-n{font-size:34px;font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff}
#channels-bulk-bar .bk-of{font-size:17px;font-weight:700;color:color-mix(in srgb,var(--accent) 55%,#fff)}
#channels-bulk-bar .bk-l{font-size:13px;font-weight:600;color:var(--hint);margin-left:4px;overflow:hidden;text-overflow:ellipsis}
#channels-bulk-bar .bulk-ap-row .pill{white-space:nowrap!important;font-size:13px!important;letter-spacing:-.01em;padding:0 6px!important}
#channels-bulk-bar .bulk-cd-row{flex-direction:column;align-items:stretch;gap:8px}
#channels-bulk-bar .bulk-cd-row .stepper{width:100%;justify-content:space-between;padding:4px}
#channels-bulk-bar .bulk-cd-row .stepper-btn{width:52px;height:42px}
#channels-bulk-bar .bulk-cd-row .stepper-value{font-size:16px}
#channels-bulk-bar #channels-bulk-cd-apply{flex:none;width:100%;height:50px;font-size:14.5px!important;border-radius:16px}

/* ===== Масові дії: компактна плаваюча панель над навігацією (іконки замість великих кнопок) ===== */
body.bulk-open #channels-list-wrap{padding-bottom:150px}
#channels-bulk-bar{position:fixed!important;left:12px!important;right:12px!important;bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;margin:0!important;padding:10px 12px 12px!important;border-radius:22px!important;z-index:350;max-width:480px;margin-left:auto!important;margin-right:auto!important;background:rgba(20,16,34,.95)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))!important;box-shadow:0 22px 50px -14px rgba(0,0,0,.85),0 0 30px -12px var(--accent-glow)!important;display:flex!important;flex-direction:column;gap:10px}
#channels-bulk-bar .settings-card-header{margin:0!important;padding:0!important}
#channels-bulk-bar .settings-card-desc{display:none!important}
#channels-bulk-bar .bk-n{font-size:22px}
#channels-bulk-bar .bk-of{font-size:14px}
#channels-bulk-bar .bk-l{font-size:12px}
#channels-bulk-all{height:30px!important;padding:0 12px!important;font-size:12.5px!important}
#channels-bulk-bar .settings-card-extra{display:flex!important;align-items:center;gap:8px;padding:0!important}
#channels-bulk-bar .bulk-ap-row{display:flex;gap:8px;flex:none}
#channels-bulk-bar .bulk-ap-row .pill,#channels-bulk-bar #channels-bulk-cd-apply{width:46px!important;height:46px!important;min-width:46px;padding:0!important;font-size:0!important;line-height:0!important;border-radius:15px!important;display:grid!important;place-items:center;flex:none}
#channels-bulk-bar .bulk-ap-row .pill::before,#channels-bulk-bar #channels-bulk-cd-apply::before{content:"";width:20px;height:20px;background:currentColor}
#channels-bulk-bar #channels-bulk-autopost-on::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center/contain no-repeat}
#channels-bulk-bar #channels-bulk-autopost-off::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E") center/contain no-repeat}
#channels-bulk-bar #channels-bulk-cd-apply::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat}
#channels-bulk-bar .bulk-cd-row{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:8px;margin:0}
#channels-bulk-bar .bulk-cd-row .stepper{flex:1;min-width:0;justify-content:space-between;padding:3px;border-radius:15px;height:46px;box-sizing:border-box}
#channels-bulk-bar .bulk-cd-row .stepper-btn{width:38px;height:100%;border-radius:12px}
#channels-bulk-bar .bulk-cd-row .stepper-value{font-size:14px;min-width:0;padding:0 4px}
#channels-bulk-bar #channels-bulk-status{position:absolute;left:12px;right:12px;top:-26px;margin:0!important;font-size:12px;text-align:center;color:#fff;background:rgba(20,16,34,.95);border-radius:10px;padding:3px 8px}
#channels-bulk-bar #channels-bulk-status:empty{display:none}


/* панель масових дій — лише коли режим вибору ввімкнено (inline display:none інакше перебивався !important) */
#channels-bulk-bar[style*="display:none"],#channels-bulk-bar[style*="display: none"]{display:none!important}

/* Читачі: порожній стан */
.re-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 18px 22px;border-radius:26px;background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%),color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.025));border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07))}
.re-art{position:relative;width:92px;height:92px;display:grid;place-items:center;margin-bottom:14px}
.re-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent);animation:rePulse 2.8s ease-out infinite}
.re-ring.r2{animation-delay:1.4s}
.re-core{position:relative;width:60px;height:60px;border-radius:20px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 12px 28px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.35)}
@keyframes rePulse{0%{transform:scale(.62);opacity:.9}100%{transform:scale(1.12);opacity:0}}
.re-title{font-size:19px;font-weight:850;letter-spacing:-.015em;line-height:1.25}
.re-sub{font-size:13.5px;line-height:1.45;color:var(--hint);margin:6px 0 16px;max-width:30ch}
.re-steps{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:18px}
.re-steps span{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;font-size:13.5px;font-weight:650;text-align:left;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.re-steps i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:850;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.re-btn{width:100%;height:50px;border:0;border-radius:16px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -12px var(--accent-glow);transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.re-btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.re-ring{animation:none;opacity:.5}}


/* Вибір каналів: меню-поповер замість плаваючої панелі */
#channels-bulk-bar{display:none!important}
body.bulk-open #channels-list-wrap{padding-bottom:0!important}
.ch-sel-pop{width:288px;max-width:calc(100vw - 24px)}
.ch-sel-pop .qm-head{display:flex;align-items:baseline;gap:6px;padding:10px 12px 6px}
.ch-sel-pop .qm-head b{font-size:22px;font-weight:900;line-height:1}
.ch-sel-pop .qm-head span{font-size:14px;font-weight:700;color:var(--qa2,var(--accent))}
.ch-sel-pop .qm-head em{font-style:normal;font-size:12.5px;color:var(--hint);margin-left:4px}
.ch-sel-pop .qm-row.is-off,.ch-sel-pop .qm-row[disabled]{opacity:.38;pointer-events:none}
.ch-sel-pop .qm-step{cursor:default}
.ch-sel-pop .qm-step > span{flex:1;min-width:0}
.ch-sel-pop .qm-stepper{display:flex;align-items:center;gap:4px;margin-left:auto}
.ch-sel-pop .qm-stepper button{width:30px;height:30px;border:0;border-radius:10px;font:inherit;font-size:16px;font-weight:800;color:#fff;background:rgba(255,255,255,.09);cursor:pointer}
.ch-sel-pop .qm-stepper b{min-width:46px;text-align:center;font-size:13.5px;font-weight:800}
body:not(.desktop-platform) .channels-header-row #channels-select-btn{position:relative}
body:not(.desktop-platform) .channels-header-row #channels-select-btn:not([data-n="0"])[data-n]::after{content:attr(data-n);position:absolute;top:2px;right:2px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:10px;display:grid;place-items:center;font-size:11px;line-height:1;font-weight:850;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}

/* Меню вибору каналів: ширше, плавне відкриття/закриття, акуратні «−/+» */
.ch-sel-pop{width:324px!important;transform-origin:calc(100% - 26px) 0;animation:chPopIn .3s cubic-bezier(.2,1.15,.3,1) both!important}
.ch-sel-pop.closing{animation:chPopOut .15s ease-in both!important;pointer-events:none}
@keyframes chPopIn{from{opacity:0;transform:scale(.86) translateY(-10px)}to{opacity:1;transform:none}}
@keyframes chPopOut{to{opacity:0;transform:scale(.92) translateY(-6px)}}
.ch-sel-pop.fresh .qm-row,.ch-sel-pop.fresh .qm-head{animation:chRowIn .32s cubic-bezier(.2,.9,.3,1) both}
.ch-sel-pop.fresh > :nth-child(1){animation-delay:.04s}.ch-sel-pop.fresh > :nth-child(2){animation-delay:.08s}.ch-sel-pop.fresh > :nth-child(3){animation-delay:.12s}.ch-sel-pop.fresh > :nth-child(4){animation-delay:.16s}.ch-sel-pop.fresh > :nth-child(5){animation-delay:.2s}.ch-sel-pop.fresh > :nth-child(6){animation-delay:.24s}.ch-sel-pop.fresh > :nth-child(7){animation-delay:.28s}
@keyframes chRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ch-sel-pop .qm-row{white-space:nowrap}
.ch-sel-pop .qm-step > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ch-sel-pop .qm-stepper{gap:6px!important;flex:none}
.ch-sel-pop .qm-stepper button{width:34px!important;height:34px!important;min-height:0!important;padding:0!important;border-radius:11px!important;display:grid!important;place-items:center;line-height:0;background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.06))!important;color:#fff;transition:transform .12s cubic-bezier(.3,1.5,.5,1)}
.ch-sel-pop .qm-stepper button:active{transform:scale(.9)}
.ch-sel-pop .qm-stepper button svg{width:16px!important;height:16px!important;stroke-width:2.6!important}
.ch-sel-pop .qm-stepper b{min-width:50px;text-align:center;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ch-sel-pop,.ch-sel-pop .qm-row,.ch-sel-pop .qm-head{animation:none!important}}

#splash-screen .sm-rabbit{animation-duration:.8s!important}
#splash-screen .sm-flag{animation-delay:.42s!important;animation-duration:.8s!important}

/* Меню вибору каналів — компактніше */
.ch-sel-pop{width:276px!important;padding:4px!important;border-radius:16px!important}
.ch-sel-pop .qm-head{padding:8px 10px 4px!important}
.ch-sel-pop .qm-head b{font-size:18px!important}
.ch-sel-pop .qm-head span{font-size:12.5px!important}
.ch-sel-pop .qm-head em{font-size:11.5px!important}
.ch-sel-pop .qm-row{padding:8px 10px!important;gap:10px!important;font-size:13.5px!important;border-radius:10px!important;min-height:0!important}
.ch-sel-pop .qm-row svg{width:18px!important;height:18px!important}
.ch-sel-pop .qm-stepper{gap:4px!important}
.ch-sel-pop .qm-stepper button{width:28px!important;height:28px!important;border-radius:9px!important}
.ch-sel-pop .qm-stepper button svg{width:14px!important;height:14px!important}
.ch-sel-pop .qm-stepper b{min-width:40px!important;font-size:12.5px!important}

/* прапор виїжджає з-за зайця: заєць поверх прапора */
#splash-screen .sm-flag{z-index:1}
#splash-screen .sm-rabbit{z-index:2}

/* Меню вибору каналів: іконки й кнопки «−/+» сірі, не кольору теми */
body:not(.desktop-platform) .ch-sel-pop .qm-row svg{color:#9a96ab!important}
body:not(.desktop-platform) .ch-sel-pop .qm-row.danger svg{color:#ff6b6b!important}
.ch-sel-pop .qm-head span{color:#9a96ab!important}
.ch-sel-pop .qm-stepper button{background:rgba(255,255,255,.08)!important;color:#c9c5d6!important}

/* Навігація: замість аватарки — значок розділу «Ще» */
body:not(.desktop-platform) .bottom-nav .nav-btn .nav-av{display:none!important}
body:not(.desktop-platform) .bottom-nav .nav-btn .has-av>svg{display:block!important}

/* Навігація в стилі Threads: плаский фон без градієнта, «+» — темна плитка; усе рахується від кольорів теми */
body:not(.desktop-platform) .bottom-nav{background:var(--bg,#101010)!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#101010))!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body:not(.desktop-platform) .bottom-nav .nav-compose,body:not(.desktop-platform) .bottom-nav .nav-compose:active{background:color-mix(in srgb,var(--text,#fff) 9%,var(--bg,#101010))!important;color:color-mix(in srgb,var(--text,#fff) 55%,var(--bg,#101010))!important;box-shadow:none!important;border:0!important;filter:none!important}
body:not(.desktop-platform) .bottom-nav .nav-compose .icon,body:not(.desktop-platform) .bottom-nav .nav-compose svg{color:inherit!important;stroke:currentColor!important}
body:not(.desktop-platform) .bottom-nav .nav-compose:active{background:color-mix(in srgb,var(--text,#fff) 14%,var(--bg,#101010))!important}

/* Без світіння під картками */
body:not(.desktop-platform) #queue-list .queue-card,body:not(.desktop-platform) #queue-list .submission-card,body:not(.desktop-platform) .queue-card,body:not(.desktop-platform) .submission-card,body:not(.desktop-platform) .queue-empty.qe2,.re-empty,body:not(.desktop-platform) .sources-tile-grid .source-tile,body:not(.desktop-platform) .queue-ttl-note{box-shadow:none!important;filter:none!important}
.pay-method-icon.pm-wallet{color:#fff;background:linear-gradient(145deg,#38bdf8,#2563eb);box-shadow:0 8px 16px -8px rgba(37,99,235,.7),inset 0 1px 0 rgba(255,255,255,.35)}

/* ===== ПК: сайдбар — спокійний плаский дизайн у кольорах теми (без карток-плиток, градієнтів і зайвих рамок) ===== */
body.desktop-platform .bottom-nav{background:color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14))!important;border-right:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.desktop-platform .sidebar-brand{padding-bottom:14px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;background:none!important}
body.desktop-platform .sidebar-brand-logo{width:38px!important;height:38px!important;object-fit:contain;filter:none!important;box-shadow:none!important;background:none!important;border-radius:0!important}
body.desktop-platform .sidebar-brand-title{font-size:20px!important;font-weight:850!important;letter-spacing:-.02em;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
body.desktop-platform .sidebar-brand-subtitle{font-size:11px!important;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 55%,var(--hint,#9aa))!important}
body.desktop-platform .sidebar-collapse-btn{background:none!important;border:0!important;box-shadow:none!important;color:var(--hint)!important;border-radius:10px!important}
body.desktop-platform .sidebar-collapse-btn:hover{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;color:#fff!important}
body.desktop-platform .sidebar-search-btn{background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;border:0!important;box-shadow:none!important;border-radius:12px!important;height:42px!important;color:var(--hint)!important}
body.desktop-platform .sidebar-search-btn:hover{background:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}
body.desktop-platform .sidebar-search-btn .sbs-kbd{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border:0!important;border-radius:7px!important;color:var(--hint)!important;font-size:11px}
body.desktop-platform .sidebar-section-label{font-size:11px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase;color:color-mix(in srgb,var(--text,#fff) 38%,transparent)!important;margin:18px 12px 6px!important}
/* основні пункти: іконка без плитки, активний — м'яка підсвітка кольору теми */
body.desktop-platform .bottom-nav .nav-btn{height:44px!important;border-radius:12px!important;background:none!important;border:0!important;box-shadow:none!important;color:color-mix(in srgb,var(--text,#fff) 62%,transparent)!important;font-size:15px!important;font-weight:650!important;gap:14px!important;transition:background .15s,color .15s}
body.desktop-platform .bottom-nav .nav-btn:hover{background:color-mix(in srgb,var(--text,#fff) 6%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn.active{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn .nav-primary-ico{background:none!important;box-shadow:none!important;border:0!important;width:24px!important;height:24px!important;min-width:24px;display:grid!important;place-items:center;color:inherit!important}
body.desktop-platform .bottom-nav .nav-btn .nav-primary-ico svg{width:22px!important;height:22px!important;color:inherit!important;stroke:currentColor!important}
body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico{color:var(--accent-2,var(--accent))!important}
body.desktop-platform .bottom-nav .nav-btn .nbadge{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important;border:0!important;box-shadow:none!important}
/* «Сервіс»: простий список замість плиток */
body.desktop-platform .sidebar-service-grid{display:flex!important;flex-direction:column!important;gap:2px!important;grid-template-columns:none!important}
body.desktop-platform .bottom-nav .nav-btn-extra{flex-direction:row!important;justify-content:flex-start!important;align-items:center;height:38px!important;min-height:0!important;padding:0 12px!important;gap:13px!important;border-radius:10px!important;background:none!important;border:0!important;box-shadow:none!important;text-align:left!important;font-size:14px!important;font-weight:600!important;color:color-mix(in srgb,var(--text,#fff) 58%,transparent)!important}
body.desktop-platform .bottom-nav .nav-btn-extra:hover{background:color-mix(in srgb,var(--text,#fff) 6%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn-extra.active{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn-extra .nav-extra-ico{background:none!important;box-shadow:none!important;border:0!important;width:20px!important;height:20px!important;min-width:20px;display:grid;place-items:center;color:inherit!important}
body.desktop-platform .bottom-nav .nav-btn-extra .nav-extra-ico svg{width:19px!important;height:19px!important;stroke:currentColor!important;color:inherit!important}
/* «Зараз» */
body.desktop-platform .sidebar-glance{background:none!important;border:0!important;box-shadow:none!important;padding:6px 12px!important}
body.desktop-platform .sidebar-glance-title{font-size:11px!important;font-weight:800!important;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--text,#fff) 38%,transparent)!important}
body.desktop-platform .sidebar-glance-row{font-size:13.5px}
/* Spotify */
body.desktop-platform .sidebar-spotify{background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important;border:0!important;box-shadow:none!important;border-radius:16px!important}
body.desktop-platform .sidebar-spotify .sp-cover{border-radius:10px!important}
body.desktop-platform .sidebar-spotify .sp-ctl:not(.sp-play){background:none!important;border:0!important;box-shadow:none!important;color:var(--hint)!important}
body.desktop-platform .sidebar-spotify .sp-ctl:not(.sp-play):hover{color:#fff!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important}
/* футер профілю */
body.desktop-platform .sidebar-footer{background:none!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border-radius:0!important;box-shadow:none!important;padding-top:12px!important}
body.desktop-platform .sidebar-footer-avatar{box-shadow:none!important;border:0!important}
body.desktop-platform .sidebar-footer-name{font-size:14.5px!important;font-weight:750!important}
body.desktop-platform .sidebar-footer-settings-btn{background:none!important;border:0!important;box-shadow:none!important;color:var(--hint)!important;border-radius:10px!important}
body.desktop-platform .sidebar-footer-settings-btn:hover{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;color:#fff!important}

/* ПК-сайдбар: без заокруглення зовнішнього краю + акуратний згорнутий режим (лише іконки по центру) */
body.desktop-platform .bottom-nav{border-radius:0!important}
body.desktop-platform .bottom-nav .nav-primary-ico::before,body.desktop-platform .bottom-nav .nav-primary-ico::after,body.desktop-platform .bottom-nav .nav-extra-ico::before,body.desktop-platform .bottom-nav .nav-extra-ico::after{display:none!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn,body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra{justify-content:center!important;width:48px!important;min-width:0!important;margin:2px auto!important;padding:0!important;gap:0!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra{height:44px!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn .nav-primary-ico{background:none!important;border-radius:0!important;box-shadow:none!important;width:24px!important;height:24px!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn .nav-primary-ico svg{width:22px!important;height:22px!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra .nav-extra-ico{width:22px!important;height:22px!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra .nav-extra-ico svg{width:21px!important;height:21px!important}
body.desktop-platform.sidebar-collapsed .sidebar-section-label{font-size:0!important;height:1px!important;margin:12px 14px!important;padding:0!important;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;overflow:hidden}
body.desktop-platform.sidebar-collapsed .sidebar-search-btn{width:48px!important;height:44px!important;margin:8px auto!important;padding:0!important;justify-content:center!important}
body.desktop-platform.sidebar-collapsed .sidebar-search-btn svg{width:20px!important;height:20px!important}
body.desktop-platform.sidebar-collapsed .sidebar-footer{flex-direction:column!important;align-items:center!important;gap:10px!important;padding:12px 0!important}
body.desktop-platform.sidebar-collapsed .sidebar-footer-avatar{width:38px!important;height:38px!important;min-width:38px!important;font-size:14px!important}
body.desktop-platform.sidebar-collapsed .sidebar-footer-settings-btn{width:40px!important;height:40px!important}
/* 2026-10-25: кнопка "Вийти з панелі" (.web-logout, рядок у .sidebar-footer для
   десктоп-застосунку — webLogoutButton() в app-beta.js) не мала власного
   згорнутого вигляду взагалі, тож у вузькій іконковій колонці підпис
   переносився в 2 рядки й вилазив за межі футера (скріншот користувача).
   Згорнуто — лише іконка, кругла кнопка в тому самому ритмі, що й аватар/шестерня. */
body.desktop-platform.sidebar-collapsed .sidebar-footer .web-logout {
  width: 40px !important; height: 40px !important; min-height: 40px; margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; flex: none;
}
body.desktop-platform.sidebar-collapsed .sidebar-footer .web-logout span { display: none; }
body.desktop-platform.sidebar-collapsed .sidebar-brand{flex-direction:column!important;align-items:center!important;gap:10px!important}
body.desktop-platform.sidebar-collapsed .sidebar-brand-logo{width:36px!important;height:36px!important}

/* ПК-сайдбар: єдиний стиль усіх пунктів (однаковий розмір/вага/іконки/активний стан), підписи секцій читаються */
body.desktop-platform:not(.sidebar-collapsed) .sidebar-section-label{display:block!important;height:auto!important;overflow:visible!important;background:none!important;margin:20px 12px 6px!important;font-size:11px!important;line-height:1.2}
body.desktop-platform .bottom-nav .nav-btn,body.desktop-platform .bottom-nav .nav-btn-extra{height:42px!important;font-size:14.5px!important;font-weight:650!important;padding:0 12px!important;gap:14px!important;border-radius:12px!important;color:color-mix(in srgb,var(--text,#fff) 60%,transparent)!important}
body.desktop-platform .bottom-nav .nav-btn:hover,body.desktop-platform .bottom-nav .nav-btn-extra:hover{background:color-mix(in srgb,var(--text,#fff) 6%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn.active,body.desktop-platform .bottom-nav .nav-btn-extra.active{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:#fff!important}
body.desktop-platform .bottom-nav .nav-btn .nav-primary-ico,body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico,body.desktop-platform .bottom-nav .nav-btn-extra .nav-extra-ico,body.desktop-platform .bottom-nav .nav-btn-extra.active .nav-extra-ico{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;filter:none!important;width:22px!important;height:22px!important;min-width:22px!important;display:grid!important;place-items:center;color:inherit!important}
body.desktop-platform .bottom-nav .nav-btn.active .nav-primary-ico,body.desktop-platform .bottom-nav .nav-btn-extra.active .nav-extra-ico{color:var(--accent-2,var(--accent))!important}
body.desktop-platform .bottom-nav .nav-btn svg,body.desktop-platform .bottom-nav .nav-btn-extra svg{width:21px!important;height:21px!important;filter:none!important;fill:none;stroke:currentColor!important;stroke-width:1.9}
body.desktop-platform .bottom-nav .nav-btn-extra .nav-extra-ico svg[fill="currentColor"] path,body.desktop-platform .bottom-nav #sidebar-aikey-btn svg path{fill:currentColor;stroke:none}

/* ПК-сайдбар: іконки й текст неактивних пунктів — суцільного (не прозорого) кольору, щоб штрихи не просвічували один крізь одного */
body.desktop-platform .bottom-nav .nav-btn:not(.active),body.desktop-platform .bottom-nav .nav-btn-extra:not(.active){color:color-mix(in srgb,var(--text,#fff) 58%,var(--bg,#101010))!important;opacity:1!important}
body.desktop-platform .bottom-nav .nav-btn:not(.active) .nav-primary-ico,body.desktop-platform .bottom-nav .nav-btn-extra:not(.active) .nav-extra-ico,body.desktop-platform .bottom-nav .nav-btn:not(.active) svg,body.desktop-platform .bottom-nav .nav-btn-extra:not(.active) svg{opacity:1!important;color:inherit!important;stroke:currentColor!important}
body.desktop-platform .bottom-nav .nav-btn:not(.active):hover,body.desktop-platform .bottom-nav .nav-btn-extra:not(.active):hover{color:#fff!important}
body.desktop-platform .bottom-nav svg *{opacity:1!important}

/* Вікно «Тех.розділ захищено»: по центру екрана, без зайвого простору, чіткі поле й кнопка */
.tech-lock-overlay{position:fixed!important;inset:0!important;display:grid!important;place-items:center!important;padding:20px;background:rgba(5,4,10,.72)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100050}
.tech-lock-panel{width:min(380px,100%)!important;margin:0!important;padding:28px 24px 24px!important;border-radius:26px!important;display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,#1b1730),#14111f)!important;border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08))!important;box-shadow:0 30px 70px -20px rgba(0,0,0,.85)!important}
.tech-lock-icon{align-self:center;width:58px!important;height:58px!important;border-radius:50%!important;display:grid;place-items:center;margin:0 0 14px!important;color:color-mix(in srgb,var(--accent) 55%,#fff)!important;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)!important}
.tech-lock-icon svg{width:26px;height:26px}
.tech-lock-title{font-size:20px!important;font-weight:850!important;letter-spacing:-.015em;margin:0 0 16px!important;color:#fff}
.tech-lock-panel #tech-lock-input{height:50px!important;box-sizing:border-box;margin:0 0 12px!important;padding:0 16px!important;border-radius:15px!important;text-align:center;font-size:17px!important;letter-spacing:.12em;background:rgba(255,255,255,.06)!important;border:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.08))!important;color:#fff;outline:0}
.tech-lock-panel #tech-lock-input::placeholder{letter-spacing:.02em;font-size:15px;color:var(--hint)}
.tech-lock-panel #tech-lock-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.tech-lock-panel #tech-lock-submit{height:50px!important;margin:0!important;border:0!important;border-radius:15px!important;font-size:15px!important;font-weight:800!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 24px -12px var(--accent-glow)!important}
.tech-lock-panel #tech-lock-status{min-height:0!important;margin:0!important;font-size:12.5px;color:#ff7a8e}
.tech-lock-panel #tech-lock-status:not(:empty){margin-top:10px!important}

/* ПК: замість суцільної помаранчевої смуги — невелика плашка «ТЕСТОВА ПАНЕЛЬ» по центру зверху, місця в макеті не займає */
body.desktop-platform #beta-banner{font-size:0!important;left:50%!important;right:auto!important;width:auto!important;transform:translateX(-50%);top:8px!important;padding:5px 14px!important;border-radius:99px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.4);white-space:nowrap}
body.desktop-platform #beta-banner::before{content:"ТЕСТОВА ПАНЕЛЬ";font:800 10.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.12em}
body.desktop-platform .app{padding-top:0!important}
body.desktop-platform .bottom-nav{margin-top:0!important;top:0!important}

/* Телефон: вкладки «Публікації / Джерела / Читачі» (і «Мої / Каталог / Спільнота») — той самий вигляд, що на ПК: капсула-перемикач із градієнтною активною вкладкою й іконками */
body:not(.desktop-platform) #content-segmented,body:not(.desktop-platform) #src-tabs{display:flex!important;gap:4px!important;padding:4px!important;margin:0 0 12px!important;border-radius:20px!important;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)!important;border:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;box-shadow:none!important}
body:not(.desktop-platform) #content-segmented .segment,body:not(.desktop-platform) #src-tabs button{flex:1 1 0!important;min-width:0;height:44px!important;display:inline-flex!important;align-items:center;justify-content:center!important;gap:7px!important;padding:0 6px!important;border:0!important;border-radius:16px!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;font-size:14px!important;font-weight:750!important;letter-spacing:-.005em;color:color-mix(in srgb,var(--text,#fff) 55%,var(--bg,#101010))!important;transition:background .2s,color .2s,box-shadow .2s}
body:not(.desktop-platform) #content-segmented .segment svg{display:inline-block!important;width:17px!important;height:17px!important;flex:none;opacity:1!important;stroke:currentColor}
body:not(.desktop-platform) #content-segmented .segment.active,body:not(.desktop-platform) #src-tabs button.on{color:#fff!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:0 8px 18px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.28)!important}
body:not(.desktop-platform) #content-segmented .segment.active::after,body:not(.desktop-platform) #src-tabs button.on::after{display:none!important}
body:not(.desktop-platform) #content-segmented .segment .nbadge{position:static!important;align-self:center!important;margin:0 0 0 2px!important;left:auto!important;top:auto!important;flex:none}
body:not(.desktop-platform) #src-tabs button em{background:none!important;opacity:.75;font-size:12px;font-weight:800;margin:0!important}
body:not(.desktop-platform) #src-tabs button.on em{opacity:.9;color:#fff!important}
@media (max-width:360px){body:not(.desktop-platform) #content-segmented .segment svg{display:none!important}}

/* Вкладки-капсули на телефоні: рівні колонки, текст і іконка вміщаються без тісноти */
body:not(.desktop-platform) #content-segmented .segment,body:not(.desktop-platform) #src-tabs button{font-size:13px!important;gap:5px!important;padding:0 4px!important;white-space:nowrap;overflow:hidden}
body:not(.desktop-platform) #content-segmented .segment svg{width:15px!important;height:15px!important}
body:not(.desktop-platform) #content-segmented,body:not(.desktop-platform) #src-tabs{gap:3px!important}
body:not(.desktop-platform) #src-tabs button em{font-size:11px!important}
@media (max-width:400px){body:not(.desktop-platform) #content-segmented .segment svg{display:none!important}}

/* Телефон, «Джерела → Мої»: розвантажено — плаский ряд «Додати джерело», компактні стоп-слова, чипи й перемикач вигляду без зайвих рамок-контейнерів */
body:not(.desktop-platform) #content-panel-sources .sm-add{padding:8px 2px!important;border-radius:14px!important;background:none!important;box-shadow:none!important;gap:12px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border-radius:0!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-ico{width:38px!important;height:38px!important;border-radius:50%!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-ico svg{width:18px!important;height:18px!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-t b{font-size:15px!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-t small{font-size:12px!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-go{background:none!important;width:22px!important;height:22px!important;padding:0!important;opacity:.6}
body:not(.desktop-platform) #content-panel-sources .settings-card{margin-top:4px!important;border-radius:16px!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-header{padding:10px 4px!important;min-height:0!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-icon{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;box-shadow:none!important;color:color-mix(in srgb,var(--accent) 55%,#fff)!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-icon svg{width:17px!important;height:17px!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-title{font-size:15px!important}
body:not(.desktop-platform) #content-panel-sources .sm-bar{gap:6px!important;margin-top:8px}
body:not(.desktop-platform) #content-panel-sources .sm-chips{padding:0!important;gap:6px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-x:auto!important}
body:not(.desktop-platform) #content-panel-sources .sm-chip{flex:none!important;height:34px!important;padding:0 12px!important;border-radius:999px!important;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important;border:0!important;box-shadow:none!important;font-size:13px!important;color:color-mix(in srgb,var(--text,#fff) 58%,var(--bg,#101010))!important}
body:not(.desktop-platform) #content-panel-sources .sm-chip.on{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important}
body:not(.desktop-platform) #content-panel-sources .sm-view{padding:0!important;gap:2px!important;background:none!important;border:0!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources .sm-view button{width:34px!important;height:34px!important;border-radius:11px!important;background:none!important;box-shadow:none!important;border:0!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#101010))!important}
body:not(.desktop-platform) #content-panel-sources .sm-view button.on{background:color-mix(in srgb,var(--accent) 22%,transparent)!important;color:var(--accent-2,var(--accent))!important}
body:not(.desktop-platform) #content-panel-sources #sources-search,body:not(.desktop-platform) #content-panel-sources .sm-search{height:44px!important;border-radius:14px!important}

/* Телефон «Джерела»: другий рівень вкладок — легкий текстовий ряд (не друга капсула), стоп-слова й пошук без рамок, менше шуму */
body:not(.desktop-platform) #src-tabs{padding:0!important;gap:18px!important;margin:2px 0 8px!important;background:none!important;border:0!important;border-radius:0!important;justify-content:flex-start!important}
body:not(.desktop-platform) #src-tabs button{flex:none!important;height:34px!important;padding:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;font-size:15px!important;font-weight:750!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#101010))!important;position:relative}
body:not(.desktop-platform) #src-tabs button.on{background:none!important;box-shadow:none!important;color:#fff!important}
body:not(.desktop-platform) #src-tabs button.on::after{content:""!important;display:block!important;position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent-2,var(--accent))!important;width:auto!important;transform:none!important}
body:not(.desktop-platform) #src-tabs button em{opacity:.6!important;font-size:12px!important}
body:not(.desktop-platform) #content-panel-sources .sm-add{border-bottom:0!important;padding:4px 0 8px!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-t small{display:none!important}
body:not(.desktop-platform) #content-panel-sources .settings-card{background:none!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-header{padding:8px 0!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-icon{width:30px!important;height:30px!important;min-width:30px!important}
body:not(.desktop-platform) #content-panel-sources .settings-card .settings-card-title{font-size:14.5px!important;font-weight:650!important;color:color-mix(in srgb,var(--text,#fff) 75%,var(--bg,#101010))}
body:not(.desktop-platform) #content-panel-sources .sm-bar{margin-top:10px!important}
body:not(.desktop-platform) #content-panel-sources #sources-search,body:not(.desktop-platform) #content-panel-sources .sm-search,body:not(.desktop-platform) #content-panel-sources .search-input-wrap{background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;border:0!important;box-shadow:none!important;height:42px!important;margin-top:4px}

/* Телефон «Джерела → Мої»: єдиний ритм — плоскі рядки однакової висоти без рамок і зайвих відступів */
body:not(.desktop-platform) #content-panel-sources .sw2{margin:0 0 6px!important;border-radius:0!important;background:none!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important}
body:not(.desktop-platform) #content-panel-sources .sw2-head{padding:9px 2px!important;gap:12px!important}
body:not(.desktop-platform) #content-panel-sources .sw2-ico{width:34px!important;height:34px!important;border-radius:50%!important;color:color-mix(in srgb,var(--accent) 55%,#fff)!important;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;box-shadow:none!important}
body:not(.desktop-platform) #content-panel-sources .sw2-ico svg{width:17px!important;height:17px!important}
body:not(.desktop-platform) #content-panel-sources .sw2-t b{font-size:15px!important;font-weight:700!important}
body:not(.desktop-platform) #content-panel-sources .sw2-chev{background:none!important;width:22px!important;height:22px!important;padding:0!important;opacity:.6}
body:not(.desktop-platform) #content-panel-sources .sm-add{margin:0!important;padding:8px 2px!important;min-height:0!important}
body:not(.desktop-platform) #content-panel-sources .sm-add-t b{font-size:15px!important;font-weight:700!important}
body:not(.desktop-platform) #content-panel-sources .sm-bar{margin-top:12px!important}
body:not(.desktop-platform) #src-tabs{margin:0 0 10px!important}

/* Телефон: чипи-фільтри прибрано; перемикач вигляду — праворуч у ряду вкладок і лише на «Мої» */
body:not(.desktop-platform) #content-panel-sources .sm-bar{display:none!important}
body:not(.desktop-platform) #src-tabs{align-items:center}
body:not(.desktop-platform) #src-tabs .sm-view{display:none!important;margin-left:auto;flex:none;padding:0!important;gap:2px!important;background:none!important;border:0!important;box-shadow:none!important}
body:not(.desktop-platform) #src-tabs:has(button[data-p="own"].on) .sm-view{display:flex!important}
body:not(.desktop-platform) #src-tabs .sm-view button{width:34px!important;height:34px!important;border-radius:11px!important;display:grid;place-items:center;padding:0!important;background:none!important;box-shadow:none!important;border:0!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#101010))!important}
body:not(.desktop-platform) #src-tabs .sm-view button.on{background:color-mix(in srgb,var(--accent) 22%,transparent)!important;color:var(--accent-2,var(--accent))!important}
body:not(.desktop-platform) #src-tabs .sm-view button svg{width:18px!important;height:18px!important}

/* Перемикач вигляду у ряду вкладок: однакові квадратні кнопки */
body:not(.desktop-platform) #src-tabs .sm-view{align-items:center;gap:4px!important}
body:not(.desktop-platform) #src-tabs .sm-view button,body:not(.desktop-platform) #src-tabs .sm-view button.on{flex:none!important;width:36px!important;height:36px!important;min-width:36px!important;padding:0!important;border-radius:11px!important;font-size:0!important;position:static!important;overflow:visible!important}
body:not(.desktop-platform) #src-tabs .sm-view button::after,body:not(.desktop-platform) #src-tabs .sm-view button.on::after{display:none!important;content:none!important}

/* «Додати джерело» і «Стоп-слова» — один блок-картка з двох рядів */
body:not(.desktop-platform) #content-panel-sources .sm-add{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035)),color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.025)))!important;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.07))!important;border-bottom:0!important;border-radius:20px 20px 0 0!important;padding:10px 14px!important;margin:0!important}
body:not(.desktop-platform) #content-panel-sources .sw2{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.025)),color-mix(in srgb,var(--accent) 3%,rgba(255,255,255,.02)))!important;border:1px solid color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.07))!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border-radius:0 0 20px 20px!important;margin:0 0 14px!important;padding:0 14px!important}
body:not(.desktop-platform) #content-panel-sources .sw2-head{padding:9px 0!important}

/* Ряд «Мої · Каталог · Спільнота» + перемикач вигляду — усе вміщається в ширину без виходу за край */
body:not(.desktop-platform) #src-tabs{gap:12px!important;flex-wrap:nowrap!important;overflow:hidden}
body:not(.desktop-platform) #src-tabs button:not([data-v]){font-size:14px!important;gap:4px!important}
body:not(.desktop-platform) #src-tabs button em{font-size:11px!important}
body:not(.desktop-platform) #src-tabs .sm-view{gap:2px!important;margin-left:auto!important;flex:none!important}
body:not(.desktop-platform) #src-tabs .sm-view button,body:not(.desktop-platform) #src-tabs .sm-view button.on{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;box-sizing:border-box}
body:not(.desktop-platform) #src-tabs .sm-view button svg{width:17px!important;height:17px!important}

/* «Додати джерело» + «Стоп-слова» — два акуратні кнопки в одному ряду */
body:not(.desktop-platform) #content-panel-sources .sm-actions{display:grid!important;grid-template-columns:1.25fr 1fr;gap:10px;margin:0 0 14px}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add{height:54px!important;min-height:0!important;margin:0!important;padding:0 14px!important;gap:10px!important;border:0!important;border-radius:16px!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important;color:#fff!important;justify-content:center}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-ico{width:24px!important;height:24px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-ico svg{width:22px!important;height:22px!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-t{flex:0 1 auto!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-t b{font-size:14.5px!important;color:#fff;white-space:nowrap}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-t small,body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-go{display:none!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2{display:contents!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-head{height:54px;box-sizing:border-box;padding:0 12px!important;gap:9px!important;border-radius:16px!important;background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.06))!important;justify-content:center}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-ico{width:26px!important;height:26px!important;background:none!important;color:color-mix(in srgb,var(--accent) 55%,#fff)!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-t{flex:0 1 auto!important;min-width:0}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-t b{font-size:14.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-t small{display:none!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-chev{width:18px!important;height:18px!important;flex:none;margin-left:2px}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-wrap{grid-column:1/-1}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2.open .sw2-body{margin-top:8px;padding:12px!important;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06))}

/* Перемикач вигляду в «Мої»: просто іконки без плиток; активна — кольору теми */
body:not(.desktop-platform) #src-tabs .sm-view button,body:not(.desktop-platform) #src-tabs .sm-view button.on{background:none!important;box-shadow:none!important}
body:not(.desktop-platform) #src-tabs .sm-view button.on{color:var(--accent-2,var(--accent))!important}

/* ряд двох кнопок — не ширший за екран */
body:not(.desktop-platform) #content-panel-sources .sm-actions{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;width:100%;box-sizing:border-box}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add,body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-head{min-width:0!important;width:100%;box-sizing:border-box;padding:0 10px!important;gap:7px!important;overflow:hidden}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-t b,body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-t b{font-size:14px!important;overflow:hidden;text-overflow:ellipsis}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-chev{display:none!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-ico{width:20px!important;height:20px!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sm-add-ico svg{width:19px!important;height:19px!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-ico{width:22px!important;height:22px!important}
body:not(.desktop-platform) #content-panel-sources .sm-actions .sw2-ico svg{width:19px!important;height:19px!important}

/* ряд кнопок — під головними вкладками, лише на «Мої»; у шапці ряд тепер поза панеллю, тож селектори без #content-panel-sources */
body:not(.desktop-platform) .sm-actions{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin:0 0 10px;width:100%;box-sizing:border-box}
body:has(#src-tabs button[data-p="own"]:not(.on)) .sm-actions,body:has(#content-panel-sources[style*="display: none"]) .sm-actions,body:has(#content-panel-sources[style*="display:none"]) .sm-actions{display:none!important}
body:not(.desktop-platform) .sm-actions .sm-add{height:54px!important;min-height:0!important;margin:0!important;padding:0 10px!important;gap:7px!important;border:0!important;border-radius:16px!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)!important;color:#fff!important;justify-content:center;min-width:0;width:100%;box-sizing:border-box;overflow:hidden}
body:not(.desktop-platform) .sm-actions .sm-add-ico{width:20px!important;height:20px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
body:not(.desktop-platform) .sm-actions .sm-add-ico svg{width:19px!important;height:19px!important}
body:not(.desktop-platform) .sm-actions .sm-add-t{flex:0 1 auto!important;min-width:0}
body:not(.desktop-platform) .sm-actions .sm-add-t b{font-size:14px!important;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.desktop-platform) .sm-actions .sm-add-t small,body:not(.desktop-platform) .sm-actions .sm-add-go,body:not(.desktop-platform) .sm-actions .sw2-t small,body:not(.desktop-platform) .sm-actions .sw2-chev{display:none!important}
body:not(.desktop-platform) .sm-actions .sw2{display:contents!important}
body:not(.desktop-platform) .sm-actions .sw2-head{height:54px;box-sizing:border-box;width:100%;min-width:0;padding:0 10px!important;gap:7px!important;border-radius:16px!important;background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.06))!important;justify-content:center;overflow:hidden}
body:not(.desktop-platform) .sm-actions .sw2-ico{width:22px!important;height:22px!important;background:none!important;box-shadow:none!important;color:color-mix(in srgb,var(--accent) 55%,#fff)!important}
body:not(.desktop-platform) .sm-actions .sw2-ico svg{width:19px!important;height:19px!important}
body:not(.desktop-platform) .sm-actions .sw2-t{flex:0 1 auto!important;min-width:0}
body:not(.desktop-platform) .sm-actions .sw2-t b{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.desktop-platform) .sm-actions .sw2-wrap{grid-column:1/-1}
body:not(.desktop-platform) .sm-actions .sw2.open .sw2-body{margin-top:2px;padding:12px!important;border-radius:16px;background:color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,rgba(255,255,255,.06))}

/* Єдиний вигляд полів пошуку: заокруглена плашка з тоном теми, тонка рамка, іконка лупи зліва */
.rec-search,.search-input-wrap,.sh-search,.k2-search,body #content-panel-sources .rec-search,body #content-panel-sources .search-input-wrap,body:not(.desktop-platform) #content-panel-sources .rec-search,body:not(.desktop-platform) #content-panel-sources .search-input-wrap{display:flex!important;align-items:center;gap:12px;height:48px!important;min-height:0!important;box-sizing:border-box;padding:0 16px!important;border-radius:16px!important;background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035))!important;border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.07))!important;box-shadow:none!important;margin-top:0}
.rec-search:focus-within,.search-input-wrap:focus-within,.sh-search:focus-within,.k2-search:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)!important}
.rec-search svg,.search-input-wrap svg,.sh-search svg,.k2-search svg,.search-input-icon{flex:none;width:20px!important;height:20px!important;position:static!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#101010))!important}
.rec-search input,.search-input-wrap input,.sh-search input,.k2-search input{flex:1;min-width:0;height:100%!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;font-size:16px!important;color:var(--text)!important}
.rec-search input::placeholder,.search-input-wrap input::placeholder,.sh-search input::placeholder,.k2-search input::placeholder{color:color-mix(in srgb,var(--text,#fff) 48%,var(--bg,#101010))}
/* поля без обгортки (пошук своїх джерел, спільноти) — та сама плашка, відступ під іконку лупи */
input#sources-search,input#community-sources-search{height:48px!important;box-sizing:border-box;padding:0 16px 0 46px!important;border-radius:16px!important;background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a96ab' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center/20px!important;border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.07))!important;box-shadow:none!important;font-size:16px!important}
input#sources-search:focus,input#community-sources-search:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)!important}
body:not(.desktop-platform) #content-panel-sources #sources-search{height:48px!important;background-color:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035))!important}

/* «Джерела → Мої»: підпис кнопки скорочено, поле пошуку з лупою й текстом зліва, щільніші відступи */
body:not(.desktop-platform) #content-panel-sources input#sources-search{display:block;width:100%;text-align:left!important;padding:0 16px 0 46px!important;height:48px!important;box-sizing:border-box;margin:6px 0 10px!important;border-radius:16px!important;background-color:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035))!important;border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.07))!important}
body:not(.desktop-platform) .sm-actions{margin:0 0 4px!important}
body:not(.desktop-platform) #src-tabs{margin:2px 0 4px!important}

/* лупа в полях пошуку без обгортки: окремі background-* з !important, щоб ранні правила `background:…!important` її не стирали */
body #content-panel-sources input#sources-search,body input#sources-search,body input#community-sources-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29db5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:15px center!important;background-size:20px 20px!important;padding-left:46px!important}

/* лупа: специфічність вища за ранні `background:…!important` для #sources-search на телефоні */
body:not(.desktop-platform) #content-panel-sources input#sources-search,body:not(.desktop-platform) #content-panel-sources #sources-search:not(:focus),body:not(.desktop-platform) #content-panel-sources #sources-search:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29db5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:15px center!important;background-size:20px 20px!important}
/* вкладки «Мої · Каталог · Спільнота» ближче до кнопок над ними */
body:not(.desktop-platform) .sm-actions{margin-bottom:0!important}
body:not(.desktop-platform) #src-tabs{margin:0 0 2px!important;min-height:0!important;height:34px}
body:not(.desktop-platform) #src-tabs button:not([data-v]){height:30px!important}

/* «Каталог» / «Спільнота»: вкладки одразу під головними, активна з підкресленням */
body:not(.desktop-platform) #content-panel-sources{margin-top:6px!important}
body:not(.desktop-platform) #src-tabs{margin:0 0 8px!important;height:auto!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;padding-bottom:0!important}
body:not(.desktop-platform) #src-tabs button:not([data-v]){position:relative!important;height:36px!important}
body:not(.desktop-platform) #src-tabs button.on:not([data-v])::after{content:""!important;display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;height:2px!important;width:auto!important;border-radius:2px 2px 0 0!important;background:var(--accent-2,var(--accent))!important;transform:none!important}

/* вкладки «Мої · Каталог · Спільнота» — три рівні колонки на всю ширину, без порожніх проміжків по боках */
body:not(.desktop-platform) #src-tabs{gap:0!important;justify-content:stretch!important}
body:not(.desktop-platform) #src-tabs button:not([data-v]){flex:1 1 0!important;min-width:0!important;justify-content:center!important;padding:0 2px!important}
body:not(.desktop-platform) #src-tabs button.on:not([data-v])::after{left:10%!important;right:10%!important}
body:not(.desktop-platform) #src-tabs .sm-view{margin-left:6px!important}

/* Вкладки «Мої · Каталог · Спільнота» + вигляд: однакова розкладка на всіх трьох вкладках, нічого не обрізається й не перекривається */
body:not(.desktop-platform) #src-tabs{display:flex!important;align-items:center;overflow:visible!important}
body:not(.desktop-platform) #src-tabs button:not([data-v]){flex:1 1 auto!important;min-width:0!important;font-size:13px!important;gap:3px!important;padding:0 6px!important;white-space:nowrap;overflow:visible!important}
body:not(.desktop-platform) #src-tabs button:not([data-v]) em{font-size:11px!important}
body:not(.desktop-platform) #src-tabs .sm-view{display:flex!important;visibility:hidden;flex:none!important;margin-left:4px!important;gap:0!important}
body:not(.desktop-platform) #src-tabs:has(button[data-p="own"].on) .sm-view{visibility:visible}
body:not(.desktop-platform) #src-tabs .sm-view button,body:not(.desktop-platform) #src-tabs .sm-view button.on{width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important}
body:not(.desktop-platform) #src-tabs .sm-view button svg{width:16px!important;height:16px!important}
body:not(.desktop-platform) #src-tabs button.on:not([data-v])::after{left:6px!important;right:6px!important}

/* пошук у «Спільноті»: така сама плашка з лупою, що й в інших полях */
body:not(.desktop-platform) #content-panel-communities input#community-sources-search,body:not(.desktop-platform) input#community-sources-search,body input#community-sources-search{display:block;width:100%;height:48px!important;box-sizing:border-box;text-align:left!important;padding:0 16px 0 46px!important;border-radius:16px!important;background-color:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.035))!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29db5' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:15px center!important;background-size:20px 20px!important;border:1px solid color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.07))!important;margin-bottom:10px!important}

/* «Мої» не чіпаємо; на «Каталог» і «Спільнота» значків вигляду немає, тож вкладки — три рівні колонки на всю ширину без порожнього місця збоку */
body:not(.desktop-platform) #src-tabs:not(:has(button[data-p="own"].on)) .sm-view{display:none!important}
body:not(.desktop-platform) #src-tabs:not(:has(button[data-p="own"].on)) button:not([data-v]){flex:1 1 0!important;justify-content:center!important}
body:not(.desktop-platform) #src-tabs:not(:has(button[data-p="own"].on)) button.on:not([data-v])::after{left:12%!important;right:12%!important}

/* лупа як окремий елемент */
.sf-wrap{position:relative;display:block}
.sf-wrap .sf-ico{position:absolute;left:16px;top:24px;transform:translateY(-50%);width:20px;height:20px;pointer-events:none;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#101010));z-index:2}
.sf-wrap .sf-ico svg{width:100%;height:100%;display:block}
.sf-wrap input{padding-left:46px!important;background-image:none!important}

/* одна лупа: фонову картинку в полях усередині .sf-wrap вимикаємо (специфічність вища за правила з картинкою) */
body:not(.desktop-platform) #content-panel-sources .sf-wrap input#sources-search,body:not(.desktop-platform) #content-panel-sources .sf-wrap input#community-sources-search,body:not(.desktop-platform) #content-panel-sources .sf-wrap #sources-search:not(:focus),body:not(.desktop-platform) #content-panel-sources .sf-wrap #sources-search:focus,body:not(.desktop-platform) .sf-wrap input#community-sources-search,body .sf-wrap input#community-sources-search,body .sf-wrap input#sources-search{background-image:none!important}

/* лупа по центру поля: відступи переносимо з поля на обгортку */
.sf-wrap{margin:6px 0 10px!important}
body #content-panel-sources .sf-wrap input,body .sf-wrap input#sources-search,body .sf-wrap input#community-sources-search{margin:0!important}

/* ===== Значки профілю ===== */
.bdg{display:inline-grid;place-items:center;width:30px;height:30px;flex:none}
.bdg svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.bdg.locked{filter:grayscale(1);opacity:.38}
.profile-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:10px auto 2px;padding:8px 14px;min-height:30px;max-width:92%;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
.profile-badges:active{transform:scale(.97);background:rgba(255,255,255,.07)}
.profile-badges .bdg{width:32px;height:32px}
.profile-badges-none{font-size:12.5px;color:var(--hint);text-align:center;line-height:1.35}
.lb-bd{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.lb-bd .bdg{width:16px;height:16px}
.bdg-overlay .bdg-sheet{max-height:86vh;overflow-y:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.bdg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 14px}
.bdg-head b{display:block;font-size:26px;font-weight:850;letter-spacing:-.02em}
.bdg-head span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--hint);max-width:30ch}
.bdg-list{display:flex;flex-direction:column}
.bdg-row{display:flex;align-items:center;gap:14px;padding:12px 2px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.bdg-row:first-child{border-top:0}
.bdg-row .bdg{width:46px;height:46px}
.bdg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bdg-txt b{font-size:15.5px;font-weight:800}
.bdg-txt span{font-size:12.5px;color:var(--hint)}
.bdg-txt small{font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--accent) 55%,#fff)}
.bdg-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px}
.bdg-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent-deep,var(--accent)),var(--accent-2,var(--accent)))}
.bdg-row em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#34d399}
.bdg-overlay.closing{opacity:0;transition:opacity .2s}

/* значки: керування суперадміна */
.bdg-admin{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.06))}
.bdg-admin b{display:block;font-size:14px;font-weight:800}
.bdg-admin span{display:block;font-size:12.5px;color:var(--hint);margin-top:2px}
.bdg-sw{position:relative;flex:none;width:46px;height:28px;display:inline-block;cursor:pointer}
.bdg-sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.bdg-sw i{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);transition:background .2s}
.bdg-sw i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.bdg-sw input:checked + i{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bdg-sw input:checked + i::after{transform:translateX(18px)}
.bdg-row.off{opacity:.5}

/* лупа по центру: у поля всередині обгортки не має бути власних вертикальних відступів (ранні правила з #id їх задавали) */
body:not(.desktop-platform) #content-panel-sources .sf-wrap input#sources-search,body:not(.desktop-platform) #content-panel-sources .sf-wrap input#community-sources-search,body:not(.desktop-platform) .sf-wrap input{margin:0!important}
.sf-wrap .sf-ico{display:block}

/* ===== Налаштування (мова, тема, вхід, звуки): акуратний єдиний вигляд у кольорах теми ===== */
#appearance-settings-card .set-group{border-radius:24px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,rgba(255,255,255,.035)),rgba(255,255,255,.02))!important;border:1px solid color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.07))!important;box-shadow:none!important}
#appearance-settings-card .set-title{font-weight:750!important}
#appearance-settings-card .set-sublabel{font-size:11.5px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 55%,var(--hint,#9aa))!important}
#appearance-settings-card .lang-current-row{height:52px;border-radius:16px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;border:0!important;box-shadow:none!important}
#appearance-settings-card .lang-current-row:active{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
#appearance-settings-card .theme-grid .segment{border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important;border:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;box-shadow:none!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1),border-color .2s}
#appearance-settings-card .theme-grid .segment:active{transform:scale(.97)}
#appearance-settings-card .theme-grid .segment.active{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;background:color-mix(in srgb,var(--accent) 8%,transparent)!important}
#appearance-settings-card .set-row{border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important}
#appearance-settings-card .set-desc{font-size:12.5px!important;line-height:1.4}
#appearance-settings-card .ios-switch{background:rgba(255,255,255,.14)!important;box-shadow:none!important}
#appearance-settings-card .ios-switch.on{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important}

/* значок корзини на кнопці — лише в діалогах видалення, не в усіх небезпечних підтвердженнях */
.confirm-dialog.ios-alert:not(.is-delete) .confirm-dialog-actions .pill.danger::before{display:none!important}

/* Налаштування на телефоні: вікно-шторка з плавним відкриттям і закриттям */
.settings-sheet-ov{position:fixed;inset:0;z-index:100040;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,4,10,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:ssOvIn .28s ease both}
.settings-sheet-ov.closing{animation:ssOvOut .24s ease both}
.settings-sheet{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;scrollbar-width:none;border-radius:28px 28px 0 0;padding:0 14px calc(22px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,#17131f),#100d18);border:1px solid color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.08));border-bottom:0;box-shadow:0 -24px 60px -20px rgba(0,0,0,.8);animation:ssSheetIn .42s cubic-bezier(.2,.95,.3,1.02) both}
.settings-sheet::-webkit-scrollbar{display:none}
.settings-sheet-ov.closing .settings-sheet{animation:ssSheetOut .26s cubic-bezier(.4,0,.8,.4) both}
.settings-sheet .ss-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 12px;background:linear-gradient(180deg,#17131f 70%,transparent)}
.settings-sheet .ss-head b{font-size:24px;font-weight:850;letter-spacing:-.02em}
.settings-sheet #appearance-settings-card > .set-label,.settings-sheet #appearance-settings-card .set-group > .set-head{display:none!important}
.settings-sheet #appearance-settings-card .set-group{margin:0!important}
@keyframes ssOvIn{from{opacity:0}to{opacity:1}}
@keyframes ssOvOut{to{opacity:0}}
@keyframes ssSheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes ssSheetOut{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.settings-sheet-ov,.settings-sheet{animation-duration:.01s!important}}

/* ===== Шторка «Налаштування»: плоска, секціями-картками ===== */
.settings-sheet #appearance-settings-card .set-group{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.settings-sheet #appearance-settings-card .set-group.set-group-pad{padding:0!important}
.settings-sheet #appearance-settings-card .set-block{margin:0 0 14px!important;padding:14px!important;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.settings-sheet #appearance-settings-card .set-sublabel{margin:0 0 10px!important}
.settings-sheet #appearance-settings-card .lang-current-row{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)!important}
.settings-sheet #appearance-settings-card .theme-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.settings-sheet #appearance-settings-card .theme-grid .segment{padding:8px 6px 9px!important;border-radius:16px!important;min-width:0}
.settings-sheet #appearance-settings-card .theme-grid .theme-swatch{height:44px!important;border-radius:11px!important}
.settings-sheet #appearance-settings-card .theme-grid .theme-tile-label{font-size:11.5px!important;font-weight:750!important;margin-top:6px}
.settings-sheet #appearance-settings-card .set-row{margin:0 0 8px!important;padding:12px 14px!important;border:0!important;border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.settings-sheet #appearance-settings-card .set-row:last-child{margin-bottom:0!important}

/* ===== Вибір мови: над шторкою налаштувань, плавне відкриття, акуратні рядки ===== */
#language-modal{z-index:100060!important}
#language-modal{animation:langOvIn .22s ease both}
#language-modal .modal-sheet{animation:langSheetIn .36s cubic-bezier(.2,1.1,.3,1) both}
@keyframes langOvIn{from{opacity:0}to{opacity:1}}
@keyframes langSheetIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
#language-modal .lang-option-row{margin-top:8px;border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;border:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;transition:background .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
#language-modal .lang-option-row:active{transform:scale(.98)}
#language-modal .lang-option-row.active{background:color-mix(in srgb,var(--accent) 14%,transparent)!important;box-shadow:inset 0 0 0 1.5px var(--accent)!important}
#language-modal .lang-option-check{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important}
@media (prefers-reduced-motion:reduce){#language-modal,#language-modal .modal-sheet{animation:none!important}}


/* ===== Шторка «Налаштування» в стилі iOS: сірий фон, білі згруповані блоки, рядки з роздільниками ===== */
.settings-sheet-ov .settings-sheet{background:color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14))!important;border:0!important;border-radius:26px 26px 0 0!important}
.settings-sheet .ss-head{background:none!important;padding:4px 2px 10px!important}
.settings-sheet .ss-head b{font-size:22px!important}
.settings-sheet #appearance-settings-card,.settings-sheet #appearance-settings-card .set-group,.settings-sheet #appearance-settings-card .set-group.set-group-pad{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important}
.settings-sheet #appearance-settings-card .set-block{margin:0 0 16px!important;padding:12px 14px!important;border-radius:14px!important;background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14))!important;box-shadow:none!important;border:0!important}
.settings-sheet #appearance-settings-card .set-sublabel{margin:0 0 8px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--hint)!important}
.settings-sheet #appearance-settings-card .lang-current-row{height:44px!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.settings-sheet #appearance-settings-card .theme-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.settings-sheet #appearance-settings-card .theme-grid .segment{padding:6px 4px 8px!important;border-radius:12px!important;background:none!important;border:0!important;box-shadow:none!important}
.settings-sheet #appearance-settings-card .theme-grid .segment.active{box-shadow:0 0 0 2px var(--accent)!important;background:none!important}
.settings-sheet #appearance-settings-card .theme-grid .theme-swatch{height:40px!important;border-radius:9px!important}
.settings-sheet #appearance-settings-card .set-row{display:flex!important;align-items:center;gap:13px;margin:0!important;padding:12px 14px!important;min-height:56px;border:0!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;border-radius:0!important;background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14))!important;box-shadow:none!important}
.settings-sheet #appearance-settings-card .set-block + .set-row{border-top:0!important;border-radius:14px 14px 0 0!important}
.settings-sheet #appearance-settings-card .set-row:last-child{border-radius:0 0 14px 14px!important}
.settings-sheet #appearance-settings-card .set-ico{width:32px!important;height:32px!important;min-width:32px!important;border-radius:8px!important;color:#fff!important;background:linear-gradient(160deg,var(--c1,#8e8e93),var(--c2,#636366))!important;box-shadow:none!important}
.settings-sheet #appearance-settings-card .set-title{font-size:16.5px!important;font-weight:500!important}
.settings-sheet #appearance-settings-card .set-desc{font-size:12.5px!important;color:var(--hint)!important}
/* «Налаштування» на «Ще» — плитка в «Сервіс»; сама картка живе лише у шторці */
body:not(.desktop-platform) #tab-profile #appearance-settings-card{display:none!important}

/* сповіщення у шторці налаштувань */
.settings-sheet .ss-notify{margin-top:16px}
.settings-sheet .ss-notify-label{margin:0 4px 8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hint)}
.settings-sheet .ss-notify-list{border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14))}
.settings-sheet .ss-nrow{display:flex;align-items:center;gap:13px;min-height:56px;padding:12px 14px;cursor:pointer;border-top:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.settings-sheet .ss-nrow:first-child{border-top:0}
.settings-sheet .ss-nrow .set-ico{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--c1),var(--c2))}
.settings-sheet .ss-nrow .set-ico svg{width:18px;height:18px}
.settings-sheet .ss-nrow .set-body{flex:1;min-width:0}
.settings-sheet .ss-nrow .set-title{font-size:16px;font-weight:500}
.settings-sheet .ss-nrow .set-desc{font-size:12.5px;color:var(--hint);margin-top:1px}
.settings-sheet .ss-nrow:active{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}

/* Вибір мови з шторки налаштувань — друга шторка, що виїжджає знизу поверх першої (не окреме центральне вікно) */
body.ss-open #language-modal{align-items:flex-end!important;justify-content:center!important;padding:0!important;background:rgba(5,4,10,.5)!important}
body.ss-open #language-modal .modal-sheet{width:100%!important;max-width:560px!important;border-radius:26px 26px 0 0!important;margin:0!important;padding:8px 14px calc(20px + env(safe-area-inset-bottom,0px))!important;background:color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14))!important;border:0!important;box-shadow:0 -24px 60px -20px rgba(0,0,0,.85)!important;max-height:80vh;animation:ssSheetIn .4s cubic-bezier(.2,.95,.3,1.02) both!important}
body.ss-open #language-modal .lang-head-ico{display:none!important}
body.ss-open #language-modal .modal-header{margin:4px 0 12px!important}
body.ss-open #language-modal .lang-head{font-size:22px!important;font-weight:850!important}
body.ss-open #language-modal #language-modal-list{border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14))}
body.ss-open #language-modal .lang-option-row{margin:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;padding:13px 14px!important}
body.ss-open #language-modal .lang-option-row:first-child{border-top:0!important}
body.ss-open #language-modal .lang-option-row.active{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}

/* ===== Налаштування у стилі ChatGPT: повний екран, секції з підписами, згруповані рядки з лінійними іконками, значення справа ===== */
.settings-sheet-ov:not(.ss-picker) .settings-sheet{max-width:none!important;width:100%!important;height:100%!important;max-height:100%!important;border-radius:0!important;padding:0 16px calc(28px + env(safe-area-inset-bottom,0px))!important;background:var(--bg,#0b0a14)!important;box-shadow:none!important;animation:ssSheetIn .4s cubic-bezier(.2,.95,.3,1.02) both}
.settings-sheet-ov:not(.ss-picker){align-items:stretch;background:var(--bg,#0b0a14)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.settings-sheet-ov:not(.ss-picker) .sheet-grabber{display:none}
.settings-sheet-ov:not(.ss-picker) .ss-head{padding:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 54px) 0 6px!important;background:var(--bg,#0b0a14)!important}
.settings-sheet-ov:not(.ss-picker) .ss-head b{font-size:28px!important;letter-spacing:-.02em}
.settings-sheet .ss-sec{margin:26px 4px 10px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:color-mix(in srgb,var(--text,#fff) 62%,var(--bg,#0b0a14))}
.settings-sheet .ss-group,.settings-sheet #appearance-settings-card,.settings-sheet .ss-notify-list{border-radius:18px!important;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))!important;box-shadow:none!important;border:0!important}
.settings-sheet .ss-row{position:relative;display:flex;align-items:center;gap:14px;min-height:54px;padding:10px 16px;cursor:pointer}
.settings-sheet .ss-row + .ss-row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.settings-sheet .ss-row:active{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.settings-sheet .ss-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--text,#fff)}
.settings-sheet .ss-ic svg{width:24px;height:24px}
.settings-sheet .ss-lb{flex:1;min-width:0;font-size:17px;font-weight:400;letter-spacing:-.01em}
.settings-sheet .ss-val{flex:none;font-size:17px;color:color-mix(in srgb,var(--text,#fff) 55%,var(--bg,#0b0a14));max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.settings-sheet .ss-chev{flex:none;width:20px;height:20px;color:color-mix(in srgb,var(--text,#fff) 45%,var(--bg,#0b0a14))}
/* картка з перемикачами: прибираємо мову/тему (є зверху), решта — такі ж рядки з лінійними іконками */
.settings-sheet #appearance-settings-card .set-block,.settings-sheet #appearance-settings-card .set-head,.settings-sheet #appearance-settings-card > .set-label{display:none!important}
.settings-sheet #appearance-settings-card .set-row,.settings-sheet .ss-nrow{background:none!important;border:0!important;border-radius:0!important;min-height:54px;padding:10px 16px!important;gap:14px!important;position:relative}
.settings-sheet #appearance-settings-card .set-row + .set-row::before,.settings-sheet .ss-nrow + .ss-nrow::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.settings-sheet #appearance-settings-card .set-row:first-of-type::before{display:none}
.settings-sheet #appearance-settings-card .set-ico,.settings-sheet .ss-nrow .set-ico{width:26px!important;height:26px!important;min-width:26px!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;color:var(--text,#fff)!important}
.settings-sheet #appearance-settings-card .set-ico svg,.settings-sheet .ss-nrow .set-ico svg{width:24px!important;height:24px!important}
.settings-sheet #appearance-settings-card .set-title,.settings-sheet .ss-nrow .set-title{font-size:17px!important;font-weight:400!important}
.settings-sheet #appearance-settings-card .set-desc,.settings-sheet .ss-nrow .set-desc{font-size:13px!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#0b0a14))!important}
.settings-sheet .ss-notify{margin-top:0}
/* вибір теми — маленька шторка */
.ss-picker .ss-pk-sheet{max-width:560px!important}
.ss-picker .ss-pk-row{min-height:56px}
.ss-picker .ss-sw{flex:none;width:34px;height:34px;border-radius:10px}
.ss-picker .ss-chk{width:22px;height:22px;color:var(--accent-2,var(--accent))}
.ss-picker{z-index:100070}

/* сповіщення тільки в налаштуваннях — плитку в «Сервіс» і рядок на ПК прибрано */
body #profile-notify-row,body #desktop-notify-row{display:none!important}

/* ===== Шторка налаштувань: без смикання + однаковий стиль рядків (підвищена специфічність) ===== */
body.ss-open{overflow:hidden!important;touch-action:none}
body.ss-open .settings-sheet{touch-action:pan-y}
body .settings-sheet-ov .settings-sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;will-change:transform;transform:translateZ(0)}
body .settings-sheet #appearance-settings-card,body .settings-sheet #appearance-settings-card *{transition:none!important}
body .settings-sheet #appearance-settings-card .set-group,body .settings-sheet #appearance-settings-card .set-group.is-collapsed,body .settings-sheet #appearance-settings-card .set-group.is-closing{height:auto!important;max-height:none!important;overflow:hidden!important;opacity:1!important;transform:none!important}
body .settings-sheet #appearance-settings-card .set-group.is-collapsed .set-row{display:flex!important;opacity:1!important;max-height:none!important;height:auto!important;transform:none!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row{display:flex!important;align-items:center!important;gap:14px!important;min-height:54px!important;padding:10px 16px!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row .set-ico{width:26px!important;height:26px!important;min-width:26px!important;background:none!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--text,#fff)!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row .set-ico svg{width:24px!important;height:24px!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row .set-title{font-size:17px!important;font-weight:400!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row .set-desc{font-size:13px!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#0b0a14))!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row + .set-row{border-top:0!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-row + .set-row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group{border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group > .set-head,body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-block{display:none!important}

/* Шторка налаштувань: рядки-перемикачі (.set-toggle-row) у тому ж стилі, що «Мова» і «Тема» */
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group{padding:0!important}
body .settings-sheet-ov .settings-sheet .set-toggle-row{display:flex!important;align-items:center!important;gap:14px!important;min-height:54px!important;margin:0!important;padding:10px 16px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;position:relative}
body .settings-sheet-ov .settings-sheet .set-toggle-row + .set-toggle-row::before,body .settings-sheet-ov .settings-sheet .set-toggle-row + label.set-toggle-row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
body .settings-sheet-ov .settings-sheet .set-toggle-logo{flex:none;width:26px!important;height:26px!important;min-width:26px!important;display:grid;place-items:center;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--text,#fff)!important}
body .settings-sheet-ov .settings-sheet .set-toggle-logo svg{width:24px!important;height:24px!important}
body .settings-sheet-ov .settings-sheet .set-toggle-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body .settings-sheet-ov .settings-sheet .set-toggle-title{font-size:17px!important;font-weight:400!important;letter-spacing:-.01em}
body .settings-sheet-ov .settings-sheet .set-toggle-hint{font-size:13px!important;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#0b0a14))!important;line-height:1.35}
body .settings-sheet-ov .settings-sheet .watermark-switch{flex:none;margin:0!important}
/* зайвий порожній рядок над першим пунктом */
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group > :empty,body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group > .set-sublabel{display:none!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-group > .set-head + *{border-top:0!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card #ui-scale-row{display:none!important}
/* сповіщення: підпис і опис не накладаються на перемикач */
body .settings-sheet-ov .settings-sheet .ss-nrow{align-items:center!important}
body .settings-sheet-ov .settings-sheet .ss-nrow .set-body{padding-right:6px}

/* Вибір теми: плитки-превʼю 2×2 */
.ss-picker .ss-pk-sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
.ss-picker .ss-group{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 0;background:none!important;border-radius:0!important;overflow:visible!important}
.ss-picker .ss-pk-row{position:relative;flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding:10px 10px 12px!important;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14));box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s,transform .14s cubic-bezier(.3,1.5,.5,1)}
.ss-picker .ss-pk-row::before{display:none!important}
.ss-picker .ss-pk-row:active{transform:scale(.97)}
.ss-picker .ss-pk-row.on{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg,#0b0a14))}
.ss-picker .ss-sw{display:block!important;width:100%!important;height:74px!important;border-radius:13px!important}
.ss-picker .ss-pk-row .ss-lb{flex:none;text-align:center;font-size:15px;font-weight:650}
.ss-picker .ss-chk{position:absolute;top:16px;right:16px;width:24px;height:24px;padding:4px;box-sizing:border-box;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ===== Шторка налаштувань: прибрано джерела смикання, вирівняно відступи ===== */
body.ss-open{touch-action:auto!important}
body.ss-open .settings-sheet{touch-action:auto!important}
body .settings-sheet-ov .settings-sheet{will-change:auto!important;transform:none!important;-webkit-overflow-scrolling:touch}
body .settings-sheet-ov:not(.ss-picker) .ss-head{position:static!important;padding-top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 40px)!important;padding-bottom:4px!important}
body .settings-sheet-ov:not(.ss-picker) .ss-head b{font-size:26px!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-toggle-row,body .settings-sheet-ov .settings-sheet #appearance-settings-card label.set-toggle-row{padding:10px 16px!important;margin:0!important;width:100%!important;box-sizing:border-box!important;min-height:56px!important}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .watermark-switch,body .settings-sheet-ov .settings-sheet .ss-nrow .ios-switch{margin:0!important;flex:none}
body .settings-sheet-ov .settings-sheet .ss-nrow{padding:10px 16px!important;gap:14px!important;min-height:56px!important;width:100%;box-sizing:border-box}
body .settings-sheet-ov .settings-sheet .ss-nrow .set-ico{margin:0!important;width:26px!important;min-width:26px!important;flex:none!important}
body .settings-sheet-ov .settings-sheet .ss-nrow .set-body{flex:1;min-width:0;margin:0!important}
body .settings-sheet-ov .settings-sheet .ss-nrow .set-title{font-size:17px!important;line-height:1.25}
body .settings-sheet-ov .settings-sheet .ss-nrow .set-desc{font-size:13px!important;line-height:1.35}
body .settings-sheet-ov .settings-sheet .ss-notify-list{width:100%;box-sizing:border-box}
body .settings-sheet-ov .settings-sheet #appearance-settings-card .set-toggle-row + .set-toggle-row::before,body .settings-sheet-ov .settings-sheet .ss-nrow + .ss-nrow::before{left:56px!important}
body .settings-sheet-ov .settings-sheet .ss-row{padding:10px 16px!important}

/* Годинник у шапці — лише ПК: на телефоні цього пункту немає (ані в налаштуваннях, ані в «Ще») */
body:not(.desktop-platform) #clock-enable-row,body:not(.desktop-platform) .settings-sheet #clock-enable-row{display:none!important}

/* ===== Шторка налаштувань: усі рядки — єдиний компонент .ss-row ===== */
.ss-hidden-card{display:none!important}
body .settings-sheet .ss-row{display:flex!important;align-items:center!important;gap:14px!important;min-height:56px!important;padding:10px 16px!important;margin:0!important;box-sizing:border-box;width:100%}
body .settings-sheet .ss-row .ss-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--text,#fff);background:none;margin:0}
body .settings-sheet .ss-row .ss-ic svg{width:24px;height:24px;stroke:currentColor}
body .settings-sheet .ss-row .ss-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body .settings-sheet .ss-row .ss-lb{font-size:17px;line-height:1.25;font-weight:400}
body .settings-sheet .ss-row .ss-sub{font-size:13px;line-height:1.35;color:color-mix(in srgb,var(--text,#fff) 50%,var(--bg,#0b0a14))}
body .settings-sheet .ss-row .ios-switch{flex:none;margin:0!important}
body .settings-sheet .ss-row + .ss-row::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
body .settings-sheet .ss-notify-list{border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))}

/* Spotify у бічній панелі — лише ПК */
body:not(.desktop-platform) #spotify-enable-row{display:none!important}

/* форма видачі значків (суперадмін) */
.bdg-grant{margin:0 0 12px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.bdg-grant b{display:block;font-size:14px;font-weight:800;margin-bottom:8px}
.bdg-grant-row{display:flex;gap:8px;margin-top:8px}
.bdg-grant input,.bdg-grant select{flex:1;min-width:0;height:42px;box-sizing:border-box;padding:0 12px;border-radius:12px;border:0;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);color:var(--text);font:inherit;font-size:15px}
.bdg-grant .pill{flex:1;justify-content:center;height:42px}

/* вибір користувача з бази для видачі значків */
.bdg-gres{margin-top:8px;max-height:210px;overflow-y:auto;border-radius:12px}
.bdg-gr{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:10px;cursor:pointer}
.bdg-gr:active{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.bdg-gr b,.bdg-gu b{font-size:15px;font-weight:700}
.bdg-gr small,.bdg-gu small{font-size:12px;color:var(--hint)}
.bdg-gnone{padding:10px 12px;font-size:13px;color:var(--hint)}
.bdg-gsel{margin-top:10px}
.bdg-gu{display:flex;flex-direction:column;padding:4px 2px 8px}
.bdg-grow{display:flex;align-items:center;gap:12px;padding:8px 2px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.bdg-grow .bdg{width:34px;height:34px}
.bdg-gl{flex:1;font-size:15px}
.bdg-gsel[hidden]{display:none}

/* ===== Єдиний вигляд підшторок налаштувань (мова, тема): однаковий фон, заголовок, кнопка закриття, рядки ===== */
body.ss-open #language-modal .modal-sheet,.ss-picker .ss-pk-sheet{background:var(--bg,#0b0a14)!important;border:0!important;border-radius:26px 26px 0 0!important;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px))!important;box-shadow:0 -24px 60px -20px rgba(0,0,0,.85)!important}
body.ss-open #language-modal .lang-head,.ss-picker .ss-head b{font-size:26px!important;font-weight:850!important;letter-spacing:-.02em;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;text-shadow:none!important}
body.ss-open #language-modal .modal-header,.ss-picker .ss-head{padding:6px 0 12px!important;margin:0!important;display:flex;align-items:center;justify-content:space-between}
body.ss-open #language-modal .modal-close,.ss-picker .modal-close{width:40px!important;height:40px!important;border-radius:12px!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border:0!important;box-shadow:none!important;display:grid;place-items:center}
body.ss-open #language-modal .modal-close svg,.ss-picker .modal-close svg{width:20px;height:20px}
body.ss-open #language-modal #language-modal-list{border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))!important}
body.ss-open #language-modal .lang-option-row{min-height:60px;padding:10px 16px!important;gap:14px!important;position:relative}
body.ss-open #language-modal .lang-option-row .lang-option-flag{width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;box-shadow:none!important;border:0!important;outline:0!important;padding:0!important}
body.ss-open #language-modal .lang-option-row .lang-option-flag img{width:100%;height:100%;border-radius:50%;object-fit:cover}
body.ss-open #language-modal .lang-option-name{font-size:17px!important;font-weight:400!important}
body.ss-open #language-modal .lang-option-code,body.ss-open #language-modal .lang-option-row small,body.ss-open #language-modal .lang-option-row .lang-option-sub{display:none!important}
body.ss-open #language-modal .lang-option-row + .lang-option-row::before{content:"";position:absolute;top:0;left:64px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
body.ss-open #language-modal .lang-option-row{border-top:0!important}
body.ss-open #language-modal .lang-option-row.active{background:none!important;box-shadow:none!important}
body.ss-open #language-modal .lang-option-check{background:none!important;color:var(--accent-2,var(--accent))!important;width:24px!important;height:24px!important}
body.ss-open #language-modal .lang-option-check svg{width:22px!important;height:22px!important;stroke-width:2.6}

/* ===== Редактор профілю (.pc-sheet): прокрутка всередині, футер не перекриває вміст, спокійний вигляд ===== */
.pc-sheet{display:flex!important;flex-direction:column;max-height:88vh!important;overflow:hidden!important;padding:0!important;background:var(--bg,#0b0a14)!important;border:0!important;border-radius:26px!important}
.pc-sheet .pc-head{flex:none;padding:16px 16px 6px}
.pc-sheet > :not(.pc-head):not(.pc-foot){margin-left:16px!important;margin-right:16px!important}
.pc-sheet{overflow-y:auto!important}
.pc-hero{background:none!important;border:0!important;box-shadow:none!important;padding:8px 0 4px!important;margin-top:0!important}
.pc-hero::before,.pc-hero::after{display:none!important}
.pc-label{margin:18px 16px 8px!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--hint)!important}
.pc-label::after{display:none!important}
.pc-input-wrap{background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))!important;border:0!important;border-radius:14px!important;padding:0 14px!important;display:flex;align-items:center;min-height:50px}
.pc-input{background:none!important;border:0!important;box-shadow:none!important;height:50px!important;padding:0!important;font-size:17px!important}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px!important}
.pc-colors{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 6px!important}
.pc-swatch{width:36px!important;height:36px!important;border-radius:50%!important;border:0!important;box-shadow:none!important;flex:none}
.pc-swatch.on,.pc-swatch.active{box-shadow:0 0 0 3px var(--bg,#0b0a14),0 0 0 5px #fff!important}
.pc-sheet .pc-foot{position:sticky!important;bottom:0;z-index:5;display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0!important;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;background:var(--bg,#0b0a14)!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)!important}
.pc-sheet .pc-saved{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--hint)}
.pc-sheet .pc-foot .pill.on{flex:none;min-width:110px;height:46px;justify-content:center;border-radius:14px}
.pc-avatar-actions{display:flex;gap:8px;margin:12px 0 0!important}
.pc-avatar-actions .pill{flex:1;justify-content:center;height:46px;border-radius:14px}

/* поле ніка: поле + кнопка «Як у Telegram» в одному рядку, без накладання */
.pc-sheet .pc-input-wrap{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px;height:auto!important;min-height:52px!important;padding:0 8px 0 14px!important}
.pc-sheet .pc-input-wrap .pc-input{flex:1 1 auto!important;width:auto!important;min-width:0!important}
.pc-sheet .pc-input-wrap .pill{flex:none!important;margin:0!important;height:36px!important;padding:0 12px!important;font-size:13px!important;white-space:nowrap}
.pc-sheet .pc-input-wrap .pc-count{flex:none;margin:0 6px 0 0!important;font-size:12px;color:var(--hint)}
.pc-sheet .pc-label{margin-top:20px!important}

/* ===== Тема «Орхідея»: індиго #42478B, орхідея #B67DDB, пергамент #E8E2D4 ===== */
[data-theme="orchid"] {
  --bg: #12132b;
  --bg-2: #191a3a;
  --card: rgba(34, 36, 78, 0.78);
  --card-hi: rgba(52, 55, 108, 0.88);
  --card-border: rgba(98, 104, 176, 0.42);
  --card-border-hi: rgba(182, 125, 219, 0.5);
  --accent: #b67ddb;
  --accent-glow: rgba(182, 125, 219, 0.36);
  --accent-2: #cf9ef0;
  --accent-deep: #42478b;
  --success: #6ee7b7;
  --success-bg: rgba(52, 211, 153, 0.15);
  --danger: #fb7185;
  --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #f5b94d;
  --warning-bg: rgba(245, 185, 77, 0.15);
  --text: #e8e2d4;
  --hint: #a6a3c4;
  --bg-glow-1: rgba(182, 125, 219, 0.14);
  --bg-glow-2: rgba(66, 71, 139, 0.3);
}
[data-theme="orchid"] .nav-btn:not(.active) { color: #8b88ad; }
.sw-orchid { --sw-bg: linear-gradient(135deg, #42478b 0%, #b67ddb 58%, #e8e2d4 100%); --sw-accent: #b67ddb; }

/* ===== «Бежева» → тема «Хлорофіл»: пустота #1B3100, напружена орхідея #8D3F7D, іонізований пергамент #FFF2C5 ===== */
[data-theme="beige"] {
  color-scheme: dark;
  --bg: #0f1b03; --bg-2: #162606; --card: rgba(27, 49, 0, 0.72); --card-hi: rgba(41, 70, 8, 0.86);
  --card-border: rgba(141, 63, 125, 0.4); --card-border-hi: rgba(204, 111, 204, 0.55);
  --accent: #b9569f; --accent-glow: rgba(204, 111, 204, 0.34); --accent-2: #cc6fcc; --accent-deep: #8d3f7d;
  --success: #86efac; --success-bg: rgba(134, 239, 172, 0.15); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fde68a; --warning-bg: rgba(253, 230, 138, 0.15);
  --text: #fff2c5; --hint: #b3b08c; --bg-glow-1: rgba(141, 63, 125, 0.22); --bg-glow-2: rgba(27, 49, 0, 0.5);
}
[data-theme="beige"] .nav-btn:not(.active) { color: #8d8c6c; }
[data-theme="beige"] :is(.btn-primary, .primary-btn, .segment.active, .src-tabs button.on, .sm-chip.on, .rec-tab.on, .rc-add, .apg-btn:not(.ghost), .ra-save, .cc-save, .sp-seg button.on, .sup-cat.on, .sup-ib.on, .gi-btn, .mp-add, .sm-view button.on, .fb-mode .footer-chip.active, .pill.on.primary, .mh-ico, .as-ico, .sm-add-ico, .sw2-ico, .vt-btn:not(.ghost), .gi-aic-orb, .sh-ico, .ic) { color: #fff2c5 !important; }
[data-theme="beige"] :is(.src-tabs button.on em, .sm-chip.on em, .rec-tab.on em) { color: #fff2c5; }
.sw-beige, [data-theme="beige"] .sw-beige { --sw-bg: linear-gradient(135deg, #1b3100 0%, #8d3f7d 58%, #fff2c5 100%); --sw-accent: #cc6fcc; }

/* ===== Тема «Аметист» (замість «Хлорофіл»): Nox Noir #141414, Royal Amethyst #7E49B3, Steel Mist #CFCFCF ===== */
[data-theme="beige"] {
  color-scheme: dark;
  --bg: #101010; --bg-2: #161616; --card: rgba(30, 30, 33, 0.86); --card-hi: rgba(44, 42, 50, 0.92);
  --card-border: rgba(126, 73, 179, 0.34); --card-border-hi: rgba(160, 108, 214, 0.55);
  --accent: #7e49b3; --accent-glow: rgba(126, 73, 179, 0.38); --accent-2: #a06cd6; --accent-deep: #5a3285;
  --success: #6ee7b7; --success-bg: rgba(52, 211, 153, 0.15); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15);
  --text: #cfcfcf; --hint: #8f8f96; --bg-glow-1: rgba(126, 73, 179, 0.16); --bg-glow-2: rgba(90, 50, 133, 0.12);
}
[data-theme="beige"] .nav-btn:not(.active) { color: #77777e; }
[data-theme="beige"] :is(.btn-primary, .primary-btn, .segment.active, .src-tabs button.on, .sm-chip.on, .rec-tab.on, .rc-add, .apg-btn:not(.ghost), .ra-save, .cc-save, .sp-seg button.on, .sup-cat.on, .sup-ib.on, .gi-btn, .mp-add, .sm-view button.on, .fb-mode .footer-chip.active, .pill.on.primary, .mh-ico, .as-ico, .sm-add-ico, .sw2-ico, .vt-btn:not(.ghost), .gi-aic-orb, .sh-ico, .ic) { color: #fff !important; }
[data-theme="beige"] :is(.src-tabs button.on em, .sm-chip.on em, .rec-tab.on em) { color: #fff; }
.sw-beige, [data-theme="beige"] .sw-beige { --sw-bg: linear-gradient(135deg, #141414 0%, #7e49b3 58%, #cfcfcf 100%); --sw-accent: #a06cd6; }

/* ===== Теми (Рубін, Синя, Орхідея, Аметист): поверхні діалогів, меню й шторок беруть колір із теми, а не з фіолетово-чорного ===== */
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) :is(.confirm-dialog.ios-alert,.confirm-dialog.ios-alert.is-danger){background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,var(--accent)),var(--bg))!important;border-color:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) :is(.qm-pop,.ch-sel-pop){background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,var(--accent)),var(--bg))!important;border-color:color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .pbn{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 85%,var(--accent)),var(--bg))!important;border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.08))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .pbn.done{background:linear-gradient(180deg,#14261f,#0e1a16)!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .tech-lock-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,var(--accent)),var(--bg))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) #ver-bar{background:linear-gradient(135deg,color-mix(in srgb,var(--bg) 80%,var(--accent)),var(--bg))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) :is(.settings-sheet-ov:not(.ss-picker) .settings-sheet,.ss-pk-sheet,.bdg-sheet,.pc-sheet,#language-modal .modal-sheet){background:var(--bg)!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .settings-sheet-ov:not(.ss-picker){background:var(--bg)!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .settings-sheet .ss-head{background:var(--bg)!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) :is(.settings-sheet .ss-group,.settings-sheet .ss-notify-list,.settings-sheet #appearance-settings-card){background:color-mix(in srgb,var(--text) 8%,var(--bg))!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .bottom-nav{background:var(--bg)!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active),:is([data-theme="beige"],[data-theme="orchid"],[data-theme="crimson"],[data-theme="brown"],[data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) body:not(.desktop-platform) .bottom-nav .nav-btn:not(.active) .icon{color:color-mix(in srgb,var(--text) 52%,var(--bg))!important}
/* Аметист/Орхідея: активні елементи й обведення в акценті теми, а не в старому фіолетовому */
:is([data-theme="beige"],[data-theme="orchid"]) :is(.queue-card,.submission-card,.source-tile,.settings-card){border-color:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.07))}
:is([data-theme="beige"],[data-theme="orchid"]) .ios-switch.on,:is([data-theme="beige"],[data-theme="orchid"]) .watermark-switch[aria-checked="true"]{background:linear-gradient(135deg,var(--accent-2),var(--accent-deep))!important}
:is([data-theme="beige"],[data-theme="orchid"]) .modal-overlay{background:rgba(6,6,10,.66)}

/* ===== Тема «Гранат»: Arterial Nocturne #890105, Petal Inertia #FEEAF6, Bleached Bone #F6F5E1 ===== */
[data-theme="garnet"] {
  color-scheme: dark;
  --bg: #150506; --bg-2: #1d0809; --card: rgba(46, 12, 14, 0.82); --card-hi: rgba(70, 16, 20, 0.9);
  --card-border: rgba(137, 1, 5, 0.55); --card-border-hi: rgba(224, 71, 77, 0.55);
  --accent: #c2181f; --accent-glow: rgba(224, 71, 77, 0.34); --accent-2: #e8545a; --accent-deep: #890105;
  --success: #86efac; --success-bg: rgba(134, 239, 172, 0.14); --danger: #ff8a8f; --danger-bg: rgba(255, 138, 143, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15);
  --text: #f6f5e1; --hint: #b9a9a3; --bg-glow-1: rgba(194, 24, 31, 0.2); --bg-glow-2: rgba(137, 1, 5, 0.22);
}
.sw-garnet { --sw-bg: linear-gradient(135deg, #890105 0%, #feeaf6 62%, #f6f5e1 100%); --sw-accent: #e8545a; }
/* ===== Тема «Імпульс»: Orchid Pulse #C349EE, Matcha #8CA7F4, Matcha Cream #EBF6C9 ===== */
[data-theme="pulse"] {
  color-scheme: dark;
  --bg: #130f2b; --bg-2: #1a1538; --card: rgba(36, 30, 78, 0.8); --card-hi: rgba(52, 44, 108, 0.9);
  --card-border: rgba(140, 167, 244, 0.32); --card-border-hi: rgba(195, 73, 238, 0.55);
  --accent: #c349ee; --accent-glow: rgba(195, 73, 238, 0.38); --accent-2: #d27af3; --accent-deep: #5b74e0;
  --success: #bff0a0; --success-bg: rgba(191, 240, 160, 0.14); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.15);
  --warning: #f5d86e; --warning-bg: rgba(245, 216, 110, 0.15);
  --text: #ebf6c9; --hint: #a6a8c6; --bg-glow-1: rgba(195, 73, 238, 0.18); --bg-glow-2: rgba(140, 167, 244, 0.16);
}
.sw-pulse { --sw-bg: linear-gradient(135deg, #c349ee 0%, #8ca7f4 55%, #ebf6c9 100%); --sw-accent: #c349ee; }
/* ===== Тема «Фуксія»: Cinnabar Marrow #511028, Vivacity Orchid #CE3B89, Vapor Porcelain #FAC4E4 ===== */
[data-theme="fuchsia"] {
  color-scheme: dark;
  --bg: #1e0612; --bg-2: #280a1a; --card: rgba(62, 14, 36, 0.82); --card-hi: rgba(88, 20, 52, 0.9);
  --card-border: rgba(206, 59, 137, 0.38); --card-border-hi: rgba(240, 106, 176, 0.55);
  --accent: #ce3b89; --accent-glow: rgba(206, 59, 137, 0.38); --accent-2: #ea6aa8; --accent-deep: #8e1f5b;
  --success: #86efac; --success-bg: rgba(134, 239, 172, 0.14); --danger: #ff8fa3; --danger-bg: rgba(255, 143, 163, 0.15);
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15);
  --text: #fcdff0; --hint: #bd9fb1; --bg-glow-1: rgba(206, 59, 137, 0.2); --bg-glow-2: rgba(81, 16, 40, 0.4);
}
.sw-fuchsia { --sw-bg: linear-gradient(135deg, #511028 0%, #ce3b89 58%, #fac4e4 100%); --sw-accent: #ea6aa8; }
:is([data-theme="garnet"],[data-theme="pulse"],[data-theme="fuchsia"]) .nav-btn:not(.active) { color: color-mix(in srgb, var(--text) 45%, var(--bg)); }

/* ===== Екран завантаження на ПК: на всю висоту вікна, по центру, більший знак, підпис знизу ===== */
@media (min-width: 900px) {
  #splash-screen{position:fixed!important;inset:0!important;height:100vh!important;min-height:100vh!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:34px!important;background:radial-gradient(60% 55% at 50% 46%,rgba(255,255,255,.045),transparent 70%),#0d0d11!important}
  #splash-screen .splash-mark{width:300px!important}
  #splash-screen .splash-progress-track{width:300px!important;height:5px!important}
  #splash-screen .splash-status,#splash-screen .splash-percent{display:none!important}
  #splash-screen .splash-footer{position:absolute!important;left:0;right:0;bottom:36px!important;font-size:14px!important;gap:12px!important}
  #splash-screen .splash-footer-icon{width:32px!important;height:32px!important}
}
body.desktop-platform #splash-screen{position:fixed!important;inset:0!important;height:100vh!important;min-height:100vh!important}



/* ===== ПК: інший екран завантаження — прапорні відблиски, знак зліва направо, назва «Rabyra Helper» проявляється по словах, тонка лінія ===== */
.splash-title{display:none}
@media (min-width: 900px) {
  #splash-screen{background:radial-gradient(38% 46% at 24% 78%,rgba(37,99,235,.22),transparent 70%),radial-gradient(34% 42% at 78% 22%,rgba(250,204,21,.13),transparent 70%),radial-gradient(60% 55% at 50% 46%,rgba(255,255,255,.04),transparent 70%),#0b0c11!important}
  #splash-screen .splash-mark{width:240px!important}
  #splash-screen .splash-title{display:flex;gap:16px;align-items:baseline;margin-top:-6px;font-size:46px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
  #splash-screen .splash-title span{display:inline-block;opacity:0;transform:translateY(18px);filter:blur(10px);animation:spwIn .9s cubic-bezier(.2,.85,.25,1) calc(1.35s + var(--w) * .22s) forwards}
  #splash-screen .splash-title span:last-child{color:color-mix(in srgb,#fff 55%,#8aa4ff)}
  @keyframes spwIn{to{opacity:1;transform:none;filter:blur(0)}}
  #splash-screen .splash-progress-track{width:360px!important;height:4px!important;margin-top:6px!important;background:rgba(255,255,255,.1)!important}
  #splash-screen .splash-progress-bar{background:linear-gradient(90deg,#2563eb,#fff 60%,#facc15)!important}
}

/* ===== ПК: сайдбар «Rabyra Helper» — ритм, індикатор активного пункту, акуратні групи ===== */
body.desktop-platform .sidebar-brand{gap:12px!important;padding:6px 6px 16px!important}
body.desktop-platform .sidebar-brand-logo{width:46px!important;height:46px!important}
body.desktop-platform .sidebar-brand-title{font-size:19px!important;line-height:1.1;white-space:nowrap;letter-spacing:-.02em}
body.desktop-platform .sidebar-brand-subtitle{margin-top:3px;font-size:10.5px!important}
body.desktop-platform .sidebar-search-btn{margin:14px 2px 6px!important}
body.desktop-platform .sidebar-section-label{margin:22px 14px 8px!important}
body.desktop-platform .bottom-nav .nav-btn,body.desktop-platform .bottom-nav .nav-btn-extra{position:relative;margin:2px 0!important}
body.desktop-platform .bottom-nav .nav-btn.active::before,body.desktop-platform .bottom-nav .nav-btn-extra.active::before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:22px;transform:translateY(-50%);border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 0 14px var(--accent-glow)}
body.desktop-platform .bottom-nav .nav-btn.active,body.desktop-platform .bottom-nav .nav-btn-extra.active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 6%,transparent))!important}
body.desktop-platform .sidebar-service-grid{padding:0!important}
body.desktop-platform .sidebar-footer{margin:10px 2px 6px!important;padding:14px 4px 4px!important}
body.desktop-platform .sidebar-footer-role{font-size:12px!important}

/* ПК-заставка: компактніше — знак менший, назва й лінія пропорційно */
@media (min-width: 900px) {
  #splash-screen{gap:22px!important}
  #splash-screen .splash-mark{width:150px!important}
  #splash-screen .splash-title{font-size:30px!important;gap:10px!important;margin-top:0!important}
  #splash-screen .splash-progress-track{width:220px!important;height:3px!important;margin-top:2px!important}
  #splash-screen .splash-footer{font-size:12.5px!important;bottom:28px!important}
  #splash-screen .splash-footer-icon{width:26px!important;height:26px!important}
}

/* ПК: підпис у потоці під лінією завантаження (не прибитий до нижнього краю, який міг виїжджати за вікно) */
@media (min-width: 900px) {
  #splash-screen .splash-footer{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:26px!important;order:99;color:#aab3cc!important;opacity:1;animation:sfIn .9s cubic-bezier(.2,.8,.2,1) 1.2s both!important}
}

/* ===== ПК: порожня стрічка — двоколонкова картка з радаром-сканером, що обертається, і живими акцентами ===== */
@media (min-width: 900px) {
  body.desktop-platform .queue-empty.qe2{display:grid!important;grid-template-columns:230px 1fr;grid-template-areas:"radar title" "radar sub" "radar chips" "how how" "act act";column-gap:34px;align-items:center;text-align:left!important;padding:34px 36px 30px!important;position:relative;overflow:hidden}
  body.desktop-platform .queue-empty.qe2::before{content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);pointer-events:none;animation:qeFloat 9s ease-in-out infinite alternate}
  @keyframes qeFloat{from{transform:translate(0,0)}to{transform:translate(-60px,40px)}}
  body.desktop-platform .qe2-radar{grid-area:radar;justify-self:center;position:relative;width:200px!important;height:200px!important}
  body.desktop-platform .qe2-radar::after{content:"";position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,color-mix(in srgb,var(--accent) 55%,transparent) 100%);-webkit-mask:radial-gradient(circle,transparent 34%,#000 36%);mask:radial-gradient(circle,transparent 34%,#000 36%);animation:qeSweep 3.6s linear infinite}
  @keyframes qeSweep{to{transform:rotate(360deg)}}
  body.desktop-platform .qe2-core{width:84px!important;height:84px!important;border-radius:28px!important}
  body.desktop-platform .qe2-title{grid-area:title;font-size:30px!important;font-weight:850!important;letter-spacing:-.025em;align-self:end}
  body.desktop-platform .qe2-sub{grid-area:sub;font-size:16px!important;max-width:46ch;margin:6px 0 0!important}
  body.desktop-platform .qe2-chips{grid-area:chips;justify-content:flex-start!important;align-self:start;margin-top:16px!important}
  body.desktop-platform .qe2-chip.live i{animation:qeBlink 1.6s ease-in-out infinite}
  @keyframes qeBlink{50%{opacity:.35;transform:scale(.7)}}
  body.desktop-platform .qe2-how{grid-area:how;margin-top:26px!important}
  body.desktop-platform .qe2-actions{grid-area:act;margin-top:14px!important}
  body.desktop-platform .qe2-btn{height:54px!important;font-size:15px!important;transition:transform .16s cubic-bezier(.3,1.5,.5,1),filter .15s}
  body.desktop-platform .qe2-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce){body.desktop-platform .qe2-radar::after,body.desktop-platform .queue-empty.qe2::before,body.desktop-platform .qe2-chip.live i{animation:none}}

/* «Читачі»: порожній стан — без зовнішньої рамки-контейнера (були два вкладені квадрати) */
#submissions-list:has(> .re-empty){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
#submissions-list:has(> .re-empty)::before,#submissions-list:has(> .re-empty)::after{display:none!important}

/* ===== Порожня стрічка: замість іконки-радара — живий кролик (біжить на місці, прапор-смуги пульсують), кільця-імпульси навколо ===== */
.qe2-core{background:none!important;box-shadow:none!important;border:0!important;position:relative;color:transparent!important;overflow:visible!important}
.qe2-core svg{display:none!important}
.qe2-core::before,.qe2-core::after{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}
.qe2-core::before{background-image:url(icons/mark-rabbit.png);animation:qeRun 1.5s ease-in-out infinite}
.qe2-core::after{background-image:url(icons/mark-flag.png);animation:qeStreak 1.5s ease-in-out infinite}
@keyframes qeRun{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7%) rotate(-2.5deg)}60%{transform:translateY(1%) rotate(1deg)}}
@keyframes qeStreak{0%,100%{transform:translateX(0);opacity:.95}35%{transform:translateX(-9%);opacity:1}70%{transform:translateX(-3%);opacity:.75}}
.qe2-core{width:96px!important;height:92px!important;border-radius:0!important}
body.desktop-platform .qe2-radar::after{display:none!important}
@media (min-width: 900px) {
  body.desktop-platform .qe2-core{width:150px!important;height:144px!important}
  body.desktop-platform .queue-empty.qe2{grid-template-areas:"radar title" "radar sub" "radar chips" "chl chl" "how how" "act act"}
}
/* чип «Каналів: N» — кнопка зі списком */
.qe2-chip-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;transition:background .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
.qe2-chip-btn svg{transition:transform .25s}
.qe2-chip-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.qe2-chip-btn:active{transform:scale(.96)}
.qe2-chlist{grid-area:chl;grid-column:1/-1;margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;text-align:left}
.qe2-chlist[hidden]{display:none}
.qe2-ch{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 7%,transparent);animation:qeChIn .3s cubic-bezier(.2,.9,.3,1) both}
.qe2-ch:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.qe2-ch-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.qe2-ch-av img{width:100%;height:100%;object-fit:cover}
.qe2-ch-tx{min-width:0;display:flex;flex-direction:column}
.qe2-ch-tx b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qe2-ch-tx small{font-size:12px;color:var(--hint)}
.qe2-ch-none{padding:10px;color:var(--hint);font-size:13px}
@keyframes qeChIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qe2-core::before,.qe2-core::after,.qe2-ch{animation:none}}

/* ===== Аметист, Орхідея, Фуксія: доведено до рівня Синьої/Рубінової — без ambient-«протікання», з власними відтінками карток, кнопок, табів, фокусу ===== */
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]){--bg-glow-1:transparent!important;--bg-glow-2:transparent!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(.segment:not(.active),.modal-tab-btn:not(.active)){color:color-mix(in srgb,var(--text) 58%,var(--bg))}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(.settings-card,.list-row,.source-tile,.submission-card,.queue-card){background-image:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 58%);border-color:color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.06))}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(.primary-btn,.queue-compose-btn,.btn-primary){background:linear-gradient(135deg,var(--accent-2),var(--accent-deep))!important;color:#fff!important;box-shadow:0 10px 24px -12px var(--accent-glow)}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(.pill.on,.chip-action-btn.on,.sm-chip.on){background:linear-gradient(135deg,var(--accent-2),var(--accent-deep))!important;color:#fff!important}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(input,textarea,select):focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important;outline:0}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) ::selection{background:color-mix(in srgb,var(--accent) 45%,transparent);color:#fff}
:is([data-theme="beige"],[data-theme="orchid"],[data-theme="fuchsia"]) :is(.nbadge,.topbar-alert-badge){box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,transparent)}
/* превью-плитки тем: однакова глибина й тонка внутрішня підсвітка */
.theme-grid .segment .theme-swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 18px -10px rgba(0,0,0,.6)}
/* Орхідея: холодніший індиго-фон карток і тонкіші рамки, щоб відрізнялась від Аметисту */
[data-theme="orchid"]{--card:rgba(32,34,76,.8);--card-border:rgba(110,116,196,.34)}
[data-theme="orchid"] :is(.bottom-nav){background:linear-gradient(180deg,rgba(34,36,80,.96),var(--bg))!important}
/* Фуксія: тепліший вишневий фон навігації */
[data-theme="fuchsia"] :is(.bottom-nav){background:linear-gradient(180deg,rgba(60,14,36,.96),var(--bg))!important}
/* Аметист: нейтральна графітова навігація */
[data-theme="beige"] :is(.bottom-nav){background:linear-gradient(180deg,#1b1b1f,var(--bg))!important}

/* ===== ПК: «Налаштування» — двопанельне вікно ===== */
body.desktop-platform #desktop-settings-modal .modal-sheet.dsm-sheet{display:grid!important;grid-template-columns:250px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"hd hd" "nav body";width:min(900px,calc(100% - 64px))!important;max-width:900px!important;height:min(640px,86vh);padding:0!important;overflow:hidden!important;border-radius:26px!important;background:var(--bg,#0b0a14)!important;border:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)!important;box-shadow:0 50px 110px -30px rgba(0,0,0,.92)!important}
body.desktop-platform #desktop-settings-modal .dsm-sheet .modal-header{grid-area:hd;margin:0!important;padding:22px 28px 18px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);position:static!important}
body.desktop-platform #desktop-settings-modal .dsm-sheet .support-head-title{font-size:24px!important;font-weight:850!important;letter-spacing:-.02em}
body.desktop-platform #desktop-settings-modal .dsm-nav{grid-area:nav;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-right:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);background:color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14));overflow-y:auto}
body.desktop-platform #desktop-settings-modal .dsm-nb{display:flex;align-items:center;gap:13px;width:100%;padding:12px 12px;border:0;border-radius:14px;background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:background .15s}
body.desktop-platform #desktop-settings-modal .dsm-nb:hover{background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
body.desktop-platform #desktop-settings-modal .dsm-nb.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 7%,transparent));box-shadow:inset 3px 0 0 var(--accent)}
/* 2026-10-22 ("по образцу macOS Geist") — кожен розділ має ВЛАСНИЙ постійний
   колір іконки (--c1/--c2, той самий патерн, що й .dsm-ic/.set-ico нижче й по
   всьому файлу), а не загальний --hint, що фарбувався в акцент лише коли
   розділ активний. Активний розділ і так підсвічений фоном рядка (.dsm-nb.on
   вище) — іконці додатково лишається тонке біле кільце, а не зміна кольору. */
body.desktop-platform #desktop-settings-modal .dsm-nb-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--c1,var(--accent-2,var(--accent))),var(--c2,var(--accent-deep,var(--accent))));box-shadow:0 1px 0 rgba(255,255,255,.14) inset;transition:box-shadow .15s}
body.desktop-platform #desktop-settings-modal .dsm-nb.on .dsm-nb-ic{box-shadow:0 0 0 2px color-mix(in srgb,var(--text,#fff) 55%,transparent),0 8px 18px -8px rgba(0,0,0,.5)}
body.desktop-platform #desktop-settings-modal .dsm-nb-ic svg{width:21px;height:21px}
body.desktop-platform #desktop-settings-modal .dsm-nb-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
body.desktop-platform #desktop-settings-modal .dsm-nb-tx b{font-size:15px;font-weight:700}
body.desktop-platform #desktop-settings-modal .dsm-nb-tx small{font-size:12px;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body{grid-area:body;overflow-y:auto;padding:22px 30px 30px}
body.desktop-platform #desktop-settings-modal .dsm-panel-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
/* розділи: що показувати у правій панелі */
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="look"] #sec-toggles,
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="look"] .dsm-notify,
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="app"] .set-block,
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="app"] #ui-scale-row,
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="app"] .dsm-notify,
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body[data-sec="notify"] #appearance-settings-card{display:none!important}
body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body > .set-label,body.desktop-platform #desktop-settings-modal #desktop-settings-modal-body > .set-group:has(#desktop-notify-row),body.desktop-platform #desktop-settings-modal #appearance-settings-card > .set-label,body.desktop-platform #desktop-settings-modal #appearance-settings-card .set-head:not(.set-head-sub){display:none!important}
/* вміст «Вигляд» */
body.desktop-platform #desktop-settings-modal #appearance-settings-card .set-group,body.desktop-platform #desktop-settings-modal #appearance-settings-card .set-group-pad{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
body.desktop-platform #desktop-settings-modal .set-block{background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14))!important;border:0!important;border-radius:18px!important;box-shadow:none!important;padding:16px 18px!important;margin:0 0 14px!important}
body.desktop-platform #desktop-settings-modal .set-sublabel{margin:0 0 12px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--hint)!important}
body.desktop-platform #desktop-settings-modal .theme-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
body.desktop-platform #desktop-settings-modal .theme-grid .segment{border:0!important;border-radius:16px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;box-shadow:none!important;padding:9px 9px 11px!important;transition:transform .15s cubic-bezier(.3,1.5,.5,1)}
body.desktop-platform #desktop-settings-modal .theme-grid .segment:hover{transform:translateY(-2px)}
body.desktop-platform #desktop-settings-modal .theme-grid .segment.active{box-shadow:0 0 0 2px var(--accent),0 12px 26px -14px var(--accent-glow)!important;background:color-mix(in srgb,var(--accent) 10%,transparent)!important}
body.desktop-platform #desktop-settings-modal .lang-current-row{background:none!important;border:0!important;box-shadow:none!important;height:46px}
body.desktop-platform #desktop-settings-modal #ui-scale-row{background:none!important;border:0!important}
/* вміст «Застосунок» */
body.desktop-platform #desktop-settings-modal #sec-toggles{background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14));border-radius:18px;overflow:hidden}
body.desktop-platform #desktop-settings-modal .set-toggle-row{display:flex!important;align-items:center;gap:15px;margin:0!important;padding:15px 18px!important;border:0!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
body.desktop-platform #desktop-settings-modal .set-toggle-row:first-child,body.desktop-platform #desktop-settings-modal .set-toggle-row[style*="display:none"] + .set-toggle-row{border-top:0!important}
body.desktop-platform #desktop-settings-modal .set-toggle-logo{flex:none;width:30px!important;height:30px!important;min-width:30px!important;display:grid;place-items:center;background:none!important;border:0!important;box-shadow:none!important;color:var(--text)!important}
body.desktop-platform #desktop-settings-modal .set-toggle-logo svg{width:26px!important;height:26px!important}
body.desktop-platform #desktop-settings-modal .set-toggle-title{font-size:16px!important;font-weight:600!important}
body.desktop-platform #desktop-settings-modal .set-toggle-hint{font-size:13px!important;color:var(--hint)!important}
/* вміст «Сповіщення» */
body.desktop-platform #desktop-settings-modal .dsm-list{border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14))}
body.desktop-platform #desktop-settings-modal .dsm-row{display:flex;align-items:center;gap:15px;padding:15px 18px;cursor:pointer;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);transition:background .15s}
body.desktop-platform #desktop-settings-modal .dsm-row:first-child{border-top:0}
body.desktop-platform #desktop-settings-modal .dsm-row:hover{background:color-mix(in srgb,var(--text,#fff) 5%,transparent)}
body.desktop-platform #desktop-settings-modal .dsm-ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--c1),var(--c2))}
body.desktop-platform #desktop-settings-modal .dsm-ic svg{width:20px;height:20px}
body.desktop-platform #desktop-settings-modal .dsm-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
body.desktop-platform #desktop-settings-modal .dsm-tx b{font-size:16px;font-weight:600}
body.desktop-platform #desktop-settings-modal .dsm-tx small{font-size:13px;color:var(--hint);line-height:1.35}

/* ===== ПК, порожня стрічка: усе вирівняно — кільця навколо кролика по центру, щільніші відступи, шапка не заходить під кнопки Telegram ===== */
@media (min-width: 900px) {
  body.desktop-platform .topbar{padding-right:170px!important}
  body.desktop-platform .qe2-radar{width:220px!important;height:220px!important;display:grid!important;place-items:center!important;margin:0!important}
  body.desktop-platform .qe2-radar .qe2-ring{inset:0!important;margin:auto;width:100%;height:100%;border-radius:50%}
  body.desktop-platform .qe2-radar .qe2-ring:nth-child(2){inset:0!important}
  body.desktop-platform .qe2-radar .qe2-core{position:relative!important;margin:0!important;inset:auto!important;width:168px!important;height:160px!important;flex:none}
  body.desktop-platform .queue-empty.qe2{padding:28px 40px 26px!important;column-gap:40px!important;grid-template-columns:240px 1fr!important;align-items:center}
  body.desktop-platform .qe2-title{align-self:end;margin:0!important}
  body.desktop-platform .qe2-sub{margin:8px 0 0!important;font-size:16.5px!important}
  body.desktop-platform .qe2-chips{margin-top:16px!important;gap:10px!important}
  body.desktop-platform .qe2-chip{height:38px;padding:0 16px!important;font-size:14.5px!important}
  body.desktop-platform .qe2-how{margin-top:18px!important}
  body.desktop-platform .qe2-how > summary{height:52px;display:flex;align-items:center}
  body.desktop-platform .qe2-actions{margin-top:12px!important;gap:12px!important}
  body.desktop-platform .qe2-btn{height:52px!important}
  body.desktop-platform .queue-compose-btn,body.desktop-platform #compose-manual-post-btn{height:56px;border-radius:18px}
}



/* ===== Заставка: хореографія один раз — ореол у кольорах прапора → кролик влітає з пружиною → синя й жовта смуги по черзі виїжджають → вихід із легким наближенням ===== */
#splash-screen .splash-mark{overflow:visible!important}
#splash-screen .sm-halo{position:absolute;left:50%;top:52%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.4);border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle at 38% 55%,rgba(37,99,235,.38),transparent 55%),radial-gradient(circle at 66% 48%,rgba(250,204,21,.26),transparent 52%);filter:blur(14px);animation:smHalo 1.6s cubic-bezier(.2,.8,.2,1) .05s both!important}
@keyframes smHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}45%{opacity:1}100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}}
#splash-screen .splash-mark .sm-rabbit{opacity:0;transform:translateX(-26%) scale(.94);filter:blur(7px);animation:smRabbitX .95s cubic-bezier(.18,1.05,.3,1) .12s both!important;z-index:3}
@keyframes smRabbitX{0%{opacity:0;transform:translateX(-26%) scale(.94);filter:blur(7px)}30%{opacity:1;filter:blur(2px)}70%{transform:translateX(2.5%) scale(1.01);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
#splash-screen .splash-mark .sm-flag{opacity:0;transform:translateX(34%);animation:smStripe .7s cubic-bezier(.2,1,.3,1) both!important;z-index:2}
#splash-screen .splash-mark .sm-fl-b{clip-path:inset(0 0 27% 0);animation-delay:.62s!important}
#splash-screen .splash-mark .sm-fl-y{clip-path:inset(73% 0 0 0);animation-delay:.78s!important}
@keyframes smStripe{0%{opacity:0;transform:translateX(34%)}40%{opacity:1}100%{opacity:1;transform:none}}
/* вихід: знак трохи наближується й гасне разом з екраном */
#splash-screen{transition:opacity .6s ease,transform .6s cubic-bezier(.4,0,.2,1)!important}
#splash-screen.splash-hidden{opacity:0;transform:scale(1.035)}
#splash-screen.splash-hidden .splash-mark{transform:scale(1.08);transition:transform .6s cubic-bezier(.4,0,.2,1)}
/* лінія завантаження: тонка, з м'яким блиском на кінці */
#splash-screen .splash-progress-track{overflow:visible!important;border-radius:99px;background:rgba(255,255,255,.1)!important}
#splash-screen .splash-progress-bar{position:relative;border-radius:99px!important;transition:width .6s cubic-bezier(.22,1,.36,1)!important}
#splash-screen .splash-progress-bar::after{content:"";position:absolute;right:-1px;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:50%;background:#fff;filter:blur(6px);opacity:.85}
/* фон: «вмикається» світло, дуже повільний дрейф плям, віньєтка */
#splash-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 70% at 50% 50%,transparent 55%,rgba(0,0,0,.45));animation:smVig 1.2s ease both}
@keyframes smVig{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#splash-screen .sm-halo,#splash-screen .splash-mark .sm-rabbit,#splash-screen .splash-mark .sm-flag{animation:none!important;opacity:1;transform:none;filter:none}#splash-screen .sm-halo{opacity:.6}#splash-screen.splash-hidden{transform:none}}

/* ===== ПК, редактор: нижня панель дій — рівні відступи, суцільний фон теми, однакова висота кнопок ===== */
@media (min-width: 900px) {
  body.desktop-platform #editor-modal .modal-sticky-footer{display:flex!important;align-items:center;gap:12px!important;margin:0!important;padding:16px 24px 20px!important;background:var(--bg,#0b0a14)!important;border-top:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;border-radius:0 0 28px 28px;box-shadow:0 -18px 30px -18px rgba(0,0,0,.6)}
  body.desktop-platform #editor-modal .modal-sticky-footer .primary-btn{flex:1;height:56px!important;border-radius:18px!important;gap:12px;font-size:16px!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 28px -14px var(--accent-glow)!important}
  body.desktop-platform #editor-modal .modal-sticky-footer .primary-btn:hover{filter:brightness(1.07)}
  body.desktop-platform #editor-modal .modal-sticky-footer .icon-action-btn{flex:none;width:56px!important;height:56px!important;border-radius:18px!important}
  body.desktop-platform #editor-modal .ed-kbd{margin-left:6px;padding:3px 9px;border-radius:9px;font:600 12px/1 inherit;background:rgba(255,255,255,.2);color:#fff}
}


/* ===== ПК, заставка: знак крупніше, ореол по центру за ним, щільніша колонка ===== */
@media (min-width: 900px) {
  #splash-screen{gap:18px!important}
  #splash-screen .splash-mark{width:190px!important}
  #splash-screen .sm-halo{top:50%!important;left:50%!important;width:130%!important}
  #splash-screen .splash-title{font-size:36px!important}
  #splash-screen .splash-progress-track{width:280px!important;margin-top:4px!important}
  #splash-screen .splash-footer{margin-top:30px!important}
}

/* ===== ПК: банер «Вийшла нова версія» — картка у правому нижньому куті з іконкою оновлення =====
   2026-10-22 ("по красоте эту кнопку сделай") — картка раніше мішала СТАРИЙ
   градієнтний "скляний" вигляд (++/::before/::after-іконка, лишки до
   рефакторингу на реальні .vb-ic/.vb-tx/.vb-go/.vb-x нижче, вже заглушені
   #ver-bar::before,::after{content:none} у спільних правилах) із НОВИМИ
   елементами розмітки — звідси неохайна суміш. Тепер одна чиста "консольна"
   картка: непрозора графітова панель (var(--card-hi), та сама, що й сайдбар/
   картки), тонка рамка замість насиченого кольорового градієнта-підкладки,
   помірний радіус замість майже-пігулки. */
@media (min-width: 900px) {
  body.desktop-platform #ver-bar{left:auto!important;right:28px!important;bottom:28px!important;transform:none!important;width:auto!important;max-width:410px!important;gap:14px!important;padding:14px!important;border-radius:16px!important;background:var(--card-hi)!important;border:1px solid var(--card-border-hi,var(--card-border))!important;box-shadow:0 20px 44px -16px rgba(0,0,0,.55)!important;animation:verInPc .4s cubic-bezier(.2,.95,.3,1.02) both!important}
  body.desktop-platform #ver-bar .vb-ic{width:40px!important;height:40px!important;border-radius:12px!important}
  body.desktop-platform #ver-bar .vb-tx b{font-size:14.5px!important}
  body.desktop-platform #ver-bar .vb-tx small{font-size:12.5px!important}
  body.desktop-platform #ver-bar .vb-go{height:38px!important;padding:0 18px!important;border-radius:10px!important;font-size:13.5px!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1),filter .15s}
  body.desktop-platform #ver-bar .vb-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
  body.desktop-platform #ver-bar .vb-x{border-radius:9px!important}
  @keyframes verInPc{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
}

/* ПК-заставка: назва проявляється по літерах із плавним «розтисканням» інтервалу, потім один раз проходить блиск */
@media (min-width: 900px) {
  #splash-screen .splash-title{display:flex!important;gap:.28em!important;align-items:baseline;letter-spacing:.14em;animation:stTrack 1.7s cubic-bezier(.2,.8,.2,1) 1.2s forwards!important}
  @keyframes stTrack{from{letter-spacing:.14em}to{letter-spacing:-.02em}}
  #splash-screen .splash-title .spw{display:inline-flex}
  #splash-screen .splash-title .spw i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.45em) scale(.96);filter:blur(8px);animation:stLetter .62s cubic-bezier(.2,.9,.25,1) calc(1.2s + var(--i) * .06s) forwards!important}
  #splash-screen .splash-title .spw.b i{color:color-mix(in srgb,#fff 55%,#8aa4ff)}
  @keyframes stLetter{to{opacity:1;transform:none;filter:blur(0)}}
  #splash-screen .splash-title{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:260% 100%;background-position:130% 0;-webkit-background-clip:text;background-clip:text}
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce){#splash-screen .splash-title,#splash-screen .splash-title .spw i{animation:none!important;opacity:1;transform:none;filter:none;letter-spacing:-.02em}}



/* ===== ПК: чат техпідтримки — вікно в межах екрана (шапка, листування що прокручується, закріплене поле вводу) ===== */
@media (min-width: 900px) {
  body.desktop-platform #support-modal{align-items:center!important;justify-content:center!important;padding:44px 24px 24px!important;box-sizing:border-box}
  body.desktop-platform #support-modal .modal-sheet.support-sheet{display:flex!important;flex-direction:column;width:min(760px,100%)!important;max-width:760px!important;height:min(760px,calc(100vh - 80px))!important;max-height:calc(100vh - 80px)!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:26px!important;background:var(--bg,#0b0a14)!important;border:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)!important;box-shadow:0 50px 110px -30px rgba(0,0,0,.92)!important}
  body.desktop-platform #support-modal .support-head{flex:none;margin:0!important;padding:18px 22px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);position:static!important;background:var(--bg,#0b0a14)}
  body.desktop-platform #support-modal #support-chat-thread{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;padding:16px 22px!important}
  body.desktop-platform #support-modal #support-chat-empty{flex:1 1 auto;overflow-y:auto}
  body.desktop-platform #support-modal #support-faq-chips,body.desktop-platform #support-modal #support-faq-suggest,body.desktop-platform #support-modal .support-faq-block,body.desktop-platform #support-modal #support-attachment-chip,body.desktop-platform #support-modal #support-status,body.desktop-platform #support-modal .support-delete-link{flex:none;margin-left:22px!important;margin-right:22px!important}
  body.desktop-platform #support-modal .chat-composer{flex:none;margin:8px 22px 0!important}
  body.desktop-platform #support-modal #support-status{padding-bottom:16px;min-height:0!important}
  body.desktop-platform #support-modal .section-label{margin:10px 22px 6px!important}
}

/* ===== ПК, заставка: знак крупніше, ореол по центру за ним, щільніша колонка ===== */
@media (min-width: 900px) {
  #splash-screen{gap:18px!important}
  #splash-screen .splash-mark{width:190px!important}
  #splash-screen .sm-halo{top:50%!important;left:50%!important;width:130%!important}
  #splash-screen .splash-title{font-size:36px!important}
  #splash-screen .splash-progress-track{width:280px!important;margin-top:4px!important}
  #splash-screen .splash-footer{margin-top:30px!important}
}
.hm-stats,.hm-sec{display:none!important}

/* ПК, чат підтримки: компактне вікно рівно посередині екрана (висота за вмістом, а не на весь екран) */
@media (min-width: 900px) {
  body.desktop-platform #support-modal{align-items:center!important;justify-content:center!important;padding:44px 24px 24px 24px!important;left:0!important;right:0!important}
  body.desktop-platform #support-modal .modal-sheet.support-sheet{height:auto!important;min-height:520px;max-height:calc(100vh - 100px)!important;width:min(680px,100%)!important;margin:auto!important}
  body.desktop-platform #support-modal #support-chat-thread{flex:0 1 auto!important;min-height:300px;max-height:calc(100vh - 380px)!important;justify-content:flex-end}
}

/* ===== ПК: анімовані фони під кожну тему (лише transform/opacity, дуже плавно; кольори беруться з теми) ===== */
@media (min-width: 900px) {
  body.desktop-platform{--fx1:18% 16%;--fx2:84% 28%;--fx3:46% 94%;--fxa:24%;--fxb:20%;--fxc:20%}
  body.desktop-platform .app::before{inset:-12%!important;background-image:
    radial-gradient(ellipse 980px 660px at var(--fx1),color-mix(in srgb,var(--accent) var(--fxa),transparent) 0%,transparent 62%),
    radial-gradient(ellipse 900px 600px at var(--fx2),color-mix(in srgb,var(--accent-2) var(--fxb),transparent) 0%,transparent 60%),
    radial-gradient(ellipse 860px 580px at var(--fx3),color-mix(in srgb,var(--accent-deep,var(--accent)) var(--fxc),transparent) 0%,transparent 60%)!important;
    animation:pcFxDrift 26s ease-in-out infinite alternate!important;filter:blur(8px)}
  @keyframes pcFxDrift{0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0)}50%{transform:translate3d(4%,3%,0) scale(1.1) rotate(5deg)}100%{transform:translate3d(-1%,5%,0) scale(1.04) rotate(-4deg)}}
  body.desktop-platform .app::after{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.9;will-change:transform,opacity;mix-blend-mode:screen}
  /* Фіолетова: повільний обертовий відблиск */
  html:not([data-theme]) body.desktop-platform .app::after,[data-theme="dark"] body.desktop-platform .app::after{background:conic-gradient(from 0deg at 68% 28%,transparent 0 12%,color-mix(in srgb,var(--accent) 16%,transparent) 22%,transparent 36%,color-mix(in srgb,var(--accent-2) 12%,transparent) 62%,transparent 78%);filter:blur(50px);animation:pcFxSpin 70s linear infinite}
  @keyframes pcFxSpin{to{transform:rotate(360deg)}}
  /* Синя: хвилі світла, що пливуть горизонтально */
  [data-theme="brown"] body.desktop-platform{--fx1:12% 22%;--fx2:90% 18%;--fx3:55% 100%}
  [data-theme="brown"] body.desktop-platform .app::after{background:repeating-linear-gradient(115deg,transparent 0 120px,color-mix(in srgb,var(--accent-2) 9%,transparent) 160px,transparent 220px);filter:blur(28px);animation:pcFxFlow 38s linear infinite}
  @keyframes pcFxFlow{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
  /* Рубінова: жар — крапки, що повільно підіймаються */
  [data-theme="crimson"] body.desktop-platform{--fx1:14% 80%;--fx2:88% 90%;--fx3:50% 100%;--fxa:26%}
  [data-theme="crimson"] body.desktop-platform .app::after{background-image:radial-gradient(circle,rgba(255,110,120,.5) 0 2px,transparent 3px),radial-gradient(circle,rgba(255,170,150,.4) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgba(255,90,110,.35) 0 2.5px,transparent 4px);background-size:210px 260px,160px 200px,290px 330px;background-position:10px 20px,90px 130px,40px 200px;animation:pcFxEmbers 46s linear infinite;mix-blend-mode:normal;opacity:.55}
  @keyframes pcFxEmbers{from{transform:translateY(0)}to{transform:translateY(-14%)}}
  /* Аметист: світлові промені зверху */
  [data-theme="beige"] body.desktop-platform{--fx1:72% 4%;--fx2:20% 30%;--fx3:60% 100%;--fxa:26%}
  [data-theme="beige"] body.desktop-platform .app::after{background:repeating-linear-gradient(104deg,transparent 0 160px,color-mix(in srgb,var(--accent-2) 8%,transparent) 200px,transparent 280px);filter:blur(34px);transform-origin:70% 0;animation:pcFxBeam 18s ease-in-out infinite alternate}
  @keyframes pcFxBeam{from{transform:rotate(-4deg) translateX(-4%)}to{transform:rotate(5deg) translateX(5%)}}
  /* Орхідея: мерехтливі іскри */
  [data-theme="orchid"] body.desktop-platform{--fx1:20% 20%;--fx2:80% 40%;--fx3:44% 92%;--fxa:30%;--fxb:24%}
  [data-theme="orchid"] body.desktop-platform .app::after{background-image:radial-gradient(circle,rgba(255,255,255,.75) 0 1.2px,transparent 2px),radial-gradient(circle,rgba(207,158,240,.7) 0 1.6px,transparent 2.6px),radial-gradient(circle,rgba(255,255,255,.5) 0 1px,transparent 1.8px);background-size:240px 200px,310px 270px,180px 160px;background-position:30px 40px,130px 120px,70px 180px;mix-blend-mode:normal;animation:pcFxTwinkle 7s ease-in-out infinite alternate}
  @keyframes pcFxTwinkle{from{opacity:.25;transform:translateY(0)}to{opacity:.8;transform:translateY(-3%)}}
  /* Фуксія: м'яке бокe — великі кола, що пливуть */
  [data-theme="fuchsia"] body.desktop-platform{--fx1:16% 30%;--fx2:86% 60%;--fx3:50% 96%;--fxa:30%;--fxb:26%;--fxc:22%}
  [data-theme="fuchsia"] body.desktop-platform .app::after{background-image:radial-gradient(circle at 20% 70%,color-mix(in srgb,var(--accent-2) 22%,transparent) 0 70px,transparent 72px),radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--accent) 20%,transparent) 0 110px,transparent 112px),radial-gradient(circle at 58% 82%,color-mix(in srgb,var(--accent-2) 16%,transparent) 0 60px,transparent 62px);filter:blur(10px);mix-blend-mode:normal;opacity:.7;animation:pcFxBokeh 30s ease-in-out infinite alternate}
  @keyframes pcFxBokeh{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(4%,-4%,0) scale(1.08)}}
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce){body.desktop-platform .app::before,body.desktop-platform .app::after{animation:none!important}}

/* ПК: верхня панель прозора — анімований фон теми продовжується під нею; тонка лінія, годинник і значок підписки акуратно по краях */
@media (min-width: 900px) {
  body.desktop-platform .topbar{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 62%,transparent),color-mix(in srgb,var(--bg) 28%,transparent))!important;-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)!important;box-shadow:none!important}
  body.desktop-platform .topbar-clock{margin-right:8px}
  body.desktop-platform .topbar-clock b{font-size:22px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  body.desktop-platform .topbar-clock small{font-size:12.5px;color:var(--hint)}
}

/* ===== Чат підтримки: «Часті запитання» — значок-питання; список відкривається спливною панеллю, не займає пів екрана ===== */
#support-modal .modal-sheet.support-sheet{position:relative}
#support-modal #sup-bar{display:flex;align-items:center;gap:8px;margin:6px 0 4px}
#support-modal .section-label[data-i18n="faq.label"]{order:3;flex:none;position:relative;width:40px;height:40px;margin:0 0 0 auto!important;padding:0!important;font-size:0!important;line-height:0;letter-spacing:0;border-radius:14px;cursor:pointer;display:grid;place-items:center;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);color:var(--hint);transition:background .15s,color .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
#support-modal .section-label[data-i18n="faq.label"] > *{display:none!important}
#support-modal .section-label[data-i18n="faq.label"]::before{content:"";display:block;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.3 9.2a2.8 2.8 0 0 1 5.4 1c0 1.9-2.7 2.3-2.7 4'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.3 9.2a2.8 2.8 0 0 1 5.4 1c0 1.9-2.7 2.3-2.7 4'/%3E%3Cpath d='M12 17.6h.01'/%3E%3C/svg%3E") center/contain no-repeat}
#support-modal .section-label[data-i18n="faq.label"]::after{display:none!important;content:none!important}
#support-modal .section-label[data-i18n="faq.label"].open{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));color:#fff}
#support-modal .section-label[data-i18n="faq.label"]:active{transform:scale(.94)}
#support-modal #sup-bar .sup-ib{order:1}
/* спливна панель з питаннями */
#support-modal #support-faq-chips[data-open="1"]{position:absolute;left:12px;right:12px;bottom:84px;z-index:30;max-height:46%;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:22px;background:var(--bg,#0b0a14);border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.08));box-shadow:0 26px 60px -18px rgba(0,0,0,.85);animation:supFaqIn .26s cubic-bezier(.2,.95,.3,1.02) both}
@keyframes supFaqIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
#support-modal #support-faq-chips[data-open="1"] .faq-chip{width:100%;justify-content:flex-start;margin:0}
#support-modal #support-faq-chips:not([data-open="1"]){display:none!important}
/* «Продовжити попереднє звернення» */
.sup-resume{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:14px 16px;border:0;border-radius:18px;text-align:left;font:inherit;color:var(--text);cursor:pointer;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 6%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.sup-resume:active{transform:scale(.98)}
.sup-resume .sr-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.sup-resume .sr-ic svg{width:21px;height:21px}
.sup-resume .sr-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-resume .sr-tx b{font-size:15px;font-weight:750}
.sup-resume .sr-tx small{font-size:12.5px;color:var(--hint)}
.sup-resume .sr-ch{flex:none;width:20px;height:20px;color:var(--hint)}
/* загальне доведення вікна підтримки */
#support-modal .chat-composer{border-radius:22px!important;background:color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14))!important;border:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)!important;box-shadow:none!important}
#support-modal .chat-composer:focus-within{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)!important}
#support-modal .chat-composer-send{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important;border:0!important}
#support-modal .support-empty{padding-top:10px}

/* ===== Окремі заставки: ПК — хореографія з ореолом і смугами; ТЕЛЕФОН — як раніше: заєць виїжджає зліва, потім з нього виїжджає прапор (один раз) ===== */
@media (max-width: 899.98px) {
  #splash-screen .sm-halo{display:none!important}
  #splash-screen::after{display:none!important}
  #splash-screen .splash-mark{overflow:visible}
  #splash-screen .splash-mark .sm-rabbit{opacity:0;transform:translateX(-120px);filter:none;animation:smRabbitIn .85s cubic-bezier(.16,.9,.25,1) .1s forwards!important;z-index:2}
  #splash-screen .splash-mark .sm-flag,#splash-screen .splash-mark .sm-flag.sm-fl-b,#splash-screen .splash-mark .sm-flag.sm-fl-y{opacity:0;clip-path:inset(0 0 0 100%);transform:translateX(70px);animation:smFlagOut .8s cubic-bezier(.25,.8,.25,1) .45s forwards!important;z-index:1}
  #splash-screen,#splash-screen.splash-hidden{transform:none!important}
  #splash-screen{transition:opacity .45s ease!important}
  #splash-screen .splash-progress-bar::after{display:none!important}
  #splash-screen .splash-progress-bar{transition:width .55s cubic-bezier(.22,1,.36,1)!important}
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce){#splash-screen .splash-mark .sm-rabbit,#splash-screen .splash-mark .sm-flag{animation:none!important;opacity:1;transform:none;clip-path:none!important}}

/* Чат підтримки: кнопка «?» усередині відступів вікна, панель питань суцільна й над повідомленнями; кнопка відправки — без анімацій */
#support-modal #sup-bar{margin:6px 16px 6px!important;padding:0!important;box-sizing:border-box;width:auto!important;max-width:calc(100% - 32px)}
#support-modal #support-faq-chips[data-open="1"]{z-index:80!important;background:var(--bg,#0b0a14)!important;opacity:1!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;left:16px!important;right:16px!important;bottom:92px!important}
#support-modal #support-faq-chips[data-open="1"] .faq-chip{background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14))!important}
#support-modal .chat-composer-send,#support-modal .chat-composer-send *,#support-modal #support-send-btn,#support-modal #support-send-btn *{animation:none!important;transition:none!important;transform:none!important;filter:none!important;box-shadow:none!important}
#support-modal .chat-composer-send:active,#support-modal #support-send-btn:active{transform:none!important;filter:none!important}

/* ===== Підтримка: FAQ — лише у шторці; старий список у чаті прибрано ===== */
#support-modal #support-faq-chips,#support-modal #support-faq-chips[data-open="1"]{display:none!important}
.sfq-ov{position:fixed;inset:0;z-index:100080;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,4,10,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:ssOvIn .24s ease both}
.sfq-ov.closing{animation:ssOvOut .22s ease both}
.sfq-sheet{width:100%;max-width:560px;max-height:84vh;display:flex;flex-direction:column;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:var(--bg,#0b0a14);border:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent);border-bottom:0;box-shadow:0 -24px 60px -20px rgba(0,0,0,.85);animation:ssSheetIn .38s cubic-bezier(.2,.95,.3,1.02) both}
.sfq-ov.closing .sfq-sheet{animation:ssSheetOut .22s cubic-bezier(.4,0,.8,.4) both}
@media (min-width: 900px){.sfq-ov{align-items:center}.sfq-sheet{border-radius:26px;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent);max-height:76vh}}
.sfq-grab{align-self:center;width:42px;height:5px;border-radius:5px;margin:2px 0 8px;background:color-mix(in srgb,var(--text,#fff) 20%,transparent)}
.sfq-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.sfq-head b{font-size:24px;font-weight:850;letter-spacing:-.02em}
.sfq-x{width:40px;height:40px;border:0;border-radius:12px;display:grid;place-items:center;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent);cursor:pointer}
.sfq-x svg{width:20px;height:20px}
.sfq-search{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);color:var(--hint)}
.sfq-search svg{width:20px;height:20px;flex:none}
.sfq-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:16px}
.sfq-search input::-webkit-search-cancel-button{display:none}
.sfq-hint{margin:10px 4px 8px;font-size:12.5px;color:var(--hint)}
.sfq-list{overflow-y:auto;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14))}
.sfq-row{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;position:relative;transition:background .15s}
.sfq-row + .sfq-row::before{content:"";position:absolute;top:0;left:62px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.sfq-row:active,.sfq-row:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sfq-row[hidden]{display:none}
.sfq-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sfq-ic svg{width:20px;height:20px}
.sfq-q{flex:1;min-width:0;font-size:15.5px;font-weight:600;line-height:1.3}
.sfq-ch{flex:none;width:18px;height:18px;color:var(--hint)}
.sfq-none{padding:22px 10px;text-align:center;font-size:14px;color:var(--hint)}

/* Підтримка: «Часті запитання» — акуратна пігулка зі значком зліва над полем вводу (а не кнопка, що висить у кутку) */
#support-modal #sup-bar{display:flex!important;align-items:center;gap:8px;margin:2px 14px 8px!important;max-width:none!important;width:auto!important}
#support-modal .section-label[data-i18n="faq.label"]{order:0!important;width:auto!important;height:38px!important;margin:0 auto 0 0!important;padding:0 16px 0 12px!important;gap:8px;display:inline-flex!important;align-items:center;font-size:13.5px!important;font-weight:700!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;color:color-mix(in srgb,var(--text,#fff) 80%,var(--bg,#0b0a14))!important;border-radius:999px!important;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
#support-modal .section-label[data-i18n="faq.label"]::before{width:20px!important;height:20px!important;flex:none;color:var(--accent-2,var(--accent));background:currentColor}
#support-modal .section-label[data-i18n="faq.label"].open{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;color:inherit!important}
#support-modal #sup-bar .sup-ib{width:38px;height:38px;border-radius:12px}

/* ===== Підтримка, головний екран: привітання, пошук, теми-плитки, «Популярне» — єдиний вигляд у кольорах теми ===== */
#support-modal .sh{display:flex;flex-direction:column;gap:14px;padding:4px 16px 8px}
#support-modal .sh-hero{display:flex;flex-direction:column;gap:4px;padding:6px 2px 0}
#support-modal .sh-hero b{font-size:26px;font-weight:850;letter-spacing:-.025em;line-height:1.15}
#support-modal .sh-hero span{font-size:14.5px;line-height:1.4;color:var(--hint)}
#support-modal .sh-search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);color:var(--hint)}
#support-modal .sh-search svg{width:20px;height:20px;flex:none}
#support-modal .sh-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;box-shadow:none;color:var(--text);font:inherit;font-size:16px}
#support-modal .sh-search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
#support-modal .sh-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#support-modal .sh-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-radius:18px;text-align:left;font:inherit;color:var(--text);cursor:pointer;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,var(--card,#14111f)),var(--card,#14111f));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.06));transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
#support-modal .sh-tile:active{transform:scale(.97)}
#support-modal .sh-ico{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 8px 16px -9px var(--accent-glow)}
#support-modal .sh-ico svg{width:22px;height:22px}
#support-modal .sh-tile b{flex:1;min-width:0;font-size:15.5px;font-weight:750;letter-spacing:-.01em}
#support-modal .sh-tile small{flex:none;min-width:24px;height:24px;padding:0 8px;border-radius:99px;display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:color-mix(in srgb,var(--accent) 55%,#fff);background:color-mix(in srgb,var(--accent) 16%,transparent)}
#support-modal .sh-sub{margin:6px 4px -4px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
#support-modal .sh-list{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14));border:0}
#support-modal .sh-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border:0;background:none;color:var(--text);font:inherit;font-size:15.5px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;position:relative;transition:background .15s}
#support-modal .sh-row + .sh-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
#support-modal .sh-row + .sh-row{border-top:0}
#support-modal .sh-row:active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
#support-modal .sh-row svg{flex:none;width:18px;height:18px;color:var(--hint)}
#support-modal .sh-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px 0 10px;border:0;border-radius:999px;font:inherit;font-size:14px;font-weight:700;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent);cursor:pointer;margin-bottom:8px}
#support-modal .sh-back svg{width:18px;height:18px}
#support-modal .sh-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#support-modal .sh-quick button{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border:0;border-radius:16px;font:inherit;font-size:14.5px;font-weight:700;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent);cursor:pointer}
#support-modal .sh-quick button svg{width:19px;height:19px;color:var(--accent-2,var(--accent))}
#support-modal .sh-empty{padding:22px 10px;text-align:center;font-size:14px;color:var(--hint)}

/* Підтримка: прибрано пошук, плитки тем і «Популярне» (FAQ — у шторці за кнопкою «?»); лишилось красиве привітання */
#support-modal .sh-search,#support-modal .sh-body{display:none!important}
#support-modal .sh{align-items:center;text-align:center;gap:18px;padding:34px 22px 10px;position:relative}
#support-modal .sh::before{content:"";width:92px;height:92px;border-radius:30px;margin-bottom:2px;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent))) ,center;box-shadow:0 22px 44px -18px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.35);-webkit-mask:none;position:relative}
#support-modal .sh::after{content:"";position:absolute;top:34px;left:50%;width:46px;height:46px;margin:23px 0 0 -23px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
#support-modal .sh-hero{align-items:center;gap:8px}
#support-modal .sh-hero b{font-size:28px}
#support-modal .sh-hero span{max-width:30ch;font-size:15px}
#support-modal .sh-quick{width:100%;margin-top:8px}

/* ===== Підтримка: єдине оформлення шапки, кнопок, привітання, пігулок і поля вводу ===== */
#support-modal .sh-hero{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
#support-modal .sh-hero b{display:block;margin:0;line-height:1.15}
#support-modal .sh-hero span{display:block;line-height:1.45}
/* шапка */
#support-modal .support-head{display:flex;align-items:center;gap:12px;padding:14px 16px!important;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)}
#support-modal .support-avatar{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:0 10px 20px -10px var(--accent-glow)!important}
#support-modal .support-avatar svg{width:23px;height:23px}
#support-modal .support-head-title{font-size:22px!important;font-weight:850!important;letter-spacing:-.02em}
#support-modal .support-head-sub{font-size:13px;color:var(--hint)}
#support-modal .sup-head-btn,#support-modal #support-history-btn,#support-modal #support-new-btn,#support-modal .support-head .modal-close{flex:none;width:42px!important;height:42px!important;border:0!important;border-radius:14px!important;display:grid;place-items:center;color:var(--text)!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;box-shadow:none!important;transition:background .15s,transform .14s cubic-bezier(.3,1.5,.5,1)}
#support-modal .sup-head-btn:active,#support-modal .support-head .modal-close:active{transform:scale(.94)}
#support-modal #support-new-btn{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important}
#support-modal #support-new-btn:disabled{opacity:.4}
#support-modal .support-head svg{width:20px;height:20px}
/* категорії й шаблони */
#support-modal .sup-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
#support-modal .sup-cat{height:36px;padding:0 15px;border:0;border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 7%,transparent);white-space:nowrap}
#support-modal .sup-cat.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
#support-modal .sup-tpl{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 0}
#support-modal .sup-tp{flex:none;height:34px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:var(--text);background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
#support-modal .sup-ib{height:38px;min-width:38px;padding:0 10px;border:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:13px;font-weight:700;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
#support-modal .sup-ib.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
/* «Часті запитання» — пігулка без внутрішньої рамки-подвійника */
#support-modal .section-label[data-i18n="faq.label"]{box-shadow:none!important;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)!important}
#support-modal #sup-bar{margin:4px 16px 10px!important}
/* швидкі кнопки */
#support-modal .sh-quick{padding:0 6px}
#support-modal .sh-quick button{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
/* повідомлення */
#support-modal .chat-bubble.from-user{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff;border-radius:18px 18px 6px 18px!important;box-shadow:none!important}
#support-modal .chat-bubble.from-support{background:color-mix(in srgb,var(--text,#fff) 8%,var(--bg,#0b0a14))!important;color:var(--text);border-radius:18px 18px 18px 6px!important;border:0!important}
#support-modal .chat-bubble-time{opacity:.7}
/* поле вводу */
#support-modal .chat-composer{margin:0 14px 12px!important;padding:6px!important;gap:6px;align-items:center}
#support-modal .chat-composer textarea{background:none!important;border:0!important;box-shadow:none!important;color:var(--text);font-size:16px;padding:8px 6px!important}
#support-modal #support-attach-btn,#support-modal .chat-composer .icon-btn{flex:none;width:40px!important;height:40px!important;border-radius:50%!important;border:0!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;color:var(--text)!important;box-shadow:none!important}
#support-modal .chat-composer-send{flex:none;width:44px;height:44px;border-radius:50%!important}

/* Поле вводу підтримки: «+» і мікрофон — однакові кружки одного кольору й розміру; поле тексту займає решту місця */
#support-modal .chat-composer > button:not(.chat-composer-send),#support-modal .chat-composer .icon-btn,#support-modal .chat-composer .chat-mic,#support-modal #support-attach-btn{flex:none!important;width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;border:0!important;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;color:var(--hint)!important;box-shadow:none!important;display:grid!important;place-items:center;padding:0!important}
#support-modal .chat-composer > button:not(.chat-composer-send) svg{width:20px!important;height:20px!important;color:inherit!important;stroke:currentColor!important}
#support-modal .chat-composer > button.recording,#support-modal .chat-composer > button.on{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important}
#support-modal .chat-composer textarea{flex:1 1 auto;min-width:0;text-overflow:ellipsis}

/* ===== Підтримка: поле вводу у стилі «текст зверху, дії знизу» ===== */
#support-modal .chat-composer{display:grid!important;grid-template-columns:auto auto 1fr auto auto;grid-template-areas:"txt txt txt txt txt" "att faq . mic send";align-items:center;row-gap:8px;column-gap:8px;margin:0 14px 14px!important;padding:14px 12px 12px!important;border-radius:26px!important;background:color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14))!important;border:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)!important}
#support-modal .chat-composer textarea{grid-area:txt;min-height:48px;max-height:140px;padding:2px 6px!important;font-size:17px!important;line-height:1.4}
#support-modal .chat-composer #support-attach-btn{grid-area:att}
#support-modal .chat-composer .section-label[data-i18n="faq.label"]{grid-area:faq;margin:0!important}
#support-modal .chat-composer > button:not(.chat-composer-send):not(#support-attach-btn){grid-area:mic}
#support-modal .chat-composer .chat-composer-send{grid-area:send}
#support-modal #sup-bar:empty{display:none!important}

#support-modal .chat-composer textarea{min-height:40px!important;height:auto}
#support-modal .chat-composer .section-label[data-i18n="faq.label"]{display:inline-flex!important;width:auto!important;height:40px!important;margin:0!important;padding:0 14px 0 10px!important}
#support-modal .sup-bar-nofaq{margin-top:0!important}
#support-modal .chat-composer{grid-template-columns:auto auto 1fr auto auto}

/* Поле вводу підтримки: кожен елемент у власній клітинці, нічого не накладається («+», фото, FAQ | мікрофон, відправка) */
#support-modal .chat-composer{grid-template-columns:auto auto auto 1fr auto auto!important;grid-template-areas:"txt txt txt txt txt txt" "opt att faq . mic send"!important}
#support-modal .chat-composer #sup-opt-btn{grid-area:opt!important;position:relative}
#support-modal .chat-composer #support-attach-btn{grid-area:att!important}
#support-modal .chat-composer .section-label[data-i18n="faq.label"]{grid-area:faq!important}
#support-modal .chat-composer .voice-btn{grid-area:mic!important}
#support-modal .chat-composer .chat-composer-send{grid-area:send!important}
#support-modal .chat-composer > button:not(.chat-composer-send):not(#support-attach-btn):not(.voice-btn):not(#sup-opt-btn){grid-area:auto!important}

/* FAQ — окрема кругла кнопка зі значком «?» у нижньому ряду поля вводу; стару пігулку над полем ховаємо */
#support-modal .section-label[data-i18n="faq.label"],#support-modal #sup-bar:not(:has(.sup-ib)){display:none!important}
#support-modal .chat-composer .sup-faqb{grid-area:faq!important;flex:none;width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
#support-modal .chat-composer .sup-faqb svg{width:21px;height:21px}

/* Підтримка: відповідь на FAQ — читабельна картка, аватар у кольорі теми, блок «Це допомогло?» двома рівними кнопками */
#support-modal .chat-bubble-group.from-support{align-items:flex-end;gap:10px}
#support-modal .chat-bubble.from-support{font-size:15.5px!important;line-height:1.5!important;padding:14px 16px!important;white-space:pre-line;max-width:100%}
#support-modal .chat-bubble.from-support .chat-bubble-time{display:block;margin-top:8px;text-align:right;font-size:11.5px;color:var(--hint)}
#support-modal .chat-avatar,#support-modal .chat-bubble-avatar,#support-modal .chat-bubble-group .support-avatar{flex:none;width:36px!important;height:36px!important;border-radius:12px!important;display:grid;place-items:center;color:#fff!important;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:none!important}
#support-modal .sup-fb{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:10px 14px 4px 14px!important;font-size:13px}
#support-modal .sup-fb > span{grid-column:1/-1;font-size:13px;font-weight:600;color:var(--hint)}
#support-modal .sup-fb button{height:44px!important;border:0!important;border-radius:14px!important;font-size:14px!important;font-weight:750!important;color:var(--text)!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;box-shadow:none!important;transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
#support-modal .sup-fb button:active{transform:scale(.97)}
#support-modal .sup-fb button[data-v="no"]{color:#fff!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important}
#support-modal .sup-fb .ok{grid-column:1/-1;font-size:14px;font-weight:700;color:#34d399}

/* ===== Запит на видалення даних: єдиний вигляд — згрупований список, акуратні чекбокси, закріплені кнопки внизу ===== */
#support-delete-modal .sdel-sheet{display:flex!important;flex-direction:column;max-height:92vh;padding:8px 16px 0!important;overflow:hidden!important;background:var(--bg,#0b0a14)!important;border:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)!important;border-bottom:0!important;border-radius:26px 26px 0 0!important}
#support-delete-modal .modal-header{flex:none;padding:6px 0 12px!important;margin:0!important}
#support-delete-modal #sdel-title{font-size:26px!important;font-weight:850!important;letter-spacing:-.02em;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
#support-delete-modal #sdel-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:8px}
#support-delete-modal .sdel-intro{font-size:14.5px!important;margin:0 2px 14px!important}
#support-delete-modal .sdel-list{gap:0!important;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14))}
#support-delete-modal .sdel-item{display:flex;align-items:center;gap:14px;padding:14px 16px!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;position:relative;cursor:pointer;transition:background .15s}
#support-delete-modal .sdel-item + .sdel-item::before{content:"";position:absolute;top:0;left:54px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
#support-delete-modal .sdel-item:has(input:checked){background:color-mix(in srgb,var(--danger) 8%,transparent)!important}
#support-delete-modal .sdel-check{flex:none;width:24px!important;height:24px!important;border-radius:8px!important;border:1.5px solid color-mix(in srgb,var(--text,#fff) 28%,transparent)!important;display:grid;place-items:center;color:transparent}
#support-delete-modal .sdel-item input:checked ~ .sdel-check{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff}
#support-delete-modal .sdel-item-text{font-size:15.5px!important;line-height:1.3;font-weight:500}
#support-delete-modal .sdel-note{margin:14px 0 10px!important;padding:14px 16px!important;border-radius:16px!important;border:0!important;background:color-mix(in srgb,#f59e0b 10%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 28%,transparent);font-size:13px!important;line-height:1.5;color:color-mix(in srgb,var(--text,#fff) 80%,var(--bg,#0b0a14))!important}
#support-delete-modal .sdel-id{margin:0 2px 8px!important;font-size:13px!important}
#support-delete-modal #sdel-comment{width:100%;box-sizing:border-box;min-height:84px;padding:14px 16px!important;border:0!important;border-radius:16px!important;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important;color:var(--text);font:inherit;font-size:16px!important;resize:none;outline:0}
#support-delete-modal #sdel-comment:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent)}
#support-delete-modal .sdel-confirm{margin:14px 2px 4px!important;font-size:14.5px!important;font-weight:600}
#support-delete-modal .sdel-confirm input{width:24px!important;height:24px!important;border-radius:8px}
#support-delete-modal .sdel-actions{flex:none;position:sticky;bottom:0;gap:10px!important;padding:12px 0 calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg,#0b0a14);border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);margin-top:8px}
#support-delete-modal .sdel-actions .pill{min-height:52px!important;border-radius:16px!important;font-size:15px;font-weight:800;border:0!important}
#support-delete-modal #sdel-cancel{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;color:var(--text)!important}
#support-delete-modal .sdel-danger{background:linear-gradient(180deg,#f0485c,#c02339)!important;color:#fff!important}
#support-delete-modal .sdel-danger:disabled{opacity:.38!important;filter:grayscale(.3)}
#support-delete-modal .sdel-pending{border-radius:18px!important;padding:16px!important;background:color-mix(in srgb,var(--accent) 10%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
/* посилання під чатом */
#support-modal .support-delete-link{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;align-self:center;margin:6px auto!important;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--hint);font:inherit;font-size:13px;font-weight:600}
#support-modal .support-delete-link svg{width:16px;height:16px}

/* Телефон, порожня стрічка: кролик без фіолетової плитки; кнопки в один рядок */
body .qe2-radar .qe2-core,body:not(.desktop-platform) .qe2-radar .qe2-core,body:not(.desktop-platform) .qe2-core{background:none!important;background-image:none!important;box-shadow:none!important;border-radius:0!important;width:120px!important;height:115px!important}
body:not(.desktop-platform) .qe2-radar{width:150px!important;height:150px!important}
body:not(.desktop-platform) .qe2-actions{gap:8px!important}
body:not(.desktop-platform) .qe2-btn{height:50px!important;padding:0 8px!important;gap:6px!important;font-size:13.5px!important;white-space:nowrap!important;justify-content:center!important;text-align:center!important}
body:not(.desktop-platform) .qe2-btn svg{flex:none;width:17px;height:17px}

/* «Запит уже надіслано»: без рамки-коробки, великий значок-годинник, статус-чіп з номером тікета, кнопка на всю ширину */
#support-delete-modal .sdel-pending{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:18px 4px calc(22px + env(safe-area-inset-bottom,0px))!important;display:flex;flex-direction:column;align-items:center;text-align:center}
#support-delete-modal .sdel-pending-ico{width:84px!important;height:84px!important;border-radius:28px!important;display:grid;place-items:center;margin:0 0 16px!important;color:#fbbf24!important;background:color-mix(in srgb,#f59e0b 14%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 32%,transparent)!important}
#support-delete-modal .sdel-pending-ico svg{width:40px!important;height:40px!important}
#support-delete-modal .sdel-pending-title{font-size:22px!important;font-weight:850!important;letter-spacing:-.02em;margin:0 0 8px!important}
#support-delete-modal .sdel-pending-text{max-width:32ch;font-size:15px!important;line-height:1.5!important;color:var(--hint)!important;margin:0 0 22px!important}
#support-delete-modal .sdel-pending .pill{width:100%;min-height:52px;border:0!important;border-radius:16px!important;font-size:15px;font-weight:800;justify-content:center;color:var(--text)!important;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}

/* «Запит уже надіслано» — повідомлення-картка по центру, як діалог підтвердження: значок, назва, пояснення, кнопка */
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])){align-items:center!important;justify-content:center!important;padding:20px!important}
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sdel-sheet{width:min(380px,100%)!important;max-width:380px!important;height:auto!important;max-height:none!important;padding:28px 22px 22px!important;border-radius:28px!important;border:1px solid color-mix(in srgb,#f59e0b 30%,rgba(255,255,255,.08))!important;background:radial-gradient(120% 70% at 50% 0%,rgba(245,158,11,.16),transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--bg,#0b0a14) 90%,#f59e0b),var(--bg,#0b0a14))!important;box-shadow:0 30px 70px -20px rgba(0,0,0,.85)!important;animation:cdIn .32s cubic-bezier(.2,1.1,.3,1) both}
@keyframes cdIn{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .modal-header{display:none!important}
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sdel-pending{padding:0!important;align-items:center}
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sdel-pending-ico{width:68px!important;height:68px!important;border-radius:22px!important;margin:0 auto 14px!important}
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sdel-pending-ico svg{width:32px!important;height:32px!important}
#support-delete-modal .sdel-pending-title::before{content:"ОЧІКУЄ РОЗГЛЯДУ";display:block;margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#fbbf24}
#support-delete-modal .sdel-pending-text{margin:0 0 20px!important;color:color-mix(in srgb,var(--text,#fff) 75%,var(--bg,#0b0a14))!important}
@media (prefers-reduced-motion:reduce){#support-delete-modal .sdel-sheet{animation:none!important}}

/* Порожня стрічка (телефон): текст кнопок вміщається всередині — менший шрифт, рівні колонки, нічого не виступає за край */
body:not(.desktop-platform) .qe2-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body:not(.desktop-platform) .qe2-btn{min-width:0!important;width:100%;box-sizing:border-box;overflow:hidden;padding:0 6px!important;gap:5px!important;font-size:12.5px!important;letter-spacing:-.01em;line-height:1.1}
body:not(.desktop-platform) .qe2-btn svg{width:15px!important;height:15px!important;flex:none}

/* «Запит надіслано»: анімований годинник (стрілка йде, кільце пульсує) і кнопка «Питання вирішено» */
.sdel-pending-ico{position:relative}
.sdel-pending-ico::before,.sdel-pending-ico::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1.5px solid color-mix(in srgb,#f59e0b 55%,transparent);animation:sdelPing 2.6s ease-out infinite;pointer-events:none}
.sdel-pending-ico::after{animation-delay:1.3s}
@keyframes sdelPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.sdel-pending-ico svg path:nth-of-type(1),.sdel-pending-ico svg path{transform-box:view-box;transform-origin:12px 12px}
.sdel-pending-ico svg path{animation:sdelHand 6s linear infinite}
@keyframes sdelHand{to{transform:rotate(360deg)}}
.sdel-pending-ico svg{animation:sdelTick 2.6s ease-in-out infinite}
@keyframes sdelTick{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.sdel-pending-title,.sdel-pending-text{animation:sdelUp .5s cubic-bezier(.2,.9,.3,1) both}
.sdel-pending-text{animation-delay:.08s}
@keyframes sdelUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sdel-solved{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-bottom:10px;padding:0 16px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 24px -12px var(--accent-glow);transition:transform .14s cubic-bezier(.3,1.5,.5,1),background .3s;animation:sdelUp .5s .16s cubic-bezier(.2,.9,.3,1) both}
.sdel-solved:active{transform:scale(.97)}
.sdel-solved svg{width:20px;height:20px;flex:none}
.sdel-solved.done{background:linear-gradient(135deg,#34d399,#059669);animation:none}
.sdel-solved:disabled{opacity:.85}
@media (prefers-reduced-motion:reduce){.sdel-pending-ico::before,.sdel-pending-ico::after,.sdel-pending-ico svg,.sdel-pending-ico svg path{animation:none!important}}

/* Підтримка: «Це допомогло?» — компактно в один рядок, невеликі кнопки; текст відповіді трохи менший */
#support-modal .sup-fb{display:flex!important;align-items:center;flex-wrap:wrap;gap:8px!important;margin:8px 14px 4px 52px!important}
#support-modal .sup-fb > span{grid-column:auto;font-size:12.5px!important;font-weight:600;color:var(--hint);margin-right:2px}
#support-modal .sup-fb button{height:34px!important;padding:0 14px!important;border-radius:999px!important;font-size:13px!important;font-weight:700!important}
#support-modal .chat-bubble.from-support{font-size:14.5px!important;line-height:1.45!important;padding:12px 14px!important}
#support-modal .chat-avatar,#support-modal .chat-bubble-avatar,#support-modal .chat-bubble-group .support-avatar{width:30px!important;height:30px!important;border-radius:10px!important}

/* «Запит надіслано»: кнопки в янтарній гамі картки, анімація годинника й кнопки без зупинки (навіть у режимі body.perf) */
#support-delete-modal .sdel-pending-title::before{content:none!important}
#support-delete-modal .sdel-eyebrow{margin-bottom:6px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fbbf24}
#support-delete-modal .sdel-solved{min-height:50px;font-size:15px;background:linear-gradient(135deg,#fbbf24,#d97706)!important;color:#2a1a00!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 28px -12px rgba(245,158,11,.7)!important;overflow:hidden;position:relative;animation:sdelUp .5s .16s cubic-bezier(.2,.9,.3,1) both,sdelBtnPulse 2.4s 1s ease-in-out infinite!important}
#support-delete-modal .sdel-solved::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sdelShine 3.2s 1.2s ease-in-out infinite}
@keyframes sdelBtnPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 28px -12px rgba(245,158,11,.55)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 36px -8px rgba(245,158,11,.95)}}
@keyframes sdelShine{0%{left:-45%}55%,100%{left:130%}}
#support-delete-modal .sdel-solved svg{animation:sdelCheck 2.4s 1s ease-in-out infinite}
@keyframes sdelCheck{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#support-delete-modal .sdel-solved.done{background:linear-gradient(135deg,#34d399,#059669)!important;color:#fff!important;animation:none!important}
#support-delete-modal .sdel-solved.done::after{display:none}
#support-delete-modal .sdel-pending .pill{background:color-mix(in srgb,#f59e0b 12%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 30%,transparent)!important;color:color-mix(in srgb,var(--text,#fff) 88%,#fbbf24)!important}
body.perf #support-delete-modal .sdel-pending-ico::before,body.perf #support-delete-modal .sdel-pending-ico::after,body.perf #support-delete-modal .sdel-pending-ico svg,body.perf #support-delete-modal .sdel-pending-ico svg path,body.perf #support-delete-modal .sdel-solved,body.perf #support-delete-modal .sdel-solved::after{animation-iteration-count:infinite!important}
#support-delete-modal .sdel-pending-ico svg path{animation:sdelHand 6s linear infinite!important}
#support-delete-modal .sdel-pending-ico::before,#support-delete-modal .sdel-pending-ico::after{animation:sdelPing 2.6s ease-out infinite!important}
#support-delete-modal .sdel-pending-ico::after{animation-delay:1.3s!important}
@media (prefers-reduced-motion:reduce){#support-delete-modal .sdel-solved,#support-delete-modal .sdel-solved::after,#support-delete-modal .sdel-solved svg{animation:none!important}}

/* Закрите звернення: поле вводу сховано, замість нього блок із поясненням і кнопкою «Новий чат» */
#support-modal.sup-closed-view .chat-composer,#support-modal.sup-closed-view #sup-bar,#support-modal.sup-closed-view #sup-tools,#support-modal.sup-closed-view .support-delete-link,#support-modal.sup-closed-view .sup-fb{display:none!important}
.sup-closed-box{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:8px 14px calc(14px + env(safe-area-inset-bottom,0px));padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent);animation:sdelUp .35s cubic-bezier(.2,.9,.3,1) both}
.sup-closed-box .scb-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.sup-closed-box .scb-ic svg{width:21px;height:21px}
.sup-closed-box .scb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sup-closed-box .scb-tx b{font-size:15.5px;font-weight:800}
.sup-closed-box .scb-tx small{font-size:12.5px;line-height:1.4;color:var(--hint)}
.sup-closed-box .scb-new{flex:1 1 100%;height:46px;border:0;border-radius:14px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sup-closed-box .scb-new:active{transform:scale(.98)}

/* Без смикання: анімуємо лише transform/opacity (не box-shadow і не left), стрілка годинника крутиться окремо від кола */
#support-delete-modal .sdel-solved{animation:sdelUp .5s .16s cubic-bezier(.2,.9,.3,1) both!important;will-change:transform}
#support-delete-modal .sdel-solved::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 28px 2px rgba(245,158,11,.75);opacity:.35;animation:sdelGlow 2.4s ease-in-out infinite;pointer-events:none}
@keyframes sdelGlow{0%,100%{opacity:.25}50%{opacity:.7}}
#support-delete-modal .sdel-solved::after{left:0!important;width:35%;transform:translateX(-140%) skewX(-18deg);animation:sdelShineT 3.2s 1.2s ease-in-out infinite!important;will-change:transform}
@keyframes sdelShineT{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(420%) skewX(-18deg)}}
#support-delete-modal .sdel-solved svg{animation:none!important}
#support-delete-modal .sdel-pending-ico svg{animation:none!important}
#support-delete-modal .sdel-pending-ico svg path{animation:none!important}
#support-delete-modal .sdel-pending-ico svg path:nth-of-type(2){transform-box:view-box;transform-origin:12px 12px;animation:sdelHand 6s linear infinite!important;will-change:transform}

/* сповіщення «відповідь від підтримки» після заставки */
.sup-notice{position:fixed;left:14px;right:14px;top:calc(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px) + 56px);z-index:100090;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--bg,#0b0a14) 82%,var(--accent)),var(--bg,#0b0a14));border:1px solid color-mix(in srgb,var(--accent) 40%,rgba(255,255,255,.08));box-shadow:0 22px 46px -16px rgba(0,0,0,.85);animation:supNoticeIn .45s cubic-bezier(.2,.95,.3,1.02) both}
.sup-notice.out{animation:supNoticeOut .3s ease both}
@keyframes supNoticeIn{from{opacity:0;transform:translateY(-24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes supNoticeOut{to{opacity:0;transform:translateY(-16px)}}
.sup-notice .sn-ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.sup-notice .sn-ic svg{width:21px;height:21px}
.sup-notice .sn-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sup-notice .sn-tx b{font-size:14.5px;font-weight:800}
.sup-notice .sn-tx small{font-size:12.5px;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-notice button{flex:none;height:38px;padding:0 16px;border:0;border-radius:12px;font:inherit;font-size:13.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}

/* «Питання вирішено»: кнопка статична — без пульсу, свічення й блиску (вони давали блимання); лишається лише поява й нажаття */
#support-delete-modal .sdel-solved,#support-delete-modal .sdel-solved::before,#support-delete-modal .sdel-solved::after{animation:none!important}
#support-delete-modal .sdel-solved::before,#support-delete-modal .sdel-solved::after{display:none!important}
#support-delete-modal .sdel-solved{animation:sdelUp .45s .12s cubic-bezier(.2,.9,.3,1) both!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -12px rgba(245,158,11,.6)!important}

/* Мерехтіння кнопки на iOS: розмиття фону під анімованими шарами (backdrop-filter) та кільця, що виходять за межі картки, — прибрано. Лишається лише стрілка годинника. */
#support-delete-modal,#support-delete-modal.modal-overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,4,10,.78)!important}
#support-delete-modal .sdel-pending-ico::before,#support-delete-modal .sdel-pending-ico::after{display:none!important;animation:none!important}
#support-delete-modal .sdel-sheet{isolation:isolate;-webkit-transform:translateZ(0);transform:translateZ(0);animation:none!important;will-change:auto}
#support-delete-modal .sdel-solved,#support-delete-modal .sdel-pending-title,#support-delete-modal .sdel-pending-text,#support-delete-modal .sdel-eyebrow{animation:none!important;opacity:1!important;transform:none!important;will-change:auto!important}
#support-delete-modal .sdel-solved{transition:none!important}
#support-delete-modal .sdel-pending .pill{transition:none!important}

/* кнопка-підписка «Сповістити в Telegram» (статична) + підказка під нею */
#support-delete-modal .sdel-solved{background:linear-gradient(135deg,#fbbf24,#d97706)!important;color:#2a1a00!important}
#support-delete-modal .sdel-solved.done{background:color-mix(in srgb,#34d399 18%,transparent)!important;color:#6ee7b7!important;box-shadow:inset 0 0 0 1.5px rgba(52,211,153,.5)!important}
#support-delete-modal .sdel-solved svg{width:20px;height:20px}
.sdel-solved-hint{max-width:30ch;margin:-2px 0 14px;font-size:12.5px;line-height:1.45;color:var(--hint);text-align:center}
/* повідомлення «відповідь від підтримки» після заставки — картка по центру, як діалог */
.sup-notice-ov{position:fixed;inset:0;z-index:100090;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,4,10,.78);animation:ssOvIn .24s ease both}
.sup-notice-ov.out{animation:ssOvOut .24s ease both}
.sup-notice-card{width:min(380px,100%);padding:28px 22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:28px;border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--bg,#0b0a14) 88%,var(--accent)),var(--bg,#0b0a14));box-shadow:0 30px 70px -20px rgba(0,0,0,.85);animation:cdIn .32s cubic-bezier(.2,1.1,.3,1) both}
.snc-ico{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;margin-bottom:14px;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 14px 28px -12px var(--accent-glow)}
.snc-ico svg{width:32px;height:32px}
.snc-eb{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2,var(--accent));margin-bottom:6px}
.snc-t{font-size:22px;font-weight:850;letter-spacing:-.02em}
.snc-s{margin:8px 0 20px;font-size:14.5px;line-height:1.45;color:var(--hint)}
.snc-open{width:100%;height:50px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.snc-x{width:100%;height:44px;margin-top:8px;border:0;border-radius:14px;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--hint);cursor:pointer}

/* Картка «Запит надіслано»: підказка по центру на всю ширину, без смужки-ручки шторки, рівні проміжки */
#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sheet-grabber,#support-delete-modal:has(#sdel-pending:not([style*="display: none"]):not([style*="display:none"])) .sdel-sheet::before{display:none!important}
#support-delete-modal .sdel-solved-hint{width:100%;max-width:none!important;box-sizing:border-box;margin:10px 0 16px!important;padding:0 8px;text-align:center!important;align-self:stretch}
#support-delete-modal .sdel-pending .sdel-solved{margin-bottom:0!important}
#support-delete-modal .sdel-pending .pill{margin:0!important}

/* ===== Блок «Звернення закрито»: по центру, значок-замок у колі, компактна кнопка ===== */
.sup-closed-box{flex-direction:column!important;align-items:center!important;gap:0!important;margin:10px 14px calc(16px + env(safe-area-inset-bottom,0px))!important;padding:20px 18px 18px!important;text-align:center;border-radius:24px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14)),color-mix(in srgb,var(--text,#fff) 4%,var(--bg,#0b0a14)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}
.sup-closed-box .scb-ic{width:52px!important;height:52px!important;border-radius:50%!important;margin-bottom:12px;color:var(--hint)!important;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}
.sup-closed-box .scb-ic svg{width:24px!important;height:24px!important}
.sup-closed-box .scb-tx{align-items:center;gap:4px!important;margin-bottom:16px}
.sup-closed-box .scb-tx b{font-size:17px!important}
.sup-closed-box .scb-tx small{max-width:30ch;font-size:13px!important;line-height:1.45!important}
.sup-closed-box .scb-new{flex:none!important;width:auto!important;min-width:180px;height:44px!important;padding:0 28px;border-radius:999px!important;font-size:14.5px!important}

/* Сервіс: «Що нового» (крапка, якщо є непрочитане) і «Резервна копія» */
.set-row.has-dot .set-ico{position:relative}
.set-row.has-dot .set-ico::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 0 2px var(--bg,#0b0a14)}
.svx-ov{position:fixed;inset:0;z-index:100080;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,4,10,.7);animation:ssOvIn .24s ease both}
.svx-ov.closing{animation:ssOvOut .22s ease both}
.svx-sheet{width:100%;max-width:560px;max-height:84vh;display:flex;flex-direction:column;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:var(--bg,#0b0a14);border:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent);border-bottom:0;box-shadow:0 -24px 60px -20px rgba(0,0,0,.85);animation:ssSheetIn .38s cubic-bezier(.2,.95,.3,1.02) both}
.svx-ov.closing .svx-sheet{animation:ssSheetOut .22s cubic-bezier(.4,0,.8,.4) both}
@media (min-width:900px){.svx-ov{align-items:center}.svx-sheet{border-radius:26px;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent)}}
.svx-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 12px}
.svx-head b{font-size:24px;font-weight:850;letter-spacing:-.02em}
.svx-body{overflow-y:auto}
.svx-news{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14))}
.svx-item{padding:15px 16px;position:relative}
.svx-item + .svx-item::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.svx-item.new{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}
.svx-date{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--accent-2,var(--accent));margin-bottom:4px}
.svx-item b{display:block;font-size:16px;font-weight:750;line-height:1.3}
.svx-item p{margin:5px 0 0;font-size:13.5px;line-height:1.45;color:var(--hint)}
.svx-backup{display:flex;flex-direction:column;gap:10px}
.svx-act{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:18px;text-align:left;font:inherit;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14));transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.svx-act:active{transform:scale(.98)}
.svx-ai{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.svx-ai svg{width:22px;height:22px}
.svx-at{display:flex;flex-direction:column;gap:2px;min-width:0}
.svx-at b{font-size:15.5px;font-weight:750}
.svx-at small{font-size:12.5px;line-height:1.35;color:var(--hint)}
.svx-status{min-height:20px;text-align:center;font-size:13.5px;font-weight:650;color:var(--accent-2,var(--accent))}
.svx-note{padding:12px 14px;border-radius:14px;font-size:12.5px;line-height:1.45;color:var(--hint);background:color-mix(in srgb,#f59e0b 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f59e0b 24%,transparent)}

/* ===== «Спільнота»: акуратні картки джерел — аватар, назва у два рядки, @username, компактна кнопка, круглий чекбокс, нормальний пейджер ===== */
body:not(.desktop-platform) #community-sources-list.sources-tile-grid{gap:12px!important}
body:not(.desktop-platform) #community-sources-list .source-tile{position:relative;display:flex!important;flex-direction:column;align-items:flex-start;gap:0!important;padding:14px 14px 14px!important;border:0!important;border-radius:22px!important;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,var(--card,#14111f)),var(--card,#14111f))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.05))!important;min-height:0}
body:not(.desktop-platform) #community-sources-list .source-tile .channel-avatar,body:not(.desktop-platform) #community-sources-list .source-tile-head .channel-avatar{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;border-radius:50%!important;margin-bottom:10px}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-name,body:not(.desktop-platform) #community-sources-list .source-tile b,body:not(.desktop-platform) #community-sources-list .source-tile .source-name{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal!important;text-overflow:clip;font-size:14.5px!important;font-weight:750!important;line-height:1.25!important;letter-spacing:-.005em;max-width:100%}
body:not(.desktop-platform) #community-sources-list .source-tile small,body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-user,body:not(.desktop-platform) #community-sources-list .source-tile .source-username{display:block;margin-top:3px;max-width:100%;font-size:12.5px!important;color:var(--hint)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.desktop-platform) #community-sources-list .source-tile button:not([data-role]):not(.info-icon-btn),body:not(.desktop-platform) #community-sources-list .source-tile .pill,body:not(.desktop-platform) #community-sources-list .source-tile .chip-action-btn{margin-top:12px;align-self:stretch;height:38px!important;border:0!important;border-radius:12px!important;font-size:13.5px!important;font-weight:750!important;color:#fff!important;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:none!important;display:inline-flex;align-items:center;justify-content:center;gap:6px}
body:not(.desktop-platform) #community-sources-list .source-tile button svg{width:16px!important;height:16px!important}
body:not(.desktop-platform) #community-sources-list .source-tile input[type="checkbox"],body:not(.desktop-platform) #community-sources-list .source-tile .src-check,body:not(.desktop-platform) #community-sources-list .source-tile .sel-check{position:absolute!important;top:12px;right:12px;width:24px!important;height:24px!important;border-radius:50%!important;border:1.5px solid color-mix(in srgb,var(--text,#fff) 28%,transparent)!important;background:none!important;box-shadow:none!important}
body:not(.desktop-platform) #community-sources-list .source-tile [class*="added"],body:not(.desktop-platform) #community-sources-list .source-tile .badge,body:not(.desktop-platform) #community-sources-list .source-tile .status-pill{margin-top:12px;align-self:flex-start;height:30px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font-size:13px;font-weight:750;color:#34d399;background:rgba(52,211,153,.12)}
/* пейджер */
body:not(.desktop-platform) #community-sources-list [data-role^="community-page"]{width:42px!important;height:42px!important;border:0!important;border-radius:50%!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;color:var(--text)!important;display:grid;place-items:center}
body:not(.desktop-platform) #community-sources-list [data-role^="community-page"]:active{transform:scale(.93)}
body:not(.desktop-platform) #community-sources-list [data-role^="community-page"][disabled]{opacity:.35}

/* ===== «Що нового» — повноекранна сторінка в стилі журналу змін: шапка зі стрілкою й датою, ілюстрація, вступ, секція з лінією, пункти з іконками ===== */
.svn-page{position:fixed;inset:0;z-index:100085;display:flex;flex-direction:column;background:var(--bg,#0b0a14);animation:svnIn .34s cubic-bezier(.2,.95,.3,1.02) both}
.svn-page.closing{animation:svnOut .24s ease both}
@keyframes svnIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes svnOut{to{opacity:0;transform:translateX(30px)}}
.svn-top{flex:none;display:flex;align-items:center;gap:12px;padding:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 50px) 16px 12px;border-bottom:1px solid color-mix(in srgb,var(--text,#fff) 9%,transparent);background:var(--bg,#0b0a14)}
.svn-back{flex:none;width:42px;height:42px;border:0;border-radius:14px;display:grid;place-items:center;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent);cursor:pointer}
.svn-back svg{width:22px;height:22px}
.svn-tt{flex:1;text-align:center;margin-right:42px;display:flex;flex-direction:column;gap:1px}
.svn-tt b{font-size:19px;font-weight:850;letter-spacing:-.01em}
.svn-tt small{font-size:13px;color:var(--hint)}
.svn-scroll{flex:1;overflow-y:auto;padding:16px 18px calc(36px + env(safe-area-inset-bottom,0px));max-width:640px;width:100%;margin:0 auto;box-sizing:border-box}
.svn-hero{position:relative;height:210px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(60% 80% at 30% 60%,rgba(37,99,235,.55),transparent 70%),radial-gradient(50% 70% at 75% 35%,rgba(250,204,21,.32),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--accent) 38%,#0b0d1f),#0b0d1f)}
.svn-hero img{position:absolute;width:150px;top:50%;left:50%;transform:translate(-50%,-50%)}
.svn-hero img.f{z-index:0}
.svn-h{margin:16px 0 6px;font-size:18px;font-weight:850;letter-spacing:-.01em}
.svn-p{margin:0 0 6px;font-size:15.5px;line-height:1.55;color:var(--hint)}
.svn-sec{display:flex;align-items:center;gap:14px;margin:22px 0 14px;color:#34d399;font-size:22px;font-weight:850;letter-spacing:.01em}
.svn-sec i{flex:1;height:3px;border-radius:3px;background:currentColor;opacity:.85}
.svn-item{padding:6px 0 16px}
.svn-it{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.svn-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.svn-ic svg{width:19px;height:19px}
.svn-it b{font-size:17px;font-weight:800;line-height:1.3}
.svn-d{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.06em;color:color-mix(in srgb,var(--text,#fff) 38%,var(--bg,#0b0a14))}
@media (prefers-reduced-motion:reduce){.svn-page{animation:none}}

/* ===== Спільнота: чисті картки — аватар зверху, назва до 2 рядків без обрізання, @username, кнопка; чекбокс адміна — маленький круг у куті ===== */
body:not(.desktop-platform) #community-sources-list .source-tile{overflow:hidden!important;align-items:stretch!important;text-align:left}
body:not(.desktop-platform) #community-sources-list .source-tile-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;width:100%;min-width:0;padding-right:0}
body:not(.desktop-platform) #community-sources-list .source-tile-head .channel-avatar{margin:0!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
body:not(.desktop-platform) #community-sources-list .source-tile-body{width:100%;min-width:0;flex:none!important}
body:not(.desktop-platform) #community-sources-list .source-tile-name{display:flex!important;align-items:flex-start;gap:5px;min-width:0;width:100%;white-space:normal!important;-webkit-line-clamp:unset!important;overflow:visible!important}
body:not(.desktop-platform) #community-sources-list .source-tile-name .rec-source-name-text{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important;white-space:normal!important;text-overflow:ellipsis;word-break:break-word;min-width:0;flex:1 1 auto;font-size:15px;font-weight:780;line-height:1.25;letter-spacing:-.01em;color:var(--text)}
body:not(.desktop-platform) #community-sources-list .source-tile-meta{display:block!important;width:100%;margin-top:3px!important;overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap!important;font-size:12.5px!important;color:var(--hint)!important}
body:not(.desktop-platform) #community-sources-list .source-tile-action{width:100%;margin:0!important}
body:not(.desktop-platform) #community-sources-list .source-tile-action .pill{width:100%;margin-top:12px!important}
body:not(.desktop-platform) #community-sources-list .source-tile [data-action="toggle-recommended"]{position:absolute!important;top:10px!important;right:10px!important;width:26px!important;height:26px!important;min-width:0!important;margin:0!important;padding:0!important;align-self:auto!important;border-radius:50%!important;display:grid!important;place-items:center;box-shadow:none!important;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;border:1.5px solid color-mix(in srgb,var(--text,#fff) 26%,transparent)!important;color:transparent!important}
body:not(.desktop-platform) #community-sources-list .source-tile [data-action="toggle-recommended"][style*="var(--accent)"]{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;border-color:transparent!important;color:#fff!important}
body:not(.desktop-platform) #community-sources-list .source-tile [data-action="toggle-recommended"] svg{width:14px!important;height:14px!important}

/* ===== Спільнота v3: однакова висота карток, дія внизу, «Додано» — повноширинний бейдж, адмін-чекбокс — малий круг ===== */
body:not(.desktop-platform) #community-sources-list .source-tile.source-tile{display:flex!important;flex-direction:column!important;height:100%;padding:14px!important}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-head{flex:1 1 auto!important}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-name .rec-source-name-text{min-height:2.5em}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-meta{margin-bottom:0!important}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-action{flex:none;margin-top:14px!important}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-action .pill,body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-action [class*="badge"]{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:40px!important;margin:0!important;padding:0 12px!important;border-radius:13px!important;font-size:14px!important;font-weight:750!important;box-sizing:border-box}
body:not(.desktop-platform) #community-sources-list .source-tile .source-tile-action [class*="badge"]{color:#34d399!important;background:color-mix(in srgb,#34d399 13%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,#34d399 26%,transparent)!important;border:0!important}
body:not(.desktop-platform) #community-sources-list .source-tile button[data-action="toggle-recommended"][data-action]:not([data-role]):not(.info-icon-btn){position:absolute!important;top:12px!important;right:12px!important;width:24px!important;height:24px!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:50%!important;align-self:auto!important}
body:not(.desktop-platform) #community-sources-list .source-tile button[data-action="toggle-recommended"] svg{width:13px!important;height:13px!important}

/* ===== Каталог: рядки каналів у темі — просторіше, назва на 2 рядки, м'які кнопки «додати»/«видалити» ===== */
body:not(.desktop-platform) .rc-tbi{margin:2px 12px 12px!important;border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 7%,transparent)}
body:not(.desktop-platform) .rc-tbi .rc-row{gap:12px!important;padding:12px 12px 12px 12px!important;min-height:66px!important}
body:not(.desktop-platform) .rc-tbi .rc-row + .rc-row{border-top:0!important;position:relative}
body:not(.desktop-platform) .rc-tbi .rc-row + .rc-row::before{content:"";position:absolute;top:0;left:68px;right:12px;height:1px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
body:not(.desktop-platform) .rc-tbi .rc-av{width:44px!important;height:44px!important;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
body:not(.desktop-platform) .rc-tbi .rc-tx{min-width:0;flex:1}
body:not(.desktop-platform) .rc-tbi .rc-tx b{display:flex;align-items:flex-start;gap:5px;font-size:15px;font-weight:750;line-height:1.25;white-space:normal!important}
body:not(.desktop-platform) .rc-tbi .rc-tx b > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal!important;min-width:0;word-break:break-word}
body:not(.desktop-platform) .rc-tbi .rc-tx b svg{flex:none;width:15px;height:15px;margin-top:2px}
body:not(.desktop-platform) .rc-tbi .rc-tx small{display:block;margin-top:2px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.desktop-platform) .rc-tbi .rc-act{display:flex;align-items:center;gap:8px;flex:none}
body:not(.desktop-platform) .rc-tbi .rc-add{width:38px!important;height:38px!important;box-shadow:none!important;color:var(--accent-2,var(--accent))!important;background:color-mix(in srgb,var(--accent) 16%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)!important}
body:not(.desktop-platform) .rc-tbi .rc-add svg{width:17px!important;height:17px!important}
body:not(.desktop-platform) .rc-tbi .rc-add:active{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff!important}
body:not(.desktop-platform) .rc-tbi .rc-del{width:26px!important;height:26px!important;opacity:.7;background:none!important;border-color:color-mix(in srgb,#fb7185 30%,transparent)!important}
body:not(.desktop-platform) .rc-tbi .rc-done{height:34px;border-radius:12px}

/* Сервіс: рядок «Карта» приховано */
#profile-map-row{display:none!important}

/* ===== Гайд (тур): точки прогресу, м'яка кнопка «Пропустити», акуратніші відступи й текст ===== */
.tour-dots{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.tour-dots i{display:block;width:6px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--text,#fff) 18%,transparent);transition:width .28s cubic-bezier(.3,1.4,.5,1),background .2s}
.tour-dots i.done{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.tour-dots i.on{width:20px;background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.tour-card .tour-skip-btn{height:44px;padding:0 16px!important;border-radius:15px;opacity:1!important;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important;transition:transform .14s ease}
.tour-card .tour-skip-btn:active{transform:scale(.96)}
.tour-card .tour-card-actions{gap:12px}
.tour-card .tour-next-btn{flex:1;justify-content:center;box-shadow:0 10px 22px -12px var(--accent-glow)}
.tour-card.centered .tour-card-text{text-align:center;color:var(--hint)}
.tour-card.centered .tour-card-title{text-align:center}
.tour-card-title{line-height:1.2}

/* ===== Тех: «Обмежити розділи» — групи, іконки розділів, статус «Видно/Приховано» ===== */
.rs-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
.rs-gh{grid-column:1/-1;margin:6px 2px -2px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.rs-gh:first-child{margin-top:0}
.rs-chip{min-width:0;align-items:center!important;gap:11px!important;padding:11px 12px!important;border-radius:16px!important}
.rs-state{width:36px!important;height:36px!important;border-radius:12px!important;position:relative;color:var(--accent-2,var(--accent))!important;background:color-mix(in srgb,var(--accent) 14%,transparent)!important}
.rs-state svg{width:19px;height:19px}
.rs-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.rs-name{font-size:13.5px;font-weight:750;line-height:1.2;word-break:break-word}
.rs-st{font-size:11.5px;font-weight:700;color:#34d399}
.rs-st::before{content:attr(data-vis)}
.rs-chip:has(input:checked) .rs-st{color:#fb7185}
.rs-chip:has(input:checked) .rs-st::before{content:attr(data-hid)}
.rs-chip:has(input:checked) .rs-name{text-decoration:none!important;opacity:.8}
.rs-chip:has(input:checked) .rs-state{color:#fff!important}

/* ===== «Гайди й навчання»: шторка з підзаголовком, кольоровими іконками, бейджем кроків і туром ===== */
.ghub-sheet{padding-top:8px!important}
.ghub-grab{width:42px;height:5px;border-radius:5px;margin:2px auto 12px;background:color-mix(in srgb,var(--text,#fff) 20%,transparent)}
.ghub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.ghub-head > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ghub-head b{font-size:24px;font-weight:850;letter-spacing:-.02em;line-height:1.15}
.ghub-head small{font-size:13.5px;line-height:1.4;color:var(--hint)}
.ghub-head .modal-close{flex:none}
.ghub-card{position:relative;overflow:hidden;gap:14px!important;padding:14px 12px 14px 14px!important;border-radius:22px!important;border:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 12%,transparent),color-mix(in srgb,var(--text,#fff) 3%,transparent) 60%)!important;animation:ghubIn .4s cubic-bezier(.2,.95,.3,1.02) both;animation-delay:var(--d,0ms)}
.ghub-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c1) 22%,transparent),transparent 70%);pointer-events:none}
@keyframes ghubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ghub-card:active{transform:scale(.985);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c1) 55%,transparent)}
.ghub-ico{width:52px!important;height:52px!important;border-radius:17px!important;background:linear-gradient(145deg,var(--c1),var(--c2))!important;box-shadow:0 10px 20px -10px var(--c2)!important}
.ghub-t{position:relative;z-index:1}
.ghub-t b{font-size:16.5px!important}
.ghub-t em{align-self:flex-start;margin-top:5px;padding:2px 9px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--c1);background:color-mix(in srgb,var(--c1) 15%,transparent)}
.ghub-go{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.ghub-card{animation:none}}

/* ===== Резервна копія: статистика, перегляд перед відновленням, прогрес, підсумок ===== */
.svx-backup{display:flex;flex-direction:column;gap:10px}
.svx-sum{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px}
.svx-sum > div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.svx-sum b{font-size:20px;font-weight:850;letter-spacing:-.02em;line-height:1.15}
.svx-sum small{font-size:11.5px;line-height:1.25;color:var(--hint)}
.svx-ai.alt{background:linear-gradient(145deg,#38bdf8,#0369a1)!important}
.svx-ai svg{width:24px;height:24px}
.svx-pv{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)}
.svx-pvh{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.svx-pvh b{font-size:17px;font-weight:800}
.svx-pvh small{font-size:12.5px;color:var(--hint)}
.svx-row{display:flex;align-items:center;gap:12px;font-size:14.5px}
.svx-row b{font-weight:850}
.svx-row i{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:800;color:#34d399;background:color-mix(in srgb,#34d399 14%,transparent)}
.svx-row i.mute{color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.svx-row i svg{width:15px;height:15px}
.svx-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:12px 2px 0;border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);font-size:14.5px;font-weight:650;cursor:pointer}
.svx-sw input{position:absolute;opacity:0;pointer-events:none}
.svx-sw i{flex:none;position:relative;width:46px;height:28px;border-radius:28px;background:color-mix(in srgb,var(--text,#fff) 16%,transparent);transition:background .2s}
.svx-sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.svx-sw input:checked + i{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.svx-sw input:checked + i::after{transform:translateX(18px)}
.svx-btns{display:flex;gap:10px}
.svx-btns button{flex:1;height:50px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:transform .14s cubic-bezier(.3,1.5,.5,1),opacity .15s}
.svx-btns button:active{transform:scale(.97)}
.svx-btns button:disabled{opacity:.45}
.svx-sec{color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.svx-pri{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.svx-prog{display:flex;flex-direction:column;gap:14px;padding:26px 6px;text-align:center}
.svx-prog b{font-size:16px;font-weight:750}
.svx-bar{height:8px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.svx-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));transition:width .25s ease}
.svx-done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px 8px;text-align:center}
.svx-dk{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#34d399,#059669);animation:svxPop .45s cubic-bezier(.2,1.5,.4,1) both}
.svx-dk svg{width:30px;height:30px}
@keyframes svxPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.svx-done b{font-size:21px;font-weight:850}
.svx-done small{font-size:13.5px;line-height:1.45;color:var(--hint);max-width:300px}

/* «Що нового»: записи однієї дати — в одному блоці */
.svn-day{margin:0 0 18px}
.svn-dh{display:flex;align-items:center;gap:12px;margin:0 2px 10px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.svn-dh i{flex:1;height:1px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.svn-card{border-radius:22px;padding:4px 16px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.svn-card .svn-item{padding:14px 0}
.svn-card .svn-item + .svn-item{border-top:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.svn-card .svn-p{margin:0}

/* Сервіс: плитку «Навчання» приховано (тур доступний у шторці «Гайди й навчання») */
#profile-tour-row{display:none!important}

/* ===== «Початок роботи»: інтерактивне навчання новачків ===== */
.lrn-page{position:fixed;inset:0;z-index:100085;display:flex;flex-direction:column;background:var(--bg,#0b0a14);animation:svnIn .34s cubic-bezier(.2,.95,.3,1.02) both}
.lrn-page.closing{animation:svnOut .24s ease both}
.lrn-page .svn-scroll{padding-top:16px}
.lrn-hero{display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:16px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--text,#fff) 4%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}
.lrn-ring{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent-2,var(--accent)) calc(var(--p)*1%),color-mix(in srgb,var(--text,#fff) 12%,transparent) 0)}
.lrn-ring::before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:var(--bg,#0b0a14)}
.lrn-ring{position:relative}
.lrn-ring b{position:relative;font-size:15px;font-weight:850}
.lrn-ht{display:flex;flex-direction:column;gap:3px;min-width:0}
.lrn-ht b{font-size:18px;font-weight:850;letter-spacing:-.01em;line-height:1.2}
.lrn-ht small{font-size:13.5px;line-height:1.4;color:var(--hint)}
.lrn-card{margin-bottom:10px;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);transition:box-shadow .2s}
.lrn-card.open{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.lrn-h{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lrn-n{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:850;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 15%,transparent)}
.lrn-n svg{width:18px;height:18px}
.lrn-card.done .lrn-n{color:#fff;background:linear-gradient(145deg,#34d399,#059669)}
.lrn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lrn-t b{font-size:16px;font-weight:780;line-height:1.25}
.lrn-t small{font-size:12.5px;line-height:1.35;color:var(--hint)}
.lrn-card.done .lrn-t small{color:#34d399}
.lrn-ch{flex:none;width:20px;height:20px;color:var(--hint);transition:transform .25s}
.lrn-card.open .lrn-ch{transform:rotate(180deg)}
.lrn-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.9,.3,1)}
.lrn-card.open .lrn-b{grid-template-rows:1fr}
.lrn-bi{overflow:hidden;min-height:0;padding:0 16px}
.lrn-card.open .lrn-bi{padding-bottom:16px}
.lrn-why{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lrn-why svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent-2,var(--accent))}
.lrn-bi ol{margin:0 0 14px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:9px}
.lrn-bi li{counter-increment:s;display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.lrn-bi li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.lrn-acts{display:flex;gap:10px}
.lrn-acts button{height:46px;border:0;border-radius:15px;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.lrn-acts button:active{transform:scale(.97)}
.lrn-go{flex:1;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.lrn-ok{padding:0 18px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.lrn-hl{position:relative;z-index:2;border-radius:18px;animation:lrnHl 1.3s ease-in-out 4 both}
@keyframes lrnHl{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent),0 0 0 2px var(--accent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 0 0 2px var(--accent)}}
.lrn-back{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:100086;transform:translateX(-50%);display:flex;align-items:center;gap:6px;height:44px;padding:0 18px 0 12px;border:0;border-radius:22px;font:inherit;font-size:14px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 14px 30px -10px rgba(0,0,0,.7);animation:lrnBk .4s cubic-bezier(.2,1.2,.4,1) both}
.lrn-back.out{opacity:0;transition:opacity .35s}
.lrn-back svg{width:18px;height:18px}
@keyframes lrnBk{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.lrn-hl{animation:none;box-shadow:0 0 0 2px var(--accent)}}

/* Гайди: без другого грабера й підзаголовка, компактніше */
.ghub-sheet .ghub-grab,.ghub-head small{display:none!important}
.ghub-head{margin-bottom:12px!important;align-items:center!important}
.ghub-card::after{display:none}

/* ===== Інтерактивний тур: підсвітка, картка поруч (не поверх цілі), точки, кнопки ===== */
.ct-ov{position:fixed;inset:0;z-index:100095;touch-action:none;animation:ctIn .25s ease both}
.ct-ov.out{opacity:0;transition:opacity .24s}
.ct-ov.modal{background:rgba(5,4,10,.78)}
@keyframes ctIn{from{opacity:0}to{opacity:1}}
.ct-sp{position:fixed;border-radius:18px;pointer-events:auto;box-shadow:0 0 0 200vmax rgba(5,4,10,.76),0 0 0 2px var(--accent),0 0 28px 4px var(--accent-glow);transition:top .36s cubic-bezier(.3,.9,.3,1),left .36s cubic-bezier(.3,.9,.3,1),width .36s cubic-bezier(.3,.9,.3,1),height .36s cubic-bezier(.3,.9,.3,1),opacity .2s}
.ct-card{position:fixed;display:flex;flex-direction:column;padding:18px 18px 16px;border-radius:24px;background:var(--bg,#0b0a14);border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));box-shadow:0 26px 60px -14px rgba(0,0,0,.8);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .26s,transform .3s cubic-bezier(.2,1.1,.3,1)}
.ct-card.in{opacity:1;transform:none}
.ct-ov.modal .ct-card{left:50%!important;top:50%!important;width:min(calc(100vw - 36px),380px)!important;transform:translate(-50%,-46%) scale(.97);text-align:center;align-items:center;padding-top:24px}
.ct-ov.modal .ct-card.in{transform:translate(-50%,-50%)}
.ct-ic{width:72px;height:72px;margin-bottom:14px;border-radius:24px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 14px 30px -12px var(--accent-glow)}
.ct-ic img{width:46px;height:46px;object-fit:contain}
.ct-ic svg{width:34px;height:34px}
.ct-st{align-self:flex-start;margin-bottom:10px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ct-t{font-size:20px;font-weight:850;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.ct-p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--hint)}
.ct-dots{display:flex;gap:5px;justify-content:center;margin-bottom:14px}
.ct-ov:not(.modal) .ct-dots{justify-content:flex-start}
.ct-dots i{width:6px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--text,#fff) 18%,transparent);transition:width .28s cubic-bezier(.3,1.4,.5,1),background .2s}
.ct-dots i.done{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.ct-dots i.on{width:20px;background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.ct-acts{display:flex;gap:10px;width:100%}
.ct-acts button{height:48px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:transform .14s cubic-bezier(.3,1.5,.5,1)}
.ct-acts button:active{transform:scale(.96)}
.ct-pri{flex:1;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 10px 22px -12px var(--accent-glow)}
.ct-sec{padding:0 18px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.ct-bk{width:52px;padding:0!important;display:grid;place-items:center}
.ct-bk svg{width:20px;height:20px}
.ct-skip{position:absolute;top:14px;right:16px;border:0;background:none;color:var(--hint);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px}
@media (prefers-reduced-motion:reduce){.ct-ov,.ct-card,.ct-sp{transition:none;animation:none}}

/* ===== Тур v2: без затемнення й вимірювань — підсвітка класом на елементі, картка внизу над навігацією, сторінка лишається живою ===== */
.ct-ov{pointer-events:none}
.ct-ov.modal{pointer-events:auto}
.ct-card{pointer-events:auto}
.ct-ov:not(.modal) .ct-sp{display:none}
.ct-ov:not(.modal) .ct-card{transform:translateY(16px)}
.ct-ov:not(.modal) .ct-card.in{transform:none}
.ct-hl{position:relative;z-index:5;outline:2.5px solid var(--accent);outline-offset:4px;border-radius:16px;animation:ctPulse 1.5s ease-in-out infinite}
@keyframes ctPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 24%,transparent)}}
@media (prefers-reduced-motion:reduce){.ct-hl{animation:none}}

/* ===== Гайд (покроковий): акуратніша шапка, компактна стрічка кроків, без подвійної рамки, блоки без зайвих обводок, прогрес ===== */
.apg-sheet .modal-header{align-items:center;margin-bottom:12px}
.apg-sheet .modal-header > span{font-size:19px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--text)!important}
.apg-rail{gap:6px!important;padding:0 0 12px!important}
.apg-dot{height:36px!important;padding:0 5px!important;border:0!important;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important}
.apg-dot i{width:26px!important;height:26px!important;background:none!important;color:var(--hint)}
.apg-dot.on{padding:0 14px 0 5px!important;background:color-mix(in srgb,var(--accent) 20%,transparent)!important}
.apg-dot.on i{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;color:#fff}
.apg-dot.done i{background:color-mix(in srgb,#34d399 22%,transparent)!important;color:#34d399}
.apg-step-t > i{display:none!important}
.apg-step-t b{font-size:22px!important;line-height:1.2}
.apg-pic{padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.apg-pic .mk-win{max-width:none!important;width:100%;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.apg-block{padding:14px 16px!important;border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;box-shadow:none!important}
.apg-block em{letter-spacing:.1em!important}
.apg-block.ok{background:color-mix(in srgb,#34d399 9%,transparent)!important}
.apg-errs{border-radius:18px!important;box-shadow:none!important;background:color-mix(in srgb,#fb7185 8%,transparent)!important}
.apg-nav{position:relative;padding-top:14px!important;border-top:0!important}
.apg-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent-2,var(--accent)) var(--p,0%),color-mix(in srgb,var(--text,#fff) 10%,transparent) 0);transition:background .3s}

/* Тур v2.1: рамка всередині елемента (не обрізається батьками), без зміни position/z-index */
.ct-hl{position:static!important;z-index:auto!important;outline:2.5px solid var(--accent)!important;outline-offset:-2.5px!important;border-radius:16px;animation:ctPulse2 1.5s ease-in-out infinite!important}
@keyframes ctPulse2{0%,100%{box-shadow:inset 0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--accent) 22%,transparent)}}

/* Помилка завантаження каналів: зрозумілий текст і кнопки */
.ch-err{display:flex!important;flex-direction:column;gap:14px;padding:18px!important;text-align:center;align-items:center}
.ch-err b{font-size:15px;font-weight:700;line-height:1.4;color:var(--text)}
.ch-err-a{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ch-err-b{height:44px;padding:0 20px;border:0;border-radius:14px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.ch-err-b.sec{color:var(--text);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}

/* ===== Бічне меню ПК під реальний «Сервіс»: без «Карти» й старого «Навчання», з «Початком роботи», «Що нового», «Резервною копією» ===== */
#sidebar-map-btn,#sidebar-tour-btn{display:none!important}
.nav-btn-extra{position:relative}
.nav-btn-extra.has-dot .nav-extra-ico{position:relative}
.nav-btn-extra.has-dot .nav-extra-ico::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--bg,#0b0a14)}

/* ===== Бічне меню ПК: пункти стискаються по висоті вікна — без прокрутки ===== */
body.desktop-platform{--sbi:clamp(30px,calc((100vh - 400px) / 11),44px)}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn,body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra{height:var(--sbi)!important;min-height:0!important;margin:0!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra .nav-extra-ico,body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn .nav-primary-ico{width:calc(var(--sbi) * .55)!important;height:calc(var(--sbi) * .55)!important}
body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn-extra .nav-extra-ico svg,body.desktop-platform.sidebar-collapsed .bottom-nav .nav-btn .nav-primary-ico svg{width:100%!important;height:100%!important}
body.desktop-platform.sidebar-collapsed .bottom-nav{gap:2px!important}
body.desktop-platform.sidebar-collapsed .sidebar-service-grid{gap:2px!important}
body.desktop-platform.sidebar-collapsed .sidebar-section-label{margin:4px 14px!important}
body.desktop-platform.sidebar-collapsed .sidebar-search-btn{height:var(--sbi)!important;margin:4px auto!important}
body.desktop-platform.sidebar-collapsed .sidebar-brand{padding:4px 0 6px!important;gap:6px!important}
body.desktop-platform.sidebar-collapsed .sidebar-footer{padding:8px 0!important;gap:6px!important}
body.desktop-platform:not(.sidebar-collapsed) .nav-btn,body.desktop-platform:not(.sidebar-collapsed) .nav-btn-extra{min-height:clamp(34px,calc((100vh - 360px) / 11),48px)!important}

/* значок за навчання у фіналі туру */
.ct-badge{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:10px 14px;border-radius:18px;text-align:left;background:color-mix(in srgb,#34d399 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#34d399 30%,transparent);animation:ctBdg .5s cubic-bezier(.2,1.4,.4,1) both}
.ct-badge .bdg{flex:none;width:44px;height:44px}
.ct-badge .bdg svg{width:100%;height:100%}
.ct-badge small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#34d399}
.ct-badge b{font-size:16px;font-weight:800}
@keyframes ctBdg{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* ===== Тур і уроки: стрілка до цілі, підказка «торкніться», крупніший текст, пам'ятка з кроками ===== */
.ct-card{overflow:visible}
.ct-arrow{position:absolute;width:16px;height:16px;margin-left:-8px;background:var(--bg,#0b0a14);transform:rotate(45deg);display:none}
.ct-arrow.up{display:block;top:-9px;border-left:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));border-top:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))}
.ct-arrow.dn{display:block;bottom:-9px;border-right:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))}
.ct-ov.modal .ct-arrow{display:none!important}
/* ПК: картка праворуч від пункту бічного меню — стрілка зліва */
.ct-arrow.lf{display:block;left:-9px!important;margin:-8px 0 0;border-left:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08))}
.ct-t{font-size:21px!important}
.ct-p{font-size:15.5px!important;line-height:1.5;color:color-mix(in srgb,var(--text,#fff) 78%,transparent)!important}
.ct-hint{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:14px;font-size:13.5px;font-weight:750;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ct-hint svg{flex:none;width:22px;height:22px;animation:ctTap 1.4s ease-in-out infinite}
@keyframes ctTap{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.lrn-tip{position:fixed;left:14px;right:14px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:100086;max-width:420px;margin:0 auto;padding:14px 16px 14px;border-radius:22px;background:var(--bg,#0b0a14);border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));box-shadow:0 22px 50px -14px rgba(0,0,0,.8);animation:ctTipIn .4s cubic-bezier(.2,1.2,.4,1) both}
@keyframes ctTipIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lrn-tip-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lrn-tip-h b{font-size:16.5px;font-weight:800}
.lrn-tip-x{flex:none;width:32px;height:32px;border:0;border-radius:10px;display:grid;place-items:center;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 8%,transparent);cursor:pointer}
.lrn-tip-x svg{width:16px;height:16px}
.lrn-tip ol{margin:0 0 12px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:7px}
.lrn-tip li{counter-increment:s;display:flex;gap:10px;font-size:14px;line-height:1.4}
.lrn-tip li::before{content:counter(s);flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.lrn-tip-b{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 8px;border:0;border-radius:13px;font:inherit;font-size:13.5px;font-weight:800;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.lrn-tip-b svg{width:17px;height:17px}

/* Тур на мобільному: компактна картка, щоб не закривала сторінку */
.ct-ov:not(.modal) .ct-card{padding:13px 16px 14px!important;border-radius:22px!important}
.ct-ov:not(.modal) .ct-st{margin-bottom:6px!important}
.ct-ov:not(.modal) .ct-t{font-size:18px!important;margin-bottom:4px!important}
.ct-ov:not(.modal) .ct-p{font-size:14px!important;line-height:1.45!important;margin:0 0 10px!important}
.ct-ov:not(.modal) .ct-hint{margin:0 0 10px!important;padding:8px 10px!important;font-size:13px!important}
.ct-ov:not(.modal) .ct-dots{margin-bottom:10px!important}
.ct-ov:not(.modal) .ct-acts button{height:44px!important;font-size:14.5px!important}
.ct-ov:not(.modal) .ct-bk{width:48px!important}
.ct-ov:not(.modal) .ct-skip{top:10px!important}

.ghub-gh{margin:4px 2px 8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.ghub-gh:not(:first-of-type){margin-top:16px}

/* ===== Навчання у стилі Duolingo ===== */
.duo{position:fixed;inset:0;z-index:100085;display:flex;flex-direction:column;background:var(--bg,#0b0a14);animation:svnIn .3s cubic-bezier(.2,.95,.3,1.02) both}
.duo.out{animation:svnOut .22s ease both}
@keyframes duoIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes duoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes duoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes duoUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes duoFall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}

/* ===== Тур у стилі Duolingo: кролик + бульбашка, товста смужка прогресу, зелена «об'ємна» кнопка ===== */
.ct-card{padding:16px 16px 14px!important;border-radius:24px!important}
.ct-prog{height:14px;border-radius:14px;overflow:hidden;margin-bottom:14px;background:color-mix(in srgb,var(--text,#fff) 12%,transparent)}
.ct-prog i{display:block;height:100%;border-radius:14px;background:#58cc02;position:relative;transition:width .45s cubic-bezier(.3,.9,.3,1)}
.ct-prog i::after{content:"";position:absolute;left:7px;right:7px;top:3px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.ct-say{display:flex;align-items:flex-end;gap:10px;margin-bottom:12px}
.ct-rab{flex:none;width:64px;height:64px;object-fit:contain;animation:ctBob 2.6s ease-in-out infinite}
@keyframes ctBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ct-bub{position:relative;flex:1;min-width:0;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text,#fff) 14%,transparent)}
.ct-bub::before{content:"";position:absolute;left:-7px;bottom:18px;width:12px;height:12px;background:color-mix(in srgb,var(--text,#fff) 7%,var(--bg,#0b0a14));border-left:2px solid color-mix(in srgb,var(--text,#fff) 14%,transparent);border-bottom:2px solid color-mix(in srgb,var(--text,#fff) 14%,transparent);transform:rotate(45deg)}
.ct-bub .ct-t{display:block;font-size:16.5px!important;font-weight:850;margin-bottom:3px!important}
.ct-bub .ct-p{margin:0!important;font-size:14px!important;line-height:1.4!important;color:var(--text)!important;opacity:.85}
.ct-ov.modal .ct-card{text-align:center}
.ct-ov.modal .ct-t{display:block;font-size:22px!important}
.ct-ov.modal .ct-p{font-size:15px!important;margin-bottom:14px!important}
.ct-ic{background:none!important;box-shadow:none!important;width:110px!important;height:110px!important;margin:0 auto 8px!important;animation:ctBob 2.6s ease-in-out infinite}
.ct-ic img{width:100px!important;height:100px!important}
.ct-ic svg{color:#58cc02}
.ct-hint{background:color-mix(in srgb,#1cb0f6 14%,transparent)!important;color:#1cb0f6!important;font-weight:800!important}
.ct-acts{gap:10px!important}
.ct-acts button{height:50px!important;border-radius:16px!important;font-weight:850!important;letter-spacing:.05em;text-transform:uppercase;font-size:14.5px!important;transition:transform .08s,box-shadow .08s!important}
.ct-pri{background:#58cc02!important;box-shadow:0 5px 0 #46a302!important}
.ct-pri:active{transform:translateY(4px)!important;box-shadow:0 1px 0 #46a302!important}
.ct-sec{background:none!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text,#fff) 16%,transparent),0 4px 0 color-mix(in srgb,var(--text,#fff) 14%,transparent)!important;color:var(--hint)!important}
.ct-sec:active{transform:translateY(3px)!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--text,#fff) 16%,transparent),0 1px 0 color-mix(in srgb,var(--text,#fff) 14%,transparent)!important}
.ct-ov:not(.modal) .ct-acts button{height:46px!important}
.ct-skip{position:absolute!important;top:13px!important;right:16px!important;font-size:12.5px!important;font-weight:850!important;letter-spacing:.06em;text-transform:uppercase}
.ct-ov:not(.modal) .ct-prog{margin-right:96px}
.ct-hl{outline-color:#58cc02!important}
@keyframes ctPulse2{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 7px color-mix(in srgb,#58cc02 24%,transparent)}}
@media (prefers-reduced-motion:reduce){.ct-rab,.ct-ic{animation:none}}

/* ===== Тур: власний стиль замість копії Duolingo — кольори теми, м'які форми, без «об'ємних» кнопок і капсу ===== */
.ct-prog{height:8px!important;margin-bottom:14px!important}
.ct-prog i{background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important}
.ct-prog i::after{display:none!important}
.ct-bub{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)!important}
.ct-bub::before{background:color-mix(in srgb,var(--accent) 12%,var(--bg,#0b0a14))!important;border-left:1px solid color-mix(in srgb,var(--accent) 28%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 28%,transparent)!important}
.ct-acts button{text-transform:none!important;letter-spacing:0!important;font-size:15.5px!important;font-weight:800!important}
.ct-pri{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;box-shadow:0 10px 22px -12px var(--accent-glow)!important}
.ct-pri:active{transform:scale(.97)!important;box-shadow:0 6px 14px -10px var(--accent-glow)!important}
.ct-sec{background:color-mix(in srgb,var(--text,#fff) 8%,transparent)!important;box-shadow:none!important;color:var(--text)!important}
.ct-sec:active{transform:scale(.97)!important;box-shadow:none!important}
.ct-hint{background:color-mix(in srgb,var(--accent) 14%,transparent)!important;color:var(--accent-2,var(--accent))!important}
.ct-hl{outline-color:var(--accent)!important}
.ct-ic svg{color:var(--accent-2,var(--accent))}
.ct-skip{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:700!important}
@keyframes ctPulse2{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--accent) 24%,transparent)}}

/* Тур: контрастна жовта обводка + затемнення решти екрана (тінь самого елемента, без вимірювань) */
.ct-lift{position:relative!important;z-index:6!important}
.ct-hl{outline:3px solid #fbbf24!important;outline-offset:3px!important;box-shadow:0 0 0 200vmax rgba(5,4,10,.66)!important;animation:ctRing 1.4s ease-in-out infinite!important}
@keyframes ctRing{0%,100%{outline-offset:3px}50%{outline-offset:7px}}
@media (prefers-reduced-motion:reduce){.ct-hl{animation:none!important}}

/* ===== Екран блокування (геоблок РФ/РБ) ===== */
.geo-block{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 22px calc(18px + env(safe-area-inset-bottom,0px));background:radial-gradient(70% 50% at 50% 0%,rgba(0,87,183,.28),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(255,215,0,.12),transparent 70%),#0a0a10;color:#f4f4f8;text-align:center;overflow-y:auto}
.geo-in{display:flex;flex-direction:column;align-items:center;max-width:380px;width:100%}
.geo-ico{width:84px;height:84px;border-radius:28px;display:grid;place-items:center;margin-bottom:20px;color:#fff;background:linear-gradient(145deg,#ef4444,#b91c1c);box-shadow:0 18px 40px -16px rgba(239,68,68,.6)}
.geo-ico svg{width:42px;height:42px}
.geo-block h1{margin:0;font-size:28px;font-weight:850;letter-spacing:-.02em}
.geo-en{margin:4px 0 16px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a9aae}
.geo-block p{margin:0 0 26px;font-size:16px;line-height:1.55;color:#c9c9d6}
.geo-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;padding:12px 18px;border:0;border-radius:16px;font:inherit;font-size:16px;font-weight:800;color:#0a0a10;cursor:pointer;background:linear-gradient(180deg,#0057b7 0 50%,#ffd700 50% 100%);position:relative;transition:transform .12s}
.geo-btn:active{transform:scale(.97)}
.geo-btn{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.geo-flag{display:none}
.geo-foot{margin-top:32px;display:flex;align-items:center;gap:8px;font-size:13px;color:#7c7c90}
.geo-foot img{width:22px;height:22px;object-fit:contain}
body.geo-blocked-lock{overflow:hidden}

/* Шапка: значок «повідомити про баг» прибрано */
#bug-fab,.topbar-bug-btn{display:none!important}

/* Тур: скрол сторінки працює; запасний значок замість зламаної картинки; «Повідомити про баг» прибрано і з Сервісу */
.ct-ov,.ct-ov *{touch-action:auto}
.ct-ov:not(.modal){pointer-events:none}
.ct-ov:not(.modal) .ct-card{pointer-events:auto}
.ct-rab-fb{display:grid;place-items:center;border-radius:20px;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.ct-rab-fb svg{width:34px;height:34px}
#profile-report-bug-row{display:none!important}

/* ===== Тест геоблокування ===== */
.geo-t-l{margin:0 2px 8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.geo-t-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px}
.geo-t-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:0;border-radius:14px;font:inherit;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent);transition:transform .12s}
.geo-t-chip:active{transform:scale(.95)}
.geo-t-chip b{font-size:16px;font-weight:850;letter-spacing:.04em}
.geo-t-chip span{font-size:10.5px;line-height:1.1;color:var(--hint);text-align:center}
.geo-t-chip.on,.geo-t-real.on{box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.geo-t-real{width:100%;height:46px;margin-bottom:10px;border:0;border-radius:14px;font:inherit;font-size:14.5px;font-weight:750;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.geo-t-res{min-height:22px;margin-bottom:12px;padding:0 2px;font-size:14.5px;font-weight:750;color:var(--hint)}
.geo-t-res.ok{color:#34d399}
.geo-t-res.no{color:#fb7185}
.geo-t-show{width:100%;height:50px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.geo-block.preview{z-index:2147483100}
.geo-x{position:absolute;top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 54px);right:18px;width:42px;height:42px;border:0;border-radius:14px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);cursor:pointer}
.geo-x svg{width:20px;height:20px}
.geo-pv{position:absolute;top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 62px);left:20px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fbbf24;background:rgba(251,191,36,.14)}

/* ===== Порожня Головна ===== */
.ec{display:flex;flex-direction:column;gap:14px;padding:4px 0 6px}
.ec-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 16px 16px;border-radius:24px;background:radial-gradient(80% 70% at 50% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),color-mix(in srgb,var(--text,#fff) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.ec-rab{position:relative;width:128px;height:112px;margin-bottom:8px}
.ec-rab img{position:absolute;left:50%;top:50%;width:92px;transform:translate(-50%,-50%);animation:ecFloat 3.2s ease-in-out infinite}
.ec-rab i{position:absolute;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 16%,var(--bg,#0b0a14));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);animation:ecFloat 3.2s ease-in-out infinite}
.ec-rab i svg{width:18px;height:18px}
.ec-rab .o1{left:0;top:6px;animation-delay:-.6s}
.ec-rab .o2{right:2px;top:0;animation-delay:-1.4s}
.ec-rab .o3{right:10px;bottom:0;animation-delay:-2.2s}
@keyframes ecFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px)}}
.ec-rab img{animation-name:ecFloatC}
@keyframes ecFloatC{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.ec-hero h3{margin:0 0 6px;font-size:21px;font-weight:850;letter-spacing:-.02em;line-height:1.2}
.ec-hero p{margin:0;font-size:14.5px;line-height:1.5;color:var(--hint);max-width:340px}
.ec-steps{display:flex;flex-direction:column;gap:8px}
.ec-step{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px 12px 10px;border:0;border-radius:18px;font:inherit;color:var(--text);text-align:left;cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);animation:ecIn .45s cubic-bezier(.2,.95,.3,1.02) both;animation-delay:var(--d,0ms);transition:transform .12s}
.ec-step:active{transform:scale(.98)}
@keyframes ecIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ec-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:850;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.ec-ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 15%,transparent)}
.ec-ic svg{width:21px;height:21px}
.ec-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ec-t b{font-size:15px;font-weight:780;line-height:1.25}
.ec-t small{font-size:12.5px;color:var(--hint)}
.ec-go{flex:none;color:var(--hint)}
.ec-go svg{width:18px;height:18px}
.ec-acts{display:flex;gap:10px}
.ec-pri,.ec-sec{height:50px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;cursor:pointer;transition:transform .12s}
.ec-pri:active,.ec-sec:active{transform:scale(.97)}
.ec-pri{flex:1.3;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 10px 22px -12px var(--accent-glow)}
.ec-sec{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.ec-sec svg{width:19px;height:19px}
.ec-link{align-self:center;border:0;background:none;color:var(--accent-2,var(--accent));font:inherit;font-size:14px;font-weight:750;cursor:pointer;padding:2px 8px}
.ec-wl{margin:6px 2px -4px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.ec-feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ec-f{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.ec-f span{width:36px;height:36px;margin-bottom:6px;border-radius:12px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 15%,transparent)}
.ec-f span svg{width:19px;height:19px}
.ec-f b{font-size:14.5px;font-weight:780}
.ec-f small{font-size:12px;line-height:1.35;color:var(--hint)}
@media (prefers-reduced-motion:reduce){.ec-rab img,.ec-rab i,.ec-step{animation:none}}

/* Порожня Головна v2: одна компактна картка з таймлайном і два швидкі переходи */
.ec{gap:12px!important}
.ec-hero{padding:16px 16px 10px!important}
.ec-rab{width:96px!important;height:84px!important;margin-bottom:4px!important}
.ec-rab img{width:84px!important}
.ec-hero h3{font-size:19px!important}
.ec-hero p{font-size:14px!important;margin-bottom:12px!important}
.ec-tl{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;padding-left:2px}
.ec-tl::before{content:"";position:absolute;left:13px;top:22px;bottom:22px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent))}
.ec-tl .ec-step{background:none!important;box-shadow:none!important;padding:9px 6px 9px 0!important;gap:12px!important}
.ec-tl .ec-n{position:relative;width:26px;height:26px;font-size:13px;box-shadow:0 0 0 4px var(--bg,#0b0a14)}
.ec-tl .ec-t b{font-size:15px}
.ec-row{display:flex;gap:10px}
.ec-row .ec-sec{flex:1;height:46px;font-size:14px;padding:0 8px}

/* Порожня Головна v3: без зайвої зовнішньої рамки, рівні кнопки, акуратний таймлайн */
#channels-list:has(.ec){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important}
.ec{padding:0!important}
.ec-hero{border-radius:26px!important;padding:20px 18px 12px!important;background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--text,#fff) 5%,var(--bg,#0b0a14)),color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent),0 18px 40px -24px var(--accent-glow)!important}
.ec-hero h3{font-size:20px!important;text-wrap:balance;margin-bottom:8px!important}
.ec-hero p{text-wrap:balance;margin-bottom:14px!important}
.ec-tl::before{left:16px!important;top:30px!important;bottom:30px!important;width:2px!important;opacity:.55}
.ec-tl .ec-n{width:30px!important;height:30px!important;font-size:14px!important;box-shadow:none!important;border:3px solid color-mix(in srgb,var(--text,#fff) 6%,var(--bg,#0b0a14))}
.ec-tl .ec-step{padding:10px 4px 10px 0!important}
.ec-tl .ec-step:active{background:color-mix(in srgb,var(--accent) 8%,transparent)!important}
.ec-row{gap:10px!important}
.ec-row .ec-sec{flex:1 1 0!important;min-width:0;height:50px!important;border-radius:16px!important;font-size:14px!important;white-space:nowrap;gap:8px!important;justify-content:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.ec-row .ec-sec svg{flex:none}

/* Без каналів: лише «Додати канал» на всю ширину; «Вибрати» й «Гайд» з'являються, коли є хоча б один канал */
body.no-channels #channels-select-btn,body.no-channels #ap-guide-btn{display:none!important}
body.no-channels #add-channel-btn{flex:1 1 100%!important;width:100%!important;max-width:none!important}

/* Порожня Головна v4: сяйво навколо кролика, градієнтний заголовок, кольорові плитки кроків, світла смуга-прогрес */
.ec-hero{position:relative;overflow:hidden}
.ec-hero::before{content:"";position:absolute;left:50%;top:-40px;width:260px;height:260px;margin-left:-130px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 66%);filter:blur(6px);animation:ecGlow 4s ease-in-out infinite;pointer-events:none}
@keyframes ecGlow{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
.ec-hero > *{position:relative}
.ec-rab{width:112px!important;height:98px!important}
.ec-rab img{width:96px!important;filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--accent) 45%,transparent))}
.ec-hero h3{background:linear-gradient(90deg,var(--text,#fff) 30%,var(--accent-2,var(--accent)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:22px!important}
.ec-tl::before{display:none!important}
.ec-tl{gap:8px;padding:0!important}
.ec-tl .ec-step{padding:10px 12px 10px 10px!important;border-radius:18px!important;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)!important}
.ec-tl .ec-n{position:relative;flex:none;width:44px!important;height:44px!important;border:0!important;border-radius:14px!important;background:none!important;display:block!important}
.ec-tl .ec-n b{width:100%;height:100%;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 8px 16px -8px var(--c2)}
.ec-tl .ec-n b svg{width:22px;height:22px}
.ec-tl .ec-n i{position:absolute;right:-5px;top:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:850;color:var(--text);background:var(--bg,#0b0a14);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--text,#fff) 22%,transparent)}
.ec-tl .ec-n[data-k="0"] b{background:linear-gradient(145deg,#a78bfa,#6d28d9);--c2:#6d28d9}
.ec-tl .ec-n[data-k="1"] b{background:linear-gradient(145deg,#2dd4bf,#0f766e);--c2:#0f766e}
.ec-tl .ec-n[data-k="2"] b{background:linear-gradient(145deg,#fbbf24,#d97706);--c2:#d97706}
.ec-tl .ec-step:first-child{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)!important;background:color-mix(in srgb,var(--accent) 9%,transparent)!important}
.ec-row .ec-sec{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)!important}
.ec-row .ec-sec svg{color:var(--accent-2,var(--accent))}
@media (prefers-reduced-motion:reduce){.ec-hero::before{animation:none}}

/* Порожня Головна: кролик у звичайному потоці (без absolute/translate) — більше не наїжджає на заголовок */
.ec-rab{position:relative!important;display:grid!important;place-items:center;flex:none;width:112px!important;height:98px!important;margin:0 auto 8px!important}
.ec-rab img{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:96px!important;height:auto!important;max-width:none!important;animation:ecBob 3.2s ease-in-out infinite!important}
@keyframes ecBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ec-hero h3,.ec-hero p,.ec-tl{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.ec-rab img{animation:none!important}}

/* ===== «Початок роботи» (уроки): градієнтне кільце, іконки-плитки, чистіший розкритий урок ===== */
.lrn-hero{position:relative;overflow:hidden;gap:18px!important;padding:18px!important;border-radius:26px!important;background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),color-mix(in srgb,var(--text,#fff) 4%,var(--bg,#0b0a14))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),0 18px 40px -26px var(--accent-glow)!important}
.lrn-ring{width:78px!important;height:78px!important;background:conic-gradient(from -90deg,var(--accent-2,var(--accent)) calc(var(--p)*1%),color-mix(in srgb,var(--text,#fff) 12%,transparent) 0)!important;box-shadow:0 0 22px -6px var(--accent-glow)}
.lrn-ring::before{width:62px!important;height:62px!important;background:color-mix(in srgb,var(--text,#fff) 3%,var(--bg,#0b0a14))!important}
.lrn-ring b{font-size:17px!important;font-weight:850}
.lrn-ht b{font-size:17px!important;line-height:1.25!important;text-wrap:balance}
.lrn-ht small{font-weight:700;color:var(--accent-2,var(--accent))!important}
.lrn-card{border-radius:22px!important;margin-bottom:12px!important;background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important}
.lrn-card.open{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--text,#fff) 3%,transparent))!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 42%,transparent),0 16px 34px -24px var(--accent-glow)!important}
.lrn-card.open .lrn-t small{display:none}
.lrn-h{padding:14px 14px!important}
.lrn-n{position:relative!important;width:48px!important;height:48px!important;border-radius:16px!important;background:none!important;display:block!important;color:#fff!important}
.lrn-n b{display:grid;place-items:center;width:100%;height:100%;border-radius:16px;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 10px 18px -10px var(--accent-glow)}
.lrn-n b svg{width:23px!important;height:23px!important}
.lrn-n i{position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:850;color:var(--text);background:var(--bg,#0b0a14);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--text,#fff) 24%,transparent)}
.lrn-n[data-l="sources"] b{background:linear-gradient(145deg,#2dd4bf,#0f766e);box-shadow:0 10px 18px -10px #0f766e}
.lrn-n[data-l="filter"] b{background:linear-gradient(145deg,#fb923c,#c2410c);box-shadow:0 10px 18px -10px #c2410c}
.lrn-n[data-l="autopost"] b{background:linear-gradient(145deg,#fbbf24,#d97706);box-shadow:0 10px 18px -10px #d97706}
.lrn-n[data-l="post"] b{background:linear-gradient(145deg,#f472b6,#be185d);box-shadow:0 10px 18px -10px #be185d}
.lrn-n[data-l="ai"] b{background:linear-gradient(145deg,#a78bfa,#6d28d9);box-shadow:0 10px 18px -10px #6d28d9}
.lrn-card.done .lrn-n b{background:linear-gradient(145deg,#34d399,#059669)!important;box-shadow:0 10px 18px -10px #059669!important}
.lrn-t b{font-size:16.5px!important}
.lrn-why{border-radius:16px!important;background:color-mix(in srgb,var(--accent) 12%,transparent)!important;font-weight:600}
.lrn-bi ol{position:relative;gap:12px!important}
.lrn-bi ol::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.lrn-bi li{position:relative;font-size:15px!important}
.lrn-bi li::before{width:22px!important;height:22px!important;background:var(--bg,#0b0a14)!important;color:var(--accent-2,var(--accent))!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent);position:relative;z-index:1}
.lrn-go{display:flex!important;align-items:center;justify-content:center;gap:8px;height:50px!important;border-radius:16px!important;box-shadow:0 10px 22px -12px var(--accent-glow)}
.lrn-go svg{width:18px;height:18px}
.lrn-ok{height:50px!important;border-radius:16px!important}

/* ===== Екран блокування v2 ===== */
.geo-block{background:radial-gradient(80% 45% at 50% -5%,rgba(0,87,183,.5),transparent 70%),radial-gradient(70% 38% at 50% 105%,rgba(255,215,0,.2),transparent 70%),linear-gradient(180deg,#071228,#0a0a12 55%,#12100a)!important}
.geo-block::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(70% 55% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 55% at 50% 40%,#000,transparent 75%);pointer-events:none}
.geo-in{position:relative;animation:geoIn .6s cubic-bezier(.2,.95,.3,1.02) both}
@keyframes geoIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.geo-ico{position:relative;width:96px!important;height:96px!important;border-radius:32px!important;margin-bottom:26px!important}
.geo-ico svg{position:relative;width:46px!important;height:46px!important}
.geo-ico i{position:absolute;inset:0;border-radius:32px;border:2px solid rgba(239,68,68,.55);animation:geoRing 2.6s ease-out infinite}
.geo-ico i.r2{animation-delay:1.3s}
@keyframes geoRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.geo-block h1{font-size:30px!important;letter-spacing:-.02em;text-wrap:balance}
.geo-en{margin:6px 0 14px!important;color:#8d93ad!important}
.geo-stripe{display:flex;flex-direction:column;gap:3px;width:56px;margin:0 auto 18px}
.geo-stripe i{display:block;height:4px;border-radius:4px;background:#0057b7}
.geo-stripe i+i{background:#ffd700}
.geo-block p{color:#d3d6e6!important;font-size:16.5px!important;text-wrap:balance}
.geo-btn{gap:12px!important;min-height:56px!important;border-radius:18px!important;color:#fff!important;text-shadow:none!important;background:linear-gradient(135deg,#1a6fe0,#0057b7 55%,#0b3d91)!important;box-shadow:0 14px 30px -14px rgba(0,87,183,.9),inset 0 -4px 0 #ffd700!important;padding-bottom:16px!important}
.geo-btn svg{width:22px;height:22px;flex:none;color:#ffd700}
.geo-btn span{font-weight:800}
.geo-foot{opacity:.85}
@media (prefers-reduced-motion:reduce){.geo-in,.geo-ico i{animation:none}}

/* ===== Екран блокування v3: у дусі «Дії» — світлий пастельний фон, чорна типографіка, чорна кнопка, мінімум декору ===== */
.geo-block{color:#0b0b0f!important;background:radial-gradient(70% 38% at 12% 0%,#cfe3ff 0,transparent 70%),radial-gradient(60% 34% at 100% 12%,#fff0b3 0,transparent 70%),radial-gradient(70% 40% at 50% 105%,#ffd9cf 0,transparent 70%),#f4f6fb!important}
.geo-block::before{background-image:none!important}
.geo-in{max-width:400px!important;align-items:flex-start!important;text-align:left!important}
.geo-ico{width:72px!important;height:72px!important;border-radius:24px!important;margin-bottom:28px!important;color:#fff!important;background:#0b0b0f!important;box-shadow:0 18px 36px -18px rgba(0,0,0,.55)!important}
.geo-ico svg{width:34px!important;height:34px!important}
.geo-ico i{border-color:rgba(11,11,15,.25)!important}
.geo-block h1{font-size:34px!important;line-height:1.08!important;letter-spacing:-.03em!important;color:#0b0b0f!important;text-align:left}
.geo-en{margin:8px 0 18px!important;color:rgba(11,11,15,.45)!important;letter-spacing:.1em!important}
.geo-stripe{margin:0 0 20px!important;width:44px!important}
.geo-block p{font-size:19px!important;line-height:1.45!important;font-weight:500;color:rgba(11,11,15,.82)!important;text-align:left!important;margin-bottom:34px!important}
.geo-btn{min-height:60px!important;border-radius:22px!important;background:#0b0b0f!important;color:#fff!important;box-shadow:0 18px 34px -18px rgba(0,0,0,.6)!important;padding-bottom:0!important;font-size:17px!important}
.geo-btn svg{color:#ffd700!important}
.geo-foot{align-self:center;color:rgba(11,11,15,.5)!important;opacity:1!important}
.geo-foot img{filter:invert(1) brightness(.2);opacity:.7}
.geo-x{color:#0b0b0f!important;background:rgba(11,11,15,.08)!important}
.geo-pv{color:#8a6100!important;background:rgba(255,200,0,.28)!important}

/* ===== Екран блокування v4 ===== */
.geo-block{justify-content:center!important;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
.geo-block::after{content:"";position:absolute;right:-90px;bottom:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,87,183,.16),transparent 68%);pointer-events:none}
.geo-block.preview .geo-in{margin-top:56px}
.geo-ico{width:84px!important;height:84px!important;border-radius:28px!important;background:linear-gradient(160deg,#16161d,#0b0b0f)!important;box-shadow:0 22px 40px -20px rgba(0,0,0,.6),inset 0 -4px 0 #ffd700,inset 0 -8px 0 #0057b7!important}
.geo-ico svg{width:40px!important;height:40px!important;transform:translateY(-3px)}
.geo-ico i{border-radius:28px!important}
.geo-block h1{font-size:36px!important}
.geo-block p{font-size:18.5px!important;max-width:340px}
.geo-btn{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;text-align:left!important;min-height:68px!important;padding:12px 20px 12px 18px!important;border-radius:24px!important}
.geo-btn > svg:first-child{width:26px!important;height:26px!important}
.geo-bt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.geo-bt b{font-size:16.5px;font-weight:800;line-height:1.2}
.geo-bt small{font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.geo-arr{flex:none;width:22px!important;height:22px!important;color:#fff!important;opacity:.8}

/* Екран блокування: контент завжди нижче шапки й позначки «Тестовий перегляд» */
.geo-block{padding-top:calc(150px + env(safe-area-inset-top,0px))!important;justify-content:flex-start!important}
.geo-block .geo-in{margin-top:auto;margin-bottom:auto}
.geo-block h1{font-size:34px!important}

/* Екран блокування: прапор України замість руки, усе по центру */
.geo-in{align-items:center!important;text-align:center!important}
.geo-block h1,.geo-block p,.geo-en{text-align:center!important}
.geo-block p{margin-left:auto;margin-right:auto}
.geo-stripe{margin-left:auto!important;margin-right:auto!important}
.geo-ico{background:none!important;box-shadow:0 22px 40px -20px rgba(0,60,140,.55)!important;overflow:visible!important;border-radius:30px!important}
.geo-ico img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:30px;display:block}
.geo-ico i{border-color:rgba(0,87,183,.35)!important}
.geo-btn{text-align:left}

/* Підтвердження номера (гео за номером) */
.geo-ico-ph{background:linear-gradient(160deg,#16161d,#0b0b0f)!important;color:#fff;display:grid;place-items:center}
.geo-ico-ph svg{width:40px;height:40px}
.geo-note{min-height:22px;margin-top:14px;font-size:14px;line-height:1.4;font-weight:600;color:rgba(11,11,15,.6);text-align:center}
.geo-btn-ph{justify-content:center!important;text-align:center!important}
.geo-btn-ph .geo-bt{align-items:center}
.geo-btn-ph:disabled{opacity:.6}

/* Прапор України: хвилястий SVG на держаку з відблиском і плавним коливанням */
.geo-flag-wrap{width:140px!important;height:124px!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;margin-bottom:22px!important}
.geo-flag-wrap i{display:none!important}
.geo-flagsvg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 18px rgba(0,87,183,.32))}
.gf-wave{transform-origin:10px 46px;animation:gfWave 3.2s ease-in-out infinite alternate}
@keyframes gfWave{0%{transform:skewY(-2.2deg) translateY(1px)}50%{transform:skewY(1.4deg) translateY(-2px)}100%{transform:skewY(-1deg) translateY(1px)}}
@media (prefers-reduced-motion:reduce){.gf-wave{animation:none}}

/* Тест екранів: сітка перегляду й плаваюча кнопка закриття */
.geo-t-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.geo-t-grid button{min-height:52px;padding:8px 10px;border:0;border-radius:14px;font:inherit;font-size:14px;font-weight:750;line-height:1.2;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent);transition:transform .12s}
.geo-t-grid button:active{transform:scale(.97)}
.pv-close{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2147483200;height:46px;padding:0 22px;border:0;border-radius:23px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;background:rgba(15,15,22,.92);box-shadow:0 14px 30px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14)}

.geo-t-phone{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px;padding:10px 12px;border-radius:14px;font-size:14px;font-weight:700;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.geo-t-phone span{min-width:0}
.geo-t-phone button{flex:none;height:36px;padding:0 14px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}

/* ===== Технічні роботи й бан: єдиний світлий стиль із екраном блокування, без кота ===== */
#maintenance-screen,#ban-screen{color:#0b0b0f!important;background:radial-gradient(70% 38% at 12% 0%,#cfe3ff 0,transparent 70%),radial-gradient(60% 34% at 100% 12%,#fff0b3 0,transparent 70%),radial-gradient(70% 40% at 50% 105%,#ffd9cf 0,transparent 70%),#f4f6fb!important}
#maintenance-screen .maintenance-blob,#ban-screen .maintenance-blob{display:none!important}
#maintenance-screen .splash-footer,#ban-screen .splash-footer{color:rgba(11,11,15,.5)!important}
#maintenance-screen .splash-footer img,#ban-screen .splash-footer img{filter:invert(1) brightness(.2);opacity:.7}
/* технічні роботи */
#maintenance-screen .mt-card{background:none!important;border:0!important;box-shadow:none!important;max-width:380px!important;padding:0 22px!important;text-align:center}
#maintenance-screen .mt-emblem{width:124px!important;height:124px!important;margin:0 auto 24px!important;border-radius:38px;background:#fff;box-shadow:0 22px 44px -22px rgba(0,40,110,.45);display:grid;place-items:center}
#maintenance-screen .mt-emblem-ring{display:none!important}
#maintenance-screen .mt-gears{width:88px!important;height:88px!important}
#maintenance-screen .mt-title{color:#0b0b0f!important;font-size:32px!important;line-height:1.1;letter-spacing:-.03em;font-weight:850}
#maintenance-screen .mt-title-en{color:rgba(11,11,15,.45)!important;letter-spacing:.1em;text-transform:uppercase;font-size:13px;font-weight:700;margin:6px 0 14px}
#maintenance-screen .mt-status{display:inline-flex;align-items:center;gap:8px;margin:0 auto 18px;padding:9px 16px;border-radius:999px;background:#fff!important;border:0!important;box-shadow:0 10px 24px -14px rgba(0,0,0,.35);color:#0b0b0f!important;font-size:13.5px;font-weight:700}
#maintenance-screen .maintenance-desc{color:rgba(11,11,15,.82)!important;font-size:17px!important;line-height:1.45!important}
#maintenance-screen .maintenance-desc + .maintenance-note + .maintenance-desc,#maintenance-screen .maintenance-desc[style]{color:rgba(11,11,15,.48)!important;font-size:15px!important}
#maintenance-screen .maintenance-note{color:rgba(11,11,15,.5)!important}
#maintenance-screen .mt-tile{background:#fff!important;border:0!important;box-shadow:0 14px 28px -16px rgba(0,40,110,.4)!important;border-radius:20px!important}
#maintenance-screen .mt-tile b{color:#0b0b0f!important}
#maintenance-screen .mt-tile i{color:rgba(11,11,15,.45)!important}
#maintenance-screen .maintenance-countdown-label{color:rgba(11,11,15,.5)!important}
#maintenance-screen .mt-bar{background:rgba(11,11,15,.08)!important}
#maintenance-screen .mt-bar span{background:linear-gradient(90deg,#0057b7,#ffd700)!important}
/* бан */
#ban-screen .maintenance-content{background:none!important;border:0!important;box-shadow:none!important;text-align:center;max-width:390px!important}
#ban-screen .ban-ico{width:92px;height:92px;margin:56px auto 24px;border-radius:30px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,#16161d,#0b0b0f);box-shadow:0 22px 40px -20px rgba(0,0,0,.6),inset 0 -4px 0 #ffd700,inset 0 -8px 0 #0057b7}
#ban-screen .ban-ico svg{width:42px;height:42px;transform:translateY(-3px)}
#ban-screen .maintenance-title{color:#0b0b0f!important;font-size:32px!important;line-height:1.1;letter-spacing:-.03em;font-weight:850;text-shadow:none!important}
.ban-title-en{margin:6px 0 16px;color:rgba(11,11,15,.45);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#ban-screen .geo-stripe{margin:0 auto 18px}
#ban-screen .maintenance-desc{color:rgba(11,11,15,.8)!important;font-size:16.5px!important}
#ban-screen #ban-reason-en{color:rgba(11,11,15,.48)!important;font-size:14.5px!important}
#ban-screen .maintenance-note{color:rgba(11,11,15,.55)!important;font-size:14px!important}
#ban-screen textarea{background:#fff!important;border:0!important;color:#0b0b0f!important;border-radius:20px!important;padding:14px 16px!important;font-size:16px!important;box-shadow:0 14px 28px -18px rgba(0,40,110,.4)!important;resize:none}
#ban-screen textarea::placeholder{color:rgba(11,11,15,.4)}
#ban-screen #ban-appeal-submit{min-height:58px;border:0!important;border-radius:20px!important;background:#0b0b0f!important;color:#fff!important;font-size:15.5px!important;font-weight:800!important;box-shadow:0 18px 34px -18px rgba(0,0,0,.6)!important}
#ban-screen .muted{color:rgba(11,11,15,.5)!important}

/* ===== Дотяжка екранів: підтвердження номера, технічні роботи, закриття перегляду ===== */
.geo-phone .geo-in{align-items:center}
.geo-phone h1{margin:0 0 16px!important;line-height:1.1}
.geo-phone .geo-stripe{margin:0 auto 18px!important}
.geo-bul{list-style:none;padding:0;margin:0 0 28px!important;display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;text-align:left}
.geo-bul li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;box-shadow:0 12px 26px -18px rgba(0,40,110,.45);font-size:15px;font-weight:650;color:#0b0b0f}
.geo-bul li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#1a6fe0,#0057b7)}
.geo-bul li i svg{width:14px;height:14px}
.geo-btn-ph{min-height:62px!important}
.geo-phone .geo-note{min-height:20px}
#maintenance-screen .mt-status{justify-content:center;text-align:center;max-width:100%;line-height:1.3;font-size:13px!important;padding:10px 16px!important}
#maintenance-screen .mt-status .mt-dot{flex:none}
#maintenance-screen .mt-tile b{font-size:36px!important}
.pv-close{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}

/* ===== Технічні роботи й бан — темна тема (перекриває світлий варіант вище) ===== */
#maintenance-screen,#ban-screen{color:#f4f5fb!important;background:radial-gradient(70% 40% at 10% 0%,rgba(0,87,183,.42) 0,transparent 70%),radial-gradient(60% 34% at 100% 8%,rgba(124,58,237,.28) 0,transparent 70%),radial-gradient(70% 40% at 50% 108%,rgba(255,215,0,.16) 0,transparent 70%),#07080f!important}
#maintenance-screen .splash-footer,#ban-screen .splash-footer{color:rgba(255,255,255,.45)!important}
#maintenance-screen .splash-footer img,#ban-screen .splash-footer img{filter:none;opacity:.7}
/* технічні роботи */
#maintenance-screen .mt-emblem{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 26px 50px -22px rgba(124,58,237,.55)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
#maintenance-screen .mt-gears{filter:drop-shadow(0 8px 14px rgba(124,58,237,.45))}
#maintenance-screen .mt-title{color:#fff!important}
#maintenance-screen .mt-title-en{color:rgba(255,255,255,.5)!important}
#maintenance-screen .mt-status{background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;color:#e8ecff!important}
#maintenance-screen .mt-dot{background:#34d399!important;box-shadow:0 0 0 4px rgba(52,211,153,.18)}
#maintenance-screen .maintenance-desc{color:rgba(255,255,255,.86)!important}
#maintenance-screen .maintenance-desc[style],#maintenance-screen .maintenance-desc + .maintenance-note + .maintenance-desc{color:rgba(255,255,255,.5)!important}
#maintenance-screen .maintenance-note{color:rgba(255,255,255,.55)!important}
#maintenance-screen .mt-tile{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 16px 30px -18px rgba(0,0,0,.8)!important}
#maintenance-screen .mt-tile b{color:#fff!important;text-shadow:0 0 22px rgba(124,58,237,.55)}
#maintenance-screen .mt-tile i{color:rgba(255,255,255,.5)!important}
#maintenance-screen .maintenance-countdown-label{color:rgba(255,255,255,.5)!important}
#maintenance-screen .mt-bar{background:rgba(255,255,255,.1)!important}
/* бан */
#ban-screen .ban-ico{color:#ff7b7b;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 26px 50px -22px rgba(239,68,68,.6)!important}
#ban-screen .maintenance-title{color:#fff!important}
.ban-title-en{color:rgba(255,255,255,.5)!important}
#ban-screen .maintenance-desc{color:rgba(255,255,255,.86)!important}
#ban-screen #ban-reason-en{color:rgba(255,255,255,.5)!important}
#ban-screen .maintenance-note{color:rgba(255,255,255,.6)!important}
#ban-screen textarea{background:rgba(255,255,255,.07)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
#ban-screen textarea::placeholder{color:rgba(255,255,255,.4)}
#ban-screen textarea:focus{box-shadow:inset 0 0 0 1.5px rgba(124,167,255,.8)!important;outline:0}
#ban-screen #ban-appeal-submit{background:#fff!important;color:#0b0b0f!important;box-shadow:0 18px 34px -16px rgba(255,255,255,.35)!important}
#ban-screen .muted{color:rgba(255,255,255,.55)!important}

/* Екрани блокування/номера: без горизонтального зсуву (декоративне коло ::after виходило за край і давало горизонтальний скрол) */
.geo-block,#maintenance-screen,#ban-screen{overflow-x:hidden!important;max-width:100vw}
.geo-block::after{right:0!important;width:260px!important;overflow:hidden}
.geo-in{width:100%;box-sizing:border-box}
.geo-bul{box-sizing:border-box}
.geo-bul li{min-width:0}
.geo-bul li span{min-width:0;overflow-wrap:anywhere}
.geo-phone{touch-action:pan-y}

/* Жорстка заборона бокового гортання екранів блокування/номера/техробіт/бану */
.geo-block,#maintenance-screen,#ban-screen{overflow-x:hidden!important;overscroll-behavior-x:none!important;touch-action:pan-y!important;contain:paint;width:100%;left:0!important;right:0!important}
.geo-block > *,.geo-in,.geo-in > *{max-width:100%}
.geo-block::after,.geo-block::before{max-width:100%;overflow:hidden}
.geo-block::after{display:none!important}

/* Екрани блокування й підтвердження номера — зовсім без гортання (ні вбік, ні вгору) */
.geo-block,#maintenance-screen{overflow:hidden!important;touch-action:none!important;overscroll-behavior:none!important}
@media (max-height:720px){.geo-block{padding-top:calc(110px + env(safe-area-inset-top,0px))!important}.geo-ico,.geo-flag-wrap{transform:scale(.82);margin-bottom:8px!important}.geo-block h1{font-size:28px!important}.geo-bul{gap:7px!important;margin-bottom:18px!important}}

/* Підтвердження номера: кнопка не липне до нижнього краю */
.geo-phone{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))!important}
.geo-phone .geo-bul{margin-bottom:22px!important}

/* Перемикач мови на екрані підтвердження номера */
.geo-langs{display:flex;gap:6px;justify-content:center;margin-top:20px}
.geo-langs button{min-width:46px;height:36px;padding:0 10px;border:0;border-radius:12px;font:inherit;font-size:13px;font-weight:800;letter-spacing:.04em;color:rgba(11,11,15,.6);background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(11,11,15,.08);cursor:pointer}
.geo-langs button.on{color:#fff;background:#0b0b0f;box-shadow:none}

/* Перемикач мови на екрані номера — угорі під шапкою Telegram (внизу його не було видно, бо екран без прокрутки) */
.geo-phone .geo-langs{position:fixed;left:0;right:0;top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 66px);margin:0;z-index:3;justify-content:center}
.geo-phone{padding-top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 118px)!important;justify-content:center!important}

/* Екран номера: без ручного перемикача; другий рядок мовою країни */
.geo-phone .geo-langs{display:none!important}
.geo-alt{display:flex;flex-direction:column;gap:2px;margin-top:14px;text-align:center;color:rgba(11,11,15,.55);font-size:13.5px;line-height:1.35}
.geo-alt b{font-size:14px;font-weight:800;color:rgba(11,11,15,.75)}
.geo-phone{padding-top:calc(150px + env(safe-area-inset-top,0px))!important}

/* Екран підтвердження номера: згода з політикою приватності всередині */
.geo-agree{display:flex;align-items:flex-start;gap:12px;width:100%;max-width:340px;margin:0 auto 14px;text-align:left;cursor:pointer;font-size:14px;line-height:1.35;font-weight:600;color:#0b0b0f}
.geo-agree input{position:absolute;opacity:0;pointer-events:none}
.geo-agree-box{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:transparent;background:#fff;box-shadow:inset 0 0 0 2px rgba(11,11,15,.22);transition:background .15s,color .15s,box-shadow .15s}
.geo-agree-box svg{width:15px;height:15px}
.geo-agree input:checked + .geo-agree-box{color:#fff;background:#0057b7;box-shadow:none}
.geo-agree a{color:#0057b7;font-weight:800;text-decoration:underline}
.geo-policy{width:100%;max-width:340px;max-height:30vh;overflow-y:auto!important;touch-action:pan-y!important;margin:0 auto 14px;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,11,15,.1);text-align:left;font-size:13px;line-height:1.45;color:rgba(11,11,15,.82)}
.geo-policy[hidden]{display:none}
.geo-policy *{color:inherit!important}
.geo-policy h3,.geo-policy h4,.geo-policy b{font-weight:800}
.geo-phone.policy-open .geo-bul{display:none}
.geo-phone.policy-open .geo-ico-ph{display:none}
.geo-phone.policy-open{padding-top:calc(110px + env(safe-area-inset-top,0px))!important}
.geo-btn-ph:disabled{opacity:.45}

/* ===== Екран підтвердження номера + політика — темна тема ===== */
.geo-phone{color:#f4f5fb!important;background:radial-gradient(70% 40% at 10% 0%,rgba(0,87,183,.42) 0,transparent 70%),radial-gradient(60% 34% at 100% 8%,rgba(124,58,237,.28) 0,transparent 70%),radial-gradient(70% 40% at 50% 108%,rgba(255,215,0,.15) 0,transparent 70%),#07080f!important}
.geo-phone h1{color:#fff!important}
.geo-phone p{color:rgba(255,255,255,.78)!important;font-size:16.5px!important}
.geo-phone .geo-ico-ph{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 26px 50px -22px rgba(0,87,183,.7)!important}
.geo-phone .geo-bul li{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.11);color:#f1f3ff}
.geo-phone .geo-bul li i{background:linear-gradient(145deg,#3b8cff,#0057b7)}
.geo-phone .geo-agree{color:#eef0ff}
.geo-phone .geo-agree-box{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.geo-phone .geo-agree input:checked + .geo-agree-box{background:linear-gradient(145deg,#3b8cff,#0057b7);box-shadow:none}
.geo-phone .geo-pl{display:inline-flex;align-items:center;gap:4px;margin:-4px 0 14px;font-size:13.5px;font-weight:800;color:#7db4ff;text-decoration:none;letter-spacing:.01em}
.geo-phone .geo-pl svg{width:15px;height:15px}
.geo-phone .geo-policy{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:rgba(255,255,255,.85);max-height:34vh}
.geo-phone .geo-policy *{color:inherit!important;background:transparent!important;box-shadow:none!important;border-color:rgba(255,255,255,.12)!important;border-radius:0}
.geo-phone .geo-policy svg{color:#7db4ff!important}
.geo-phone .geo-policy [class*="ico"],.geo-phone .geo-policy [class*="chip"]{background:rgba(255,255,255,.08)!important;border-radius:12px!important}
.geo-phone .geo-policy h2,.geo-phone .geo-policy h3,.geo-phone .geo-policy b,.geo-phone .geo-policy [class*="title"]{color:#fff!important}
.geo-phone .geo-btn-ph{background:#fff!important;color:#0b0b0f!important;box-shadow:0 18px 36px -16px rgba(255,255,255,.35)!important}
.geo-phone .geo-btn-ph .geo-bt b{color:#0b0b0f}
.geo-phone .geo-btn-ph:disabled{opacity:.35}
.geo-phone .geo-note{color:rgba(255,255,255,.6)}
.geo-phone .geo-alt{color:rgba(255,255,255,.5)}
.geo-phone .geo-alt b{color:rgba(255,255,255,.78)}
.geo-phone .geo-x{color:#fff!important;background:rgba(255,255,255,.12)!important}

/* ===== Політика приватності на екрані номера: чисті «скляні» секції, один скрол, кольорові іконки ===== */
.geo-phone .geo-policy{padding:0!important;max-height:42vh;background:none!important;box-shadow:none!important;border-radius:20px;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
.geo-phone .geo-policy .pv-chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;margin:0;flex-wrap:nowrap;scrollbar-width:none}
.geo-phone .geo-policy .pv-chips::-webkit-scrollbar{display:none}
.geo-phone .geo-policy .pv-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:750;white-space:nowrap;background:rgba(52,211,153,.12)!important;box-shadow:inset 0 0 0 1px rgba(52,211,153,.3)!important;color:#7be3b9!important}
.geo-phone .geo-policy .pv-chip svg{width:15px;height:15px}
.geo-phone .geo-policy .pv-scroll{display:flex;flex-direction:column;gap:10px;max-height:none!important;overflow:visible!important;border:0!important;padding:0!important;background:none!important}
.geo-phone .geo-policy .pv-card{padding:14px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important;border:0!important}
.geo-phone .geo-policy .pv-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.geo-phone .geo-policy .pv-card-head h3{margin:0;font-size:16px;font-weight:800;color:#fff!important}
.geo-phone .geo-policy .pv-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff!important}
.geo-phone .geo-policy .pv-ico svg{width:20px;height:20px;color:#fff!important}
.geo-phone .geo-policy .pv-data .pv-ico{background:linear-gradient(145deg,#a78bfa,#6d28d9)!important}
.geo-phone .geo-policy .pv-why .pv-ico{background:linear-gradient(145deg,#38bdf8,#0369a1)!important}
.geo-phone .geo-policy .pv-time .pv-ico{background:linear-gradient(145deg,#fbbf24,#d97706)!important}
.geo-phone .geo-policy .pv-del .pv-ico{background:linear-gradient(145deg,#fb7185,#be123c)!important}
.geo-phone .geo-policy .pv-body p,.geo-phone .geo-policy .pv-list li{font-size:14px!important;line-height:1.5!important;color:rgba(255,255,255,.8)!important;margin:0}
.geo-phone .geo-policy .pv-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.geo-phone .geo-policy .pv-list li{display:flex;gap:10px;align-items:flex-start}
.geo-phone .geo-policy .pv-tick{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:rgba(52,211,153,.18)!important}
.geo-phone .geo-policy .pv-tick svg{width:12px;height:12px;color:#34d399!important}
.geo-phone.policy-open .geo-policy{max-height:46vh}

/* ===== Політика приватності — окремий блок-шторка: закривається хрестиком або кнопкою «Згоден» під текстом ===== */
.geo-psheet{position:fixed;inset:0;z-index:2147483300;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,4,10,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:psOv .22s ease both}
.geo-psheet.out{opacity:0;transition:opacity .22s}
@keyframes psOv{from{opacity:0}to{opacity:1}}
.geo-ps-card{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;border-radius:28px 28px 0 0;color:#f4f5fb;background:radial-gradient(80% 30% at 0% 0%,rgba(0,87,183,.3),transparent 70%),#0d0f1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 -24px 60px -20px rgba(0,0,0,.8);animation:psUp .34s cubic-bezier(.2,.95,.3,1.02) both}
@keyframes psUp{from{transform:translateY(100%)}to{transform:none}}
.geo-psheet.out .geo-ps-card{transform:translateY(100%);transition:transform .22s ease}
.geo-ps-grab{align-self:center;width:42px;height:5px;border-radius:5px;margin:10px 0 4px;background:rgba(255,255,255,.2)}
.geo-ps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px 12px}
.geo-ps-head b{font-size:22px;font-weight:850;letter-spacing:-.02em;color:#fff}
.geo-ps-x{flex:none;width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);cursor:pointer}
.geo-ps-x svg{width:19px;height:19px}
.geo-ps-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 8px}
.geo-ps-foot{flex:none;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.08);background:#0d0f1a}
.geo-ps-ok{display:block;width:100%;height:56px;border:0;border-radius:18px;font:inherit;font-size:16px;font-weight:800;color:#0b0b0f;background:#fff;cursor:pointer;transition:transform .12s}
.geo-ps-ok:active{transform:scale(.98)}
.geo-psheet .pv-chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;flex-wrap:nowrap;scrollbar-width:none}
.geo-psheet .pv-chips::-webkit-scrollbar{display:none}
.geo-psheet .pv-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:750;white-space:nowrap;background:rgba(52,211,153,.12)!important;box-shadow:inset 0 0 0 1px rgba(52,211,153,.3)!important;color:#7be3b9!important}
.geo-psheet .pv-chip svg{width:15px;height:15px}
.geo-psheet .pv-scroll{display:flex;flex-direction:column;gap:10px;max-height:none!important;overflow:visible!important;border:0!important;padding:0!important;background:none!important}
.geo-psheet .pv-card{padding:14px!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important;border:0!important}
.geo-psheet .pv-card-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.geo-psheet .pv-card-head h3{margin:0;font-size:16px;font-weight:800;color:#fff!important}
.geo-psheet .pv-ico{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff!important}
.geo-psheet .pv-ico svg{width:20px;height:20px;color:#fff!important}
.geo-psheet .pv-data .pv-ico{background:linear-gradient(145deg,#a78bfa,#6d28d9)!important}
.geo-psheet .pv-why .pv-ico{background:linear-gradient(145deg,#38bdf8,#0369a1)!important}
.geo-psheet .pv-time .pv-ico{background:linear-gradient(145deg,#fbbf24,#d97706)!important}
.geo-psheet .pv-del .pv-ico{background:linear-gradient(145deg,#fb7185,#be123c)!important}
.geo-psheet .pv-body p,.geo-psheet .pv-list li{font-size:14.5px!important;line-height:1.5!important;color:rgba(255,255,255,.82)!important;margin:0}
.geo-psheet .pv-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.geo-psheet .pv-list li{display:flex;gap:10px;align-items:flex-start}
.geo-psheet .pv-tick{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px;background:rgba(52,211,153,.18)!important}
.geo-psheet .pv-tick svg{width:12px;height:12px;color:#34d399!important}
/* основний екран: без політики всередині, тож усе вміщається */
.geo-phone .geo-pl{margin-bottom:18px}

/* ===== «Чий Крим?»: екран вибору + список відповідей у тех-панелі ===== */
.geo-cq{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin:8px auto 0}
.geo-cq button{display:flex;align-items:center;justify-content:center;gap:12px;height:62px;border:0;border-radius:20px;font:inherit;font-size:18px;font-weight:800;color:#0b0b0f;background:#fff;box-shadow:0 18px 34px -18px rgba(255,255,255,.35);cursor:pointer;transition:transform .12s}
.geo-cq button:active{transform:scale(.97)}
.geo-cq button:disabled{opacity:.5}
.geo-cq i{width:26px;height:18px;border-radius:5px;display:block}
.geo-cq .cq-u{background:linear-gradient(180deg,#0057b7 50%,#ffd700 50%)}
.geo-cq .cq-r{background:linear-gradient(180deg,#fff 33%,#0039a6 33% 66%,#d52b1e 66%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.geo-crimea{color:#f4f5fb!important;background:radial-gradient(70% 40% at 10% 0%,rgba(0,87,183,.42) 0,transparent 70%),radial-gradient(60% 34% at 100% 8%,rgba(124,58,237,.28) 0,transparent 70%),#07080f!important}
.geo-crimea h1{color:#fff!important}
.geo-crimea p{color:rgba(255,255,255,.7)!important}
.geo-crimea .geo-ico-ph{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)!important}
.geo-crimea .geo-note{color:#ff8a8a;font-weight:700}
.cq-list{display:flex;flex-direction:column;gap:8px}
.cq-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.cq-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cq-tx b{font-size:14px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-tx small{font-size:12px;color:var(--hint)}
.cq-badge{flex:none;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:800}
.cq-badge.ok{color:#34d399;background:rgba(52,211,153,.14)}
.cq-badge.no{color:#fb7185;background:rgba(251,113,133,.14)}
.cq-ban,.cq-bn{flex:none;height:32px;padding:0 12px;border:0;border-radius:10px;font:inherit;font-size:12.5px;font-weight:800;display:inline-grid;place-items:center}
.cq-ban{color:#fff;background:#e11d48;cursor:pointer}
.cq-bn{color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}

/* «Чий Крим?» v2: рівний ритм, широкі картки-варіанти зі стрілкою */
.geo-crimea{justify-content:center!important;padding-top:calc(120px + env(safe-area-inset-top,0px))!important}
.geo-crimea .geo-ico-ph{width:84px!important;height:84px!important;border-radius:28px!important;margin-bottom:26px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 26px 50px -22px rgba(0,87,183,.8)!important}
.geo-crimea .geo-ico-ph svg{width:40px;height:40px}
.geo-crimea h1{font-size:40px!important;margin:0 0 20px!important;line-height:1.1;letter-spacing:-.03em}
.geo-crimea .geo-stripe{margin:0 auto 22px!important;position:relative}
.geo-crimea p{font-size:17px!important;margin:0 0 30px!important}
.geo-crimea .geo-cq{gap:14px;max-width:360px}
.geo-crimea .geo-cq button{justify-content:flex-start;height:74px;padding:0 18px;border-radius:24px;gap:16px;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 18px 34px -20px rgba(0,0,0,.8);font-size:19px}
.geo-crimea .geo-cq button span{flex:1}
.geo-crimea .geo-cq button svg{flex:none;width:20px;height:20px;opacity:.6}
.geo-crimea .geo-cq i{width:42px;height:30px;border-radius:8px;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.geo-crimea .geo-cq button[data-a="ua"]{box-shadow:inset 0 0 0 1.5px rgba(59,140,255,.55),0 18px 34px -20px rgba(0,87,183,.8)}
.geo-crimea .geo-x{color:#fff!important;background:rgba(255,255,255,.12)!important}

.pv-close.top{bottom:auto!important;top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 62px)!important}
#ban-screen #ban-appeal-submit{white-space:normal}

/* ===== Тех-панель: службові екрани (перемикачі) ===== */
.scr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.scr-grid{grid-template-columns:1fr}}
.scr-tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic tx sw" "ic tx st";align-items:center;column-gap:12px;row-gap:2px;padding:12px 14px;border-radius:18px;cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent);transition:box-shadow .2s,background .2s}
.scr-tile.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#34d399 45%,transparent);background:color-mix(in srgb,#34d399 7%,transparent)}
.scr-tile input{position:absolute;opacity:0;pointer-events:none}
.scr-ic{grid-area:ic;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.scr-tile.on .scr-ic{color:#fff;background:linear-gradient(145deg,#34d399,#059669)}
.scr-ic svg{width:21px;height:21px}
.scr-tx{grid-area:tx;display:flex;flex-direction:column;gap:2px;min-width:0}
.scr-tx b{font-size:14.5px;font-weight:780;line-height:1.25}
.scr-tx small{font-size:12px;color:var(--hint);line-height:1.3}
.scr-sw{grid-area:sw;justify-self:end;position:relative;width:44px;height:26px;border-radius:26px;background:color-mix(in srgb,var(--text,#fff) 18%,transparent);transition:background .2s}
.scr-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.scr-tile.on .scr-sw{background:#34d399}
.scr-tile.on .scr-sw::after{transform:translateX(18px)}
.scr-tile em{grid-area:st;justify-self:end;font-style:normal;font-size:11.5px;font-weight:800;color:var(--hint)}
.scr-tile.on em{color:#34d399}

/* ===== Екран бану v3: картка причини, картка оскарження, кнопка перегляду не налазить ===== */
#ban-screen{padding-top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 90px)!important}
#ban-screen .maintenance-content{width:100%;max-width:460px!important;margin:0 auto}
#ban-screen .ban-ico{margin:8px auto 22px!important}
#ban-screen #ban-reason-ua{display:inline-block;margin:0 auto 6px;padding:10px 16px;border-radius:16px;background:rgba(251,113,133,.1);box-shadow:inset 0 0 0 1px rgba(251,113,133,.28);color:#ffd0d6!important;font-size:15px!important;font-weight:650;line-height:1.35}
#ban-screen #ban-appeal-block{margin-top:22px!important;padding:16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#ban-screen #ban-appeal-block .maintenance-note{margin:0 0 4px!important;font-size:14px!important;line-height:1.4}
#ban-screen textarea{min-height:110px}
#ban-screen #ban-appeal-submit{margin-top:12px!important}
.pv-close.top{top:calc(max(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px),46px) + 12px)!important;left:auto!important;right:14px!important;transform:none!important}

/* «Чий Крим?» у розділі «Люди»: аватар-літера, рядки як у списку людей, на вузькому екрані кнопка під текстом */
.cq-row{flex-wrap:wrap;row-gap:8px}
.cq-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:850;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.cq-tx{flex:1 1 140px}
@media (max-width:520px){.cq-badge{margin-left:auto}.cq-ban,.cq-bn{margin-left:50px}}

/* ===== Диск і очищення ===== */
.dk-chip{position:relative;cursor:pointer}
.dk-chip .dk-go{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dk-chip .dk-go svg{width:16px;height:16px}
.dk-sum{padding:14px;border-radius:18px;margin-bottom:10px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent)}
.dk-bar{height:10px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 12%,transparent)}
.dk-bar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#34d399,#fbbf24 70%,#fb7185)}
.dk-nums{display:flex;align-items:baseline;gap:6px;margin-top:10px;font-size:14px;color:var(--hint)}
.dk-nums b{font-size:20px;font-weight:850;color:var(--text)}
.dk-nums span{margin-left:auto;font-weight:700}
.dk-row{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)}
.dk-ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.dk-ic svg{width:20px;height:20px}
.dk-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dk-tx b{font-size:14.5px;font-weight:780}
.dk-tx small{font-size:12px;color:var(--hint)}
.dk-sz{flex:none;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.dk-btn{flex:none;height:36px;padding:0 14px;border:0;border-radius:11px;font:inherit;font-size:13px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,#fb7185,#e11d48)}
.dk-btn:disabled{opacity:.35;cursor:default}

/* «Обмежити розділи» всередині «Службових екранів» */
.scr-sub{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.scr-sub-h{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.scr-sub-h b{font-size:16px;font-weight:800}
.scr-sub-h span{font-size:13px;line-height:1.4;color:var(--hint)}

/* ===== Підтримка в тех-панелі: акуратна права панель (шапка, дії, поле відповіді не обрізаються) ===== */
.dev-support-detail-actions{flex-wrap:wrap!important;gap:8px!important;justify-content:flex-start!important}
.dev-support-detail-actions > span{display:inline-flex!important;flex-wrap:wrap;gap:8px!important;margin-left:auto}
.dev-support-detail-actions .pill{height:36px;padding:0 14px;white-space:nowrap;font-size:13px;font-weight:750}
.dev-support-detail-inner .ticket-detail-head{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:12px 14px;margin-bottom:12px}
.dev-support-detail-inner .ticket-detail-head > :last-child{grid-column:1 / -1;justify-self:start}
.dev-support-detail-inner .ticket-detail-head-body{min-width:0}
.dev-support-detail-inner .ticket-detail-head-name{font-size:16px;font-weight:800;line-height:1.25;word-break:break-word}
.dev-support-detail-inner .ticket-detail-head-sub{font-size:12.5px;color:var(--hint);margin-top:2px}
.dev-support-detail-inner .chat-composer{display:flex!important;align-items:flex-end;gap:8px;padding:8px!important;border-radius:20px}
.dev-support-detail-inner .chat-composer textarea{flex:1 1 auto;min-width:0!important;width:auto!important;min-height:38px;padding:9px 6px;font-size:15px;resize:none}
.dev-support-detail-inner .chat-composer .icon-btn,.dev-support-detail-inner .chat-composer .chat-composer-send{flex:none}
.dev-support-detail-inner .chat-thread{padding:4px 2px 10px}

/* ===== Плашка «нова версія»: іконка, заголовок + підзаголовок, кнопка, закриття; ПК — праворуч внизу, телефон — над навігацією ===== */
#ver-bar{position:fixed!important;z-index:99998!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 10px 10px 12px!important;border-radius:22px!important;color:#fff!important;background:linear-gradient(180deg,rgba(32,26,56,.96),rgba(18,14,34,.96))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 22px 44px -16px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.2)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:vbIn .42s cubic-bezier(.2,1.1,.3,1) both;width:auto!important;max-width:min(420px,calc(100vw - 24px))!important}
#ver-bar.out{opacity:0;transform:translate(var(--vbx,-50%),12px)!important;transition:opacity .24s,transform .24s}
@keyframes vbIn{from{opacity:0;margin-bottom:-14px}to{opacity:1;margin-bottom:0}}
#ver-bar::before,#ver-bar::after{content:none!important;display:none!important}
#ver-bar .vb-ic{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 10px 20px -10px var(--accent-glow)}
#ver-bar .vb-ic svg{width:21px;height:21px;animation:vbSpin 3.2s linear infinite}
@keyframes vbSpin{to{transform:rotate(360deg)}}
#ver-bar .vb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;white-space:normal!important}
#ver-bar .vb-tx b{font-size:14.5px;font-weight:800;line-height:1.2;color:#fff}
#ver-bar .vb-tx small{font-size:12px;line-height:1.3;color:rgba(255,255,255,.6)}
#ver-bar .vb-go{flex:none;height:38px!important;padding:0 16px!important;border:0;border-radius:13px!important;font:inherit;font-size:13.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important;transition:transform .12s}
#ver-bar .vb-go:active{transform:scale(.96)}
#ver-bar .vb-x{flex:none;width:30px;height:30px;border:0;border-radius:10px;display:grid;place-items:center;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);cursor:pointer}
#ver-bar .vb-x svg{width:14px;height:14px}
/* телефон */
body:not(.desktop-platform) #ver-bar{left:50%!important;right:auto!important;bottom:calc(100px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;--vbx:-50%;width:calc(100vw - 24px)!important}
/* ПК */
@media (min-width:900px){body.desktop-platform #ver-bar{left:auto!important;right:24px!important;bottom:24px!important;transform:none!important;--vbx:0;width:400px!important}}
@media (prefers-reduced-motion:reduce){#ver-bar,#ver-bar .vb-ic svg{animation:none}}

/* ===== Екран технічних робіт: вміщається на висоту вікна (ПК і телефон), підпис внизу не обрізається ===== */
#maintenance-screen{overflow-y:auto!important;align-items:center;justify-content:center!important;padding:70px 20px 80px!important;box-sizing:border-box}
#maintenance-screen .mt-card{margin:0 auto!important;width:100%!important;max-width:480px!important}
#maintenance-screen .mt-emblem{width:108px!important;height:108px!important;margin:0 auto 18px!important;border-radius:34px!important}
#maintenance-screen .mt-gears{width:76px!important;height:76px!important}
#maintenance-screen .mt-title{font-size:34px!important}
#maintenance-screen .mt-title-en{margin:4px 0 12px!important}
#maintenance-screen .mt-status{margin:0 auto 14px!important}
#maintenance-screen .maintenance-desc{margin-top:8px!important;font-size:16px!important}
#maintenance-screen .mt-tiles{gap:10px}
#maintenance-screen .mt-tile{padding:12px 6px!important}
#maintenance-screen .mt-tile b{font-size:34px!important}
#maintenance-screen .mt-bar{margin-top:16px!important}
#maintenance-screen .maintenance-screen-footer{position:fixed!important;left:0;right:0;bottom:16px}
@media (max-height:760px){#maintenance-screen{padding-top:56px!important}#maintenance-screen .mt-emblem{width:84px!important;height:84px!important;margin-bottom:12px!important}#maintenance-screen .mt-gears{width:58px!important;height:58px!important}#maintenance-screen .mt-title{font-size:28px!important}#maintenance-screen .maintenance-desc{font-size:14.5px!important}#maintenance-screen .mt-tile b{font-size:28px!important}}
@media (min-width:900px){#maintenance-screen .mt-card{max-width:520px!important}#maintenance-screen .mt-tile b{font-size:40px!important}}

/* Чат підтримки на ПК: вміщається у висоту вікна (поле відповіді не обрізається) і зсунутий до центру робочої області (праворуч від сайдбара) */
@media (min-width:900px){
  body.desktop-platform #support-modal{padding:calc(54px) 24px 24px calc(var(--sb-off,292px) + 24px)!important;align-items:center!important;justify-content:center!important;box-sizing:border-box}
  body.desktop-platform #support-modal .modal-sheet.support-sheet{display:flex!important;flex-direction:column!important;height:calc(100vh - 100px)!important;min-height:0!important;max-height:calc(100vh - 100px)!important;width:min(720px,100%)!important;max-width:720px!important;margin:0 auto!important;overflow:hidden!important;padding:0!important}
  body.desktop-platform #support-modal .support-sheet > .support-head,body.desktop-platform #support-modal .support-sheet > .sup-bar,body.desktop-platform #support-modal .support-sheet > #support-status,body.desktop-platform #support-modal .support-sheet > .chat-composer{flex:none!important}
  body.desktop-platform #support-modal .support-sheet > #support-thread,body.desktop-platform #support-modal .support-sheet > .chat-thread,body.desktop-platform #support-modal .support-sheet > .support-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
  body.desktop-platform #support-modal .support-sheet > .chat-composer{margin:0 16px 16px!important}
}
@media (min-width:900px){
  body.desktop-platform #support-modal .support-sheet > #support-chat-thread{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
  body.desktop-platform #support-modal .support-sheet > #support-chat-empty[style*="block"]{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important}
  body.desktop-platform #support-modal .support-sheet > *:not(.support-head){margin-left:16px;margin-right:16px}
  body.desktop-platform #support-modal .support-sheet > .support-head{padding:16px 18px!important}
}

/* ===== Єдиний стиль плиток: «Службові екрани» і «Обмежити розділи» — одна форма, перемикач справа, зелене = показується ===== */
.rs-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
@media (max-width:640px){.rs-grid{grid-template-columns:1fr!important}}
.rs-chip{display:grid!important;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px!important;padding:12px 14px!important;border-radius:18px!important;min-height:0;background:color-mix(in srgb,#34d399 7%,transparent)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#34d399 42%,transparent)!important;border:0!important;transition:box-shadow .2s,background .2s}
.rs-chip .rs-state{width:42px!important;height:42px!important;border-radius:14px!important;color:#fff!important;background:linear-gradient(145deg,#34d399,#059669)!important;box-shadow:none!important}
.rs-chip .rs-state svg{width:21px!important;height:21px!important}
.rs-chip .rs-name{font-size:14.5px!important;font-weight:780!important}
.rs-chip .rs-st{font-size:12px!important}
.rs-sw{position:relative;width:44px;height:26px;border-radius:26px;background:#34d399;transition:background .2s}
.rs-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateX(18px);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.rs-chip:has(input:checked){background:color-mix(in srgb,var(--text,#fff) 6%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}
.rs-chip:has(input:checked) .rs-state{background:color-mix(in srgb,var(--text,#fff) 10%,transparent)!important;color:var(--hint)!important}
.rs-chip:has(input:checked) .rs-sw{background:color-mix(in srgb,var(--text,#fff) 18%,transparent)}
.rs-chip:has(input:checked) .rs-sw::after{transform:none}
.rs-chip:has(input:checked) .rs-name{opacity:.75}
.rs-gh{margin:10px 2px -2px!important;font-size:11.5px!important;letter-spacing:.08em!important}
.scr-sub .rs-summary{margin:0 0 6px}
.scr-sub-h b{font-size:17px}

/* ===== Технічні роботи v3: «скляна» картка по центру, великі цифри, живий індикатор, кольорова смуга ===== */
#maintenance-screen .mt-card{position:relative;padding:34px 26px 28px!important;border-radius:34px!important;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,.9)!important;max-width:520px!important}
#maintenance-screen .mt-emblem{position:relative;margin-top:-72px!important;background:linear-gradient(160deg,#2a2347,#14102a)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 24px 44px -16px rgba(124,58,237,.7)!important}
#maintenance-screen .mt-title{font-size:36px!important}
#maintenance-screen .mt-title-en{font-size:12.5px!important;letter-spacing:.14em!important}
#maintenance-screen .mt-status{padding:8px 16px!important;font-size:13px!important;letter-spacing:.01em}
#maintenance-screen .mt-dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:mtPulse 1.8s ease-out infinite}
@keyframes mtPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}100%{box-shadow:0 0 0 12px rgba(52,211,153,0)}}
#maintenance-screen .maintenance-desc{max-width:420px;margin-left:auto!important;margin-right:auto!important}
#maintenance-screen .mt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
#maintenance-screen .mt-tile{border-radius:22px!important;padding:14px 6px 12px!important;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03))!important}
#maintenance-screen .mt-tile b{display:block;font-size:42px!important;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#maintenance-screen .mt-tile i{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#maintenance-screen .maintenance-countdown-label{margin-top:14px!important;font-size:11.5px!important;letter-spacing:.1em;text-transform:uppercase}
#maintenance-screen .mt-bar{height:5px!important;border-radius:5px!important}
@media (prefers-reduced-motion:reduce){#maintenance-screen .mt-dot{animation:none}}

/* Чат підтримки ПК v2: висота береться від самого оверлея (а не від vh, який ламався через масштаб ПК-режиму) — вікно ніколи не вилазить ні вгору, ні вниз */
@media (min-width:900px){
  body.desktop-platform #support-modal{position:fixed!important;inset:0!important;display:flex;align-items:stretch!important;justify-content:center!important;padding:60px 24px 24px calc(var(--sb-off,292px) + 24px)!important;box-sizing:border-box!important;zoom:1!important}
  body.desktop-platform #support-modal .modal-sheet.support-sheet{height:100%!important;max-height:100%!important;min-height:0!important;margin:0!important;zoom:1!important;transform:none!important;align-self:stretch}
}

/* Сторінки «Що нового» / «Початок роботи» на ПК: шапка вище (не така низька) */
@media (min-width:900px){
  body.desktop-platform .svn-top{padding-top:58px!important;padding-bottom:10px!important}
  body.desktop-platform .svn-scroll{padding-top:14px!important}
}

/* Підтримка в тех-панелі на ПК: як у месенджері — при відкритті тікета список ховається, чат на всю ширину; «Тікети» повертає список */
@media (min-width:900px){
  body.desktop-platform .dev-support-panel.dev-support-detail-open{grid-template-columns:minmax(0,1fr)!important}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .dev-support-list-pane{display:none!important}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .dev-support-detail-pane{display:flex!important;width:100%;max-width:980px;margin:0 auto;animation:dsIn .26s cubic-bezier(.2,.95,.3,1.02) both}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .dev-support-detail-inner{display:flex;flex-direction:column;flex:1;min-height:0}
  body.desktop-platform .dev-support-panel.dev-support-detail-open #dev-support-thread{flex:1 1 auto;min-height:0;overflow-y:auto}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .dev-support-detail-actions{flex-wrap:nowrap!important}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .ticket-detail-head{grid-template-columns:auto 1fr auto!important}
  body.desktop-platform .dev-support-panel.dev-support-detail-open .ticket-detail-head > :last-child{grid-column:auto!important;justify-self:end}
}
@keyframes dsIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* Плитка диска: стандартна будова stat-chip + шкала заповнення + кнопка очищення в куті (без накладання тексту) */
.dk-chip{position:relative;padding-right:56px!important}
.dk-chip .stat-chip-value{font-size:22px!important;font-weight:850!important;letter-spacing:-.02em}
.dk-chip .dk-meter{margin-top:10px;height:6px;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 12%,transparent)}
.dk-chip .dk-meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#34d399,#fbbf24 70%,#fb7185)}
.dk-chip .dk-go{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--accent-2,var(--accent));background:color-mix(in srgb,var(--accent) 16%,transparent);transition:transform .12s}
.dk-chip:hover .dk-go{transform:scale(1.08)}
.dk-chip .dk-go svg{width:17px;height:17px}
#dev-stats-grid .stat-chip{display:flex;flex-direction:column;justify-content:center}
#dev-stats-grid .health-chip{align-items:center;padding:12px 14px}
@media (min-width:900px){
  body.desktop-platform .topbar-clock{transform:translateX(70px)}
  body.desktop-platform .topbar-actions{transform:translateX(70px)}
}

/* ===== Редактор: чернетка, зона перетягування, шаблони ===== */
.ed-draft{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:14px;font-size:13.5px;font-weight:700;background:color-mix(in srgb,#fbbf24 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fbbf24 32%,transparent)}
.ed-draft span{flex:1;min-width:0}
.ed-draft button{height:32px;padding:0 14px;border:0;border-radius:10px;font:inherit;font-size:13px;font-weight:800;color:#0b0b0f;background:#fbbf24;cursor:pointer}
.ed-draft button.sec{color:var(--text);background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.ed-drop{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;background:color-mix(in srgb,var(--accent) 38%,rgba(5,4,10,.82));border:3px dashed #fff;border-radius:inherit;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#editor-modal .modal-sheet{position:relative}
.ed-snips{position:fixed;z-index:100200;width:320px;max-height:60vh;overflow-y:auto;padding:10px;border-radius:18px;background:var(--bg,#0b0a14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 50px -16px rgba(0,0,0,.8)}
.ed-snips-h{padding:4px 6px 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.ed-snip{display:flex;align-items:center;gap:6px}
.ed-snip button{flex:1;min-width:0;text-align:left;padding:10px 12px;border:0;border-radius:12px;font:inherit;font-size:14px;color:var(--text);background:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-snip button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ed-snip i{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;color:var(--hint);cursor:pointer}
.ed-snip i:hover{background:color-mix(in srgb,#fb7185 20%,transparent);color:#fb7185}
.ed-snips-e{padding:8px 8px 12px;font-size:13px;line-height:1.4;color:var(--hint)}
.ed-snip-add{width:100%;margin-top:6px;height:40px;border:0;border-radius:12px;font:inherit;font-size:13.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}

/* Редактор: кнопки під текстом стоять в ряд — копіювати, мікрофон, почистити, шаблони; лічильник слів правіше */
#editor-modal #editor-clean-btn{left:84px!important}
#editor-modal #editor-snip-btn{left:120px!important}
#editor-modal .editor-word-stats{left:164px!important}

#editor-modal #editor-hk-btn{left:156px!important}
#editor-modal .editor-word-stats{left:200px!important}
.ed-hk{position:fixed;z-index:100200;width:340px;padding:12px;border-radius:18px;background:var(--bg,#0b0a14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 50px -16px rgba(0,0,0,.8)}
.ed-hk-h{padding:2px 4px 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.ed-hk-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 4px;font-size:13.5px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.ed-hk-r:first-of-type{border-top:0}
.ed-hk-k{display:inline-flex;gap:4px;flex:none}
.ed-hk kbd{padding:2px 7px;border-radius:7px;font:inherit;font-size:12px;font-weight:750;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 10%,transparent);box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--text,#fff) 14%,transparent)}

/* ===== Редактор на ПК: нижня частина — канали в 2 колонки, компактно, перемикачі й кнопка збереження охайні ===== */
@media (min-width:900px){
  body.desktop-platform #editor-modal #editor-channel-card{padding-top:6px}
  body.desktop-platform #editor-modal .editor-section-label-row{align-items:center;margin-bottom:10px}
  body.desktop-platform #editor-modal #editor-channel-multiselect{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  body.desktop-platform #editor-modal #editor-channel-multiselect .channel-chip{min-height:54px!important;padding:6px 12px!important;border-radius:16px!important;margin:0!important}
  body.desktop-platform #editor-modal #editor-channel-multiselect .channel-chip > span:nth-child(2){font-size:14px!important;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.desktop-platform #editor-modal #editor-channel-multiselect .channel-chip .channel-avatar,body.desktop-platform #editor-modal #editor-channel-multiselect .channel-chip img{width:36px!important;height:36px!important;min-width:36px!important}
  body.desktop-platform #editor-modal #editor-channel-multiselect .channel-chip::after{width:22px!important;height:22px!important;right:10px!important}
  body.desktop-platform #editor-modal .editor-inline-toggles{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  body.desktop-platform #editor-modal .editor-inline-toggles .watermark-toggle{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:16px;margin:0}
  body.desktop-platform #editor-modal .editor-quick-actions{display:grid!important;grid-template-columns:1.1fr 1fr;gap:10px}
  body.desktop-platform #editor-modal .editor-quick-actions > *{min-height:50px!important;border-radius:16px!important}
  body.desktop-platform #editor-modal .modal-scroll-area{padding-bottom:12px}
}

/* Картка «Дані користувача» у тех-панелі */
.uic{margin:0 0 14px;padding:16px;border-radius:22px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.uic-h{margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.uic-g{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media (max-width:640px){.uic-g{grid-template-columns:1fr}}
.uic-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-top:1px solid color-mix(in srgb,var(--text,#fff) 7%,transparent);font-size:13.5px}
.uic-r span{color:var(--hint);flex:none}
.uic-r b{font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}
.uic-n{grid-column:1/-1;margin-top:10px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.4;color:var(--hint);background:color-mix(in srgb,#fbbf24 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fbbf24 24%,transparent)}
.ed-hk{width:min(340px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100vh - 24px);overflow-y:auto}.ed-hk-r span:first-child{min-width:0}
.ed-hk-ov{position:fixed;inset:0;z-index:100250;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,4,10,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ed-hk-ov .ed-hk{position:static!important;width:min(400px,100%)!important;max-height:calc(100vh - 40px);overflow-y:auto;animation:hkIn .2s ease both}
@keyframes hkIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}


/* Кнопки «Почистити», «Шаблони», «Гарячі клавіші» — лише для ПК; на телефоні лишаються копіювати й мікрофон */
body:not(.desktop-platform) #editor-clean-btn,body:not(.desktop-platform) #editor-snip-btn,body:not(.desktop-platform) #editor-hk-btn,body:not(.desktop-platform) #editor-hk-top{display:none!important}

/* Редактор на ПК без вікна перегляду: компактніша шапка редагування — зона медіа низька, ряд «Додати» горизонтальний, тулбар і поле тексту ближче */
@media (min-width:900px){
  body.desktop-platform #editor-modal .album-gallery > .album-thumb-add:only-child{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:16px;min-height:84px!important;height:84px!important;padding:0 20px!important;border-radius:18px!important}
  body.desktop-platform #editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-ico{width:48px!important;height:48px!important;border-radius:15px!important;margin:0!important;flex:none}
  body.desktop-platform #editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-txt{align-items:flex-start;text-align:left}
  body.desktop-platform #editor-modal .album-gallery > .album-thumb-add:only-child .album-thumb-add-txt b{font-size:16px}
  body.desktop-platform #editor-modal .media-preview-card{padding:10px!important}
  body.desktop-platform #editor-modal #editor-textarea{min-height:200px}
}

/* Модалки на ПК (налаштування каналу, редактор): шапка завжди видна — прокручується лише вміст; панель «Продовжити» не накриває кнопки */
@media (min-width:900px){
  body.desktop-platform #channel-modal .modal-sheet{display:flex!important;flex-direction:column!important;max-height:calc(100vh - 110px)!important;overflow:hidden!important}
  body.desktop-platform #channel-modal .modal-sheet > .modal-header{flex:none;position:relative;z-index:3;padding-bottom:12px;background:inherit}
  body.desktop-platform #channel-modal .modal-sheet > #channel-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:84px}
  body.desktop-platform #editor-modal .modal-scroll-area{padding-bottom:20px}
}

/* Кнопка «Увімкнено» у картках джерел: зелене підсвічування (стан «працює») */
.source-tile .pill.on,.source-tile [data-action="quick-toggle"].on{box-shadow:0 0 0 1px color-mix(in srgb,#34d399 55%,transparent),0 10px 26px -8px rgba(52,211,153,.55),0 0 22px -4px rgba(52,211,153,.4)!important}
.source-tile .pill.on:active{box-shadow:0 0 0 1px color-mix(in srgb,#34d399 70%,transparent),0 6px 16px -8px rgba(52,211,153,.6)!important}

/* Редактор на ПК: нижня панель й шторки беруть колір самого вікна (раніше фіксований темний фон ламав кольорові теми) */
body.desktop-platform #editor-modal .modal-sticky-footer{background:transparent!important;border-top-color:color-mix(in srgb,var(--text,#fff) 9%,transparent)!important}
body.desktop-platform #editor-modal .modal-sheet{background:var(--card-solid,var(--bg-2,var(--card,var(--bg))))!important}
body.desktop-platform #editor-modal .editor-section,body.desktop-platform #editor-modal .editor-flat-toolbar{background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important}
.sb-badges{display:flex;align-items:center;gap:4px;margin-top:5px;cursor:pointer}
.sb-badges .bdg{width:20px;height:20px;flex:none}
.sb-badges .bdg svg{width:100%;height:100%}
.sb-badges em{font-style:normal;font-size:11px;font-weight:800;color:var(--hint);margin-left:2px}
body.desktop-platform.sidebar-collapsed .sb-badges{display:none!important}


/* «Початок роботи» прибрано з бічного меню ПК (лишається в Гайді на головній) */
#sidebar-learn-btn{display:none!important}
.bdg-rar{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:800;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.bdg-row.on .bdg-rar{color:#fbbf24;background:rgba(251,191,36,.14)}
/* Значки під ім'ям у сайдбарі: скромний ряд (до 3 найцінніших) — без «іконостаса» */
.sb-badges{gap:0!important;margin-top:4px!important}
.sb-badges .bdg{width:17px!important;height:17px!important;margin-left:-4px;filter:drop-shadow(0 0 0 var(--bg,#0b0a14)) saturate(.9)}
.sb-badges .bdg:first-child{margin-left:0}
.sb-badges em{margin-left:6px!important;padding:1px 6px;border-radius:999px;font-size:10.5px!important;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}

/* ===== Учасники й чат команди ===== */
.cm-page{z-index:100086}
.cm-tabs{flex:none;display:flex;gap:8px;max-width:980px;width:100%;margin:0 auto;padding:12px 18px 0;box-sizing:border-box}
.cm-tabs button{height:40px;padding:0 20px;border:0;border-radius:14px;font:inherit;font-size:14.5px;font-weight:800;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 6%,transparent);cursor:pointer}
.cm-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.cm-body{flex:1;min-height:0;display:flex;flex-direction:column;max-width:980px;width:100%;margin:0 auto;padding:14px 18px 20px;box-sizing:border-box}
.cm-pw{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto}
.cm-search{height:46px;padding:0 16px;border:0;border-radius:15px;font:inherit;font-size:15px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.cm-hide{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--hint);cursor:pointer}
.cm-hide input{display:none}
.cm-hide i{width:38px;height:22px;border-radius:22px;position:relative;background:color-mix(in srgb,var(--text,#fff) 18%,transparent);transition:background .2s}
.cm-hide i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.cm-hide input:checked + i{background:var(--accent)}
.cm-hide input:checked + i::after{transform:translateX(16px)}
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.cm-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.cm-av{position:relative;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:850;color:#fff;overflow:visible}
.cm-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cm-av i{position:absolute;right:0;bottom:0;width:13px;height:13px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px var(--bg,#0b0a14)}
.cm-tx{min-width:0;display:flex;flex-direction:column;gap:3px}
.cm-tx b{font-size:15px;font-weight:780;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-tx em{font-style:normal;font-size:11px;font-weight:800;color:var(--accent-2,var(--accent));margin-left:4px}
.cm-st{align-self:flex-start;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.cm-bd{display:flex;gap:2px}
.cm-bd .bdg{width:18px;height:18px}
.cm-empty{padding:40px 10px;text-align:center;color:var(--hint);font-size:14.5px}
.cm-chat{flex:1;min-height:0;display:grid;grid-template-columns:230px 1fr;gap:14px}
.cm-chs{display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.cm-chs button{padding:12px 14px;border:0;border-radius:14px;text-align:left;font:inherit;font-size:14px;font-weight:750;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 5%,transparent);cursor:pointer}
.cm-chs button.on{background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 50%,transparent)}
.cm-room{display:flex;flex-direction:column;min-height:0;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);padding:12px}
.cm-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px}
.cm-m{max-width:72%;align-self:flex-start;padding:9px 12px;border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.cm-m.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));color:#fff}
.cm-m b{display:block;font-size:12px;font-weight:800;margin-bottom:2px;color:var(--accent-2,var(--accent))}
.cm-m p{margin:0;font-size:14.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-m small{display:block;margin-top:3px;font-size:10.5px;opacity:.6;text-align:right}
.cm-note{padding:6px 6px 2px;font-size:11.5px;color:var(--hint)}
.cm-comp{display:flex;gap:8px;align-items:flex-end}
.cm-comp textarea{flex:1;min-height:44px;max-height:120px;padding:11px 14px;border:0;border-radius:15px;font:inherit;font-size:15px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent);resize:none}
.cm-comp button{height:44px;padding:0 20px;border:0;border-radius:15px;font:inherit;font-size:14.5px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.cm-page .cm-body{align-self:center}.cm-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* Тех-панель: усі, хто запускав бота */

/* «Значки» прибрано з бічного меню ПК (лишається ряд значків під іменем унизу) */
#sidebar-badges-btn{display:none!important}
.cm-av .cm-ai{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:19px;font-weight:850;color:#fff}.cm-av .cm-ai img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ===== Тех-панель → Люди: єдина база ===== */
.pdb{margin-bottom:6px}
.pdb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
@media (max-width:640px){.pdb-stats{grid-template-columns:repeat(2,1fr)}}
.pdb-stats > div{padding:14px;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.pdb-stats b{display:block;font-size:26px;font-weight:850;letter-spacing:-.02em}
.pdb-stats small{font-size:12px;color:var(--hint)}
.pdb-bar{display:flex;gap:10px;margin-bottom:10px}
.pdb-bar input,.pdb-bar select{height:46px;padding:0 14px;border:0;border-radius:15px;font:inherit;font-size:14.5px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.pdb-bar input{flex:1;min-width:0}
.pdb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pdb-chips button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:750;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.pdb-chips button i{font-style:normal;font-size:11.5px;font-weight:800;color:var(--hint)}
.pdb-chips button.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.pdb-chips button.on i{color:rgba(255,255,255,.8)}
.pdb-list{display:flex;flex-direction:column;gap:6px}
.pdb-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);transition:background .15s}
.pdb-row:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pdb-av{position:relative;flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));color:#fff;font-weight:850;font-size:18px}
.pdb-av .pdb-ai{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;overflow:hidden}
.pdb-av .pdb-ai img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pdb-av i{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px var(--bg,#0b0a14)}
.pdb-tx{flex:1;min-width:0}
.pdb-n{display:flex;align-items:baseline;gap:8px;min-width:0}
.pdb-n b{font-size:15px;font-weight:780;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdb-n small{font-size:12px;color:var(--hint)}
.pdb-m{margin-top:2px;font-size:12px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdb-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}
.pdb-t{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.pdb-t.violet{color:#c4b5fd;background:rgba(167,139,250,.16)}.pdb-t.blue{color:#7dd3fc;background:rgba(56,189,248,.14)}.pdb-t.green{color:#34d399;background:rgba(52,211,153,.14)}.pdb-t.amber{color:#fbbf24;background:rgba(251,191,36,.14)}.pdb-t.red{color:#fb7185;background:rgba(251,113,133,.16)}
.pdb-ch{flex:none;width:54px;text-align:center}
.pdb-ch b{display:block;font-size:17px;font-weight:850}.pdb-ch small{font-size:10.5px;color:var(--hint)}
.pdb-more{display:none;width:100%;height:46px;margin-top:10px;border:0;border-radius:15px;font:inherit;font-weight:800;color:var(--text);cursor:pointer;background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
@media (max-width:640px){.pdb-tags{display:none}}

/* ===================== Технічний розділ: єдиний вигляд + розкладка для ПК й телефона ===================== */
#tab-dev .tsecs{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.tsec{border-radius:22px;background:color-mix(in srgb,var(--text,#fff) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);overflow:hidden}
.tsec-h{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.tsec-ic{flex:none;width:44px;height:44px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));box-shadow:0 10px 20px -12px var(--accent-glow)}
.tsec[data-k="control"] .tsec-ic{background:linear-gradient(145deg,#fbbf24,#d97706)}
.tsec[data-k="screens"] .tsec-ic{background:linear-gradient(145deg,#38bdf8,#0369a1)}
.tsec[data-k="comms"] .tsec-ic{background:linear-gradient(145deg,#f472b6,#be185d)}
.tsec-ic svg{width:22px;height:22px}
.tsec-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tsec-t b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.tsec-t small{font-size:12.5px;color:var(--hint)}
.tsec-st{flex:none;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800}
.tsec-st.ok{color:#34d399;background:rgba(52,211,153,.14)}
.tsec-st.warn{color:#fb7185;background:rgba(251,113,133,.16)}
.tsec-ch{flex:none;width:20px;height:20px;color:var(--hint);transition:transform .25s}
.tsec.open .tsec-ch{transform:rotate(180deg)}
.tsec-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.9,.3,1)}
.tsec.open .tsec-b{grid-template-rows:1fr}
.tsec-bi{overflow:hidden;min-height:0;padding:0 12px}
.tsec.open .tsec-bi{padding-bottom:14px}
.tsec-bi > .settings-card{margin:0 0 10px!important;box-shadow:none!important;background:color-mix(in srgb,var(--text,#fff) 4%,transparent)!important}
.tsec-bi > .settings-card:last-child{margin-bottom:0!important}

/* ПК: огляд у дві колонки, ліва навігація липка */
@media (min-width:1100px){
  body.desktop-platform #tab-dev .tsecs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  body.desktop-platform #tab-dev .tsec[data-k="health"]{grid-column:1 / -1}
  body.desktop-platform #tab-dev .tsec{border-radius:24px}
  body.desktop-platform #tab-dev .modal-tab-btn{border-radius:14px}
}
/* Телефон: стрічка вкладок (один рядок, гортається, липка), групи сховані, акцентна активна вкладка */
body:not(.desktop-platform) #tab-dev .modal-tab-bar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding:6px 2px 10px!important;position:sticky;top:0;z-index:20;margin:0 -2px 12px;background:linear-gradient(180deg,var(--bg,#0b0a14) 80%,transparent);scrollbar-width:none;-webkit-overflow-scrolling:touch;grid-template-columns:none!important}
body:not(.desktop-platform) #tab-dev .modal-tab-bar::-webkit-scrollbar{display:none}
body:not(.desktop-platform) #tab-dev .dev-tab-group{display:none!important}
body:not(.desktop-platform) #tab-dev .modal-tab-btn{flex:none!important;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px!important;border-radius:14px!important;font-size:14px;font-weight:750;white-space:nowrap;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important;box-shadow:none!important}
body:not(.desktop-platform) #tab-dev .modal-tab-btn.active{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))!important}
body:not(.desktop-platform) #tab-dev .modal-tab-btn svg{width:17px;height:17px}
body:not(.desktop-platform) #tab-dev .tsec-h{padding:12px 14px}
body:not(.desktop-platform) #tab-dev .tsec-ic{width:40px;height:40px;border-radius:13px}
body:not(.desktop-platform) #tab-dev .tsec-st{display:none}
@media (prefers-reduced-motion:reduce){.tsec-b,.tsec-ch{transition:none}}

/* Підтримка (ПК): поки тікет не відкрито — лише список на всю ширину, без порожньої правої панелі; чат відкривається замість списку */
@media (min-width: 900px) {
  body.desktop-platform .dev-support-panel:not(.dev-support-detail-open) { grid-template-columns: minmax(0, 1fr) !important; }
  body.desktop-platform .dev-support-panel:not(.dev-support-detail-open) .dev-support-detail-pane { display: none !important; }
  body.desktop-platform .dev-support-panel:not(.dev-support-detail-open) .dev-support-list-pane { max-width: 980px; width: 100%; margin: 0 auto; }
}

/* Тех-огляд: плитки всередині розгорнутих секцій — один стовпчик, без стиснення тексту */
.tsec-bi .scr-grid, .tsec-bi .rs-grid { grid-template-columns: minmax(0, 1fr) !important; }
.tsec-bi .scr-tile, .tsec-bi .rs-chip { min-width: 0; }
.tsec-bi .scr-tile > *, .tsec-bi .rs-chip > * { min-width: 0; }
.tsec-bi .rs-name, .tsec-bi .scr-tile b { word-break: normal; overflow-wrap: anywhere; writing-mode: horizontal-tb !important; }
.tsec-bi > .settings-card { padding-left: 14px; padding-right: 14px; overflow: hidden; }
.tsec-t b { overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  body.desktop-platform #tab-dev .tsec[data-k="screens"].open { grid-column: 1 / -1; }
  body.desktop-platform #tab-dev .tsec[data-k="screens"].open .scr-grid, body.desktop-platform #tab-dev .tsec[data-k="screens"].open .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Профіль: власний колір статусу (кругова палітра) */
.pc-swatch-custom{position:relative;display:block;overflow:hidden;cursor:pointer;background:conic-gradient(#ef4444,#facc15,#4ade80,#22d3ee,#6366f1,#e879f9,#ef4444)!important}
.pc-swatch-custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.pc-swatch-custom::before{content:"+";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:18px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}
.pc-swatch-custom.active::after{content:none!important}
.rank-row.rank-free{opacity:.6;border-style:dashed}

/* Профіль: компактне вікно — усе вміщується, прокрутка всередині, «Готово» завжди видно */
.pc-sheet { max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; }
.pc-sheet .pc-chips { gap: 6px !important; margin: 10px 0 8px !important; }
.pc-sheet .pc-chips .footer-chip { padding: 6px 12px !important; font-size: 12.5px !important; }
.pc-sheet .pc-colors { gap: 8px !important; margin: 10px 0 4px !important; }
.pc-sheet .pc-swatch { width: 30px !important; height: 30px !important; }
.pc-sheet .pc-swatch.active { transform: none !important; box-shadow: 0 0 0 2px var(--bg, #0b0a14), 0 0 0 4px #fff !important; }
.pc-sheet .pc-label { margin-top: 14px !important; margin-bottom: 6px !important; }
.pc-sheet > .pc-hero { padding-top: 56px !important; padding-bottom: 12px !important; }
.pc-sheet .pc-foot { position: sticky; bottom: 0; z-index: 3; margin-top: 12px !important; padding: 12px 0 14px !important; background: var(--bg, #0b0a14); }

/* ===== Профіль: нова розкладка. ПК — дві колонки (картка профілю ліворуч, налаштування праворуч); телефон — компактна одна колонка ===== */
.pc-sheet { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start; padding: 0 !important; overflow-x: hidden !important; }
.pc-sheet > * { margin-left: 20px !important; margin-right: 20px !important; min-width: 0; }
.pc-sheet > .pc-head { position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; margin: 0 !important; z-index: 6; }
.pc-sheet > .pc-hero {
  margin: 0 !important; padding: 22px 56px 16px 20px !important; border-radius: 0 !important; border: 0 !important; text-align: left !important;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center; justify-items: start !important; gap: 10px 16px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent) !important;
}
.pc-sheet > .pc-hero::before { display: none !important; }
.pc-sheet .pc-cam { display: none !important; }
.pc-sheet .pc-avatar { width: 76px !important; height: 76px !important; border-radius: 50% !important; position: relative !important; margin: 0 !important; }
.pc-sheet .pc-hero-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pc-sheet .pc-hero-name { font-size: 20px !important; font-weight: 850 !important; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pc-sheet .pc-hint { display: none !important; }
.pc-sheet .pc-avatar-actions { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 8px; }
.pc-sheet .pc-label { margin: 16px 20px 6px !important; }
.pc-sheet .pc-input-wrap { margin-top: 0; }
.pc-sheet .segmented { margin-bottom: 0; }
.pc-sheet .pc-foot { margin: 12px 0 0 !important; padding: 12px 20px 16px !important; }
.pc-sheet .pc-saved { font-size: 12px; opacity: .75; }

@media (min-width: 760px) {
  .pc-sheet { width: min(840px, calc(100% - 48px)) !important; grid-template-columns: 290px minmax(0, 1fr) !important; column-gap: 0; max-height: min(640px, calc(100dvh - 48px)) !important; }
  .pc-sheet > * { grid-column: 2; }
  .pc-sheet > .pc-hero {
    grid-column: 1 !important; grid-row: 1 / span 7; align-self: stretch; margin: 0 !important; padding: 40px 22px 24px !important;
    grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; align-content: start; text-align: center !important; gap: 14px !important;
    background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), color-mix(in srgb, var(--text, #fff) 3%, transparent) !important;
    border-right: 1px solid var(--card-border) !important;
  }
  .pc-sheet .pc-avatar { width: 132px !important; height: 132px !important; }
  .pc-sheet .pc-hero-info { align-items: center; }
  .pc-sheet .pc-hero-name { font-size: 24px !important; }
  .pc-sheet .pc-avatar-actions { grid-column: auto; flex-direction: column; width: 100%; }
  .pc-sheet .pc-avatar-actions .pill { width: 100%; justify-content: center; }
  .pc-sheet > .pc-head { grid-column: auto; }
  .pc-sheet > .pc-label:first-of-type, .pc-sheet > .pc-hero + .pc-label { margin-top: 30px !important; }
  .pc-sheet > .pc-foot { grid-column: 1 / -1; }
}

/* Тех-огляд: рівні картки секцій, без переносу заголовків */
.tsec-t b, .tsec-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsec-h { min-height: 88px; }
@media (min-width: 1100px) {
  body.desktop-platform #tab-dev .tsec[data-k="comms"] { grid-column: 1 / -1; }
}
@media (min-width: 1300px) {
  body.desktop-platform #tab-dev .tsecs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.desktop-platform #tab-dev .tsec[data-k="comms"] { grid-column: auto; }
}

/* ===== Тех-розділ → Розсилки ===== */
.bch{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:1100px){body.desktop-platform .bch{grid-template-columns:minmax(0,1fr) 380px}body.desktop-platform .bch-side{position:sticky;top:0}}
.bch-main,.bch-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.bch-card{padding:16px;border-radius:22px;background:color-mix(in srgb,var(--text,#fff) 4%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.bch-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bch-h b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.bch-sum{font-size:13px;color:var(--hint)}.bch-sum b{color:var(--accent);font-size:15px}
.bch-sub{margin:12px 0 6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.bch-seg{display:flex;flex-wrap:wrap;gap:8px}
.bch-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent);transition:background .15s,transform .12s}
.bch-chip:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.bch-chip:active{transform:scale(.97)}
.bch-chip em{font-style:normal;font-size:12px;font-weight:800;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent);color:var(--hint)}
.bch-chip.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bch-chip.on em{background:rgba(255,255,255,.22);color:#fff}
.bch-note{margin-top:12px;font-size:12px;color:var(--hint);line-height:1.45}
.bch textarea,.bch input[type=text]{width:100%;box-sizing:border-box;border-radius:16px;padding:12px 14px;font:inherit;font-size:14.5px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 6%,transparent);border:1px solid color-mix(in srgb,var(--text,#fff) 8%,transparent);resize:vertical}
.bch textarea:focus,.bch input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.bch-tpl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.bch-tp{display:inline-flex;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.bch-tp button{border:0;background:none;color:var(--text);font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;cursor:pointer}
.bch-tp .bch-tpl-x{color:var(--hint);padding-left:2px}
.bch-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:10px 0}
.bch-attach{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:700;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.bch-file{font-size:12.5px;color:var(--hint);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bch-fx{border:0;background:none;color:var(--hint);font-size:16px;cursor:pointer}
.bch-btnrow{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
@media (max-width:560px){.bch-btnrow{grid-template-columns:1fr}}
.bch-actions{display:grid;grid-template-columns:auto 1fr;gap:10px}
@media (max-width:560px){.bch-actions{grid-template-columns:1fr}}
.bch-actions .primary-btn:disabled{opacity:.5;cursor:not-allowed}
.bch-chat{padding:16px;border-radius:18px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);min-height:120px}
.bch-bubble{max-width:100%;border-radius:16px 16px 16px 6px;overflow:hidden;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.bch-pm img{display:block;width:100%;max-height:200px;object-fit:cover}.bch-pm{display:none}
.bch-vid{padding:26px 12px;text-align:center;font-weight:700;background:rgba(0,0,0,.25)}
.bch-pt{padding:10px 12px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.bch-lnk{color:#60a5fa}
.bch-pb{margin-top:6px;padding:9px 12px;border-radius:12px;text-align:center;font-size:13.5px;font-weight:700;background:color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.bch-hist{display:flex;flex-direction:column;gap:8px}
.bch-hi{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent)}
.bch-hi-top{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}.bch-hi-top span{color:var(--hint)}
.bch-hi-tx{margin:4px 0;font-size:13px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bch-hi-st{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}.bch-hi-st i{font-style:normal;font-weight:800}
.bch-hi-st .ok{color:#34d399}.bch-hi-st .bl{color:#fbbf24}.bch-hi-st .er{color:#fb7185}.bch-hi-st .pend{color:var(--hint)}

/* Виправлення розкладок: адаптація за шириною самої панелі, а не вікна */
body.desktop-platform #tab-dev > .modal-tab-panel[data-devpanel="broadcast"] { max-width: 1240px !important; }
[data-devpanel="broadcast"] { container-type: inline-size; }
.bch { grid-template-columns: minmax(0, 1fr) !important; }
@container (min-width: 880px) {
  .bch { grid-template-columns: minmax(0, 1fr) 340px !important; }
  .bch-side { position: sticky; top: 0; }
}
.bch-chip { white-space: nowrap; }
.bch-actions .pill, .bch-actions .primary-btn { white-space: nowrap; }
.bch-actions { grid-template-columns: auto minmax(0, 1fr); }
@container (max-width: 520px) { .bch-actions { grid-template-columns: 1fr; } .bch-btnrow { grid-template-columns: 1fr; } }
.bch-h { flex-wrap: wrap; }

/* Тех-огляд: колонки підлаштовуються під ширину, без «К…» */
body.desktop-platform #tab-dev .tsecs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
body.desktop-platform #tab-dev .tsec[data-k="health"], body.desktop-platform #tab-dev .tsec[data-k="screens"].open { grid-column: 1 / -1 !important; }
body.desktop-platform #tab-dev .tsec[data-k="comms"] { grid-column: auto !important; }

/* Профіль (ПК, дві колонки): прибираємо конфлікт ID-правил — усе в один стовпчик ліворуч, кнопки в колонку, закриття не лізе на поле */
@media (min-width: 760px) {
  #profile-custom-overlay .pc-sheet > .pc-hero { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; }
  #profile-custom-overlay .pc-hero .pc-avatar, #profile-custom-overlay .pc-hero .pc-hero-info, #profile-custom-overlay .pc-hero .pc-avatar-actions { grid-row: auto !important; grid-column: 1 !important; }
  #profile-custom-overlay .pc-hero .pc-hero-info { align-items: center !important; text-align: center; }
  #profile-custom-overlay .pc-hero .pc-hero-name { max-width: 100%; white-space: normal; }
  #profile-custom-overlay .pc-hero .pc-avatar-actions { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; }
  #profile-custom-overlay .pc-hero .pc-avatar-actions .pill { width: 100% !important; flex: none !important; justify-content: center; white-space: nowrap; }
  .pc-sheet > .pc-hero + .pc-label { margin-top: 64px !important; }
}

/* Профіль (ПК): без прокрутки — усе вміщується */
@media (min-width: 760px) {
  body.desktop-platform .pc-sheet { max-height: none !important; overflow: hidden !important; }
  body.desktop-platform .pc-sheet .pc-chips { gap: 5px !important; margin: 8px 0 6px !important; }
  body.desktop-platform .pc-sheet .pc-chips .footer-chip { padding: 5px 10px !important; font-size: 12px !important; }
  body.desktop-platform .pc-sheet .pc-colors { flex-wrap: nowrap !important; gap: 6px !important; margin: 8px 0 2px !important; }
  body.desktop-platform .pc-sheet .pc-swatch { width: 28px !important; height: 28px !important; flex: none; }
  body.desktop-platform .pc-sheet > .pc-hero + .pc-label { margin-top: 56px !important; }
  body.desktop-platform .pc-sheet .pc-label { margin-top: 10px !important; margin-bottom: 5px !important; }
  body.desktop-platform .pc-sheet .pc-input { padding-top: 10px !important; padding-bottom: 10px !important; }
}

/* Картка «Живий ритм» у модалці каналу */
.rh-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--card-border)}
.rh-block input[type=number],.rh-block input[type=time],.rh-block select{padding:9px 10px;border-radius:12px;border:1px solid var(--card-border);background:color-mix(in srgb,var(--text,#fff) 6%,transparent);color:var(--text);font:inherit;font-size:14px;min-width:0}
.rh-sec{margin:14px 0 4px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.rh-note{font-size:11.5px;margin:2px 0 0 52px;line-height:1.4}
.rh-block textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;border-radius:14px;border:1px solid var(--card-border);background:color-mix(in srgb,var(--text,#fff) 6%,transparent);color:var(--text);font:inherit;font-size:13.5px;resize:vertical}

/* ===================== Адаптивний каркас: телефон / планшет / ноутбук / великий монітор ===================== */
/* Телефон: більше ширини під контент (було 26+12 px з кожного боку — лишалось ~80% екрана) */
@media (max-width: 599px) {
  body:not(.desktop-platform) .content { padding-left: 12px; padding-right: 12px; }
  body:not(.desktop-platform) .tab-screen { padding-left: 0; padding-right: 0; }
  body:not(.desktop-platform) .topbar { padding-left: 14px; padding-right: 14px; }
}
/* Великі робочі області (ефективна ширина після авто-масштабу): контент ширшіший, не вузька смужка по центру */
body.desktop-platform.ew-xl .content { width: min(100%, 1320px); }
body.desktop-platform.ew-xxl .content { width: min(100%, 1500px); }
body.desktop-platform.ew-xl .content:has(> #tab-dev.active), body.desktop-platform.ew-xxl .content:has(> #tab-dev.active) { width: min(100%, 1560px); }
@media (max-width: 599px) { body.mobile-platform .app { padding-left: 0; padding-right: 0; } }

/* Вікна на ПК: висота рахується з урахуванням масштабу інтерфейсу (html-zoom і zoom самого вікна) — інакше вікно вилазить за екран на 1080p і більше */
@media (min-width: 900px) {
  body.desktop-platform .modal-overlay:not(#editor-modal) > .modal-sheet,
  body.desktop-platform #channel-modal .modal-sheet,
  body.desktop-platform #referral-modal .modal-sheet,
  body.desktop-platform .pc-sheet,
  body.desktop-platform .as-overlay .as-sheet { max-height: calc((100 * var(--vh1, 1vh) - 48px) / var(--ed-zoom, 1)) !important; }
  body.desktop-platform #support-modal .modal-sheet.support-sheet { height: calc((100 * var(--vh1, 1vh) - 64px) / var(--ed-zoom, 1)) !important; max-height: calc((100 * var(--vh1, 1vh) - 64px) / var(--ed-zoom, 1)) !important; }
}
@media (min-width: 900px) { body.desktop-platform .as-overlay { padding-top: 40px !important; padding-bottom: 24px !important; } }

/* Вікно «Автоматизація»: перемикачі зліва, підписи теж зліва (а не притиснуті праворуч); «Живий ритм» без власної рамки-відступу */
.am-sheet .watermark-toggle { justify-content: flex-start !important; flex-direction: row !important; text-align: left; }
.am-sheet .watermark-toggle > span:not(.watermark-switch) { flex: 1; text-align: left; }
.am-sheet .rh-block { margin: 0; padding: 0; border: 0; }
.am-sheet .rh-block .rh-sec, .am-sheet .rh-block textarea, .am-sheet .rh-block [data-role="rh-save-ex"], .am-sheet .rh-block [data-role="rh-body"] { margin-left: 16px; margin-right: 16px; width: calc(100% - 32px); box-sizing: border-box; }
.am-sheet .rh-block .rh-note { margin: 0 0 4px 74px; padding-right: 16px; }
.am-sheet .rh-block [data-role="rh-save-ex"] { width: auto; margin-bottom: 14px; }
.am-sheet .rh-block [data-role="rh-digest-row"], .am-sheet .rh-block [data-role="rh-poll-row"] { margin-left: 74px !important; margin-bottom: 8px; }

/* «Автоматизація»: на телефоні одна колонка; на ПК (від ~1100px ефективної ширини) два стовпчики — публікація | живий ритм і стиль */
.am-cols > .am-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.am-cols { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  body.desktop-platform.ew-l .modal-overlay.am-ov > .modal-sheet.am-sheet,
  body.desktop-platform.ew-xl .modal-overlay.am-ov > .modal-sheet.am-sheet,
  body.desktop-platform.ew-xxl .modal-overlay.am-ov > .modal-sheet.am-sheet { max-width: calc(1040px / var(--ed-zoom, 1)) !important; width: calc(1040px / var(--ed-zoom, 1)) !important; }
  body.desktop-platform.ew-l .am-cols, body.desktop-platform.ew-xl .am-cols, body.desktop-platform.ew-xxl .am-cols { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  body.desktop-platform.ew-l .am-cols > .am-queue, body.desktop-platform.ew-xl .am-cols > .am-queue, body.desktop-platform.ew-xxl .am-cols > .am-queue { grid-column: 1 / -1; }
}

/* ===== Видача значків ===== */
.bdg-grant-open{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:18px;cursor:pointer;font:inherit;color:var(--text);text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 8%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}
.bdg-grant-open .bgo-ic{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bdg-grant-open .bgo-ic svg{width:22px;height:22px}.bdg-grant-open .bgo-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bdg-grant-open .bgo-tx b{font-size:15px;font-weight:800}.bdg-grant-open .bgo-tx small{font-size:12.5px;color:var(--hint)}
.bdg-grant-open .bgo-ch{flex:none;width:20px;height:20px;color:var(--hint)}
.bgx-overlay .bgx-sheet{display:flex!important;flex-direction:column;padding:0!important;width:100%;max-width:600px;height:min(94dvh,900px);overflow:hidden!important}
.bgx-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:6px 18px 10px}
.bgx-head b{display:block;font-size:21px;font-weight:850;letter-spacing:-.02em}.bgx-head span{display:block;margin-top:2px;font-size:13px;color:var(--hint)}
.bgx-body{flex:1;min-height:0;overflow-y:auto;padding:0 18px 8px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.bgx-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.bgx-sub{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}.bgx-sub em{font-style:normal;color:var(--accent);letter-spacing:0;font-size:12.5px;text-transform:none}
.bgx-search{display:flex;align-items:center;gap:10px;padding:0 14px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.bgx-search svg{width:18px;height:18px;flex:none;color:var(--hint)}.bgx-search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:15px;color:var(--text)}
.bgx-search:focus-within{box-shadow:0 0 0 2px var(--accent)}
.bgx-quick{display:flex;gap:8px}.bgx-quick button{border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.bgx-ulist{display:flex;flex-direction:column;gap:6px;max-height:34dvh;overflow-y:auto;overscroll-behavior:contain}
.bgx-u{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:15px;cursor:pointer;font:inherit;color:var(--text);text-align:left;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);transition:background .15s,box-shadow .15s}
.bgx-u.on{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.bgx-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--text,#fff) 10%,transparent);font-weight:800}
.bgx-ut{flex:1;min-width:0;display:flex;flex-direction:column}.bgx-ut b{font-size:14.5px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bgx-ut small{font-size:12px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgx-mini{flex:none;display:flex;align-items:center;gap:2px}.bgx-mini .bdg{width:20px;height:20px}.bgx-mini em{font-style:normal;font-size:11px;font-weight:800;color:var(--hint);margin-left:2px}
.bgx-tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:transparent;background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}.bgx-tick svg{width:14px;height:14px}
.bgx-u.on .bgx-tick{color:#fff;background:var(--accent)}
.bgx-none{padding:14px 4px;font-size:13.5px;color:var(--hint)}
.bgx-gl{margin:6px 0 4px;font-size:12px;font-weight:800;color:var(--text);opacity:.8}.bgx-gl small{display:block;font-weight:600;color:var(--hint);margin-top:2px}
.bgx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.bgx-b{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:0;border-radius:15px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:700;line-height:1.2;text-align:center;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 5%,transparent);transition:transform .12s,background .15s}
.bgx-b .bdg{width:40px;height:40px}.bgx-b:active{transform:scale(.97)}.bgx-b.on{background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.bgx-held{padding:10px 12px;border-radius:16px;background:color-mix(in srgb,#34d399 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#34d399 30%,transparent)}
.bgx-hchips{display:flex;flex-wrap:wrap;gap:6px}.bgx-hc{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.bgx-hc .bdg{width:22px;height:22px}.bgx-hc i{font-style:normal;color:var(--hint);font-size:15px;line-height:1}.bgx-hc:hover i{color:#fb7185}
.bgx-note{font-size:12px;line-height:1.45;color:var(--hint)}
.bgx-logt{margin-top:6px}.bgx-log{display:flex;flex-direction:column;gap:6px}
.bgx-lr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:color-mix(in srgb,var(--text,#fff) 4%,transparent);font-size:12.5px}
.bgx-ld{color:var(--hint);font-variant-numeric:tabular-nums}.bgx-lb{display:flex;align-items:center;gap:6px;min-width:0}.bgx-lb .bdg{width:20px;height:20px}.bgx-lb b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgx-lc.on{color:#34d399;font-weight:700}.bgx-lc.off{color:#fb7185;font-weight:700}
.bgx-bar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg,#0b0a14);box-shadow:0 -1px 0 color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.bgx-notify{display:flex;align-items:center;gap:8px;flex:1 1 100%;font-size:13px;cursor:pointer}.bgx-notify input{position:absolute;opacity:0;pointer-events:none}
.bgx-notify i{width:38px;height:22px;border-radius:999px;position:relative;background:color-mix(in srgb,var(--text,#fff) 14%,transparent);transition:background .18s;flex:none}
.bgx-notify i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s}
.bgx-notify input:checked + i{background:var(--accent)}.bgx-notify input:checked + i::after{transform:translateX(16px)}
.bgx-rev,.bgx-go{height:48px;border:0;border-radius:15px;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.bgx-rev{padding:0 18px;color:#fb7185;background:rgba(251,113,133,.12)}.bgx-go{flex:1;color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bgx-rev:disabled,.bgx-go:disabled{opacity:.45;cursor:not-allowed}
/* ПК: два стовпчики — люди ліворуч, значки й журнал праворуч */
@media (min-width:900px){
  body.desktop-platform .bgx-overlay .bgx-sheet{width:calc(1040px / var(--ed-zoom,1))!important;max-width:calc(100% - 48px)!important;height:calc((100 * var(--vh1,1vh) - 64px) / var(--ed-zoom,1))!important;max-height:calc(860px / var(--ed-zoom,1))!important}
  body.desktop-platform .bgx-body{flex-direction:row;align-items:stretch;gap:20px;overflow:hidden;padding-bottom:12px}
  body.desktop-platform .bgx-people{flex:0 0 42%;min-height:0}
  body.desktop-platform .bgx-badges{flex:1;min-height:0;overflow-y:auto;padding-right:4px;overscroll-behavior:contain}
  body.desktop-platform .bgx-ulist{flex:1;max-height:none;min-height:0}
  body.desktop-platform .bgx-notify{flex:1}
  body.desktop-platform .bgx-go{flex:0 0 240px}
}
.bgx-search input { border: 0 !important; background: none !important; box-shadow: none !important; height: auto !important; padding: 0 !important; margin: 0 !important; width: auto !important; border-radius: 0 !important; }

/* Налаштування каналу (ПК): ліва колонка нерухома, прокручується лише вміст праворуч (раніше обидві їхали разом і ліва зникала під шапкою) */
.chm-left { display: contents; }
@media (min-width: 1100px) {
  body.desktop-platform #channel-modal-body { display: grid !important; grid-template-columns: 290px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  body.desktop-platform #channel-modal-body::after { display: none !important; }
  body.desktop-platform #channel-modal-body > .chm-left { display: block; position: sticky; top: 0; grid-column: 1; max-height: calc((100 * var(--vh1, 1vh) - 190px) / var(--ed-zoom, 1)); overflow-y: auto; scrollbar-width: none; }
  body.desktop-platform #channel-modal-body > .chm-left::-webkit-scrollbar { display: none; }
  body.desktop-platform #channel-modal-body > .chm-left > * { float: none !important; width: 100% !important; margin: 0 0 12px !important; box-sizing: border-box; }
  body.desktop-platform #channel-modal-body > .modal-tab-panel { grid-column: 2; margin-left: 0 !important; }
}

/* Тех-розділ (ПК): ліва навігація прокручується сама, коли вкладок більше, ніж вміщується по висоті (раніше нижні, зокрема «Розсилки», були недосяжні) */
@media (min-width: 900px) {
  body.desktop-platform #tab-dev > .modal-tab-bar { max-height: calc(100 * var(--vh1, 1vh) - 150px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
}

/* Вікна на ПК: менший верхній відступ (було ~100px) — вікно центрується у вільному просторі й не вилазить за низ екрана; вміст усередині прокручується */
@media (min-width: 900px) {
  body.desktop-platform .modal-overlay:not(#support-modal), body.desktop-platform .as-overlay { padding-top: 40px !important; padding-bottom: 24px !important; }
}
/* Тех-розділ (ПК): ліва навігація гарантовано прокручується, якщо не вміщується */
@media (min-width: 900px) {
  body.desktop-platform #tab-dev > .modal-tab-bar { max-height: calc(100 * var(--vh1, 1vh) - 150px) !important; overflow-y: auto !important; overscroll-behavior: contain; }
}
/* «Автоматизація»: підписи в секції «Живий ритм» вирівняні з вмістом картки, а не по краю */
body.desktop-platform #tab-dev > .modal-tab-bar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
body.desktop-platform #tab-dev > .modal-tab-bar::-webkit-scrollbar { width: 6px; }
body.desktop-platform #tab-dev > .modal-tab-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 6px; }
body.desktop-platform #tab-dev > .modal-tab-bar::-webkit-scrollbar-track { background: transparent; }

/* Профіль: кольори статусу — сітка, що сама переноситься (без горизонтального виходу за край і без обрізання вибраного кружка) */
.pc-sheet .pc-colors, body.desktop-platform .pc-sheet .pc-colors { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 10px 8px !important; flex-wrap: wrap !important; padding: 4px 2px; margin: 8px 0 2px !important; overflow: visible !important; }
.pc-sheet .pc-colors .pc-swatch { width: 30px !important; height: 30px !important; justify-self: center; }

/* ===== «Живий ритм»: картка з чипами замість списків ===== */
.rh-block { margin: 0; padding: 0; border: 0; }
.rh-block .rh-note { font-size: 12.5px; line-height: 1.45; color: var(--hint); }
.rh-block .rh-pad { padding-left: 16px; padding-right: 16px; }
.rh-block .rh-sec { margin: 16px 16px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hint); }
.rh-block .rh-lab { margin: 12px 0 8px; font-size: 12.5px; font-weight: 750; color: var(--text); opacity: .85; }
.rh-block .rh-panel { margin: 4px 16px 12px; padding: 2px 14px 14px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.rh-block .rh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-block .rh-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 750; color: var(--text); background: color-mix(in srgb, var(--text, #fff) 8%, transparent); transition: background .15s, transform .12s, box-shadow .15s; }
.rh-block .rh-chip small { font-size: 11.5px; font-weight: 700; opacity: .7; }
.rh-block .rh-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rh-block .rh-chip:active { transform: scale(.97); }
.rh-block .rh-chip.on { color: #fff; background: linear-gradient(135deg, var(--accent-2, var(--accent)), var(--accent-deep, var(--accent))); box-shadow: 0 8px 18px -10px var(--accent-glow, var(--accent)); }
.rh-block .rh-chip.on small { opacity: .9; }
.rh-block .rh-range { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.rh-block .rh-range label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--hint); min-width: 0; }
.rh-block .rh-num { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--text, #fff) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text, #fff) 9%, transparent); }
.rh-block .rh-num input { flex: 1; min-width: 0; width: 100%; border: 0 !important; background: none !important; padding: 0 !important; height: auto !important; box-shadow: none !important; font: inherit; font-size: 16px; font-weight: 800; color: var(--text); outline: none; }
.rh-block .rh-num i { font-style: normal; font-size: 12px; color: var(--hint); }
.rh-block .rh-dash { padding-bottom: 12px; color: var(--hint); }
.rh-block .rh-in { margin-top: 14px; }
.rh-block .rh-sub { margin: 4px 16px 10px 70px; padding: 4px 14px 12px; border-radius: 16px; background: color-mix(in srgb, var(--text, #fff) 4%, transparent); }
.rh-block .rh-sub .rh-lab { margin-top: 8px; }
.rh-block .rh-time { margin-top: 10px; height: 38px; padding: 0 12px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--text, #fff) 7%, transparent); color: var(--text); font: inherit; font-size: 14px; }
.rh-block textarea { width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px; border-radius: 16px; border: 0; resize: vertical; min-height: 120px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text); background: color-mix(in srgb, var(--text, #fff) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text, #fff) 9%, transparent); }
.rh-block textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.rh-block .rh-savebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 14px; }
.rh-block .rh-cnt { font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
/* в окремому вікні «Автоматизація» вмісту секції відступи вже дає .am-item / .am-sec */
.am-sheet .rh-block .am-item { padding-left: 16px !important; padding-right: 16px !important; }
.am-sheet .rh-block .am-item .muted { padding-right: 0 !important; margin-left: 0 !important; }
.am-sheet .rh-block > .rh-note { margin: 0 16px 8px; }
/* «Живий ритм»: єдиний лівий край 24px для всіх елементів секції; перемикач усередині панелі без подвійного відступу */
.rh-block .rh-pad { padding: 0 !important; margin-left: 24px; margin-right: 24px; }
.rh-block .rh-sec { margin-left: 24px; margin-right: 24px; }
.rh-block .rh-panel { margin-left: 24px; margin-right: 24px; }
.rh-block .rh-panel .am-item { padding-left: 0 !important; padding-right: 0 !important; }
.rh-block .rh-sub { margin-left: 24px; margin-right: 24px; }
.rh-block > .rh-note { margin-left: 24px; margin-right: 24px; }
.am-sheet .rh-block > .rh-note { margin-left: 24px !important; margin-right: 24px !important; }
.rh-block .rh-pad.rh-savebar { display: flex; }
@media (max-width: 480px) { .am-sheet .am-st small { font-size: 10px; letter-spacing: .05em; padding-right: 14px; } .am-sheet .am-st b { font-size: 15px; } }

/* ===== Ролі команди платформи ===== */
.prole{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 7px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;color:var(--pc,#a78bfa);background:color-mix(in srgb,var(--pc,#a78bfa) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc,#a78bfa) 30%,transparent)}
.prole svg{width:15px;height:15px;flex:none}
.prole.compact{height:20px;padding:0 8px 0 5px;font-size:11px;gap:4px;margin-left:6px;vertical-align:middle}.prole.compact svg{width:12px;height:12px}
.profile-proles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 4px}
.cm-tx > b .prole{margin-top:-2px}
.cm-m > b .prole{margin-left:6px}

/* ===== Тех-розділ → Оновлення ===== */
.dnw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dnw-head b{display:block;font-size:18px;font-weight:850;letter-spacing:-.01em}.dnw-head span{display:block;margin-top:3px;font-size:13px;color:var(--hint);max-width:520px;line-height:1.45}
.dnw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.dnw-card{padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);display:flex;flex-direction:column;gap:6px}
.dnw-card.off{opacity:.55}
.dnw-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.dnw-date{font-size:12.5px;font-weight:700;color:var(--hint)}.dnw-date small{opacity:.7;font-weight:600;margin-left:4px}
.dnw-chip{font-style:normal;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.03em}
.dnw-chip.gray{color:var(--hint);background:color-mix(in srgb,var(--text,#fff) 9%,transparent)}.dnw-chip.amber{color:#fbbf24;background:rgba(251,191,36,.14)}.dnw-chip.green{color:#34d399;background:rgba(52,211,153,.14)}.dnw-chip.red{color:#fb7185;background:rgba(251,113,133,.14)}
.dnw-t{font-size:15.5px;font-weight:800}.dnw-p{margin:0;font-size:13px;line-height:1.5;color:var(--hint);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dnw-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dnw-acts button{border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:750;padding:7px 12px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.dnw-acts button:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.dnw-acts .danger{color:#fb7185}
.dnwe-ov .dnwe-sheet{display:flex!important;flex-direction:column;padding:0!important;width:100%;max-width:640px;height:min(92dvh,820px);overflow:hidden!important}
.dnwe-head{flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 18px 12px}.dnwe-head b{font-size:20px;font-weight:850}
.dnwe-body{flex:1;min-height:0;overflow-y:auto;padding:0 18px 12px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.dnwe-f{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:750;color:var(--hint)}.dnwe-f span{display:flex;justify-content:space-between}.dnwe-f em{font-style:normal;font-weight:600;opacity:.8}
.dnwe-f input,.dnwe-f textarea{box-sizing:border-box;width:100%;padding:11px 14px;border-radius:14px;border:0;font:inherit;font-size:15px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.dnwe-f textarea{resize:vertical;line-height:1.5}.dnwe-f input:focus,.dnwe-f textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}.dnwe-f input[readonly]{opacity:.65}
.dnwe-tabs{display:flex;gap:6px}.dnwe-tabs button{position:relative;flex:1;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:800;padding:9px 0;border-radius:12px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}
.dnwe-tabs button.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.dnwe-tabs button i{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:transparent}.dnwe-tabs button.full i{background:#34d399}
.dnwe-tools button{border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.dnwe-pl{margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.dnwe-card{margin:0}.dnwe-card .svn-in b{display:block;font-size:15px}.dnwe-card .svn-in p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--hint);overflow-wrap:anywhere}
.dnwe-bar{flex:none;display:flex;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));background:var(--bg,#0b0a14);box-shadow:0 -1px 0 color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.dnwe-bar .pill{height:46px;padding:0 18px}
@media (min-width:900px){body.desktop-platform .dnwe-ov .dnwe-sheet{width:calc(680px / var(--ed-zoom,1))!important;height:calc((100 * var(--vh1,1vh) - 64px) / var(--ed-zoom,1))!important;max-height:calc(820px / var(--ed-zoom,1))!important}}
.dnw-head .dnw-new { width: auto; flex: none; padding: 0 20px; }

/* ===== Плашки: повна кастомізація ===== */
.badge-ico{display:inline-block;vertical-align:-2px;flex:none;object-fit:contain}
.bge{margin-top:14px;padding-top:12px;border-top:1px solid var(--card-border)}
.bge-sec{margin:14px 0 8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.bge-lab{margin:10px 0 6px;font-size:12.5px;font-weight:700;color:var(--hint)}
.bge-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.bge-chip{position:relative;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:750;padding:7px 12px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent);transition:background .15s,transform .12s}
.bge-chip:active{transform:scale(.97)}.bge-chip.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bge-own{display:inline-flex;align-items:center;gap:6px;overflow:hidden}.bge-own input{width:20px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.bge-sw{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bge-dot{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.bge-dot.on{box-shadow:0 0 0 2px var(--bg,#0b0a14),0 0 0 4px #fff}
.bge-dotc{position:relative;overflow:hidden;background:conic-gradient(#ef4444,#facc15,#4ade80,#22d3ee,#6366f1,#e879f9,#ef4444)}.bge-dotc input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.bge-icon{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.bge-ipv{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);color:var(--text)}.bge-ipv svg,.bge-ipv img{width:26px;height:26px;object-fit:contain}.bge-ipv i{font-style:normal;font-size:10px;color:var(--hint)}
.bge-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin-bottom:8px}
.bge-ic{display:grid;place-items:center;height:40px;border:0;border-radius:12px;cursor:pointer;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent)}.bge-ic svg{width:20px;height:20px}
.bge-ic.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.bge-prev{position:sticky;top:0;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:-2px 0 8px;padding:10px 12px;border-radius:16px;background:var(--bg,#0b0a14);box-shadow:0 8px 18px -12px rgba(0,0,0,.6),inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 10%,transparent)}
.bge-pl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--hint)}
.bge-pv{display:inline-flex;align-items:center;padding:8px 12px;border-radius:12px}.bge-pv.dark{background:#0b0a14}.bge-pv.light{background:#f4f4f8}

/* ===== Тех-розділ → Плашки: список + редактор ===== */
.pbg-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.pbg-search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:15px;background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.pbg-search svg{width:18px;height:18px;flex:none;color:var(--hint)}.pbg-search input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;outline:none;padding:0!important;height:auto!important;font:inherit;font-size:15px;color:var(--text)}
.pbg-search:focus-within{box-shadow:0 0 0 2px var(--accent)}
.pbg-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.pbg-filters::-webkit-scrollbar{display:none}
.pbg-fc{flex:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:750;padding:7px 12px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.pbg-fc em{font-style:normal;opacity:.65;margin-left:3px}.pbg-fc.on{color:#fff;background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)))}
.pbg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pbg-edit{display:none}
.pbg-list{display:flex;flex-direction:column;gap:6px}
.pbg-gh{margin:12px 2px 2px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hint)}
.pbg-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:15px;cursor:pointer;font:inherit;color:var(--text);text-align:left;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);transition:background .15s,box-shadow .15s}
.pbg-row:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}.pbg-row.on{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.pbg-pv{flex:none;min-width:96px;display:flex;justify-content:flex-start}.pbg-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.pbg-meta b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pbg-meta small{font-size:11px;color:var(--hint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbg-mod{flex:none;width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.7)}
.pbg-none{padding:20px 4px;color:var(--hint);font-size:14px}
.pbg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:320px;padding:30px;text-align:center;border-radius:22px;border:1.5px dashed color-mix(in srgb,var(--text,#fff) 14%,transparent);color:var(--hint)}.pbg-empty svg{width:42px;height:42px;opacity:.6}.pbg-empty b{font-size:16px;color:var(--text)}.pbg-empty span{font-size:13px;max-width:340px;line-height:1.5}
.pbge{display:flex;flex-direction:column;gap:12px}
.pbge-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.pbge-head b{display:block;font-size:20px;font-weight:850;letter-spacing:-.01em}.pbge-head small{display:block;margin-top:2px;font-size:12px;color:var(--hint)}
.pbge .bge-prev{margin:0}
.pbge-body{display:flex;flex-direction:column;gap:12px}
.pbge-card{padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
.pbge-card h4{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hint)}
.pbge-f{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-size:12px;font-weight:750;color:var(--hint)}.pbge-f span{display:flex;justify-content:space-between}.pbge-f em{font-style:normal;font-weight:600;opacity:.8}
.pbge-f input,.pbge-f textarea,.pbge-f select{box-sizing:border-box;width:100%;padding:11px 14px;border-radius:14px;border:0;font:inherit;font-size:14.5px;color:var(--text);background:color-mix(in srgb,var(--text,#fff) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 9%,transparent)}
.pbge-f textarea{resize:vertical;line-height:1.45}.pbge-f input:focus,.pbge-f textarea:focus,.pbge-f select:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
.pbge-card .bge-lab:first-child{margin-top:0}
.pbge-bar{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 4px 4px;background:linear-gradient(180deg,transparent,var(--bg,#0b0a14) 28%)}
.pbge-st{flex:1 1 100%;font-size:12.5px;color:var(--hint)}.pbge-st.dirty{color:#fbbf24;font-weight:700}
.pbge-bar .pill{height:44px;padding:0 16px}.pbge-reset{color:#fb7185}
.pbge-bar .primary-btn{margin:0;flex:1;justify-content:center;height:44px}.pbge-bar button:disabled{opacity:.45;cursor:not-allowed}
.pbg-ov .pbg-sheet{display:flex!important;flex-direction:column;padding:0 16px 8px!important;width:100%;max-width:600px;height:min(94dvh,900px);overflow-y:auto!important}
.pbg-sheet-in{padding-top:6px}
/* ПК: список ліворуч, редактор праворуч */
@media (min-width:900px){
  body.desktop-platform:not(.ew-s):not(.ew-m) .pbg-grid{grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  body.desktop-platform:not(.ew-s):not(.ew-m) .pbg-edit{display:block;position:sticky;top:0}
  body.desktop-platform:not(.ew-s):not(.ew-m) .pbg-list{max-height:calc(100 * var(--vh1, 1vh) - 260px);overflow-y:auto;padding-right:4px;overscroll-behavior:contain;scrollbar-width:thin}
  body.desktop-platform:not(.ew-s):not(.ew-m) .pbg-edit .pbge-body{max-height:calc(100 * var(--vh1, 1vh) - 330px);overflow-y:auto;padding-right:6px;overscroll-behavior:contain;scrollbar-width:thin}
}

/* ===== Редактор постів: стиль «Студія» (ПК, ≥1000px, вмикається в Налаштуваннях) ===== */
@media (min-width:1000px){
body.desktop-platform.ed-studio #editor-modal .modal-sheet-flex{max-width:min(1320px,94vw)!important;width:min(1320px,94vw)!important;border-radius:26px}
body.desktop-platform.ed-studio #editor-modal .modal-header{padding-bottom:14px;border-bottom:1px solid var(--card-border);margin-bottom:0}
body.desktop-platform.ed-studio #editor-modal .modal-header > span{font-size:22px;font-weight:850;letter-spacing:-.015em}
body.desktop-platform.ed-studio #editor-modal .modal-sheet-body{gap:0!important;padding-top:16px}
body.desktop-platform.ed-studio #editor-modal .modal-scroll-area{flex:1 1 56%!important;display:flex;flex-direction:column;gap:14px;padding-right:16px;min-width:280px}
body.desktop-platform.ed-studio #editor-modal .editor-focus-preview-pane{flex:1 1 44%!important;border-left:0!important;padding:0 4px 0 16px!important;gap:14px;overflow-y:auto;scrollbar-width:thin;min-width:260px}
/* Перетяжна межа між редактором і живим переглядом (2026-10-22, "поработай
   над фичами для удобной работы") — лише Студія/ПК: .modal-scroll-area/
   .editor-focus-preview-pane далі тримають flex-basis у %, JS (app-beta.js:
   editorSplitResize) на drag просто підмінює їх inline flex-basis у px,
   inline стиль природно перебиває цей flex:…!important (специфічність
   інлайн-стилю завжди вища за будь-який селектор у .css). */
body.desktop-platform.ed-studio #editor-modal #editor-split-divider{display:flex!important;flex:none;width:9px;margin:0 -4px;position:relative;cursor:col-resize;z-index:3}
body.desktop-platform.ed-studio #editor-modal #editor-split-divider::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--card-border);transition:background-color .15s,height .15s}
body.desktop-platform.ed-studio #editor-modal #editor-split-divider:hover::before,
body.desktop-platform.ed-studio #editor-modal #editor-split-divider.dragging::before{background:var(--accent);top:0;bottom:0}
/* картки */
body.desktop-platform.ed-studio #editor-modal #editor-media-block,
body.desktop-platform.ed-studio #editor-modal .editor-section,
body.desktop-platform.ed-studio #editor-modal .editor-focus-preview-pane > .tg-chat,
body.desktop-platform.ed-studio #editor-modal .editor-quick-actions{border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 4.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);padding:14px 16px}
body.desktop-platform.ed-studio #editor-modal .toolbar.editor-flat-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent)}
body.desktop-platform.ed-studio #editor-modal .toolbar .tb-btn{width:38px;height:38px;border-radius:11px}
body.desktop-platform.ed-studio #editor-modal .rich-editor{min-height:280px;border-radius:20px;padding:18px 20px;font-size:15.5px;line-height:1.6;background:color-mix(in srgb,var(--bg,#0b0a14) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 10%,transparent)}
body.desktop-platform.ed-studio #editor-modal .rich-editor:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
/* права колонка: перегляд → канали/планування */
body.desktop-platform.ed-studio #editor-modal .editor-focus-preview-label{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--text);font-weight:800}
body.desktop-platform.ed-studio #editor-modal .editor-focus-preview-pane > .tg-chat{padding:14px}
body.desktop-platform.ed-studio #editor-modal #editor-channel-card{order:5}
body.desktop-platform.ed-studio #editor-modal .editor-section-label{font-size:13px;font-weight:800;color:var(--text)}
/* футер */
body.desktop-platform.ed-studio #editor-modal .modal-sticky-footer{padding-top:14px;border-top:1px solid var(--card-border)}
body.desktop-platform.ed-studio #editor-modal #editor-publish-btn{height:52px;border-radius:16px;font-size:15.5px}
}
@media (min-width:1000px){
body.desktop-platform.ed-studio #editor-modal .fmt-toggle{display:none!important}
body.desktop-platform.ed-studio #editor-modal .fmt-wrap{grid-template-rows:1fr!important;opacity:1!important;margin:0!important}
body.desktop-platform.ed-studio #editor-modal .editor-flat-toolbar{grid-template-columns:repeat(14,minmax(0,1fr))!important;gap:3px!important;padding:6px!important;border-radius:16px!important}
body.desktop-platform.ed-studio #editor-modal .editor-flat-toolbar .tb-btn{height:38px!important;min-height:38px!important;width:100%!important;border-radius:10px!important}
body.desktop-platform.ed-studio #editor-modal .editor-flat-toolbar .tb-btn svg{width:17px!important;height:17px!important}
body.desktop-platform.ed-studio #editor-modal .modal-scroll-area{overflow-y:auto}
}
body.desktop-platform.ed-studio #editor-modal #editor-media-preview:empty,body.desktop-platform.ed-studio #editor-modal .templates-bar:empty,body.desktop-platform.ed-studio #editor-modal #editor-media-block:empty{display:none!important}
@media (min-width:1000px){
body.desktop-platform.ed-studio #editor-modal .epro{order:4;padding:14px 16px;border-radius:20px;background:color-mix(in srgb,var(--text,#fff) 4.5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text,#fff) 8%,transparent);display:flex;flex-direction:column;gap:12px}
.epro-h{display:flex;align-items:center;justify-content:space-between}.epro-h b{font-size:13px;font-weight:800}.epro-sub{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.epro-meter{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent);overflow:hidden}.epro-meter i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent-2,var(--accent)),var(--accent));transition:width .25s}.epro-meter i.warn{background:#fbbf24}.epro-meter i.over{background:#ef4444}
.epro-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.epro-stats span{display:flex;flex-direction:column;gap:1px;padding:8px 6px;border-radius:12px;background:color-mix(in srgb,var(--text,#fff) 5%,transparent);text-align:center}.epro-stats b{font-size:13.5px;font-variant-numeric:tabular-nums}.epro-stats small{font-size:10.5px;color:var(--hint)}
.epro-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.epro-checks li{display:flex;align-items:center;gap:9px;font-size:13px}.epro-checks svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;box-sizing:border-box}.epro-checks .ok svg{color:#10b981;background:rgba(16,185,129,.16)}.epro-checks .bad{color:#fbbf24}.epro-checks .bad svg{color:#fbbf24;background:rgba(251,191,36,.18)}
.epro-tags{display:flex;flex-wrap:wrap;gap:6px}.epro-tags em{font-style:normal;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}.epro-tags small{color:var(--hint);font-size:12px}
.epro-keys{font-size:11.5px;color:var(--hint);line-height:2}.epro-keys kbd{font:inherit;font-size:10.5px;font-weight:800;padding:2px 6px;margin:0 2px;border-radius:6px;background:color-mix(in srgb,var(--text,#fff) 10%,transparent);color:var(--text)}.epro-keys kbd+kbd{margin-left:0}
}
body:not(.ed-studio) .epro{display:none!important}
@media (min-width:1000px){body.desktop-platform.ed-studio #editor-modal .editor-focus-preview-pane > .tg-chat{max-height:300px;overflow-y:auto;flex:none}}

/* ===== Підказки «?» біля складних налаштувань (app-beta.js: settingsHelp) ===== */
.hq-line{display:flex;align-items:center;gap:6px;min-width:0}
.hq-btn{flex:none;width:22px;height:22px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--text,#fff) 9%,transparent);color:var(--hint);cursor:pointer;transition:background-color .15s,color .15s,transform .12s}
.hq-btn svg{width:15px;height:15px}
.hq-btn:hover,.hq-btn.on{background:color-mix(in srgb,var(--accent) 24%,transparent);color:var(--text,#fff)}
.hq-btn:active{transform:scale(.9)}
.hq-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hq-pop{position:fixed;z-index:100200;padding:14px 16px 12px;border-radius:18px;background:color-mix(in srgb,var(--bg,#0b0a14) 90%,var(--accent));border:1px solid color-mix(in srgb,var(--accent) 30%,rgba(255,255,255,.08));box-shadow:0 22px 50px -14px rgba(0,0,0,.75);color:var(--text,#fff);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .16s ease,transform .2s cubic-bezier(.2,1,.3,1)}
.hq-pop.up{transform-origin:bottom left;transform:translateY(4px) scale(.98)}
.hq-pop.in{opacity:1;transform:none}
.hq-pop b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.hq-pop p{margin:0;font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--text,#fff) 82%,transparent)}
.hq-pop .hq-note{margin-top:8px;font-size:12.5px;color:var(--hint)}
.hq-pop .hq-ok{display:block;margin:12px 0 0 auto;height:34px;padding:0 16px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:filter .15s,transform .12s}
.hq-pop .hq-ok:hover{filter:brightness(1.1)}
.hq-pop .hq-ok:active{transform:scale(.96)}
.hq-arrow{position:absolute;width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg)}
.hq-pop.dn .hq-arrow{top:-7px;border-left:inherit;border-top:inherit}
.hq-pop.up .hq-arrow{bottom:-7px;border-right:inherit;border-bottom:inherit}
@media (prefers-reduced-motion:reduce){.hq-pop{transition:opacity .1s}.hq-pop,.hq-pop.up{transform:none}}

/* ===== «Орхідея» v2: була темно-індиго (#12132b) і не схожа на свою назву/прев'ю — тепер орхідейно-сливова ===== */
[data-theme="orchid"]{
  --bg:#1c1130;--bg-2:#26173f;--card:rgba(66,40,98,.62);--card-hi:rgba(88,56,128,.8);
  --card-border:rgba(198,140,232,.26);--card-border-hi:rgba(216,166,246,.5);
  --accent:#c584ea;--accent-glow:rgba(197,132,234,.38);--accent-2:#dcaaf8;--accent-deep:#8a52c4;
  --text:#f4ecfb;--hint:#b9a8cf;
}
[data-theme="orchid"] .nav-btn:not(.active){color:#9d8cb6}
[data-theme="orchid"] :is(.bottom-nav){background:linear-gradient(180deg,rgba(40,24,64,.96),var(--bg))!important}
.sw-orchid{--sw-bg:linear-gradient(135deg,#1c1130 0%,#8a52c4 55%,#e2b8fa 100%);--sw-accent:#dcaaf8}

/* ===== Шторка "Налаштування": розмір тексту (інлайн "Aa" у рядку "Вигляд") +
   панель відкладених змін "N змін / Скасувати / Застосувати" (мобільний) ===== */
.ss-tsize-row{cursor:default!important}
.ss-tsize-seg{display:flex;align-items:center;gap:6px;flex:none}
.ss-tsize-btn{display:grid;place-items:center;min-width:34px;height:34px;padding:0 4px;border:0;border-radius:10px;background:color-mix(in srgb,var(--text,#fff) 8%,transparent);color:var(--hint);font-family:inherit;font-weight:700;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease,transform .12s ease}
.ss-tsize-btn:active{transform:scale(.92)}
.ss-tsize-btn.active{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));color:#fff;box-shadow:0 4px 12px -4px var(--accent-glow)}

.ss-stage-bar{
  position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 8px 12px 18px;border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,#1a1526),#120e1c);
  border:1px solid color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.08));
  box-shadow:0 20px 44px -16px rgba(0,0,0,.8),0 0 30px -12px var(--accent-glow);
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.97);
  transition:opacity .22s ease,transform .32s cubic-bezier(.3,1.3,.5,1);
}
.ss-stage-bar.show{opacity:1;pointer-events:auto;transform:none}
.ss-stage-count{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.ss-stage-actions{display:flex;align-items:center;gap:6px;flex:none}
.ss-stage-discard,.ss-stage-apply{border:0;border-radius:13px;padding:0 16px;height:38px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:filter .15s ease,transform .12s ease}
.ss-stage-discard{background:color-mix(in srgb,var(--text,#fff) 10%,transparent);color:var(--hint)}
.ss-stage-discard:active,.ss-stage-apply:active{transform:scale(.96)}
.ss-stage-apply{background:linear-gradient(135deg,var(--accent-2,var(--accent)),var(--accent-deep,var(--accent)));color:#fff;box-shadow:0 8px 18px -8px var(--accent-glow)}
@media (prefers-reduced-motion:reduce){.ss-stage-bar{transition:opacity .12s ease}}

/* Розмір тексту (мобільний) — той самий --ui-font-scale, яким уже множаться
   десятки font-size по всьому файлу (раніше лише для desktop "Щільність
   панелі"); тут ті самі змінні, просто за кроком "sm/lg/xl" на body. */
body:not(.desktop-platform).ts-sm{--ui-font-scale:0.92}
body:not(.desktop-platform).ts-lg{--ui-font-scale:1.1}
body:not(.desktop-platform).ts-xl{--ui-font-scale:1.22}
/* Сама шторка "Налаштування" (рядки/секції) теж має реагувати на "Aa" —
   інакше дотик по кнопці нічого не змінював би на екрані, де вона лежить;
   решта правил цих класів вище в файлі — з !important, тому й тут так само. */
body:not(.desktop-platform) .settings-sheet .ss-lb,body:not(.desktop-platform) .settings-sheet .ss-val{font-size:calc(17px * var(--ui-font-scale,1))!important}
body:not(.desktop-platform) .settings-sheet .ss-sec{font-size:calc(19px * var(--ui-font-scale,1))!important}
body:not(.desktop-platform) .settings-sheet #appearance-settings-card .set-title,body:not(.desktop-platform) .settings-sheet .ss-nrow .set-title{font-size:calc(17px * var(--ui-font-scale,1))!important}
body:not(.desktop-platform) .settings-sheet #appearance-settings-card .set-desc,body:not(.desktop-platform) .settings-sheet .ss-nrow .set-desc{font-size:calc(13px * var(--ui-font-scale,1))!important}
body:not(.desktop-platform) .settings-sheet .set-toggle-title{font-size:calc(17px * var(--ui-font-scale,1))!important}
body:not(.desktop-platform) .settings-sheet .set-toggle-hint{font-size:calc(13px * var(--ui-font-scale,1))!important}