/* Задаём основную тёмную палитру интерфейса. */
:root{color-scheme:dark;--bg:#090d12;--surface:#111821;--surface-2:#17212c;--line:#253240;--text:#f4f7fa;--muted:#8e9baa;--accent:#35d07f;--accent-dark:#173d2b;--danger:#ff6577;--blue:#5ba8ff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Используем предсказуемую модель размеров. */
*{box-sizing:border-box}
/* Убираем стандартные отступы и задаём фон приложения. */
body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 10%,#122230 0,transparent 30%),var(--bg);color:var(--text);line-height:1.45}
/* Полностью скрываем неактивные блоки. */
.hidden{display:none!important}
/* Центрируем форму входа. */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
/* Оформляем карточку входа. */
.login-card{width:min(390px,100%);padding:36px;background:rgba(17,24,33,.94);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px #0008;text-align:center}
/* Создаём простой фирменный знак. */
.brand-mark{width:54px;height:54px;margin:0 auto 18px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#35d07f,#1fa7a0);color:#06100b;font-size:27px;font-weight:900}
/* Уменьшаем знак в боковой панели. */
.brand-mark.small{width:36px;height:36px;margin:0;border-radius:10px;font-size:18px}
/* Настраиваем заголовок входа. */
.login-card h1{margin:0;font-size:27px}
/* Смягчаем вспомогательный текст. */
.login-card p,.muted{color:var(--muted)}
/* Выравниваем подписи полей. */
label{display:grid;gap:7px;margin:16px 0;text-align:left;color:#b9c3cd;font-size:13px}
/* Оформляем поля ввода единообразно. */
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#0c1219;color:var(--text);padding:12px 13px;font:inherit;outline:none}
/* Подсвечиваем активное поле. */
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
/* Задаём высоту многострочного поля. */
textarea{min-height:120px;resize:vertical}
/* Оформляем основные кнопки. */
button{border:0;border-radius:10px;background:var(--accent);color:#07130d;padding:11px 16px;font:inherit;font-weight:750;cursor:pointer}
/* Показываем недоступное действие без ложной активности. */
button:disabled{opacity:.45;cursor:not-allowed}
/* Смягчаем неосновные кнопки. */
button.ghost,.nav-button{background:transparent;color:var(--muted)}
/* Оформляем второстепенную кнопку без конкуренции с главным действием. */
button.secondary{background:#202b36;color:#d7e0e8}
/* Выделяем созидательные действия зелёным. */
button.success{background:var(--accent);color:#07130d}
/* Выделяем обычные изменения синим. */
button.primary{background:var(--blue);color:#07131f}
/* Подтверждаем копирование зелёным состоянием. */
button.secondary.copied{background:var(--accent);color:#07130d}
/* Показываем активный и наведённый пункт. */
.nav-button.active,.nav-button:hover{background:var(--accent-dark);color:var(--accent)}
/* Оформляем опасные действия. */
button.danger{background:#371923;color:#ff8997}
/* Усиливаем опасное действие при наведении без смены смысла цвета. */
button.danger:hover{background:#55212e}
/* Показываем ошибку формы. */
.error{display:block;min-height:20px;margin-top:12px;color:var(--danger);font-size:13px}
/* Создаём двухколоночный каркас панели. */
.app{min-height:100vh;display:grid;grid-template-columns:230px 1fr}
/* Закрепляем боковую навигацию. */
.sidebar{position:sticky;top:0;height:100vh;padding:24px 16px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#0d131acc}
/* Выравниваем бренд. */
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 26px;font-weight:800}
/* Располагаем кнопки навигации вертикально. */
nav{display:grid;gap:6px}
/* Выравниваем текст навигации слева. */
.nav-button{display:flex;align-items:center;gap:8px;text-align:left;padding:12px}
/* Прижимаем выход вниз панели. */
#logoutButton{margin-top:auto;text-align:left}
/* Ограничиваем ширину контента. */
.content{width:100%;max-width:1600px;padding:30px 34px 44px;margin:0 auto;overflow:hidden}
/* Выравниваем шапку. */
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
/* Оформляем надзаголовок. */
.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.15em}
/* Убираем лишний отступ заголовка. */
h2{margin:5px 0 0;font-size:30px}
/* Оформляем состояние соединения. */
.connection{color:var(--muted);font-size:13px}
/* Раскладываем метрики адаптивной сеткой. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:15px}
/* Оформляем карточку метрики. */
.stat{padding:20px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--surface),#0e151d)}
/* Выделяем число метрики. */
.stat strong{display:block;margin-top:8px;font-size:29px}
/* Смягчаем подпись метрики. */
.stat span{color:var(--muted);font-size:13px}
/* Оформляем функциональную панель. */
.page{display:grid;gap:22px}
/* Добавляем одинаковый вертикальный ритм контейнерам с динамическими карточками. */
#applicationContent,#tariffsContent,#promocodesContent,#promocodeDetailContent,#notificationsContent{display:grid;gap:22px}
/* Оформляем вводный блок объединённого раздела. */
.section-intro{padding:2px 2px 0}
/* Убираем случайные внешние отступы вводного заголовка. */
.section-intro h3{margin:5px 0 7px;font-size:22px}
/* Ограничиваем ширину пояснения для удобного чтения. */
.section-intro p{max-width:780px;margin:0;color:var(--muted);line-height:1.55}
/* Располагаем две главные вкладки серверов сверху отдельной строкой. */
.server-tabs{display:flex;gap:8px;padding:6px;border:1px solid var(--line);border-radius:13px;background:#0d141c;width:max-content;max-width:100%}
/* Делаем неактивную вкладку спокойной. */
.server-tab{background:transparent;color:var(--muted)}
/* Выделяем выбранный режим серверов. */
.server-tab.active{background:var(--blue);color:#07131f}
/* Сохраняем вертикальный ритм каждого внутреннего экрана. */
.server-view{display:grid;gap:22px}
/* Оформляем функциональную панель без конкурирующих внешних отступов. */
.panel{margin:0;border:1px solid var(--line);border-radius:15px;background:var(--surface);overflow:hidden}
/* Выравниваем заголовок панели. */
.panel-head{min-height:66px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
/* Расставляем заголовок и пояснение внутри шапки панели. */
.panel-head>div{display:grid;gap:5px}
/* Убираем внешние отступы пояснения в шапке. */
.panel-head .muted{margin:0;font-size:12px}
.user-filters{display:flex!important;grid-auto-flow:column;align-items:center;gap:12px;flex-wrap:wrap}
.user-search{width:min(320px,40vw)}
/* Убираем стандартный отступ заголовка панели. */
.panel h3{margin:0;font-size:16px}
/* Раскладываем форму в компактную сетку. */
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;padding:20px}
/* Не переносим общие отступы обычных подписей внутрь сетки формы. */
.form-grid>label{margin:0}
/* Выравниваем самостоятельные кнопки формы по нижней линии полей. */
.form-grid>button{align-self:end;min-height:44px}
/* Размещаем поля нового сервера в три устойчивые колонки. */
.deployment-grid{grid-template-columns:repeat(3,minmax(190px,1fr))}
.connection-layer-field{grid-column:1/-1;margin:0;padding:0;border:0}
.connection-layer-field legend{margin-bottom:10px;color:var(--muted);font-size:13px;font-weight:700}
.connection-layer-options{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px}
.connection-layer-options label{display:flex;align-items:center;gap:12px;min-height:74px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer}
.connection-layer-options label:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 2px rgba(69,163,255,.15)}
.connection-layer-options input{width:auto;margin:0;accent-color:var(--blue)}
.connection-layer-options span{display:grid;gap:4px}
.connection-layer-options strong{color:var(--text)}
.connection-layer-options small{color:var(--muted);font-size:12px}
.layer-badge{display:inline-flex;align-items:center;width:max-content;margin-bottom:5px;padding:4px 8px;border:1px solid rgba(69,163,255,.35);border-radius:999px;color:#8dc7ff;background:rgba(69,163,255,.1);font-size:11px;font-weight:800;letter-spacing:.03em}
.layer-badge.beton{border-color:rgba(53,208,127,.4);color:#71e4aa;background:rgba(53,208,127,.1)}
/* Растягиваем ссылку WDTT на всю ширину. */
.config-grid textarea{grid-column:1/-1}
/* Растягиваем действия установки и выравниваем две кнопки. */
.deployment-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:2px}
/* Раскладываем живой журнал установки вертикально. */
.deployment-progress{display:grid;gap:0;padding:10px 20px 18px}
/* Выравниваем маркер, сообщение и время одного этапа. */
.progress-entry{position:relative;display:grid;grid-template-columns:18px 1fr;gap:11px;min-height:54px;padding:10px 0}
/* Соединяем этапы спокойной вертикальной линией. */
.progress-entry:not(:last-child)::after{content:"";position:absolute;left:5px;top:27px;bottom:-10px;width:2px;background:var(--line)}
/* Показываем состояние этапа круглым маркером. */
.progress-marker{position:relative;z-index:1;width:12px;height:12px;margin-top:3px;border:3px solid #31404f;border-radius:50%;background:#17212c}
/* Подсвечиваем успешно завершённый этап. */
.progress-entry.success .progress-marker{border-color:var(--accent);background:var(--accent)}
/* Подсвечиваем ошибочный этап красным. */
.progress-entry.error .progress-marker{border-color:var(--danger);background:var(--danger)}
/* Делаем описание этапа основным текстом строки. */
.progress-entry strong{display:block;color:#dfe7ee;font-size:13px;font-weight:650}
/* Выносим время этапа на отдельную спокойную строку. */
.progress-entry time{display:block;margin-top:5px;color:var(--muted);font-size:10px}
/* Рисуем компактный индикатор продолжающейся работы. */
.progress-spinner{width:18px;height:18px;border:2px solid #30404f;border-top-color:var(--accent);border-radius:50%;animation:progress-spin .8s linear infinite}
/* Останавливаем индикатор после успеха или ошибки. */
.progress-spinner.stopped{border-color:var(--accent);background:var(--accent);animation:none}
/* Вращаем только индикатор активной установки. */
@keyframes progress-spin{to{transform:rotate(360deg)}}
/* Выравниваем галочку автоподготовки с остальными полями. */
.deployment-check{align-self:end;min-height:44px;display:flex;align-items:center;gap:9px;padding:0 2px}
/* Оставляем галочкам естественный размер. */
.deployment-check input,.compact-check input{width:auto}
/* Оформляем одноразовую команду с переносом на узких экранах. */
.command{margin:0;padding:18px;white-space:pre-wrap;overflow-wrap:anywhere;color:#cde8d8;background:#0b1117;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Ограничиваем длинную ошибку одной строкой в таблице. */
.row-error{max-width:320px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;color:var(--danger);font-size:11px}
/* Выводим вторичную информацию новой строкой внутри таблицы. */
.cell-note{display:block;margin-top:5px;color:var(--muted);font-size:11px}
/* Уплотняем настройку-галочку внутри строки сервера. */
.compact-check{display:flex;align-items:center;gap:6px;margin:0 0 7px}
/* Располагаем числовую настройку сервера в одну строку. */
.compact-field{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0;font-size:11px}
/* Ограничиваем ширину маленького числового поля. */
.compact-field input{width:68px;padding:7px 8px;border-radius:8px}
/* Оформляем пустое состояние как часть панели. */
.empty-state{margin:0;padding:24px 20px;color:var(--muted)}
/* Делаем таблицы прокручиваемыми на узком экране. */
.table-wrap{overflow-x:auto}
/* Настраиваем таблицы. */
table{width:100%;border-collapse:collapse;font-size:13px}
/* Настраиваем ячейки таблицы. */
th,td{padding:13px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
/* Смягчаем заголовки колонок. */
th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
/* Убираем линию у последней строки. */
tr:last-child td{border-bottom:0}
/* Рисуем индикатор присутствия. */
.dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#53606e}
/* Подсвечиваем онлайн-пользователя. */
.dot.online{background:var(--accent);box-shadow:0 0 0 4px #35d07f18}
/* Оформляем статус компактной меткой. */
.badge{display:inline-block;padding:5px 8px;border-radius:99px;background:#202b36;color:#b7c2cc;font-size:11px}
/* Подсвечиваем активную метку. */
.badge.active{background:var(--accent-dark);color:var(--accent)}
/* Выделяем последнюю неудачную проверку красным без автоматического отключения ключа. */
.badge.failed{background:#3b1d25;color:#ff8997}
/* Выделяем полноценный аккаунт спокойным синим цветом. */
.badge.account{background:#172d45;color:#7bbcff}
/* Выделяем бессрочный режим фиолетовой меткой. */
.badge.unlimited,.unlimited-label{color:#c39bff}
/* Добавляем фон безлимитной метке в профиле. */
.badge.unlimited{background:#302046}
/* Выделяем активный пробный период тёплым цветом. */
.badge.trial{background:#443519;color:#ffd178}
/* Уменьшаем кнопки таблиц. */
.table-action{padding:7px 10px;font-size:11px}
/* Выравниваем действия вправо. */
.actions{text-align:right}
/* Собираем несколько действий в аккуратную группу справа. */
.action-group{display:flex;justify-content:flex-end;gap:7px}
/* Разрешаем группе действий аккуратно переноситься в узкой таблице. */
.action-group{flex-wrap:wrap}
/* Сохраняем промежуток между кнопками в старых строках без отдельной группы действий. */
.actions>.table-action+.table-action{margin-left:7px}
/* Выравниваем навигацию и период на странице деталей. */
.detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Разделяем шапку, статистику, настройки и ноды на странице сервера. */
#serverDetailContent{display:grid;gap:22px}
/* Ограничиваем селектор периода компактной шириной. */
.period-select{width:auto;min-width:145px;padding:9px 12px}
/* Оформляем заголовок выбранного сервера. */
.detail-title{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--surface),#0e1720)}
/* Убираем случайные отступы заголовка сервера. */
.detail-title h3{margin:5px 0;font-size:24px}
/* Смягчаем подпись локации. */
.detail-title p,.profile-header p{margin:0;color:var(--muted)}
/* Раскладываем пять периодов трафика в компактные карточки. */
.traffic-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:14px}
/* Оформляем одну карточку трафика. */
.traffic-card{min-height:104px;padding:19px 20px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
/* Смягчаем название периода. */
.traffic-card span{display:block;color:var(--muted);font-size:11px}
/* Выделяем объём трафика. */
.traffic-card strong{display:block;margin-top:12px;font-size:20px}
/* Раскладываем настройки физического сервера без огромной таблицы. */
.host-settings{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));align-items:end;gap:14px;padding:20px}
/* Переносим действия настроек на всю ширину. */
.host-settings>.action-group{grid-column:1/-1;justify-content:flex-start}
/* Разделяем раскрываемые ноды тонкими промежутками. */
.nodes-list{display:grid;gap:10px;padding:14px}
/* Оформляем ноду как самостоятельный раскрываемый блок. */
.node-card{border:1px solid var(--line);border-radius:12px;background:#0d141c;overflow:hidden}
/* Создаём кликабельную компактную шапку ноды. */
.node-card summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;cursor:pointer;list-style:none}
/* Скрываем стандартный маркер браузера. */
.node-card summary::-webkit-details-marker{display:none}
/* Располагаем подпись ноды под названием. */
.node-card summary>div:first-child span{display:block;margin-top:5px;color:var(--muted);font-size:11px}
/* Выравниваем трафик и статус ноды справа. */
.node-summary{display:flex;align-items:center;gap:12px}
/* Отделяем раскрытое содержимое ноды. */
.node-body{border-top:1px solid var(--line)}
/* Показываем технические данные неброской строкой. */
.node-meta{display:flex;gap:9px 18px;padding:12px 18px;color:var(--muted);font-size:11px;flex-wrap:wrap}
/* Выравниваем кнопки ноды справа. */
.node-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
/* Делаем имя пользователя похожим на обычную текстовую ссылку. */
.user-link{padding:0;background:transparent;color:var(--blue);font-weight:700;text-align:left}
/* Подчёркиваем назначение ссылки при наведении. */
.user-link:hover{text-decoration:underline}
/* Выделяем числовой идентификатор как главный переход в профиль. */
.user-id-link{font-variant-numeric:tabular-nums;font-size:13px}
/* Раскладываем содержимое профиля с одинаковыми промежутками. */
#userProfileContent{display:grid;gap:22px}
/* Располагаем тематические вкладки профиля отдельной компактной строкой. */
.user-profile-tabs{display:flex;gap:8px;width:max-content;max-width:100%;padding:6px;border:1px solid var(--line);border-radius:13px;background:#0d141c}
/* Делаем неактивные вкладки спокойными и сохраняем читаемую ширину. */
.user-profile-tab{min-width:130px;background:transparent;color:var(--muted)}
/* Подсвечиваем только текущую вкладку пользователя. */
.user-profile-tab.active{background:var(--blue);color:#07131f}
/* Сохраняем одинаковый вертикальный ритм содержимого каждой вкладки. */
.user-profile-panel{display:grid;gap:22px}
/* Отделяем поле закрытой заметки от заголовка и краёв карточки. */
.profile-comment-body{display:grid;gap:8px;padding:18px 20px 20px}
/* Делаем заметку компактной, но удобной для длинного текста поддержки. */
.profile-comment textarea{min-height:110px;margin:0;line-height:1.55}
/* Выравниваем ограничение длины по правому краю поля. */
.profile-comment-body>.muted{text-align:right;font-size:11px}
/* Отделяем настройку обязательного обновления от основной кнопки загрузки. */
.release-required{display:grid;gap:9px;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#0d141c}
/* Не добавляем лишний внешний отступ галочке обязательной версии. */
.release-required .check{margin:0;font-weight:700}
/* Оставляем кнопку режима обновления компактной. */
.release-required button{justify-self:start}
/* Растягиваем текст уведомления на всю ширину административной формы. */
.notification-form .notification-body{grid-column:1/-1}
/* Делаем поле уведомления удобным для нескольких строк. */
.notification-form textarea{min-height:105px;resize:vertical}
/* Переносим действие уведомления на отдельную строку. */
.notification-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}
/* Разрешаем длинному тексту уведомления переноситься в истории. */
.notification-preview{max-width:560px;white-space:normal;line-height:1.45}
/* Выравниваем выдачу приватного доступа в компактную строку. */
.private-access-form{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:center;gap:12px;padding:18px 20px}
/* Оформляем верхнюю карточку профиля пользователя. */
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}
/* Собираем аватар и основные сведения в одну группу. */
.profile-identity{display:flex;align-items:center;gap:17px;min-width:0}
/* Рисуем устойчивый текстовый аватар без внешних изображений. */
.profile-avatar{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:17px;background:linear-gradient(145deg,#35d07f,#2898aa);color:#06120d;font-size:20px;font-weight:900}
/* Выделяем имя пользователя в шапке профиля. */
.profile-identity h3{margin:5px 0 4px;font-size:24px}
/* Смягчаем email пользователя. */
.profile-identity p{margin:0;color:var(--muted)}
/* Располагаем статусы аккаунта в одну переносимую строку. */
.profile-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}
/* Не добавляем двойной отступ точке внутри статуса. */
.profile-badges .dot{margin-right:5px}
/* Выравниваем действия профиля справа. */
.profile-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
/* Собираем действия подписки справа в шапке тематической карточки. */
.profile-tab-actions{display:flex!important;grid-auto-flow:unset!important;justify-content:flex-end;gap:9px!important;flex-wrap:wrap}
/* Раскладываем административные поля профиля без прижатых краёв. */
.profile-settings-form{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:0 18px;padding:18px 20px 20px}
/* Убираем лишний верхний отступ у первой строки полей настроек. */
.profile-settings-form label{margin:0}
/* Растягиваем закрытый комментарий на всю ширину формы. */
.profile-settings-form .profile-comment-field{grid-column:1/-1;margin-top:18px}
/* Показываем ограничение заметки неброской подписью справа. */
.profile-comment-field small{color:var(--muted);font-size:11px;text-align:right}
/* Отличаем неизменяемое название телефона от редактируемого реального имени. */
.profile-settings-form input[readonly]{color:var(--muted);background:#0a1016;cursor:default}
/* Размещаем действия аккаунта внутри карточки с безопасными отступами. */
.profile-account-actions{display:flex;align-items:center;gap:10px;padding:20px;flex-wrap:wrap}
/* Раскладываем главные показатели пользователя в четыре карточки. */
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px}
/* Уменьшаем длинные значения внутри статистики профиля. */
.profile-stats .stat strong{font-size:18px;line-height:1.35}
/* Показываем точную дату под количеством оставшихся дней. */
.profile-stats .stat small{display:block;margin-top:7px;color:var(--muted);font-size:11px}
/* Раскладываем данные аккаунта и трафик в две колонки. */
.profile-columns{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(420px,1.1fr);gap:18px}
/* Оформляем список свойств аккаунта без табличной тяжести. */
.profile-details dl{display:grid;gap:0;margin:0;padding:8px 20px 16px}
/* Разводим название и значение одного свойства. */
.profile-details dl div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
/* Убираем последнюю разделительную линию. */
.profile-details dl div:last-child{border-bottom:0}
/* Смягчаем названия свойств. */
.profile-details dt{color:var(--muted);font-size:12px}
/* Выравниваем значения свойств справа. */
.profile-details dd{min-width:0;margin:0;overflow-wrap:anywhere;text-align:right;font-size:12px}
/* Выравниваем скрытый пароль и кнопку просмотра в одну строку. */
.credential-value{display:flex;align-items:center;justify-content:flex-end;gap:9px}
/* Добавляем разрядку скрытому паролю. */
.masked-password{letter-spacing:.12em}
/* Раскладываем поля диалога реквизитов вертикально. */
.swal-fields{display:grid;gap:2px;text-align:left}
/* Оформляем показ логина и пароля читаемым блоком. */
.credentials-reveal{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;margin-top:12px;padding:16px;border:1px solid var(--line);border-radius:11px;background:#0b1117;text-align:left}
/* Смягчаем подписи реквизитов. */
.credentials-reveal span{color:var(--muted);font-size:12px}
/* Разрешаем длинным реквизитам переноситься без выхода за окно. */
.credentials-reveal strong{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* Оформляем вводный блок воронки как самостоятельную поверхность. */
.sales-hero{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(600px,1.35fr);gap:24px;padding:25px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#111821,#111c27)}
/* Настраиваем заголовок воронки. */
.sales-hero h3,.section-heading h3,.trial-settings h3{margin:6px 0;font-size:22px}
/* Ограничиваем и смягчаем пояснения тарифов. */
.sales-hero p,.trial-settings p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
/* Раскладываем четыре этапа воронки в одну линию. */
.funnel-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}
/* Оформляем отдельный этап воронки. */
.funnel-step{position:relative;display:flex;gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#0d141c;overflow:hidden}
/* Добавляем направляющий клин между этапами. */
.funnel-step:not(:last-child)::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;background:#0d141c;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:translateY(-50%) rotate(45deg);z-index:2}
/* Смягчаем порядковый номер этапа. */
.funnel-number{color:#536272;font-size:10px;font-weight:800}
/* Раскладываем значения этапа вертикально. */
.funnel-step div{display:grid;gap:4px}
/* Смягчаем название этапа. */
.funnel-step small{color:var(--muted);font-size:11px}
/* Выделяем количество пользователей этапа. */
.funnel-step strong{font-size:25px}
/* Показываем конверсию неброским текстом. */
.funnel-step em{color:var(--accent);font-size:10px;font-style:normal}
/* Размещаем настройку пробного периода в компактной строке. */
.trial-settings{display:grid;grid-template-columns:1fr 180px auto;align-items:end;gap:18px;padding:22px}
/* Убираем внешний отступ поля внутри карточки пробного периода. */
.trial-settings label{margin:0}
/* Выравниваем заголовок списка тарифов. */
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px;padding:0 2px}
/* Убираем внешний отступ пояснения списка. */
.section-heading .muted{margin:0;font-size:12px}
/* Раскладываем тарифы адаптивными карточками. */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
/* Оформляем редактируемую карточку тарифа. */
.pricing-card{display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
/* Выделяем рекомендуемый тариф зелёным контуром. */
.pricing-card.featured{border-color:#35d07f88;box-shadow:0 0 0 1px #35d07f22 inset}
/* Смягчаем отключённый тариф без скрытия его настроек. */
.pricing-card.disabled{opacity:.72}
/* Выравниваем название и скидку карточки. */
.pricing-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* Убираем лишнее оформление поля названия, сохраняя редактирование. */
.pricing-top input{margin-top:7px;padding:7px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;font-size:20px;font-weight:800}
/* Показываем возможность редактирования названия при фокусе. */
.pricing-top input:focus{border-bottom-color:var(--accent)}
/* Оформляем рассчитанную скидку заметной меткой. */
.discount-badge{padding:6px 9px;border-radius:99px;background:#4b1f29;color:#ff94a0;font-size:11px;font-weight:800}
/* Раскладываем обычную и акционную цену рядом. */
.price-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Убираем внешние отступы полей карточки. */
.pricing-card label{margin:0}
/* Показываем итоговую цену отдельным предварительным просмотром. */
.pricing-preview{display:grid;gap:5px;padding:14px;border-radius:11px;background:#0c131a}
/* Выделяем итоговую цену. */
.pricing-preview>span{font-size:24px;font-weight:900}
/* Смягчаем цену за условный месяц. */
.pricing-preview small{color:var(--muted)}
/* Размещаем переключатели тарифа вертикально. */
.pricing-options{display:grid;gap:9px}
/* Растягиваем форму создания тарифа на удобные колонки. */
.plan-create-form{grid-template-columns:repeat(4,minmax(150px,1fr))}
/* Раскладываем четыре периода трафика компактной сеткой. */
.traffic-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:10px;padding:16px 20px 20px}
/* Оформляем одно значение трафика. */
.traffic-mini-grid div{padding:14px;border:1px solid var(--line);border-radius:11px;background:#0d141c}
/* Смягчаем название периода трафика. */
.traffic-mini-grid span{display:block;color:var(--muted);font-size:11px}
/* Выделяем объём трафика. */
.traffic-mini-grid strong{display:block;margin-top:7px;font-size:17px}

/* Раскладываем поля промокода в одну аккуратную сетку. */
.promocode-form{grid-template-columns:1.4fr 1fr .8fr 1fr auto auto;align-items:end}
/* Выносим пояснение нулевого лимита под сетку, чтобы высота полей оставалась одинаковой. */
.promocode-note{margin:0;padding:0 20px 20px;font-size:11px;line-height:1.5}
/* Ставим поле кода и генератор в одну строку. */
.promo-code-input{display:flex;gap:8px}
/* Оставляем полю кода всю доступную ширину. */
.promo-code-input input{min-width:0;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
/* Показываем код в таблице компактно и заметно. */
.promo-code-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.08em}
/* Разносим карточку и краткие показатели на широком экране. */
.promo-detail-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}
/* Убираем случайные внешние отступы описания в карточке промокода. */
.promo-detail-card p{margin:0;color:var(--muted)}
/* Делаем сам промокод главным элементом карточки. */
.promo-detail-code{margin:8px 0;font:800 34px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:var(--accent)}
/* Оформляем команду внутри SweetAlert2 как читаемый терминальный блок. */
.swal-command{padding:12px;border:1px solid var(--line);border-radius:9px;background:#090d12;color:#d8e4ee;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Отделяем кнопку копирования команды от галочки подтверждения. */
.swal-copy{margin-bottom:10px}
/* Показываем успешное копирование тем же зелёным состоянием. */
.swal-copy.copied{background:var(--accent);color:#07130d}
/* Раскладываем SSH-реквизиты первой ноды вертикально и без стандартных огромных отступов SweetAlert2. */
.swal-form{display:grid;gap:12px;text-align:left}
/* Показываем подпись каждого SSH-поля отдельно от значения. */
.swal-form label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}
/* Подгоняем поля развёртывания под ширину окна и тёмную тему панели. */
.swal-form .swal2-input{width:100%;height:43px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#090d12;color:var(--text);font-size:14px;box-shadow:none}
/* Оформляем компактный фильтр. */
.check{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted)}
/* Оставляем чекбоксу естественный размер. */
.check input{width:auto}
/* Раскладываем сведения о сборке и QR-код в две аккуратные карточки. */
.app-release-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px}
/* Добавляем карточке приложения комфортные внутренние отступы. */
.app-release-card{padding:28px}
/* Выделяем название приложения крупнее служебных подписей. */
.app-release-card h3{margin:7px 0 4px;font-size:28px}
/* Показываем версию одной заметной строкой. */
.app-version{margin:0;color:var(--text);font-size:18px;font-weight:750}
/* Смягчаем внутренний номер сборки. */
.app-version span{margin-left:7px;color:var(--muted);font-size:12px;font-weight:500}
/* Собираем дату и размер без пустых больших блоков. */
.app-release-meta{display:flex;gap:8px 16px;margin:20px 0;color:var(--muted);font-size:12px;flex-wrap:wrap}
/* Оформляем ссылку загрузки как главное действие страницы. */
.download-button{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent);color:#07130d;padding:12px 18px;font-weight:800;text-decoration:none}
/* Подсвечиваем ссылку при наведении без изменения её смысла. */
.download-button:hover{filter:brightness(1.08)}
/* Убираем контрольную сумму из основного визуального потока. */
.checksum{margin-top:20px;color:var(--muted);font-size:11px}
/* Разрешаем длинному SHA-256 безопасно переноситься. */
.checksum code{display:block;margin-top:9px;overflow-wrap:anywhere;color:#c4d0da}
/* Центрируем QR-код и пояснения. */
.qr-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
/* Убираем случайные отступы внутри описания QR-кода. */
.qr-card h3{margin:6px 0;font-size:20px}
/* Смягчаем инструкцию сканирования. */
.qr-card p{margin:0;color:var(--muted);font-size:13px}
/* Показываем QR на чистом белом фоне с устойчивым размером. */
.qr-card img{width:min(240px,100%);height:auto;border-radius:14px;background:#fff}
/* Раскладываем версии вертикальным журналом. */
.release-log{display:grid;gap:12px;padding:16px}
/* Оформляем одну версию самостоятельным блоком. */
.release-entry{padding:17px 18px;border:1px solid var(--line);border-radius:12px;background:#0d141c}
/* Тонко выделяем актуальную версию. */
.release-entry.latest{border-color:#35d07f66;background:linear-gradient(135deg,#102019,#0d141c)}
/* Выравниваем номер версии и дату публикации. */
.release-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
/* Располагаем отметку актуальности рядом с версией. */
.release-heading>div{display:flex;align-items:center;gap:9px}
/* Выделяем номер версии. */
.release-version{font-weight:800}
/* Смягчаем дату выпуска. */
.release-heading time{color:var(--muted);font-size:11px}
/* Настраиваем читаемый список изменений. */
.release-entry ul{margin:13px 0 0;padding-left:19px;color:#c9d3dc;font-size:13px;line-height:1.65}
/* Раскладываем добавление ключа без чрезмерно широких полей. */
.connection-key-form{grid-template-columns:minmax(180px,.8fr) minmax(280px,1.6fr) minmax(170px,.7fr) auto;align-items:end}
/* Растягиваем поле значения внутри выделенной колонки. */
.connection-key-value{min-width:0}
/* Выравниваем включённую по умолчанию галочку с остальными полями формы. */
.connection-key-enabled{min-height:46px;align-content:center;margin-bottom:16px}
/* Собираем карточки ключей в адаптивную сетку. */
.connection-key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;padding:18px}
/* Оформляем одну запись с доступным только администратору значением. */
.connection-key-card{display:grid;gap:18px;padding:19px;border:1px solid var(--line);border-radius:14px;background:#0d141c}
/* Выравниваем название и состояние ключа. */
.connection-key-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}
/* Даём названию занять доступную ширину. */
.connection-key-head>div{display:grid;flex:1;gap:7px}
/* Выделяем название как редактируемый заголовок. */
.connection-key-head input{padding:7px 9px;font-size:17px;font-weight:800}
/* Раскладываем полное значение и кнопку копирования без горизонтального переполнения. */
.connection-key-secret{display:grid;min-width:0;gap:7px}
/* Смягчаем служебную подпись полного значения. */
.connection-key-secret>span,.connection-key-last>span{color:var(--muted);font-size:12px}
/* Помещаем длинный ключ на отдельную устойчивую подложку. */
.connection-key-secret>div{display:flex;min-width:0;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#091018}
/* Разрешаем длинному ключу переноситься, не выталкивая кнопку из карточки. */
.connection-key-secret code{min-width:0;flex:1;overflow-wrap:anywhere;color:#dce6ef;font-size:12px;line-height:1.55}
/* Раскладываем успешные и неудачные попытки двумя равными блоками. */
.connection-key-counters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Оформляем один диагностический счётчик. */
.connection-key-counters>div{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:11px;background:#111923}
/* Смягчаем длинное название счётчика. */
.connection-key-counters span{color:var(--muted);font-size:11px}
/* Подсвечиваем число успешных подключений зелёным. */
.connection-key-counters .success strong{color:var(--accent);font-size:21px}
/* Подсвечиваем число неудачных подключений красным. */
.connection-key-counters .failure strong{color:var(--danger);font-size:21px}
/* Раскладываем время последней попытки компактной строкой. */
.connection-key-last{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
/* Показываем последнюю безопасную причину ошибки отдельной заметкой. */
.connection-key-error{margin:0;padding:10px 12px;border:1px solid #5d2833;border-radius:10px;background:#24151a;color:#ff9cab;font-size:12px;overflow-wrap:anywhere}
/* Раскладываем настройки ключа вертикально и компактно. */
.connection-key-fields{display:grid;gap:10px}
/* Убираем лишние внешние отступы подписей карточки. */
.connection-key-fields label{margin:0}
/* Выравниваем действия карточки вправо. */
.connection-key-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
/* Показываем число новых обращений компактной меткой внутри меню. */
.nav-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:99px;background:var(--danger);color:#fff;font-size:10px;font-weight:850}
/* Превращаем открытую поддержку в точную сетку высотой с окно, чтобы форма ответа не уходила ниже экрана. */
.content.support-open{height:100dvh;max-width:none;padding-bottom:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
/* Оставляем над чатом только компактный промежуток после общей шапки. */
.content.support-open>header{margin-bottom:12px}
/* Растягиваем поддержку от левого до правого края рабочей области и до самого низа страницы. */
#supportPage{height:100%;min-height:0;margin:0 -34px;overflow:hidden}
/* Делим поддержку на колонку диалогов и переписку, занимая всю выделенную сеткой высоту. */
.support-layout{display:grid;grid-template-columns:minmax(250px,320px) minmax(420px,1fr);height:100%;min-height:0;max-height:none;overflow:hidden;border-right:0;border-bottom:0;border-left:0;border-radius:0}
/* Отделяем список диалогов от выбранного чата. */
.support-conversations{display:flex;min-width:0;flex-direction:column;border-right:1px solid var(--line)}
/* Выравниваем уменьшенный заголовок списка и ручное обновление. */
.support-list-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
/* Убираем случайные внешние отступы заголовка поддержки. */
.support-list-head h3,.support-chat-head h3{margin:0 0 1px;font-size:13px}
/* Уменьшаем подписи обеих шапок, сохраняя их читаемость. */
.support-list-head .muted,.support-chat-head .muted{font-size:9px}
/* Делаем кнопку обновления компактнее уменьшенной шапки. */
.support-list-head .table-action{padding:5px 8px;font-size:11px}
/* Разрешаем независимо прокручивать длинный список пользователей. */
.support-conversation-list{flex:1;overflow-y:auto;padding:8px}
/* Оформляем один диалог как компактную строку мессенджера. */
.support-conversation{display:flex;width:100%;align-items:center;gap:11px;padding:12px;border:0;border-radius:12px;background:transparent;color:var(--text);text-align:left}
/* Подсвечиваем выбранный диалог спокойным синим фоном. */
.support-conversation.active{background:#17304b}
/* Подсвечиваем строку при наведении без изменения размеров. */
.support-conversation:hover{background:#172432}
/* Рисуем текстовый аватар без сторонних изображений. */
.support-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:#203b55;color:var(--blue);font-size:12px;font-weight:850}
/* Складываем имя, превью и время в одну сжимаемую колонку. */
.support-preview{display:grid;min-width:0;flex:1;gap:4px}
/* Не даём длинному имени ломать ширину списка. */
.support-preview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
/* Обрезаем длинное последнее сообщение одной строкой. */
.support-preview small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
/* Показываем время последнего сообщения неброско. */
.support-preview time{color:#647283;font-size:9px}
/* Оформляем счётчик новых обращений пользователя. */
.support-conversation>b{display:grid;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:99px;background:var(--accent);color:#06110b;font-size:10px}
/* Собираем открытую переписку в три явных ряда, чтобы форма всегда оставалась внутри блока. */
.support-chat{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:#0b131c}
/* Отделяем компактную шапку выбранного пользователя от сообщений. */
.support-chat-head{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
/* Уменьшаем служебную подпись номера пользователя внутри чата. */
.support-chat-head .eyebrow{font-size:9px}
/* Сохраняем компактную кнопку перехода в профиль. */
.support-chat-head .table-action{padding:5px 8px;font-size:11px}
/* Делаем историю прокручиваемой независимо от всей страницы. */
.support-messages{display:flex;min-height:0;flex:1;flex-direction:column;gap:10px;overflow-y:auto;padding:16px 18px}
/* Оформляем обычный пузырь сообщения с безопасным переносом текста. */
.support-message{display:grid;max-width:min(72%,620px);gap:7px;padding:11px 13px;border-radius:14px;background:#1b2a38;overflow-wrap:anywhere;font-size:13px;line-height:1.5}
/* Выравниваем сообщение пользователя слева. */
.support-message.incoming{align-self:flex-start;border-bottom-left-radius:4px}
/* Выравниваем ответ администратора справа и выделяем акцентом. */
.support-message.outgoing{align-self:flex-end;border-bottom-right-radius:4px;background:#18559a}
/* Показываем дату и статус прочтения внутри пузыря. */
.support-message time{color:#a6b2c0;font-size:9px;text-align:right}
/* Центрируем системное уведомление отдельно от обычной переписки. */
.support-system-message{display:grid;align-self:center;max-width:78%;gap:5px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:#111c27;color:#b7c2cc;text-align:center;font-size:11px;line-height:1.45}
/* Смягчаем время системного уведомления. */
.support-system-message time{color:#667484;font-size:9px}
/* Закрепляем и немного поднимаем форму ответа над нижней границей переписки. */
.support-reply{position:sticky;z-index:2;bottom:0;display:grid;min-width:0;width:100%;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:10px 14px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -8px 22px #0005}
/* Делаем поле ответа компактным и не разрешаем ручному растягиванию ломать границы чата. */
.support-reply textarea{display:block;min-width:0;min-height:44px;max-height:120px;margin:0;resize:none;line-height:1.4}
/* Сохраняем удобную высоту кнопки рядом с полем. */
.support-reply button{min-height:44px}
/* Центрируем приглашение выбрать диалог. */
.support-empty{display:flex;min-height:180px;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:24px;color:var(--muted);text-align:center}
/* Уменьшаем пустое состояние внутри списка или истории. */
.support-empty.compact{min-height:110px;flex:0}
/* Оформляем всплывающее сообщение. */
.toast{position:fixed;right:24px;bottom:24px;padding:13px 17px;border-radius:11px;background:var(--accent);color:#06110b;font-weight:750;box-shadow:0 12px 40px #0009}
/* Адаптируем панель для планшета. */
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}.sidebar nav{grid-template-columns:repeat(3,1fr)}#logoutButton{margin-top:12px}.stats,.profile-stats{grid-template-columns:repeat(2,1fr)}.form-grid,.deployment-grid,.plan-create-form,.connection-key-form,.promocode-form{grid-template-columns:1fr 1fr}.connection-layer-options{grid-template-columns:1fr}.traffic-grid{grid-template-columns:repeat(2,1fr)}.host-settings{grid-template-columns:1fr 1fr}.app-release-grid,.profile-columns,.sales-hero{grid-template-columns:1fr}.funnel-grid{grid-template-columns:repeat(2,1fr)}.support-layout{min-height:520px;max-height:none;grid-template-columns:minmax(220px,280px) 1fr}}
/* Адаптируем формы для телефона. */
@media(max-width:560px){.content{padding:22px 14px 34px}.content.support-open{height:auto;min-height:100dvh;padding-bottom:0;overflow:visible}.sidebar{padding:16px}.sidebar nav{grid-template-columns:1fr 1fr}.page,#applicationContent,#tariffsContent,#promocodesContent,#promocodeDetailContent,#notificationsContent,#serverDetailContent,#userProfileContent,.server-view,.user-profile-panel{gap:18px}.panel-head{min-height:0;padding:15px 16px;align-items:stretch;flex-direction:column}.panel-head>button{align-self:flex-start}.user-filters{width:100%;align-items:stretch;flex-direction:column}.user-search{width:100%}.stats,.profile-stats,.form-grid,.traffic-grid,.host-settings,.traffic-mini-grid,.funnel-grid,.plan-create-form,.trial-settings,.connection-key-form,.promocode-form,.private-access-form,.profile-settings-form{grid-template-columns:1fr}.form-grid{padding:16px}.profile-settings-form{padding:16px}.profile-settings-form .profile-comment-field{grid-column:auto}.stats,.profile-stats{gap:11px}.stat{padding:17px}.traffic-card{padding:17px}.profile-comment-body{padding:16px}.profile-details dl{padding:6px 16px 14px}.profile-details dl div{align-items:flex-start;flex-direction:column;gap:5px}.profile-details dd{text-align:left}.nodes-list{padding:10px}.node-meta{padding:12px 14px}.node-actions{justify-content:flex-start;padding:12px 14px}.app-release-card,.promo-detail-card{padding:20px}.release-log{padding:12px}.release-entry{padding:15px}.promo-code-input{flex-direction:column}.promocode-note{padding:0 16px 16px}.notification-actions button{width:100%}th,td{padding:12px 14px}header,.detail-title,.node-card summary,.profile-hero,.section-heading,.connection-key-head,.promo-detail-card{align-items:flex-start;flex-direction:column}.profile-identity{align-items:flex-start}.profile-actions,.profile-tab-actions,.profile-account-actions{width:100%;justify-content:flex-start}.connection{margin-top:8px}.config-grid textarea{grid-column:auto}.server-tabs,.user-profile-tabs{width:100%}.server-tab,.user-profile-tab{min-width:0;flex:1}.detail-toolbar{align-items:stretch;flex-direction:column}.period-select{width:100%}.connection-key-grid{grid-template-columns:1fr;padding:12px}.connection-key-secret>div{align-items:stretch;flex-direction:column}.connection-key-counters{grid-template-columns:1fr}.connection-key-actions,.node-actions{justify-content:flex-start}#supportPage{height:auto;margin:0 -14px;overflow:visible}.support-layout{height:auto;min-height:calc(100dvh - 90px);grid-template-columns:1fr}.support-conversations{max-height:220px;border-right:0;border-bottom:1px solid var(--line)}.support-chat{height:calc(100dvh - 90px);min-height:480px}.support-message{max-width:88%}.support-reply{grid-template-columns:minmax(0,1fr) auto}.support-reply button{width:auto}.support-layout{border-top-left-radius:0;border-top-right-radius:0}.support-empty{min-height:130px}}