:root {
    color-scheme: light;

    --color-page: #e7e9f0;
    --color-page-accent: #dedff0;
    --color-surface: #f1f2f6;
    --color-surface-elevated: #f6f6f8;
    --color-control: #e9ebf1;
    --color-surface-subtle: #dfe2ea;
    --color-surface-hover: #e2e2f2;
    --color-text: #172033;
    --color-text-soft: #354158;
    --color-text-muted: #768197;
    --color-border: #cfd3de;
    --color-border-strong: #b9bfcd;
    --color-divider: rgba(23, 32, 51, 0.12);

    --color-primary: #635bff;
    --color-primary-hover: #5148e8;
    --color-primary-soft: #eeedff;
    --color-primary-border: #cbc8ff;
    --color-on-accent: #ffffff;

    --color-sidebar: #181827;
    --color-sidebar-border: rgba(255, 255, 255, 0.09);
    --color-sidebar-muted: #999caf;
    --color-sidebar-active: #635bff;
    --color-sidebar-hover: rgba(255, 255, 255, 0.07);

    --color-success: #15825f;
    --color-success-surface: #e8f7f1;
    --color-warning: #ad6800;
    --color-warning-surface: #fff5dc;
    --color-danger: #d93d55;
    --color-danger-surface: #ffedf0;
    --color-danger-border: #f3a3b0;
    --color-overlay: rgba(15, 20, 35, 0.48);
    --color-shadow: rgba(31, 36, 50, 0.10);
    --color-shadow-strong: rgba(31, 36, 50, 0.16);

    --color-scrollbar-thumb: #bcc2cf;
    --color-scrollbar-thumb-hover: #969eae;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-card: 0 1px 2px rgba(21, 25, 36, 0.03), 0 10px 30px var(--color-shadow);
    --shadow-float: 0 24px 70px var(--color-shadow-strong);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-page: #101119;
    --color-page-accent: #1a1932;
    --color-surface: #181a25;
    --color-surface-elevated: #1f2130;
    --color-control: #141620;
    --color-surface-subtle: #222532;
    --color-surface-hover: #292b43;
    --color-text: #f2f3f8;
    --color-text-soft: #c8ccda;
    --color-text-muted: #8f95aa;
    --color-border: #2d3040;
    --color-border-strong: #414559;
    --color-divider: rgba(238, 240, 248, 0.08);

    --color-primary: #8179ff;
    --color-primary-hover: #958eff;
    --color-primary-soft: #292747;
    --color-primary-border: #4d4985;

    --color-sidebar: #0d0e15;
    --color-sidebar-border: rgba(255, 255, 255, 0.08);
    --color-sidebar-muted: #85899a;
    --color-sidebar-active: #6e66ee;
    --color-sidebar-hover: rgba(255, 255, 255, 0.06);

    --color-success: #64d6ae;
    --color-success-surface: #17362d;
    --color-warning: #ffca69;
    --color-warning-surface: #3c2e14;
    --color-danger: #ff7388;
    --color-danger-surface: #3b2028;
    --color-danger-border: #8f4050;
    --color-overlay: rgba(0, 0, 0, 0.68);
    --color-shadow: rgba(0, 0, 0, 0.24);
    --color-shadow-strong: rgba(0, 0, 0, 0.46);

    --color-scrollbar-thumb: #3d4050;
    --color-scrollbar-thumb-hover: #55596d;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

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

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 80% 0%, var(--color-page-accent) 0, transparent 28rem),
        var(--color-page);
    color: var(--color-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
}

::selection {
    background: var(--color-primary-border);
    color: var(--color-text);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scrollbar-thumb-hover);
}

#page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    /* Справа закреплён колокольчик — держим для него полосу. */
    padding: 0 52px 4px 2px;
    color: var(--color-text);
}

.page-subtitle {
    margin: 0;
    color: var(--color-text-muted);
}

#page-title {
    color: var(--color-text);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

:focus-visible {
    outline: 3px solid var(--color-primary-border);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}