/*
 * /cringe2/assets/css/main.css
 * Главные стили мониторинга 7Miners (вынесены из inline <style>).
 * Палитра-токены остаются inline в index.html (<style id="ui-palette">),
 * чтобы JS мог читать var() через getComputedStyle до загрузки этого файла.
 *
 * Содержит: layout, header, table monitoring, FAB-меню, modals,
 * settings tab, statistics, thresholds, burger menu и финальные
 * 7miners.net theme overrides.
 */

/* Стили CSS */
    @media (max-width: 600px){
      /* Не ломаем все таблицы глобально: сужаем правило только для статистики */
      #tab-statistics .stats-table { display: block; overflow-x: auto; white-space: nowrap; }
      #tab-statistics .stats-table th,
      #tab-statistics .stats-table td { padding: 6px 8px; font-size: .85rem; }
    }
    body { background-color: var(--bg-primary); color: var(--text-body); font-family: var(--font-text); font-size: 15px; line-height: 1.55; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-main); font-weight: 700; }
    button, input, select, textarea { font-family: var(--font-ui); }
    /* Глобальные скроллбары — тонкие, едва заметные */
    * {
      scrollbar-width: thin;
      scrollbar-color: rgba(128, 219, 254, 0.12) transparent;
    }
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(128, 219, 254, 0.10);
      border-radius: 999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(128, 219, 254, 0.22);
    }
    header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: var(--bg-elev); border-bottom: 1px solid rgba(255,255,255,0.04); }
    header h2 { margin: 0; font-family: var(--font-display); color: var(--text-main); font-size: 1.45rem; letter-spacing: -0.2px; }
    .auth-buttons { display: flex; gap: 10px; align-items: center; }
    .auth-login-gloss {
      display: inline-block;
      vertical-align: middle;
      background: linear-gradient(
        90deg,
        #7a5c0a 0%,
        #c9a030 12%,
        #f5e070 24%,
        #fdf0a0 30%,
        #e8c040 38%,
        #b8880e 50%,
        #e8c040 62%,
        #fdf0a0 70%,
        #f5e070 76%,
        #c9a030 88%,
        #7a5c0a 100%
      );
      background-size: 250% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: authLoginGloss 8.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    }
    @keyframes authLoginGloss {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .auth-login-gloss {
        animation: none;
        background-position: 50% center;
      }
    }
    table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); }
    th, td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--border-soft); }
    th { background-color: var(--bg-elev); color: var(--text-body); font-weight: 600; }
    th[data-sort]:hover { background-color: #1b2434; color: var(--accent-orange); }
    tr:not(.details):hover { background-color: rgba(13, 230, 112, 0.04); cursor: pointer; }
    .details { background-color: var(--bg-card-2); display: none; }
    .chart-container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; padding: 20px; max-width: 100%; box-sizing: border-box; }
    /* ========== [CHARTS] Стили контейнеров графиков .chart-wrap ========== */
    .chart-wrap{ flex: 1 1 360px; max-width: 600px; aspect-ratio: 16/9; background: var(--bg-elev); border:1px solid rgba(255,255,255,0.04); border-radius:8px; padding:10px; position:relative; box-sizing: border-box; }
    @supports not (aspect-ratio:16/9){ .chart-wrap::before{ content:""; display:block; padding-top:56.25%; } }
    .chart-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }
    .details > td{ padding:0 }
    .time-btn { background: var(--bg-elev); color: var(--text-body); border: 1px solid var(--border-soft); padding: 5px 15px; margin: 0 5px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; font-family: var(--font-ui); font-weight: 500; }
    .time-btn:hover { background: #1b2434; border-color: var(--border-strong); color: var(--text-main); }
    .time-btn.active { background: var(--accent-green); border-color: var(--accent-green); color: #0e1320; font-weight: 700; }
    .status-icon-wrapper { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; color: white; margin-right: 5px; vertical-align: middle; }
    .status-icon-wrapper i { font-size: 8px; line-height: 1; }

    /* ========== [CHARTS] Стили тултипов графиков ========== */
    .chartjs-tooltip { opacity: 0; position: absolute; background: rgba(30, 30, 30, 0.9); color: #eee; border-radius: 4px; padding: 8px 12px; font-size: 11px; line-height: 1.4; pointer-events: none; transition: opacity 0.1s ease; z-index: 99998; min-width: 160px; border: 1px solid #555; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
    .chartjs-tooltip-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
    .chartjs-tooltip table { margin: 0; padding: 0; border-spacing: 0; width: 100%; }
    .chartjs-tooltip th, .chartjs-tooltip td { padding: 3px 0; border: none; text-align: left; white-space: nowrap; }
    .chartjs-tooltip th { text-align: center; padding-bottom: 6px; border-bottom: 1px solid #555; margin-bottom: 4px; font-size: 12px; }
    .chartjs-tooltip td:last-child { text-align: right; font-weight: bold; padding-left: 10px; }
    .chart-zoom-hint { font-size: 11px; color: var(--text-mute); margin-top: 6px; margin-bottom: 0; font-family: var(--font-ui); }
    .chart-zoom-hint a { color: var(--accent-green); text-decoration: none; }
    .chart-zoom-hint a:hover { text-decoration: underline; }

    #status-tooltip { display: none; position: fixed; background-color: rgba(0,0,0,0.9); color: #f0f0f0; border: 1px solid #555; padding: 8px 12px; border-radius: 4px; font-size: 12px; line-height: 1.4; max-width: 220px; z-index: 99999; pointer-events: none; box-shadow: 0 3px 10px rgba(0,0,0,0.6); white-space: normal; }
    #status-tooltip strong { font-weight: bold; color: #fff; }

    /* Анимация для вращающегося вентилятора */
    .fan-icon {
      display: inline-block;
      margin-right: 5px;
      animation: spin linear infinite;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .location-header { background: linear-gradient(135deg, #2D3748 0%, #141A28 100%) !important; }
    .location-header:hover { background: linear-gradient(135deg, #2D3748 0%, #141A28 100%) !important; cursor: default !important; }
    .location-header td { border-left: 4px solid var(--accent-orange) !important; border-right: none !important; }
    
    /* Компактные заголовки локаций */
    .location-header-compact { 
      background: linear-gradient(135deg, #2D3748 0%, #141A28 100%) !important; 
      border-left: none !important;
      border-right: none !important;
    }
    .location-header-compact:hover { 
      background: linear-gradient(135deg, #2D3748 0%, #141A28 100%) !important; 
      cursor: default !important; 
    }
    .location-header-compact td { 
      padding: 6px 8px 6px 0 !important; 
      font-size: 0.9em !important;
      border-left: none !important; 
      border-right: none !important; 
    }
    
    /* Мониторинг: контейнер всегда готов к горизонтальному скроллу (нужно и на desktop) */
    #tab-monitoring #table-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* На десктопе убираем боковые отступы у таблицы */
    @media (min-width: 769px) and (pointer: fine) {
      #tab-monitoring #table-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }
    /* position: relative нужен ВСЕГДА: без него position:absolute внутри loc-header-inner
       находит #table-container как контейнер и закрывает всю таблицу */
    #tab-monitoring #device-table th,
    #tab-monitoring #device-table td {
      position: relative;
    }
    /* Цвета заголовков мониторинга — меняй значения здесь (палитра в редакторе) */
    #tab-monitoring {
      --mon-thead-label-color: #CDCFD4;
      --mon-thead-sort-active-color: var(--accent-orange);
      /* Вертикальный зазор у панели мониторинга (сверху и снизу одинаково) */
      --mon-toolbar-block-gap: 8px;
    }
    #tab-monitoring #device-table thead th {
      color: var(--mon-thead-label-color);
    }
    #tab-monitoring #device-table thead th[data-sort]:hover {
      color: var(--mon-thead-sort-active-color);
    }
    #tab-monitoring #device-table thead th.mon-th-sort-active {
      color: var(--mon-thead-sort-active-color);
    }
    /* Цвет имени устройства в строке таблицы (вкладка «Мониторинг»).
       Первая буква имени окрашивается inline-стилем из renderRow (var(--accent-orange) / #80dbfe)
       и перебивает это правило — оно действует только на «остальные буквы». */
    #tab-monitoring #device-table tbody tr:not(.location-header-compact):not(.details) td:nth-child(2) {
      color: var(--accent-green);
    }
    /* Значок «робот» рядом с версией прошивки — индикатор связи с агентом 7MINERS.
       Три состояния: online (зелёный), offline (красный), отсутствует (значка нет).
       Класс agent-dot--{online|offline} добавляет цвет; tooltip приходит из title.

       !important нужен потому, что строки оффлайн-устройств в таблице задают
       `color: var(--text-mute)` на уровне <tr> (спец-ть 1,2,0), и без него
       значок наследует серый цвет родителя. Цвет индикатора связи с агентом
       не должен зависеть от состояния майнинга — это два разных факта. */
    .agent-dot {
      margin-left: 6px;
      font-size: 0.85em;
      vertical-align: baseline;
      cursor: help;
    }
    .agent-dot--online  { color: var(--accent-green) !important; }
    .agent-dot--offline { color: var(--accent-red)   !important; }
    /* Заголовок «Устройства» над таблицей — не показываем; сверху — тот же отступ, что снизу у панели */
    #tab-monitoring #devices-header-row {
      display: none !important;
    }
    #tab-monitoring #table-container #mon-toolbar {
      margin-top: var(--mon-toolbar-block-gap);
    }
    /* Строка локации: фон всей строки — нужен и на desktop */
    #tab-monitoring #device-table tbody tr.location-header-compact td {
      background: linear-gradient(135deg, #2D3748 0%, #141A28 100%);
      border-top: none;
      border-bottom: none;
    }

    /* ── Мобильная прокрутка: sticky-колонка «Имя» + стопка + тени ── */
    @media (pointer: coarse), (max-width: 768px) {
      #tab-monitoring #device-table thead th:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 25;
        background: var(--bg-elev);
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.28);
        overflow: visible;
      }
      #tab-monitoring #device-table tbody td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 15;
        background: var(--bg-primary);
        border-right: none;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.28);
        overflow: visible;
      }
      #tab-monitoring #device-table thead th:nth-child(2)::before,
      #tab-monitoring #device-table tbody td:nth-child(2)::before {
        content: "";
        position: absolute;
        top: 0;
        right: -1px;
        width: 1px;
        height: 100%;
        pointer-events: none;
        z-index: 31;
      }
      #tab-monitoring #device-table thead th:nth-child(2)::before {
        background: rgba(255,255,255,0.12);
      }
      #tab-monitoring #device-table tbody td:nth-child(2)::before {
        background: rgba(255,255,255,0.10);
      }
      #tab-monitoring #device-table thead th:nth-child(2)::after,
      #tab-monitoring #device-table tbody td:nth-child(2)::after {
        content: "";
        position: absolute;
        top: 0;
        right: -10px;
        width: 10px;
        height: 100%;
        pointer-events: none;
        z-index: 30;
        background: linear-gradient(to right, rgba(0,0,0,0.28), rgba(0,0,0,0));
      }
      /* Убираем линию между "Имя" и "Хэшрейт" только на мобилке */
      #tab-monitoring #device-table thead th:nth-child(3),
      #tab-monitoring #device-table tbody td:nth-child(3) {
        border-left: none !important;
      }
      #tab-monitoring #device-table tbody tr.location-header-compact td:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 40;
        overflow: visible;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.28);
      }
      #tab-monitoring #device-table tbody tr.location-header-compact .loc-header-inner {
        z-index: 41 !important;
      }
      #table-container #devices-header-row {
        position: sticky;
        left: 0;
        z-index: 21;
        background: inherit;
      }
      #table-container #mon-toolbar {
        position: sticky;
        left: 0;
        z-index: 21;
        max-width: 100vw;
      }
      #table-container #mon-action-bar {
        position: sticky;
        left: 0;
        z-index: 21;
        max-width: 100vw;
      }
      /* На мобильном: кнопка в потоке sticky-строки, translateX позиционирует её к правому краю viewport */
      #table-container #devices-header-row #grouping-toggle {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
        height: auto !important;
        font-size: 0.9em !important;
        padding: 4px 10px !important;
        z-index: 22;
        flex-shrink: 0;
      }
    }

    /* Кнопка переключения группировки */
    .grouping-toggle,
    #grouping-toggle {
      background: var(--bg-input) !important;
      color: var(--text-body) !important;
      border: 1px solid var(--border-soft) !important;
      padding: 7px 12px !important;
      margin-left: 0;
      border-radius: 8px !important;
      cursor: pointer;
      font-size: 13px !important;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
      box-sizing: border-box;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .grouping-toggle:hover,
    #grouping-toggle:hover {
      background: rgba(13, 230, 112, 0.08) !important;
      border-color: var(--accent-green) !important;
      color: var(--text-main) !important;
    }
    .grouping-toggle.active,
    #grouping-toggle.active,
    #mon-toolbar .mon-tb-btn#grouping-toggle.active {
      background: rgba(13, 230, 112, 0.14) !important;
      border-color: var(--accent-green) !important;
      color: var(--accent-green) !important;
    }
    
    /* Фиксируем клики по дочерним элементам кнопки группировки */
    #grouping-toggle * {
      pointer-events: none;
    }

    #mon-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: var(--mon-toolbar-block-gap, 8px);
      padding: 0;
    }
    #mon-toolbar .mon-search-wrap {
      position: relative;
      flex: 1 1 200px;
      min-width: 140px;
    }
    #mon-toolbar .mon-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 7px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      color: var(--text-main);
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #mon-toolbar .mon-search-input::placeholder { color: var(--text-mute); }
    #mon-toolbar .mon-search-input:focus {
      border-color: var(--accent-green);
      box-shadow: 0 0 0 2px rgba(13, 230, 112, 0.2);
    }
    #mon-search-suggest {
      position: absolute;
      top: calc(100% + 4px);
      left: 0; right: 0;
      background: var(--bg-elev);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.35);
      z-index: 200;
      max-height: 220px;
      overflow-y: auto;
      display: none;
    }
    #mon-search-suggest.open { display: block; }
    .mon-search-suggest-item {
      width: 100%;
      border: 0;
      background: transparent;
      color: var(--text-body);
      text-align: left;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
    }
    .mon-search-suggest-item:hover,
    .mon-search-suggest-item.active {
      background: rgba(13, 230, 112, 0.08);
      color: var(--text-main);
    }
    .mon-search-suggest-item .hint {
      color: var(--text-mute);
      font-size: 12px;
      white-space: nowrap;
    }
    #mon-toolbar .mon-loc-filter {
      padding: 7px 10px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      color: var(--text-body);
      font-size: 13px;
      outline: none;
      cursor: pointer;
      min-width: 90px;
      max-width: 200px;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    #mon-toolbar .mon-loc-filter:hover {
      background: rgba(13, 230, 112, 0.08);
      border-color: var(--accent-green);
      color: var(--text-main);
    }
    #mon-toolbar .mon-loc-filter option {
      background: var(--bg-elev);
      color: #80dbfe;
    }
    #mon-toolbar .mon-loc-filter:focus {
      border-color: var(--accent-green);
    }
    #mon-toolbar .mon-tb-btn {
      padding: 7px 12px;
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      background: var(--bg-input);
      color: var(--text-body);
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    #mon-toolbar .mon-tb-btn:hover {
      background: rgba(13, 230, 112, 0.08);
      border-color: var(--accent-green);
      color: var(--text-main);
    }
    #mon-toolbar .mon-tb-btn.active {
      background: rgba(13, 230, 112, 0.15);
      border-color: var(--accent-green);
      color: var(--accent-green);
    }
    #mon-toolbar .mon-tb-btn i { pointer-events: none; }
    #mon-toolbar #mon-add-device-btn i { color: var(--accent-orange); }
    #mon-toolbar #mon-edit-toggle i { color: #80dbfe; }

    /* === Monitoring Edit Mode === */
    #tab-monitoring:not(.mon-edit-mode) .mon-cb-col { display: none; }
    #tab-monitoring.mon-edit-mode .mon-cb-col {
      display: table-cell;
      width: 32px;
      min-width: 32px;
      max-width: 32px;
      text-align: center;
      padding: 4px 2px !important;
    }
    #tab-monitoring.mon-edit-mode .mon-cb-col {
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }
    #tab-monitoring.mon-edit-mode .mon-cb-col input[type=checkbox] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      accent-color: var(--accent-orange);
      pointer-events: none;
    }
    #tab-monitoring:not(.mon-edit-mode) #mon-action-bar { display: none; }
    #tab-monitoring:not(.mon-edit-mode) #mon-fab-wrap { display: none !important; }

    #mon-action-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    #mon-action-bar .btn {
      font-size: 13px;
      padding: 7px 14px;
      border-radius: 8px;
    }
    #mon-action-bar .mon-action-spacer { flex: 1; }

    #mon-fab-wrap {
      position: fixed;
      bottom: 70px;
      right: 16px;
      z-index: 300;
      display: flex;
      flex-direction: column-reverse;
      align-items: flex-end;
      gap: 8px;
    }
    #mon-fab-menu { display: none; flex-direction: column; gap: 6px; }
    #mon-fab-wrap.open #mon-fab-menu { display: flex; }
    .mon-fab-menu-item {
      padding: 10px 18px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .mon-fab-menu-item:first-child { background: var(--accent-orange); color: #0e1320; }
    .mon-fab-menu-item:nth-child(2) { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-soft); }
    .mon-fab-menu-item-danger { background: rgba(251, 78, 78, 0.14) !important; color: var(--accent-red) !important; border: 1px solid rgba(251, 78, 78, 0.4) !important; }
    .mon-fab-menu-item:hover { filter: brightness(1.1); }
    #mon-fab-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--accent-orange);
      color: #0e1320;
      border: none;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #tab-monitoring tr.mon-search-target {
      outline: 2px solid rgba(13, 230, 112, 0.55);
      outline-offset: -1px;
      animation: monSearchPulse 1.8s ease-out;
    }
    @keyframes monSearchPulse {
      0%   { background-color: rgba(243, 167, 105, 0.25); }
      100% { background-color: transparent; }
    }

    /* Mobile: hide action bar, show FAB */
    @media (pointer: coarse), (max-width: 768px) {
      #tab-monitoring.mon-edit-mode #mon-action-bar { display: none !important; }
      #tab-monitoring.mon-edit-mode #mon-fab-wrap { display: flex !important; }
      #mon-toolbar { gap: 6px; }
      #mon-toolbar .mon-tb-btn span.mon-tb-label { display: none; }
    }
    /* Desktop: show action bar, hide FAB */
    @media (min-width: 769px) and (pointer: fine) {
      #tab-monitoring.mon-edit-mode #mon-action-bar { display: flex; }
      #tab-monitoring.mon-edit-mode #mon-fab-wrap { display: none !important; }
    }

    /* Стили для вкладок */
    .tab-navigation {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--bg-elev);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      justify-content: center;
      padding: 0;
      z-index: 1000;
    }
    
    .tab-button {
      background: none;
      border: none;
      color: #ccc;
      padding: 12px 20px;
      cursor: pointer;
      font-size: 0.9em;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 80px;
      border-top: 3px solid transparent;
    }
    
    .tab-button:hover {
      background: rgba(13, 230, 112, 0.08);
      color: var(--text-main);
    }
    
    .tab-button.active {
      background: var(--bg-primary);
      color: var(--accent-tab-active);
      border-top-color: var(--accent-tab-active);
    }
    .stat-icon-seg-mid, .stat-icon-seg-sm { fill: currentColor; }
    .tab-button.active .stat-icon-seg-mid { fill: #4CAF50; }
    .tab-button.active .stat-icon-seg-sm  { fill: #F44336; }
    .monitor-icon-line { fill: currentColor; }
    .tab-button[data-tab="monitoring"].active .monitor-icon-line { fill: #80dbfe; }
    
    .tab-button i, .tab-button svg {
      font-size: 1.2em;
    }
    
    .tab-content {
      display: none;
      padding-bottom: 80px; /* Отступ для навигации снизу */
    }
    
    .tab-content.active {
      display: block;
    }
    
    /* Стили для страницы управления */
    .management-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    /* Убираем padding у контейнера на мобильных */
    @media (max-width: 768px) {
      .management-container {
        padding: 0 !important;
      }
    }
    
    .management-section {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      padding: 22px 24px;
      margin-bottom: 20px;
      box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.45);
    }
    
    .management-section h3 {
      margin-top: 0;
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-main);
      padding-bottom: 12px;
      margin-bottom: 4px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .form-group label {
      color: var(--text-mute);
      font-size: 0.9em;
      font-family: var(--font-ui);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    
    .form-group input, .form-group select {
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      color: var(--text-main);
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.9em;
    }
    
    .form-group input:focus, .form-group select:focus {
      outline: none;
      border-color: var(--accent-green);
      box-shadow: 0 0 0 2px rgba(13, 230, 112, 0.15);
    }
    
    .btn {
      background: var(--accent-orange);
      color: #0e1320;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 700;
      font-family: var(--font-ui);
      transition: background 0.2s, transform 0.1s;
    }
    
    .btn:hover {
      background: #2bf088;
    }
    
    .btn-secondary {
      background: transparent;
      color: var(--text-main);
      border: 1px solid var(--border-strong);
    }
    
    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--text-mute);
    }
    .thresholds-refresh-btn {
      background: transparent !important;
      border-color: transparent !important;
    }
    .thresholds-refresh-btn:hover {
      background: rgba(255,255,255,0.08) !important;
    }
    #save-all-thresholds-btn {
      position: fixed;
      bottom: 80px;
      right: 132px;
      z-index: 200;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      transition: opacity 0.2s, transform 0.2s;
      white-space: nowrap;
    }
    #save-all-thresholds-btn[style*="display:none"],
    #save-all-thresholds-btn[style*="display: none"] {
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
    }
    /* Адаптив шапки порогов и плавающей кнопки на мобильных */
    .thresholds-title { color:#aaa; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em; }
    .thresholds-inputs-col {
      grid-column: 3;
      display: flex;
      align-items: center;
      gap: 12px;
      padding-left: max(0px, calc(50% - 76px));
    }
    .thresholds-apply-col {
      grid-column: 4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 900px) {
      .thresholds-header-wrap {
        grid-template-columns: 1fr !important;
        row-gap: 10px;
      }
      .thresholds-title {
        grid-column: 1 !important;
        padding-right: 40px;
      }
      .thresholds-inputs-col {
        grid-column: 1 !important;
        justify-content: flex-start;
        padding-left: 0 !important;
        flex-wrap: wrap;
      }
      .thresholds-apply-col {
        grid-column: 1 !important;
        justify-content: flex-start !important;
      }
      #save-all-thresholds-btn {
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        font-size: 0.88em;
        padding: 8px 12px;
      }
    }
    @media (max-width: 600px) {
      .thresholds-apply-col #bulk-thresholds-btn { width: 100%; }
    }
    
    .device-list {
      max-height: 200px;
      overflow-y: auto;
      overflow-x: hidden;
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      padding: 10px;
      background: var(--bg-input);
    }
    .manage-location-layout {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
    }
    .manage-location-top {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 16px 24px;
      align-items: center;
    }
    .manage-location-top-left {
      flex: 1;
      min-width: 200px;
    }
    .manage-location-top-right {
      display: flex;
      align-items: flex-start;
      max-width: 640px;
    }
    .manage-location-top-right .btn {
      padding: 6px 12px;
      font-size: 0.9em;
    }
    .manage-actions-row {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .manage-actions-left {
      flex: 1;
      display: flex;
      justify-content: flex-start;
    }
    .manage-actions-right {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    .manage-actions-spacer {
      flex: 1;
    }
    .add-device-form-group {
      width: fit-content;
    }
    .add-device-form-group label {
      text-align: center;
      margin: 0;
      visibility: hidden;
    }
    .manage-location-asics-wrap {
      flex: 1;
      min-height: 0;
    }
    .manage-location-asics-header {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 12px;
      align-items: center;
      margin-bottom: 8px;
      position: relative;
      min-height: 52px;
    }
    .manage-location-asics-header label {
      grid-column: 1 / -1;
      text-align: center;
      margin: 0;
      transition: opacity 0.25s ease;
    }
    .manage-location-search-wrap {
      grid-column: 1 / -1;
      padding-right: 34px;
    }
    .manage-location-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      color: var(--text-main);
      font-size: 13px;
      outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      font-family: var(--font-ui);
    }
    .manage-location-search-input::placeholder {
      color: var(--text-mute);
    }
    .manage-location-search-input:focus {
      border-color: var(--accent-green);
      box-shadow: 0 0 0 2px rgba(13, 230, 112, 0.2);
    }
    .manage-location-search-suggest {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 34px;
      background: var(--bg-elev);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      z-index: 15;
      max-height: 220px;
      overflow-y: auto;
      display: none;
    }
    .manage-location-search-suggest.open {
      display: block;
    }
    .manage-location-search-suggest-item {
      width: 100%;
      border: 0;
      background: transparent;
      color: var(--text-body);
      text-align: left;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
    }
    .manage-location-search-suggest-item:hover,
    .manage-location-search-suggest-item.active {
      background: rgba(13, 230, 112, 0.10);
      color: var(--text-main);
    }
    .manage-location-search-suggest-item .hint {
      color: var(--text-mute);
      font-size: 12px;
      white-space: nowrap;
    }
    .device-item.search-target {
      outline: 2px solid rgba(13, 230, 112, 0.55);
      outline-offset: 1px;
      background: rgba(13, 230, 112, 0.10);
      transition: background 0.2s ease;
    }
    .manage-location-asics-header .manage-location-select-all-wrap {
      grid-column: 3;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(calc(-50% - 6px));
      min-height: 52px;
      box-sizing: border-box;
    }
    .manage-location-asics-header .manage-location-select-all-wrap .manage-location-select-all-cb {
      position: absolute;
      top: 4px;
      right: 4px;
      margin: 0;
      cursor: pointer;
      transform: translate(calc(-50% - 4px), -1px);
    }
    .manage-location-select-all-cb { cursor: pointer; accent-color: #f3a769; }
    /* Ровно 3 ряда: 3×высота ряда + 2×row-gap(8px) + padding(10×2). Ряд ≈60px → 3×60+16+20=216px */
    .device-list-three-cols {
      display: flex;
      flex-direction: column;
      max-height: 216px;
      overflow-y: hidden;
      overflow-x: hidden;
    }
    #manage-location-devices-list {
      overflow: visible;
    }
    .manage-location-devices-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 8px;
      margin-right: -8px;
      scrollbar-gutter: stable;
    }
    .manage-location-list-header-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px 12px;
      flex-shrink: 0;
      align-items: center;
      margin-bottom: 8px;
      position: sticky;
      top: 0;
      background: transparent;
      z-index: 1;
      transition: opacity 0.25s ease;
    }
    .manage-location-list-header-row.header-scrolled {
      pointer-events: none;
    }
    .manage-location-list-header-row.header-scrolled .manage-location-select-all-wrap {
      pointer-events: auto;
    }
    .manage-location-list-header-row.header-scrolled .manage-location-search-wrap {
      pointer-events: auto;
    }
    .manage-location-list-header-row.header-scrolled label {
      opacity: 0;
      pointer-events: none;
    }
    .manage-location-devices-list-content {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: auto;
      gap: 8px 12px;
      min-height: 0;
      overflow-x: hidden;
    }
    /* Режим групп: контейнер — вертикальный стек, группы не накладываются */
    .manage-location-devices-list-content.has-location-groups {
      display: flex;
      flex-direction: column;
      gap: 4px;
      grid-template-columns: unset;
    }
    .manage-location-devices-list-content.has-location-groups .location-group {
      flex-shrink: 0;
    }
    .device-list-three-cols .device-item {
      min-width: 0;
      min-height: 52px;
      align-self: stretch;
    }
    .device-list-three-cols .location-group {
      min-height: 0;
    }
    .manage-location-devices-list-content .device-list-placeholder {
      grid-column: 1 / -1;
    }
    .manage-location-devices-list-content .location-group {
      grid-column: 1 / -1;
      margin-bottom: 2px;
    }
    .device-list-three-cols .device-list-placeholder {
      grid-column: 1 / -1;
    }
    .location-group {
      grid-column: 1 / -1;
      margin-bottom: 2px;
    }
    /* === Drag-and-drop: перетаскивание асиков между локациями === */
    .device-item[data-dnd-mac] {
      cursor: grab;
      -webkit-user-drag: none;
      user-drag: none;
    }
    .device-item[data-dnd-mac]:active {
      cursor: grabbing;
    }
    .device-item[data-dnd-mac] * {
      -webkit-user-drag: none;
      user-drag: none;
      pointer-events: none;
    }
    .device-item[data-dnd-mac] input[type="checkbox"] {
      pointer-events: auto;
    }
    .device-item.dnd-dragging {
      opacity: 0.35;
      pointer-events: none;
    }
    .device-item .dnd-handle {
      position: absolute;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      color: #555;
      font-size: 0.75em;
      line-height: 1;
      pointer-events: none;
      user-select: none;
    }
    .location-group.dnd-over > .location-group-header {
      color: var(--accent-orange);
      border-bottom-color: var(--accent-orange);
      background: rgba(13, 230, 112,0.07);
    }
    .location-group.dnd-over > .location-group-body {
      outline: 2px dashed rgba(13, 230, 112,0.5);
      outline-offset: -2px;
      background: rgba(13, 230, 112,0.04);
      border-radius: 4px;
    }
    /* === Monitoring DnD === */
    tr[data-mon-dnd-mac] { cursor: grab; }
    tr.mon-dnd-dragging { opacity: 0.35; pointer-events: none; }
    tr.location-header-compact.mon-dnd-over td {
      background: rgba(13, 230, 112,0.12) !important;
      box-shadow: inset 0 0 0 2px rgba(13, 230, 112,0.5);
    }
    tr.mon-dnd-insert-before td {
      box-shadow: inset 0 2px 0 0 var(--accent-orange) !important;
    }
    tr.mon-dnd-insert-after td {
      box-shadow: inset 0 -2px 0 0 var(--accent-orange) !important;
    }
    /* Ghost element при touch-drag */
    #dnd-ghost {
      position: fixed;
      pointer-events: none;
      z-index: 99999;
      opacity: 0.85;
      font-size: 0.82em;
      background: var(--bg-elev);
      border: 1px solid var(--accent-green);
      border-radius: 6px;
      padding: 4px 10px;
      color: var(--text-main);
      white-space: nowrap;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      transform: translate(-50%, -50%);
    }
    .location-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      cursor: pointer;
      color: var(--text-mute);
      font-size: 0.85em;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
      user-select: none;
    }
    .location-group-header:hover {
      color: var(--text-main);
    }
    .location-group-header .location-group-toggle {
      width: 16px;
      text-align: center;
      transition: transform 0.2s;
    }
    .location-group.collapsed .location-group-toggle {
      transform: rotate(-90deg);
    }
    .location-group-body {
      padding: 4px 0 4px 12px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 52px;
      gap: 8px 12px;
      overflow-x: hidden;
    }
    .location-group.collapsed .location-group-body {
      display: none;
    }
    .device-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 22px 4px 8px;
      font-size: 0.9em;
      cursor: pointer;
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .device-item:has(input[type="checkbox"]:checked) {
      border-color: var(--accent-green);
    }
    .device-item input[type="checkbox"] {
      position: absolute;
      top: 4px;
      right: 4px;
      margin: 0;
      pointer-events: none;
      transform: translate(calc(-50% - 4px), 3px);
    }
    .device-item > span {
      text-align: center;
      width: 100%;
      min-width: 0;
      white-space: normal;
      overflow-wrap: anywhere;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
      max-height: 2.4em;
    }
    
    .thresholds-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88em;
      table-layout: fixed;
    }
    .thresholds-table th {
      background: var(--bg-input);
      color: var(--text-mute);
      padding: 8px 10px;
      border-bottom: 1px solid var(--border-soft);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.82em;
      font-family: var(--font-ui);
    }
    .thresholds-table th.col-device,
    .thresholds-table td.col-device { text-align: left; }
    .thresholds-table th.col-mac,
    .thresholds-table td.col-mac { text-align: left; }
    .thresholds-table th.col-hash,
    .thresholds-table td.col-hash { text-align: center; }
    .thresholds-table th.col-ktemp,
    .thresholds-table td.col-ktemp { text-align: center; }
    .thresholds-table .mac-cell {
      color: #c8c8c8;
      font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
      font-size: 0.9em;
      letter-spacing: 0.03em;
    }
    .thresholds-table td {
      padding: 6px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      vertical-align: middle;
    }
    .thresholds-table tr:last-child td { border-bottom: none; }
    .thresholds-table tr:hover td { background: rgba(13, 230, 112,0.04); }
    .thresholds-table .thresh-input {
      width: 72px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      color: var(--text-main);
      padding: 4px 8px;
      border-radius: 6px;
      text-align: center;
      font-size: 0.95em;
      font-family: var(--font-ui);
    }
    .thresholds-table .thresh-input:focus { border-color: var(--accent-orange); outline: none; }
    .thresholds-table .thresh-input.changed { border-color: var(--accent-orange); background: rgba(13, 230, 112, 0.08); }
    .thresholds-table .thresh-input.invalid { border-color: #f44336; background: rgba(244,67,54,0.12); animation: thresh-shake 0.25s ease; }
    @keyframes thresh-shake {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-4px); }
      75%      { transform: translateX(4px); }
    }

    #cursor-tooltip {
      position: fixed;
      padding: 4px 8px;
      background: rgba(20, 26, 40, 0.94);
      color: var(--text-body);
      font-size: 0.75em;
      white-space: pre-line;
      border-radius: 6px;
      border: 1px solid var(--border-soft);
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
      pointer-events: none;
      z-index: 9999;
      display: none;
    }
    @media (hover: none), (pointer: coarse) {
      #cursor-tooltip { display: none !important; }
    }

    .bulk-threshold-field {
      position: relative;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bulk-threshold-field label {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      text-align: center;
      margin-bottom: 4px;
      pointer-events: none;
    }
    .bulk-threshold-input {
      width: 70px;
      height: 32px;
      padding: 0 12px;
      box-sizing: border-box;
      text-align: center;
      font-size: 0.82em;
      font-family: var(--font-ui);
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      color: var(--text-main);
      border-radius: 6px;
    }
    .bulk-threshold-input::placeholder { color: var(--text-mute); }

    #session-expired-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.72);
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: session-fade-in 0.3s ease;
    }
    @keyframes session-fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    #session-expired-box {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      padding: 36px 40px;
      max-width: 360px;
      width: 90%;
      text-align: center;
      box-shadow: 0 24px 64px rgba(0,0,0,0.55);
      animation: session-slide-up 0.3s ease;
    }
    @keyframes session-slide-up {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    #session-expired-icon {
      font-size: 2.8em;
      color: var(--accent-orange);
      margin-bottom: 16px;
    }
    #session-expired-box h3 {
      margin: 0 0 12px 0;
      color: var(--text-main);
      font-family: var(--font-display);
      font-size: 1.2em;
    }
    #session-expired-box p {
      color: var(--text-mute);
      font-size: 0.9em;
      line-height: 1.6;
      margin: 0 0 24px 0;
    }
    #session-expired-box p b { color: var(--accent-orange); }
    #session-expired-box button {
      background: var(--accent-orange);
      border: none;
      color: #0e1320;
      font-weight: 700;
      font-size: 0.95em;
      padding: 10px 32px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }
    #session-expired-box button:hover { background: #2bf088; color: #0e1320; }

    #thresh-range-toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: var(--bg-elev);
      border: 1px solid rgba(244, 67, 54, 0.55);
      color: #ffb8b8;
      font-size: 0.82em;
      padding: 7px 16px;
      border-radius: 8px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.18s, transform 0.18s;
      z-index: 9999;
      white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    }
    #thresh-range-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .message {
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 0.9em;
    }
    
    .message.success {
      background: rgba(76, 175, 80, 0.2);
      border: 1px solid #4CAF50;
      color: #4CAF50;
    }
    
    .message.error {
      background: rgba(244, 67, 54, 0.2);
      border: 1px solid #F44336;
      color: #F44336;
    }
    
    .message.warning {
      background: rgba(255, 152, 0, 0.2);
      border: 1px solid #FF9800;
      color: #FF9800;
    }
    
    /* Адаптивность для мобильных */
    /* Стили для статистики */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 20px;
    }

    @media (max-width: 900px) {
      .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
    }

    @media (max-width: 600px) {
      .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
      }
    }
    
    .stat-card {
      background: var(--bg-elev);
      border-radius: 14px;
      padding: 16px 18px;
      text-align: left;
      border: 1px solid rgba(255, 255, 255, 0.04);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 88px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }
    
    .stat-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .stat-card::before {
      content: none;
      display: none !important;
    }
    
    .stat-card.online::before,
    .stat-card.offline::before,
    .stat-card.tuning::before,
    .stat-card.error::before,
    .stat-card.hash::before,
    .stat-card.power::before,
    .stat-card.locations::before { display: none !important; content: none !important; }
    
    .stat-icon {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6em;
      color: var(--accent-orange);
      background: rgba(13, 230, 112, 0.12);
    }
    
    .stat-card.online .stat-icon { color: #4CAF50; background: rgba(76, 175, 80, 0.12); }
    .stat-card.offline .stat-icon { color: #F44336; background: rgba(244, 67, 54, 0.12); }
    .stat-card.tuning .stat-icon { color: #2196F3; background: rgba(33, 150, 243, 0.12); }
    .stat-card.error .stat-icon { color: #FF5722; background: rgba(255, 87, 34, 0.12); }
    .stat-card.hash .stat-icon { color: #9C27B0; background: rgba(156, 39, 176, 0.12); }
    .stat-card.power .stat-icon { color: #FF9800; background: rgba(255, 152, 0, 0.12); }
    .stat-card.locations .stat-icon { color: #607D8B; background: rgba(96, 125, 139, 0.12); }

    .stat-content {
      flex: 1 1 auto;
    }
    
    .stat-value {
      font-size: 1.8em;
      font-weight: bold;
      font-family: var(--font-ui);
      color: var(--text-main);
      margin-bottom: 5px;
    }
    
    .stat-label {
      color: var(--text-mute);
      font-family: var(--font-ui);
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.45px;
    }

    @media (min-width: 1200px) {
      .stat-value { font-size: 2.1em; }
    }

    @media (max-width: 600px) {
      .stat-card {
        padding: 14px 16px;
        min-height: 76px;
        gap: 12px;
      }
      .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.4em;
      }
      .stat-value { font-size: 1.6em; }
    }

    /* Summary card that elegantly combines device counters with performance */
    .stat-card.summary {
      display: block;
      padding: 18px 20px;
      min-height: unset;
    }

    .summary-performance { display: none; }

    .perf-label {
      color: var(--text-mute);
      font-family: var(--font-ui);
      font-size: 0.85rem;
      letter-spacing: 0.35px;
      text-transform: uppercase;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
    }

    .perf-label i.fa-bolt { color: #9C27B0; }
    .perf-label i.fa-plug { color: #FF9800; }

    .perf-value {
      font-size: 2.2em;
      font-weight: 700;
      font-family: var(--font-ui);
      color: var(--text-main);
      line-height: 1.1;
    }

    /* SHA-256/Scrypt rows inside tiles */
    .duo-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0;
      line-height: 24px; /* fixed for consistent vertical rhythm */
    }
    .duo-label { color: var(--text-mute); font-size: 12px; line-height: 24px; font-family: var(--font-ui); }
    .duo-value { color: var(--text-main); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 20px !important; line-height: 24px; font-family: var(--font-ui); }
    
    /* Цветовая подсветка для ошибок и автотюнинга */
    .duo-value.error-highlight {
      color: #ff4444 !important;
    }
    
    .duo-value.tuning-highlight {
      color: #ffaa00 !important;
    }

    .summary-divider { display: none; }

    .summary-devices {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 16px;
      align-content: start;
    }
    /* Hide large totals inside device tiles; show only SHA-256/Scrypt rows */
    .summary-devices .device-value { display: none !important; }
    .summary-devices .device-item.perf .device-value { display: block !important; }

    /* Metric cards (hashrate/power) */
    .summary-devices .device-item.metric {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 12px;
      padding: 16px 16px 12px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }
    .summary-devices .device-item.metric .device-label {
      font-size: 0.9em;
      color: var(--text-mute);
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      min-height: unset;
    }
    .summary-devices .device-item.metric .duo-row .duo-value { font-size: 20px !important; }
    .summary-devices .device-item.metric .duo-row .duo-label {
      color: var(--text-mute);
    }

    @media (max-width: 600px) {
      .summary-devices { grid-template-columns: 1fr; gap: 12px; }
      .duo-row { line-height: 22px; }
      .duo-label { font-size: 11px; line-height: 22px; }
      .summary-devices .device-item.metric .duo-row .duo-value { font-size: 18px !important; }
      .summary-devices .duo-row .duo-value { font-size: 18px !important; }
      .summary-devices .device-item:not(.metric) .duo-row .duo-value { font-size: 18px !important; }
    }

    .summary-devices .device-item {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 12px;
      padding: 16px 16px 12px;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    }

    .summary-devices .device-item::before {
      content: none !important;
      display: none !important;
    }

    .summary-devices .device-item.total::before,
    .summary-devices .device-item.online::before,
    .summary-devices .device-item.offline::before,
    .summary-devices .device-item.tuning::before,
    .summary-devices .device-item.error::before { display: none !important; content: none !important; }

    .summary-devices .device-label {
      color: var(--text-mute);
      font-size: 0.85em;
      text-transform: none;
      letter-spacing: 0.4px;
      margin-bottom: 6px;
      line-height: 1.2;
      min-height: calc(1.2em * 2);
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* Iconized labels on карточках статистики */
    .summary-devices .device-label i { margin-right: 6px; opacity: 0.9; }

    .summary-devices .device-value {
      color: var(--text-main);
      font-size: 1.6em;
      font-weight: 700;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      font-family: var(--font-ui);
    }

    @media (max-width: 1200px) {
      .stat-card.summary {
        grid-template-columns: 1fr;
      }
      .summary-divider { display: none; }
      .summary-performance { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
      .summary-devices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    }

    @media (max-width: 600px) {
      .perf-value { font-size: 1.9em; }
      .summary-performance { grid-template-columns: 1fr; }
      .summary-devices { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
      .summary-devices .device-value { font-size: 1.4em; }
    }

    /* Панели под графиками на вкладке «Статистика» */
    .stats-chart-panel {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      padding: 18px;
      margin-top: 12px;
      box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.45);
    }
    .stats-chart-panel .chart-wrap {
      background: var(--bg-input);
      border-color: rgba(255, 255, 255, 0.05);
    }
    /* Заголовок панели графика («SHA-256», «Scrypt»). Класс с явным
     * !important на border-bottom, чтобы перебить общее правило
     * .management-section h3 — у нас несколько подзаголовков внутри одной
     * секции, общая линия снизу делила бы их странно. */
    .stats-chart-panel__title {
      margin: 0 0 14px;
      padding: 0 !important;
      border-bottom: none !important;
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: 0.02em;
    }

    /* Responsive chart container — дефолт, перебивается в media-запросах ниже */
    .chart-wrapper {
      height: 400px;
      position: relative;
    }

    /* ───────── Вкладка «Статистика»: единый адаптивный layout ─────────
     *
     * Цель: вся вкладка (сводный бар + графики SHA-256 + Scrypt) должна
     * помещаться на одной странице без вертикального скролла — и на десктопе,
     * и на мобильном.
     *
     * Реализация:
     *   - Десктоп (>=769px): графики идут БОК О БОК (flex-row), занимая
     *     равные доли. Если показан только SHA-256 (Scrypt скрыт через
     *     display:none) — он растягивается на всю ширину сам, без хаков.
     *     Высота графика — clamp(260px, 42vh, 480px), оставляя место под
     *     header сверху и footer-навигацию снизу.
     *   - Мобилка (<=768px): графики стекаются в столбец, компактные —
     *     clamp(180px, 28vh, 260px) каждый. Бар тоже подсокращён. */

    /* Все блоки вкладки выравниваются по одной ширине */
    @media (min-width: 769px) {
      #tab-statistics .management-section {
        width: min(1600px, calc(100vw - clamp(32px, 7vw, 220px)));
        margin-left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
      }
      /* Бар компактнее на десктопе: меньше вертикальный padding, чтобы
       * оставить графикам больше воздуха в пределах viewport. */
      #tab-statistics .management-section:nth-child(1) {
        padding: 14px 24px;
      }
      /* Графики бок о бок */
      #tab-statistics .management-section:nth-child(2) {
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: stretch;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        /* margin-top даём вместо padding на родителе — чтобы дочерние
         * stats-chart-panel сохраняли свои фоны/рамки. */
        margin-top: 16px;
      }
      #tab-statistics .management-section:nth-child(2) .stats-chart-panel {
        flex: 1 1 0;
        margin-top: 0;
        min-width: 0;            /* критично для flex с canvas — без этого
                                    canvas раздувает родителя */
        display: flex;
        flex-direction: column;
      }
      #tab-statistics .management-section:nth-child(2) .stats-chart-panel .chart-wrapper {
        flex: 1 1 auto;
        height: clamp(260px, 42vh, 480px);
      }
    }

    /* Mobile: графики вертикально, компактнее */
    @media (max-width: 768px) {
      #tab-statistics .management-section:nth-child(2) {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      #tab-statistics .management-section:nth-child(2) .chart-wrapper {
        height: clamp(180px, 28vh, 260px);
      }
    }

    @media (max-width: 900px) {
      .chart-wrapper { height: 300px; }
    }

    @media (max-width: 600px) {
      .chart-wrapper { height: 220px; }
    }

    /* Показ/скрытие таблиц в зависимости от устройства */
    .desktop-table {
      display: block;
    }
    
    .mobile-table {
      display: none;
    }

    .metric-name {
      text-align: left !important;
      font-weight: 600;
      font-family: var(--font-ui);
      color: var(--text-mute);
      background: var(--bg-input);
    }

    .algorithm-name {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--text-main);
      text-align: left !important;
      font-size: 1.02em;
    }

    /* Адаптивность для мобильных */
    @media (max-width: 768px) {
      .desktop-table {
        display: none;
      }
      
      .mobile-table {
        display: block;
        width: 100% !important;
      }

      /* Секция с таблицей - прозрачная, равные отступы */
      #tab-statistics .management-section:nth-child(1) {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 20px !important;
        margin: 0 !important;
      }
      
      /* Мобильная таблица точно по центру */
      #tab-statistics .stats-table-container.mobile-table {
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        display: flex !important;
        justify-content: center !important;
      }
      
      #tab-statistics .mobile-table .stats-table {
        width: auto !important;
        margin: 0 !important;
      }
      #tab-statistics .stats-table th,
      #tab-statistics .stats-table td {
        border-right: none !important;
        border-bottom: none !important;
      }
      /* Обычные отступы у всех ячеек */
      #tab-statistics .mobile-table .stats-table th,
      #tab-statistics .mobile-table .stats-table td {
        padding: 12px 8px !important;
      }

      /* Переупорядочиваем элементы только на мобильных для страницы статистики */
      #tab-statistics .management-container {
        display: flex;
        flex-direction: column;
      }

      /* Блок с таблицами (первый в мобильной версии) */
      #tab-statistics .management-section:nth-child(1) {
        order: 1;
      }

      /* Блок с графиком SHA-256 (второй) */
      #tab-statistics .management-section:nth-child(2) {
        order: 2;
      }

      /* Блок с графиком Scrypt (третий) */
      #tab-statistics .management-section:nth-child(3) {
        order: 3;
      }

      .stats-table th,
      .stats-table td {
        padding: 12px 8px;
        font-size: 13px;
      }
      
      .metric-name {
        min-width: 100px;
      }
    }

    @media (max-width: 480px) {
      .stats-table th,
      .stats-table td {
        padding: 10px 6px;
        font-size: 12px;
      }
    }
    
    .location-stat-card {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 15px;
      border-left: 4px solid var(--accent-orange);
      border-right: none;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    
    .location-stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .location-stat-name {
      font-size: 1.1em;
      font-weight: bold;
      color: var(--accent-orange);
    }
    
    .location-stat-summary {
      font-size: 0.9em;
      color: #ccc;
    }
    
    .location-stat-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 15px;
      margin-top: 10px;
    }
    
    .location-stat-item {
      text-align: center;
    }
    
    .location-stat-item .value {
      font-size: 1.2em;
      font-weight: bold;
      color: white;
    }
    
    .location-stat-item .label {
      font-size: 0.8em;
      color: #999;
      margin-top: 2px;
    }
    
    .location-stat-item.online .value { color: #4CAF50; }
    .location-stat-item.offline .value { color: #F44336; }
    .location-stat-item.hash .value { color: #9C27B0; }
    .location-stat-item.power .value { color: #FF9800; }
    
    /* Модальное окно */
    .modal {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.8);
    }
    
    .modal-content {
      background-color: var(--bg-elev);
      margin: 2% auto;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.06);
      width: 90%;
      max-width: 1200px;
      border-radius: 14px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    }
    
    .modal-header {
      background: var(--bg-input);
      padding: 15px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 14px 14px 0 0;
    }
    
    .modal-header h3 {
      margin: 0;
      font-family: var(--font-display);
      color: var(--text-main);
      font-size: 1.15rem;
    }
    
    .modal-close {
      color: var(--text-mute);
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.3s;
    }
    
    .modal-close:hover {
      color: var(--text-main);
    }
    
    .modal-body {
      padding: 20px;
    }

    .location-select-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .location-select-row select {
      max-width: 220px;
      min-width: 140px;
    }
    .btn-location-add {
      width: 40px;
      height: 40px;
      min-width: 40px;
      margin-left: 2px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-orange);
      border: 1px solid var(--accent-green);
      color: #0e1320;
    }
    .btn-location-add:hover {
      background: #2bf088;
      border-color: #2bf088;
      color: #0e1320;
    }
    .btn-location-delete {
      width: 40px;
      height: 41px;
      min-width: 40px;
      margin-left: 3px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(251, 78, 78, 0.12);
      border: 1px solid rgba(251, 78, 78, 0.4);
      color: var(--accent-red);
      border-radius: 8px;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .btn-location-delete:hover {
      background: rgba(251, 78, 78, 0.18);
      border-color: var(--accent-red);
      color: var(--accent-red);
    }
    .btn-location-delete i {
      pointer-events: none;
      font-size: 1em;
    }
    #add-location-quick-modal.modal-open {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    /* Положение окна «Новая локация» задано пользователем — не менять */
    #add-location-quick-modal.modal-open .add-location-quick-modal-content {
      margin: 0;
      transform: translateY(calc(-18vh + 70%));
    }
    .add-location-quick-modal-content {
      max-width: 360px;
    }
    .add-location-quick-input-wrap {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 8px;
    }
    .add-location-quick-modal-content .add-location-quick-input-wrap input {
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      box-sizing: border-box;
    }
    .add-location-quick-plus-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      flex-shrink: 0;
      padding: 0;
      border: none;
      border-radius: 8px;
      background: var(--accent-orange);
      color: #0e1320;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 24px;
      font-weight: 900;
      transition: background 0.15s ease;
    }
    .add-location-quick-plus-btn:hover {
      background: #2bf088;
    }
    .add-location-quick-plus-btn i {
      pointer-events: none;
    }
    .add-location-quick-hint {
      margin: 0 0 12px 0;
      font-size: 12px;
      color: var(--text-mute);
    }
    .add-location-quick-modal-content #add-location-quick-msg {
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      overflow-y: auto;
      font-size: 13px;
      padding: 8px 10px;
      margin-top: 4px;
    }
    #add-to-location-pick-modal.modal-open,
    #remove-from-location-pick-modal.modal-open,
    #add-device-modal.modal-open {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    .add-to-location-pick-modal-content {
      max-width: 400px;
    }
    .add-to-location-pick-modal-content .location-pick-select-wrap {
      margin: 12px 0;
    }
    .add-to-location-pick-modal-content .location-pick-select-wrap select {
      width: 100%;
      padding: 10px 12px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      color: var(--text-main);
      font-size: 1em;
      box-sizing: border-box;
      font-family: var(--font-ui);
    }

    /* Мобильная версия модального окна */
    @media (max-width: 768px) {
      .modal-content {
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
        overflow-y: auto;
      }
      
      .modal-header {
        border-radius: 0;
        padding: 20px;
        position: sticky;
        top: 0;
        z-index: 1;
      }
      
      .modal-body {
        padding: 10px !important;
        overflow-x: hidden;
      }
      
      .tab-navigation {
        padding: 0 10px;
      }
      
      .tab-button {
        min-width: 60px;
        padding: 10px 15px;
        font-size: 0.8em;
      }
      
      .form-grid {
        grid-template-columns: 1fr;
      }
      
      .management-container {
        padding: 15px;
      }
    }
    
    /* Chip status bar styles */
    .chip-status-bar {
      width: 100%;
      height: 20px;
      background-color: var(--border-soft);
      border-radius: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      margin: 2px 0;
    }
    
    .chip-status-segment {
      height: 100%;
      transition: width 0.3s ease;
    }
    
    .chip-status-segment.gray {
      background-color: #888;
    }
    
    .chip-status-segment.yellow {
      background-color: #FF9800;
    }
    
    .chip-status-segment.red {
      background-color: #F44336;
    }
    
    .chip-status-text {
      font-size: 0.8em;
      color: #ccc;
      margin-top: 2px;
      text-align: center;
    }
    
    .chip-status-text .chip-gray {
      color: #888;
    }
    
    .chip-status-text .chip-yellow {
      color: #FF9800;
    }
    
    .chip-status-text .chip-red {
      color: #F44336;
    }
    
    /* Chart improvements for mobile */
    @media (max-width: 768px) {
      .chart-container {
        width: 100% !important;
        margin: 10px 0;
        padding: 10px !important;
        flex-direction: column;
        gap: 15px !important;
      }
      
      .chart-wrap {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        margin: 0 !important;
        padding: 8px !important;
        height: 250px !important;
        aspect-ratio: auto !important;
      }
      
      .chart-wrap canvas {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
      }
      
      .time-range-selector {
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        margin: 15px 0;
      }
      
      .time-btn {
        min-width: 50px;
        font-size: 0.9em;
        padding: 8px 12px;
      }
      
      /* Улучшения для модального окна на мобильных */
      .modal-body {
        padding: 10px !important;
        overflow-x: hidden;
      }
      
      /* Адаптация таблицы плат для мобильных */
      .modal-body table {
        font-size: 0.75em;
        overflow-x: hidden !important;
        display: table !important;
        white-space: normal !important;
        width: 100% !important;
      }
      
      .modal-body table thead,
      .modal-body table tbody {
        display: table-header-group;
        width: 100%;
      }
      
      .modal-body table tbody {
        display: table-row-group;
      }
      
      .modal-body table th,
      .modal-body table td {
        padding: 8px 4px;
        min-width: auto !important;
        word-wrap: break-word;
        white-space: normal !important;
        vertical-align: top;
      }
      
      /* Делаем таблицу более компактной для мобильных */
      .modal-body table th:nth-child(1),
      .modal-body table td:nth-child(1) { width: 8%; } /* Плата */
      .modal-body table th:nth-child(2),
      .modal-body table td:nth-child(2) { width: 15%; } /* Хэшрейт */
      .modal-body table th:nth-child(3),
      .modal-body table td:nth-child(3) { width: 20%; } /* Температуры */
      .modal-body table th:nth-child(4),
      .modal-body table td:nth-child(4) { width: 12%; } /* Вольтаж */
      .modal-body table th:nth-child(5),
      .modal-body table td:nth-child(5) { width: 12%; } /* Частота */
      .modal-body table th:nth-child(6),
      .modal-body table td:nth-child(6) { width: 18%; } /* Статус чипов */
      .modal-body table th:nth-child(7),
      .modal-body table td:nth-child(7) { width: 15%; } /* Статус */
      
      /* Плитки с показателями в мобильной версии */
      .device-summary {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
        overflow-x: visible;
        padding: 0 !important;
      }
      
      .device-summary > div {
        min-width: auto !important;
        width: 100% !important;
        flex: none !important;
        padding: 15px !important;
        box-sizing: border-box;
      }
      
      .device-summary .stat-icon {
        font-size: 2em !important;
        margin-bottom: 8px !important;
      }
      
      .device-summary .stat-value {
        font-size: 1.5em !important;
        margin-bottom: 4px !important;
      }
      
      .device-summary .stat-label {
        font-size: 0.8em !important;
      }
      
      /* Компактный заголовок модального окна */
      .modal-header {
        padding: 12px 15px !important;
      }
      
      .modal-header h3 {
        font-size: 1.1em !important;
        margin: 0 !important;
      }
      
      /* Компактный селектор времени */
      .time-range-selector {
        margin: 10px 0 !important;
        padding: 0 !important;
      }
      
      .time-btn {
        font-size: 0.8em !important;
        padding: 6px 10px !important;
        margin: 0 2px !important;
      }
      
      /* Заголовки секций */
      .details-header h3 {
        font-size: 1em !important;
        margin: 0 !important;
      }
      
      .details-header button {
        font-size: 0.8em !important;
        padding: 6px 12px !important;
      }
      
      .boards-info h4 {
        font-size: 1em !important;
        margin: 0 0 10px 0 !important;
      }
      
      /* Компактные chip status элементы на мобильных */
      .chip-status-bar {
        height: 16px !important;
        margin: 1px 0 !important;
      }
      
      .chip-status-text {
        font-size: 0.7em !important;
        margin-top: 1px !important;
      }
    }

    /* Убираем горизонтальный скролл за счёт box-sizing */
    .board-card-mobile,
    .device-summary > div,
    .chart-container,
    .modal-content {
      box-sizing: border-box !important;
    }

    .summary-devices .device-item .device-label {
      margin-bottom: 8px;
      min-height: 24px;
      line-height: 24px;
      line-clamp: initial;
      -webkit-line-clamp: initial;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: 8px;
    }
    .summary-devices .device-item.metric .device-label { text-transform: none; }

    .stats-table {
      width: 100%;
      border-collapse: collapse;
      font-variant-numeric: tabular-nums;
      table-layout: fixed;
    }

    /* Выравнивание внутренних отступов по краям рамки */
    .stats-table th:first-child,
    .stats-table td:first-child { padding-left: 12px !important; }

    .stats-table th:last-child,
    .stats-table td:last-child { padding-right: 12px !important; }

    .stats-table-container {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 20px;
      padding: 0 12px;
      box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.45);
    }

    @media (max-width: 768px) {
      .desktop-table {
        display: none;
      }
      
      .mobile-table {
        display: block;
        width: 100% !important;
      }

      /* Растянуть мобильную таблицу на всю ширину экрана, обнулив поля контейнера */
      #tab-statistics .stats-table-container.mobile-table {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
      }

      #tab-statistics .stats-table th,
      #tab-statistics .stats-table td {
        border-right: none !important;
        border-bottom: none !important;
      }
      /* Убрать внутренние отступы у крайних колонок на мобильной таблице */
      #tab-statistics .mobile-table .stats-table th:first-child,
      #tab-statistics .mobile-table .stats-table td:first-child { padding-left: 0 !important; }
      #tab-statistics .mobile-table .stats-table th:last-child,
      #tab-statistics .mobile-table .stats-table td:last-child { padding-right: 0 !important; }

      /* Переупорядочиваем элементы только на мобильных для страницы статистики */
      #tab-statistics .management-container {
        display: flex;
        flex-direction: column;
      }

      /* Блок с таблицами (первый в мобильной версии) */
      #tab-statistics .management-section:nth-child(1) {
        order: 1;
      }

      /* Блок с графиком SHA-256 (второй) */
      #tab-statistics .management-section:nth-child(2) {
        order: 2;
      }

      /* Блок с графиком Scrypt (третий) */
      #tab-statistics .management-section:nth-child(3) {
        order: 3;
      }

      .stats-table th,
      .stats-table td {
        padding: 12px 8px;
        font-size: 13px;
      }
      
      .metric-name {
        min-width: 100px;
      }
    }

    /* Финальные mobile-overrides: выравниваем UX ближе к desktop без конфликтов */
    @media (max-width: 768px) {
      body { overflow-x: hidden; }
      header { padding: 10px 12px; gap: 8px; }
      header h2 {
        margin: 0;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Универсально для мобильных: шапка не должна раздувать ширину */
      header h2 { display: none !important; }
      #telegram-login-container.auth-buttons {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        gap: 6px;
      }
      #auth-user-info {
        min-width: 0 !important;
        max-width: 44vw;
        overflow: hidden;
      }
      #auth-user-info > span {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .auth-buttons { gap: 6px; }

      /* На мобильных секции должны сохранять внутренний отступ */
      #tab-monitoring .management-container,
      #tab-automation .management-container,
      #tab-automation .management-container {
        padding: 12px !important;
      }
      #tab-monitoring .management-section,
      #tab-automation .management-section,
      #tab-automation .management-section {
        padding: 14px;
        margin-bottom: 14px;
        border-radius: 10px;
      }
      #tab-monitoring .management-section h3,
      #tab-automation .management-section h3,
      #tab-automation .management-section h3 {
        font-size: 1rem;
        margin-bottom: 10px;
      }

      .tab-content { padding-bottom: 112px; }
      #tab-automation.tab-content { padding-bottom: 180px; }
      .tab-navigation {
        left: 8px;
        right: 8px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        width: auto;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        padding: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0,0,0,0.35);
      }
      .tab-button {
        width: 100%;
        flex: none;
        max-width: none;
        min-width: 0;
        min-height: 62px;
        padding: 8px 4px 10px;
        gap: 3px;
      }
      .tab-navigation .tab-button { display: flex !important; }
      .tab-button i, .tab-button svg { font-size: 1.25em; }
      .tab-button span {
        font-size: 0.86em;
        line-height: 1.1;
        white-space: nowrap;
      }

      /* Управление локациями: переводим верхний ряд в удобную колонку */
      .manage-location-top { gap: 12px; }
      .manage-location-top-left,
      .manage-location-top-right {
        width: 100%;
        min-width: 0;
        max-width: none;
      }
      #add-device-wrap { transform: none !important; }
      .location-select-row { flex-wrap: wrap; gap: 8px; }
      #manage-location-select { width: 100%; min-width: 0; }
      .manage-location-asics-header {
        grid-template-columns: 1fr !important;
        row-gap: 8px;
      }
      .manage-location-asics-header .manage-location-select-all-wrap {
        position: static;
        transform: none;
        justify-self: end;
      }
      .device-list { max-height: 50vh; }
      .manage-actions-row {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
      }
      .manage-actions-left {
        flex: 1 1 100%;
        order: 3;
      }
      .manage-actions-right {
        flex: 1 1 100%;
        order: 1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .manage-actions-spacer {
        display: none;
        order: 2;
      }
      /* На мобильной: три кнопки заменены одной плавающей (FAB) */
      #tab-automation .manage-actions-row {
        display: none !important;
      }
      #tab-automation .manage-fab-wrap {
        display: flex !important;
      }
      #delete-selected-from-management-btn,
      #add-to-location-btn,
      #remove-asics-from-location-btn {
        width: 100%;
        max-width: none !important;
        min-width: 0 !important;
        white-space: normal;
        line-height: 1.2;
        text-align: center;
        padding: 10px 10px;
      }

      /* Настройки: подписи hash/k_temp не наезжают на заголовок */
      #tab-settings .thresholds-header-wrap {
        align-items: start !important;
      }
      #tab-settings .thresholds-title {
        margin-bottom: 2px;
      }
      #tab-settings .thresholds-inputs-col {
        align-items: flex-start !important;
        gap: 10px !important;
      }
      #tab-settings .bulk-threshold-field {
        height: auto;
        align-items: flex-start;
      }
      #tab-settings .bulk-threshold-field label {
        position: static;
        display: block;
        margin: 0 0 4px 0;
        text-align: left;
        pointer-events: auto;
      }

      /* Кнопка сохранения порогов теперь в обычном flow карточки настроек,
         плавающее позиционирование больше не нужно — оставляем только размер. */
      #tab-settings #save-all-thresholds-btn {
        padding: 10px 12px;
        font-size: 0.9em;
      }
    }
    @media (max-width: 480px) {
      header h2 { font-size: 0.95rem; }
      .tab-button { min-width: 62px; padding: 8px 6px; }
      .tab-button span { font-size: 0.74em; line-height: 1.1; }
      #tab-settings .location-select-row select {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
      }
      #tab-settings .btn-location-add,
      #tab-settings .btn-location-delete {
        width: 36px;
        height: 36px;
        min-width: 36px;
      }
      .manage-actions-right {
        grid-template-columns: 1fr;
      }
      .thresholds-inputs-col {
        gap: 8px !important;
      }
      .bulk-threshold-input {
        width: 68px;
        height: 30px;
      }
      #bulk-thresholds-btn { font-size: 0.8em !important; padding: 8px 10px !important; }
    }
    @media (max-width: 390px) {
      .tab-button { min-width: 0; min-height: 60px; padding: 8px 2px 9px; }
      .tab-button i, .tab-button svg { font-size: 1.15em; }
      .tab-button span { display: block; font-size: 0.72em; line-height: 1.05; }
      #save-all-thresholds-btn {
        left: 10px;
        right: 10px;
        font-size: 0.86em;
      }
    }
    /* ── Бургер: показать всегда, admin controls и logout — только в меню ── */
    #burger-btn     { display: flex !important; }
    #admin-controls { display: none !important; }
    #logout-button  { display: none !important; }

    /* ── Бургер-кнопка и боковое меню ── */
    #burger-btn {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      background: transparent;
      border: 1px solid #555;
      border-radius: 6px;
      cursor: pointer;
      padding: 6px;
      flex-shrink: 0;
    }
    #burger-btn span {
      display: block;
      width: 18px;
      height: 2px;
      background: #ccc;
      border-radius: 2px;
      transition: background 0.2s;
    }
    #burger-btn:hover span { background: var(--accent-orange); }

    #burger-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 1100;
    }
    #burger-overlay.open { display: block; }

    #burger-menu {
      position: fixed;
      top: 0;
      right: -280px;
      width: 260px;
      height: 100dvh;
      background: var(--bg-elev);
      border-left: 1px solid rgba(255, 255, 255, 0.06);
      z-index: 1101;
      display: flex;
      flex-direction: column;
      transition: right 0.28s cubic-bezier(.4,0,.2,1);
      box-shadow: -4px 0 20px rgba(0,0,0,0.5);
    }
    #burger-menu.open { right: 0; }

    #burger-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 1em;
      font-weight: 700;
      font-family: var(--font-display);
      color: var(--text-main);
    }
    #burger-menu-header button {
      background: transparent;
      border: none;
      color: var(--text-mute);
      font-size: 1.1em;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 4px;
    }
    #burger-menu-header button:hover { color: var(--text-main); background: rgba(13, 230, 112, 0.1); }

    #burger-menu-body {
      flex: 1;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow-y: auto;
    }

    #burger-user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      /* Смещаем точку отсчёта: аватар(42) + gap(10) = 52px слева,
         тогда центр текста математически совпадает с центром панели */
      padding-left: 52px;
      font-size: 0.9em;
      color: var(--text-mute);
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    #burger-user-info::before { display: none; }
    #burger-user-info > span {
      display: flex !important;
      flex-direction: column;
      align-items: center !important;
      text-align: center;
    }
    #burger-user-info img {
      height: 42px !important;
      width: 42px !important;
      border-radius: 50% !important;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: 7px;
    }

    .burger-section-title {
      font-size: 0.78em;
      color: #888;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }
    .burger-admin-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .burger-admin-row input {
      flex: 1;
      padding: 7px 10px;
      background: var(--bg-input);
      border: 1px solid var(--border-soft);
      color: var(--text-main);
      border-radius: 8px;
      font-size: 0.9em;
      min-width: 0;
    }
    .burger-admin-row button {
      padding: 7px 10px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9em;
    }
    #burger-impersonate-btn { background: var(--accent-orange); color: #0e1320; }
    #burger-reset-btn       { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-soft); }
    .burger-btn-pair {
      display: flex;
      gap: 8px;
      align-items: center;
      /* сдвигает пару кнопок правее: gap-центр совпадает с центром аватара */
      margin-right: -4px;
    }

    .burger-logout-btn {
      display: flex !important;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      background: var(--bg-input);
      color: var(--text-main);
      border: 1px solid var(--border-soft);
      text-decoration: none;
      border-radius: 8px;
      font-size: 0.95em;
      margin-top: auto;
      margin-bottom: 57px;
      transition: background 0.15s, border-color 0.15s;
    }
    .burger-logout-btn:hover { background: rgba(251, 78, 78, 0.10); border-color: rgba(251, 78, 78, 0.4); color: var(--accent-red); }

    /* Плавающая кнопка действий на странице Управление (показывается только на мобильной) */
    .manage-fab-wrap {
      display: none;
      position: fixed;
      bottom: calc(85px + env(safe-area-inset-bottom));
      right: 44px;
      z-index: 10000;
      flex-direction: column;
      align-items: flex-end;
      gap: 0;
    }
    .manage-fab-menu {
      display: none;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 10px;
      padding: 6px;
      background: var(--bg-elev);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .manage-fab-wrap.open .manage-fab-menu {
      display: flex;
    }
    .manage-fab-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9em;
      color: var(--text-main);
      background: var(--bg-input);
      white-space: nowrap;
      text-align: left;
      min-width: 200px;
    }
    .manage-fab-menu-item:first-child { background: var(--accent-orange); color: #0e1320; border-color: transparent; }
    .manage-fab-menu-item:nth-child(2) { background: var(--bg-input); color: var(--text-main); border: 1px solid var(--border-soft); }
    .manage-fab-menu-item-danger { background: rgba(251, 78, 78, 0.14) !important; color: var(--accent-red) !important; border: 1px solid rgba(251, 78, 78, 0.4) !important; }
    .manage-fab-menu-item:hover { filter: brightness(1.1); }
    .manage-fab-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: none;
      background: var(--accent-orange);
      color: #0e1320;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25em;
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .manage-fab-btn:hover { filter: brightness(1.08); }
    .manage-fab-btn:active { transform: scale(0.96); }

    /* Профиль для экранов ~412px (2700x1220): улучшение читаемости */
    @media (max-width: 430px) {
      /* Шапка: убрать горизонтальное переполнение из-за auth-блока и кнопки "Выйти" */
      header {
        padding: 8px !important;
        gap: 6px;
      }
      header h2 { display: none !important; }
      #telegram-login-container.auth-buttons {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        gap: 6px;
      }
      #auth-user-info {
        min-width: 0 !important;
        max-width: 42vw;
        overflow: hidden;
      }
      #auth-user-info > span {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #admin-controls {
        margin-right: 0 !important;
        gap: 4px !important;
        flex-shrink: 0;
      }
      #impersonate-user-id {
        width: 72px !important;
        min-width: 0 !important;
        padding: 4px 6px !important;
      }
      #impersonate-btn,
      #reset-impersonation-btn {
        padding: 4px 6px !important;
      }
      #logout-button {
        padding: 4px 6px !important;
        font-size: 0.74em !important;
        line-height: 1.1;
        margin-left: 2px;
        flex-shrink: 0;
      }

      /* Убираем визуальный "правый отступ" у основных контейнеров */
      #tab-statistics .management-container,
      #tab-monitoring .management-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }
      #tab-monitoring .management-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Мониторинг: горизонтальный скролл + sticky-столбцы */
      #tab-monitoring #table-container {
        padding: 0 10px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #tab-monitoring #device-table {
        font-size: 12px;
      }
      #tab-monitoring #device-table th,
      #tab-monitoring #device-table td {
        padding: 7px 8px;
      }

      /* Управление: карточки асиков в 2 колонки (вместо слишком узких 3) */
      .manage-location-devices-list-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .location-group-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      /* Кнопки действий: на мобильной заменены на FAB, ряд скрыт */
      #tab-automation .manage-actions-row {
        display: none !important;
      }
      #tab-automation .manage-actions-left {
        width: 100%;
        order: 3;
      }
      #tab-automation .manage-actions-right {
        width: 100%;
        order: 1;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      #tab-automation .manage-actions-spacer {
        display: none !important;
        order: 2;
      }
      #tab-automation #delete-selected-from-management-btn,
      #tab-automation #add-to-location-btn,
      #tab-automation #remove-asics-from-location-btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }

      /* Настройки: на мобильном подписи полей не должны наезжать на заголовок */
      #tab-settings .thresholds-header-wrap {
        align-items: start !important;
      }
      #tab-settings .thresholds-title {
        margin-bottom: 2px;
      }
      #tab-settings .thresholds-inputs-col {
        align-items: flex-start !important;
        gap: 10px !important;
      }
      #tab-settings .bulk-threshold-field {
        height: auto;
        align-items: flex-start;
      }
      #tab-settings .bulk-threshold-field label {
        position: static;
        display: block;
        margin: 0 0 4px 0;
        text-align: left;
        pointer-events: auto;
      }

      /* Настройки: таблица порогов не ломает текст, прокручивается горизонтально */
      #thresholds-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .thresholds-table {
        min-width: 620px;
        table-layout: fixed;
      }
      .thresholds-table td.col-device,
      .thresholds-table td.col-mac {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Плавающая кнопка сохранить чуть выше браузерных панелей */
      #save-all-thresholds-btn {
        bottom: calc(96px + env(safe-area-inset-bottom));
      }
    }
    /* Универсально для смартфонов, даже если браузер рендерит "desktop width" */
    @media (hover: none), (pointer: coarse) {
      body { overflow-x: hidden !important; }
      .tab-content { padding-bottom: 112px !important; }
      #tab-automation.tab-content { padding-bottom: 180px !important; }
      .tab-navigation {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        z-index: 12000 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0,0,0,0.35);
      }
      .tab-navigation .tab-button {
        display: flex !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 60px;
        padding: 8px 4px 10px;
        gap: 3px;
      }
      .tab-navigation .tab-button i,
      .tab-navigation .tab-button svg {
        font-size: 1.2em;
      }
      .tab-navigation .tab-button span {
        display: block !important;
        font-size: 0.78em;
        line-height: 1.08;
        white-space: nowrap;
      }

      /* Мониторинг: горизонтальный скролл + sticky-столбцы */
      #tab-monitoring #table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
      }
    }

    /* ── Управление: десктоп ── */
    @media (min-width: 769px) {
      #tab-automation.tab-content.active {
        display: block;
        box-sizing: border-box;
      }
    }

    /* ===================================================================
       Вкладка «Настройки» — карточки аккаунта и привязки Telegram.
       =================================================================== */
    #tab-settings {
      max-width: 760px;
      margin: 24px auto 96px;
      padding: 0 16px;
      box-sizing: border-box;
    }
    .settings-card {
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 14px;
      padding: 22px 24px;
      margin-bottom: 18px;
      box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.55);
    }
    .settings-card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 14px;
      font-family: var(--font-display);
      font-size: 1.18rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: 0.2px;
    }
    .settings-card-title i { color: var(--accent-green); width: 1.1em; text-align: center; }
    .settings-card-intro {
      margin: -4px 0 14px;
      color: var(--text-mute);
      font-family: var(--font-text);
      font-size: 0.93rem;
      line-height: 1.55;
    }
    .settings-rows { display: grid; gap: 8px; }
    .settings-row {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 12px;
      align-items: baseline;
      padding: 9px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .settings-row:last-child { border-bottom: 0; }
    .settings-row-label {
      color: var(--text-mute);
      font-family: var(--font-ui);
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }
    .settings-row-value { color: var(--text-main); font-family: var(--font-ui); font-size: 0.97rem; word-break: break-word; }
    .settings-row-value.is-muted { color: var(--text-mute); font-style: italic; }
    .settings-row-value.is-success { color: var(--accent-green); font-weight: 600; }
    .settings-row-value.is-warn { color: #ffa54a; font-weight: 600; }

    .settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .settings-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 8px;
      border: 1px solid var(--border-strong);
      background: transparent;
      color: var(--text-main);
      font-family: var(--font-ui);
      font-size: 0.92rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, color 0.15s ease;
    }
    .settings-btn:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--text-mute); }
    .settings-btn:active { transform: translateY(1px); }
    .settings-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
    .settings-btn.is-primary {
      background: var(--accent-green);
      border-color: var(--accent-green);
      color: #0e1320;
    }
    .settings-btn.is-primary:hover {
      background: #2bf088;
      border-color: #2bf088;
      color: #0e1320;
    }
    .settings-btn.is-danger { color: var(--accent-red); border-color: rgba(251, 78, 78, 0.4); background: transparent; }
    .settings-btn.is-danger:hover { background: rgba(251, 78, 78, 0.1); border-color: var(--accent-red); }

    .settings-code-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      padding: 14px 16px;
      background: var(--bg-input);
      border: 1px dashed var(--border-strong);
      border-radius: 10px;
      font-family: 'Courier New', ui-monospace, monospace;
      font-size: 1.4rem;
      letter-spacing: 2px;
      color: var(--accent-green);
      user-select: all;
    }
    .settings-code-expires { margin-top: 6px; color: var(--text-mute); font-family: var(--font-ui); font-size: 0.85rem; }

    .settings-msg {
      margin-top: 12px;
      padding: 11px 14px;
      border-radius: 8px;
      font-family: var(--font-ui);
      font-size: 0.9rem;
      display: none;
    }
    .settings-msg.is-success { background: rgba(13, 230, 112, 0.10); border: 1px solid rgba(13, 230, 112, 0.4); color: #b8f0d6; display: block; }
    .settings-msg.is-error { background: rgba(251, 78, 78, 0.12); border: 1px solid rgba(251, 78, 78, 0.4); color: #ffc4c4; display: block; }

    @media (max-width: 640px) {
      .settings-row { grid-template-columns: 1fr; gap: 4px; }
      .settings-row-label { font-size: 0.78rem; }
      .settings-code-wrap { font-size: 1.05rem; flex-direction: column; align-items: stretch; text-align: center; }
    }

    /* ===================================================================
       7miners.net theme overrides — финальные мелочи поверх всех
       исторических правил. Если нужно вернуть «старое» — закомментируйте
       этот блок. Дублируем ключевые селекторы с фоном/шрифтом, чтобы
       не зависеть от порядка определений в файле.
       =================================================================== */

    /* Скроллбары — в тон акцента 7miners */
    * { scrollbar-color: rgba(13, 230, 112, 0.18) transparent; }
    ::-webkit-scrollbar-thumb        { background: rgba(13, 230, 112, 0.18); }
    ::-webkit-scrollbar-thumb:hover  { background: rgba(13, 230, 112, 0.34); }

    /* Базовая типографика на всех страницах */
    body, button, input, select, textarea {
      font-family: var(--font-text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    button, .btn, .time-btn, .tab-button, .settings-btn { font-family: var(--font-ui); }
    h1, h2, h3, h4, h5, h6, .management-title, .stats-table caption {
      font-family: var(--font-display);
      color: var(--text-main);
      font-weight: 700;
      letter-spacing: -0.1px;
    }

    /* Большие глобальные ссылки в акцент бренда (зелёный 7miners) */
    a:not(.tab-button):not(.btn):not(.settings-btn):not(.burger-logout-btn) {
      color: var(--accent-green);
      transition: color 0.15s ease;
    }
    a:not(.tab-button):not(.btn):not(.settings-btn):not(.burger-logout-btn):hover {
      color: #2bf088;
    }

    /* Чуть более явный селект акцент-цвета для checkbox/range */
    input[type="checkbox"], input[type="radio"], input[type="range"] {
      accent-color: var(--accent-green);
    }

    /* Заголовок страницы «Управление» (раньше был с #1e1e1e — невидим) */
    .management-title {
      color: var(--text-main);
      text-align: center;
      margin: 0 0 24px;
      font-family: var(--font-display);
      font-size: 1.65rem;
      font-weight: 700;
      letter-spacing: -0.2px;
    }
    @media (max-width: 600px) {
      .management-title { font-size: 1.35rem; margin-bottom: 18px; }
    }

    /* ===================================================================
       Семантические utility-классы для строк таблицы мониторинга
       (используются вместо inline-style в renderRow → devices.js).
       Цвет должен сообщать СМЫСЛ, а не декорировать. Поэтому здесь только
       три семантические группы: dim (приглушённое), unit (единицы),
       warn/crit (статусные сигналы).
       =================================================================== */
    .row-dim          { color: var(--text-mute); }
    .row-unit         { color: var(--text-mute); font-weight: 500; }
    .row-unit-accent  { color: var(--accent-green); font-weight: 500; }
    .row-value        { color: var(--text-main); font-variant-numeric: tabular-nums; }
    .row-warn         { color: #FF9800; font-weight: 600; }
    .row-crit         { color: var(--accent-red); font-weight: 700; }
    .row-ok           { color: #4CAF50; font-weight: 600; }
    .row-offline      { color: var(--text-mute); }

    /* Состояние всей строки таблицы устройств (раньше — inline tr.style.bg) */
    #device-table tbody tr.dev-row-offline    { background-color: rgba(166, 166, 166, 0.045); color: var(--text-mute); }
    #device-table tbody tr.dev-row-failure    { background-color: rgba(251, 78, 78, 0.06); }
    #device-table tbody tr.dev-row-stopped    { background-color: rgba(255, 87, 34, 0.06); }
    #device-table tbody tr.dev-row-tuning     { background-color: rgba(255, 152, 0, 0.06); }
    #device-table tbody tr.dev-row-restarting { background-color: rgba(156, 39, 176, 0.06); }

    /* Цветовая подсветка статус-ячейки */
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.85em;
      font-weight: 600;
      line-height: 1.2;
    }
    .status-pill[data-state="mining"]      { color: #4CAF50; background: rgba(76, 175, 80, 0.10); }
    .status-pill[data-state="stopped"]     { color: #FF5722; background: rgba(255, 87, 34, 0.10); }
    .status-pill[data-state="failure"]     { color: var(--accent-red); background: rgba(251, 78, 78, 0.10); }
    .status-pill[data-state="auto-tuning"] { color: #FF9800; background: rgba(255, 152, 0, 0.10); }
    .status-pill[data-state="restarting"]  { color: #BA68C8; background: rgba(156, 39, 176, 0.10); }
    .status-pill[data-state="initializing"]{ color: #2196F3; background: rgba(33, 150, 243, 0.10); }
    .status-pill[data-state="shutting-down"]{ color: #FF5722; background: rgba(255, 87, 34, 0.10); }
    .status-pill[data-state="offline"]     { color: var(--text-mute); background: rgba(166, 166, 166, 0.10); }

    /* Имя устройства в строке: единый цвет, без «первая буква серая» декорации */
    .dev-name { color: var(--text-main); font-weight: 500; }
    .dev-name.is-offline { color: var(--text-mute); font-weight: 400; }

    /* Модель устройства: единый стиль */
    .dev-model {
      display: inline-block;
      text-align: left;
      min-width: 13em;
      color: var(--text-mute);
      font-variant-numeric: tabular-nums;
    }
    .dev-row-offline .dev-model { color: var(--text-mute); opacity: 0.6; }

    /* Иконка вентилятора: только OFF состояние требует приглушённого вида */
    .fan-off { color: var(--text-mute); }

    /* ===================================================================
       Toast (UIToast) и Confirm (UIConfirm) — единый feedback-API.
       Палитра берётся из ui-palette переменных.
       =================================================================== */

    #ui-toast-root {
      position: fixed;
      right: 20px;
      bottom: 90px;
      z-index: 100050;
      display: flex;
      flex-direction: column-reverse;
      gap: 10px;
      pointer-events: none;
      max-width: min(92vw, 420px);
    }
    @media (max-width: 600px) {
      #ui-toast-root { right: 12px; left: 12px; max-width: none; bottom: calc(85px + env(safe-area-inset-bottom)); }
    }
    .ui-toast {
      pointer-events: auto;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px 12px 14px;
      background: var(--bg-elev);
      color: var(--text-main);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-left: 3px solid var(--accent-green);
      border-radius: 10px;
      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
      font-family: var(--font-ui);
      font-size: 0.92rem;
      line-height: 1.4;
      transform: translateX(120%);
      opacity: 0;
      transition: transform 0.22s ease, opacity 0.22s ease;
    }
    .ui-toast.is-visible { transform: translateX(0); opacity: 1; }
    .ui-toast.is-hiding  { transform: translateX(120%); opacity: 0; }
    .ui-toast--success { border-left-color: var(--accent-green); }
    .ui-toast--error   { border-left-color: var(--accent-red); }
    .ui-toast--warn    { border-left-color: #FF9800; }
    .ui-toast--info    { border-left-color: var(--accent-blue); }
    .ui-toast__icon { font-size: 1.05em; margin-top: 2px; flex-shrink: 0; }
    .ui-toast--success .ui-toast__icon { color: var(--accent-green); }
    .ui-toast--error   .ui-toast__icon { color: var(--accent-red); }
    .ui-toast--warn    .ui-toast__icon { color: #FF9800; }
    .ui-toast--info    .ui-toast__icon { color: var(--accent-blue); }
    .ui-toast__msg     { flex: 1; word-break: break-word; }
    .ui-toast__close {
      background: transparent;
      border: 0;
      color: var(--text-mute);
      cursor: pointer;
      font-size: 1.3em;
      line-height: 1;
      padding: 0 4px;
      margin: -2px -4px 0 4px;
      transition: color 0.15s ease;
      border-radius: 4px;
    }
    .ui-toast__close:hover { color: var(--text-main); }
    .ui-toast__close:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

    /* Confirm modal */
    .ui-confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 100040;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.18s ease;
      padding: 20px;
    }
    .ui-confirm-overlay.is-visible { opacity: 1; }
    .ui-confirm-overlay.is-hiding  { opacity: 0; }
    .ui-confirm {
      max-width: 420px;
      width: 100%;
      background: var(--bg-elev);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      padding: 24px 26px 20px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
      transform: translateY(8px);
      transition: transform 0.18s ease;
      font-family: var(--font-ui);
    }
    .ui-confirm-overlay.is-visible .ui-confirm { transform: translateY(0); }
    .ui-confirm__title {
      margin: 0 0 12px;
      font-family: var(--font-display);
      color: var(--text-main);
      font-size: 1.15rem;
      font-weight: 700;
    }
    .ui-confirm__body {
      color: var(--text-body);
      font-size: 0.95rem;
      line-height: 1.55;
      margin-bottom: 22px;
    }
    .ui-confirm__actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .ui-confirm__cancel,
    .ui-confirm__ok {
      padding: 10px 18px;
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--font-ui);
      font-size: 0.92rem;
      font-weight: 600;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .ui-confirm__cancel {
      background: transparent;
      color: var(--text-main);
      border: 1px solid var(--border-strong);
    }
    .ui-confirm__cancel:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text-mute); }
    .ui-confirm__ok {
      background: var(--accent-green);
      color: #0e1320;
      border: 1px solid var(--accent-green);
    }
    .ui-confirm__ok:hover { background: #2bf088; border-color: #2bf088; }
    .ui-confirm__ok.is-danger {
      background: rgba(251, 78, 78, 0.14);
      color: var(--accent-red);
      border-color: rgba(251, 78, 78, 0.4);
    }
    .ui-confirm__ok.is-danger:hover {
      background: rgba(251, 78, 78, 0.22);
      border-color: var(--accent-red);
    }
    .ui-confirm__cancel:focus-visible,
    .ui-confirm__ok:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }

    body.ui-modal-open { overflow: hidden; }

    /* ===================================================================
       Унифицированная система кнопок.
       Базовый класс .btn + модификаторы:
         варианты: .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
         размеры : .btn-sm      | (default md)    | .btn-lg
         состояния: [disabled] | .is-loading
       Существующие места, где используется просто .btn без модификатора,
       получают вид «secondary» — это совместимо с текущей разметкой.
       =================================================================== */

    /* Базовый .btn уже определён выше (684:) с зелёным фоном — оставляем его
       как фактический primary. Здесь добавляем общие интерактивные состояния. */
    .btn:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }
    .btn:active { transform: translateY(1px); }
    .btn[disabled],
    .btn.is-disabled {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }
    /* Псевдоним: .btn-primary совпадает с базовым .btn — для будущей разметки */
    .btn-primary {
      background: var(--accent-green);
      color: #0e1320;
      border-color: var(--accent-green);
    }
    .btn-primary:hover { background: #2bf088; border-color: #2bf088; }

    .btn-secondary {
      background: var(--bg-input);
      color: var(--text-main);
      border-color: var(--border-soft);
    }
    .btn-secondary:hover { background: var(--bg-elev); border-color: var(--border-strong); }

    .btn-ghost {
      background: transparent;
      color: var(--text-main);
      border-color: transparent;
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.05); }

    .btn-danger {
      background: rgba(251, 78, 78, 0.14);
      color: var(--accent-red);
      border-color: rgba(251, 78, 78, 0.4);
    }
    .btn-danger:hover {
      background: rgba(251, 78, 78, 0.22);
      border-color: var(--accent-red);
    }

    .btn-sm { padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; }
    .btn-lg { padding: 12px 24px; font-size: 1rem; }

    /* Loading-state: показывает спиннер вместо текста, блокирует клик. */
    .btn.is-loading {
      pointer-events: none;
      position: relative;
      color: transparent !important;
    }
    .btn.is-loading::after {
      content: "";
      position: absolute;
      width: 16px; height: 16px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: btn-spin 0.7s linear infinite;
      color: inherit;
      opacity: 0.85;
    }
    .btn-primary.is-loading::after { border-color: #0e1320; border-top-color: transparent; }
    @keyframes btn-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .btn.is-loading::after { animation-duration: 2s; }
    }

    /* Screen-reader-only — не виден, но читается ассистивными технологиями */
    .sr-only {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* Empty state — единый стиль для «нет данных», «ошибка», «не найдено» */
    .empty-state {
      padding: 32px 22px;
      text-align: center;
      color: var(--text-mute);
      background: var(--bg-elev);
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: 14px;
      margin: 18px auto;
      max-width: 540px;
      font-family: var(--font-ui);
    }
    .empty-state i { font-size: 2.2em; opacity: 0.55; display: block; margin-bottom: 12px; color: var(--text-mute); }
    .empty-state__title { color: var(--text-main); font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
    .empty-state__hint  { font-size: 0.9rem; line-height: 1.5; margin: 0; color: var(--text-mute); }
    .empty-state--error { border-color: rgba(251, 78, 78, 0.4); color: var(--accent-red); }
    .empty-state--error i { color: var(--accent-red); }

    /* ===================================================================
       Skeleton-loaders. Используются вместо «голого» спиннера для
       показа структуры контента, который грузится. Это снижает
       perceived loading time (Apple HIG, Material Motion).
       =================================================================== */
    .sk {
      position: relative;
      overflow: hidden;
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.07) 35%,
        rgba(255,255,255,0.03) 100%
      );
      background-size: 200% 100%;
      animation: skshimmer 1.4s linear infinite;
      border-radius: 6px;
    }
    @media (prefers-reduced-motion: reduce) {
      .sk { animation-duration: 4s; }
    }
    @keyframes skshimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .sk-line { display: block; height: 12px; margin: 6px 0; }
    .sk-line.sk-line-sm { height: 10px; width: 50%; }
    .sk-line.sk-line-md { height: 14px; width: 75%; }
    .sk-line.sk-line-lg { height: 18px; width: 100%; }
    .sk-card {
      padding: 14px;
      background: var(--bg-elev);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      margin-bottom: 10px;
    }
    .sk-row {
      display: grid;
      grid-template-columns: 2fr repeat(8, 1fr);
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      align-items: center;
    }
    @media (max-width: 768px) {
      .sk-row { grid-template-columns: 2fr 1fr 1fr; }
    }
    .sk-table-skeleton { padding: 0; }

    /* =====================================================================
       AUTOMATION TAB
       Вкладка «Автоматизация»: расписания start/stop/profile по ASIC.
       Все стили префиксованы `.automation-*` или `#automation-*`, чтобы
       не конфликтовать с другими вкладками. UI работает на общих с
       Telegram-ботом таблицах (см. /api/automation_*.php).
       ===================================================================== */

    .automation-container {
      max-width: 1100px;
      margin: 0 auto;
    }
    .automation-header {
      margin: 4px 4px 16px;
    }
    .automation-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Manrope', Inter, sans-serif;
      font-weight: 700;
      color: var(--text-primary, #f3f4f6);
      margin: 0 0 6px;
    }
    .automation-title i {
      color: var(--accent-green, #0de670);
      font-size: 0.9em;
    }
    .automation-subtitle {
      margin: 0;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.92rem;
      line-height: 1.45;
      max-width: 760px;
    }

    .automation-banner {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      margin: 0 4px 14px;
      background: rgba(255, 140, 26, 0.08);
      border: 1px solid rgba(255, 140, 26, 0.30);
      border-radius: 10px;
      color: var(--text-primary, #f3f4f6);
      font-size: 0.92rem;
      line-height: 1.4;
    }
    /* HTML-атрибут [hidden] в браузерах = `display: none`, но author-stylesheet
       `display: flex` его перебивает по специфичности — добавляем !important. */
    .automation-banner[hidden],
    .automation-empty[hidden],
    .automation-rules[hidden],
    .automation-runs-body[hidden],
    .automation-section[hidden],
    .automation-field[hidden],
    .automation-form-msg[hidden],
    #automation-loading[hidden],
    #automation-runs-loading[hidden],
    #automation-runs-empty[hidden] {
      display: none !important;
    }
    .automation-banner i {
      color: var(--accent-orange, #ff8c1a);
      font-size: 1.25rem;
      margin-top: 1px;
      flex-shrink: 0;
    }
    .automation-banner b { color: var(--accent-orange, #ff8c1a); }

    .automation-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 28px 12px;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.94rem;
    }
    .automation-section { position: relative; }

    /* ---- Тулбар ---- */
    .automation-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }
    .automation-toolbar__left {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.9rem;
    }
    .automation-toolbar__right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .automation-counter { white-space: nowrap; }
    .automation-counter b { color: var(--text-primary, #f3f4f6); }
    .automation-counter--muted { opacity: 0.7; }

    /* ---- Пустое состояние ---- */
    .automation-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 36px 16px;
      color: var(--text-muted, rgba(255,255,255,0.55));
      text-align: center;
    }
    .automation-empty i {
      font-size: 2.4rem;
      opacity: 0.45;
    }
    .automation-empty p { margin: 0; font-size: 0.95rem; }

    /* ---- Список правил ---- */
    .automation-rules {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .automation-rule {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .automation-rule:hover {
      background: rgba(255,255,255,0.035);
      border-color: rgba(255,255,255,0.10);
    }
    .automation-rule.is-disabled {
      opacity: 0.55;
    }
    .automation-rule__body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .automation-rule__title {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-weight: 600;
      color: var(--text-primary, #f3f4f6);
      font-size: 0.98rem;
    }
    .automation-rule__time {
      font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
      font-size: 0.95rem;
      color: var(--accent-green, #0de670);
      padding: 1px 8px;
      border-radius: 6px;
      background: rgba(13, 230, 112, 0.10);
      letter-spacing: 0.5px;
    }
    .automation-rule__action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.82rem;
      background: rgba(255,255,255,0.06);
      color: var(--text-primary, #f3f4f6);
    }
    .automation-rule__action.is-start { color: #4ade80; background: rgba(34, 197, 94, 0.13); }
    .automation-rule__action.is-stop  { color: #f87171; background: rgba(239, 68, 68, 0.14); }
    .automation-rule__action.is-profile { color: #60a5fa; background: rgba(96, 165, 250, 0.14); }

    .automation-rule__asic {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted, rgba(255,255,255,0.65));
      font-size: 0.88rem;
    }
    .automation-rule__asic .mac {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.78rem;
      opacity: 0.6;
    }
    .automation-rule__custom-name {
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-style: italic;
      font-size: 0.86rem;
    }

    .automation-rule__days {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
    }
    .automation-rule__day {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 22px;
      padding: 0 6px;
      border-radius: 5px;
      background: rgba(255,255,255,0.04);
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    .automation-rule__day.is-on {
      background: rgba(13, 230, 112, 0.13);
      color: var(--accent-green, #0de670);
    }

    .automation-rule__last-run {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      color: var(--text-muted, rgba(255,255,255,0.5));
    }
    .automation-rule__last-run .status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--text-muted, rgba(255,255,255,0.4));
    }
    .automation-rule__last-run.is-applied .status-dot { background: var(--accent-green, #0de670); }
    .automation-rule__last-run.is-failed  .status-dot { background: #ef4444; }
    .automation-rule__last-run.is-skipped .status-dot { background: var(--accent-orange, #ff8c1a); }

    .automation-rule__warn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      color: #ff8c1a;
      cursor: help;
    }
    .automation-rule__warn i { font-size: 0.95rem; }

    .automation-rule__controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .automation-rule__icon-btn {
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-muted, rgba(255,255,255,0.55));
      cursor: pointer;
      transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    }
    .automation-rule__icon-btn:hover {
      background: rgba(255,255,255,0.05);
      color: var(--text-primary, #f3f4f6);
      border-color: rgba(255,255,255,0.08);
    }
    .automation-rule__icon-btn.is-danger:hover {
      color: #f87171;
      border-color: rgba(239, 68, 68, 0.3);
    }

    /* Тоггл «вкл/выкл» */
    .automation-toggle {
      position: relative;
      display: inline-block;
      width: 38px;
      height: 22px;
      flex-shrink: 0;
    }
    .automation-toggle input {
      opacity: 0;
      width: 0; height: 0;
      pointer-events: none;
    }
    .automation-toggle__slider {
      position: absolute;
      inset: 0;
      cursor: pointer;
      background: rgba(255,255,255,0.10);
      border-radius: 999px;
      transition: background-color 0.18s ease;
    }
    .automation-toggle__slider::before {
      content: '';
      position: absolute;
      width: 16px; height: 16px;
      left: 3px; top: 3px;
      border-radius: 50%;
      background: #fff;
      transition: transform 0.18s ease;
    }
    .automation-toggle input:checked + .automation-toggle__slider {
      background: var(--accent-green, #0de670);
    }
    .automation-toggle input:checked + .automation-toggle__slider::before {
      transform: translateX(16px);
    }
    .automation-toggle input:focus-visible + .automation-toggle__slider {
      box-shadow: 0 0 0 3px rgba(13, 230, 112, 0.30);
    }

    @media (max-width: 600px) {
      .automation-rule {
        grid-template-columns: 1fr;
      }
      .automation-rule__controls {
        justify-content: flex-end;
        margin-top: 4px;
      }
    }

    /* ---- История срабатываний ---- */
    .automation-runs-section { margin-top: 16px; }
    .automation-runs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .automation-runs-header h3 { margin: 0; }
    .automation-runs-body {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .automation-runs-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .automation-runs-list li {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      font-size: 0.88rem;
    }
    .automation-run__when {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      font-size: 0.84rem;
      color: var(--text-muted, rgba(255,255,255,0.55));
      white-space: nowrap;
    }
    .automation-run__body { min-width: 0; }
    .automation-run__title { color: var(--text-primary, #f3f4f6); font-weight: 500; }
    .automation-run__note  {
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-size: 0.82rem;
      margin-top: 2px;
      word-break: break-word;
    }
    .automation-run__status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.82rem;
      white-space: nowrap;
      align-self: flex-start;
    }
    .automation-run__status::before {
      content: '';
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--text-muted, rgba(255,255,255,0.4));
    }
    .automation-run__status.is-applied { color: var(--accent-green, #0de670); }
    .automation-run__status.is-applied::before { background: var(--accent-green, #0de670); }
    .automation-run__status.is-failed  { color: #f87171; }
    .automation-run__status.is-failed::before  { background: #ef4444; }
    .automation-run__status.is-skipped { color: var(--accent-orange, #ff8c1a); }
    .automation-run__status.is-skipped::before { background: var(--accent-orange, #ff8c1a); }

    /* =====================================================================
       AUTOMATION MODAL — форма создания/редактирования правила.
       Используется и для create, и для edit. Поля валидируются на клиенте,
       финальная валидация — на сервере (api/automation_rules.php).
       ===================================================================== */
    /* Z-index подобран выше `.tab-navigation` (12000 на мобиле) и других
       модалок проекта (100040–100050), иначе нижний нав-бар «наезжает» на
       форму на мобиле. */
    #automation-modal {
      position: fixed;
      inset: 0;
      background: rgba(5, 8, 17, 0.78);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100060;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }
    #automation-modal[aria-hidden="false"] {
      opacity: 1;
      pointer-events: auto;
    }
    .automation-modal-content {
      width: 100%;
      max-width: 480px;
      max-height: calc(100vh - 40px);
      background: var(--bg-elev, #131A2E);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    }
    .automation-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .automation-modal-head h3 {
      margin: 0;
      font-family: 'Manrope', Inter, sans-serif;
      font-weight: 700;
      color: var(--text-primary, #f3f4f6);
    }
    .automation-modal-close {
      background: transparent;
      border: 0;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 1.6rem;
      line-height: 1;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background-color 0.12s ease, color 0.12s ease;
    }
    .automation-modal-close:hover {
      background: rgba(255,255,255,0.08);
      color: var(--text-primary, #f3f4f6);
    }
    .automation-form {
      padding: 16px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow-y: auto;
    }
    .automation-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .automation-field > label {
      color: var(--text-primary, #f3f4f6);
      font-weight: 500;
      font-size: 0.9rem;
    }
    .automation-optional {
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-weight: 400;
      font-size: 0.85em;
    }
    .automation-field select,
    .automation-field input[type="text"],
    .automation-field input[type="time"] {
      width: 100%;
      padding: 10px 12px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      color: var(--text-primary, #f3f4f6);
      font-size: 0.95rem;
      font-family: inherit;
      transition: border-color 0.12s ease, background-color 0.12s ease;
      /* Сбросим браузерные дефолты у нативного select — стрелочка и шрифт
         должны соответствовать остальной форме (без этого Chrome рисует
         системный белый дропдаун с serif). Для самого <option> ниже задан
         тёмный фон — кросс-браузерный воркэраунд под наш dark-theme. */
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
                        linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
      background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 32px;
    }
    .automation-field input[type="time"] {
      background-image: none;
      padding-right: 12px;
    }
    /* Нативный popup `<option>` Chrome/Firefox рисует по-разному: в Firefox
       его можно стилить, в Chrome — только частично (background-color +
       color). Делаем кросс-браузерный минимум, чтобы белая полоса не
       прорывалась на фоне dark-темы. */
    .automation-field select option {
      background-color: #131A2E;
      color: #f3f4f6;
    }
    .automation-field select option:disabled {
      color: rgba(255,255,255,0.4);
    }
    .automation-field select:focus,
    .automation-field input[type="text"]:focus,
    .automation-field input[type="time"]:focus {
      outline: none;
      border-color: var(--accent-green, #0de670);
      background-color: rgba(13, 230, 112, 0.03);
    }
    .automation-field input[type="time"] {
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      letter-spacing: 0.6px;
      max-width: 140px;
    }
    .automation-hint {
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-size: 0.82rem;
    }

    /* Радио-кнопки действия (start/stop/profile) */
    .automation-action-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .automation-action input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .automation-action__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 8px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .automation-action input:checked + .automation-action__btn {
      background: rgba(13, 230, 112, 0.10);
      border-color: var(--accent-green, #0de670);
      color: var(--text-primary, #f3f4f6);
    }
    .automation-action input:focus-visible + .automation-action__btn {
      box-shadow: 0 0 0 3px rgba(13, 230, 112, 0.25);
    }
    .automation-action__btn:hover {
      background: rgba(255,255,255,0.05);
      color: var(--text-primary, #f3f4f6);
    }

    /* ---- Multi-select ASIC: поиск + чек-листы ----
       Нативный <select multiple> неудобен (Ctrl+клик, нет фильтра),
       поэтому реализуем кастомный список с чек-боксами. */
    .automation-field--macs > label { margin-bottom: 4px; }
    .automation-mac-multiselect {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
    }
    .automation-mac-toolbar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 8px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.18);
    }
    .automation-mac-toolbar input[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
      padding: 7px 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      color: var(--text-primary, #f3f4f6);
      font-size: 0.88rem;
      font-family: inherit;
      transition: border-color 0.12s ease, background-color 0.12s ease;
    }
    .automation-mac-toolbar input[type="search"]:focus {
      outline: none;
      border-color: var(--accent-green, #0de670);
      background: rgba(13, 230, 112, 0.04);
    }
    .automation-mac-quick {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-muted, rgba(255,255,255,0.55));
      padding: 6px 9px;
      border-radius: 6px;
      font-size: 0.78rem;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.12s ease;
    }
    .automation-mac-quick:hover {
      background: rgba(255,255,255,0.05);
      color: var(--text-primary, #f3f4f6);
    }
    .automation-mac-list {
      max-height: 240px;
      overflow-y: auto;
      padding: 4px 0;
    }
    .automation-mac-list::-webkit-scrollbar { width: 8px; }
    .automation-mac-list::-webkit-scrollbar-track { background: transparent; }
    .automation-mac-list::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.10);
      border-radius: 4px;
    }
    .automation-mac-empty {
      padding: 16px;
      text-align: center;
      color: var(--text-muted, rgba(255,255,255,0.4));
      font-size: 0.86rem;
    }
    .automation-mac-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.12s ease;
    }
    .automation-mac-row:hover { background: rgba(255,255,255,0.04); }
    .automation-mac-row.is-disabled {
      cursor: not-allowed;
      opacity: 0.45;
    }
    .automation-mac-row.is-disabled:hover { background: transparent; }
    .automation-mac-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--accent-green, #0de670);
      flex-shrink: 0;
      cursor: inherit;
    }
    .automation-mac-row__body {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .automation-mac-row__name {
      color: var(--text-primary, #f3f4f6);
      font-size: 0.91rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .automation-mac-row__meta {
      color: var(--text-muted, rgba(255,255,255,0.5));
      font-size: 0.76rem;
      font-family: 'JetBrains Mono', ui-monospace, monospace;
      letter-spacing: 0.3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .automation-mac-row__status {
      flex-shrink: 0;
      font-size: 0.72rem;
      padding: 1px 6px;
      border-radius: 5px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }
    .automation-mac-row__status.is-online { color: var(--accent-green, #0de670); background: rgba(13, 230, 112, 0.10); }
    .automation-mac-row__status.is-offline { color: #f87171; background: rgba(239, 68, 68, 0.12); }
    .automation-mac-row__incompat {
      flex-shrink: 0;
      font-size: 0.72rem;
      color: var(--accent-orange, #ff8c1a);
      padding: 1px 6px;
      border-radius: 5px;
      background: rgba(255, 140, 26, 0.10);
      cursor: help;
    }
    .automation-mac-summary {
      padding: 8px 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.18);
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.82rem;
    }
    .automation-mac-summary b { color: var(--text-primary, #f3f4f6); }

    /* Чипы дней недели */
    .automation-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }
    .automation-day {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 7px;
      color: var(--text-muted, rgba(255,255,255,0.55));
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      cursor: pointer;
      user-select: none;
      transition: all 0.12s ease;
    }
    .automation-day:hover {
      background: rgba(255,255,255,0.07);
      color: var(--text-primary, #f3f4f6);
    }
    .automation-day.is-on {
      background: rgba(13, 230, 112, 0.13);
      border-color: var(--accent-green, #0de670);
      color: var(--accent-green, #0de670);
    }
    .automation-days-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }
    .automation-days-quick__btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--text-muted, rgba(255,255,255,0.55));
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.78rem;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .automation-days-quick__btn:hover {
      background: rgba(255,255,255,0.05);
      color: var(--text-primary, #f3f4f6);
    }

    .automation-modal-foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 6px;
      border-top: 1px solid transparent;
    }
    .automation-form-msg { margin-top: 4px; }
    .automation-form-msg.is-error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.25); padding: 8px 10px; border-radius: 8px; }
    .automation-form-msg.is-success { background: rgba(13, 230, 112, 0.10); color: #6ee7a7; border: 1px solid rgba(13, 230, 112, 0.25); padding: 8px 10px; border-radius: 8px; }

    /* Mobile: модалка снизу почти на всю высоту, но НЕ наезжает на нижний
       нав-бар (.tab-navigation у нас position:fixed снизу, высота ~80px +
       safe-area-inset). Если оставить просто 92vh, footer формы прячется
       за нав-баром (юзер видит «Отмена/Сохранить» наполовину). */
    @media (max-width: 540px) {
      :root { --automation-bottom-bar: calc(88px + env(safe-area-inset-bottom)); }
      #automation-modal {
        padding: 0;
        align-items: flex-end;
      }
      .automation-modal-content {
        max-width: 100%;
        max-height: calc(100vh - var(--automation-bottom-bar) - 12px);
        margin-bottom: var(--automation-bottom-bar);
        border-radius: 14px 14px 0 0;
      }
      .automation-action-group { grid-template-columns: 1fr 1fr 1fr; }
      .automation-days { gap: 4px; }
      .automation-day { padding: 9px 2px; font-size: 0.74rem; }
    }