/* Единая тема приложения (тёмная). Токены — в :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; }
.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; }
.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:10px 20px; border-radius:8px; cursor:pointer; font-weight:bold; font-size:0.95rem; min-width:100px; text-align:center; background:transparent; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:2px solid currentColor; }
.picker-btn.selected { color:var(--bg) !important; filter: saturate(1.3); }

/* Тумблер (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-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:22px; background:var(--purple); color:#fff; font-size:0.75rem; }

/* Автодополнение плательщика в мастере */
.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; }

/* Подвал */
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; }