html.dark {
  color-scheme: dark;
  --bg: #1E1F20;
  --surface: rgba(45, 47, 49, 0.65);
  --surface-2: #2d2f31;
  --text: #e3e3e3;
  --muted: #94a3b8;
  --accent: #4cb782;
  --accent-2: #237a55;
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
  --dialog-bg: rgba(45, 47, 49, 0.95);
  --dialog-border: var(--glass-border);
  --dialog-shadow: var(--shadow);
  --dialog-title: var(--text);
  --dialog-message: var(--muted);
  --dialog-inner-border: rgba(255, 255, 255, 0.12);

  /* Новые переменные для устранения хардкода в тёмной теме */
  --text-secondary: #cbd5e1;
  --border: #334155;
  --border-light: rgba(148, 163, 184, 0.15);
  --input-bg: rgba(30, 41, 59, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus: #4cb782;
  --card-bg: rgba(30, 41, 59, 0.55);
  --card-border: rgba(255, 255, 255, 0.08);
  --scrollbar: #334155;
  --scrollbar-hover: #475569;
  --success-soft: rgba(34, 197, 94, 0.15);
  --success-text: #86efac;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --danger-text: #fca5a5;
  --warning-soft: rgba(251, 191, 36, 0.15);
  --warning-text: #fbbf24;
}

html.dark body {
  background-color: var(--bg);
  color: var(--text);
}

html.dark .alert-error {
  background: #3f1d1d;
  border: 1px solid #f87171;
  color: #fee2e2;
}

html.dark .alert-success {
  background: #052e1a;
  border: 1px solid #34d399;
  color: #d1fae5;
}

html.dark body.page-worker {
  --bg: #1E1F20;
  --surface: rgba(45, 47, 49, 0.65);
  --surface-2: #2d2f31;
  --text: #e3e3e3;
  --muted: #94a3b8;
  --accent: #4cb782;
  --accent-2: #237a55;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  
  --text-secondary: #cbd5e1;
  --border: #334155;
  --border-light: rgba(148, 163, 184, 0.15);
  --input-bg: rgba(30, 41, 59, 0.6);
  --input-border: rgba(255, 255, 255, 0.1);
  --input-focus: #4cb782;
  --card-bg: rgba(30, 41, 59, 0.55);
  --card-border: rgba(255, 255, 255, 0.08);

  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* Sidebar & Navigation overrides */
html.dark aside,
html.dark aside.bg-white,
html.dark aside.bg-slate-50 {
  background-color: var(--surface);
  border-color: var(--glass-border);
  color: var(--text);
}

html.dark body > nav,
html.dark body > nav.bg-white\/80 {
  background-color: var(--surface) !important;
  border: var(--glass-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  color: var(--text) !important;
}

/* Links & Text in Sidebar */
/* Cards & Containers with Glassmorphism & Bento styles */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100\/50,
html.dark .card,
html.dark aside {
  background: #2d2f31 !important;
  border: var(--glass-border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}

html.dark .bg-white:not(aside):hover,
html.dark .bg-slate-50:not(aside):hover {
  background: #3e4042 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Sub-panels and metric boxes in Dark theme */
html.dark #stats-grid a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  text-align: center !important;
  padding: 16px !important;
  background: #2d2f31 !important;
  border: var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease !important;
}

html.dark #stats-grid a:hover {
  background: #3e4042 !important;
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

html.dark .test-card-metric,
html.dark .bg-slate-50.border-slate-200 {
  background: #2d2f31 !important;
  border: var(--glass-border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}

/* Sidebar Nav Links overrides for Dark theme */
html.dark .sidebar-link:hover {
  color: var(--text);
}

html.dark .sidebar-link.active {
  background-color: rgba(76, 183, 130, 0.15) !important;
  color: var(--text);
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* Text coloring overrides */
html.dark .text-on-background,
html.dark .text-on-surface,
html.dark .text-slate-800,
html.dark .text-slate-900,
html.dark h1, html.dark h2, html.dark h3, html.dark h4 {
  color: var(--text);
}

html.dark .text-on-surface-variant,
html.dark .text-slate-500,
html.dark .text-slate-600,
html.dark .text-slate-400,
html.dark p {
  color: var(--muted);
}

/* Form Controls */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark select,
html.dark textarea {
  background-color: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.dark input[type="number"] {
  color-scheme: dark;
}

html.dark input:focus,
html.dark select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76, 183, 130, 0.2) !important;
}

/* Tables styling */
html.dark table {
  background-color: var(--surface-2);
}

html.dark th {
  color: var(--muted);
  border-color: var(--border-light);
  background-color: var(--bg);
}

html.dark td {
  color: var(--text);
  border-color: var(--border-light);
  background-color: var(--surface-2);
}

html.dark td.status-ready,
html.dark .status-ready {
  color: var(--success-text);
}

html.dark td.status-not-ready,
html.dark .status-not-ready {
  color: var(--danger-text);
}

html.dark td.status-pending,
html.dark .status-pending {
  color: var(--warning-text);
}

html.dark td.status-reset,
html.dark .status-reset {
  color: var(--muted);
  font-style: italic;
}

html.dark tr:hover td,
html.dark .personnel-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Buttons */
html.dark .btn-secondary,
html.dark .bg-slate-50.border-slate-200-high,
html.dark .bg-white.border,
html.dark .bg-white.border-slate-200 {
  background-color: #2d2f31 !important;
  border-color: var(--glass-border) !important;
  color: #e2e8f0 !important;
  border-radius: 12px !important;
}

html.dark .btn-secondary:hover,
html.dark .bg-slate-50.border-slate-200-high:hover,
html.dark .bg-white.border:hover,
html.dark .bg-white.border-slate-200:hover {
  background-color: #3e4042 !important;
  color: var(--accent) !important;
}

html.dark .btn-primary {
  background-color: var(--accent);
  color: #ffffff !important;
}

html.dark .btn-primary:hover {
  background-color: var(--accent-2);
}

/* Specific test cards */
html.dark .test-card {
  background: #2d2f31 !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
}

html.dark .test-card:hover {
  background: #3e4042 !important;
  transform: translateY(-4px) scale(1.015) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

html.dark .test-card-locked:hover {
  background: #3e4042 !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html.dark body.page-worker .test-card:hover,
html.dark body.page-worker .test-card-locked:hover {
  transform: none !important;
}

html.dark body.page-worker .test-card-wrap:hover > .test-card {
  transform: translateY(-6px) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.28),
    0 18px 36px rgba(0, 0, 0, 0.34) !important;
}

html.dark body.page-worker .test-card-wrap:hover > .test-card:not(.test-card-done--pass):not(.test-card-done--fail) {
  background: #2d2f31 !important;
}

html.dark body.page-worker .test-card-wrap:hover > .test-card-done--pass {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.42) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
}

html.dark body.page-worker .test-card-wrap:hover > .test-card-done--fail {
  background: linear-gradient(145deg, rgba(185, 28, 28, 0.72) 0%, rgba(69, 10, 10, 0.94) 55%, rgba(45, 47, 49, 0.98) 100%) !important;
}

html.dark .test-card-title {
  color: var(--text);
}

html.dark .test-card-desc {
  color: var(--muted);
}

/* Pagination links */
html.dark .page-link {
  background-color: var(--surface-2);
  color: var(--text);
  border: var(--glass-border);
}

html.dark .page-link:hover {
  background-color: var(--accent);
  color: #ffffff !important;
}

html.dark .page-link.active {
  background-color: #1e6b4b !important;
  color: #ffffff !important;
}

/* Popups / Dialogs */
html.dark .spvt-confirm-dialog {
  background-color: var(--dialog-bg);
  border: var(--dialog-border);
  color: var(--dialog-title);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.dark .spvt-confirm-title {
  color: var(--dialog-title);
}

html.dark .spvt-confirm-message {
  color: var(--dialog-message);
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-thumb {
  background-color: #334155 !important;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #475569 !important;
}

/* Badges overrides */
html.dark .badge-secondary {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--glass-border);
}

/* Страница теста сотрудника */
html.dark .page-worker {
  background-color: var(--bg);
  color: var(--text);
}

html.dark .worker-topbar {
  background-color: var(--surface-2);
  border-color: var(--glass-border);
}

html.dark .options button.option {
  background-color: var(--surface-2);
  border-color: var(--glass-border);
  color: var(--text);
}

html.dark .options button.option:hover {
  background-color: var(--bg);
  border-color: var(--accent);
}

html.dark .options button.option.selected {
  background-color: rgba(76, 183, 130, 0.15) !important;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  color: var(--text);
}

html.dark .moderator-candidate-btn {
  background-color: var(--surface-2);
  border-color: var(--glass-border);
  color: var(--text);
}

html.dark .moderator-candidate-btn:hover:not(:disabled) {
  background-color: var(--bg);
  border-color: var(--accent);
  color: var(--text);
}

html.dark .login-card.ink-login-card {
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

html.dark .login-card.ink-login-card h1,
html.dark .login-card.ink-login-card p,
html.dark .login-card.ink-login-card label,
html.dark .login-card.ink-login-card a {
  color: #f8fafc !important;
}

html.dark .login-card.ink-login-card .ink-checkbox-text {
  color: #f8fafc !important;
}

html.dark .login-card.ink-login-card input[type="text"],
html.dark .login-card.ink-login-card input[type="password"] {
  background-color: rgba(30, 41, 59, 0.85) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

html.dark .login-card.ink-login-card input[type="text"]:focus,
html.dark .login-card.ink-login-card input[type="text"]:active,
html.dark .login-card.ink-login-card input[type="password"]:focus,
html.dark .login-card.ink-login-card input[type="password"]:active {
  border-color: #4cb782 !important;
  box-shadow: 0 0 0 3px rgba(76, 183, 130, 0.25) !important;
  outline: none !important;
  background-color: rgba(30, 41, 59, 0.95) !important;
}

/* Fix 4: Align columns in manager_personnel_departments.html */
.dept-table th.th-actions {
  width: 200px !important;
  min-width: 200px !important;
}

/* Dark theme overrides for tickets, question forms, personnel tables and candidate buttons */
html.dark .ticket-card,
html.dark .ticket-card-open {
  background: var(--surface) !important;
  border-color: var(--glass-border) !important;
}
html.dark .question-form-wrap {
  background: rgba(2, 6, 23, 0.45) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}
html.dark .personnel-table th {
  background-color: var(--bg);
  border-color: var(--border-light);
  color: var(--muted);
}
html.dark .personnel-table td {
  background-color: var(--surface-2);
  border-color: var(--border-light);
  color: var(--text);
}
html.dark .personnel-table tr:nth-child(even):not(.is-pickable) td {
  background-color: rgba(255, 255, 255, 0.02) !important;
}
html.dark .personnel-table tr:nth-child(even) {
  background-color: transparent !important;
}
html.dark .personnel-table tr:hover:not(.is-pickable) td {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .personnel-table tr.is-selected td {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

html.dark .personnel-group__head {
  background-color: var(--bg);
  border-bottom-color: transparent !important;
}
html.dark .personnel-group__head[aria-expanded="true"] {
  border-bottom-color: var(--border-light);
}
html.dark .personnel-group__head:hover {
  background-color: rgba(76, 183, 130, 0.12) !important;
}

/* Worker page dark theme fixes */
html.dark:has(body.page-worker) {
  background: var(--bg) !important;
}

html.dark body.page-worker {
  background-color: var(--bg) !important;
}

html.dark .test-card-title {
  color: var(--text) !important;
}

html.dark .test-card-desc {
  color: var(--muted) !important;
}

html.dark .test-card-meta {
  color: var(--muted) !important;
}

html.dark .test-card-meta strong {
  color: var(--text) !important;
}

html.dark .test-card-action {
  color: var(--accent) !important;
}

html.dark .worker-footer {
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark .worker-footer-btn {
  background-color: #2d2f31 !important;
  border-color: var(--glass-border) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

html.dark .worker-footer-btn:hover {
  background-color: #3e4042 !important;
  border-color: var(--glass-border) !important;
  color: #ffffff !important;
}

html.dark.page-worker .badge,
html.dark .badge {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
}

html.dark .test-card-time-limit {
  background: var(--surface-2) !important;
  border-color: var(--glass-border) !important;
  color: var(--text) !important;
}

html.dark .question-timer--inline {
  border-color: var(--glass-border) !important;
  background: var(--surface-2) !important;
}

html.dark .question-timer--inline .question-timer__value {
  color: var(--text) !important;
}

html.dark .worker-feedback-dialog {
  background: var(--dialog-bg) !important;
  border: var(--dialog-border) !important;
  box-shadow: var(--dialog-shadow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.dark .worker-feedback-hint {
  background: var(--surface-2);
  border-color: var(--glass-border);
  color: var(--text);
}

html.dark .result-hero--pass {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
}

html.dark .result-hero--fail {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

html.dark .result-hero--void {
  background: rgba(148, 163, 184, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  color: #e2e8f0 !important;
}

html.dark .result-next {
  background: rgba(30, 41, 59, 0.45) !important;
  border-color: #334155 !important;
}

html.dark .result-next__title {
  color: #4cb782 !important;
}

html.dark .result-next__text {
  color: #cbd5e1 !important;
}

html.dark .result-score-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

/* Auth card dark theme overrides */
html.dark .login-staff-toggle-muted {
  background: rgba(51, 65, 85, 0.5) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .login-staff-toggle-muted:hover {
  background: rgba(51, 65, 85, 0.7) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .login-card.ink-login-card .ink-card-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .login-card.ink-login-card .ink-card-footer a {
  color: #94a3b8 !important;
}

html.dark .login-card.ink-login-card .ink-card-footer a:hover {
  color: #f8fafc !important;
}

/* Ensure 100vh sidebar doesn't have border-radius in dark theme */
html.dark #layout-container aside {
  border-radius: 0 !important;
  height: 100vh !important;
}

/* Premium dark theme filter for corporate logo */
html.dark .site-logo {
  filter: invert(1) hue-rotate(180deg) brightness(1.5) contrast(1.2) !important;
}

/* Бейджи ролей и статусов в темной теме */
html.dark .badge-muted {
  background: rgba(148, 163, 184, 0.15) !important;
  color: #94a3b8 !important;
}
html.dark .badge-success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
}
html.dark .badge-role-admin {
  background: rgba(46, 139, 98, 0.2) !important;
  color: #6bc59a !important;
}
html.dark .badge-role-chief {
  background: rgba(34, 211, 238, 0.16) !important;
  color: #67e8f9 !important;
}
html.dark .badge-role-moderator {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
}
html.dark .role-catalog-card {
  background: var(--surface-2);
  border-color: var(--glass-border, rgba(255, 255, 255, 0.08));
  color: var(--text);
}
html.dark .role-catalog-card__title {
  color: var(--text);
}
html.dark .role-catalog-card__desc,
html.dark .role-catalog-card__list {
  color: var(--muted);
}
html.dark .role-catalog-card.is-active {
  border-color: #67e8f9;
  box-shadow: 0 0 0 1px #67e8f9;
}
html.dark .access-tab {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--glass-border, rgba(255, 255, 255, 0.08));
}
html.dark .access-perm-group {
  border-color: var(--glass-border, rgba(255, 255, 255, 0.08));
}
html.dark .badge-role-worker {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
}

html.dark .personnel-status--active {
  background: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
}

html.dark .personnel-status--dismissed {
  background: rgba(148, 163, 184, 0.22) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
}

html.dark .personnel-status--blocked {
  background: rgba(248, 113, 113, 0.2) !important;
  color: #fecaca !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
}

/* Бейджи статусов и приоритетов карточек тестов в темной теме */
html.dark .test-card-status-pass,
html.dark .test-card-status-pass-muted {
  background: #16a34a !important;
  color: #ecfdf5 !important;
  border: 1px solid #4ade80 !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.45) !important;
}
html.dark .test-card-status-fail,
html.dark .test-card-status-fail-muted {
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #f87171 !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.5) !important;
}
html.dark .test-card-status-new {
  background: rgba(76, 183, 130, 0.15) !important;
  color: #8fd6b2 !important;
  border-color: rgba(76, 183, 130, 0.4) !important;
  box-shadow: 0 0 8px rgba(76, 183, 130, 0.3) !important;
}

html.dark .test-card-status-inactive {
  background: rgba(148, 163, 184, 0.16) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

html.dark .test-card-metric--time-limit {
  border-color: rgba(76, 183, 130, 0.35) !important;
  background: rgba(76, 183, 130, 0.12) !important;
}

html.dark .test-card-metric--time-limit .test-card-metric-value {
  color: #8fd6b2 !important;
}

html.dark .test-card-metric--unlimited .test-card-metric-value,
html.dark .test-card-metric--unlimited .test-card-metric-label {
  color: #e2e8f0 !important;
}

html.dark .test-card-metric--retake-pass {
  border-color: rgba(74, 222, 128, 0.35) !important;
  background: rgba(34, 197, 94, 0.14) !important;
}

html.dark .test-card-metric--retake-pass .test-card-metric-value {
  color: #86efac !important;
}

html.dark .test-card-metric--retake-fail {
  border-color: rgba(251, 146, 60, 0.35) !important;
  background: rgba(251, 146, 60, 0.12) !important;
}

html.dark .test-card-metric--retake-fail .test-card-metric-value {
  color: #fdba74 !important;
}

html.dark .test-card-metric--retake .test-card-metric-label {
  color: #94a3b8 !important;
}
html.dark .test-card-priority--required {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3) !important;
}

html.dark .test-card-priority--additional {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
}

/* Dark theme overrides for countdown timer warn/urgent states */
html.dark body.page-worker .question-timer--warn {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

html.dark body.page-worker .question-timer--warn .question-timer__value {
  color: #fbbf24 !important;
}

html.dark body.page-worker .question-timer--urgent {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

html.dark body.page-worker .question-timer--urgent .question-timer__value {
  color: #f87171 !important;
}

html.dark .test-card-done--pass,
html.dark .test-card-done--pass-muted {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.42) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
  border: 2px solid #4ade80 !important;
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.25),
    0 8px 24px rgba(34, 197, 94, 0.18) !important;
}

html.dark .test-card-done--fail,
html.dark .test-card-done--fail-muted,
html.dark body.page-worker .test-card.test-card-done--fail,
html.dark body.page-worker .test-card.test-card-done--fail-muted {
  background: linear-gradient(145deg, rgba(185, 28, 28, 0.72) 0%, rgba(69, 10, 10, 0.94) 55%, rgba(45, 47, 49, 0.98) 100%) !important;
  border: 2px solid #f87171 !important;
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.45),
    0 10px 28px rgba(239, 68, 68, 0.35),
    inset 0 1px 0 rgba(254, 202, 202, 0.08) !important;
}

html.dark body.page-manager .test-folder-card {
  background: linear-gradient(165deg, rgba(30, 107, 75, 0.22) 0%, #2d2f31 38%, #2d2f31 100%) !important;
  border-color: rgba(107, 197, 154, 0.35) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.dark body.page-manager .test-folder-card:hover {
  background: linear-gradient(165deg, rgba(30, 107, 75, 0.28) 0%, #35373a 40%, #35373a 100%) !important;
  border-color: rgba(107, 197, 154, 0.5) !important;
}

html.dark body.page-manager .test-folder-card--open {
  border-color: rgba(107, 197, 154, 0.62) !important;
  background: linear-gradient(165deg, rgba(30, 107, 75, 0.32) 0%, rgba(30, 107, 75, 0.12) 42%, #2d2f31 100%) !important;
  box-shadow:
    0 0 0 1px rgba(107, 197, 154, 0.22),
    0 16px 36px rgba(0, 0, 0, 0.34) !important;
}

html.dark body.page-manager .test-folder-card--loose {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: linear-gradient(165deg, rgba(148, 163, 184, 0.16) 0%, #2d2f31 42%, #2d2f31 100%) !important;
}

html.dark .test-folder-card__title {
  color: #e2e8f0;
}

html.dark .test-folder-menu__btn:hover,
html.dark .test-folder-menu.is-open .test-folder-menu__btn {
  background: rgba(255, 255, 255, 0.08);
}

html.dark .test-folder-menu__list {
  background: #35373a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

html.dark .test-folder-menu__list a,
html.dark .test-folder-menu__list button {
  color: #e2e8f0;
}

html.dark .test-folder-menu__list a:hover,
html.dark .test-folder-menu__list button:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.dark .test-folder-menu__list .test-folder-delete-btn,
html.dark .test-folder-menu__list .is-danger {
  color: #fca5a5;
}

html.dark .test-folder-card__icon {
  background: linear-gradient(145deg, rgba(30, 107, 75, 0.32) 0%, rgba(30, 107, 75, 0.12) 100%);
  color: #8fd6b2;
}

html.dark .test-folder-card__icon--muted {
  background: linear-gradient(145deg, rgba(148, 163, 184, 0.24) 0%, rgba(148, 163, 184, 0.1) 100%);
  color: #94a3b8;
}

html.dark body.page-manager .test-folder-card__metric {
  border-color: rgba(107, 197, 154, 0.22);
  background: linear-gradient(135deg, rgba(30, 107, 75, 0.2) 0%, rgba(30, 107, 75, 0.08) 55%, rgba(15, 23, 42, 0.35) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.dark body.page-manager .test-folder-card--loose .test-folder-card__metric {
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.16) 0%, rgba(15, 23, 42, 0.35) 100%);
}

html.dark .manager-folder-detail__head {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

html.dark .manager-folder-detail__back {
  border-color: rgba(107, 197, 154, 0.28);
  background: rgba(30, 107, 75, 0.14);
  color: #8fd6b2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

html.dark .manager-folder-detail__back:hover {
  background: rgba(30, 107, 75, 0.22);
  border-color: rgba(107, 197, 154, 0.45);
  box-shadow: 0 4px 14px rgba(30, 107, 75, 0.18);
}

html.dark .manager-folder-detail__icon {
  background: linear-gradient(145deg, rgba(30, 107, 75, 0.32) 0%, rgba(30, 107, 75, 0.12) 100%);
  color: #8fd6b2;
}

html.dark .manager-folder-detail__title {
  color: #e2e8f0;
}

html.dark body.page-manager .test-folder-card__metric-value {
  color: #8fd6b2;
}

html.dark body.page-manager .test-folder-card--loose .test-folder-card__metric-value {
  color: #cbd5e1;
}

html.dark .test-card-folder {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.2);
}

html.dark .test-card-folder__select {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(148, 163, 184, 0.22);
  color: #e2e8f0;
}
