:root {
    color-scheme: light;
    --page-bg: #f5f7fb;
    --surface-bg: #ffffff;
    --surface-muted-bg: #f1f4f8;
    --surface-alt-bg: #e9edf3;
    --text-main: #1f2937;
    --text-muted: #64748b;
    --border-color: #d9e0ea;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
    --button-bg: #f1f5f9;
    --button-text: #1f2937;
    --button-hover-bg: #e2e8f0;
    --primary-bg: #2563eb;
    --primary-hover-bg: #1d4ed8;
    --primary-text: #ffffff;
    --success-bg: #198754;
    --success-hover-bg: #146c43;
    --danger-bg: #d9534f;
    --danger-text: #ffffff;
    --link-hover: #1d4ed8;
    --table-row-odd: #ffffff;
    --table-row-even: #eef2f7;
    --table-row-hover: #d8f5dc;
    --status-pending-bg: #fff4d6;
    --status-pending-text: #8a5a00;
    --status-running-bg: #dff1ff;
    --status-running-text: #035388;
    --status-success-bg: #dff6e5;
    --status-success-text: #146534;
    --status-failed-bg: #ffe2e2;
    --status-failed-text: #9f1d1d;
    --code-bg: #f8fafc;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #0f172a;
    --surface-bg: #172033;
    --surface-muted-bg: #111827;
    --surface-alt-bg: #1f2a44;
    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #334155;
    --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.32);
    --button-bg: #243044;
    --button-text: #e5e7eb;
    --button-hover-bg: #334155;
    --primary-bg: #3b82f6;
    --primary-hover-bg: #2563eb;
    --primary-text: #ffffff;
    --success-bg: #22c55e;
    --success-hover-bg: #16a34a;
    --danger-bg: #ef4444;
    --danger-text: #ffffff;
    --link-hover: #93c5fd;
    --table-row-odd: #172033;
    --table-row-even: #111827;
    --table-row-hover: #17351f;
    --status-pending-bg: #4a3614;
    --status-pending-text: #facc15;
    --status-running-bg: #12334d;
    --status-running-text: #7dd3fc;
    --status-success-bg: #12351f;
    --status-success-text: #86efac;
    --status-failed-bg: #4a1d1d;
    --status-failed-text: #fca5a5;
    --code-bg: #0b1120;
}

html {
    background: var(--page-bg);
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: inherit;
}

input,
select,
textarea {
    background: var(--surface-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

button {
    color: inherit;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--button-bg);
    color: var(--button-text);
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
    background: var(--button-hover-bg);
}

.theme-toggle__icon {
    font-size: 14px;
    line-height: 1;
}

.card,
.modal-content,
.dropdown-menu {
    background: var(--surface-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

.form-control {
    background: var(--surface-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

.form-control:focus {
    background: var(--surface-bg);
    color: var(--text-main);
}

.btn-primary {
    background: var(--primary-bg);
    border-color: var(--primary-bg);
    color: var(--primary-text);
}

.btn-primary:hover {
    background: var(--primary-hover-bg);
    border-color: var(--primary-hover-bg);
}