/* =====================================================================
   Тема «терминал» — по мотивам DarkCV (uiuxlabz) и фона Shuvo's Portfolio.
   Подключается ПОСЛЕДНЕЙ на всех страницах и переопределяет токены
   main.css/components.css, поэтому страницы почти не правятся по отдельности.
   Акцент — приглушённая мята вместо кислотного #00FF88 (решение владельца:
   без ядовитых цветов). Откат: убрать подключение этого файла и bg-net.js.
   ===================================================================== */

:root {
  /* палитра */
  --tt-bg: #0a0b0c;
  --tt-surface: rgba(12, 13, 15, 0.86);
  --tt-card: #131517;
  --tt-card-2: #1a1d20;
  --tt-border: #25292d;
  --tt-border-strong: #343a3f;
  --tt-text: #e4e7ea;
  --tt-muted: #8a9097;
  --tt-faint: #5f666d;
  --tt-accent: #52c79a;
  --tt-accent-hover: #6dd6ad;
  --tt-accent-dim: rgba(82, 199, 154, 0.12);
  --tt-accent-line: rgba(82, 199, 154, 0.38);
  --tt-glow: 0 0 22px rgba(82, 199, 154, 0.16);
  --tt-info: #6aaee0;
  --tt-warn: #d9a84e;
  --tt-danger: #e06c63;
  --tt-violet: #a091e6;
  --tt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tt-fast: 160ms;
  --tt-mid: 260ms;

  /* старые токены сайта -> новая палитра */
  --bs-body-bg: var(--tt-bg);
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --display-font: 'JetBrains Mono', ui-monospace, monospace;
  --mono-font: 'JetBrains Mono', ui-monospace, monospace;
  --brand-forest-dark: #0c0d0f;
  --brand-forest-medium: #15181a;
  --brand-forest-light: var(--tt-card-2);
  --brand-lime: var(--tt-accent);
  --brand-lime-hover: var(--tt-accent-hover);
  --brand-lime-translucent: var(--tt-accent-dim);
  --accent-cyan: var(--tt-muted);
  --accent-cyan-strong: var(--tt-info);
  --accent-cyan-translucent: rgba(106, 174, 224, 0.12);
  --accent-violet: var(--tt-violet);
  --accent-violet-translucent: rgba(160, 145, 230, 0.13);
  --text-main: var(--tt-text);
  --text-muted-green: var(--tt-muted);
  --text-sidebar-muted: var(--tt-faint);
  --card-background: var(--tt-card);
  --nested-block-bg: var(--tt-card-2);
  --border-light: var(--tt-border);
  --border-dark-green: rgba(255, 255, 255, 0.07);
  --sys-green: var(--tt-accent);
  --sys-green-bg: rgba(82, 199, 154, 0.13);
  --sys-red: var(--tt-danger);
  --sys-red-bg: rgba(224, 108, 99, 0.13);
  --sys-orange: var(--tt-warn);
  --sys-orange-bg: rgba(217, 168, 78, 0.13);
  --radius-lg: 10px;
  --radius-md: 8px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --glow-accent: var(--tt-glow);
}

/* ---------- основа ---------- */
html { background: var(--tt-bg); }
body { background: transparent !important; color: var(--tt-text); font-family: var(--bs-body-font-family); }
h1, h2, h3, h4, h5, h6, .page-title, .ui-modal-title { font-family: var(--display-font); letter-spacing: -0.02em; }
::selection { background: rgba(82, 199, 154, 0.28); color: #fff; }
:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* фон-«созвездие» (bg-net.js) */
#bg-net { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* ---------- шапка и меню ---------- */
.topnav {
  background: var(--tt-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tt-border) !important;
}
.topnav-brand, .topnav-brand span { font-family: var(--display-font); color: var(--tt-accent) !important; letter-spacing: -0.02em; }
.topnav-brand i { color: var(--tt-accent) !important; }
.topnav-link {
  position: relative;
  font-family: var(--display-font) !important;
  font-size: 0.76rem !important;
  letter-spacing: -0.02em;
  padding-left: 9px !important; padding-right: 9px !important;
  gap: 6px !important;
  color: var(--tt-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color var(--tt-mid) var(--tt-ease) !important;
}
.topnav-link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--tt-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tt-mid) var(--tt-ease);
}
.topnav-link:hover { color: var(--tt-text) !important; }
.topnav-link:hover::after { transform: scaleX(0.5); }
.topnav-link.active { color: var(--tt-accent) !important; }
.topnav-link.active::after { transform: scaleX(1); }
.topnav-link.active i, .topnav-link:hover i { color: inherit !important; }
.navbar-action-btn {
  background: var(--tt-card) !important;
  border: 1px solid var(--tt-border) !important;
  color: var(--tt-muted) !important;
  transition: border-color var(--tt-fast) var(--tt-ease), color var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease) !important;
}
.navbar-action-btn:hover { border-color: var(--tt-accent-line) !important; color: var(--tt-accent) !important; box-shadow: var(--tt-glow) !important; }

/* ---------- заголовки страниц в стиле терминала ---------- */
.page-title { color: var(--tt-text); }
.page-title::before { content: "> "; color: var(--tt-faint); font-weight: 500; }
.page-header p, .page-subtitle { font-family: var(--display-font); font-size: 0.8rem; color: var(--tt-muted); }
.page-header p::before, .page-subtitle::before { content: "// "; color: var(--tt-faint); }

/* ---------- кнопки ---------- */
.ui-btn, .btn-custom-primary, .btn-custom-secondary, .btn-custom-outline-primary, .btn-custom-outline-secondary,
.btn-custom-danger, .btn-custom-outline-danger, .btn-dark-custom, .btn-login {
  font-family: var(--display-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  border-radius: 8px !important;
  transition: background-color var(--tt-mid) var(--tt-ease), color var(--tt-mid) var(--tt-ease),
              border-color var(--tt-mid) var(--tt-ease), box-shadow var(--tt-mid) var(--tt-ease),
              transform var(--tt-fast) var(--tt-ease) !important;
}
.ui-btn:active:not(:disabled), .btn-custom-primary:active, .btn-login:active { transform: scale(0.97); }
.ui-btn-primary, .btn-custom-primary, .btn-login {
  background: var(--tt-accent) !important;
  border: 1px solid var(--tt-accent) !important;
  color: #07130e !important;
}
.ui-btn-primary:hover:not(:disabled), .btn-custom-primary:hover, .btn-login:hover {
  background: transparent !important;
  color: var(--tt-accent) !important;
  box-shadow: var(--tt-glow), inset 0 0 0 1px var(--tt-accent) !important;
}
.ui-btn-secondary, .ui-btn-ghost, .btn-custom-secondary, .btn-custom-outline-secondary, .btn-dark-custom {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--tt-border-strong) !important;
  color: var(--tt-text) !important;
}
.ui-btn-secondary:hover:not(:disabled), .ui-btn-ghost:hover:not(:disabled), .btn-custom-secondary:hover,
.btn-custom-outline-secondary:hover, .btn-dark-custom:hover {
  border-color: var(--tt-accent-line) !important;
  color: var(--tt-accent) !important;
  background: var(--tt-accent-dim) !important;
}
.ui-btn-danger, .btn-custom-danger, .btn-custom-outline-danger {
  background: rgba(224, 108, 99, 0.1) !important;
  border: 1px solid rgba(224, 108, 99, 0.45) !important;
  color: #ef8f87 !important;
}
.ui-btn-danger:hover:not(:disabled), .btn-custom-danger:hover, .btn-custom-outline-danger:hover {
  background: var(--tt-danger) !important; border-color: var(--tt-danger) !important; color: #170807 !important;
  box-shadow: 0 0 20px rgba(224, 108, 99, 0.22) !important;
}
.ui-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* переключатель проектов PEPE / No-Touch */
.project-switcher button, .infra-project-switcher button { font-family: var(--display-font) !important; transition: all var(--tt-mid) var(--tt-ease) !important; }

/* ---------- карточки ---------- */
body:not(.page-infra) .card, .ui-card, .ui-card-spotlight, .server-row, .stat-card, .metric-card, .billing-card, .domain-card {
  background: var(--tt-card) !important;
  border: 1px solid var(--tt-border) !important;
  border-radius: 10px !important;
  transition: border-color var(--tt-mid) var(--tt-ease), box-shadow var(--tt-mid) var(--tt-ease),
              transform var(--tt-mid) var(--tt-ease), background-color var(--tt-mid) var(--tt-ease) !important;
}
body:not(.page-infra) .card:hover, .ui-card:hover, .server-row:hover, .stat-card:hover, .metric-card:hover, .billing-card:hover, .domain-card:hover {
  border-color: var(--tt-accent-line) !important;
  box-shadow: var(--tt-glow) !important;
}
.server-row:hover, .stat-card:hover, .metric-card:hover { transform: translateY(-2px); }

/* ---------- поля ввода ---------- */
.form-control-custom, .form-select-custom, .ui-input, .table-search-input, .navbar-search-input,
.ui-modal input:not([type=checkbox]):not([type=radio]), .ui-modal select, .ui-modal textarea {
  background: #0e1012 !important;
  border: 1px solid var(--tt-border-strong) !important;
  color: var(--tt-text) !important;
  border-radius: 8px !important;
  transition: border-color var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease) !important;
}
.form-control-custom:focus, .form-select-custom:focus, .ui-input:focus, .table-search-input:focus,
.ui-modal input:focus, .ui-modal textarea:focus {
  border-color: var(--tt-accent) !important;
  box-shadow: 0 0 0 3px var(--tt-accent-dim) !important;
  outline: none !important;
}
::placeholder { color: var(--tt-faint) !important; }

/* ---------- таблицы и бейджи ---------- */
.table-custom thead th { font-family: var(--display-font); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tt-muted) !important; }
.table-custom tbody tr { transition: background-color var(--tt-fast) var(--tt-ease); }
.table-custom tbody tr:hover { background: rgba(82, 199, 154, 0.045) !important; }
.badge, .badge-table, .navbar-stat-pill, .ui-badge, .proj-badge, [class*="proj-"] { font-family: var(--display-font) !important; letter-spacing: 0; white-space: nowrap !important; }
/* крупные цифры - моноширинным, как счётчики в референсе */
.stat-value, .metric-value, .uptime-value { font-family: var(--display-font) !important; letter-spacing: -0.03em; }
.stat-label, .card-header .stat-label { font-family: var(--display-font); font-size: 0.78rem; color: var(--tt-muted) !important; }

/* ---------- окна ---------- */
.ui-modal, .infra-modal {
  background: #111315 !important;
  border: 1px solid var(--tt-border-strong) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(82, 199, 154, 0.05) !important;
  animation: tt-modal-in 220ms var(--tt-ease) both;
}
.ui-modal-overlay, .overlay { animation: tt-fade-in 200ms var(--tt-ease) both; backdrop-filter: blur(4px); }
@keyframes tt-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes tt-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ui-modal-header { border-bottom-color: var(--tt-border) !important; }
.ui-modal-footer { border-top-color: var(--tt-border) !important; }

/* уведомления */
.toast, .ui-toast { animation: tt-toast-in 260ms var(--tt-ease) both; border-radius: 10px !important; }
@keyframes tt-toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---------- появление при загрузке (bg-net.js раздаёт --tt-i) ---------- */
.tt-reveal { animation: tt-up 520ms var(--tt-ease) both; animation-delay: calc(var(--tt-i, 0) * 45ms); }
@keyframes tt-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* скроллбары */
::-webkit-scrollbar-thumb { background: #2a2f33 !important; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a4146 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  #bg-net { display: none; }
}

/* меню не помещается моноширинным шрифтом - на средних экранах без иконок (как в референсе) */
@media (max-width: 1700px) and (min-width: 1101px) {
  .topnav-link i { display: none; }
}

/* ---------- мастер новой ноды: цвет = информация ---------- */
.proto-card { --proto: var(--tt-accent); position: relative; overflow: hidden; }
.proto-card.proto-reality { --proto: var(--tt-info); }
.proto-card.proto-xhttp { --proto: var(--tt-accent); }
.proto-card.proto-grpc { --proto: var(--tt-violet); }
.proto-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.proto-head i {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 16px;
  color: var(--proto); background: color-mix(in srgb, var(--proto) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--proto) 30%, transparent);
  transition: transform var(--tt-mid) var(--tt-ease);
}
.proto-tag { font-family: var(--display-font); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--proto); opacity: 0.85; }
.proto-card:hover { border-color: color-mix(in srgb, var(--proto) 45%, transparent) !important; }
.proto-card:hover .proto-head i { transform: translateY(-1px) scale(1.06); }
.proto-card.on {
  border-color: var(--proto) !important;
  background: color-mix(in srgb, var(--proto) 7%, var(--tt-card)) !important;
  box-shadow: 0 0 0 1px var(--proto), 0 0 26px color-mix(in srgb, var(--proto) 16%, transparent) !important;
}
.proto-card.on::after { color: var(--proto) !important; }

/* сводка: левая цветная полоса по смыслу */
.ui-info-cell { position: relative; transition: border-color var(--tt-mid) var(--tt-ease); }
.ui-info-cell[class*="tone-"]::before, .ui-info-cell[class*="proto-"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cell-tone);
}
.ui-info-cell.tone-ok { --cell-tone: var(--tt-accent); }
.ui-info-cell.tone-info { --cell-tone: var(--tt-info); }
.ui-info-cell.tone-warn { --cell-tone: var(--tt-warn); }
.ui-info-cell.tone-muted { --cell-tone: var(--tt-faint); }
.ui-info-cell.proto-reality { --cell-tone: var(--tt-info); }
.ui-info-cell.proto-xhttp { --cell-tone: var(--tt-accent); }
.ui-info-cell.proto-grpc { --cell-tone: var(--tt-violet); }
.ui-info-cell.tone-ok .ui-info-value { color: #8fe0be; }
.ui-info-cell.tone-warn .ui-info-value { color: #e8c27e; }
.ui-info-cell.tone-info .ui-info-value { color: #9ccaf0; }
.ui-info-cell.tone-muted .ui-info-value { color: var(--tt-muted); }

/* шаги мастера: пройденные - мята, текущий - с мягким свечением */
.ui-steps-item.done .ui-steps-dot { background: var(--tt-accent) !important; color: #07130e !important; border-color: var(--tt-accent) !important; }
.ui-steps-item.on .ui-steps-dot { background: var(--tt-accent-dim) !important; border: 1px solid var(--tt-accent) !important; color: var(--tt-accent) !important; box-shadow: 0 0 0 4px var(--tt-accent-dim); }
.ui-steps-item.done + .ui-steps-line, .ui-steps-line.done { background: var(--tt-accent-line) !important; }
.ui-steps-label { font-family: var(--display-font); }
.ui-form-group-title { font-family: var(--display-font) !important; color: var(--tt-muted) !important; letter-spacing: 0.06em; }
.ui-form-group-title::before { content: "// "; color: var(--tt-faint); }
/* без fill-mode: «застывшая» анимация создаёт слой (stacking context), и
   выпадающий список уходил ПОД следующий блок окна (каскад, 2026-10-17) */
.ui-modal-body > * { animation: tt-up 300ms var(--tt-ease); }

/* окно каскада короткое: тело без прокрутки, иначе выпадающий список нод
   обрезался и уходил под блок bridge-юзеров */
#cascade-form, #cascade-form .ui-modal-body { overflow: visible !important; }
#cascade-form .ui-select-list { max-height: 280px; overflow-y: auto; }

/* =====================================================================
   Окна сущностей /infra (нода, профиль, хост, сквад) - переработка 2026-10-17:
   паспорт слева, вкладки справа, одна кнопка «Сохранить» внизу.
   ===================================================================== */
.insp2 {
  --acc: var(--tt-accent);
  width: min(1060px, 96vw);
  height: min(700px, calc((100vh - 110px) / 1.1875));
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  background: #101214;
  border: 1px solid var(--tt-border-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: tt-modal-in 220ms var(--tt-ease) both;
}
.insp2.acc-ok { --acc: var(--tt-accent); }
.insp2.acc-warn { --acc: var(--tt-warn); }
.insp2.acc-bad { --acc: var(--tt-danger); }
.insp2.acc-violet { --acc: var(--tt-violet); }
.insp2.acc-pink { --acc: #e58fb8; }
.insp2.acc-orange { --acc: var(--tt-warn); }

/* --- паспорт --- */
.insp2-side {
  display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto;
  padding: 22px 20px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 7%, #0d0f11), #0d0f11 220px);
  border-right: 1px solid var(--tt-border);
}
.insp2-id { display: grid; gap: 8px; }
.insp2-kicker { font-family: var(--display-font); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.insp2-kicker::before { content: "> "; color: var(--tt-faint); }
.insp2-title { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--tt-text); word-break: break-word; }
.insp2-title img.flag { vertical-align: 0; }
.insp2-pill {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: 999px; font: 600 0.74rem var(--display-font);
  border: 1px solid; 
}
.insp2-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.insp2-pill.t-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.1); }
.insp2-pill.t-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.1); }
.insp2-pill.t-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.4); background: rgba(224, 108, 99, 0.1); }
.insp2-pill.t-ok i { animation: tt-pulse 2s ease-in-out infinite; }
@keyframes tt-pulse { 50% { opacity: 0.45; } }

.insp2-facts { display: grid; gap: 2px; margin: 0; }
.insp2-fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
.insp2-fact:last-child { border-bottom: 0; }
.insp2-fact dt { display: flex; align-items: center; gap: 7px; font: 500 0.74rem var(--display-font); color: var(--tt-muted); }
.insp2-fact dt i { color: var(--tt-faint); font-size: 12px; }
.insp2-fact dd { margin: 0; font-size: 0.84rem; color: var(--tt-text); display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; word-break: break-word; }
.insp2-fact.t-warn dd, .insp2-fact.t-warn dt i { color: #e8c27e; }
.insp2-fact.t-bad dd, .insp2-fact.t-bad dt i { color: #ef8f87; }
.insp2-fact.t-info dt i { color: var(--tt-info); }
.insp2-fact .quiet, .insp2 .quiet { color: var(--tt-faint); }
.insp2-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--tt-text); font: inherit; text-align: left; border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  transition: color var(--tt-fast) var(--tt-ease), border-color var(--tt-fast) var(--tt-ease);
}
.insp2-link i { font-size: 10px; opacity: 0.5; }
.insp2-link:hover { color: var(--tt-accent); border-bottom-color: var(--tt-accent); }
.insp2-link.cascade { color: #8fd8b8; }

.proto-chip {
  --proto: var(--tt-info);
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  font: 600 0.72rem var(--display-font); color: var(--proto);
  background: color-mix(in srgb, var(--proto) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--proto) 30%, transparent);
}
.proto-chip.proto-xhttp { --proto: var(--tt-accent); }
.proto-chip.proto-grpc { --proto: var(--tt-violet); }
.proto-chip b { color: var(--tt-text); font-weight: 600; }

.insp2-cap { font: 600 0.66rem var(--display-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-faint); margin-bottom: 2px; }
.insp2-cap::before { content: "// "; }
.insp2-actions { display: grid; gap: 6px; }
.insp2-act {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--tt-border); border-radius: 9px;
  color: var(--tt-text); font: 500 0.82rem var(--bs-body-font-family); text-align: left; cursor: pointer;
  transition: border-color var(--tt-fast) var(--tt-ease), background-color var(--tt-fast) var(--tt-ease), transform var(--tt-fast) var(--tt-ease);
}
.insp2-act > i:first-child { color: var(--tt-muted); font-size: 14px; transition: color var(--tt-fast) var(--tt-ease); }
.insp2-act span { flex: 1; }
.insp2-act-go { font-size: 10px; color: var(--tt-faint); opacity: 0; transform: translateX(-4px); transition: all var(--tt-fast) var(--tt-ease); }
.insp2-act:hover { border-color: var(--tt-accent-line); background: var(--tt-accent-dim); }
.insp2-act:hover > i:first-child { color: var(--tt-accent); }
.insp2-act:hover .insp2-act-go { opacity: 1; transform: none; }
.insp2-act:active { transform: scale(0.985); }
.insp2-act.warn > i:first-child { color: var(--tt-warn); }
.insp2-act.warn:hover { border-color: rgba(217, 168, 78, 0.45); background: rgba(217, 168, 78, 0.08); }
.insp2-danger { margin-top: auto; padding-top: 6px; }
.insp2-danger .ui-btn { width: 100%; justify-content: center; }

/* --- правая часть --- */
.insp2-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.insp2-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 0 18px; border-bottom: 1px solid var(--tt-border); }
.insp2-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.insp2-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px 12px;
  border: 0; background: none; color: var(--tt-muted); cursor: pointer; white-space: nowrap;
  font: 600 0.8rem var(--display-font); transition: color var(--tt-fast) var(--tt-ease);
}
.insp2-tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--acc); transform: scaleX(0); transition: transform var(--tt-mid) var(--tt-ease);
}
.insp2-tab:hover { color: var(--tt-text); }
.insp2-tab.on { color: var(--tt-text); }
.insp2-tab.on i { color: var(--acc); }
.insp2-tab.on::after { transform: scaleX(1); }
.insp2-tab.solo { cursor: default; }
.insp2-head .insp-x { margin: 0 0 8px; width: 34px; height: 34px; border-radius: 9px; }
.insp2-body { overflow-y: auto; padding: 20px 22px 24px; display: grid; align-content: start; gap: 16px; animation: tt-up 240ms var(--tt-ease); }
.insp2-body .hint { margin: 0; color: var(--tt-muted); font-size: 0.84rem; }
.insp2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.insp2-grid .wide, .insp2-body > .field.wide { grid-column: 1 / -1; }
.insp2 .field { display: grid; gap: 6px; margin: 0; }
.insp2 .field > span { font: 500 0.76rem var(--display-font); color: var(--tt-muted); }
.insp2 .field small { color: var(--tt-faint); font-size: 0.74rem; }
.insp2 .field input {
  width: 100%; padding: 10px 12px; background: #0b0d0f; border: 1px solid var(--tt-border-strong); border-radius: 8px;
  color: var(--tt-text); font: 500 0.88rem var(--bs-body-font-family);
  transition: border-color var(--tt-fast) var(--tt-ease), box-shadow var(--tt-fast) var(--tt-ease);
}
.insp2 .field input:focus { outline: none; border-color: var(--tt-accent); box-shadow: 0 0 0 3px var(--tt-accent-dim); }
.insp2-note { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--tt-border); }
.insp2-note b { font: 600 0.76rem var(--display-font); color: var(--tt-muted); }
.insp2-note p { margin: 0; color: var(--tt-muted); font-size: 0.84rem; }
.insp2-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.84rem; }
.insp2-callout { display: flex; gap: 12px; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--tt-border); background: rgba(255, 255, 255, 0.025); }
.insp2-callout > i { font-size: 18px; color: var(--tt-muted); margin-top: 1px; }
.insp2-callout b { display: block; margin-bottom: 4px; color: var(--tt-text); }
.insp2-callout p { margin: 0; color: var(--tt-muted); font-size: 0.84rem; }
.insp2-callout.info { border-color: rgba(82, 199, 154, 0.35); background: rgba(82, 199, 154, 0.06); }
.insp2-callout.info > i { color: var(--tt-accent); }
.insp2-callout.warn { border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.07); }
.insp2-callout.warn > i { color: var(--tt-warn); }
.insp2-row { display: flex; flex-wrap: wrap; gap: 10px; }
.insp2-sub { margin: 4px 0 -6px; font: 600 0.72rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); }
.insp2-sub::before { content: "// "; }
.insp2-list { display: grid; gap: 6px; }
.insp2-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--tt-border); border-radius: 9px; color: var(--tt-text); font: inherit;
  transition: border-color var(--tt-fast) var(--tt-ease), background-color var(--tt-fast) var(--tt-ease);
}
.insp2-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp2-item > i { color: var(--tt-faint); font-size: 11px; }
.insp2-item:hover { border-color: var(--tt-accent-line); background: var(--tt-accent-dim); }
.insp2-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tt-faint); }
.insp2-item .dot.on { background: var(--tt-accent); box-shadow: 0 0 6px rgba(82, 199, 154, 0.6); }
.insp2-item .dot.off, .insp2-item .dot.warn { background: var(--tt-warn); }
.insp2-item .dot.bad { background: var(--tt-danger); }

/* чипы-галочки (сквады, ноды хоста) */
.insp2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--tt-border-strong); background: rgba(255, 255, 255, 0.025); color: var(--tt-muted);
  font: 500 0.84rem var(--bs-body-font-family); transition: all var(--tt-fast) var(--tt-ease);
}
.chip-check span i { width: 0; overflow: hidden; transition: width var(--tt-fast) var(--tt-ease); }
.chip-check:hover span { border-color: var(--tt-accent-line); color: var(--tt-text); }
.chip-check input:checked + span { border-color: var(--tt-accent); background: var(--tt-accent-dim); color: #bfeedb; }
.chip-check input:checked + span i { width: 14px; color: var(--tt-accent); }
.chip-check input:focus-visible + span { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* переключатели */
.insp2-switches { display: grid; gap: 8px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--tt-border); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color var(--tt-fast) var(--tt-ease); }
.switch-row:hover { border-color: var(--tt-border-strong); }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row .sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: #2a2f33; transition: background-color var(--tt-mid) var(--tt-ease); }
.switch-row .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #9aa1a8; transition: transform var(--tt-mid) var(--tt-ease), background-color var(--tt-mid) var(--tt-ease); }
.switch-row input:checked + .sw { background: rgba(217, 168, 78, 0.55); }
.switch-row input:checked + .sw::after { transform: translateX(16px); background: #fff; }
.switch-row input:focus-visible + .sw { outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.switch-row b { display: block; font-size: 0.86rem; color: var(--tt-text); }
.switch-row small { color: var(--tt-faint); font-size: 0.76rem; }
.insp2-more { border: 1px solid var(--tt-border); border-radius: 10px; padding: 0 14px; }
.insp2-more summary { cursor: pointer; padding: 12px 0; font: 600 0.8rem var(--display-font); color: var(--tt-muted); list-style: none; display: flex; gap: 8px; align-items: center; }
.insp2-more summary::-webkit-details-marker { display: none; }
.insp2-more summary::after { content: "+"; margin-left: auto; color: var(--tt-faint); transition: transform var(--tt-fast) var(--tt-ease); }
.insp2-more[open] summary::after { transform: rotate(45deg); }
.insp2-more[open] { padding-bottom: 14px; }
.insp2-more[open] > .insp2-grid { margin-bottom: 12px; }

/* низ: одна кнопка сохранения */
.insp2-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--tt-border); background: #0d0f11; }
.insp2-state { flex: 1; font: 500 0.78rem var(--display-font); color: var(--tt-faint); }
.insp2-state.dirty { color: #e8c27e; }
.insp2-state.dirty::before { content: "● "; }
.insp2-save:disabled { opacity: 0.45; }

@media (max-width: 860px) {
  .insp2 { grid-template-columns: 1fr; height: calc((100vh - 90px) / 1.1875); }
  .insp2-side { max-height: 40%; border-right: 0; border-bottom: 1px solid var(--tt-border); }
  .insp2-grid { grid-template-columns: 1fr; }
}
.insp2 .field { align-content: start; }
.insp2-fact dd { overflow-wrap: anywhere; }
.insp2-side .proto-chip { white-space: nowrap; font-size: 0.68rem; padding: 2px 7px; }
.insp2-fact { padding: 6px 0; }
.insp2-side { gap: 14px; }
.insp2-act { padding: 8px 11px; }

/* --- окно конфига профиля (cfg2): навигатор слева, редактор выбранного справа --- */
.insp2.cfg2 { width: min(1180px, 96vw); grid-template-columns: 320px minmax(0, 1fr); }
.cfg2 .insp2-side { gap: 12px; }
.cfg2-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--tt-border); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.cfg2-mode button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--tt-muted); font: 500 0.78rem var(--display-font); cursor: pointer; transition: all var(--tt-fast) var(--tt-ease); }
.cfg2-mode button:hover { color: var(--tt-text); }
.cfg2-mode button.on { background: rgba(160, 145, 230, 0.16); color: var(--tt-text); }
.cfg2-mode button.on i { color: var(--acc); }
.cfg2-filter { width: 100%; padding: 8px 11px; border: 1px solid var(--tt-border); border-radius: 9px; background: #0c0e10; color: var(--tt-text); font: 0.8rem var(--display-font); }
.cfg2-filter:focus { outline: none; border-color: var(--acc); }
.cfg2-nav { display: grid; gap: 4px; align-content: start; }
.cfg2-nav .insp2-cap { margin-top: 8px; }
.cfg2-nav .hint { margin: 0 0 4px; font-size: 0.78rem; color: var(--tt-faint); }
.cfg2-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; transition: background var(--tt-fast) var(--tt-ease), border-color var(--tt-fast) var(--tt-ease); }
.cfg2-item:hover { background: rgba(255, 255, 255, 0.04); }
.cfg2-item.on { background: rgba(160, 145, 230, 0.1); border-color: rgba(160, 145, 230, 0.4); }
.cfg2-item-txt { display: grid; min-width: 0; gap: 1px; }
.cfg2-item-txt b { font: 600 0.8rem var(--display-font); color: var(--tt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg2-item-txt small { font-size: 0.72rem; color: var(--tt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg2-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--tt-faint); }
.cfg2-dot.proto-reality { background: var(--tt-info); }
.cfg2-dot.proto-xhttp { background: var(--tt-accent); }
.cfg2-dot.proto-grpc { background: var(--tt-violet); }
.cfg2-dot.bridge { background: var(--tt-accent); box-shadow: 0 0 8px rgba(82, 199, 154, 0.6); }
.cfg2-dot.block { background: var(--tt-danger); }
.cfg2-dot.plain { background: #7d838d; }
.cfg2-editor { display: grid; gap: 14px; }
.cfg2-editor .cfg-head { display: none; }
.cfg2-editor .cfg-body { padding: 0; display: grid; gap: 14px; }
.cfg2-code { height: calc((100vh - 110px) / 1.1875 - 330px); min-height: 320px; }
.insp2-state.dirty { color: #e8c27e; }
@media (max-width: 860px) { .insp2.cfg2 { grid-template-columns: 1fr; } }

/* --- без «мигания» при перерисовке уже открытого окна + аккуратные скроллы --- */
.overlay.still, .overlay.still .insp2, .overlay.still .ui-modal, .overlay.still .infra-modal,
.overlay.still .insp2-body, .overlay.still .ui-modal-body > * { animation: none !important; }
.overlay.still .insp2-body.tab-in { animation: tt-up 200ms var(--tt-ease) !important; }
.insp2-tabs { overflow-y: hidden; scrollbar-width: none; }
.insp2 .insp2-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* .infra-embed задаёт scrollbar-color, оно наследуется и в Chrome включает системный скролл со стрелками */
.insp2, .insp2 * { scrollbar-color: auto; scrollbar-width: auto; }
.insp2 .insp2-tabs { scrollbar-width: none; }
/* в Chrome стандартные scrollbar-* отключают ::-webkit-scrollbar (и стрелки остаются) - только для Firefox */
@supports not selector(::-webkit-scrollbar) { .insp2 *, .insp2 { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } }
.insp2 ::-webkit-scrollbar { width: 6px; height: 6px; }
.insp2 ::-webkit-scrollbar-button { display: none; height: 0; }
.insp2 ::-webkit-scrollbar-track { background: transparent; }
.insp2 ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; }
.insp2 ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }
/* окно не заезжает под верхнее меню сайта на невысоких экранах */
.insp2 { height: min(700px, calc((100vh - 190px) / 1.1875)); margin-top: calc(64px / 1.1875); }
/* окно крупнее: почти на весь экран под меню, все кнопки слева помещаются */
.insp2 { width: min(1240px, 94vw); height: calc((100vh - 120px) / 1.1875); margin-top: calc(80px / 1.1875); }
.insp2.cfg2 { width: min(1280px, 94vw); }
.insp2-fact.t-ok dt i { color: var(--tt-accent); }
.online-chip { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font: 600 0.8rem var(--display-font); color: var(--tt-muted); border: 1px solid var(--tt-border); background: rgba(255, 255, 255, 0.03); }
.online-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.online-chip.on { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.1); }
.online-chip.on i { box-shadow: 0 0 8px currentColor; animation: tt-pulse 2s ease-in-out infinite; }

/* --- нагрузка нод из панели Remnawave на дашборде --- */
.sr-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sr-metrics:empty { display: none; }
.nm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font: 500 0.74rem var(--display-font); border: 1px solid var(--tt-border); background: rgba(255, 255, 255, 0.03); color: var(--tt-muted); white-space: nowrap; }
.nm-pill i { font-size: 12px; }
.nm-pill b { color: inherit; font-weight: 700; }
.nm-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.35); background: rgba(82, 199, 154, 0.08); }
.nm-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.09); }
.nm-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.1); }
.nm-info { color: #9cc8ec; border-color: rgba(106, 174, 224, 0.35); background: rgba(106, 174, 224, 0.08); }
.nm-muted { color: var(--tt-faint); }
.cert-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font: 600 0.78rem var(--display-font); border: 1px solid var(--tt-border); }
.cert-chip.t-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.1); }
.cert-chip.t-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.1); }
.cert-chip.t-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.1); }

/* «+ Новая нода» - голубая, чтобы не путалась с зелёной кнопкой проекта PEPE
   (!important - как у .ui-btn-primary выше, иначе не перебить) */
.ui-btn.btn-new-node {
  background: var(--tt-info) !important; border-color: var(--tt-info) !important; color: #06121c !important;
}
.ui-btn.btn-new-node:hover:not(:disabled) {
  background: transparent !important; color: var(--tt-info) !important;
  box-shadow: 0 0 18px rgba(106, 174, 224, 0.35), inset 0 0 0 1px var(--tt-info) !important;
}

/* --- окно установки: кнопка «свернуть» и плашка свёрнутой установки --- */
.progress-head { gap: 8px; }
.progress-head h3 { flex: 1; }
#progress-mini { position: fixed; right: 22px; bottom: 22px; z-index: 1060; display: flex; align-items: stretch; gap: 0;
  max-width: min(440px, calc(100vw - 32px)); background: #121417; border: 1px solid var(--tt-border-strong); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); overflow: hidden; animation: tt-up 220ms var(--tt-ease); }
#progress-mini[hidden] { display: none; }
#progress-mini .pm-main { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 0; background: transparent; color: var(--tt-text); cursor: pointer; text-align: left; min-width: 0; }
#progress-mini .pm-main:hover { background: rgba(255, 255, 255, 0.04); }
#progress-mini .pm-main > .bi { color: var(--tt-muted); font-size: 13px; }
#progress-mini .pm-text { display: grid; min-width: 0; gap: 2px; }
#progress-mini .pm-text b { font: 600 0.82rem var(--display-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progress-mini .pm-text small { font-size: 0.74rem; color: var(--tt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#progress-mini .pm-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--tt-info); }
#progress-mini.running .pm-dot { animation: tt-pulse 1.2s ease-in-out infinite; box-shadow: 0 0 10px var(--tt-info); }
#progress-mini.reconnecting .pm-dot { background: var(--tt-warn); box-shadow: 0 0 10px var(--tt-warn); }
#progress-mini.ok .pm-dot { background: var(--tt-accent); }
#progress-mini.fail .pm-dot { background: var(--tt-danger); }
#progress-mini .pm-x { border: 0; border-left: 1px solid var(--tt-border); background: transparent; color: var(--tt-muted); padding: 0 13px; cursor: pointer; }
#progress-mini .pm-x:hover { color: var(--tt-danger); background: rgba(224, 108, 99, 0.08); }
/* Окно установки - поверх всего (и верхнего меню), высота по экрану: заголовок
   с «свернуть»/«закрыть» всегда виден. vh делим на zoom страницы (1.1875). */
#progress-panel {
  z-index: 1100 !important;
  top: calc(16px / 1.1875) !important;
  transform: translate(-50%, 0) scale(0.98) !important;
  height: calc((100vh - 32px) / 1.1875) !important;
  max-height: none !important;
}
#progress-panel.open { transform: translate(-50%, 0) scale(1) !important; }
#progress-mini { z-index: 1100; }
.infra-portal { font: 14px/1.45 var(--font); color: var(--text); }
.infra-portal button { font: inherit; color: inherit; cursor: pointer; }

/* --- окно «Новая нода» (wiz2): живая карточка слева + шаги-вкладки справа --- */
.insp2.wiz2 { width: min(1240px, 94vw); }
.insp2-callout.bad { border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.08); }
.insp2-callout.bad > i { color: var(--tt-danger); }
.wiz2 .insp2-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.wiz2 .insp2-tab.done { color: var(--tt-muted); }
.wiz2-num { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%;
  font: 600 0.7rem var(--display-font); border: 1px solid var(--tt-border-strong); color: var(--tt-muted); }
.wiz2 .insp2-tab.on .wiz2-num { border-color: var(--acc); color: var(--acc); }
.wiz2 .insp2-tab.done .wiz2-num { background: rgba(82, 199, 154, 0.15); border-color: rgba(82, 199, 154, 0.5); color: var(--tt-accent); }
.wiz2-check { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wiz2-check .hint { flex: 1; min-width: 220px; }
.wiz2-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; border: 1px solid var(--tt-border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.wiz2-seg button { display: grid; justify-items: start; gap: 2px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--tt-muted); text-align: left; transition: all var(--tt-fast) var(--tt-ease); }
.wiz2-seg button i { font-size: 16px; margin-bottom: 2px; }
.wiz2-seg button b { color: var(--tt-text); font: 600 0.84rem var(--display-font); }
.wiz2-seg button small { font-size: 0.74rem; }
.wiz2-seg button:hover { background: rgba(255, 255, 255, 0.04); }
.wiz2-seg button.on { background: rgba(82, 199, 154, 0.1); border-color: rgba(82, 199, 154, 0.45); }
.wiz2-seg button.on i { color: var(--tt-accent); }
.wiz2-seg.small button { justify-items: center; padding: 8px; }
.wiz2 .insp2-grid .wide { grid-column: 1 / -1; }
.wiz2 .insp2-foot .ui-btn i { margin: 0 4px; }

/* =====================================================================
   Дашборд (переработка 2026-10-18): карточка сервера в 2 строки с полосой
   статуса слева + блок «Проблемные серверы» над историей событий.
   ===================================================================== */
.server-row {
  display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important;
  position: relative; padding: 13px 16px 13px 20px !important; overflow: hidden;
}
.server-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tt-accent); opacity: 0.85; }
.server-row.down::before, .server-row.port_down::before { background: var(--tt-danger); }
.server-row.blocked_local::before { background: var(--tt-warn); }
.server-row.blocked_remote::before { background: #d8c45a; }
.sr-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sr-top .sr-name { font: 600 0.95rem var(--display-font); color: var(--tt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-hoster { font-size: 0.74rem; color: var(--tt-faint); white-space: nowrap; }
.sr-spacer { flex: 1; }
.sr-top .sr-uptime-inline { margin: 0; font-size: 0.74rem; color: var(--tt-muted); }
.sr-top .badge-table { white-space: nowrap; }
.sr-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.sr-bottom .sr-conn-row { gap: 6px; flex-wrap: nowrap; }
.sr-bottom .sr-ip, .sr-bottom .sr-pass { padding: 4px 9px; font-size: 0.78rem; }
.sr-port-in { color: var(--tt-warn); font-weight: 600; }
.sr-bottom .sr-metrics { margin: 0; min-width: 0; }
.sr-home { display: contents; }
.nm-home { color: #b9c6d6; border-color: rgba(185, 198, 214, 0.25); }
.sr-bottom .sr-actions { gap: 5px; }
.server-row.sr-flash { animation: sr-flash 1.4s var(--tt-ease); }
@keyframes sr-flash { 0%, 60% { box-shadow: 0 0 0 2px var(--tt-info), 0 0 24px rgba(106, 174, 224, 0.35); } 100% { box-shadow: none; } }
@media (max-width: 1100px) {
  .sr-bottom { grid-template-columns: 1fr; }
  .sr-top { flex-wrap: wrap; }
}

/* --- правая колонка: проблемы сверху (по содержимому), история - остаток --- */
.problems-card { flex: 0 0 auto; max-height: 46%; display: flex; flex-direction: column; }
.problems-card #problems-list { overflow-y: auto; margin: 0 -16px; padding: 0 16px; display: grid; gap: 6px; }
.side-panel-title .count-pill { margin-left: auto; padding: 1px 9px; border-radius: 999px; font: 600 0.74rem var(--display-font); border: 1px solid var(--tt-border); }
.side-panel-title { display: flex; align-items: center; gap: 8px; }
.count-pill.pc-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.1); }
.count-pill.pc-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.45); background: rgba(217, 168, 78, 0.1); }
.count-pill.pc-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.5); background: rgba(224, 108, 99, 0.12); }
.problems-ok { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: #7fdcb6; font-size: 0.86rem; }
.problems-ok i { font-size: 18px; }
.problem-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--tt-border); border-left-width: 3px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.02); color: var(--tt-text); text-align: left; cursor: pointer;
  transition: background var(--tt-fast) var(--tt-ease), transform var(--tt-fast) var(--tt-ease); animation: tt-up 220ms var(--tt-ease); }
.problem-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(2px); }
.problem-item.pi-bad { border-left-color: var(--tt-danger); }
.problem-item.pi-warn { border-left-color: var(--tt-warn); }
.pi-flag { padding-top: 2px; }
.pi-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pi-body > b { font: 600 0.86rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-host { font: 0.72rem var(--display-font); color: var(--tt-faint); }
.pi-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.pi-reason { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; border: 1px solid; }
.pi-reason.pr-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.4); background: rgba(224, 108, 99, 0.08); }
.pi-reason.pr-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.08); }
.pi-go { color: var(--tt-faint); margin-top: 4px; }
/* нижняя строка карточки - одна лента слева направо, кнопки - в верхней строке */
.sr-bottom { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 8px !important; }
.sr-bottom .sr-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-top .sr-actions { display: flex; gap: 5px; margin-left: 6px; }
.sr-top .sr-actions .ui-btn-sm { width: 30px; height: 30px; }
@media (max-width: 1100px) { .sr-top .sr-actions { margin-left: 0; } }

/* --- история событий: компактные строки в стиле карточек --- */
.events-card #events-list { display: grid; gap: 4px; align-content: start; }
.ev-day { margin: 8px 0 2px; font: 600 0.68rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); }
.ev-day::before { content: "// "; }
.ev-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 9px; border: 1px solid transparent; transition: background var(--tt-fast) var(--tt-ease); animation: tt-up 220ms var(--tt-ease); }
.ev-item:hover { background: rgba(255, 255, 255, 0.035); border-color: var(--tt-border); }
.ev-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.ev-ok .ev-icon { color: #7fdcb6; background: rgba(82, 199, 154, 0.12); }
.ev-warn .ev-icon { color: #e8c27e; background: rgba(217, 168, 78, 0.12); }
.ev-bad .ev-icon { color: #ef8f87; background: rgba(224, 108, 99, 0.12); }
.ev-muted .ev-icon { color: var(--tt-muted); background: rgba(255, 255, 255, 0.05); }
.ev-body { display: grid; min-width: 0; }
.ev-body b { font: 600 0.82rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tt-text); }
.ev-host { font: 0.7rem var(--display-font); color: var(--tt-faint); }
.ev-state { font-size: 0.74rem; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.ev-ok .ev-state { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.35); }
.ev-warn .ev-state { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); }
.ev-bad .ev-state { color: #ef8f87; border-color: rgba(224, 108, 99, 0.4); }
.ev-muted .ev-state { color: var(--tt-muted); border-color: var(--tt-border); }
.ev-time { font: 0.74rem var(--display-font); color: var(--tt-muted); font-variant-numeric: tabular-nums; }

/* --- карточка сервера v3: блок доступа слева (IP + порт, под ними пароль),
   справа плитки показателей --- */
.sr-bottom { display: grid !important; grid-template-columns: minmax(250px, auto) minmax(0, 1fr) !important; gap: 14px !important; align-items: stretch !important; }
.sr-access { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; gap: 6px; }
.sr-access .sr-ip, .sr-access .sr-pass, .sr-access .sr-port { padding: 6px 10px !important; font-size: 0.82rem !important; border-radius: 8px; }
.sr-access .sr-pass { grid-column: 1 / -1; justify-self: start; }
.sr-access .sr-port { display: inline-flex; align-items: center; gap: 5px; color: var(--tt-muted); }
.sr-access .sr-port b { color: var(--tt-warn); }
.sr-nopass { color: var(--tt-faint) !important; font-family: inherit !important; }
.sr-bottom .sr-metrics { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px !important; align-content: center; }
.mt { position: relative; display: grid; gap: 1px; padding: 7px 10px 8px; border-radius: 9px; border: 1px solid var(--tt-border);
  background: rgba(255, 255, 255, 0.025); overflow: hidden; min-width: 0; }
.mt-wide { grid-column: span 2; }
.mt-l { display: flex; align-items: center; gap: 5px; font: 500 0.66rem var(--display-font); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-l i { font-size: 11px; }
.mt-v { font: 600 1rem var(--display-font); color: var(--tt-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-v small { font-size: 0.68rem; font-weight: 500; color: var(--tt-muted); }
.mt-s { font-size: 0.68rem; color: var(--tt-muted); white-space: nowrap; }
.mt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.mt-bar > i { display: block; height: 100%; background: currentColor; border-radius: 0 2px 2px 0; transition: width 0.6s var(--tt-ease); }
.mt-ok { color: #7fdcb6; } .mt-ok .mt-l i { color: #7fdcb6; }
.mt-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.06); } .mt-warn .mt-v, .mt-warn .mt-l i { color: #e8c27e; }
.mt-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.07); } .mt-bad .mt-v, .mt-bad .mt-l i { color: #ef8f87; }
.mt-info .mt-l i { color: var(--tt-info); }
.mt-home .mt-l i { color: #b9c6d6; }
.mt-muted .mt-v { color: var(--tt-muted); }
.mt-ok .mt-v { color: var(--tt-text); }
@media (max-width: 1100px) { .sr-bottom { grid-template-columns: 1fr !important; } }
.sr-bottom .sr-metrics { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; }
.mt { padding: 6px 9px 7px; }
.mt-v { font-size: 0.95rem; }
.mt-wide { grid-column: span 2; }
.sr-bottom { grid-template-columns: auto minmax(0, 1fr) !important; }
.sr-bottom .sr-metrics { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important; }
.mt-s { font-size: 0.64rem; }

/* домашний ПК - отдельная плашка в верхней строке, метрики компактнее */
.sr-top .sr-home { display: inline-flex; gap: 6px; }
.home-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font: 500 0.74rem var(--display-font);
  border: 1px solid var(--tt-border); background: rgba(255, 255, 255, 0.03); color: var(--tt-muted); white-space: nowrap; }
.home-chip i { font-size: 11px; }
.home-chip b { color: var(--tt-text); font-weight: 600; }
.home-chip .hc-name { color: var(--tt-text); font-weight: 600; }
.home-chip .hc-sep { width: 1px; height: 11px; background: var(--tt-border-strong); }
.home-chip.hc-ok i { color: #b9c6d6; }
.home-chip.hc-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.08); }
.home-chip.hc-bad b, .home-chip.hc-bad .hc-name { color: #ef8f87; }
.sr-bottom .sr-metrics { grid-template-columns: repeat(auto-fill, minmax(78px, 104px)) !important; justify-content: start; }
.mt { padding: 5px 8px 6px; border-radius: 8px; }
.mt-l { font-size: 0.6rem; }
.mt-v { font-size: 0.86rem; }
.sr-bottom .sr-metrics { display: flex !important; flex-wrap: nowrap; gap: 6px !important; }
.sr-bottom .sr-metrics .mt { flex: 1 1 0; min-width: 0; max-width: 112px; }
.sr-bottom .sr-metrics .mt-wide { max-width: 220px; flex-grow: 2; }
@media (max-width: 1100px) { .sr-bottom .sr-metrics { flex-wrap: wrap; } }
/* имя сервера важнее хостера: ужимается хостер, имя - только если совсем нет места */
.sr-top .sr-name { flex: 0 1 auto; min-width: 90px; max-width: 46%; }
.sr-top .proj-badge { flex-shrink: 0; }
.sr-top .sr-hoster { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sr-top .sr-home, .sr-top .sr-uptime-inline, .sr-top .badge-table, .sr-top .sr-actions { flex-shrink: 0; }
/* домашний ПК - отдельный блок справа в нижней строке, за разделителем */
.sr-bottom { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.sr-bottom .sr-home { display: flex; flex-direction: column; gap: 4px; justify-content: center; padding-left: 14px; border-left: 1px dashed var(--tt-border-strong); }
.sr-bottom .sr-home:empty { display: none; }
.home-box { display: grid; gap: 2px; font: 0.74rem var(--display-font); color: var(--tt-muted); white-space: nowrap; }
.home-box .hb-name { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tt-text); font-size: 0.78rem; }
.home-box .hb-name i { color: #b9c6d6; font-size: 11px; }
.home-box .hb-vals { display: flex; align-items: center; gap: 7px; }
.home-box .hb-vals b { color: var(--tt-text); font-weight: 600; }
.home-box .hc-sep { width: 1px; height: 10px; background: var(--tt-border-strong); }
.home-box.hc-bad .hb-name, .home-box.hc-bad .hb-vals b, .home-box.hc-bad .hb-name i { color: #ef8f87; }
.sr-top .sr-name { max-width: none; }
@media (max-width: 1100px) { .sr-bottom .sr-home { border-left: 0; padding-left: 0; } }
.sr-top .sr-name { min-width: 0; }

/* домашний ПК v2: шапка (имя, давность) + цветные мини-показатели */
.home-box { display: grid; gap: 5px; padding: 6px 10px 7px; border-radius: 9px; border: 1px solid var(--tt-border); background: rgba(185, 198, 214, 0.04); }
.home-box.hc-bad { border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.07); }
.home-box .hb-head { display: flex; align-items: center; gap: 6px; font: 600 0.74rem var(--display-font); color: var(--tt-text); }
.home-box .hb-head i { color: #b9c6d6; font-size: 11px; }
.home-box.hc-bad .hb-head, .home-box.hc-bad .hb-head i { color: #ef8f87; }
.home-box .hb-head em { margin-left: auto; padding-left: 8px; font: 400 0.64rem var(--display-font); font-style: normal; color: var(--tt-faint); }
.home-box .hb-row { display: flex; gap: 10px; }
.hb-stat { display: grid; line-height: 1.15; }
.hb-stat small { font: 500 0.58rem var(--display-font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-faint); }
.hb-stat b { font: 600 0.8rem var(--display-font); white-space: nowrap; }
.hs-ok b { color: #7fdcb6; }
.hs-warn b { color: #e8c27e; }
.hs-slow b { color: #f0a46a; }
.hs-bad b { color: #ef8f87; }
.hs-muted b { color: var(--tt-muted); }
.sr-bottom .sr-home { border-left: 0 !important; padding-left: 0 !important; }

/* подсказка статуса - вниз и поверх соседних карточек, не обрезается краем */
.server-row { overflow: visible !important; }
.server-row::before { border-radius: 12px 0 0 12px; }
.server-row:hover { z-index: 6; }
.sr-top .tooltip-wrap::after { bottom: auto !important; top: calc(100% + 8px); right: 0; transform: translateY(-4px); z-index: 40; }
.sr-top .tooltip-wrap:hover::after { transform: translateY(0); }
.home-box .hb-row { gap: 12px; }
.sr-bottom .sr-metrics .mt { min-width: 64px; }
.mt-l { letter-spacing: 0.02em; gap: 4px; } .mt-v small { font-size: 0.62rem; }
@media (max-width: 1750px) { .mt-l i { display: none; } }

/* клиенты онлайн - текстом под портом, рядом с паролем */
.sr-access .sr-pass { grid-column: auto !important; }
.sr-online-slot { display: flex; align-items: center; }
.sr-online { display: inline-flex; align-items: center; gap: 7px; padding: 0 4px; font: 500 0.82rem var(--display-font); color: var(--tt-muted); white-space: nowrap; }
.sr-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--tt-faint); }
.sr-online b { font-size: 1rem; font-weight: 700; color: var(--tt-muted); font-variant-numeric: tabular-nums; }
.sr-online.on { color: #8fd8b8; }
.sr-online.on b { color: #7fdcb6; }
.sr-online.on i { background: var(--tt-accent); box-shadow: 0 0 8px var(--tt-accent); animation: tt-pulse 2s ease-in-out infinite; }

/* =====================================================================
   Подписки (/subscriptions): реальная доступность серверов из подписки
   ===================================================================== */
.sub-card { background: var(--tt-card, #131517); border: 1px solid var(--tt-border); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
.sub-card.is-paused { opacity: 0.65; }
.sub-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; padding: 18px 20px; border-bottom: 1px solid var(--tt-border); }
.sub-head h2 { margin: 0 0 6px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; color: var(--tt-text); }
.sub-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--tt-muted); }
.sub-meta i { margin-right: 5px; color: var(--tt-faint); }
.sub-sum { display: flex; gap: 8px; align-items: flex-start; }
.sub-chip { padding: 4px 11px; border-radius: 999px; font: 500 0.78rem var(--display-font); border: 1px solid var(--tt-border); color: var(--tt-muted); white-space: nowrap; }
.sub-chip b { font-weight: 700; margin-right: 3px; }
.sub-chip.c-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.08); }
.sub-chip.c-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.1); }
.sub-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.sub-list { display: grid; }
.sub-row { display: grid; grid-template-columns: 10px minmax(0, 2.2fr) minmax(150px, 1.1fr) 196px 74px 150px; gap: 14px; align-items: center; padding: 11px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background var(--tt-fast) var(--tt-ease); }
.sub-row:last-child { border-bottom: 0; }
.sub-row:hover { background: rgba(255, 255, 255, 0.02); }
.sub-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tt-faint); }
.is-ok .sub-dot { background: var(--tt-accent); box-shadow: 0 0 8px rgba(82, 199, 154, 0.6); }
.is-bad .sub-dot { background: var(--tt-danger); box-shadow: 0 0 8px rgba(224, 108, 99, 0.6); }
.is-wait .sub-dot { background: var(--tt-info); animation: tt-pulse 1.4s ease-in-out infinite; }
.is-bad { background: rgba(224, 108, 99, 0.04); }
.is-gone { opacity: 0.55; }
.sub-name { min-width: 0; }
.sub-title { color: var(--tt-text); font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-flag { width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; margin: 0 2px; }
.sub-proto { font-size: 0.72rem; color: var(--tt-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-proto .mono, .sub-meta .mono { font-family: var(--display-font); }
.sub-err { margin-top: 4px; font-size: 0.76rem; color: #ef8f87; display: flex; gap: 6px; align-items: baseline; }
.sub-exit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--tt-muted); }
.sub-exit b { color: var(--tt-text); font-family: var(--display-font); }
.sub-exit span { font-family: var(--display-font); font-size: 0.72rem; }
.sub-exit.warn b, .sub-exit.warn i { color: #e8c27e; }
.sub-muted { color: var(--tt-faint); }
.sub-spark { width: 192px; height: 22px; display: block; }
.sub-spark .sp-ok { fill: rgba(82, 199, 154, 0.75); }
.sub-spark .sp-warn { fill: rgba(217, 168, 78, 0.8); }
.sub-spark .sp-slow { fill: rgba(224, 140, 90, 0.85); }
.sub-spark .sp-bad { fill: rgba(224, 108, 99, 0.85); }
.sub-col-up { display: grid; justify-items: end; }
.sub-col-up small { font-size: 0.66rem; color: var(--tt-faint); }
.sub-up { font: 700 0.86rem var(--display-font); }
.up-ok { color: #7fdcb6; } .up-warn { color: #e8c27e; } .up-bad { color: #ef8f87; } .up-muted { color: var(--tt-faint); }
.sub-col-state { text-align: right; }
.sub-ms { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 0.8rem var(--display-font); border: 1px solid var(--tt-border); }
.ms-ok { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.08); }
.ms-warn { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.08); }
.ms-slow { color: #eba27a; border-color: rgba(224, 140, 90, 0.45); background: rgba(224, 140, 90, 0.08); }
.sub-state { font: 500 0.76rem var(--display-font); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--tt-border); white-space: nowrap; }
.st-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.1); }
.st-wait { color: #9cc8ec; border-color: rgba(106, 174, 224, 0.4); }
.st-gone { color: var(--tt-faint); }
.sub-hint { display: block; margin-top: 6px; color: var(--tt-faint); font-size: 0.76rem; }
.spin { animation: sub-spin 1s linear infinite; display: inline-block; }
@keyframes sub-spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) {
  .sub-row { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .sub-col-exit, .sub-col-spark, .sub-col-up { grid-column: 2 / -1; }
  .sub-col-spark, .sub-col-up { display: none; }
  .sub-col-state { grid-column: 3; grid-row: 1; }
}
.sub-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sub-hwid-box { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--tt-border); border-radius: 10px; font-size: 0.8rem; color: var(--tt-muted); background: rgba(255, 255, 255, 0.02); }
.sub-hwid-box b { color: var(--tt-text); font-family: var(--display-font); }
.sub-head h2 .proj-badge { font-size: 0.66rem; }

/* --- подписки v2: раскрываемые строки, график, цвета транспортов --- */
.sub-item { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.sub-item:last-child { border-bottom: 0; }
.sub-item .sub-row { border-bottom: 0; width: 100%; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit;
  grid-template-columns: 10px minmax(0, 2.2fr) minmax(150px, 1.1fr) 196px 74px 160px 16px; }
.sub-item .sub-row:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: -2px; }
.sub-chev { color: var(--tt-faint); transition: transform var(--tt-fast) var(--tt-ease); }
.sub-item.open .sub-chev { transform: rotate(180deg); color: var(--tt-text); }
.sub-item.open { background: rgba(255, 255, 255, 0.015); }
.sub-item-fetch .sub-title i { color: var(--tt-info); }
.sub-item-fetch { background: rgba(106, 174, 224, 0.03); }
.sub-proto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: normal; }
.sub-addr { margin-left: 4px; color: var(--tt-faint); font-size: 0.7rem; }
.tr-chip { display: inline-flex; padding: 0 7px; border-radius: 6px; font: 600 0.64rem/1.6 var(--display-font); letter-spacing: 0.03em; border: 1px solid var(--tt-border); color: var(--tt-muted); }
.tr-tcp { color: #9cc8ec; border-color: rgba(106, 174, 224, 0.45); background: rgba(106, 174, 224, 0.1); }
.tr-xhttp { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.45); background: rgba(82, 199, 154, 0.1); }
.tr-grpc { color: #c3b8f2; border-color: rgba(160, 145, 230, 0.5); background: rgba(160, 145, 230, 0.12); }
.tr-ws { color: #f0b98a; border-color: rgba(224, 150, 90, 0.5); background: rgba(224, 150, 90, 0.1); }
.tr-hy { color: #f0a6c8; border-color: rgba(229, 143, 184, 0.5); background: rgba(229, 143, 184, 0.1); }
.tr-sec { color: var(--tt-muted); background: rgba(255, 255, 255, 0.03); }
.tr-proto { color: var(--tt-text); }
.tr-extra { color: #e8c27e; border-color: rgba(217, 168, 78, 0.45); background: rgba(217, 168, 78, 0.08); }

.sub-detail { padding: 4px 20px 18px 44px; animation: tt-up 200ms var(--tt-ease); }
.sub-detail-loading { color: var(--tt-faint); font-size: 0.8rem; padding: 12px 0; }
.ch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ch-range { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tt-border); border-radius: 9px; }
.ch-range button { border: 0; background: none; color: var(--tt-muted); font: 500 0.76rem var(--display-font); padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.ch-range button.on { background: rgba(82, 199, 154, 0.14); color: var(--tt-text); }
.ch-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.78rem; color: var(--tt-muted); }
.ch-stats b { font-family: var(--display-font); color: var(--tt-text); }
.ch-wrap { position: relative; border: 1px solid var(--tt-border); border-radius: 10px; background: #0d0f11; overflow: hidden; }
.ch-svg { display: block; width: 100%; height: auto; }
.ch-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.ch-grid.v { stroke-dasharray: 2 4; }
.ch-ylab, .ch-xlab { fill: var(--tt-faint); font: 10px var(--display-font); }
.ch-ylab { text-anchor: end; }
.ch-xlab { text-anchor: middle; }
.ch-line { fill: none; stroke: var(--tt-accent); stroke-width: 1.6; stroke-linejoin: round; }
.ch-peak { fill: #e8c27e; }
.ch-fail { fill: rgba(224, 108, 99, 0.16); }
.ch-fail-start { stroke: #ef8f87; stroke-width: 1.5; }
.ch-fail-end { stroke: #7fdcb6; stroke-width: 1.5; stroke-dasharray: 3 3; }
.ch-absent { fill: rgba(255, 255, 255, 0.05); }
.ch-absent-start, .ch-absent-end { stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 2 3; }
.ch-failtick { fill: #ef8f87; }
.ch-cursor { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.ch-dot { fill: var(--tt-accent); stroke: #0d0f11; stroke-width: 2; }
.ch-dot.bad { fill: #ef8f87; }
.ch-hit { fill: transparent; cursor: crosshair; }
.ch-tip { position: absolute; top: 10px; width: 220px; padding: 8px 10px; border-radius: 8px; background: rgba(20, 22, 25, 0.96); border: 1px solid var(--tt-border-strong); font-size: 0.76rem; color: var(--tt-muted); pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); word-break: break-word; }
.ch-tip-time { font: 600 0.74rem var(--display-font); color: var(--tt-text); margin-bottom: 3px; }
.ch-absent-note { margin-top: 6px; font-size: 0.74rem; color: var(--tt-faint); display: flex; gap: 6px; }
.ch-incs { margin-top: 12px; display: grid; gap: 6px; }
.ch-incs-title { font: 600 0.66rem var(--display-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tt-faint); }
.ch-inc { display: grid; grid-template-columns: 230px 150px minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(224, 108, 99, 0.25); background: rgba(224, 108, 99, 0.05); font-size: 0.78rem; }
.ch-inc.live { border-color: rgba(224, 108, 99, 0.6); }
.ch-inc-time { font-family: var(--display-font); color: var(--tt-text); }
.ch-inc-time b { color: #ef8f87; }
.ch-inc-dur { color: var(--tt-muted); }
.ch-inc-err { color: #ef8f87; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-clean { font-size: 0.8rem; color: #7fdcb6; display: flex; gap: 6px; }
@media (max-width: 1100px) {
  .sub-item .sub-row { grid-template-columns: 10px minmax(0, 1fr) auto 16px; }
  .sub-item .sub-col-state { grid-column: 3; grid-row: 1; }
  .sub-item .sub-chev { grid-column: 4; grid-row: 1; }
  .sub-detail { padding-left: 16px; padding-right: 16px; }
  .ch-inc { grid-template-columns: 1fr; gap: 2px; }
}
.sub-col-state { display: grid; justify-items: end; gap: 2px; }
.sub-fails { font-size: 0.68rem; color: #ef8f87; white-space: nowrap; }
.sub-home { display: block; font-size: 0.68rem; white-space: nowrap; margin-top: 2px; }
.sub-home.ok { color: #52c79a; }
.sub-home.bad { color: #ef8f87; }
.sub-from.warn { color: #e0b252; }

/* --- подписки: панель настроек --- */
.ui-btn.is-on { border-color: var(--tt-accent) !important; color: var(--tt-accent) !important; }
.sub-settings { margin: 0 20px 16px; padding: 16px; border: 1px solid rgba(82, 199, 154, 0.3); border-radius: 12px; background: rgba(82, 199, 154, 0.03); animation: tt-up 200ms var(--tt-ease); }
.ss-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.ss-field { display: grid; gap: 5px; font-size: 0.76rem; color: var(--tt-muted); }
.ss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ss-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--tt-border); border-radius: 10px; background: #111315; }
.ss-head { display: flex; align-items: center; gap: 8px; color: var(--tt-text); }
.ss-head i { color: var(--tt-accent); }
.ss-card p { margin: 0; font-size: 0.78rem; color: var(--tt-muted); }
.ss-card small { font-size: 0.7rem; color: var(--tt-faint); }
.ss-spacer { flex: 1; }
.ss-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 0.82rem; color: var(--tt-text); }
.ss-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ss-knob { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--tt-border-strong); transition: background var(--tt-fast) var(--tt-ease); flex: none; }
.ss-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c9ccd2; transition: transform var(--tt-fast) var(--tt-ease), background var(--tt-fast); }
.ss-toggle input:checked + .ss-knob { background: rgba(82, 199, 154, 0.35); border-color: var(--tt-accent); }
.ss-toggle input:checked + .ss-knob::after { transform: translateX(16px); background: var(--tt-accent); }
.ss-toggle input:focus-visible + .ss-knob { outline: 2px solid var(--tt-accent); outline-offset: 2px; }
.ss-tg-text i { color: #6aaee0; margin-right: 4px; }
.ss-toggle input:not(:checked) ~ .ss-tg-text { color: var(--tt-faint); }
.ss-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.ss-note { margin-right: auto; font-size: 0.76rem; color: var(--tt-faint); }
@media (max-width: 1000px) { .ss-grid, .ss-top { grid-template-columns: 1fr; } }

/* тёмные системные выпадающие списки (Chrome/Edge берут цвета списка из color-scheme) */
select.ui-field, .ui-field { color-scheme: dark; }
select.ui-field option { background: #16181b; color: #e6e8eb; }
.sub-err { cursor: default; }
.sub-err-more { opacity: 0.6; font-size: 0.7rem; }
/* «Проблемные серверы»: проект отдельной плашкой рядом с названием */
.pi-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pi-title .proj-badge { flex: none; font-size: 0.62rem; padding: 1px 7px; }

/* --- окно «Сменить IP» --- */
.ipc-preview { display: grid; gap: 10px; margin-top: 4px; }
.ipc-sec { border: 1px solid var(--tt-border); border-radius: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.02); }
.ipc-sec-head { display: flex; align-items: center; gap: 8px; color: var(--tt-text); font-size: 0.86rem; }
.ipc-sec-head i { color: var(--tt-info); }
.ipc-count { margin-left: auto; font: 700 0.72rem var(--display-font); padding: 1px 8px; border-radius: 999px; border: 1px solid var(--tt-border); color: var(--tt-muted); }
.ipc-sec ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.8rem; color: var(--tt-muted); }
.ipc-sec .mono { font-family: var(--display-font); color: var(--tt-text); }
.ipc-sec .ipc-new { color: #7fdcb6; }
.ipc-sec .bi-arrow-right { color: var(--tt-faint); font-size: 0.7rem; }
.ipc-empty { margin: 6px 0 0; font-size: 0.78rem; color: var(--tt-faint); }
.ipc-note { margin: 0; font-size: 0.76rem; color: var(--tt-muted); display: flex; gap: 6px; }
.ipc-err { color: #ef8f87; }

/* --- окно «Каскады» --- */
.cas-list { display: grid; gap: 8px; }
.cas-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--tt-border); border-radius: 10px; background: rgba(255, 255, 255, 0.02); }
.cas-node { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cas-node > div { display: grid; min-width: 0; }
.cas-node b { color: var(--tt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cas-node .mono { font: 0.72rem var(--display-font); color: var(--tt-faint); }
.cas-node .dot, .cas-row .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--tt-faint); }
.cas-row .dot.on { background: var(--tt-accent); box-shadow: 0 0 8px rgba(82, 199, 154, 0.6); }
.cas-row .dot.warn { background: var(--tt-warn); }
.cas-row .dot.bad { background: var(--tt-danger); }
.cas-pipe { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; color: #7fdcb6; }
.cas-line { position: absolute; left: 0; right: 14px; top: 50%; border-top: 2px dashed rgba(82, 199, 154, 0.5); }
.cas-tag { position: relative; padding: 1px 8px; border-radius: 999px; background: #131517; border: 1px solid rgba(82, 199, 154, 0.4); font: 600 0.66rem var(--display-font); }
.cas-pipe .bi-arrow-right { position: absolute; right: 0; }
.cas-acts { display: flex; gap: 6px; }
.cas-new { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tt-border); }
.cas-new-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
#cascades-form .ui-modal-body { overflow: visible; }
@media (max-width: 760px) { .cas-row, .cas-new-row { grid-template-columns: 1fr; } .cas-pipe { min-height: 24px; } }

/* кнопки шапки /infra: «Каскады» оранжевая, «Сменить IP» синяя (контур — чтобы не путать с залитой «+ Новая нода») */
.ui-btn.btn-cascades { color: #f0b98a !important; border-color: rgba(224, 150, 90, 0.6) !important; background: rgba(224, 150, 90, 0.1) !important; }
.ui-btn.btn-cascades:hover:not(:disabled) { color: #ffd2ad !important; border-color: #e0965a !important; background: rgba(224, 150, 90, 0.2) !important; box-shadow: 0 0 16px rgba(224, 150, 90, 0.25) !important; }
.ui-btn.btn-ip-change { color: #9cc8ec !important; border-color: rgba(106, 174, 224, 0.6) !important; background: rgba(106, 174, 224, 0.08) !important; }
.ui-btn.btn-ip-change:hover:not(:disabled) { color: #cfe4f6 !important; border-color: #6aaee0 !important; background: rgba(106, 174, 224, 0.18) !important; box-shadow: 0 0 16px rgba(106, 174, 224, 0.25) !important; }

/* «Сменить IP» и «Каскады»: выпадающие списки нод не обрезаются рамкой окна */
#ip-change-form, #ip-change-form .ui-modal-body, #cascades-form, #cascades-form .ui-modal-body { overflow: visible !important; }
#ip-change-form .ui-select-list, #cascades-form .ui-select-list { max-height: min(300px, 38vh); overflow-y: auto; z-index: 60; }
/* предпросмотр смены транспорта в окне подтверждения */
.ts-preview { margin: 0; padding-left: 18px; display: grid; gap: 6px; text-align: left; font-size: 0.84rem; color: var(--tt-muted); }
.ts-preview b { color: var(--tt-text); font-family: var(--display-font); }

/* =====================================================================
   Нарушители (/violators)
   ===================================================================== */
.vl-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.vl-scans { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--tt-muted); }
.vl-scans i { margin-right: 5px; color: var(--tt-faint); }
.vl-settings { margin: 0 0 16px; }
.vl-hint { display: block; font-size: 0.7rem; color: var(--tt-faint); }
.vl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vl-stat { text-align: left; font: inherit; color: inherit; cursor: default; padding: 14px 16px; border: 1px solid var(--tt-border); border-radius: 12px; background: var(--tt-card, #131517); display: grid; gap: 2px; }
.vl-stat b { font: 700 1.6rem var(--display-font); color: var(--tt-text); }
.vl-stat span { font-size: 0.78rem; color: var(--tt-muted); }
.vl-stat.s-bad b { color: #ef8f87; } .vl-stat.s-warn b { color: #e8c27e; } .vl-stat.s-info b { color: #9cc8ec; }
.vl-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--tt-border); border-radius: 12px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.02); }
.vl-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--tt-muted); padding: 8px 14px; border-radius: 9px; font: 500 0.82rem var(--display-font); cursor: pointer; transition: all var(--tt-fast) var(--tt-ease); }
.vl-tabs button:hover { color: var(--tt-text); }
.vl-tabs button.on { background: rgba(82, 199, 154, 0.14); color: var(--tt-text); }
.vl-tabs button.on i { color: var(--tt-accent); }
.vl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 0.8rem; color: var(--tt-muted); }
.vl-filter #vl-q { max-width: 280px; }
.vl-filter label { display: inline-flex; align-items: center; gap: 8px; }
.vl-filter #vl-min { width: 76px; }
.vl-list { padding: 0; }
.vl-row-wrap { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.vl-row-wrap:last-child { border-bottom: 0; }
.vl-row-wrap.open { background: rgba(255, 255, 255, 0.015); }
.vl-row { width: 100%; display: grid; grid-template-columns: 150px minmax(180px, 1.3fr) minmax(150px, 1fr) minmax(150px, 1fr) 100px 16px; gap: 14px; align-items: center; padding: 11px 18px; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.vl-row:hover { background: rgba(255, 255, 255, 0.02); }
.vl-row-wrap.open .sub-chev { transform: rotate(180deg); color: var(--tt-text); }
.vl-score { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 8px; font: 700 0.86rem var(--display-font); border: 1px solid var(--tt-border); }
.vl-score.s-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.5); background: rgba(224, 108, 99, 0.12); }
.vl-score.s-warn { color: #f0b98a; border-color: rgba(224, 150, 90, 0.5); background: rgba(224, 150, 90, 0.1); }
.vl-score.s-mild { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); background: rgba(217, 168, 78, 0.08); }
.vl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.vl-who b { color: var(--tt-text); font-family: var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-who .sub-muted { font-size: 0.72rem; }
.vl-reasons { display: flex; flex-wrap: wrap; gap: 5px; }
.vl-reason { font-size: 0.74rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--tt-border); color: var(--tt-muted); background: rgba(255, 255, 255, 0.02); }
.vl-dev { font: 600 0.8rem var(--display-font); color: var(--tt-muted); text-align: right; white-space: nowrap; }
.vl-st { font: 600 0.62rem var(--display-font); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--tt-border); color: var(--tt-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.vl-st.st-active { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.4); }
.vl-st.st-disabled, .vl-st.st-expired { color: #ef8f87; border-color: rgba(224, 108, 99, 0.4); }
.vl-st.st-limited { color: #e8c27e; border-color: rgba(217, 168, 78, 0.4); }
.vl-detail { padding: 2px 18px 14px 76px; display: grid; gap: 8px; animation: tt-up 200ms var(--tt-ease); }
.vl-dgroup { display: grid; grid-template-columns: 18px auto 1fr; gap: 4px 8px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--tt-border); border-radius: 10px; background: #111315; font-size: 0.8rem; }
.vl-dgroup > i { color: var(--tt-info); }
.vl-dgroup b { color: var(--tt-text); }
.vl-dgroup .vl-chips { grid-column: 2 / -1; }
.vl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--tt-muted); }
.vl-user { border: 1px solid rgba(106, 174, 224, 0.4); background: rgba(106, 174, 224, 0.08); color: #9cc8ec; border-radius: 7px; padding: 1px 8px; font: 600 0.74rem var(--display-font); cursor: pointer; }
.vl-user:hover { background: rgba(106, 174, 224, 0.18); color: #cfe4f6; }
.vl-ip { font: 0.72rem var(--display-font); padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tt-border); color: var(--tt-text); }
.vl-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.vl-hcard { padding: 14px; border: 1px solid var(--tt-border); border-radius: 12px; background: var(--tt-card, #131517); display: grid; gap: 10px; }
.vl-hcard.junk { opacity: 0.6; }
.vl-hhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vl-hhead > i { color: #c3b8f2; font-size: 1.1rem; }
.vl-hhead b { color: var(--tt-text); }
.vl-hhead .sub-muted { font-size: 0.74rem; }
.vl-count { margin-left: auto; font: 700 0.74rem var(--display-font); color: #f0b98a; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(224, 150, 90, 0.5); background: rgba(224, 150, 90, 0.1); }
.vl-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.7rem; color: var(--tt-faint); }
.vl-junk { margin-top: 18px; }
.vl-junk summary { cursor: pointer; color: var(--tt-muted); font-size: 0.82rem; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.vl-note { font-size: 0.8rem; color: var(--tt-muted); display: flex; gap: 8px; margin: 0 0 10px; }
.vl-crow { display: grid; grid-template-columns: 110px minmax(130px, 0.8fr) 56px minmax(0, 2fr) minmax(120px, 1fr); gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8rem; }
.vl-crow:last-child { border-bottom: 0; }
.vl-chead { font: 600 0.66rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); }
.vl-ctime { color: var(--tt-muted); }
@media (max-width: 1000px) {
  .vl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl-row { grid-template-columns: 44px minmax(0, 1fr) 16px; }
  .vl-reasons { grid-column: 2 / -1; } .vl-dev { display: none; }
  .vl-crow { grid-template-columns: 1fr 1fr; }
  .vl-detail { padding-left: 18px; }
}

/* нарушители v2: понятные выводы вместо баллов */
.vl-verdict { justify-self: start; font: 700 0.7rem var(--display-font); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--tt-border); white-space: nowrap; }
.vl-verdict.s-bad { color: #ef8f87; border-color: rgba(224, 108, 99, 0.5); background: rgba(224, 108, 99, 0.12); }
.vl-verdict.s-warn { color: #f0b98a; border-color: rgba(224, 150, 90, 0.5); background: rgba(224, 150, 90, 0.1); }
.vl-verdict.s-mild { color: var(--tt-muted); background: rgba(255, 255, 255, 0.03); }
.vl-sign { font-size: 0.8rem; color: var(--tt-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-sign.on { color: var(--tt-text); }
.vl-sign i { margin-right: 6px; color: #f0b98a; }
.vl-rhead { cursor: default; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font: 600 0.66rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); }
.vl-rhead:hover { background: none; }
.vl-rhead span[title] { cursor: help; }
button.vl-stat { cursor: pointer; transition: border-color var(--tt-fast) var(--tt-ease), background var(--tt-fast) var(--tt-ease); }
button.vl-stat:hover { border-color: rgba(255, 255, 255, 0.18); }
button.vl-stat.on { border-color: var(--tt-accent); background: rgba(82, 199, 154, 0.06); }
.vl-stat .vl-stat-t { font: 600 0.86rem var(--display-font); color: var(--tt-text); }
.vl-stat.s-mild b { color: var(--tt-muted); }
.vl-detail { padding-left: 182px; }
.vl-note a { color: var(--tt-accent); }
@media (max-width: 1100px) {
  .vl-row { grid-template-columns: 130px minmax(0, 1fr) 16px; }
  .vl-row > .vl-sign { grid-column: 2 / 3; }
  .vl-rhead { display: none; }
  .vl-detail { padding-left: 18px; }
}

/* =====================================================================
   Роллер Timeweb (/roller) - перенесён из отдельного Telegram-бота
   ===================================================================== */
.rl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rl-stat-sub { font-size: 0.74rem; color: var(--tt-faint); }
.rl-list { padding: 0; }
.rl-row-wrap { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.rl-row-wrap:last-child { border-bottom: 0; }
.rl-row-wrap.open { background: rgba(255, 255, 255, 0.015); }
.rl-row { width: 100%; display: grid; grid-template-columns: 112px minmax(170px, 1.2fr) 150px minmax(160px, 1fr) 96px 64px 112px 16px; gap: 14px; align-items: center; padding: 10px 18px; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.rl-row:hover { background: rgba(255, 255, 255, 0.02); }
.rl-row-wrap.open .sub-chev { transform: rotate(180deg); color: var(--tt-text); }
.rl-head { cursor: default; padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font: 600 0.66rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); }
.rl-head:hover { background: none; }
.rl-state { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font: 600 0.72rem var(--display-font); padding: 3px 10px; border-radius: 8px; border: 1px solid var(--tt-border); color: var(--tt-muted); white-space: nowrap; }
.rl-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--tt-faint); }
.rl-state.s-rolling { color: #7fdcb6; border-color: rgba(82, 199, 154, 0.45); background: rgba(82, 199, 154, 0.08); }
.rl-state.s-rolling i { background: var(--tt-accent); box-shadow: 0 0 8px var(--tt-accent); animation: tt-pulse 1.6s ease-in-out infinite; }
.rl-state.s-limit, .rl-state.s-pause { color: #9cc8ec; border-color: rgba(106, 174, 224, 0.4); background: rgba(106, 174, 224, 0.07); }
.rl-state.s-limit i, .rl-state.s-pause i { background: var(--tt-info); }
.rl-state.s-limit_idle { color: var(--tt-muted); }
.rl-state.s-blocked { color: #ef8f87; border-color: rgba(224, 108, 99, 0.45); background: rgba(224, 108, 99, 0.1); }
.rl-state.s-blocked i { background: var(--tt-danger); }
.rl-who { min-width: 0; display: grid; gap: 1px; }
.rl-who b { color: var(--tt-text); font-family: var(--display-font); font-size: 0.86rem; }
.rl-who span { font-size: 0.72rem; color: var(--tt-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-quota { display: grid; gap: 5px; }
.rl-quota b { font: 700 0.84rem var(--display-font); color: var(--tt-text); }
.rl-quota b small { font-weight: 500; color: var(--tt-faint); }
.rl-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rl-bar span { display: block; height: 100%; background: var(--tt-accent); border-radius: 4px; transition: width var(--tt-mid) var(--tt-ease); }
.rl-bar.full span { background: var(--tt-info); }
.rl-when { font-size: 0.78rem; color: var(--tt-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-when b { color: var(--tt-text); font-family: var(--display-font); font-weight: 600; }
.rl-bal { font: 600 0.8rem var(--display-font); color: var(--tt-muted); white-space: nowrap; }
.rl-bal.low { color: #e8c27e; }
.rl-found { font: 700 0.84rem var(--display-font); color: var(--tt-faint); }
.rl-found.on { color: #7fdcb6; }
.rl-act { justify-self: end; }
.rl-detail { padding: 4px 18px 16px 144px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; animation: tt-up 200ms var(--tt-ease); }
.rl-box { border: 1px solid var(--tt-border); border-radius: 10px; background: #111315; padding: 12px 14px; min-width: 0; }
.rl-box h4 { margin: 0 0 10px; font: 600 0.7rem var(--display-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-faint); display: flex; align-items: center; gap: 8px; }
.rl-box h4 .ui-btn { margin-left: auto; }
.rl-ip { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8rem; }
.rl-ip:last-child { border-bottom: 0; }
.rl-ip .mono { color: var(--tt-text); font-family: var(--display-font); }
.rl-ip small { display: block; color: var(--tt-faint); font-size: 0.7rem; }
.rl-ip-btns { display: flex; gap: 6px; }
.rl-mark { text-align: center; }
.rl-mark.m-prot { color: #e8c27e; } .rl-mark.m-good { color: var(--tt-accent); } .rl-mark.m-extra { color: var(--tt-faint); }
.rl-log { max-height: 300px; overflow: auto; font: 0.74rem/1.55 var(--display-font); color: var(--tt-muted); white-space: pre-wrap; word-break: break-word; }
.rl-log div { padding: 1px 0; }
.rl-log .l-found { color: #7fdcb6; } .rl-log .l-bad { color: #ef8f87; } .rl-log .l-sleep { color: #9cc8ec; }
.rl-detail-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.rl-frow { display: grid; grid-template-columns: 170px minmax(130px, 1fr) 170px 120px; gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8rem; }
.rl-frow:last-child { border-bottom: 0; }
.rl-copy { justify-self: start; border: 1px solid rgba(82, 199, 154, 0.4); background: rgba(82, 199, 154, 0.07); color: #a6e6cb; border-radius: 7px; padding: 2px 9px; font: 600 0.8rem var(--display-font); cursor: pointer; }
.rl-copy:hover { background: rgba(82, 199, 154, 0.16); color: #d6f5e8; }
.rl-hrow { display: grid; grid-template-columns: 28px minmax(130px, 1fr) 90px minmax(120px, 2fr); gap: 12px; align-items: center; padding: 7px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.8rem; }
.rl-hrow:last-child { border-bottom: 0; }
.rl-hrow .mono { font-family: var(--display-font); color: var(--tt-text); }
.rl-hrow.good .mono { color: #7fdcb6; }
.rl-prefixes { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-prefix { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; border: 1px solid rgba(82, 199, 154, 0.45); background: rgba(82, 199, 154, 0.08); color: #a6e6cb; font: 600 0.78rem var(--display-font); }
.rl-prefix button { border: 0; background: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 0 4px; }
.rl-prefix button:hover { opacity: 1; color: #ef8f87; }
.rl-add { display: flex; gap: 8px; }
.rl-add .ui-field { flex: 1; min-width: 0; }
@media (max-width: 1200px) {
  .rl-row { grid-template-columns: 112px minmax(0, 1fr) 140px 110px 16px; }
  .rl-row > .rl-bal, .rl-row > .rl-found, .rl-row > .rl-when { display: none; }
  .rl-head { display: none; }
  .rl-detail { padding-left: 18px; grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-row { grid-template-columns: minmax(0, 1fr) 110px 16px; }
  .rl-row > .rl-quota { display: none; }
  .rl-row > .rl-state { grid-column: 1 / -1; grid-row: 2; }
  .rl-frow { grid-template-columns: 1fr 1fr; }
  .rl-hrow { grid-template-columns: 24px 1fr 70px; }
  .rl-hrow > :last-child { display: none; }
}
/* роллер: список нужных подсетей в настройках */
.rl-subcard { grid-column: 1 / -1; }
.rl-subtools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.76rem; }
.rl-subtools .ui-field { max-width: 220px; height: 34px; }
.rl-sublist { max-height: 320px; overflow: auto; border: 1px solid var(--tt-border); border-radius: 10px; background: #0f1113; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-content: start; }
.rl-subrow { display: grid; grid-template-columns: minmax(90px, 1fr) auto auto 26px; gap: 10px; align-items: center; padding: 6px 8px 6px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); border-right: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.76rem; }
.rl-subrow .mono { font-family: var(--display-font); color: var(--tt-text); font-weight: 600; }
.rl-subrow.hit .mono { color: #7fdcb6; }
.rl-subdel { width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--tt-faint); cursor: pointer; }
.rl-subdel:hover { background: rgba(224, 108, 99, 0.14); color: #ef8f87; }
@media (max-width: 1000px) { .vl-settings .ss-grid { grid-template-columns: 1fr !important; } }

/* график подписки: легенда серий (Москва + домашние ПК) и точки в подсказке */
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: flex-end; font-size: 0.78rem; }
.ch-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ch-leg > i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ch-tip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* ---------- Дашборд: KPI + «Требуют внимания» (2026-10-29) ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 10px; min-width: 0; }
.kpi > i { font-size: 1.35rem; color: var(--tt-muted); }
.kpi > b { font: 700 1.9rem/1 var(--display-font); color: var(--tt-text); }
.kpi > b small { font-size: 0.95rem; color: var(--tt-faint); font-weight: 500; }
.kpi > span { display: grid; font-size: 0.82rem; color: var(--tt-text); line-height: 1.25; min-width: 0; }
.kpi > span small { color: var(--tt-faint); font-size: 0.72rem; }
.kpi.k-bad { border-color: rgba(224, 108, 99, 0.55); background: linear-gradient(135deg, rgba(224, 108, 99, 0.14), var(--tt-card) 70%); }
.kpi.k-bad > i, .kpi.k-bad > b { color: var(--tt-danger); }
.kpi.k-warn { border-color: rgba(217, 168, 78, 0.5); background: linear-gradient(135deg, rgba(217, 168, 78, 0.12), var(--tt-card) 70%); }
.kpi.k-warn > i, .kpi.k-warn > b { color: var(--tt-warn); }
.kpi.k-ok > i { color: var(--tt-accent); }
.kpi.k-info > i { color: var(--tt-info); }

.attn { margin-bottom: 22px; }
.attn-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 0.8rem var(--display-font); text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted); }
.attn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.attn-card { display: grid; gap: 7px; align-content: start; padding: 14px 16px; background: var(--tt-card); border: 1px solid var(--tt-border); border-left: 4px solid var(--tt-warn); border-radius: 10px; min-width: 0; }
.attn-card.ac-bad { border-left-color: var(--tt-danger); background: linear-gradient(90deg, rgba(224, 108, 99, 0.08), var(--tt-card) 45%); }
.attn-card.ac-warn { background: linear-gradient(90deg, rgba(217, 168, 78, 0.07), var(--tt-card) 45%); }
.ac-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-name { font: 600 0.95rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac-muted { font-size: 0.72rem; color: var(--tt-faint); white-space: nowrap; }
.ac-go { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--tt-border); background: transparent; color: var(--tt-muted); }
.ac-go:hover { color: var(--tt-accent); border-color: var(--tt-accent-line); }
.ac-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 600; }
.ac-bad .ac-title i { color: var(--tt-danger); }
.ac-warn .ac-title i { color: var(--tt-warn); }
.ac-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--tt-muted); }
.ac-meta code { color: var(--tt-text); background: none; padding: 0; font-family: var(--mono-font); }
.ac-meta b { color: var(--tt-text); }
.ac-line { font-size: 0.82rem; line-height: 1.4; color: var(--tt-text); }
.ac-line small { display: inline-block; min-width: 82px; margin-right: 6px; color: var(--tt-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; }
.ac-todo { color: var(--tt-accent); }
.ac-conseq { font-size: 0.74rem; color: var(--tt-faint); display: flex; gap: 6px; align-items: baseline; }
.attn-ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--tt-accent-line); border-radius: 10px; background: var(--tt-accent-dim); color: var(--tt-accent); font-weight: 500; }
.attn-minor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.am-h { font: 600 0.72rem var(--display-font); text-transform: uppercase; letter-spacing: .06em; color: var(--tt-faint); display: flex; gap: 6px; align-items: center; }
.am-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--tt-border); border-radius: 999px; background: var(--tt-card); color: var(--tt-text); font-size: 0.76rem; }
.am-item:hover { border-color: var(--tt-warn); }
.am-item span { color: var(--tt-warn); display: inline-flex; gap: 4px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .attn-grid { grid-template-columns: 1fr; }
  .kpi { padding: 10px 12px; } .kpi > b { font-size: 1.5rem; }
  .ac-line small { display: block; margin-bottom: 2px; }
}

/* «Требуют внимания» v2: группы по причине, строка на сервер (2026-10-30) */
.ag { margin-bottom: 14px; background: var(--tt-card); border: 1px solid var(--tt-border); border-left: 4px solid var(--tt-warn); border-radius: 10px; overflow: hidden; }
.ag.ag-bad { border-left-color: var(--tt-danger); }
.ag-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding: 12px 16px 4px; }
.ag-head > i { color: var(--tt-warn); align-self: center; }
.ag-bad .ag-head > i { color: var(--tt-danger); }
.ag-head > b { font-size: 1.02rem; }
.ag-n { font: 700 0.78rem var(--display-font); padding: 1px 8px; border-radius: 999px; background: rgba(217, 168, 78, 0.16); color: var(--tt-warn); }
.ag-bad .ag-n { background: rgba(224, 108, 99, 0.16); color: var(--tt-danger); }
.ag-why { font-size: 0.8rem; color: var(--tt-muted); flex-basis: 100%; }
.ag-why i { font-style: normal; color: var(--tt-faint); }
.ag-todo { display: flex; gap: 7px; align-items: baseline; padding: 0 16px 10px; font-size: 0.8rem; color: var(--tt-accent); }
.ag-rows { display: grid; border-top: 1px solid var(--tt-border); }
.ar { display: grid; grid-template-columns: minmax(220px, 1.4fr) 190px 150px 90px minmax(0, 2fr) 16px; align-items: center; gap: 12px;
  width: 100%; padding: 8px 16px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.04); background: transparent; color: var(--tt-text); text-align: left; }
.ar:last-child { border-bottom: 0; }
.ar:hover { background: rgba(255, 255, 255, 0.04); }
.ar-old { opacity: 0.62; }
.ar-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-name b { font: 600 0.86rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-host { font: 0.78rem var(--mono-font); color: var(--tt-muted); background: none; padding: 0; }
.ar-dur { display: flex; gap: 6px; align-items: baseline; font-size: 0.82rem; white-space: nowrap; }
.ar-dur small, .ar-on { color: var(--tt-faint); font-size: 0.74rem; }
.ar-on b { color: var(--tt-text); }
.ar-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ar-tags em { font-style: normal; font-size: 0.7rem; padding: 1px 7px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--tt-muted); white-space: nowrap; }
.ar-tags em.tg-ru { background: rgba(217, 168, 78, 0.14); color: var(--tt-warn); }
.ar-go { color: var(--tt-faint); }
@media (max-width: 900px) {
  .ar { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .ar-host, .ar-on { grid-column: 1; }
  .ar-dur { grid-column: 2; grid-row: 1; }
  .ar-tags { grid-column: 1 / -1; }
  .ar-go { display: none; }
}

/* «Требуют внимания» v3: простой список (2026-10-30) */
.attn-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font: 400 0.72rem var(--bs-body-font-family); color: var(--tt-faint); }
.al { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 10px; overflow: hidden; }
.al-row { border-bottom: 1px solid rgba(255,255,255,0.05); border-left: 3px solid var(--tt-warn); }
.al-row:last-child { border-bottom: 0; }
.al-row.al-bad { border-left-color: var(--tt-danger); }
.al-main { display: grid; grid-template-columns: 22px minmax(200px, 1.3fr) minmax(170px, 1.2fr) 170px 150px 80px minmax(0, 1.4fr) 28px; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; }
.al-main:hover { background: rgba(255,255,255,0.035); }
.al-old .al-main { opacity: 0.6; }
.al-sev { color: var(--tt-warn); } .al-bad .al-sev { color: var(--tt-danger); }
.al-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-name b { font: 600 0.86rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-what { font-size: 0.82rem; font-weight: 500; color: var(--tt-text); }
.al-host { font: 0.76rem var(--mono-font); color: var(--tt-muted); background: none; padding: 0; }
.al-dur { display: flex; gap: 6px; align-items: baseline; font-size: 0.82rem; white-space: nowrap; }
.al-dur small, .al-on { color: var(--tt-faint); font-size: 0.74rem; }
.al-on b { color: var(--tt-text); }
.al-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.al-tags em { font-style: normal; font-size: 0.7rem; padding: 1px 7px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--tt-muted); white-space: nowrap; }
.al-tags em.tg-ru { background: rgba(217,168,78,0.14); color: var(--tt-warn); }
.al-go { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--tt-border); background: transparent; color: var(--tt-muted); }
.al-go:hover { color: var(--tt-accent); border-color: var(--tt-accent-line); }
.al-more { display: none; padding: 2px 14px 12px 48px; font-size: 0.8rem; line-height: 1.45; color: var(--tt-text); }
.al-row.open .al-more { display: grid; gap: 4px; }
.al-row.open .al-main { background: rgba(255,255,255,0.03); }
.al-more small { display: inline-block; min-width: 92px; color: var(--tt-faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; }
.al-todo { color: var(--tt-accent); }
@media (max-width: 1100px) {
  .al-main { grid-template-columns: 22px 1fr auto; gap: 4px 10px; }
  .al-what, .al-host, .al-on, .al-tags { grid-column: 2 / -1; }
  .al-dur { grid-column: 3; grid-row: 1; }
  .al-go { display: none; }
  .al-more { padding-left: 14px; }
  .attn-hint { display: none; }
}


/* ===== правки 2026-11-02 ===== */
/* html { zoom: 1.1875 } на ПК: 94vw без поправки шире экрана - мастер и окна нод обрезались справа */
@media (min-width: 761px) {
  .insp2, .insp2.wiz2 { width: min(1240px, calc(94vw / 1.1875)); }
}
/* меню: все пункты должны влезать */
.topnav-link { padding-left: 9px; padding-right: 9px; white-space: nowrap; }
@media (max-width: 1500px) { .topnav-link { font-size: 0.8rem; padding-left: 7px; padding-right: 7px; } }

/* дашборд: панель вместо двух шапок */
.dash-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dash-bar .project-switcher { margin: 0; }
.dash-bar .navbar-search-wrapper { flex: 0 1 300px; min-width: 180px; margin: 0; }
.dash-bar-gap { flex: 1 1 auto; }
.dash-updated { font: 0.72rem var(--display-font); color: var(--tt-faint); white-space: nowrap; }
.dash-bar .ui-btn { display: inline-flex; align-items: center; gap: 7px; }
/* карточка сервера в узкой колонке: блок домашнего ПК отдельной строкой, не поверх плиток */
.dashboard-main .sr-bottom { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start; }
.dashboard-main .sr-bottom > * { min-width: 0; }
.dashboard-main .sr-home { display: block; grid-column: 1 / -1; margin: 0; }
.dashboard-main .sr-home .home-box { width: 100%; max-width: none; }
.dashboard-main .sr-home .home-box .hb-row { flex-wrap: wrap; }
.dashboard-main .sr-metrics { flex-wrap: wrap; }
@media (max-width: 1100px) { .dashboard-main .sr-bottom { grid-template-columns: minmax(0, 1fr); } }
.al-main { grid-template-columns: 22px minmax(230px, 1.5fr) minmax(170px, 1.2fr) 150px 140px 70px minmax(0, 1.3fr) 28px; }
@media (max-width: 1100px) { .al-main { grid-template-columns: 22px 1fr auto; } }

/* долгие блокировки */
.long-card { flex: 0 0 auto; margin-bottom: 14px; }
.long-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.long-filter { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(255,255,255,.05); }
.long-filter button { border: 0; background: none; color: var(--tt-muted); font: 0.68rem var(--display-font); padding: 2px 7px; border-radius: 5px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.long-filter button.on { background: rgba(255,255,255,.12); color: var(--tt-text); }
.long-note { font-size: 0.72rem; color: var(--tt-faint); margin: 2px 0 8px; }
#long-list { display: grid; gap: 6px; max-height: 330px; overflow-y: auto; }
.long-item { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--tt-border); border-left: 3px solid; background: rgba(255,255,255,.02); }
.lk-tspu { border-left-color: #d9a84e; }
.lk-down { border-left-color: #e06c63; }
.long-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.long-top b { font: 600 0.8rem var(--display-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tt-text); min-width: 0; }
.long-top .proj-badge { font-size: 0.6rem; padding: 1px 5px; flex: none; }
.long-del { font-size: 0.65rem; color: var(--tt-faint); flex: none; }
.long-dur { margin-left: auto; font: 700 0.8rem var(--display-font); color: var(--tt-text); white-space: nowrap; flex: none; }
.long-bot { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font: 0.7rem var(--display-font); color: var(--tt-muted); flex-wrap: wrap; }
.lk-tspu .long-kind { color: #e8c27e; }
.lk-down .long-kind { color: #ef8f87; }
.long-range em { font-style: normal; color: #e8c27e; }
.lk-down .long-range em { color: #ef8f87; }

/* форма сервера */
.sf-modal { width: min(820px, calc(96vw / 1.1875)); }
.sf-modal .ui-modal-body { display: grid; gap: 14px; }
.sf-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 14px; border: 1px solid var(--tt-border); border-radius: 10px; background: rgba(255,255,255,.015); }
.sf-sec h4 { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin: 0; font: 600 0.78rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .05em; }
.sf-f { display: grid; gap: 5px; align-content: start; min-width: 0; margin: 0; }
.sf-f.wide { grid-column: 1 / -1; }
.sf-f > span { font-size: 0.78rem; color: var(--tt-muted); }
.sf-f em { font-style: normal; color: var(--tt-faint); margin-left: 4px; }
.sf-f small { font-size: 0.7rem; color: var(--tt-faint); }
.sf-f small.sf-err { color: #ef8f87; }
.sf-seg { display: flex; flex-wrap: wrap; gap: 5px; }
.sf-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--tt-border); background: rgba(255,255,255,.03); color: var(--tt-muted); font-size: 0.8rem; cursor: pointer; }
.sf-seg button:hover { color: var(--tt-text); border-color: rgba(255,255,255,.25); }
.sf-seg button.on { color: #8fe3c0; border-color: rgba(82,199,154,.6); background: rgba(82,199,154,.12); }
.sf-flagged, .sf-pass { position: relative; }
.sf-flagged #f-flag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.sf-flagged input { padding-left: 38px; width: 100%; }
.sf-pass input { padding-right: 40px; width: 100%; }
.sf-pass button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: var(--tt-muted); cursor: pointer; }
.sf-pass button:hover { color: var(--tt-text); }
.sf-cost { display: grid; grid-template-columns: minmax(0, 1fr) 96px 110px; gap: 6px; }
@media (max-width: 768px) { .sf-sec { grid-template-columns: 1fr; } .sf-modal { width: auto; } .sf-cost { grid-template-columns: 1fr 1fr; } .sf-cost input { grid-column: 1 / -1; } }


/* ===== Нарушители, новая страница ===== */
.vx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.vx-title { flex: 1 1 280px; min-width: 0; }
.vx-title h1 { font: 700 1.25rem var(--display-font); margin: 0; color: var(--tt-text); }
.vx-title p { margin: 2px 0 0; font-size: 0.78rem; color: var(--tt-muted); }
.vx-bar .project-switcher { margin: 0; }
.vx-bar .ui-btn { display: inline-flex; align-items: center; gap: 7px; }
.vx-scans { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.74rem; color: var(--tt-faint); margin-bottom: 12px; }
.vx-scans i { margin-right: 4px; }
.vx-busy { color: #8fe3c0; } .vx-warn { color: #e8c27e; }
.vx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.vx-kpi { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--tt-border); background: var(--tt-card); color: var(--tt-text); min-width: 0; }
button.vx-kpi { cursor: pointer; } button.vx-kpi:hover { border-color: rgba(255,255,255,.25); }
.vx-kpi b { grid-row: span 2; font: 700 1.6rem var(--display-font); }
.vx-kpi span { font-size: 0.82rem; align-self: end; } .vx-kpi small { font-size: 0.68rem; color: var(--tt-faint); align-self: start; }
.k-bad b { color: #ef8f87; } .k-warn b { color: #e8c27e; } .k-mild b { color: #8fb8f0; } .k-tr b { color: #c9a7f5; }
.vx-kpi.on { border-color: rgba(82,199,154,.7); background: rgba(82,199,154,.08); }
.vx-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--tt-border); margin-bottom: 12px; }
.vx-tabs button { border: 0; background: none; padding: 8px 13px; color: var(--tt-muted); font-size: 0.85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.vx-tabs button:hover { color: var(--tt-text); }
.vx-tabs button.on { color: #8fe3c0; border-bottom-color: #52c79a; }
.vx-tabs em { font: 0.7rem var(--display-font); margin-left: 6px; padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.08); }
.vx-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; font-size: 0.76rem; }
.vx-search { position: relative; flex: 0 1 280px; min-width: 180px; }
.vx-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tt-faint); font-size: 12px; }
.vx-search input { width: 100%; height: 34px; padding: 0 10px 0 30px; border-radius: 8px; border: 1px solid var(--tt-border); background: rgba(255,255,255,.03); color: var(--tt-text); font-size: 0.82rem; outline: 0; }
.vx-search input:focus { border-color: rgba(82,199,154,.6); }
.vx-muted { color: var(--tt-muted); } .vx-small { font-size: 0.68rem; }
.vx-hot { color: #ef8f87 !important; font-weight: 700; }
.vx-link { border: 0; background: none; padding: 0; color: #8fb8f0; font-size: inherit; cursor: pointer; text-align: left; }
.vx-link:hover { text-decoration: underline; }
.vx-check { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--tt-text); margin: 0; cursor: pointer; }
.vx-table { border: 1px solid var(--tt-border); border-radius: 10px; background: var(--tt-card); overflow: hidden; }
.vx-head { font: 0.68rem var(--display-font); color: var(--tt-faint); text-transform: uppercase; letter-spacing: .04em; background: rgba(255,255,255,.02); cursor: default !important; }
.r { text-align: right; justify-self: end; }
.vx-row { display: grid; grid-template-columns: 170px minmax(160px, 1fr) minmax(0, 2fr) 90px 80px 20px; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; font-size: 0.82rem; }
.vx-item + .vx-item, .vx-head + .vx-item { border-top: 1px solid var(--tt-border); }
.vx-item > .vx-row:hover { background: rgba(255,255,255,.03); }
.vx-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 0.76rem; }
.vx-verdict b { display: grid; place-items: center; min-width: 26px; height: 24px; border-radius: 6px; font: 700 0.8rem var(--display-font); }
.v-bad { color: #ef8f87; } .v-bad b { background: rgba(224,108,99,.18); }
.v-warn { color: #e8c27e; } .v-warn b { background: rgba(217,168,78,.18); }
.v-mild { color: #8fb8f0; } .v-mild b { background: rgba(106,174,224,.16); }
.vx-user { display: grid; min-width: 0; } .vx-user b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tt-text); }
.vx-user small { font-size: 0.68rem; color: var(--tt-faint); } .vx-st { font-style: normal; color: #e8c27e; }
.vx-signs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.vx-sign { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font-size: 0.72rem; color: var(--tt-muted); background: rgba(255,255,255,.05); border: 1px solid var(--tt-border); white-space: nowrap; }
.vx-sign.hot { color: #ef8f87; border-color: rgba(224,108,99,.4); background: rgba(224,108,99,.1); }
.vx-chev { color: var(--tt-faint); font-size: 0.7rem; }
.vx-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 20px; padding: 4px 14px 14px; font-size: 0.78rem; background: rgba(255,255,255,.015); }
.vx-detail b { display: block; font-size: 0.7rem; color: var(--tt-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.vx-detail ul { margin: 0; padding-left: 16px; }
.vx-dev { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 3px; } .vx-ev { margin-bottom: 3px; }
.vx-trbox { display: grid; gap: 5px; }
.vx-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 26px; width: 112px; }
.vx-bars i { flex: 1; min-width: 3px; background: rgba(143,184,240,.5); border-radius: 1px 1px 0 0; }
.vx-bars i.last { background: #8fb8f0; } .vx-bars i.over { background: #e06c63; }
.vx-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--tt-border); border-radius: 10px; background: var(--tt-card); font-size: 0.8rem; }
.vx-limit > div:first-child { display: grid; }
.vx-limit .vx-muted { font-size: 0.72rem; }
.vx-limit-in { display: flex; align-items: center; gap: 7px; } .vx-limit-in input { width: 96px; height: 34px; }
.vx-limit-sum { display: flex; gap: 16px; margin-left: auto; color: var(--tt-muted); } .vx-limit-sum b { color: var(--tt-text); }
.vx-trow { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(170px, 1.6fr) 80px 110px 90px 124px; align-items: center; gap: 12px; padding: 7px 14px; font-size: 0.82rem; border-top: 1px solid var(--tt-border); }
.vx-trow.vx-head { border-top: 0; }
.vx-trow.over { background: rgba(224,108,99,.05); }
.vx-sort { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; } .vx-sort.on { color: #8fe3c0; }
.vx-meter { position: relative; display: block; height: 22px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; }
.vx-meter i { position: absolute; inset: 0 auto 0 0; background: rgba(143,184,240,.28); } .vx-meter i.over { background: rgba(224,108,99,.4); }
.vx-meter b { position: relative; display: block; padding: 0 8px; line-height: 22px; font-size: 0.76rem; font-weight: 600; }
.vx-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.vx-hcard { display: grid; gap: 5px; padding: 11px 13px; border: 1px solid var(--tt-border); border-radius: 10px; background: var(--tt-card); font-size: 0.8rem; min-width: 0; }
.vx-hhead { display: flex; align-items: center; gap: 7px; } .vx-hhead b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-count { margin-left: auto; font: 700 0.76rem var(--display-font); padding: 0 7px; border-radius: 99px; background: rgba(224,108,99,.16); color: #ef8f87; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.vx-chip { border: 1px solid var(--tt-border); background: rgba(255,255,255,.04); color: var(--tt-text); padding: 2px 7px; border-radius: 6px; font-size: 0.74rem; cursor: pointer; } .vx-chip.dim { opacity: .5; } .vx-chip:hover { border-color: rgba(143,184,240,.6); }
.vx-small { overflow-wrap: anywhere; }
.vx-junk { margin-top: 12px; font-size: 0.8rem; color: var(--tt-muted); } .vx-junk summary { cursor: pointer; margin-bottom: 8px; }
.vx-crow { display: grid; grid-template-columns: 110px minmax(130px, 1fr) 56px minmax(0, 2fr) minmax(0, 1.4fr); align-items: center; gap: 12px; padding: 7px 14px; font-size: 0.8rem; border-top: 1px solid var(--tt-border); } .vx-crow.vx-head { border-top: 0; }
.vx-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 1100px) {
  .vx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-row { grid-template-columns: minmax(0, 1fr) auto 20px; } .vx-row > .vx-signs { grid-column: 1 / -1; grid-row: 2; }
  .vx-row > :nth-child(5) { display: none; } .vx-head.vx-row { display: none; }
  .vx-trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vx-trow > :nth-child(n+3) { display: none; }
  .vx-crow { grid-template-columns: 100px minmax(0, 1fr) 40px; } .vx-crow > :nth-child(n+4) { display: none; }
}

/* дашборд 2026-11-02, доводка */
.dash-bar .navbar-search-wrapper { flex: 1 1 170px; min-width: 150px; max-width: 420px; }
.dash-bar .ui-btn { padding-left: 12px; padding-right: 12px; font-size: 0.82rem; white-space: nowrap; }
.dash-bar-gap { flex: 0 0 0; margin-left: auto; }
@media (max-width: 1650px) { .dash-updated { display: none; } }
.dashboard-main .sr-metrics .mt { max-width: none; flex: 0 1 auto; white-space: nowrap; }
.long-ip { margin-left: auto; color: var(--tt-faint); }

/* выпадающий список поверх всего: окно не растёт и не обрезает его */
.ui-select-list.is-floating { display: flex; flex-direction: column; position: fixed; z-index: 3000; right: auto; box-sizing: border-box; overflow: hidden; padding: 6px; animation: ui-select-in 120ms var(--ease-premium, ease); }
.ui-select-list.is-floating.is-up { animation-name: ui-select-up; }
@keyframes ui-select-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ui-select-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.ui-select-search { flex: none; width: 100%; box-sizing: border-box; height: 34px; margin-bottom: 6px; padding: 0 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text-main); font-size: 13px; outline: 0; }
.ui-select-search:focus { border-color: rgba(82,199,154,.6); }
.ui-select-empty { padding: 10px; color: var(--tt-muted); font-size: 13px; text-align: center; }
.ui-select select, .ui-select select.ui-field { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.ui-select-btn:disabled { opacity: .6; cursor: not-allowed; }
.sf-cost .ui-select, .sf-f .ui-select { min-width: 0; }
.dc-preview { margin-top: 6px; font-size: 0.76rem; color: var(--tt-muted); } .dc-preview b { color: #8fe3c0; font-weight: 600; }

.proto-card.proto-hysteria { --proto: #e8a15c; }
.proto-chip.proto-hysteria { --proto: #e8a15c; }

/* =====================================================================
   Дашборд 2026-11-02: автоматика хостов + корзина вместо «долгих
   блокировок», компактный вид списка серверов.
   ===================================================================== */
.kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi-btn { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi-btn:hover { border-color: rgba(255,255,255,.18); }
.kpi.k-muted > i, .kpi.k-muted > b { color: var(--tt-faint); }
@media (max-width: 1300px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* переключатель вида */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 10px; border-radius: 9px; background: var(--tt-card); border: 1px solid var(--tt-border); }
.view-switch button { border: 0; background: none; color: var(--tt-muted); font: 0.78rem var(--display-font); padding: 5px 11px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.view-switch button.on { background: rgba(255,255,255,.1); color: var(--tt-text); }

/* компактный вид: строка на сервер, подробности - по клику */
.sr-expand { display: none; border: 0; background: none; color: var(--tt-faint); padding: 0 2px; cursor: pointer; font-size: 0.8rem; transition: transform .15s var(--tt-ease); }
.sr-mini { display: none; align-items: center; gap: 12px; font-size: 0.76rem; color: var(--tt-muted); white-space: nowrap; }
.sr-mini code { color: var(--tt-muted); font-size: 0.76rem; background: none; padding: 0; }
.sr-mini-on { display: inline-flex; align-items: center; gap: 4px; min-width: 42px; }
.dash-compact .sr-expand { display: inline-block; }
.dash-compact .server-row.open .sr-expand { transform: rotate(90deg); }
.dash-compact .server-row { padding: 9px 14px 9px 18px !important; gap: 10px !important; }
.dash-compact .server-row:not(.open) .sr-bottom { display: none !important; }
.dash-compact .server-row:not(.open) .sr-mini { display: inline-flex; }
.dash-compact .server-row .sr-name { cursor: pointer; }
.dash-compact .server-row:hover { transform: none; }
.dash-compact .category-block .server-row + .server-row { margin-top: 6px; }
@media (max-width: 760px) { .dash-compact .server-row:not(.open) .sr-mini code { display: none; } }

/* метка автоматики */
.sr-guard:empty { display: none; }
.gb { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.gb-wait { color: var(--tt-warn); border-color: rgba(217,168,78,.35); }
.gb-off { color: var(--tt-danger); border-color: rgba(224,108,99,.4); background: rgba(224,108,99,.08); }
.gb-bin { color: var(--tt-muted); border-color: var(--tt-border); }
.gb-ok { color: var(--tt-accent); border-color: rgba(82,199,154,.4); }
.tg-guard.gb-off { color: var(--tt-danger); }
.tg-guard.gb-wait { color: var(--tt-warn); }
.server-row.in-bin { opacity: .62; }
.server-row.in-bin::before { background: var(--tt-faint) !important; }
.al-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-acts .hint { font-size: 0.72rem; color: var(--tt-faint); }

/* карточка «Автоматика хостов» */
.guard-card { flex: 0 0 auto; margin-bottom: 14px; }
.guard-head { display: flex; align-items: center; gap: 8px; }
.guard-state { margin-left: auto; }
.gs { font: 0.66rem var(--display-font); padding: 2px 8px; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.gs-on { color: var(--tt-accent); background: rgba(82,199,154,.12); }
.gs-off { color: var(--tt-muted); background: rgba(255,255,255,.06); }
.guard-gear { border: 0; background: none; color: var(--tt-muted); cursor: pointer; padding: 2px 4px; font-size: 0.95rem; }
.guard-gear:hover { color: var(--tt-text); }
.guard-tabs { display: flex; gap: 2px; padding: 2px; margin: 4px 0 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.guard-tabs button { flex: 1; border: 0; background: none; color: var(--tt-muted); font: 0.74rem var(--display-font); padding: 5px 6px; border-radius: 6px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.guard-tabs button b { font-weight: 600; color: var(--tt-faint); }
.guard-tabs button.on { background: rgba(255,255,255,.1); color: var(--tt-text); }
.guard-tabs button.on b { color: var(--tt-text); }
.g-note { display: flex; gap: 8px; font-size: 0.74rem; color: var(--tt-muted); line-height: 1.45; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--tt-border); margin-bottom: 8px; }
.g-note.warn { color: #e8c47c; border-color: rgba(217,168,78,.3); background: rgba(217,168,78,.06); }
.g-note a { color: var(--tt-accent); }
#guard-list { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
.g-empty { font-size: 0.76rem; color: var(--tt-faint); padding: 14px 6px; text-align: center; line-height: 1.5; }
.g-item { padding: 9px 11px; border-radius: 9px; border: 1px solid var(--tt-border); border-left: 3px solid var(--tt-faint); background: rgba(255,255,255,.02); display: grid; gap: 5px; }
.g-off { border-left-color: var(--tt-danger); }
.g-binned { border-left-color: var(--tt-warn); }
.g-cleared { border-left-color: var(--tt-accent); background: rgba(82,199,154,.05); }
.g-plan { border-left-color: var(--tt-muted); }
.g-held { opacity: .75; }
.g-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.g-top b { font: 600 0.82rem var(--display-font); color: var(--tt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.g-top .proj-badge { font-size: 0.6rem; padding: 1px 5px; flex: none; }
.g-dur, .g-ip, .g-do { margin-left: auto; flex: none; font-size: 0.72rem; color: var(--tt-muted); }
.g-ip { background: none; padding: 0; }
.g-do { color: var(--tt-text); }
.g-why { font-size: 0.74rem; color: var(--tt-muted); line-height: 1.4; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.g-reason { color: var(--tt-danger); font-weight: 600; }
.g-sub { color: var(--tt-faint); width: 100%; }
.g-bad { color: var(--tt-warn); font-weight: 600; }
.g-ok { color: var(--tt-accent); font-weight: 600; }
.g-srv { font-size: 0.72rem; color: var(--tt-faint); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.g-srv a { color: var(--tt-muted); text-decoration: none; border-bottom: 1px dotted var(--tt-faint); }
.g-bot { display: flex; align-items: center; gap: 8px; }
.g-bot .ui-btn { margin-left: auto; }
.g-prog { width: 60px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; flex: none; }
.g-prog i { display: block; height: 100%; background: var(--tt-accent); border-radius: 3px; }
.g-prog-t { font-size: 0.7rem; color: var(--tt-muted); flex: none; }
.g-hint { font-size: 0.7rem; color: var(--tt-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* окно настроек автоматики */
.gs-body { display: grid; gap: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gs-field { display: grid; gap: 4px; font-size: 0.8rem; color: var(--tt-text); }
.gs-field small, .gs-check small { color: var(--tt-faint); font-size: 0.72rem; }
.gs-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.gs-check input { margin-top: 3px; accent-color: var(--tt-accent); }
.gs-check span { display: grid; gap: 2px; font-size: 0.82rem; }
@media (max-width: 600px) { .gs-grid { grid-template-columns: 1fr; } }
/* компактный вид: строке хватает места на имя - кнопки и хостер видны в раскрытой строке */
.dash-compact .server-row:not(.open) .sr-actions,
.dash-compact .server-row:not(.open) .sr-hoster { display: none !important; }
.dash-compact .server-row .sr-name { min-width: 120px; flex: 0 1 auto; }
.dash-compact .server-row:not(.open) .sr-top { gap: 10px; }
.dash-compact .server-row:not(.open) .sr-uptime-inline { min-width: 92px; text-align: right; }
.dash-compact .server-row:not(.open) .sr-mini code { min-width: 112px; }
#categories.no-anim .server-row { animation: none !important; }
/* блок «внимания» не прыгает по высоте строк: причина в одну строку */
.al-what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* пока данные грузятся - держим место, чтобы страница не съезжала */
#vx-body:has(> .text-muted:only-child), #rl-body:has(> .ui-empty:only-child) { min-height: 70vh; }
.dash-loading .kpi-row, .dash-loading #attention, .dash-loading .dashboard-layout { visibility: hidden; }
.dash-revealed .kpi-row, .dash-revealed #attention, .dash-revealed .dashboard-layout { animation: tt-fade-in .25s var(--tt-ease) both; }
/* места под блоки, которые рисуются скриптом после загрузки (иначе страница съезжает) */
#vx-tabs:empty { min-height: 45px; }
#rl-line:empty { min-height: 23px; }
#rl-stats:empty { min-height: 119px; }
@media (max-width: 760px) {
  #vx-tabs:empty { min-height: 78px; }
  #rl-line:empty { min-height: 44px; }
  #rl-stats:empty { min-height: 251px; }
}
#vx-scans:empty { min-height: 21px; }
#vx-kpis:empty { min-height: 71px; }
@media (max-width: 760px) {
  #vx-scans:empty { min-height: 40px; }
  #vx-kpis:empty { min-height: 248px; }
}
.gs-body .hint { font-size: 0.74rem; color: var(--tt-faint); margin: 0; line-height: 1.45; }
@media (max-width: 1100px) { .kpi-row > .kpi-btn { grid-column: span 2; } }

/* =====================================================================
   Биллинг 2026-11-02: в работе / удалённые, правка в строке, расход за месяц
   ===================================================================== */
.bl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bl-month { display: flex; align-items: center; gap: 8px; }
.bl-month label { font: 0.74rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .06em; }
.bl-month .ui-select { min-width: 190px; }
.bl-search { position: relative; flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.bl-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tt-faint); font-size: 0.85rem; }
.bl-search input { width: 100%; height: 40px; padding: 0 12px 0 34px; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 9px; color: var(--tt-text); font-size: 0.85rem; }
.bl-search input:focus { outline: none; border-color: rgba(82,199,154,.5); }
.bl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.bl-kpi { display: grid; gap: 6px; align-content: start; padding: 16px 18px; min-height: 112px; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 12px; min-width: 0; }
.bl-kpi > span { font: 0.72rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .06em; }
.bl-kpi > b { font: 700 1.75rem/1.1 var(--display-font); color: var(--tt-text); }
.bl-kpi > small { font-size: 0.74rem; color: var(--tt-faint); line-height: 1.4; }
.bl-kpi.k-accent { border-color: rgba(82,199,154,.35); background: linear-gradient(180deg, rgba(82,199,154,.07), var(--tt-card)); }
.bl-kpi.k-accent > b { color: var(--tt-accent); }
.bl-kpi.k-muted > b { color: #c9ced3; }
.bl-kpi.k-warn { border-color: rgba(217,168,78,.4); } .bl-kpi.k-warn > b { color: var(--tt-warn); }
.bl-kpi.k-bad { border-color: rgba(224,108,99,.45); } .bl-kpi.k-bad > b { color: var(--tt-danger); }
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.bl-card { background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.bl-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.bl-tabs button { border: 0; background: none; color: var(--tt-muted); font: 0.82rem var(--display-font); padding: 7px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.bl-tabs button em, .bl-check em { font-style: normal; color: var(--tt-faint); font-size: 0.74rem; }
.bl-tabs button.on { background: rgba(255,255,255,.08); color: var(--tt-text); }
.bl-check { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--tt-muted); cursor: pointer; }
.bl-check input { accent-color: var(--tt-accent); }
.bl-table-wrap { overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.bl-table th { text-align: left; font: 600 0.68rem var(--display-font); color: var(--tt-faint); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--tt-border); white-space: nowrap; }
.bl-table th.sortable { cursor: pointer; user-select: none; }
.bl-table th.sortable:hover, .bl-table th.on { color: var(--tt-text); }
.bl-table th i { margin-left: 4px; font-size: 0.6rem; }
.bl-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; color: var(--tt-text); white-space: nowrap; }
.bl-table td small { display: block; font-size: 0.7rem; color: var(--tt-faint); margin-top: 1px; }
.bl-table td:nth-child(3) small { display: inline; margin: 0; }
.bl-table tbody tr:hover { background: rgba(255,255,255,.025); }
.bl-table tbody tr.bl-row-due { background: rgba(224,108,99,.05); }
.bl-table tbody tr.bl-editing { background: rgba(82,199,154,.06); }
.bl-table tfoot td { font: 600 0.82rem var(--display-font); color: var(--tt-text); border-bottom: 0; border-top: 1px solid var(--tt-border); padding-top: 11px; }
.bl-name { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 260px; }
.bl-name b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bl-name .proj-badge { font-size: 0.58rem; padding: 1px 5px; flex: none; }
.bl-ip { display: block; font-size: 0.7rem; color: var(--tt-faint); background: none; padding: 0; margin-top: 2px; }
.bl-muted { color: var(--tt-faint); }
.bl-noprice { color: var(--tt-warn); font-size: 0.78rem; }
.bl-pay.ok { color: var(--tt-faint) !important; } .bl-pay.warn { color: var(--tt-warn) !important; } .bl-pay.bad { color: var(--tt-danger) !important; }
.bl-edit { border: 0; background: none; color: var(--tt-faint); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.bl-edit:hover { color: var(--tt-text); background: rgba(255,255,255,.06); }
.bl-in { height: 32px !important; padding: 0 8px !important; font-size: 0.8rem !important; min-width: 0; }
input.bl-in[data-f="hoster"] { width: 130px; }
input.bl-in[type="date"] { width: 138px; color-scheme: dark; }
.bl-price-in { display: flex; gap: 5px; align-items: center; }
.bl-price-in input { width: 74px; }
.bl-price-in .ui-select { min-width: 62px; }
.bl-price-in .ui-select select, .bl-price-in .ui-select .ui-select-btn { height: 32px; font-size: 0.8rem; }
.bl-dates-in { display: flex; gap: 5px; }
.bl-acts { display: flex; gap: 4px; justify-content: flex-end; }
.bl-empty { text-align: center; color: var(--tt-faint); padding: 28px 10px !important; }
.bl-note { font-size: 0.72rem; color: var(--tt-faint); margin: 10px 2px 0; line-height: 1.5; }
.bl-h { font: 600 0.72rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 10px; display: flex; gap: 6px; align-items: baseline; }
.bl-h small { text-transform: none; letter-spacing: 0; color: var(--tt-faint); font-weight: 400; }
.bl-h + div { margin-bottom: 18px; display: grid; gap: 6px; }
.bl-bar { position: relative; display: block; width: 100%; text-align: left; border: 1px solid var(--tt-border); background: rgba(255,255,255,.02); border-radius: 8px; padding: 7px 10px 9px; cursor: pointer; color: inherit; overflow: hidden; }
.bl-bar:hover { border-color: rgba(255,255,255,.16); }
.bl-bar-t { display: flex; gap: 7px; align-items: baseline; font-size: 0.78rem; position: relative; z-index: 1; }
.bl-bar-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bl-bar-t em { font-style: normal; color: var(--tt-faint); font-size: 0.7rem; }
.bl-bar-t span { margin-left: auto; white-space: nowrap; color: var(--tt-text); }
.bl-bar > i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--tt-accent); opacity: .7; border-radius: 0 3px 3px 0; }
.bl-proj { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--tt-border); border-radius: 8px; }
.bl-proj span small { display: block; font-size: 0.66rem; color: var(--tt-faint); }
.bl-proj span b { font: 600 0.84rem var(--display-font); }
@media (max-width: 1200px) { .bl-grid { grid-template-columns: 1fr; } .bl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bl-search { max-width: none; margin-left: 0; }
  .bl-kpi { min-height: 0; padding: 12px 14px; } .bl-kpi > b { font-size: 1.35rem; }
  .bl-check { margin-left: 0; }
}
/* биллинг: полоса хостеров/проектов над таблицей, таблица на всю ширину */
.bl-strip { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; margin-bottom: 14px; }
.bl-hosters { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-bottom: 0 !important; }
.bl-projcard #bl-projects { margin-bottom: 0; }
.bl-loading .bl-kpis, .bl-loading .bl-strip, .bl-loading .bl-main { visibility: hidden; }
.bl-revealed .bl-kpis, .bl-revealed .bl-strip, .bl-revealed .bl-main { animation: tt-fade-in .25s var(--tt-ease) both; }
@media (max-width: 1100px) { .bl-strip { grid-template-columns: 1fr; } }
.bl-q { display: inline-block; margin-top: 3px; font-size: 0.66rem; padding: 1px 7px; border-radius: 999px; color: var(--tt-warn); border: 1px solid rgba(217,168,78,.35); }
.bl-q.ok { color: var(--tt-accent); border-color: rgba(82,199,154,.4); }
#bl-gone:empty { display: none; }

/* =====================================================================
   Раскрытая карточка сервера 2026-11-02: значения строкой, без плиток;
   каждый домашний ПК - одной строкой (их может быть несколько).
   ===================================================================== */
.dashboard-main .server-row .sr-bottom { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
.dashboard-main .sr-access { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 20px !important; }
.dashboard-main .sr-access .sr-ip, .dashboard-main .sr-access .sr-pass, .dashboard-main .sr-access .sr-port {
  padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; font-size: 0.84rem !important; border-radius: 0 !important; }
.dashboard-main .sr-access .sr-ip i:first-child, .dashboard-main .sr-access .sr-pass > i:first-child { color: var(--tt-faint); }
.dashboard-main .sr-access .sr-online { padding: 0; font-size: 0.84rem; }
.dashboard-main .server-row .sr-metrics { display: flex !important; flex-wrap: wrap !important; gap: 4px 20px !important; margin: 0 !important; }
.dashboard-main .server-row .sr-metrics .mt { display: inline-flex !important; align-items: baseline; gap: 6px; padding: 0 !important; border: 0 !important;
  background: none !important; min-width: 0 !important; max-width: none !important; flex: none !important; grid-column: auto !important; border-radius: 0 !important; }
.dashboard-main .server-row .sr-metrics .mt-bar, .dashboard-main .server-row .sr-metrics .mt-l i { display: none !important; }
.dashboard-main .server-row .sr-metrics .mt-l { font: 400 0.76rem var(--display-font); text-transform: none; letter-spacing: 0; color: var(--tt-faint); }
.dashboard-main .server-row .sr-metrics .mt-v { font-size: 0.86rem; }
.dashboard-main .server-row .sr-metrics .mt-s { font-size: 0.7rem; color: var(--tt-faint); }
.dashboard-main .server-row .sr-home { display: grid !important; gap: 4px; }
.dashboard-main .server-row .home-box { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 5px 10px !important; border: 0 !important;
  border-left: 2px solid rgba(127,220,182,.5) !important; border-radius: 0 6px 6px 0 !important; background: rgba(255,255,255,.025) !important; }
.dashboard-main .server-row .home-box.hc-bad { border-left-color: rgba(224,108,99,.7) !important; background: rgba(224,108,99,.06) !important; }
.dashboard-main .server-row .home-box .hb-head { gap: 6px; min-width: 120px; font-size: 0.78rem; }
.dashboard-main .server-row .home-box .hb-head em { margin-left: 4px; padding-left: 0; }
.dashboard-main .server-row .home-box .hb-row { display: flex; flex-wrap: wrap; gap: 4px 16px !important; }
.dashboard-main .server-row .hb-stat { display: inline-flex !important; align-items: baseline; gap: 5px; line-height: 1.3; }
.dashboard-main .server-row .hb-stat small { font: 400 0.74rem var(--display-font); text-transform: none; letter-spacing: 0; color: var(--tt-faint); }
.dashboard-main .server-row .hb-stat b { font-size: 0.84rem; }
/* метка карантина в шапке карточки */
.gb-bin { color: var(--tt-warn) !important; border-color: rgba(217,168,78,.35) !important; background: rgba(217,168,78,.06); }
.dashboard-main .server-row .sr-home { justify-items: start; margin: 0 !important; padding: 0 !important; }
.dashboard-main .server-row .sr-home .home-box { margin: 0 !important; width: auto !important; max-width: 100% !important; justify-self: start; }
.dashboard-main .server-row .sr-home { grid-template-columns: minmax(0, 1fr) !important; justify-content: start !important; }
/* шапка карточки не вылезает за колонку: метки сжимаются, кнопки остаются на месте */
.dashboard-main .server-row { min-width: 0; }
.dashboard-main .server-row .sr-top { min-width: 0; }
.dashboard-main .server-row .sr-guard { min-width: 0; overflow: hidden; flex: 0 1 auto; }
.dashboard-main .server-row .sr-guard .gb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dashboard-main .server-row .sr-hoster { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }

/* карточка «Автоматика хостов» v2: переключатель, строка статуса, пустые состояния */
.guard-card .guard-head { gap: 10px; }
.g-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: 2px 0; color: var(--tt-muted);
  font: 500 0.68rem var(--display-font); text-transform: none; letter-spacing: 0; }
.g-switch > i { position: relative; width: 34px; height: 19px; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .2s var(--tt-ease); flex: none; }
.g-switch > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #c9ced3; transition: transform .2s var(--tt-ease), background .2s; }
.g-switch.on { color: var(--tt-accent); }
.g-switch.on > i { background: rgba(82,199,154,.45); }
.g-switch.on > i::after { transform: translateX(15px); background: #fff; }
.g-switch:hover > i { box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.g-switch.is-loading { opacity: .6; pointer-events: none; }
.guard-card .guard-gear { margin-left: 0; }
.guard-card .guard-tabs { margin: 2px 0 10px; }
.guard-card .guard-tabs button b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 0.66rem; }
.guard-card .guard-tabs button.on b { background: rgba(82,199,154,.2); color: var(--tt-accent); }
.g-status { display: flex; align-items: flex-start; gap: 9px; font-size: 0.74rem; color: var(--tt-muted); line-height: 1.45; padding: 0 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--tt-border); }
.g-status b { color: var(--tt-text); font-weight: 600; }
.g-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--tt-faint); }
.g-status.on .g-dot { background: var(--tt-accent); box-shadow: 0 0 0 3px rgba(82,199,154,.15); animation: sr-ping-pulse 2.4s ease-in-out infinite; }
.g-status.warn .g-dot { background: var(--tt-warn); }
.g-status.warn b { color: var(--tt-warn); }
.g-empty { display: grid; justify-items: center; gap: 4px; padding: 18px 10px 14px; text-align: center; }
.g-empty i { font-size: 1.35rem; color: var(--tt-faint); margin-bottom: 2px; }
.g-empty b { font: 600 0.8rem var(--display-font); color: var(--tt-text); }
.g-empty span { font-size: 0.72rem; color: var(--tt-faint); line-height: 1.45; max-width: 260px; }

/* =====================================================================
   Окно «Проверка сервера» v2 (2026-11-02): форма строкой, итог, доступность
   и сервер рядом, локация, маршрут: карта + список прыжков сбоку.
   ===================================================================== */
.tspu2 { width: min(1240px, calc(100vw - 32px)) !important; max-width: none !important; }
.tspu2 .ui-modal-body { display: grid; gap: 14px; }
.tspu2-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--tt-border); border-radius: 12px; background: rgba(255,255,255,.02); }
.tspu2-f { display: grid; gap: 5px; min-width: 0; }
.tspu2-f > span { font: 500 0.7rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .05em; }
.tspu2-f.grow { flex: 1 1 170px; }
.tspu2-f.w-port { flex: 0 0 110px; }
.tspu2-f .ui-field { height: 40px; }
.tspu2-go { height: 40px; padding: 0 20px; flex: none; }
.tspu2-help-btn { height: 40px; width: 40px; flex: none; }
.tspu2-help { display: grid; gap: 8px; font-size: 0.8rem; color: var(--tt-muted); line-height: 1.5; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--tt-border); }
.tspu2-help b { color: var(--tt-text); }
.tspu2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.76rem; }
.tspu2-out { display: grid; gap: 14px; min-height: 260px; align-content: start; }
.tspu2-empty, .tspu2-running { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 56px 20px; color: var(--tt-faint); }
.tspu2-empty i { font-size: 2rem; color: var(--tt-faint); }
.tspu2-empty b, .tspu2-running b { font: 600 0.92rem var(--display-font); color: var(--tt-text); }
.tspu2-empty span, .tspu2-running span { font-size: 0.8rem; max-width: 520px; line-height: 1.5; }
.tspu2-running { grid-auto-flow: column; justify-content: center; align-items: center; gap: 14px; padding: 18px; text-align: left; border: 1px solid var(--tt-border); border-radius: 12px; }
.tspu2-running > div { display: grid; gap: 2px; }
.tspu2-progress { max-height: 420px; overflow: auto; }
.tspu2-verdict { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--tt-border); }
.tspu2-verdict > i { font-size: 1.8rem; line-height: 1; margin-top: 2px; }
.tspu2-verdict h4 { margin: 0 0 4px; font: 700 1.05rem var(--display-font); }
.tspu2-verdict p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--tt-text); }
.tspu2-verdict code { margin-left: auto; flex: none; font-size: 0.78rem; color: var(--tt-muted); background: rgba(255,255,255,.05); padding: 3px 8px; border-radius: 6px; }
.tspu2-verdict.ok { border-color: rgba(82,199,154,.45); background: rgba(82,199,154,.07); } .tspu2-verdict.ok > i, .tspu2-verdict.ok h4 { color: var(--tt-accent); }
.tspu2-verdict.warn { border-color: rgba(217,168,78,.45); background: rgba(217,168,78,.07); } .tspu2-verdict.warn > i, .tspu2-verdict.warn h4 { color: var(--tt-warn); }
.tspu2-verdict.bad { border-color: rgba(224,108,99,.5); background: rgba(224,108,99,.08); } .tspu2-verdict.bad > i, .tspu2-verdict.bad h4 { color: #ef8f87; }
.tspu2-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; }
.tspu2-card { border: 1px solid var(--tt-border); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.015); min-width: 0; }
.tspu2-card h5 { margin: 0 0 10px; font: 600 0.72rem var(--display-font); color: var(--tt-muted); text-transform: uppercase; letter-spacing: .07em; }
.tspu2-avail { display: grid; gap: 8px; }
.tspu2-av-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.025); }
.tspu2-av-src { display: flex; align-items: center; gap: 7px; font: 600 0.8rem var(--display-font); color: var(--tt-text); }
.tspu2-av-src i { color: var(--tt-faint); }
.tspu2-av-cells { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tspu2-av-cells > span { display: grid; gap: 1px; font-size: 0.8rem; }
.tspu2-av-cells small { font: 400 0.66rem var(--display-font); color: var(--tt-faint); text-transform: uppercase; letter-spacing: .05em; }
.tspu2-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font-size: 0.82rem; }
.tspu2-kv > div:nth-child(odd) { color: var(--tt-faint); }
.tspu2-kv > div:nth-child(even) { color: var(--tt-text); overflow-wrap: anywhere; }
.tspu2 .tspu-loc { margin: 0; }
.tspu2-noroute { display: flex; align-items: center; gap: 14px; }
.tspu2-noroute > i { font-size: 1.5rem; color: var(--tt-faint); }
.tspu2-noroute b { display: block; font: 600 0.86rem var(--display-font); color: var(--tt-text); }
.tspu2-noroute span { font-size: 0.8rem; color: var(--tt-muted); }
.tspu2-route-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tspu2-route-head h5 { margin: 0; }
.tspu2-route-head .tspu-route-tabs { margin: 0; }
.tspu2-route-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 12px; height: 440px; }
.tspu2-map { height: 100% !important; border-radius: 10px; }
.tspu2-hops { overflow-y: auto; border: 1px solid var(--tt-border); border-radius: 10px; padding: 4px; }
.tspu2-hops-list { display: grid; gap: 2px; }
.tspu2-hop { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 7px; font-size: 0.8rem; }
.tspu2-hop[data-hop] { cursor: pointer; }
.tspu2-hop[data-hop]:hover, .tspu2-hop.on { background: rgba(255,255,255,.06); }
.tspu2-hop .h-n { font: 600 0.72rem var(--display-font); color: var(--tt-faint); text-align: center; }
.tspu2-hop .h-main { display: grid; min-width: 0; }
.tspu2-hop .h-place { color: var(--tt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tspu2-hop .h-ip { font-size: 0.72rem; color: var(--tt-muted); }
.tspu2-hop .h-as { font-size: 0.68rem; color: var(--tt-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tspu2-hop .h-ms { font: 600 0.76rem var(--display-font); color: var(--tt-text); white-space: nowrap; }
.tspu2-hop.h-start { background: rgba(82,199,154,.07); } .tspu2-hop.h-start .h-n { color: var(--tt-accent); }
.tspu2-hop.h-target { background: rgba(239,143,135,.09); } .tspu2-hop.h-target .h-n { color: #ef8f87; }
.tspu2-hop.h-silent { opacity: .6; }
@media (max-width: 980px) {
  .tspu2-row { grid-template-columns: 1fr; }
  .tspu2-route-grid { grid-template-columns: 1fr; height: auto; }
  .tspu2-map { height: 320px !important; }
  .tspu2-hops { max-height: 320px; }
  .tspu2-av-row { grid-template-columns: 1fr; }
  .tspu2-verdict code { display: none; }
}
.tspu2 .tspu-left.tspu2-form { position: static !important; top: auto !important; }
.tspu2-hop.h-fake .h-place { color: var(--tt-muted); }
.tspu2-hop .h-fake-t { font-style: normal; font-size: 0.64rem; color: var(--tt-warn); border: 1px solid rgba(217,168,78,.35); border-radius: 999px; padding: 0 6px; margin-left: 4px; }