/* Единая тема приложения (тёмная). Токены — в :root, остальное — правила.
   Подробности и правила добавления иконок: docs/33-ui-theme.md.
   Это же — база для input.css (tailwind-сборка), держать в синхроне. */
:root {
    --bg:#0f1115; --card:#171a21; --border:#262b36; --border-hi:#3a4150;
    --fg:#eceef3; --fg2:#b3bac7; --fg3:#7c8494;
    --accent:#6aa6ff;          /* акцент в тексте: ссылки, IP, активные пункты */
    --accent-bg:#4f7df3;       /* заливка основной кнопки */
    --accent-soft:rgba(79,125,243,0.16);
    --ok:#4ade80; --warn:#fbbf24; --danger:#f87171; --purple:#c084fc;
    --hover:rgba(255,255,255,0.04);
    --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;
    --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* алиасы для обратной совместимости с inline-стилями шаблонов */
    --neon-cyan:var(--accent); --neon-green:var(--ok); --neon-purple:var(--purple); --neon-pink:var(--danger);
    --dark-base:var(--bg); --dark-card:var(--card); --dark-border:var(--border); --pro-warn:var(--warn);
    color-scheme: dark;
}

* { box-sizing: border-box; }
body { font-family: var(--font); font-size: 15px; margin: 0; padding: 16px 24px; background: var(--bg); color: var(--fg); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); }
.container { max-width: 1400px; margin: 0 auto; }

/* Заголовки */
h1, h2, h3 { font-family: var(--font); color: var(--fg); margin-top: 0; }
h1 { font-size: 1.45rem; font-weight: 600; }
h2 { font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
h3 { margin-bottom: 15px; font-weight: 600; }
.uppercase { text-transform: none !important; letter-spacing: 0 !important; }
code, pre, .font-mono, .mono { font-family: var(--mono); font-size: 0.8em; }
code { background: var(--accent-soft); color: var(--accent); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--bg) !important; border: 1px solid var(--border); }
.mono { font-size: inherit; }

/* Карточки */
.card, .bg-white { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.card { padding: 20px; margin-bottom: 20px; }
[class*="card-l-"] { border-left: 1px solid var(--border) !important; }
.card-l-pink { border-left: 3px solid var(--danger) !important; }
.card-l-warn { border-left: 3px solid var(--warn) !important; }
.card-l-green { border-left: 3px solid var(--ok) !important; }
.card-l-cyan { border-left: 3px solid var(--accent) !important; }
.card-l-purple { border-left: 3px solid var(--purple) !important; }
.border-l-4 { border-left-width: 3px !important; }
.bg-white > h2:first-child { font-size: 0.95rem; font-weight: 600; color: var(--fg); margin-bottom: 12px; }

/* Сетка */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.group-badge { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 0.85rem; margin-right: 5px; color: white; }
.group-list { display: flex; flex-wrap: wrap; gap: 5px; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; }
.group-square { border-radius: 12px; padding: 20px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.group-square h3 { margin: 0 0 10px 0; color: white; }
.group-square .stats { font-size: 0.9rem; opacity: 0.9; }

/* KPI */
.cyber-stat, .stat-box { background: var(--card); border: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; text-align: left; transition: border-color 0.2s; }
.cyber-stat:hover { border-color: var(--border-hi); }
.cyber-stat .val, .stat-value { font-family: var(--font); font-size: 1.6rem; font-weight: 600; color: var(--fg); line-height: 1.15; overflow-wrap: anywhere; }
.cyber-stat .lbl, .stat-label { font-size: 0.82rem; color: var(--fg2); margin-top: 4px; overflow-wrap: anywhere; }
.cyber-stat.cyan .val   { color: var(--accent); }
.cyber-stat.green .val  { color: var(--ok); }
.cyber-stat.purple .val { color: var(--purple); }
.cyber-stat.pink .val   { color: var(--danger); }
.cyber-stat.warn .val   { color: var(--warn); }
.cyber-stat.green  { border-left: 3px solid var(--ok) !important; }
.cyber-stat.pink   { border-left: 3px solid var(--danger) !important; }
.cyber-stat.warn   { border-left: 3px solid var(--warn) !important; }
a .cyber-stat { cursor: pointer; }

/* Таблицы */
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th { text-align: left; padding: 8px 10px; font-weight: 600; font-size: 0.76rem; color: var(--fg3); border-bottom: 1px solid var(--border); cursor: pointer; }
th:hover { color: var(--fg); }
td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--fg); font-size: 0.86rem; }
tr:hover { background: var(--hover) !important; }
td .font-mono, td code { color: var(--accent); }
#usersTable th.sort-asc::after, #usersTable th.sort-desc::after { color: var(--fg2); }
#usersTable td.editable:hover { background: var(--accent-soft); }
/* действия в строке таблицы: тихие иконки, danger отдельно */
#usersTable td .cyber-btn, .row-actions .cyber-btn { background: transparent; color: var(--fg2); border: 1px solid transparent; padding: 3px 6px; min-height: 0; border-radius: 5px; line-height: 1; }
#usersTable td .cyber-btn:hover { background: var(--hover); border-color: var(--border); color: var(--fg); }
#usersTable td .cyber-btn.pink { color: var(--fg3); margin-left: 6px; }
#usersTable td .cyber-btn.pink:hover { color: var(--danger); background: rgba(248,113,113,0.1); }
#usersTable td .cyber-btn.warn { color: var(--fg2); }
.act-icon { width: 15px; height: 15px; display: block; }

/* Кнопки (старые .btn-*) */
.btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; text-decoration: none; }
.btn-primary { background: var(--accent-bg); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #3f6be0; color: #fff; }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--border); }
.btn-success { background: var(--ok); color: var(--bg); font-weight: 600; }

/* Формы */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: var(--fg2); font-weight: 500; }
.form-control { width: 100%; padding: 10px; border-radius: 6px; font-size: 1rem; }
.form-control, .cyber-input, input, select, textarea { font-family: var(--font); font-size: 0.85rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; box-shadow: none; }
.form-control:focus, .cyber-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--accent-bg); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-bg); }

/* Графики */
.bar-chart { display: flex; align-items: flex-end; height: 200px; gap: 2px; padding: 10px 0; border-bottom: 2px solid var(--border); }
.bar { flex: 1; background: var(--accent-bg); border-radius: 4px 4px 0 0; min-height: 2px; opacity: 0.7; }
.bar:hover { opacity: 1; }
.bar-labels { display: flex; gap: 2px; }
.bar-label { flex: 1; text-align: center; font-size: 0.7rem; color: var(--fg2); padding-top: 5px; }

/* Статусы */
.status-online { color: var(--ok); font-weight: 500; }
.status-offline { color: var(--fg2); }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.status-dot.ok { background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.fail { background: var(--danger); }
.status-dot.muted { background: var(--fg3); }

/* Flash */
.flash-messages { position: fixed; top: 20px; right: 20px; z-index: 9999; max-width: 400px; }
.flash-msg { padding: 14px 20px; border-radius: 8px; margin-bottom: 10px; color: white; font-weight: 500; font-family: var(--font); box-shadow: 0 6px 20px rgba(0,0,0,0.3); animation: flashIn 0.3s ease-out, flashOut 0.5s ease-in 3.5s forwards; cursor: pointer; }
.flash-msg.success { background: #166534; border: 1px solid var(--ok); }
.flash-msg.error { background: #7f1d1d; border: 1px solid var(--danger); }
.flash-msg.warning { background: #78350f; border: 1px solid var(--warn); }
.flash-msg.info { background: #1e3a5f; border: 1px solid var(--accent); }
@keyframes flashIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes flashOut { from { opacity: 1; } to { opacity: 0; } }

/* Tailwind-классы, переопределённые под тёмную тему */
.bg-gray-50, .bg-gray-100 { background: var(--card) !important; }
/* Вложенные блоки внутри карточки (формы, под-секции): чуть светлее карточки, а не белые.
   21.10.2026: блок вендора на /admin/payer/<id> был bg-slate-50 — белый на тёмном. */
.bg-slate-50, .bg-slate-100, .bg-gray-200, .bg-gray-300 { background: var(--hover, rgba(255,255,255,0.04)) !important; }
.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-50, .border-red-200 { border-color: var(--border) !important; }
.bg-blue-100, .bg-cyan-50, .bg-cyan-100, .bg-indigo-100 { background: var(--accent-soft) !important; }
.bg-emerald-100, .bg-green-100 { background: color-mix(in srgb, var(--ok) 14%, transparent) !important; }
.bg-amber-100, .bg-yellow-100, .bg-amber-300 { background: color-mix(in srgb, var(--warn) 14%, transparent) !important; }
.shadow-sm { box-shadow: none !important; }
.border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.text-slate-700, .text-slate-800 { color: var(--fg) !important; }
.text-gray-500 { color: var(--fg2) !important; }
.text-gray-400, .text-gray-300 { color: var(--fg3) !important; }
.text-blue-600, .text-blue-500 { color: var(--accent) !important; }
.text-emerald-600, .text-emerald-500, .text-green-600, .text-green-500 { color: var(--ok) !important; }
.text-red-500, .text-red-600, .text-pink-500 { color: var(--danger) !important; }
.text-purple-600 { color: var(--purple) !important; }
.text-orange-500, .text-amber-500 { color: var(--warn) !important; }
.bg-blue-50 { background: var(--accent-soft) !important; }
.bg-green-50, .bg-emerald-50 { background: color-mix(in srgb, var(--ok) 10%, transparent) !important; }
.bg-red-50, .bg-pink-50 { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; }
.bg-amber-50, .bg-yellow-50, .bg-orange-50 { background: color-mix(in srgb, var(--warn) 10%, transparent) !important; }
.bg-purple-50 { background: color-mix(in srgb, var(--purple) 10%, transparent) !important; }
.bg-emerald-500, .bg-blue-500 { background: var(--accent-bg) !important; color: #fff !important; border-radius: 6px; font-weight: 500; }
.hover\:bg-emerald-600:hover, .hover\:bg-blue-600:hover { background: #3f6be0 !important; }
.bg-red-500 { background: transparent !important; color: var(--danger) !important; border: 1px solid var(--border); }
.hover\:bg-red-600:hover { background: rgba(248,113,113,0.12) !important; }
.bg-purple-600 { background: var(--purple) !important; }
.border-blue-500, .border-blue-600 { border-color: var(--accent) !important; }
.ring-blue-400 { --tw-ring-color: var(--accent-soft) !important; }
.bg-green-100 { background: color-mix(in srgb, var(--ok) 14%, transparent) !important; }
.bg-red-100 { background: color-mix(in srgb, var(--danger) 14%, transparent) !important; }
.bg-gray-900 { background: var(--bg) !important; }
.text-xs { font-size: 0.78rem !important; }
.text-sm { font-size: 0.875rem !important; }

/* ─── UI kit (общие классы для макросов _cyber.html) ─── */

/* Навигация */
.nav-sep { display:none; width:1px; height:20px; margin:0 4px; background:var(--border); }
@media (min-width: 768px) { .nav-sep { display:block; } }
.nav-group > summary, .nav-link { font-size: 0.86rem; font-weight: 500; color: var(--fg2); border: 1px solid transparent; background: transparent; padding: 6px 10px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background 0.12s, color 0.12s; text-decoration: none; }
.nav-group:hover > summary, .nav-link:hover { color: var(--fg); background: var(--hover); }
.nav-group > summary.active, .nav-group[open] > summary, .nav-link.active, .nav-link.active[class*="variant-"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.nav-group > summary::after { opacity: 0.5; }
.nav-group .nav-dropdown { background: var(--card); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.25); border-radius: 8px; }
.nav-group .nav-dropdown a { font-size: 0.86rem; color: var(--fg); }
.nav-group .nav-dropdown a:hover { background: var(--hover); color: var(--fg); }
.nav-group .nav-dropdown a.active { background: var(--accent-soft); color: var(--accent); border-left: 0; padding-left: 12px; }
.nav-group .nav-dropdown .sub-label { color: var(--fg3); }
.nav-icon { width: 15px; height: 15px; flex: none; opacity: 0.85; }

/* Иконки (c.ico): svg виден всегда */
.ico { display: inline-block; vertical-align: -2px; flex: none; margin-right: 0.3em; }
.ico.ico-sm { width: 12px; height: 12px; }
.ico.ico-lg { width: 22px; height: 22px; }
.cyber-btn .ico, .nav-link .ico, summary .ico, .nav-group .ico { margin-right: 0; }
.user-nav-bar { display: flex; align-items: center; gap: .5em .8em; flex-wrap: wrap; }
.user-nav-bar-box { padding: .6em .9em; background: var(--card); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1em; }
.user-nav-id { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.user-nav-tabs { display: flex; gap: .4em; flex-wrap: wrap; }
.cyber-btn .act-icon { margin: 0; }

/* Кнопки: primary / secondary / ghost / danger */
.cyber-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; font-family: var(--font); font-weight: 500; font-size: 0.84rem; text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.cyber-btn.cyan, .cyber-btn.green { background: var(--accent-bg); color: #fff; }
.cyber-btn.cyan:hover, .cyber-btn.green:hover { background: #3f6be0; }
.cyber-btn.purple { background: transparent; color: var(--fg); border-color: var(--border); }
.cyber-btn.purple:hover { background: var(--hover); border-color: var(--border-hi); }
.cyber-btn.ghost { background: transparent; color: var(--fg2); border-color: var(--border); }
.cyber-btn.ghost:hover { color: var(--fg); border-color: var(--border-hi); background: var(--hover); }
.cyber-btn.pink { background: transparent; color: var(--danger); border-color: var(--border); }
.cyber-btn.pink:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.4); }
.cyber-btn.warn { background: transparent; color: var(--warn); border-color: var(--border); }
.cyber-btn.warn:hover { background: rgba(251,191,36,0.12); }
.cyber-btn.compact { padding: 3px 9px; font-size: 0.75rem; }

/* Бейджи */
.badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 0.74rem; font-weight: 600; border: 1px solid transparent; }
.badge.cyan   { background: color-mix(in srgb, var(--accent) 16%, transparent);  color: var(--accent);  border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.badge.green  { background: color-mix(in srgb, var(--ok) 16%, transparent);      color: var(--ok);      border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.badge.purple { background: color-mix(in srgb, var(--purple) 16%, transparent);  color: var(--purple);  border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.badge.pink   { background: color-mix(in srgb, var(--danger) 16%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.badge.warn   { background: color-mix(in srgb, var(--warn) 16%, transparent);    color: var(--warn);    border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge.muted  { background: var(--hover); color: var(--fg2); }

/* Модалка */
.cyber-modal-backdrop { position:fixed; inset:0; background:rgba(10,12,16,0.78); z-index:100; display:none; justify-content:center; align-items:center; padding:20px; }
.cyber-modal { background:var(--card); border:1px solid var(--border); border-radius:12px; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cyber-modal-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-weight:600; color:var(--fg); font-size:0.95rem; }
.cyber-modal-close { background:none; border:none; color:var(--fg3); cursor:pointer; font-size:1.4rem; line-height:1; padding:0 4px; }
.cyber-modal-close:hover { color:var(--danger); }
.cyber-modal-body { padding:20px; }

/* Поля форм */
.cyber-field { margin-bottom:12px; }
.cyber-label { display:block; font-size:0.78rem; color:var(--fg2); margin-bottom:5px; }
.cyber-input { width:100%; padding:9px 12px; }
.cyber-hint { font-size:0.75rem; color:var(--fg3); margin-top:4px; }
.filter-pill { background: transparent; color: var(--fg2); border-color: var(--border); border-radius: 6px; }
.filter-pill.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Мобильная ширина: таблицы внутри карточек скроллятся по горизонтали,
   а не обрезаются (devices/servers/plans/monitoring/alerts/tunnels, 07.10.2026) */
.bg-white { overflow-x:auto; }
.bg-white > table { min-width:100%; }
@media (max-width: 767px) {
    .bg-white table { font-size:0.8rem; }
    th, td { padding:5px 6px; }
}
/* /admin/groups: две колонки на десктопе, стопка на мобильном */
.groups-layout { display:flex; flex-direction:column; gap:1rem; }
.groups-side { width:100%; flex-shrink:0; }
@media (min-width: 768px) {
    .groups-layout { flex-direction:row; }
    .groups-side { width:16rem; }
}
/* Empty state */
.cyber-empty { padding:40px 20px; text-align:center; color:var(--fg2); font-size:0.9rem; }

.card-l { border-left:4px solid var(--border); }

/* Прогресс-бар (трафик/лимиты) */
.progress-row { display:flex; justify-content:space-between; font-size:0.9em; margin-bottom:4px; }
.progress-track { background:var(--border); border-radius:6px; height:22px; position:relative; overflow:hidden; margin-bottom:12px; }
.progress-fill { height:100%; border-radius:6px; transition:width 0.3s; }
.progress-fill.ok { background:var(--ok); }
.progress-fill.warn { background:var(--warn); }
.progress-fill.danger { background:var(--danger); }
.progress-pct { position:absolute; right:8px; top:2px; font-size:0.8em; font-weight:bold; color:var(--fg); }

/* Индикатор безлимитного тарифа */
.progress-unlimited { background:var(--border); border-radius:6px; height:22px; position:relative; overflow:hidden; margin-bottom:12px; }
.progress-unlimited::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--ok) 0%, var(--accent) 30%, var(--ok) 50%, var(--accent) 70%, var(--ok) 100%);
    background-size:200% 100%;
    animation: progressShimmer 2s ease-in-out infinite;
    opacity:0.4;
}
@keyframes progressShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Info-row grid — ключ/значение сеткой 2 колонки */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.info-grid .info-k,
.info-grid .info-v { padding:10px 15px; border-bottom:1px solid var(--border); }
.info-grid .info-k { background:var(--hover); font-weight:bold; }
.info-grid .info-v { font-family:var(--mono); font-size:0.85rem; }
.info-grid > div:nth-last-child(-n+2) { border-bottom:none; }

/* Chip для портов/сервисов */
.chip { display:inline-block; padding:2px 8px; border-radius:4px; margin:2px; font-family:var(--mono); font-size:0.85rem; }
.chip.cyan { background:var(--accent-soft); color:var(--accent); }
.chip.warn { background:rgba(251,191,36,0.15); color:var(--warn); }

/* Popup — полноэкранный диалог с затемнением */
.cyber-popup { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.cyber-popup-content { background:var(--card); border:1px solid var(--border); border-radius:12px; min-width:400px; max-width:700px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,0.5); }
.cyber-popup-header { padding:12px 16px; border-radius:12px 12px 0 0; color:var(--fg); font-weight:600; font-size:1rem; display:flex; justify-content:space-between; align-items:center; background:var(--bg); }
.cyber-popup-body { padding:0; }
.cyber-popup-close { background:none; border:none; color:var(--fg); font-size:1.2rem; cursor:pointer; padding:0 5px; }

/* Picker button — цветная рамка, selected=залито */
.picker-btn { padding:8px 14px; border-radius:8px; cursor:pointer; font-weight:500; font-size:0.9rem; min-width:90px; text-align:center;
              background:transparent; border:1px solid var(--border); color:var(--fg); transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.picker-btn::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--c, var(--accent)); flex:none; }
.picker-btn:hover { border-color:var(--border-hi); background:var(--hover); }
.picker-btn.selected { background:color-mix(in srgb, var(--c, var(--accent)) 18%, transparent); border-color:var(--c, var(--accent)); color:var(--fg); }
/* цветной чип из данных (группа, метка): мягкая заливка + точка цвета вместо сплошной заливки с белым текстом */
.chip-soft { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:0.8rem; font-weight:500; color:var(--fg);
             background:color-mix(in srgb, var(--c, var(--accent)) 16%, transparent); border:1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, transparent); }
.chip-soft::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--c, var(--accent)); flex:none; }
.chip-soft.chip-ok { --c:var(--ok); }
.chip-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--fg2); cursor:pointer; }
.chip-x:hover { background:var(--hover); color:var(--danger); }

/* Тумблер (CSS-only) */
.toggle { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:22px; transition:0.3s; }
.toggle .slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#4a5568; border-radius:50%; transition:0.3s; }
.toggle input:checked + .slider { background:var(--accent-bg); }
.toggle input:checked + .slider::before { transform:translateX(18px); background:#fff; }

/* Monitoring row highlights */
.row-active { background: rgba(74,222,128,0.08) !important; }
.row-active:hover { background: rgba(74,222,128,0.12) !important; }
.row-ping-fail { background: rgba(248,113,113,0.08) !important; }
.row-ping-fail:hover { background: rgba(248,113,113,0.12) !important; }
.row-active.row-ping-fail { background: rgba(251,191,36,0.08) !important; }
.row-active.row-ping-fail:hover { background: rgba(251,191,36,0.12) !important; }
tr[class*="bg-green-50"] { background: rgba(74,222,128,0.06) !important; }
tr[class*="bg-green-50"]:hover { background: rgba(74,222,128,0.1) !important; }

@media (max-width: 768px) {
    table { font-size: 14px; }
    td, th { padding: 8px; }
    .stat-value { font-size: 1.5rem; }
}

/* Плашка «список отфильтрован» (cyber.filterBanner) */
.cyber-filter-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 12px; padding:8px 12px;
                       border:1px solid var(--warn); border-left-width:3px; border-radius:6px; background:rgba(251,191,36,0.08);
                       color:var(--warn); font-size:0.8rem; }
.cyber-filter-banner[hidden] { display:none; }
.cyber-filter-banner-text { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }

/* Глобальный видимый фокус для клавиатурной навигации */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Фаза 2 UI-аудита: цели касания и липкая шапка таблиц */
@media (max-width: 768px) {
    .cyber-btn, .cyber-chip { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    /* Меню: текст слева (не по центру), стрелка группы — справа */
    .nav-group > summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; text-align:left; }
    .nav-group .nav-dropdown a { min-height:44px; display:flex; align-items:center; justify-content:flex-start; text-align:left; }
    input[type="checkbox"], input[type="radio"] { width:20px; height:20px; }
}
.bg-white thead th { position:sticky; top:0; z-index:2; background:var(--card); }

/* Опасные действия отделены от обычных (Фаза 2 UI-аудита) */
.action-danger { margin-left:auto; padding-left:16px; border-left:1px dashed var(--danger); }
@media (max-width: 768px) { .action-danger { margin-left:0; padding-left:0; border-left:0; border-top:1px dashed var(--danger); padding-top:10px; width:100%; } }

.plans-table { min-width:720px; }
.table-scroll { overflow-x:auto; }

/* Утилиты вместо повторяющихся inline-style */
.text-ok { color:var(--ok); } .text-danger { color:var(--danger); } .text-warn { color:var(--warn); } .text-fg { color:var(--fg); } .text-muted { color:var(--fg2); } .text-dim { color:var(--fg3); }
.text-accent { color:var(--accent); }
.u-fs85 { font-size:0.85rem; } .u-fs8 { font-size:0.8rem; }
.u-muted { color:var(--fg2); } .u-dim { color:var(--fg3); } .u-faint { color:var(--fg3); }
.u-green { color:var(--ok); } .u-pink { color:var(--danger); } .u-warn { color:var(--warn); }
.u-nodeco { text-decoration:none; }
.u-pbadge { width:22px; height:22px; line-height:20px; font-size:0.72rem; border:1px solid var(--border); color:var(--fg2); background:transparent; }
.u-pbadge:hover { border-color:var(--accent); color:var(--accent); }

/* Автодополнение плательщика в мастере */
.payer-results { position:absolute; left:0; right:0; z-index:20; max-height:320px; overflow-y:auto; margin-top:2px;
                 background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.payer-results[hidden] { display:none; }
.payer-opt { padding:8px 12px; cursor:pointer; font-size:0.85rem; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid var(--border); }
.payer-opt:last-child { border-bottom:0; }
.payer-opt small { color:var(--fg2); font-size:0.75rem; }
.payer-opt:hover, .payer-opt.active { background:var(--accent-soft); }
.payer-empty { padding:10px 12px; color:var(--fg2); font-size:0.85rem; }

/* Карточка с выпадающим списком внутри: .bg-white режет содержимое (overflow-x:auto) */
.bg-white.card-overflow-visible { overflow:visible; position:relative; z-index:5; }
/* Карточка с выпадающим списком (absolute + z-*) не обрезает его: .bg-white { overflow-x:auto } делает обрезку и по вертикали,
   список прятался и у блока появлялся скролл (пульт, группы, группы маршрутизации; 22.10.2026) */
.bg-white:has(.absolute[class*="z-"]) { overflow:visible; position:relative; z-index:5; }

/* Подвал */
footer { color: var(--fg3) !important; }

/* Страховка для inline-стилей, которые не успели перевести на классы */
[style*="JetBrains Mono"]:not(.font-mono):not(code):not(.mono) { font-family: var(--font) !important; letter-spacing: 0 !important; text-transform: none !important; }
[style*="box-shadow"] { box-shadow: none !important; }

/* tailwind text-*-700/800/900 на тёмном фоне не читаются — маппим на токены темы */
.text-purple-700, .text-purple-800, .text-purple-900, .text-indigo-700, .text-indigo-800, .text-indigo-900 { color: var(--purple) !important; }
.text-blue-700, .text-blue-800, .text-blue-900 { color: var(--accent) !important; }
.text-green-700, .text-green-800, .text-green-900, .text-emerald-700, .text-emerald-800, .text-emerald-900 { color: var(--ok) !important; }
.text-red-700, .text-red-800, .text-red-900, .text-pink-700, .text-pink-800 { color: var(--danger) !important; }
.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-orange-600, .text-orange-700, .text-yellow-700, .text-yellow-800 { color: var(--warn) !important; }
.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900, .text-slate-600, .text-slate-900 { color: var(--fg) !important; }
.cyber-label { text-transform: none; letter-spacing: 0; }

/* утилиты вместо inline style (22.10.2026): !important сохраняет приоритет прежнего style="…" */
.u-ok { color:var(--ok) !important; }
.u-accent { color:var(--accent) !important; }
.u-danger { color:var(--danger) !important; }
.u-purple { color:var(--purple) !important; }
.u-warn { color:var(--warn) !important; }
.u-dim { color:var(--fg3) !important; }
.u-soft { color:var(--fg2) !important; }
.u-b { font-weight:700 !important; }
.u-fw4 { font-weight:400 !important; }
.u-bg { background:var(--bg) !important; }
.u-bordered { border:1px solid var(--border) !important; }
.u-bc { border-color:var(--border) !important; }
.u-fs75 { font-size:.75em !important; }
.u-fs72 { font-size:.72em !important; }
.u-fs70 { font-size:.7em !important; }
.u-fs78 { font-size:.78em !important; }
.u-fs80 { font-size:.8em !important; }
.u-fs82 { font-size:.82em !important; }
.u-fs85 { font-size:.85em !important; }
.u-fs120 { font-size:1.2em !important; }
.u-tr { text-align:right !important; }
.u-tc { text-align:center !important; }
.u-p1 { padding:1em !important; }
.u-w100 { width:100% !important; }
.u-span2 { grid-column:span 2 !important; }
.u-op70 { opacity:.7 !important; }
.u-op50 { opacity:.5 !important; }
.u-op40 { opacity:.4 !important; }
.u-ptr { cursor:pointer !important; }
.u-nodec { text-decoration:none !important; }
.u-nowrap { white-space:nowrap !important; }
.u-nosel { user-select:none !important; }
.u-my14 { margin:14px 0 !important; }
.u-my10 { margin:10px 0 !important; }
.u-my12 { margin:12px 0 !important; }
.u-mt8 { margin-top:8px !important; }
.u-mt6 { margin-top:6px !important; }
.u-mt2 { margin-top:2px !important; }
.u-ml12 { margin-left:12px !important; }
.u-mb10 { margin-bottom:10px !important; }
.u-mb12 { margin-bottom:12px !important; }
.u-mw500 { max-width:500px !important; }
.u-mw300 { max-width:300px !important; }
.u-mw1400 { max-width:1400px !important; }
.u-w80 { width:80px !important; }
.u-w140 { width:140px !important; }
.u-w260 { width:260px !important; }
.u-tint-danger { background:color-mix(in srgb, var(--danger) 15%, transparent) !important; }
.u-tint-danger-s { background:color-mix(in srgb, var(--danger) 8%, transparent) !important; }
.u-tint-mute { background:color-mix(in srgb, var(--fg3) 18%, transparent) !important; }
.u-tint-accent { background:color-mix(in srgb, var(--accent) 15%, transparent) !important; }
.u-tint-ok { background:color-mix(in srgb, var(--ok) 15%, transparent) !important; }
.u-p10 { padding:10px !important; }
.u-r8 { border-radius:8px !important; }
.u-iflex { display:inline-flex !important; }
.u-aic { align-items:center !important; }
.u-gap3 { gap:.3em !important; }
.u-mauto { margin:0 auto 1em !important; }

/* сегменты распределения трафика по exit'ам (цвет по токенам темы) */
.seg-ok { background:var(--ok); } .seg-accent { background:var(--accent); } .seg-purple { background:var(--purple); }
.seg-warn { background:var(--warn); } .seg-dim { background:var(--fg3); } .seg-soft { background:var(--fg2); }
.seg-cyan { background:#22d3ee; }
.u-cyan { color:#22d3ee !important; }
.u-rel { position:relative !important; }
.u-b-accent { border:1px solid var(--accent) !important; }
.u-bc-accent { border-color:var(--accent) !important; }
.u-bc-danger { border-color:var(--danger) !important; }
.u-bc-warn { border-color:var(--warn) !important; }
.u-bb-accent { border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.u-tint-accent-s { background:color-mix(in srgb, var(--accent) 8%, transparent) !important; }
.u-tint-warn { background:color-mix(in srgb, var(--warn) 15%, transparent) !important; }
.u-bg-card { background:var(--card) !important; }
.u-bg-purple { background:var(--purple) !important; }
.u-h220 { height:220px !important; }
.u-mb05 { margin-bottom:.5em !important; }
.u-mb06 { margin-bottom:.6em !important; }
.u-mb08 { margin-bottom:.8em !important; }
.u-mb4 { margin-bottom:4px !important; }
.u-mt03 { margin-top:.3em !important; }
.u-my2 { margin:2px 0 !important; }
.u-p6-10 { padding:6px 10px !important; }
.u-p4-10 { padding:4px 10px !important; }
.u-p2-8 { padding:2px 8px !important; }
.u-p20 { padding:20px !important; }
.u-p15 { padding:15px !important; }
.u-p1-4 { padding:1px 4px !important; }
.u-p05-07 { padding:.5em .7em !important; }
.u-r6 { border-radius:6px !important; }
.u-r2 { border-radius:2px !important; }
.u-mono { font-family:monospace !important; }
.u-fs90 { font-size:.9em !important; }
.u-ttn { text-transform:none !important; }
.u-minh600 { min-height:600px !important; }
.u-minw500 { min-width:500px !important; }
.u-minw220 { min-width:220px !important; }
.u-mw180 { max-width:180px !important; }
.u-mw260 { max-width:260px !important; }
.u-mw600 { max-width:600px !important; }
.u-gap6 { gap:6px !important; }
.u-gap05 { gap:.5em !important; }
.u-wrap { flex-wrap:wrap !important; }
.u-flex1 { flex:1 !important; }
.u-grid180 { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important; }
.seg-danger { background:var(--danger); }
.u-tint-purple { background:color-mix(in srgb, var(--purple) 15%, transparent) !important; }
.u-tint-purple-s { background:color-mix(in srgb, var(--purple) 10%, transparent) !important; }
.u-onacc { color:#fff !important; }

/* поверхность модального окна (вместо bg-white rounded-xl … shadow-2xl) */
.modal-box { background:var(--card); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.5); }

/* /admin/firewall (23.10.2026): сводка, drift, цепочки, маршруты, ipset, шейпинг */
.fw-nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.fw-hero { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.fw-hero-main { flex:1 1 260px; min-width:0; }
.fw-hero-title { font-size:1.35rem; font-weight:600; color:var(--fg); display:flex; align-items:center; gap:10px; }
.fw-hero-reason { color:var(--fg2); margin-top:4px; overflow-wrap:anywhere; }
.fw-hero-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.fw-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:0.8rem; color:var(--fg3); }
.fw-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:20px; }
.fw-stats > * { min-width:0; }
.fw-policy { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:0.8rem; color:var(--fg2); margin-top:4px; }
.fw-big { font-size:2rem; font-weight:700; line-height:1.1; color:var(--fg); }
.fw-big-sub { font-size:0.82rem; color:var(--fg2); }
.fw-table-wrap { overflow-x:auto; max-width:100%; }
.fw-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.fw-table th { text-align:left; font-weight:500; color:var(--fg2); padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.fw-table td { padding:5px 8px; border-bottom:1px solid var(--border); vertical-align:top; white-space:nowrap; }
.fw-table td.fw-wrap { white-space:normal; overflow-wrap:anywhere; min-width:160px; }
.fw-num { text-align:right; font-variant-numeric:tabular-nums; }
.fw-mono { font-family:var(--mono); font-size:0.76rem; }
.fw-spec { font-family:var(--mono); font-size:0.74rem; color:var(--fg2); white-space:normal; overflow-wrap:anywhere; }
.fw-row-hot { background:color-mix(in srgb, var(--accent) 9%, transparent); }
.fw-row-dead td { color:var(--fg3); }
.fw-row-dup td:first-child { box-shadow:inset 3px 0 0 var(--warn); }
.fw-details { border-bottom:1px solid var(--border); }
.fw-details[hidden] { display:none; }
.fw-details > summary { cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:9px 2px; list-style:none; }
.fw-details > summary::-webkit-details-marker { display:none; }
.fw-details > summary::before { content:''; width:7px; height:7px; border-right:2px solid var(--fg3); border-bottom:2px solid var(--fg3); transform:rotate(-45deg); transition:transform 0.12s; flex:none; }
.fw-details[open] > summary::before { transform:rotate(45deg); }
.fw-details > summary:hover { background:var(--hover); }
.fw-details-body { padding:4px 0 12px; }
.fw-chain-name { font-family:var(--mono); font-weight:600; color:var(--fg); }
.fw-flow { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.fw-flow .ico { margin-right:0; color:var(--fg3); }
.fw-step { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:1px solid var(--border); border-radius:6px; font-family:var(--mono); font-size:0.75rem; color:var(--fg2); background:var(--bg); white-space:nowrap; }
.fw-step-exit { color:var(--fg); font-family:var(--font); font-weight:600; border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft); }
.fw-step-direct { color:var(--fg); font-family:var(--font); font-weight:600; border-color:color-mix(in srgb, var(--warn) 45%, transparent); background:color-mix(in srgb, var(--warn) 12%, transparent); }
.fw-list { list-style:none; margin:0; padding:0; }
.fw-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; padding:5px 0; border-bottom:1px dashed var(--border); }
.fw-list li:last-child { border-bottom:0; }
.fw-note { font-size:0.78rem; color:var(--fg3); margin-top:8px; }
.fw-pre { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px; margin:0; font-family:var(--mono); font-size:0.72rem; line-height:1.45; color:var(--fg2); max-height:420px; overflow:auto; white-space:pre; }
.fw-dist { display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:center; font-size:0.8rem; }
.fw-grid2 { display:grid; grid-template-columns:1fr; gap:16px; }
.fw-grid2 > * { min-width:0; }
@media (min-width: 1024px) { .fw-grid2 { grid-template-columns:1fr 1fr; } }
.fw-search { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:10px; }
/* горизонтальная полоса без inline style: <progress class="fw-bar ok" value max> */
.fw-bar { -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:60px; height:8px; border:0; border-radius:4px; background:var(--border); overflow:hidden; }
.fw-bar::-webkit-progress-bar { background:var(--border); border-radius:4px; }
.fw-bar::-webkit-progress-value { background:var(--accent); border-radius:4px; }
.fw-bar::-moz-progress-bar { background:var(--accent); border-radius:4px; }
.fw-bar.ok::-webkit-progress-value { background:var(--ok); } .fw-bar.ok::-moz-progress-bar { background:var(--ok); }
.fw-bar.warn::-webkit-progress-value { background:var(--warn); } .fw-bar.warn::-moz-progress-bar { background:var(--warn); }
.fw-bar.danger::-webkit-progress-value { background:var(--danger); } .fw-bar.danger::-moz-progress-bar { background:var(--danger); }
.fw-bar.purple::-webkit-progress-value { background:var(--purple); } .fw-bar.purple::-moz-progress-bar { background:var(--purple); }
.fw-bar.lg { height:14px; border-radius:7px; }

/* выпадающие подсказки поиска (cyber.suggest в static/cyber.js) */
.suggest-dd { position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; background:var(--card);
              border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,0.45);
              max-height:320px; overflow-y:auto; }
.suggest-dd[hidden] { display:none; }
.suggest-item { display:flex; align-items:baseline; gap:10px; padding:8px 12px; color:var(--fg); text-decoration:none; }
.suggest-item:hover, .suggest-item.active { background:var(--hover, rgba(255,255,255,0.06)); }
.suggest-item .s-name { font-weight:600; }
.suggest-item .s-ip { font-family:monospace; font-size:0.8rem; color:var(--fg3); }
.suggest-item .s-payer { margin-left:auto; font-size:0.8rem; color:var(--fg2); text-align:right; }
.suggest-item .s-off { font-size:0.72rem; color:var(--danger); }
.suggest-empty { padding:10px 12px; color:var(--fg3); font-size:0.9rem; }

/* режим «скрыть данные» для презентаций (static/cyber-privacy.js; кнопка — плавающая таблетка слева внизу) */
.pv-money, .pv-money-cell, .pv-pii, .pv-pii-cell, [data-pii], [data-money] { transition: filter .35s ease, opacity .35s ease; }
html[data-privacy="money"] .pv-money, html[data-privacy="all"] .pv-money,
html[data-privacy="money"] .pv-money-cell, html[data-privacy="all"] .pv-money-cell,
html[data-privacy="all"] .pv-pii, html[data-privacy="all"] .pv-pii-cell, html[data-privacy="all"] [data-pii],
html[data-privacy="money"] [data-money], html[data-privacy="all"] [data-money] {
    filter: blur(8px) saturate(.35); opacity:.8; user-select:none; -webkit-user-select:none; transition:none; }   /* скрытие мгновенное, показ — плавный */
.privacy-pill { position:fixed; left:16px; bottom:16px; z-index:900; display:inline-flex; align-items:center; gap:8px;
    padding:8px 11px; border-radius:999px; border:1px solid var(--border); color:var(--fg2); font-size:.78rem; cursor:pointer;
    background:color-mix(in srgb, var(--card) 85%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 6px 20px rgba(0,0,0,.35); transition:border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.privacy-pill:hover { color:var(--fg); border-color:var(--accent); }
.privacy-pill .pp-label { max-width:0; opacity:0; overflow:hidden; white-space:nowrap; transition:max-width .35s ease, opacity .25s ease; }
.privacy-pill:hover .pp-label, .privacy-pill:focus-visible .pp-label, .privacy-pill.privacy-on .pp-label { max-width:300px; opacity:1; }
.privacy-pill.privacy-on { color:var(--warn); border-color:var(--warn); box-shadow:0 6px 24px color-mix(in srgb, var(--warn) 25%, transparent); }
@media print { .privacy-pill { display:none; } }
/* Пока cyber-privacy.js не обработал страницу, содержимое скрыто (иначе данные мелькают на видео).
   Страховка: если скрипт не загрузился, через 2.5 с содержимое показывается всё равно. */
html[data-privacy="money"]:not([data-pv-ready]) main, html[data-privacy="all"]:not([data-pv-ready]) main {
    visibility:hidden; animation:pvFailSafe 0s linear 2.5s forwards; }
@keyframes pvFailSafe { to { visibility:visible; } }

/* кабинет вендора /vendor (templates/vendor/dashboard.html): mobile-first, без inline style */
.vs-wrap { max-width:1100px; }
.vs-err { color:var(--danger); font-size:.85em; margin-bottom:12px; }
.vs-err:empty { display:none; }
.vs-gap { gap:10px; }
.vs-grid2 { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:20px; }
@media (min-width: 900px) { .vs-grid2 { grid-template-columns:1fr 1fr; } }
.vs-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:5px 0; border-bottom:1px solid var(--border); }
.vs-form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.vs-field { flex:1; min-width:200px; }
.vs-scroll { overflow-x:auto; }
.vs-table th, .vs-table td { text-align:left; padding:6px 10px; }
.vs-table th { font-size:.75em; color:var(--fg2); font-weight:500; white-space:nowrap; }
.vs-table th[data-sort] { cursor:pointer; user-select:none; }
.vs-table th[data-sort]:hover { color:var(--fg); }
.vs-table tr { border-bottom:1px solid var(--border); }
.vs-actions { display:flex; gap:6px; flex-wrap:wrap; }
.vs-btn-sm { padding:4px 10px; font-size:.8em; text-decoration:none; }
.vs-icon-btn { padding:2px 6px; font-size:.75em; margin-left:4px; }

/* Прогресс задания очереди лабораторий (/my/labs, _my_lab_job.html): mobile-first, только токены */
.lab-steps { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.lab-step { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; color:var(--fg3); font-size:0.9rem; min-width:0; }
.lab-step-label { overflow-wrap:anywhere; }
.lab-step-mark { flex:0 0 14px; width:14px; height:14px; border-radius:50%; border:2px solid var(--border-hi); box-sizing:border-box; }
.lab-step-done { color:var(--fg2); }
.lab-step-done .lab-step-mark { background:var(--ok); border-color:var(--ok); }
.lab-step-current { color:var(--fg); font-weight:600; }
.lab-step-current .lab-step-mark { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 35%, transparent); animation:labPulse 1.4s ease-in-out infinite; }
.lab-step-failed { color:var(--danger); font-weight:600; }
.lab-step-failed .lab-step-mark { background:var(--danger); border-color:var(--danger); }
.lab-step-cancelled .lab-step-mark { border-color:var(--warn); }
.lab-reason { color:var(--danger); margin:0 0 8px; overflow-wrap:anywhere; }
.lab-wait { margin:0 0 8px; }
@keyframes labPulse { 50% { opacity:0.45; } }
@media (prefers-reduced-motion: reduce) { .lab-step-current .lab-step-mark { animation:none; } }

/* Вкладки страницы (админка очереди лабораторий): нативные ссылки, без JS */
.fw-tabs { display:flex; gap:4px; flex-wrap:wrap; margin:0 0 16px; border-bottom:1px solid var(--border); }
.fw-tab { padding:8px 14px; color:var(--fg2); border:1px solid transparent; border-bottom:0; border-radius:6px 6px 0 0; font-size:0.85rem; text-decoration:none; }
.fw-tab:hover { color:var(--fg); background:var(--hover); }
.fw-tab.active { color:var(--fg); background:var(--card); border-color:var(--border); font-weight:600; }
.fw-tab:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.fw-inline-form { display:inline; margin:0; }
.fw-row-stuck td { background:color-mix(in srgb, var(--warn) 10%, transparent); }
.fw-detail { max-width:360px; white-space:normal; overflow-wrap:anywhere; color:var(--fg2); }