:root {
    --bg-color: #f6f8fb;
    --text-main: #243043;
    --text-muted: #607088;
    --text-subtle: #8190a8;
    --surface-color: #ffffff;
    --surface-active: #eff3f9;
    --surface-card: #eff4fa;
    --surface-card-alt: #f2f6fb;
    --surface-icon: #dfe9f4;
    --header-border: rgba(188, 199, 214, 0.4);
    --divider-color: rgba(201, 209, 221, 0.75);
    --card-border: rgba(201, 211, 224, 0.28);
    --card-gradient: linear-gradient(180deg, #f1f5fb 0%, #eef3f9 100%);
    --brand-shadow: 0 12px 28px rgba(110, 126, 154, 0.16);
    --button-emphasis-bg: #5b6784;
    --button-emphasis-hover: #4f5b77;
    --button-emphasis-text: #ffffff;
    --button-soft-bg: #edf2f8;
    --button-soft-hover: #e5ecf4;
    --link-color: #5b6784;
    --shadow-focus: 0 0 0 3px rgba(101, 118, 149, 0.18);
    --scrollbar-thumb: rgba(97, 114, 144, 0.48);
    --scrollbar-thumb-hover: rgba(84, 100, 127, 0.68);
    --scrollbar-track: rgba(223, 233, 244, 0.34);
}

:root[data-theme="dark"] {
    --bg-color: #111925;
    --text-main: #eef4fc;
    --text-muted: #7f95b3;
    --text-subtle: #667992;
    --surface-color: #111925;
    --surface-active: #1a2737;
    --surface-card: #161f2b;
    --surface-card-alt: #182331;
    --surface-icon: #223245;
    --header-border: rgba(44, 60, 79, 0.92);
    --divider-color: rgba(55, 72, 94, 0.9);
    --card-border: rgba(58, 75, 97, 0.38);
    --card-gradient: linear-gradient(180deg, #161f2b 0%, #17212d 100%);
    --brand-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
    --button-emphasis-bg: #a6b1c8;
    --button-emphasis-hover: #b3bdd2;
    --button-emphasis-text: #162130;
    --button-soft-bg: #162231;
    --button-soft-hover: #1c2838;
    --link-color: #b8c8e1;
    --shadow-focus: 0 0 0 3px rgba(184, 201, 228, 0.22);
    --scrollbar-thumb: rgba(166, 177, 200, 0.36);
    --scrollbar-thumb-hover: rgba(184, 200, 225, 0.56);
    --scrollbar-track: rgba(34, 50, 69, 0.34);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.35;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

html,
body,
.task-modal,
.task-modal-card {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.task-modal::-webkit-scrollbar,
.task-modal-card::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.task-modal::-webkit-scrollbar-track,
.task-modal-card::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.task-modal::-webkit-scrollbar-thumb,
.task-modal-card::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--scrollbar-thumb) 0%,
        color-mix(in srgb, var(--scrollbar-thumb) 72%, transparent) 100%
    );
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    min-height: 44px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.task-modal::-webkit-scrollbar-thumb:hover,
.task-modal-card::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--scrollbar-thumb-hover) 0%,
        color-mix(in srgb, var(--scrollbar-thumb-hover) 76%, transparent) 100%
    );
    border: 3px solid transparent;
    background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.task-modal::-webkit-scrollbar-corner,
.task-modal-card::-webkit-scrollbar-corner {
    background: transparent;
}

img {
    display: block;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    background: none;
    border: 0;
    font: inherit;
}

a {
    color: inherit;
}

.icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon-tasks {
    -webkit-mask-image: url("../assets/icons/tasks.svg");
    mask-image: url("../assets/icons/tasks.svg");
}

.icon-settings {
    -webkit-mask-image: url("../assets/icons/settings.svg");
    mask-image: url("../assets/icons/settings.svg");
}

.icon-login {
    -webkit-mask-image: url("../assets/icons/login.svg");
    mask-image: url("../assets/icons/login.svg");
}

.icon-plus {
    -webkit-mask-image: url("../assets/icons/plus.svg");
    mask-image: url("../assets/icons/plus.svg");
}

.icon-shuffle {
    -webkit-mask-image: url("../assets/icons/shuffle.svg");
    mask-image: url("../assets/icons/shuffle.svg");
}

.icon-theme.is-moon {
    -webkit-mask-image: url("../assets/icons/moon.svg");
    mask-image: url("../assets/icons/moon.svg");
}

.icon-theme.is-sun {
    -webkit-mask-image: url("../assets/icons/sun.svg");
    mask-image: url("../assets/icons/sun.svg");
}

.icon-large {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
}

button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 60px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--header-border);
    background-color: var(--surface-color);
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
}

.brand-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(var(--brand-shadow));
}

.brand-icon img {
    width: 36px;
    height: 36px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.header-nav-item,
.icon-btn,
.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.header-nav-item {
    min-height: 34px;
    padding: 0 14px;
}

.header-nav-item:hover,
.icon-btn:hover {
    background: var(--button-soft-bg);
    color: var(--text-main);
}

.header-nav-item.is-active {
    background: var(--surface-active);
    color: var(--text-main);
}

.header-divider {
    width: 1px;
    height: 24px;
    background: var(--divider-color);
    margin: 0 2px 0 4px;
}

.icon-btn {
    width: 34px;
    height: 34px;
}

.btn-login {
    min-height: 40px;
    padding: 0 16px;
    margin-left: 2px;
    background: var(--button-emphasis-bg);
    color: var(--button-emphasis-text);
}

.btn-login:hover {
    background: var(--button-emphasis-hover);
}

.btn-login:hover,
.header-nav-item:hover,
.icon-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .header {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 18px;
    }

    .header-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .header-divider {
        display: none;
    }
}

@media (max-width: 560px) {
    .header-nav {
        gap: 8px;
    }

    .header-nav-item {
        flex: 1 1 auto;
        justify-content: center;
    }

    .btn-login {
        width: 100%;
    }
}