:root { --bg: #f5f6f8; --panel: #ffffff; --input-bg: #ffffff; --border: #dfe3e8; --text: #1f2430; --muted: #6b7280; --accent: #2563eb; --accent-dark: #1d4ed8; --accent-contrast: #ffffff; --danger: #dc2626; --ok-bg: #e7f7ed; --ok-text: #14663b; --error-bg: #fdeaea; --error-text: #9c1c1c; } /* Тёмная тема: по умолчанию системная (prefers-color-scheme), плюс ручной переключатель через data-theme на , который сохраняется в localStorage (см. assets/theme.js) и всегда побеждает системную настройку. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1218; --panel: #171b23; --input-bg: #1e232c; --border: #2b3140; --text: #e6e8ec; --muted: #8b93a3; --accent: #3b82f6; --accent-dark: #60a5fa; --accent-contrast: #0b1220; --danger: #f87171; --ok-bg: #123322; --ok-text: #6ee7a5; --error-bg: #3a1a1a; --error-text: #fca5a5; } } :root[data-theme="dark"] { --bg: #0f1218; --panel: #171b23; --input-bg: #1e232c; --border: #2b3140; --text: #e6e8ec; --muted: #8b93a3; --accent: #3b82f6; --accent-dark: #60a5fa; --accent-contrast: #0b1220; --danger: #f87171; --ok-bg: #123322; --ok-text: #6ee7a5; --error-bg: #3a1a1a; --error-text: #fca5a5; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); } .container { max-width: 1100px; margin: 0 auto; padding: 24px; } .container.narrow { max-width: 640px; } .container.full { max-width: none; } h1 { font-size: 22px; margin: 0 0 12px; } h2 { font-size: 16px; margin: 0 0 10px; } .hint { color: var(--muted); font-size: 13px; } .app-header { display: flex; align-items: center; gap: 24px; background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 24px; } .app-title { font-weight: 600; } .app-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .app-nav a { padding: 6px 12px; border-radius: 6px; text-decoration: none; color: var(--text); font-size: 14px; } .app-nav a:hover { background: var(--bg); } .app-nav a.active { background: var(--accent); color: var(--accent-contrast); } .app-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); } .app-user a { color: var(--accent); text-decoration: none; } .theme-toggle-btn { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 8px; font-size: 15px; line-height: 1; cursor: pointer; } .theme-toggle-btn:hover { background: var(--bg); } .toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .toolbar h1 { margin: 0; margin-right: auto; } input[type="text"], input[type="password"], input[type="number"], select, textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--input-bg); color: var(--text); } textarea { width: 100%; font-family: inherit; resize: vertical; } button, .btn { padding: 8px 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-contrast); font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .btn:hover { background: var(--accent-dark); } .btn-secondary { background: var(--input-bg); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--bg); } .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-ok { background: var(--ok-bg); color: var(--ok-text); } .badge-off { background: var(--border); color: var(--muted); } .badge-error { background: var(--error-bg); color: var(--error-text); } .link-btn { background: none; border: none; color: var(--accent); padding: 0; font-size: 13px; text-decoration: underline; } .link-btn.danger { color: var(--danger); } .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Компактная колонка действий, зафиксированная у правого края при горизонтальной прокрутке широких таблиц (см. table-wrap) — иначе кнопки и результат "Запустить сейчас" уезжают за пределы экрана. */ .actions-compact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; } .sticky-col { position: sticky; right: 0; z-index: 1; background: var(--panel); box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.35); } thead th.sticky-col { background: var(--bg); z-index: 2; } .run-result { font-size: 12px; color: var(--muted); max-width: 180px; white-space: normal; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 20px; } .form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; } .form-field label { font-size: 13px; font-weight: 600; } .radio-field { display: block; font-size: 14px; margin: 6px 0; font-weight: normal; } fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin: 14px 0; } legend { font-size: 13px; font-weight: 600; padding: 0 6px; } .filters-box { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .filter-field { font-size: 13px; display: flex; align-items: center; gap: 4px; } .table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; } table { border-collapse: collapse; width: 100%; font-size: 13px; } th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--muted); font-weight: 600; background: var(--bg); } .truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 14px; } .alert-ok { background: var(--ok-bg); color: var(--ok-text); } .alert-error { background: var(--error-bg); color: var(--error-text); } .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; } .auth-page .theme-toggle-btn { position: absolute; top: 20px; right: 20px; } .auth-form { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px; } .auth-form h1 { text-align: center; font-size: 18px; margin-bottom: 8px; } .auth-form label { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }