:root {
    --bg: #0e1324;
    --ink: #f3f4f6;
    --muted: #b4bfcc;
    --card: rgba(19, 27, 45, 0.9);
    --line: rgba(148, 163, 184, 0.32);
    --accent: #8fb2ff;
    --accent-strong: #6f96ff;
    --accent-warm: #f7b27a;
    --accent-warm-strong: #f09445;
    --highlight: rgba(143, 178, 255, 0.18);
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    --glass: blur(22px) saturate(140%);
    --success: #4ade80;
    --warning: #fbbf24;
  }

  body {
    background: radial-gradient(circle at 20% 0%, rgba(48, 72, 120, 0.55), transparent 52%),
      radial-gradient(circle at 85% 15%, rgba(120, 60, 35, 0.45), transparent 48%),
      linear-gradient(180deg, #0b1122 0%, #0f162b 55%, #111a33 100%);
    color: var(--ink);
  }

  body::before {
    background: radial-gradient(circle, rgba(100, 150, 255, 0.28), transparent 70%);
  }

  body::after {
    background: radial-gradient(circle, rgba(255, 160, 100, 0.26), transparent 70%);
  }

  input,
  select,
  textarea {
    background: rgba(10, 15, 28, 0.9);
    border-color: var(--line);
    color: var(--ink);
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(189, 199, 214, 0.7);
  }

  .card,
  .panel,
  .overview-card,
  .hero-card,
  .hero-aside,
  .list-item,
  .feature,
  .subfeature,
  .account-card,
  .operation-group,
  .operation-preview,
  .flow-main-row,
  .flow-mini-row,
  .flow-group,
  .flow-schedule,
  .schedule-item,
  .schedule-builder,
  .schedule-content,
  .bank-selector,
  .season-pass-config,
  .land-config,
  .voucher-config,
  .account-checkbox,
  .account-checkbox-expandable,
  .resource-checkboxes,
  .modal-card {
    background: rgba(19, 27, 45, 0.9);
    border-color: var(--line);
  }

  .card,
  .panel,
  .overview-card,
  .hero-card,
  .hero-aside,
  .modal-card {
    border-color: rgba(148, 163, 184, 0.35);
  }

  .masthead {
    border-color: rgba(148, 163, 184, 0.35);
  }

  .tag {
    background: rgba(143, 178, 255, 0.22);
    color: #c4d6ff;
  }

  .status-pill {
    background: rgba(143, 178, 255, 0.24);
    color: var(--muted);
  }

  .chip {
    background: rgba(148, 163, 184, 0.2);
    color: var(--ink);
  }

  .chip.info {
    background: rgba(143, 178, 255, 0.22);
    color: #d4e2ff;
  }

  .chip.ok {
    background: rgba(74, 222, 128, 0.22);
    color: #bbf7d0;
  }

  .chip.missing {
    background: rgba(251, 191, 36, 0.24);
    color: #fde68a;
  }

  .pill {
    background: rgba(143, 178, 255, 0.2);
    color: var(--muted);
  }

  .pill.disabled {
    background: rgba(148, 163, 184, 0.18);
  }

  .help-icon {
    background: rgba(10, 15, 28, 0.8);
    border-color: var(--line);
    color: #c4d6ff;
  }

  .help-icon:hover {
    background: rgba(143, 178, 255, 0.25);
  }

  .warning {
    background: rgba(110, 50, 28, 0.6);
    color: #ffd6b8;
    border-left-color: var(--accent-warm);
  }

  .subfeature {
    border-color: rgba(148, 163, 184, 0.25);
  }

  .operation-group-title {
    background: rgba(148, 163, 184, 0.16);
  }

  .operation-option:hover {
    background: rgba(143, 178, 255, 0.16);
  }

  .operation-option:has(input:checked) {
    background: rgba(143, 178, 255, 0.24);
  }

  .preview-title code {
    background: rgba(143, 178, 255, 0.22);
    color: #d4e2ff;
  }

  .tab-nav {
    background: linear-gradient(
      90deg,
      rgba(18, 28, 50, 0.62),
      rgba(16, 24, 44, 0.42),
      rgba(18, 28, 50, 0.62)
    );
    border-color: rgba(148, 163, 184, 0.42);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
  }

  .tab-btn:hover {
    background: rgba(143, 178, 255, 0.14);
    color: var(--ink);
  }

  .tab-btn.active {
    background: var(--accent);
    color: #0b1224;
  }

  .sub-tab-btn.active {
    color: #d4e2ff;
    border-bottom-color: #d4e2ff;
  }

  .account-checkbox:hover {
    background: rgba(143, 178, 255, 0.16);
  }

  .account-checkbox.checked {
    background: rgba(143, 178, 255, 0.22);
    border-color: rgba(143, 178, 255, 0.4);
  }

  .account-checkbox-expandable.checked .account-checkbox {
    background: rgba(143, 178, 255, 0.2);
  }

  .cron-value,
  .schedule-cron {
    background: rgba(148, 163, 184, 0.24);
    color: var(--muted);
  }

  .schedule-tab.active {
    background: rgba(19, 27, 45, 0.95);
  }

  .schedule-select {
    background: rgba(10, 15, 28, 0.9);
    color: var(--ink);
  }

  .flow-box {
    background: rgba(19, 27, 45, 0.9);
    border-color: var(--line);
    color: var(--ink);
  }

  .flow-box.bank {
    background: linear-gradient(135deg, #5c87ff, #3356d6);
  }

  .flow-box.regular {
    background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.18),
      rgba(16, 185, 129, 0.05)
    );
  }

  .flow-box.season {
    background: linear-gradient(
      135deg,
      rgba(245, 158, 11, 0.2),
      rgba(245, 158, 11, 0.05)
    );
  }

  .flow-box.claim {
    background: linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.2),
      rgba(139, 92, 246, 0.05)
    );
  }

  .flow-box.land {
    background: linear-gradient(
      135deg,
      rgba(20, 184, 166, 0.2),
      rgba(20, 184, 166, 0.05)
    );
  }

  .flow-box.voucher {
    background: linear-gradient(
      135deg,
      rgba(236, 72, 153, 0.2),
      rgba(236, 72, 153, 0.05)
    );
  }

  .flow-mini-op {
    background: rgba(19, 27, 45, 0.92);
  }

  .flow-main-row {
    background: linear-gradient(180deg, rgba(143, 178, 255, 0.12), transparent);
  }

  .connector-line {
    background: linear-gradient(90deg, var(--line), var(--line));
  }

  .connector-timing {
    color: #6ee7b7;
    background: rgba(74, 222, 128, 0.2);
  }

  .connector-timing.inactive {
    background: rgba(148, 163, 184, 0.22);
    color: var(--muted);
  }

  .vertical-op {
    background: rgba(143, 178, 255, 0.24);
    color: #d4e2ff;
  }

  .vertical-op .op-timing {
    color: #d4e2ff;
    background: rgba(143, 178, 255, 0.24);
  }

  .role-toggle {
    background: rgba(148, 163, 184, 0.2);
  }

  .role-toggle.active {
    background: rgba(143, 178, 255, 0.26);
    border-color: var(--accent);
    color: #d4e2ff;
  }

  .btn-ghost {
    border-color: var(--line);
    color: var(--ink);
    background: rgba(10, 15, 28, 0.62);
  }

  .topbar-brand h1 {
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  }

  .topbar-controls {
    background: rgba(12, 18, 34, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    padding: 6px 8px;
  }

  .topbar-controls button {
    background: transparent;
  }

  .theme-btn:hover {
    background: rgba(148, 163, 184, 0.15);
  }

  .tab-btn {
    color: rgba(214, 224, 238, 0.78);
  }

  .tab-btn.active {
    box-shadow: 0 12px 22px rgba(11, 17, 34, 0.5);
  }

.btn-danger {
  color: #fca5a5;
}

.run-item:has(.run-log-container:not(.hidden)) {
  background: rgba(19, 27, 45, 0.95);
  border-color: var(--accent);
}

.job-toggle-on {
  background: rgba(74, 222, 128, 0.14);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
}

.job-toggle-on .status-dot {
  background: #4ade80;
}

.job-toggle-off {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  border-color: rgba(148, 163, 184, 0.22);
}

.login-card {
  background: rgba(19, 27, 45, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.38);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.5);
}

.login-copy {
  color: #c4cfdd;
}

.login-card .field-help {
  color: #a8b4c7;
}

.login-card input {
  background: rgba(8, 13, 26, 0.95);
  border-color: rgba(148, 163, 184, 0.36);
}

.login-card .btn-primary {
  min-height: 44px;
  padding-inline: 22px;
}
}