:root {
    --theme-toggle-bg: rgba(15, 23, 42, 0.88);
    --theme-toggle-text: #f8fafc;
    --theme-toggle-border: rgba(148, 163, 184, 0.3);
    --theme-toggle-shadow: 0 20px 45px rgba(2, 6, 23, 0.28);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-main: #0f1117;
    --bg-card: rgba(26, 31, 46, 0.78);
    --bg-card-hover: rgba(30, 36, 51, 0.92);
    --bg-color: #0f172a;
    --sidebar-bg: rgba(30, 41, 59, 0.7);
    --content-bg: rgba(30, 41, 59, 0.4);
    --bg-board: #0e1015;
    --bg-column: #14171f;
    --bg-panel: #12151d;
    --bg-0: #07090f;
    --bg-1: #0d1018;
    --bg-2: #111520;
    --bg: #0f1117;
    --card: rgba(26, 31, 46, 0.7);
    --panel: #171b26;
    --panel-2: #1d2332;
    --border-color: rgba(45, 55, 72, 0.5);
    --border: rgba(255, 255, 255, 0.08);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text: #f8fafc;
    --muted: #94a3b8;
    --theme-toggle-bg: rgba(15, 23, 42, 0.88);
    --theme-toggle-text: #f8fafc;
    --theme-toggle-border: rgba(148, 163, 184, 0.3);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg-main: #f4f7fb;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-color: #eef3fb;
    --sidebar-bg: rgba(255, 255, 255, 0.86);
    --content-bg: rgba(255, 255, 255, 0.82);
    --bg-board: #eef3fb;
    --bg-column: #ffffff;
    --bg-panel: #ffffff;
    --bg-0: #f8fbff;
    --bg-1: #eef4fb;
    --bg-2: #e5edf7;
    --bg: #f4f7fb;
    --card: rgba(255, 255, 255, 0.92);
    --panel: #ffffff;
    --panel-2: #f5f8fc;
    --border-color: rgba(148, 163, 184, 0.28);
    --border: rgba(148, 163, 184, 0.28);
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text: #0f172a;
    --muted: #475569;
    --theme-toggle-bg: rgba(255, 255, 255, 0.95);
    --theme-toggle-text: #0f172a;
    --theme-toggle-border: rgba(148, 163, 184, 0.35);
}

html[data-theme] body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

html[data-theme="dark"] body {
    background-color: var(--bg-main, #0f1117) !important;
    color: var(--text-primary, #f8fafc) !important;
}

html[data-theme="light"] body {
    background-color: var(--bg-main, #f4f7fb) !important;
    color: var(--text-primary, #0f172a) !important;
}

html[data-theme="dark"] body > div[style],
html[data-theme="dark"] body > main[style],
html[data-theme="dark"] body > section[style] {
    background: rgba(15, 23, 42, 0.96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

html[data-theme="light"] body > div[style],
html[data-theme="light"] body > main[style],
html[data-theme="light"] body > section[style] {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: #f8fafc !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] strong,
html[data-theme="light"] b {
    color: #0f172a !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] .role-title,
html[data-theme="light"] .card-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #0f172a !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] label {
    color: #cbd5e1;
}

html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] span,
html[data-theme="light"] td,
html[data-theme="light"] th,
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] label {
    color: #334155;
}

html[data-theme="dark"] h2[style] {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border-left-color: #60a5fa !important;
}

html[data-theme="light"] h2[style] {
    background-color: #f8fafc !important;
    border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] hr[style] {
    opacity: 0.8;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--theme-toggle-border);
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-text);
    backdrop-filter: blur(14px);
    box-shadow: var(--theme-toggle-shadow);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    max-width: calc(100vw - 32px);
}

.theme-toggle:hover {
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 3px;
}

.theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.15);
    font-size: 14px;
}

.theme-toggle__label {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .theme-toggle {
        top: 14px;
        right: 14px;
        padding: 11px 14px;
        font-size: 13px;
    }

    .theme-toggle__label {
        display: none;
    }
}