/* ====================================================================
 * [feature/notification-panel-preline-v2] Preline.co-стиль блока
 * «Уведомления» (:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel)) с поддержкой светлой / тёмной темы.
 *
 * Цель — модернизировать существующий блок настроек уведомлений
 * (notificationSettingsArea, zoneMonitoringSection, setting-row,
 * user-list-item, toggle-btn, channel-section) до уровня дизайна,
 * который уже используется в проекте для:
 *   • шапки — public/preline-header.css
 *   • карточек наблюдения — public/style.css (.watching-*)
 *   • soft-card и badge-чипов из preline.badge / shadcn Badge.
 *
 * Стратегия совместимости:
 *   • Все id и data-i18n атрибуты, к которым обращается app.js,
 *     сохранены без изменений (см. updateNotificationSettings,
 *     toggleNotification, saveNotificationSetting, toggleZoneMonitoring,
 *     updateZoneMonitoringUI, refreshMonitoringZonesUI/RoutesUI).
 *   • Базовые классы, к которым обращается JS (.user-list-item,
 *     .user-list-avatar*, .user-name, .toggle-btn, .toggle-btn-sm,
 *     .toggle-btn-active, .zone-monitoring-section, .setting-row,
 *     .custom-select, .channel-section, .action-btn-sm, .hidden),
 *     сохранены и переопределены здесь — JS просто продолжает
 *     работать, а визуально блок становится мягче, чище, в духе
 *     современных business-app (Notion, Linear, Slack, Telegram
 *     Premium, shadcn, Preline PRO).
 *   • Все цвета — через семантические токены с парными
 *     переопределениями в .dark-theme, как в существующем
 *     preline-header.css.
 * ==================================================================== */

/* ---------- Семантические токены (по умолчанию — светлая тема) ---------- */
:root {
    /* Поверхности */
    --notif-surface-bg: #ffffff;
    --notif-surface-bg-subtle: #f8fafc;          /* slate-50 */
    --notif-surface-border: #e5e7eb;
    --notif-surface-border-strong: color-mix(in srgb, var(--button-bg, #0d7bff) 30%, transparent);
    --notif-surface-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px -6px rgba(15, 23, 42, 0.06);
    --notif-surface-shadow-hover:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 14px 28px -10px rgba(15, 23, 42, 0.14);

    /* Soft hero-градиент для «шапки» блока уведомлений.
       В Preline.co аналог — hero card с цветной плашкой сверху. */
    --notif-hero-bg: linear-gradient(135deg,
        color-mix(in srgb, var(--button-bg, #0d7bff) 10%, #ffffff) 0%,
        color-mix(in srgb, var(--button-bg, #0d7bff) 4%, #ffffff) 100%);
    --notif-hero-border: color-mix(in srgb, var(--button-bg, #0d7bff) 20%, transparent);
    --notif-hero-icon-bg: linear-gradient(135deg, var(--button-bg, #0d7bff) 0%,
        color-mix(in srgb, var(--button-bg, #0d7bff) 60%, #6f42c1 40%) 100%);
    --notif-hero-icon-shadow: 0 4px 12px color-mix(in srgb, var(--button-bg, #0d7bff) 30%, transparent);

    /* Карточки пользователей */
    --notif-user-bg: #ffffff;
    --notif-user-border: #e5e7eb;
    --notif-user-border-hover: color-mix(in srgb, var(--button-bg, #0d7bff) 45%, transparent);
    --notif-user-border-active: var(--button-bg, #0d7bff);
    --notif-user-active-bg: color-mix(in srgb, var(--button-bg, #0d7bff) 6%, #ffffff);
    --notif-user-active-shadow: 0 0 0 3px color-mix(in srgb, var(--button-bg, #0d7bff) 14%, transparent);
    --notif-user-name-color: #0f172a;            /* slate-900 */
    --notif-user-id-color: #64748b;              /* slate-500 */
    --notif-user-enabled-accent: #16a34a;        /* green-600 — для бейджа «включено» */
    --notif-user-enabled-bg: color-mix(in srgb, #16a34a 12%, transparent);
    --notif-user-enabled-border: color-mix(in srgb, #16a34a 30%, transparent);

    /* Карточка настроек (после выбора пользователя) */
    --notif-settings-bg: var(--notif-surface-bg);
    --notif-settings-border: #e5e7eb;
    --notif-settings-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                            0 6px 18px -6px rgba(15, 23, 42, 0.06);

    /* Тоглы (chip-кнопки) */
    --notif-toggle-bg: #f1f5f9;                  /* slate-100 */
    --notif-toggle-bg-hover: #e2e8f0;            /* slate-200 */
    --notif-toggle-fg: #475569;                  /* slate-600 */
    --notif-toggle-active-bg: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --notif-toggle-active-fg: #ffffff;
    --notif-toggle-active-shadow: 0 4px 12px color-mix(in srgb, #16a34a 30%, transparent);

    /* Section-заголовки внутри панели */
    --notif-section-title-color: #0f172a;
    --notif-section-desc-color: #64748b;

    /* Sub-card для «зоны мониторинга» */
    --notif-zone-card-bg: #f8fafc;               /* slate-50 */
    --notif-zone-card-border: #e5e7eb;
    --notif-zone-card-icon-bg: color-mix(in srgb, var(--button-bg, #0d7bff) 10%, transparent);
    --notif-zone-card-icon-fg: var(--button-bg, #0d7bff);

    /* Channel-section (Telegram-каналы) */
    --notif-channel-bg: color-mix(in srgb, var(--button-bg, #0d7bff) 4%, #ffffff);
    --notif-channel-border: color-mix(in srgb, var(--button-bg, #0d7bff) 18%, transparent);
    --notif-channel-fg: #1e293b;                  /* slate-800 */
    --notif-channel-link-bg: var(--button-bg, #0d7bff);
    --notif-channel-link-fg: #ffffff;

    /* Поля ввода внутри панели (резерв — на будущее) */
    --notif-input-bg: #ffffff;
    --notif-input-border: #cbd5e1;
    --notif-input-fg: #0f172a;
    --notif-input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--button-bg, #0d7bff) 22%, transparent);

    /* Метка setting-row */
    --notif-label-color: #334155;                /* slate-700 */
    --notif-label-desc-color: #64748b;
}

/* ---------- Тёмная тема: парные переопределения токенов ---------- */
.dark-theme {
    --notif-surface-bg: #1f2937;                 /* slate-800 */
    --notif-surface-bg-subtle: rgba(148, 163, 184, 0.08);
    --notif-surface-border: rgba(148, 163, 184, 0.16);
    --notif-surface-border-strong: color-mix(in srgb, #38bdf8 45%, transparent);
    --notif-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.32),
                            0 6px 18px -6px rgba(0, 0, 0, 0.45);
    --notif-surface-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.40),
                                  0 14px 32px -10px rgba(0, 0, 0, 0.55);

    --notif-hero-bg: linear-gradient(135deg,
        color-mix(in srgb, #38bdf8 18%, #1f2937) 0%,
        color-mix(in srgb, #38bdf8 6%, #1f2937) 100%);
    --notif-hero-border: color-mix(in srgb, #38bdf8 35%, transparent);
    --notif-hero-icon-bg: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    --notif-hero-icon-shadow: 0 4px 14px color-mix(in srgb, #38bdf8 35%, transparent);

    --notif-user-bg: #1f2937;
    --notif-user-border: rgba(148, 163, 184, 0.18);
    --notif-user-border-hover: color-mix(in srgb, #38bdf8 55%, transparent);
    --notif-user-border-active: #38bdf8;
    --notif-user-active-bg: color-mix(in srgb, #38bdf8 14%, #1f2937);
    --notif-user-active-shadow: 0 0 0 3px color-mix(in srgb, #38bdf8 20%, transparent);
    --notif-user-name-color: #f1f5f9;
    --notif-user-id-color: #94a3b8;
    --notif-user-enabled-accent: #4ade80;        /* green-400 */
    --notif-user-enabled-bg: color-mix(in srgb, #4ade80 22%, transparent);
    --notif-user-enabled-border: color-mix(in srgb, #4ade80 45%, transparent);

    --notif-settings-bg: rgba(15, 23, 42, 0.45);
    --notif-settings-border: rgba(148, 163, 184, 0.18);
    --notif-settings-shadow: 0 1px 2px rgba(0, 0, 0, 0.40),
                            0 6px 18px -6px rgba(0, 0, 0, 0.50);

    --notif-toggle-bg: rgba(148, 163, 184, 0.18);
    --notif-toggle-bg-hover: rgba(148, 163, 184, 0.28);
    --notif-toggle-fg: #cbd5e1;
    --notif-toggle-active-bg: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
    --notif-toggle-active-fg: #ffffff;
    --notif-toggle-active-shadow: 0 4px 14px color-mix(in srgb, #4ade80 35%, transparent);

    --notif-section-title-color: #f1f5f9;
    --notif-section-desc-color: #94a3b8;

    --notif-zone-card-bg: rgba(15, 23, 42, 0.35);
    --notif-zone-card-border: rgba(148, 163, 184, 0.18);
    --notif-zone-card-icon-bg: color-mix(in srgb, #38bdf8 18%, transparent);
    --notif-zone-card-icon-fg: #7dd3fc;

    --notif-channel-bg: color-mix(in srgb, #38bdf8 8%, #1f2937);
    --notif-channel-border: color-mix(in srgb, #38bdf8 28%, transparent);
    --notif-channel-fg: #e2e8f0;
    --notif-channel-link-bg: #38bdf8;
    --notif-channel-link-fg: #042f1a;

    --notif-input-bg: rgba(15, 23, 42, 0.4);
    --notif-input-border: rgba(148, 163, 184, 0.30);
    --notif-input-fg: #f1f5f9;
    --notif-input-focus-ring: 0 0 0 3px color-mix(in srgb, #38bdf8 30%, transparent);

    --notif-label-color: #e2e8f0;
    --notif-label-desc-color: #94a3b8;
}

/* ====================================================================
 *  КОНТЕЙНЕР ПАНЕЛИ
 *  Базовый класс .settings-group уже прозрачный (без фона/тени).
 *  Мы превращаем :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) в полноценную «карточку раздела»
 *  в духе Preline Hero Card: верхняя hero-плашка с иконкой + нижний
 *  контент-блок. Класс .hidden сохраняем для совместимости с
 *  openNotificationPanel/closeNotificationPanel.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel).settings-group.preline-notif-panel {
    /* Перекрываем обнулённые background/shadow у .settings-group
       (см. public/style.css .settings-group). */
    background: var(--notif-surface-bg);
    border: 1px solid var(--notif-surface-border);
    border-radius: 18px;
    box-shadow: var(--notif-surface-shadow);
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel).settings-group.preline-notif-panel:hover {
    box-shadow: var(--notif-surface-shadow-hover);
}

/* ====================================================================
 *  HEADER (panel-header) — наследуем базовые стили, дорабатываем
 *  иконку и подзаголовок для эффекта «hero card».
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header {
    /* Наследуем существующие .panel-header (background tint, border-bottom)
       и дополняем hero-градиентом для акцента. */
    background: var(--notif-hero-bg);
    border-bottom: 1px solid var(--notif-hero-border);
    position: relative;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text-color);
    flex-wrap: wrap;
    row-gap: 4px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header h3 i {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--notif-hero-icon-bg);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--notif-hero-icon-shadow);
    flex-shrink: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header h3 span {
    line-height: 1.2;
}

/* Подсказка «Для продолжения выберите пользователя из списка ниже»
   в hero-шапке панелей alias/limit/notification. Благодаря
   flex-wrap:wrap на h3 и flex-basis:100% подсказка уходит на
   отдельную строку под заголовком, не ломая компоновку
   icon+title (которые остаются в первой строке flex-контейнера
   вместе с близкой кнопкой закрытия справа). */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header h3 .panel-header-hint {
    flex-basis: 100%;
    flex-grow: 0;
    margin: 2px 0 0 0;
    padding: 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--notif-label-desc-color);
    letter-spacing: 0;
    align-self: flex-start;
    text-align: left;
}

/* Подзаголовок «Что увидите» — добавляется опционально через JS;
   если в HTML data-i18n его нет, поле просто невидимо. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--button-bg, #0d7bff) 25%, transparent) 50%,
        transparent 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* ====================================================================
 *  CONTENT (panel-content) — без изменений структуры, только ритм.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ====================================================================
 *  USER LIST (.user-list-for-edit → .user-list-item)
 *  Карточки пользователей в preline «list-item» стиле:
 *  • 14px radius, 1px border, мягкая тень
 *  • hover → подсветка границы accent-цветом
 *  • selected → ring + акцентный фон
 *  • .user-notif-enabled → зелёный «active» индикатор слева
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-for-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Каждая строка пользователя — soft card. Базовый класс
   .user-list-item генерируется в JS (см. updateNotificationSettings,
   refreshNotificationUserListIcons), поэтому сохраняем
   существующие свойства, переопределяя лишь визуал. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--notif-user-bg);
    border: 1px solid var(--notif-user-border);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: var(--notif-surface-shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                background 0.18s ease, transform 0.12s ease;
    position: relative;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item:hover {
    border-color: var(--notif-user-border-hover);
    box-shadow: var(--notif-surface-shadow-hover);
    transform: translateY(-1px);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item:active {
    transform: translateY(0) scale(0.995);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item.selected {
    border-color: var(--notif-user-border-active);
    background: var(--notif-user-active-bg);
    box-shadow: var(--notif-surface-shadow-hover),
                var(--notif-user-active-shadow);
}

/* Зелёный «active» маркер — теперь не жирная левая граница, а
   тонкая полоса-«индикатор» (как в Linear / Slack), чтобы не
   ломать существующую разметку с аватаркой слева. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item.user-notif-enabled {
    border-color: color-mix(in srgb, var(--notif-user-enabled-accent) 50%, var(--notif-user-border));
    background: var(--notif-user-enabled-bg);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item.user-notif-enabled::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--notif-user-enabled-accent);
    box-shadow: 0 0 0 2px var(--notif-surface-bg);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item .user-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--notif-user-name-color);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Аватарка — те же размеры, что задаёт inline style (32px), но с
   preline-кольцом (2px gradient border). Имя класса и вложенный
   .user-list-avatar-letter сохраняем, чтобы JS-логика в
   buildAvatarElement() работала без изменений. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item .user-list-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    background: var(--notif-surface-bg);
    box-shadow:
        0 0 0 2px var(--notif-surface-bg),
        0 0 0 4px color-mix(in srgb, var(--button-bg, #0d7bff) 20%, transparent);
    transition: box-shadow 0.18s ease;
    position: relative;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item:hover .user-list-avatar {
    box-shadow:
        0 0 0 2px var(--notif-surface-bg),
        0 0 0 4px color-mix(in srgb, var(--button-bg, #0d7bff) 35%, transparent);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item .user-list-avatar img {
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item .user-list-avatar.user-list-avatar-fallback {
    color: #ffffff;
    font-weight: 700;
    user-select: none;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item .user-list-avatar-letter {
    font-size: 13px;
    line-height: 1;
}

/* Бейдж-индикатор «ВКЛ» справа на строке — добавляется только когда
   на элементе висит класс .user-notif-enabled. Иконка берётся
   через ::after из CSS, чтобы не ломать JS, который пишет только
   textContent в .user-name. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .user-list-item.user-notif-enabled .user-name::after {
    content: "\f111"; /* fa-circle — точка состояния */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 8px;
    color: var(--notif-user-enabled-accent);
    vertical-align: middle;
}

/* ====================================================================
 *  USER-SETTINGS AREA (#notificationSettingsArea → notification-settings-header)
 *  При выборе пользователя показывается карточка с его именем,
 *  статусом уведомлений и большой кнопкой Вкл/Выкл.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationSettingsArea {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--notif-settings-bg);
    border: 1px solid var(--notif-settings-border);
    border-radius: 16px;
    box-shadow: var(--notif-settings-shadow);
    margin: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationSettingsArea.hidden {
    display: none !important;
}

/* «Карточка пользователя» — column layout: имя сверху,
   кнопка Вкл/Выкл — на всю ширину снизу. Это удобнее на мобильных
   (тапабельная зона 40px+ на всю ширину карточки), и имя никогда
   не «упирается» в кнопку на узких экранах. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .notification-settings-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
    background: var(--notif-surface-bg-subtle);
    border: 1px solid var(--notif-surface-border);
    border-radius: 12px;
    margin: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .notification-settings-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--notif-section-title-color);
    letter-spacing: -0.1px;
    line-height: 1.3;
    /* В column-layout нет flex-сжатия от соседа — ограничиваем
       только снизу по ширине, чтобы длинные имена переносились,
       а не обрезались многоточием (раньше было white-space:nowrap
       с overflow:hidden — в новой раскладке это лишнее). */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Кнопка Вкл/Выкл занимает всю ширину карточки.
   Используем !important только потому, что базовый стиль
   :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn задаёт width:auto — без
   переопределения кнопка сжимается до размера текста. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .notification-settings-header .toggle-btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
}

/* ====================================================================
 *  TOGGLE BUTTONS (.toggle-btn, .toggle-btn-sm)
 *  JS динамически ставит className = "toggle-btn ..." и
 *  classList.add('toggle-btn-active'), поэтому сохраняем базовые
 *  классы — здесь только визуальный слой.
 *
 *  ВАЖНО: визуально эти кнопки теперь идентичны карточке
 *  .user-list-item.user-notif-enabled — soft-card стиль:
 *  • одинаковый фон, бордер, тень (через общие токены)
 *  • border-radius 14px (не pill)
 *  • active состояние = тот же зелёный tint + accent-бордер,
 *    что и у карточки пользователя с включёнными уведомлениями.
 *  Это создаёт визуальную связность: «включено = зелёный
 *  soft-card» одинаково для пользователей и для тоглов.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 18px;
    background: var(--notif-user-bg);
    color: var(--notif-label-color);
    border: 1px solid var(--notif-user-border);
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    width: auto;
    box-shadow: var(--notif-surface-shadow);
    transition: background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease,
                border-color 0.18s ease;
    position: relative;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn:hover {
    border-color: var(--notif-user-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--notif-surface-shadow-hover);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Active = «включено» — те же токены, что у .user-notif-enabled:
   зелёный tint-фон + accent-бордер. Текст белый в обеих темах
   (см. --notif-toggle-active-fg) — чтобы контраст с зелёным
   фоном был максимальным и в светлой, и в тёмной теме. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn.toggle-btn-active {
    background: var(--notif-user-enabled-bg);
    color: var(--notif-toggle-active-fg);
    border-color: color-mix(in srgb, var(--notif-user-enabled-accent) 50%, var(--notif-user-border));
    box-shadow: var(--notif-surface-shadow),
                inset 0 0 0 1px color-mix(in srgb, var(--notif-user-enabled-accent) 25%, transparent);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn.toggle-btn-active:hover {
    border-color: var(--notif-user-enabled-accent);
    box-shadow: var(--notif-surface-shadow-hover),
                inset 0 0 0 1px color-mix(in srgb, var(--notif-user-enabled-accent) 35%, transparent);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 14px;
    background: var(--notif-user-bg);
    color: var(--notif-label-color);
    border: 1px solid var(--notif-user-border);
    border-radius: 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    width: auto;
    box-shadow: var(--notif-surface-shadow);
    transition: background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease,
                border-color 0.18s ease;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm span {
    color: inherit;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm:hover {
    border-color: var(--notif-user-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--notif-surface-shadow-hover);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm:active {
    transform: translateY(0) scale(0.97);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm.toggle-btn-active {
    background: var(--notif-user-enabled-bg);
    color: var(--notif-toggle-active-fg);
    border-color: color-mix(in srgb, var(--notif-user-enabled-accent) 50%, var(--notif-user-border));
    box-shadow: var(--notif-surface-shadow),
                inset 0 0 0 1px color-mix(in srgb, var(--notif-user-enabled-accent) 25%, transparent);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .toggle-btn-sm.toggle-btn-active:hover {
    border-color: var(--notif-user-enabled-accent);
    box-shadow: var(--notif-surface-shadow-hover),
                inset 0 0 0 1px color-mix(in srgb, var(--notif-user-enabled-accent) 35%, transparent);
}

/* ====================================================================
 *  OPTIONS AREA (#notificationOptions)
 *  «Раскрывающийся» блок с настройками (триггер / частота / макс /
 *  возобновление). Сохраняем .hidden для совместимости.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationOptions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding: 0;
    border-top: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationOptions.hidden {
    display: none !important;
}

/* Каждая строка настройки — preline «setting-row» в стиле Stripe /
   Linear: label сверху, контрол справа; на мобильном контрол
   перетекает на новую строку. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--notif-surface-border) 60%, transparent);
    flex-wrap: wrap;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row:last-child {
    border-bottom: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row > span {
    color: var(--notif-label-color);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}

/* «Переключатель с подписью» (Вход в зону / Выход из зоны):
   .setting-row .setting-label содержит заголовок и описание.

   Раньше margin-left: 12px добавлялся к уже существующему
   margin-right: 16px у .toggle-btn-sm (старый CSS .setting-row
   .toggle-btn-sm { margin-right: 16px }), итого 28px мёртвого
   пространства между кнопкой и текстом — описание не помещалось
   и переносилось по 1-2 слова. Сейчас отступ унифицирован через
   gap у .setting-row, а label получает максимум ширины. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .setting-label {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .setting-label > span {
    font-weight: 600;
    font-size: 13px;
    color: var(--notif-label-color);
    line-height: 1.3;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .setting-label .section-description {
    margin: 0;
    color: var(--notif-label-desc-color);
    font-size: 11.5px;
    line-height: 1.4;
}

/* Делаем custom-select чуть «легче» в preline-стиле внутри панели.
   Базовые стили .custom-select* переопределяем через дочерние
   селекторы, чтобы не сломать остальные места использования. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .custom-select {
    flex-shrink: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .custom-select .custom-select-trigger {
    background: var(--notif-input-bg);
    border-color: var(--notif-input-border);
    color: var(--notif-input-fg);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .custom-select .custom-select-trigger:hover {
    border-color: var(--button-bg, #0d7bff);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .custom-select.is-open .custom-select-trigger {
    box-shadow: var(--notif-input-focus-ring);
}

/* ====================================================================
 *  ZONE MONITORING SECTION
 *  Большой блок «Зона мониторинга» в стиле soft accordion/card.
 *  Сохраняем .zone-monitoring-section / .zone-monitoring-header /
 *  .zone-monitoring-toggle / .zone-monitoring-options и data-i18n,
 *  к которым обращается JS через querySelector.
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-section {
    margin-top: 4px;
    padding: 14px;
    background: var(--notif-zone-card-bg);
    border: 1px solid var(--notif-zone-card-border);
    border-radius: 14px;
    box-shadow: var(--notif-surface-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-header h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--notif-section-title-color);
    letter-spacing: -0.1px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.25;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-header h4 i {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--notif-zone-card-icon-bg);
    color: var(--notif-zone-card-icon-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-header .section-description {
    margin: 0;
    color: var(--notif-section-desc-color);
    font-size: 12px;
    line-height: 1.45;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-toggle {
    margin: 0;
    display: flex;
    justify-content: flex-start;
}

/* Кнопка "Включить/Отключить зону мониторинга" — единый soft-card
   стиль, как у всех toggle-btn в панели (см. секцию TOGGLE BUTTONS).
   Никаких дополнительных override — иначе она будет визуально
   отличаться от .notificationToggleBtn, что нарушит консистентность.
   Сохраняем только шрифт и компактный горизонтальный padding. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-toggle .toggle-btn {
    font-size: 11px;
    padding: 10px 16px;
    min-height: 38px;
}

/* ВАЖНО: .zone-monitoring-options раньше был вложенной "карточкой в
   карточке" (фон + бордер + паддинги поверх родительской
   .zone-monitoring-section). Это съедало ширину контента на ~40px
   с каждой стороны — карта-предпросмотр и список зон получались
   слишком узкими, текст переносился по 1-2 слова.

   Сейчас это прозрачный wrapper-контейнер: держит только поток и
   .hidden для JS-логики toggleZoneMonitoring. Вся "карточность"
   теперь живёт в самих .zone-coords-display (см. ниже). */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-options.hidden {
    display: none !important;
}

/* Подкарточки «Зоны мониторинга» и «Маршруты мониторинга».
   Раньше: вложенная soft-card с фоном/бордером/паддингом, сильно
   сужавшая контент (карта 100-150px в самой узкой части панели).
   Сейчас: плоская секция-разделитель с тонкой верхней линией,
   без собственного фона/бордера — занимает всю ширину
   родительской .zone-monitoring-section, без вложенного
   "карточка-в-карточке".

   Лёгкий "inset" эффект (как у group/section в Notion / Linear)
   даёт вертикальный ритм без визуальной вложенности. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 0 4px 0;
    margin-top: 4px;
    background: transparent;
    border: 0;
    border-top: 1px dashed color-mix(in srgb, var(--notif-surface-border) 80%, transparent);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.18s ease;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display:hover {
    border-top-color: color-mix(in srgb, var(--button-bg, #0d7bff) 45%, transparent);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display + .zone-coords-display {
    margin-top: 4px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--notif-section-title-color);
    letter-spacing: -0.1px;
    text-transform: uppercase;
    opacity: 0.85;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-header > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-header i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--notif-zone-card-icon-bg);
    color: var(--notif-zone-card-icon-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display .section-description {
    margin: -2px 0 6px 0;
    color: var(--notif-section-desc-color);
    font-size: 12px;
    line-height: 1.45;
}

/* Кнопки действий внутри подкарточек (управление зонами и т.п.).
   Раньше они шли в один ряд через flex-wrap, и при узкой ширине
   контейнера текст обрезался. Сейчас — column-layout, full-width,
   чтобы каждая кнопка была читаемой и кликабельной. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display .action-btn-sm {
    background: var(--notif-input-bg);
    color: var(--notif-label-color);
    border: 1px solid var(--notif-input-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin: 0;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display .action-btn-sm:hover {
    background: color-mix(in srgb, var(--button-bg, #0d7bff) 6%, var(--notif-input-bg));
    border-color: color-mix(in srgb, var(--button-bg, #0d7bff) 50%, transparent);
    color: var(--button-bg, #0d7bff);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display .action-btn-sm + .action-btn-sm {
    margin-top: 0;
}

/* Когда у .zone-coords-display в родителях две кнопки (управление
   зонами + общими), они должны идти друг под другом с разумным
   вертикальным ритмом. flex-direction:column у родителя + gap:8px
   уже заданы; убедимся что и общий список .button-row (если он
   появится) тоже корректно выглядит. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-coords-display .button-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

/* Превью карты в панели уведомлений.
   Полная ширина родителя (без margin/padding, чтобы не сжимать
   тайлы). Высота фиксированная — 180px — чтобы на узких экранах
   карта оставалась читаемой, но не доминировала. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-map-preview {
    width: 100%;
    height: 180px;
    margin: 0;
    border-radius: 10px;
    border: 1px solid var(--notif-surface-border);
    background: var(--notif-input-bg);
    overflow: hidden;
}

/* Список зон / маршрутов. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Каждая зона/маршрут — soft card, но с column-layout, чтобы имя
   и метаданные (радиус, статус) не теснились в одну строку.
   На узких экранах это особенно важно: раньше "Школа 53.9358,
   27.6819", "100 м" и "Уведомления в" переносились по 1-2 слова,
   потому что всё лежало в одном row с gap:10px. */
:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-list .zone-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 12px;
    background: var(--notif-surface-bg-subtle);
    border: 1px solid var(--notif-surface-border);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.4;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-list .zone-item-name {
    color: var(--button-bg, #0d7bff);
    font-weight: 700;
    font-size: 13px;
    word-break: break-word;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-list .zone-item-radius {
    color: var(--notif-label-desc-color);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-list .zone-item-status {
    font-size: 11px;
    color: var(--notif-label-desc-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ====================================================================
 *  CHANNEL SECTION (#notificationChannelSection)
 *  Блок для управления Telegram-каналами — preline «info card».
 * ==================================================================== */

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationChannelSection {
    margin: 0;
    padding: 14px 16px;
    background: var(--notif-channel-bg);
    border: 1px solid var(--notif-channel-border);
    border-radius: 14px;
    color: var(--notif-channel-fg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationChannelSection.hidden {
    display: none !important;
}

:where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationChannelSection h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--notif-section-title-color);
}

/* ====================================================================
 *  DARK-THEME уточнения
 *  Глобально токены уже учитывают тёмную тему. Здесь — мелкие
 *  фиксы для inline-стилей и edge cases.
 * ==================================================================== */

.dark-theme :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-header h3 i {
    color: #ffffff;
}

.dark-theme :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-close-btn,
.dark-theme :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .close-panel-btn {
    background: rgba(15, 23, 42, 0.35);
    border-color: rgba(148, 163, 184, 0.22);
}

.dark-theme :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .close-panel-btn:hover {
    background: rgba(239, 68, 68, 0.16);
}

/* ====================================================================
 *  АДАПТИВ
 *  На очень узких экранах (<380px) — компактнее отступы,
 *  setting-row → label/control column layout.
 * ==================================================================== */

@media (max-width: 380px) {
    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .panel-content {
        padding: 12px;
        gap: 12px;
    }

    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) #notificationSettingsArea {
        padding: 12px;
        gap: 10px;
    }

    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .zone-monitoring-section {
        padding: 12px;
        gap: 10px;
    }

    /* На узких экранах .setting-row становится column-layout
       (label сверху, контрол внизу), но строки entry/exit (где
       есть .setting-label внутри) сохраняют row-layout, чтобы
       кнопка-переключатель оставалась слева от описания. */
    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Исключение для entry/exit строк: сохраняем row-layout.
       Без :has() — через прямой дочерний селектор :first-child,
       потому что .toggle-btn-sm идёт первым в этих строках.
       (Селектор ниже работает только когда в строке первым
       идёт именно toggle-btn-sm — entry/exit case.) */
    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row > .toggle-btn-sm:first-child {
        align-self: flex-start;
    }

    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .setting-label {
        margin-top: 0;
    }

    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row > span {
        font-size: 13px;
    }

    :where(#notificationPanel, #aliasEditorPanel, #limitEditorPanel) .setting-row .custom-select {
        width: 100%;
        max-width: 100%;
    }
}

/* ====================================================================
 *  EDITOR PANELS (#aliasEditorPanel, #limitEditorPanel)
 *  Специфичные стили для панелей редактирования (псевдонимы / лимит).
 *  Базовые стили (контейнер, header, content, user-list-item, avatar)
 *  уже унаследованы от общей :where(...) секции выше.
 *
 *  Здесь дорабатываем:
 *  • #aliasEditArea / #limitEditArea — карточка-обёртка с именем
 *    пользователя и формой редактирования.
 *  • .edit-user-name — заголовок «кто сейчас редактируется».
 *  • .settings-input — поле ввода (псевдоним) в preline-стиле.
 *  • .button-row — column-layout с full-width кнопками.
 *  • .action-btn / .action-btn-secondary / .action-btn-cancel —
 *    soft-card кнопки в стиле toggle-btn, но с цветовым акцентом
 *    по типу действия (primary / secondary / danger).
 *  • .limit-description — поясняющий абзац под списком пользователей.
 *  • .limit-options / .limit-option — список выбора лимита записей,
 *    визуально как .user-list-item (карточки), чтобы стиль был
 *    единым со списком пользователей выше.
 * ==================================================================== */

:where(#aliasEditorPanel, #limitEditorPanel) #aliasEditArea,
:where(#aliasEditorPanel, #limitEditorPanel) #limitEditArea {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--notif-settings-bg);
    border: 1px solid var(--notif-settings-border);
    border-radius: 16px;
    box-shadow: var(--notif-settings-shadow);
    margin: 0;
}

:where(#aliasEditorPanel, #limitEditorPanel) #aliasEditArea.hidden,
:where(#aliasEditorPanel, #limitEditorPanel) #limitEditArea.hidden {
    display: none !important;
}

:where(#aliasEditorPanel, #limitEditorPanel) .edit-user-name {
    margin: 0;
    padding: 12px 14px;
    background: var(--notif-surface-bg-subtle);
    border: 1px solid var(--notif-surface-border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--notif-section-title-color);
    letter-spacing: -0.1px;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Поле ввода псевдонима — preline-стиль (как у .setting-row input
   в notification-панели). Базовый .settings-input из style.css
   получает прозрачный фон и тонкую границу в духе soft-card. */
:where(#aliasEditorPanel, #limitEditorPanel) .settings-input {
    width: 100%;
    padding: 12px 14px;
    background: var(--notif-input-bg);
    color: var(--notif-input-fg);
    border: 1px solid var(--notif-input-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

:where(#aliasEditorPanel, #limitEditorPanel) .settings-input:focus {
    outline: none;
    border-color: var(--button-bg, #0d7bff);
    box-shadow: var(--notif-input-focus-ring);
}

:where(#aliasEditorPanel, #limitEditorPanel) .settings-input::placeholder {
    color: var(--notif-label-desc-color);
    opacity: 1;
}

/* Ряд кнопок (Сохранить / Удалить / Отмена) — column-layout
   для удобного тапа на мобильных. */
:where(#aliasEditorPanel, #limitEditorPanel) .button-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* Базовый .action-btn переопределяем в preline soft-card стиль
   (как .toggle-btn в notification-панели). Цветовой акцент
   передаётся через :nth-of-type / классы модификаторов. */
:where(#aliasEditorPanel, #limitEditorPanel) .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px 18px;
    background: var(--notif-user-bg);
    color: var(--notif-label-color);
    border: 1px solid var(--notif-user-border);
    border-radius: 14px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
    box-shadow: var(--notif-surface-shadow);
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.12s ease;
}

:where(#aliasEditorPanel, #limitEditorPanel) .action-btn:hover {
    border-color: var(--notif-user-border-hover);
    transform: translateY(-1px);
    box-shadow: var(--notif-surface-shadow-hover);
}

:where(#aliasEditorPanel, #limitEditorPanel) .action-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Primary = «Сохранить» — акцентный фон (тот же button-bg, что
   используется в hero-иконке шапки панели). */
:where(#aliasEditorPanel, #limitEditorPanel) .button-row > .action-btn:first-of-type {
    background: var(--button-bg, #0d7bff);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--notif-hero-icon-shadow);
}

:where(#aliasEditorPanel, #limitEditorPanel) .button-row > .action-btn:first-of-type:hover {
    filter: brightness(1.08);
    border-color: transparent;
}

/* Secondary = «Удалить» (нейтральный) */
:where(#aliasEditorPanel, #limitEditorPanel) .action-btn-secondary {
    background: var(--notif-user-bg);
    color: var(--notif-label-color);
}

/* Cancel = «Отмена» — мягкий красный accent */
:where(#aliasEditorPanel, #limitEditorPanel) .action-btn-cancel {
    background: color-mix(in srgb, #dc3545 10%, var(--notif-user-bg));
    color: #dc3545;
    border-color: color-mix(in srgb, #dc3545 30%, var(--notif-user-border));
}

:where(#aliasEditorPanel, #limitEditorPanel) .action-btn-cancel:hover {
    background: color-mix(in srgb, #dc3545 16%, var(--notif-user-bg));
    border-color: #dc3545;
    color: #dc3545;
}

.dark-theme :where(#aliasEditorPanel, #limitEditorPanel) .action-btn-cancel {
    background: color-mix(in srgb, #f87171 14%, var(--notif-user-bg));
    color: #fca5a5;
    border-color: color-mix(in srgb, #f87171 35%, var(--notif-user-border));
}

.dark-theme :where(#aliasEditorPanel, #limitEditorPanel) .action-btn-cancel:hover {
    background: color-mix(in srgb, #f87171 22%, var(--notif-user-bg));
    border-color: #f87171;
    color: #fca5a5;
}

/* Пояснение «Лимит записей — максимальное количество…» — soft-card
   в нижней части списка пользователей. Базовый .limit-description
   из style.css получает preline-фон и акцентную иконку. */
:where(#aliasEditorPanel, #limitEditorPanel) .limit-description {
    margin: 6px 0 0 0;
    padding: 10px 14px;
    background: var(--notif-zone-card-bg);
    border: 1px solid var(--notif-zone-card-border);
    border-radius: 12px;
    color: var(--notif-section-desc-color);
    font-size: 12px;
    line-height: 1.5;
}

:where(#aliasEditorPanel, #limitEditorPanel) .limit-description.limit-frozen-description {
    background: color-mix(in srgb, #0288d1 8%, var(--notif-zone-card-bg));
    border-color: color-mix(in srgb, #0288d1 30%, var(--notif-zone-card-border));
    color: #0288d1;
}

.dark-theme :where(#aliasEditorPanel, #limitEditorPanel) .limit-description.limit-frozen-description {
    background: color-mix(in srgb, #38bdf8 12%, var(--notif-zone-card-bg));
    border-color: color-mix(in srgb, #38bdf8 35%, var(--notif-zone-card-border));
    color: #7dd3fc;
}

/* Список выбора лимита записей (#limitOptions) — карточки в том же
   стиле, что и .user-list-item выше. Базовый .limit-option из
   style.css адаптируем под soft-card. */
:where(#aliasEditorPanel, #limitEditorPanel) .limit-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

:where(#aliasEditorPanel, #limitEditorPanel) .limit-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--notif-user-bg);
    border: 1px solid var(--notif-user-border);
    border-radius: 14px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--notif-user-name-color);
    box-shadow: var(--notif-surface-shadow);
    transition: border-color 0.18s ease, background 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}

:where(#aliasEditorPanel, #limitEditorPanel) .limit-option:hover {
    border-color: var(--notif-user-border-hover);
    box-shadow: var(--notif-surface-shadow-hover);
    transform: translateY(-1px);
}

:where(#aliasEditorPanel, #limitEditorPanel) .limit-option:active {
    transform: translateY(0) scale(0.995);
}

/* selected = текущий лимит — accent-фон как у .user-notif-enabled,
   чтобы визуально связать «включено» (notification) и «выбрано»
   (limit/alias) в одну soft-card систему. */
:where(#aliasEditorPanel, #limitEditorPanel) .limit-option.selected {
    border-color: color-mix(in srgb, var(--button-bg, #0d7bff) 50%, var(--notif-user-border));
    background: var(--notif-user-active-bg);
    color: var(--button-bg, #0d7bff);
    box-shadow: var(--notif-surface-shadow-hover),
                var(--notif-user-active-shadow);
}